Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.8 Task Updating

With our task editing form in place, and edited tag lists being processed correctly, we're now ready to add task updating functionality to our controller. In this lesson, you'll learn how to refresh the list of all tags being used across all tasks, and update local storage for both tags and tasks.

2.8 Task Updating

Hi Welcome back to Create a Foundation for Apps Controller Using Angular JS. In this lesson, we're going to create the update tasks function that gets called whenever the updateTasks button on the task editing form in the UI. And we've already processed the tags to make sure that they're in a great format and angular to a data binding ensures that as soon as a person changes anything in any of the fields in the editing form the information for that task in the scope variable is automatically updated. So now what we need to do is save that updated information into local storage. And then we'll also need to update the old tags array that we're using to track all of the tags that are used across all of the tasks in the app. And then we need to resave that old tags data back into local storage as well. So begin by setting up the function, so I'll add skype update tasks equals function and we don't need to pass any items in this case because we're just saving the entire set of data that is being tracked in scope tasks into local storage. So we don't have to worry about targeting any one particular task. So first we will just update local storage for a save tasks and there is nothing different that we have to do here then what we've done before. We'll just add localstorage.setitem and the item we're targeting is saved tasks. And once again we use JSON.stringify and we pass scope tasks. Before we can update the all tags local storage item we need to update it to account for anything that might have been changed in the tags of the tasks that was being edited. So the first thing that we're gonna do is iterate through our tasks and get an updated list of all the tags around all of those tasks. And the reason that we're gonna check on all the talks not just the one that was being edited. Is but the way that this UI works, somebody might actually edit more than one task before they hit that Update Task button. So in case there has been more than one task that's changed, we're gonna just check on all of the tags to make sure that our information is accurate. So set up a for loop and then we're gonna be updating the scope.allTags, array. And every time we iterate through a task, we're gonna concatenate the tags of that task into the allTags array. So that's scope.allTags.concat. And in here we'll pass the tags of the task that we're currently iterating. So now we definitely know that our scope all tags array has all the tags that are being used on any task and now we just need to filter out any duplicates that are there, and we're going to do that with the exact same code that we used earlier to strip out any duplicate tags. So just like we did before, we're filtering through our old tags array. Now we're only returning each of the tags if it isn't already present in the array. So now we can go ahead and update local storage with our updated all tags array. So we'll shortcut this just by making a copy of this line and pasting it in. We'll change the string for the item that we're targeting to all tags and then through JSON.stringify we'll pass scope all tags. And then just to give us a little bit of feedback to make sure everything's working properly well that console log tasks updated. Okay, so our update tasks function is finished. Let's jump back into our app and make sure that everything is working as we expect. Okay, so let's make some little changes here. Change the title and we'll change the description and we will add in a new tag. Now hit our update button and there's a message in the console to tell us that the function has fired and run correctly. And now if we refresh the page, we should see that this information here has been retained and so has this information here. All right, so there we go all that is that we've made are still there after refresh. Meaning that they have been probably saved into local storage. So we've now go all the most important functionality in place for our task management app. We've got the ability to add new talks with this form up at the top here. We're tracking all of the tags that are used across all our tasks. We have a display for our tasks. We have the ability to delete them, and we also have the ability to edit them. Now we just have a couple more steps to complete. Once our controller is finished, this app is gonna be handed off to UI. And one of the things that the UI is going to do is give users the ability to change the background color of their tasks. So right now the task has a white background color. But this application is gonna provide the ability to change that to different colors like green or red. Giving the user and extra way that they can categorize their tasks and help them keep everything organized. So in the next lesson, we're gonna add a function into our controller that will power that color-switching feature. We'll just be adding in a couple of basic colors to make sure that everything works properly. And then that will lay the groundwork for that color switching functionality to be taken further during the UI design phase. So I'll see you in the next lesson.

Back to the top