Add New Properties to an Existing Document in Firebase through a Ionic Action Sheet

Instructor: [0:00] Now, let's work on adding more properties to our task so that we can all see how we update existing documents in the data. We are going to add a new property to our task interface called Assignee. Assignee is going to be either a string or it's going to be.

[0:18] We are getting an error here because we are missing the assignee variable and after fixing it, we want to show it right below the segment that shows the task status. For that, I'm going to go here. I have the segment and I'm going to take advantage of Ionic UI components and I'm going to use one called Ion Chip.

[0:47] This chip is going to have an icon and a label. When I save, you can see it here on the screen, assign this task. Now, I'm going to add a click handler on the chip so that when the user clicks it, it calls the assign task function. There are multiple ways we can show how to add this assignee in our UI.

[1:16] For this example, I want to use one of Ionic's components called the Action Sheet Controller. What this specific controller does is it triggers a button sheet. It will pop up here a menu in our application showing us the different functions.

[1:34] To show those different options, I'm going to create a variable here called Team and it's going to be an array of names. Now, I can go create my Assign Task function. First, I'm going to create my action sheet. This one takes a header, a subheader, and it takes an array of a button.

[2:09] The buttons have their own interface. They need to have the text and they need to have the data. Optionally, you can add a role to the button. For example, this one would be of role Cancel.

[2:28] We want to show the team members here as a list of buttons. What we're going to do is we are going to create a buttons array up here and we are going to map through the team variable. For each member in that variable, we are going to say both the text and the data are going to have the value of member.

[3:01] These buttons here, it's going to be an array of text and data. It's going to be like text Jorge Vergara, data Jorge Vergara and so on. Once we create it, we are going to display our action sheet.

[3:23] You see that when I click assign this task is going to display the action sheet. It's going to say pick a team member and we have the options -- Jorge Vergara, Andres Everett, John Doe, Jane Doe, and cancel. The action sheet has an onDismiss handler that gives us the result of the button that the user clicks.

[3:44] I can say here let's await for the action sheet to dismiss and when it does dismiss is going to save the value in this result variable. If there is no data meaning that the user clicked outside of the action sheet or they click Cancel, we are going to return the function, but if there is data, what we want to do is that we want to add that assignee to our task object.

[4:17] Since we are using a behavior subject, we can do that, assigning a next value, and we say we want to have the same value we have inside the task and we want to add this new property assignee that's going to be the data. Now when I click assign this task and I select for example Andres Everett, we have a new assignee selected but we don't really have a way for the user to see at the moment.

[4:41] Let's go back to our task page and look for the label assign this task and we are going to replace this with a variable. We are going to say here we are going to show task assignee and we are going to use optional training to say if there is no assignee then display assign this task.

[5:05] Now, when I click on Assign this Task and select Jorge Vergara, you'll see that it changes and it says that the task is selected to Jorge Vergara. If I click Save Task here, it updated the task and I can go to the database. First look for the task, is this one right here, the task here in progress, and you see that it added the assignee, Jorge Vergara.