2.2 Task Creation

Hey, welcome back to Create a Controller for Foundation for Apps using AngularJS. In this lesson, we're going to get the task creation process up and running. We're going to set up some new variables inside the app scope to handle our task. We're going to create a form in the UI that people can use to set up new tasks. And we're going to process the submissions from the form through our controller, and into local storage. All right now, we're gonna start by adding in some form code into our home.html template. This is the same one that you worked with in the last lesson. So first we'll just delete the default content that's already there. Let's make some space, and then you want to add this HTML. Now you can actually get all of this code, just so you can copy and paste it yourself, from the source code that you'll download as part of this course. But let's take a quick look at what we have here. So you have an input field that we're using for our Task Title. We have a text area where the user can put in a description of the task. And then we have another text input field where the user can enter a comma separated list of tags. And then finally at the bottom, we're using a button that will submit the newly created task. Now you'll see on each of the input fields we're using ng-model. Now what this is going to do is temporarily attach the information that's entered into each of these three fields to the new task object. And then on our submission button, we're using ng-click to fire off a function named CreateTask. And were passing it through the title, the body, and the tags for the task, as arguments through that function. And then once that's done, we're setting that newTask object to be empty so that the form is cleared and ready to be used the next time somebody wants to fill in another new task in each of these fields. So we'll save that and let it re-compile. And then here is how our new form looks inside our UI. Right now that's not going to do anything though, because we don't have that CreateTask function set up inside our controller yet. So let's go ahead and do that now. All right, so we're back in our app.js file. Let's scroll down to the bottom and rid of the console.log message that we were using before. And now we can start adding in the functions that are going to comprise our controller. Now in order for the UI to be able to access the functions inside this controller, every function needs to be added underneath that scope variable. So we'll set up our CreateTask function like this. And then we want to pass our title, body, and tags information that's coming in from our UI as three arguments. So we'll go title, body, tags. All right, so now when somebody hits that Submit button on the form, it's going to fire this function off and it's going to send that information through these three arguments. Now we need to take that information and process it into a form that's ready for pushing into local storage. And to begin with, that means combining those three separate pieces of information into one object. So first we'll create a variable named task, that will be an object that will hold these three things. Now we'll add the title and the body into this object. So we're taking those first two pieces of information that have come through the first two arguments, and we're combining them in under the task object. You'll notice that we're not adding the tags in just yet. And that's because the tags are a comma separated list, so it needs to process those tags first before we add them into local storage. And we're going to do that in a later video. So for now, we're just putting the title and the body into that object. Now as well as the information that's being passed through, we're also going to need to give a unique ID to each of these tasks. And we're going to do that by just getting a current timestamp. So we'll say task.id equals Date.now. So then every task will have a unique ID that we can use for things that are going to be required in the UI later on. So now all the data for that one task that's being created right now is assembled under one object. But before we can push that information into local storage, we're gonna need to set up a variable that can hold the information on all the tasks that are being tracked in the task manager app. And that's going to be done under an array. So up above the CreateTask function, we're going to set up scope.tasks. Plural with an S on the end, and we're going to set that to be an empty array. Now back in our CreateTask function, we can take the task object that we've just created and we can push it into our scope.tasks array. And we do that like so. And now that our scope.tasks array has been updated, we can take that array and we can put it into local storage. So we're going to say localStorage.setItem, and we're going to set an item called saved_tasks. Now we're gonna take our scope.tasks array and we're going to convert it into a JSON stream. To do that, we'll use JSON.stringify and we'll pass our scope.tasks array. All right, now we're almost done. But before we wrap up, we need to make sure that when that task manager app is first loaded up, we check in local storage to see what tasks are already there. And then only if there's no tasks already in local storage, would we set scope.tasks to be an empty array. So back up here, we're going to say scope.tasks again. And this time instead of using setItem, we're gonna use getItem to check on the saved_tasks item and see if there's any content there. And because we previously used JSON.stringify to convert our array into a JSON string, we're gonna use JSON.parse so we turn it back into an array. So first we'll say JSON.parse, and then inside there we'll go localStorage.getItem, saved_tasks. So after we make that attempt to create an array of tasks by checking in local storage, then we'll look to see if the result that we've gotten back has been either undefined or null. So if there haven't been any tasks previously saved into local storage, then the value of scope.tasks here is always gonna come back as undefined or null. So down here, we're gonna say if. We'll check for undefined by saying typeof $scope.tasks equals undefined. And then we'll also check to see if scope.tasks equals null. And then if either of those are true, then we'll set scope.tasks to equal an empty array. So in short, if there are tasks that have already been saved in a previous session, then they'll be added as an array to the scope.tasks variable in this line. And if not, then scope.tasks will be an empty array in this line. Now before we try this out, we'll just add one more line. And that is another console.log message to just check that everything's working as expected. So down here after all our code has been run, we're gonna check on what is in the saved_tasks item in local storage. And we're gonna output that in the console. So we'll save and let foundation recompile. Okay, so we're back in our app again. Let's give this a test and make sure everything's working. So we'll fill in our title and a description. And we won't worry about the tags at the moment because we're not yet processing them. We'll be processing them in a later lesson. So now we'll hit the Add New Task button. And if everything's working correctly, we should see an array appear in the console with the contents of our new task inside. So there we go, there's our array. And inside, we see our task body, the ID that we set up in our CreateTask function and the title. And then finally before we wrap up this lesson, there's just one more thing that you find particularly handy. We haven't yet built in a DeleteTask function, we will be doing that later. But for now you're probably going to want to play around with things and test things a little bit. And sometimes you're going to want to delete the test tasks that you've added into your app. So as a stop-gap until we create an actual delete function, just come up here and add localStorage.removeItem, saved_tasks. So now we'll save that. And if we go back to our app, now even if we add a new task you can see we only have one task added into local storage. It hasn't retained the task that we added before re-compiling the app. And then of course if you don't want to delete your tasks every time you make a change to your app, just comment that line out. And then un-comment it again whenever you need to use it. Okay now, as you know, we haven't yet set up processing of our tags. These tags are going to be added as a comma separated list. So in the next lesson, you're gonna learn how to take that comma separated list and process it into a collection of distinct tags. You're also gonna start keeping track of all the tags that are used across every individual task. So that way, a user is gonna be able to look at all of the tags that have been used across their task manager app at any given time. I'll see you in the next lesson.