Ionic 4: todo App + firebase

32 Changing ToDo Status Building Mobile Apps with Ionic 4 Vi

in this lesson we are going to learn how we can change the status of a to-do item and mark it as completed so we will start by adding iron item options who

are iron items sliding in the list that will reveal hidden buttons when the list item will slide to either left or right and then will write the code to mark the list item as completed finally we will

remove all the completed to-do items from the list so here we are back inside visual studio code and you can see that I am on the to-do page where I get a list of all the to-do items that I have

created in the application so first things first inside the iron item sliding will use iron item options component and we'll give it a side of end this will place

the hidden option button towards the right and we will have to slide the list item towards the left to reveal it inside this iron item options we will have an iron item option and this will

have a color of secondary and I will also place in an icon inside this button the icon that we want to have has the name checkmark let's save that and see how it looks

so here I have the list and if I slide the list item towards the left I get the option button that is otherwise hidden so now let's go ahead and write the code to mark the list item as completed when

the user taps on this hidden button so I'll wire up the click event of this button to a function and let's call this function as mark completed to this function

we'll pass in the whole document object which is to do as an argument let's save that and now we need to create this function called mark completed so I'll go back to to do start page dot ts file

and at the bottom I'll create this function called mark completed this function receives a document which is of the type query document snapshot as a parameter and inside this function will

write the code to set a field in this document called status as completed so here I use the firestore SDK to access a particular document we'll use the drop function which takes in the

documents unique ID you can access the documents unique ID using document dot ID and on this we'll use the set function the set function allows you to update an existing field or create the

field if the field does not already exist in the document in our case as of now the status field does not exist inside our documents so we will also modify the code to add the new to-do

items to the list so that all the new documents have the status field for now we'll just pass in the value of status as completed and we'll also pass in a second parameter to the set function

which takes in a JSON object and here you can pass in some options the only option that I'll pass in is called merge and we'll set it to true setting the merge value to true ensures that only

the fields that we are passing in to the set function are updated or created all the other fields remain unaffected let's say that and once the document has been updated we can execute the promise on

this so inside the callback for the den function will use the toast controller to display a toast notification to the user to confirm that the to-do item has been marked as completed so we'll have

to import the toast controller to use it inside our then function I'll display this toast notification only for two seconds and then finally we'll present it to the user

let's save that and now we need to modify the code inside our get to lose function to only get the documents that have the status value other than completed so here I'll use another wave

function and to this wave function I'll pass in the first argument as status the second one as the Equality operator and the third one as incomplete so incomplete will be the status of all

the two dues by default when they are created so we'll have to modify a little bit of code inside the add to deuce page as well so I'll open up the add – to do dot page dot T is file and here where we

are passing in all the properties for a new to do will also pass in the status property and we'll set it equal to incomplete so all the two dues that will be created from now on will have the

status of incomplete and we only get all the two dues on our two rules page that have the status of incomplete once a to-do has been marked as completed it will no longer appear in the list of

traduce so now you can see that I do not get any to-do items on the page so we need to fix that so I'll go back to my firebase console and here for these two dues I'll create the status property

manually so now that I have added the Stratis property manually in these documents let's go back to our application and see if we get the documents now or not

so I'll log in and now you can see that I get two documents I'll just go ahead and slide the second one towards the left and I'll tap on this button that will mark this to-do item as completed

so now you can see that the item is no more showing up in the list and I also get the toast notification which confirms that the list item has been marked as completed and therefore it is

no longer showing up in the list so now that we are able to manage the status offer to-do items in the next lesson we'll learn how we can lock the users out of the application and clear the

session so that another user can log in to the application