Quasar Framework: Vue.js Cross Platform App (9/10): Reusable Components, Update & Sync - Edit Task

hi there my name's Danny this is the ninth module of ten that we share in here on YouTube from my full course on quasar framework version one welcome to this course module this module we're going to have the ability to edit tasks so we're going to add a little edit button to each task on the page to do page when the user clicks that we're going to show and edit task modal this modal is going to be very similar to the add task modal so we're also going to break the add task modal down into reusable components and then we're going to build the edit task model based on those reusable components so later on we're going to add an edit button next to this delete button here which when we click it will show an edit task dialogue which will allow us to edit the task and this edit task dialogue is going to look basically the same as this add tasks dialog let's come up the titled the close button and the same fields name to date you type and the Save button so before we create this edit task modal let's break the add task modal down into reusable components so first of all let's make sure this add task model is is always showing let's open up source pages and page to do well set show add tasks to true so this modal is always showing as we're working on it let's open up the add task component and start breaking it up into child components so we want to open components tasks modal's and add tasks view okay so this cue card section here has this title and this close button let's create a child component for that so inside the modal's folder I'll create a new folder called shared because these components are going to be shared among the add tasks modal and the Edit task model as well and then within that will create a new file called modal header doc you lad the different sections now back to add tasks top view I'm going to cut this cue card section and paste it into the modal header dot view save that and are back in the add task top view we need to import this components or scroll down to the bottom and after methods will add any components object and in that will specify the HTML tag name I'll use modal - header and then we want to require dr. fault and then the path to the component which is component slash task slash modal /e d / modal header top you save that and now we can stick this on the page up here I just adding modal header save that okay so this title that's in here we're going to need to be able to change that for the Edit task modal so let's pass down the title as a slot so within this modal header tag we can just add add tasks and then if we open up modal header dot view this text will be available in here as a slot so where it says add tasks here we can just change that to a slot tag like so okay it's still showing that title there and this is being passed down from here okay let's do the same for the name field now so the name field is all inside this row here so I'm going to cut that and in this shared folder I'm going to create a new file called modal task name dot view and I'm going to paste that markup into the template there say that back in add tasks top view will import this component so I'll duplicate this one down here change the tag name to mold old task name and update the path here to road old task name dot view safer and we'll stick that on the page here so Merle dual-task name save that okay so we have an error here says tasks are submit is not defined on the instance but reference during render and that's because within this modal task name component tasks to submit doesn't exist so tasks to submit dot name doesn't exist so we can pass this down as a prop so if we jump back to add task view we'll send a prop called name down and what we're gonna send there we're gonna send TAS to submit name so I'm task to submit dot name save that now in modal task name we need to import that props or a lot of crops array with the prop that we want to receive which is named save that and now now that we're passing this down as a prop we can't use v-model anymore so we need to replace that with value and set that to the prop that we're sending down name save that and now we also need to change this V if to just name and this click handler we also need to change tasks to submit name to just name so just to prop that we're passing now save that okay we can now see the field on the page okay so we're passing down this name field as a prop to this child component but we're not passing it back up again to the parent component adds a stop you so how can we do that well first of all we need to listen to changes on this field we can do that by listening to the input event so we'll add an apt input and then within this will emit an event so like dollar omit and we want to omit the update event and we want to pass to that the name of the prop which is name and it's the second parameter we want to we want to pass the text that the users entered and that's stored in this event variable save that now in order to listen to this on the add task component where we've included the component here and we've added this named prop we need to add and modify it to that prop which is dot sync save that now hopefully this name prop that's in this modal task name component should be synced to tasks to submit name down here and we can check that by just spitting out tasks to submit on the page so I'm just gonna add a pre tag and inside that I'm going to spit out tasks to submit save that okay so we can see tasks to submit down here on the page hopefully if I enter a task name that we should see it appear down here yeah that seems to be working now let's see if this clear button is still working I'll just give that a click okay we have an error here so as avoid mutating a prop directly since the value will be overwritten okay so if we jump back to modal task named up view so we can't modify this prop name directly we have to emit another update event so within this click camera on the close button I'll replace that with our emit then again update name and then the value we want to sell it to is just an empty string so I'll save that I'll refresh the page and to some text if I click the Clear button now works and we have no error let's create a child component for the due date field though so I'll jump back to add tasks this row here is the due date so we'll cut that and we'll create a new component inside this shared folder again called modal due date top view and I'll paste in that code fix the indentation and back in our task will import this so I'll duplicate this one set the HTML tag to model due date update the path to modal dude a top view save that and then we'll stick that here on the page modal due date save that so we have an error here same as before TAS to submit is not defined on the instance so let's jump to modal due date actually we'll first of all past the due date down as a prop with this sync modifier like we did here so I wanna do : and we'll call it due date dot sync and we're going to pass down on tasks to submit dot to date save that then in modal to date we have to be models here so we need to get rid of both of those and replace them with value equals due date which is a prop we're passing doubt meter also add that prop down here price to date we also need to change this test to submit to date to just do date save that so to send the due date back up to the peril component need to like we did on modal task name add these input listeners I'll copy that from modal task name paste it here this time we're gonna update the due date and I'll also add this import event to this cue date component here as well Spray that up onto multiple lines say but okay let's see if we can add a due date though okay starting the date what we still have an error property or method clear due date is not defined okay this method clear due date doesn't exist within this child component it exists within the add tasks component here so what we can do is we can emit a custom event instead on this click handler on the close button so we can just $2 emit we'll call it clear and then back on a task top view we can listen to that here so you can just do that clear so when that clear custom event is fired and then we want to fire this clear due date method so we can just put clear due date in there save that hey let's refresh the page okay we can now add a due date we can see it's being synced back up to the Tass to submit object in the add task view parent component let's do the same for the jus time field now so back in add task view I'm going to cut this rope which has the time field in it a lot and then I'm going to create a new component in the shared folder called modal geo time stop you I'll paste in that markup you this V if directive here I'm going to cut that out and instead put it on the component when we include it here so I'll save that ad task top view will include that do time component update the path model to do model due time top view add that to the page Lord or two time will pass down the Jew type so like we did before do time dot sync equals tasks to submit do time save that now in modal to time we'll import that props or props cue time will replace these V models with value equals to time or replace this with just two type will emit a an update event on this close button this clear button so you want to emit update - time set the value to empty string and we'll add our import event listeners here and here so on the import and on the pop-up as well so at input equals omit update view time set that to event save that I'll refresh the page okay let's see if we can add a two time now great that seems to be working so it's this clear button working yeah that seems to be working let's put this button into a child component app so back in add tasks I'm going to cut this cue card actions component create a new component called modal buttons at the markup I just caught save that now we need to import this component so duplicate that one import modal buttons we'll take this path to model buttons we'll include that on the page here save that okay let's see what happens if we try to save at us though so just fill in the fields click Save okay we have an error here cannot read property validate of undefined in our task so if we jump to add tasks if we look at this submit farm method it's trying to run this validate method on the name ref well this name ref no longer exists within this ad task top view it's down in this child component modal TAS thing there is so how can we get to that from this parent component add task view well what we can do is we can add another ref to the modal task name component will call that modal task name save that now we can get two reps which are within reps or should I say we can get two child components which have reps from parent components which have reps so if I jump back to this submit farm method instead of doing this stop ref stop name we can do this stop refs dot modal TAS name just the ref we just created dot ref stop name and we can do the same here so this dot ref stop modal TAS name dot refs dot name save that okay let's see if we can submit a task now click Save great the task is now added to the state and added to the view okay now we're ready to create the Edit task modal okay so we're going to create an edit task modal now but before we do let's just tidy up a few things so we're still spitting out this object here on this add task modal let's just get rid of that open up the add task view and we'll get rid of this pre element save that also this jus time field is showing all the time it's supposed to only show if a due date has been set so let's just fix that so we can just add a VF to this modal do tab component here V if tasks to submit got to date save that so see if that's working that's disappeared now if I choose a date now the time field appears okay great also this add task modal is showing all the time so let's just open up the page to do file and set show add task back to false save that now I'm going to jump back to the store file store - tasks I'm going to uncomment these tasks just so that we've got some tasks on the page to work with okay so we want to add a edit task button first we'll stick a button next to this delete button so we want to open up the task component which is in components tasks and then task view let's look for that delete button okay there it is so I'm just going to duplicate that right next to it save that okay that being stuck now so I'm gonna surround those in a row so Dib don't row to make them side by side save that okay I'm going to change the color to primary change the icon to edit let's click handler well what do we want this button to do we want it to show an edit task modal so when the user clicks this button will set a variable called show Edit task to true we haven't created this property yet so let's stick that down here we'll add a data function and in there we'll add show edit task but set it to false to begin with now we're going to need a modal to to show when the user clicks this button so just going to jump to the to do page copy this cue dialog component from there to the add task modal I'll stick that at the bottom of this queue iton element change the v-model and this be close here to show edit tasks instead of short add tasks save that we're going to need an edit task component so I'm going to jump into modal's and then I'm going to duplicate add tasks and rename it to edit tasks and then back in the task view I'm going to change this to edit tasks then we're going to import that edit task component so I'll sticker components object down here and the tag name is going to be edit task and the path is components / tasks / modal's / edit task view save that ok so let's see if this button is showing that modal yep it's showing that okay so let's open my up now edit tasks first of all we need to change this heading to edit tusk say that now when the user clicks on the edit button we want to load this tusk information into this farm so if we click on the edit button for this go to shop task then it should say go to shop in here and have the same date and time as well filled in so how can we do that well remember we have this task to submit object with all the same fields as the farm name to date and to time and this is bound to this farm so remember in the parent task of this component task top view we have this task object which contains all of the fields for the task so we could pass this down as a prop to the Edit task component and then copy the fields from that task object into this task to submit object which would then update the fields on the farm so let's jump back to tasks top view and we'll pass down tasks to the Edit task component as a prop so a lot of prop called tasks which will send tasks to we're also going to need the ID as well so I'm going to pass that down as a prop as well ID equals ID and then in edit tasks we need to add these props at the top so task and ID okay so we want to copy the fields from tasks into this task to submit object so I'm going to clear out this task to submit object to begin with and I'm going to jump to the bottom and add a mounted hook so once this component has loaded this edit task component we want to coppy tasks into tasks to submit so we could use objects assigned to do that we could just do object dot assign we'll assign to an empty object and we'll assign this dot task to that empty object and then we can just assign that object to tasks to submit so we can just do this dot task to submit equals object outside etc save that just gonna refresh the page now hopefully if I click on the edit button now you should see the fields populated great can see all these fields now if I click on a different task then we see the data for that task so how can we save this data once the user edits these fields and then click Save well if we look in store tasks jeaious we already have this update task action and a corresponding mutation which will do that for us and this update task action expects a payload with an ID and an updates property so we can just fire this action from our component so I'll jump back to edit tasks first of all we need to map the update task action to this component we're already importing map actions and we have the map actions method here it's currently mapping add tasks because we copied this from the add task component so we don't need that so I'll just change add tasks to update tasks ok so now this update task action is available in our edit task component and then in this submit tasks method which is fired after the farm is validated you can get rid of this add task line so not adding at us now we're just going to edit a task we can get rid of that and we can just fire update tasks in set so this stop book date task now this is expecting an object we have an ID property and a updates property so the ID is going to be this ID that we're passing down from task top view so set that to this dot ID and updates it's just going to be the fields contain within task to submit so we can just set updates to this dot task to submit you save that I'll just refresh the page okay so if I click Edit on this get bananas change the title get massive bananas click Save great that's updating now let's just make sure we can edit the other fields as well so let it the due date and the due time so back to the sixteen it's at the time to three o'clock yeah that's updated so now all the basic crud functionality of our app is working we can add a task we can delete a task and we can edit at us as well as marking a task is completed let's make this up even better now thanks for watching make sure you subscribe and leave a comment to let me know what you think and if you're interested in the full course click the link in the description in the next and final video we're going to be splitting our tasks up into two different sections to do and complete it we're going to add some nice headings to these sections we're also going to add a no tasks to do today banner which will be displayed when there are no tasks left to do we're also going to have a little look at quasars global event bus

Channel: Make Apps with Danny

Views: 7,811

Keywords: quasar, course, tutorial, guide, udemy, vue.js, vue, vuejs, quasar components, components, vuex, store, actions, mutations, modal, dialog, reusable components, update & sync, update, sync, quasar framework, quasar framework v1, vue js, vue framework, quasar framework vue

Id: 5u8eyTFAY80

Length: 29min 8sec (1748 seconds)

Published: Mon Jun 17 2019