Quasar Framework: Vue.js Cross Platform App (8/10): Modals, Forms & Validation - Add Task

hi there my name's Donny this is the eighth module of ten that will be sharing here on YouTube for my full course on quasar framework version one welcome to this course module so far we can display a list of tasks on the page with a name due dates and due time and we can delete a task in this module we're going to add the ability to add a task so we're going to stick an ADD task button on the page when the user clicks that we're gonna have a modal shown in that modal we're gonna have a farm with the fields for name to date and due time we're going to add farm validation to that farm the ability to submit that farm and then we're going to use view X to add the new task to the state and to the view let's start the ability to add a task now so first of all I'd like a nice big round button down here that's always docked to the bottom that the user can click in order to show the add task modal so let's jump to the quasar site and look for a nice round button so I want to go to view components then buttons now I'll just scroll down this one looks pretty good so I'm just gonna click on view source and grab the code for that button now we want to stick this on the to-do page so let's open up source pages page to do and I'll stick this at the bottom of the page here I'll remove this v4 and key property and I'll remove these colons from the size and icon props set the size to 24 pics and gonna need an icon for this so let's jump to the material icon site and we'll search for ad see what we can find this one looks pretty good so class name is just ad so I'll stick that in the icon prop here on this button save that okay that looks pretty good now I want to have this stuck to the bottom so how can we do that well quasar has lots of classes for handling positioning and you can find these on the if you go to style and identity and then positioning so there's lots of different classes here we could use this absolute button plus to fix it to the bottom so let's surround this button in a div with the class absolute button and I also want this button to be centered within that so let's add the text sensor class as well save that let's add a little bit of margin so it's not stuck right to the bottom so it can just do that with the quasar margin classes so qm b for bottom - LG for large save that okay that's looking pretty good now now we need a modal to display a dialog so we've used the dialog plugin before but in this case we want to use a dialog as a component so that we can really make changes to it and add all the fields that we need and all the functionality we need as well so let's jump to the quasar site go to components and then dialog okay so tells us what we need to install me to cue dialogue to the components array and close pop-up to the directives array so let's open up quasar kampachi is and we'll add these in so we'll add cue dialogue to the components list and then close pop-up to the directives list save that so we're just going to grab the mark up for a basic dialogue like this alert and we'll customize it later so want to click view source here grab the code for that alert dialog copy that and I'll paste this at the bottom of this cue page element save that this B model prop on this Q dialogue this basically determines whether this dialogue is showing or not so if the property of this refers to is true and the dialogue will be shown if it's false then the dialogue will not be shown so we'll set up a data property to handle this micawber show ad tasks and now down in the script section we can create a data function which returns an object then we can add a property for that in here so it's called shell add task we'll set that to true to begin with save that okay we can kind of see a dialogue but it looks a bit messed up you might have some components missing from the config file so if you look in the console yeah we have three unknown custom elements here cue card cue card section and cue card actions let's add these to the quasar comp file so cue card cue card section and cue card actions save that okay that's looking pretty good now so now if I jump back to page two do if we set this show on tusk property to false then the dialog disappears and we want it to be hidden to begin with so let's leave it as false and we want this to show when we click this button so let's add a click handler to that button which is here how to click equals and we could just set show add tasks to true save that now when we click this button this dialogue is shown okay so this dialogue is gonna get quite complicated they'll have a lot of elements within that and a lot of functionality to handle farm validation farm submission etc so let's put this into its own child component so I'm going to copy this cue card element in fact I'll cut that I will create a new child component where this can go so within components and tasks let's create a folder called modal's within that will create a file called add task you will add the template and script sections and then I'll just paste that markup in there fix the indentation save that now back to the page to do file we need to import this component so down in the components object here I'll just duplicate that task one now I want the HTML tag to be ad tasks so let's just change that to add tasks and then point to the correct component which is at components tasks modal's slash add tasks save that and I have to stick that on the page you can just simply add an ad task elements to the page like that save that okay let's click the button okay great so the models still showing except now the contents of this modal this dialog and now within this child component add tasks so let's customize this modal a little bit let's customize this modal a little bit so that it's always showing I'm just going to jump to page to do top view and change show add task to true so that as we're making changes to it we don't have to keep clicking the add task button then we'll talk to our child component add task top view and I'll change the title here to add task save that and I'd like to have a close button on this up in the corner so let's jump to the quasar site grab a button so buttons button and we're just going to use a flat rounded one like this with an icon so want to view the source on that grab the code and I'll stick that underneath the heading save that Karen I have this icon want to break these attributes up gonna add a dense prop to make it take up a bit less space but I removed the color prop so that it's just black and now let's find a close icon for this so we'll jump to the material icons page search for clothes there we go that looks pretty good class name is close so let's change this icon prop to close save that now we want this to be over in the right hand corner here so what we can do is this cue card section which surrounds this heading and button we can add a row class to that and items within a row will be side by side however now the button is right next to this heading we want it right over here well there's a really handy quasar component called the space component which will fill the space between elements within a row so let's jump back to the quasar site find this space component there is space we need to install it first so let's jump to quasar confess add it to the list queue space and now we can just stick a Q space component between this heading in this button which will fill out that space between them q - bass save that okay that's looking pretty good however when we click that it doesn't do anything well we can use a quasar directive to make this close the modal so if we go to the quasar site and then to view directives I think we want this closed pop-up directive okay so we need to install this so we need to add a closed pop-up to the directives list in the config file oh that's already there so we don't need to add that so to use this let's just scroll down to the bottom we can just add this V - closed - pop-up directive to our close button so let's just add that so - this Q - potted element we're just gonna add V - closed - pop-up save that see if that works great so that's now closing the pop-up now I'm just going to change this okay button to save so that's that buttons here so let's just change the label to save I'm going to break up these attributes save that okay that's looking pretty good now now we can add some fields to this dialogue let's add some fields to this pop up so we're going to need fields for the name the due date and the due type but before we add these fields let's set up a data property to hold these fields for us before we send them on to our store where they'll be added to the state so down in the script section let's add our data function which returns the object let's create an object to hold these fields for us so a good cartlett task to submit so what are the fields that we need in here well if we jump back to our store file which is in store and then it's store - tasks these are the fields we need name completed due date and due time so I'm just going to copy these from there paste them into this task to submit object I'm going to move completed down to the bottom because this is less relevant here because it's always going to be false and I'll set all the other ones to empty strings to begin with okay so let's add some fields now so we'll jump to the equator site we want to go to view components farm components and then input text field now we need to install this so I'll add a cute import to the config file save that and let's find one I like this outlined one here so and if they can't view source grab the code for that outlined input copy that we'll paste it within this cue card section here which currently just has this lorem ipsum text in it so I'll delete that text paste in that input I'll break up the attributes save that okay so we now have an input on the page I'm going to change this label oops when you change this label to task name and this v-model we need to bind this input to the name field down here in this task to submit object so we can just change this view model to task to submit dot name save that just to check that's work it I'll just stick a name in here down in the object yeah that's working I'll set that back to an empty string now okay so now we need a field for the due date so we'll jump back to the Krays our site we want to go to farm components and date picker now we need to install this component so I need to add Q date to the config so I like that in save that now if we scroll down to the bottom here we want an input which has a pop-up where you can choose your date so we're going to use this one here with Q input so we'll click on view source prop the code for that and we'll paste that under the name input fix the indentation you when I break up these attributes I'm going to remove this mask attribute and remove this rules attribute I'll explain about rules later on let's see how that's looking okay we have an error here a couple of errors one of them is an old custom element cue pop-up proxy so we need to add a component called cue pop-up proxy to the components array in the config okay so now to find this date input to our due date field down here we need to update to V models one on the input itself and one on the pop-up so these view models I'm just going to change those two tasks to submit dot due date save that okay seems to be working we can now choose a date that gets added to the field but this field doesn't look like the other one so I'm gonna get rid of this filled prop and change that to outlined so it's the same as the first input save that okay that's looking pretty good now we need a time input so let's jump back to the quasar site go to components farm components time picker now we need to add this component to the config queue time so I'll add that to quasar config now scroll down to the bottom we'll look for an input which has a time picker there we go click view source and I'll grab the code for that and I'll stick it under this date input fixing indentation okay and again we have two V models here that we need to bind to our jus time field down here in the testers submit object so we'll change these fee models to tasks to submit dot Q time and break up these attributes ago I'm going to change filled to outlined so they all look the same I'm going to get rid of the mask and rules attributes save that okay let's see if that works you know time picker appears we can choose a time that's good now these are all a bit squished together so let's add a bit of space between them so we can just surround each of these q import elements in a row with some bottom padding applied to each one so we'll create a row with a class of Q - NB / margin-bottom - SM small we'll surround each input in this in a div with it with these classes so div dot Rho dot Q and B SM and finally the time field dot Rho dot q mb - SM say that okay let's look at a bit better some reason this name field isn't stretching all the way across so we can fix that by turning this Q import element into a column so we can just add a class to that of carp classical's can't say but okay that's looking a bit better we need labels on these dates and time fields so let's add a label prop to each one so first the date field so label set that to due date and then we'll add a label to the time input as well label equals due time so that okay great so now we have inputs for all of the fields that we need in order to add a new task the name the due date and the due time when the user clicks this Save button we want to validate these fields before we send the data to our store where the tasks will be added to the state so let's add some validation the due date and due time fields are optional but the task name is not we need a task name so let's add some validation to this field so if we jump back to the quays our site and go to components farm components and then input text field again and then over on the right here if we click validation and we can see an example here for a required field so if we blur on this field while it's empty we get this error message so let's click on the view source button and you can see this rules prop here so let's copy that rules brach and we'll add it to our queue input so that's here stick that there say but and now if I leave this field empty and I click out of it we get this error message if I enter something the error message disappears so we need to be able to submit this farm in some way so let's surround all of our fields inside a farm element so I'm gonna create a farm element here and I'm going to stick all of this cue card section which contains the three fields as well as this cue card action section which contains the Save button inside that form element when it cut that and paste it all inside this form lunge it all back now how can we listen to the submit event of this farm element well remember in UJS we could add event handlers for all of the different JavaScript's events and farm elements have a submit event so we can listen to that by just adding a @ submit handler and within that we can just call the method so we'll create a method called submit farm and down in the script section we'll create a method for that down here so we'll create our methods object first and then create our method submit form I'll just log out submit farm so we can see if it's working save that now I'll clear the console and click the Save button oh it's not submitting the farm right now so if we look at this a button it doesn't have a type equals submit so let's add that to this element type equals submit and it's also closing this pop-up when we click it and that's because it has this V close pop-up directive on it so we'll remove that as well save that clear the console click the Save button it reloaded the page here why is that well that's because the default action of a farm submit is to send some data to another page or the same page and reload that page so to stop what happening on this submit handler on the farm we can add a modifier by adding dot prevent which will prevent the default action of that event so now the page should not be reloaded let's just try that you click Save okay the page is no longer reloaded and if we look in the console you can see submit form is being logged out so this method is being successfully fired now when this method is fired we want to validate this field so if we jump back to the quays off site and on this import page if we click down to queue import API and within here methods we have this validate method which we can trigger on a cue import element to check whether it's valid but how can we actually fire this method on our import element well we can use a ref to do that so we'll jump up to the name input and we'll add a ref prop I will call it name and then down in the submit file method to fire this validate method on this cue input we can just do this dot reps dot name so that's the name we use for the ref dot validate save that I'll clear the console and now if I click Save you can see the field gets validated so how can we check if this is valid or not before we actually send this data on to our store well let's just log out this dot Refs dot name see what we can see in there okay so I'll click Save again we can see this object in there so let's open that up scroll down and we can see this has error property and that is currently set to true because there is an error however if I enter at us name clear the console click Save again open that object scroll down to has error it's now set to false so we can use this to determine whether this field is valid so what we can do is we can add a if statement so we can do if this dot reps dot name dot house error actually you want to check if it doesn't have an error if it doesn't have an error then we could submit the TAS data to our store so if there's no error on that field we'll call a method called submit task and we'll create that method down here submit tasks I'll just log out submit tasks in there I'll remove this other console dot log say that make sure that's working okay clear the console so if I click save now then we shouldn't see this submit task log being triggered say that no we don't see it but if I enter a task name click Save you can see the submit task log being fired okay just while I'm here I've noticed this save but it isn't very prominent on this farm so I'm just going to jump to that button and remove this flat prop to make it just a bit more prominent okay so all of our validation is working now we just need to send our task data to the store where we can add the new task to the state so when the user fills in these fields the name the due date and the to time the corresponding fields in this task to submit object will be updated with the same information when the user hits save this submit farm method is fired we validate the farm and if it's valid we fire this submit task method so at this point we want to send this task to our store and then add it to the state so how can we do that well we can just trigger an action within this submit task method and we can send this to us to submit object to that action so let's just create the action though so you want to open up store tasks j/s I'll add a new action called add tasks will pass in the commit method so we can fire a corresponding mutation and what we're going to pass to this we're going to pass a task to this so we'll call it payload I'll call it task so within this add task action we have the task data but we're also going to need an ID to see each of our tasks remember is contained in an object the key of that object is a unique ID so we need to generate a unique ID somehow so how can we do that well if we jump to the ik ways our site scroll down to quasar utils and then other utils we have this generate UID utility which will generate a unique string like this which is just a bunch of numbers and letters so first of all we need to import this UID utility so at the top of the store tasks dock Jess will import you ID from quasar and then to use it we can just fire this UID method so we can just set up a variable let's call it task ID and we can just fire your ID to get that unique ID so we need to send this ID and the new task data to our mutation so that it can add it to the state so let's set up a payload which contains both of those will call it payload and this will be an object with a property called ID which will be set to this unique ID we've just generated here and the second property will be for the task data which we're passing in here from our add task component and then we can just commit our mutation so we can just do commit name of the mutation and we'll call it the same name add task and then the data we want to pass to that which is payload now we can just create our mutation task Plus in the state passing that payload that's coming from the action we want to create a new object which has the ID as the key and then the data within them now when we add a new object to the state we need to use a special view method to do this so that the data in that state remains reactive a bit like we did with the delete here view dot delete and we can use the view set method so we can just do view dot set first parameter is the object you want to add to which is state dot tasks the second parameter is the key of the new object we're going to add which is going to be remember payload dot ID so payload ID then we pass in the data we want to store there which will be payload tasks save that now we're not currently triggering this action so back in add tasks will map the add task method to this component using map actions so you want to do import map actions from view X and then in the methods object we can add dot dot map actions now a mapping an action from the tasks store module and the action we want to map is add tasks so this action is now mapped to this component so we can just trigger this now so down in this submit task method we can just do this dot add tasks and pass in this task to submit object so this dot task to submit save that okay so let's see if that works now get oranges I'll pick a due date their due time click Save so we have an error here it says come up read property completed of undefined let's have a look in the state and see what's going on so you want to open view Jess dev tools go to view X and we can see it's triggered the add task mutation let's click on that and then we go down to state and this shows us what the state looks like after this add task mutation is fired so we'll open up tasks you can see it's added a new task there with a unique ID but there's nothing contained within it says undefined so I think we've gone wrong in our store file so let's open up store tasks let's have a look at the Tusk mutation and we're doing buter state tusks payload id pay a little tough oh yeah this is wrong I've put payload tasks and it should be just payload tasks so I'll change that to payload tests say that we'll try that again get oranges to date to time quicksave great although the dialogue is still visible you can see that it's added this new task so that's pretty good so how can we get this dialog to disappear after this farm is submitted well we can do this using custom events what we can do is let's jump to the add task view file up till we fire that action we can emit an event and we can give this event any name we like and then we can listen to that event on the page to do page on this ad task element here so within our task view after we've fired the add task action will emit an event and we can do that by adding this dot dollar emit and then we can give this event a name I'm going to call it closed now if we jump back to page to do dot view down to the add task element we can listen to that event here by just simply adding at close and then we can either fire a method or just fire a line of JavaScript inside these quotes so to hide this model we can just simply set show a task to false so within these quotes we can just add show add task equals false so when the form gets submitted it gets validated then this submit task method is fired then we fire the action which adds the new task to the state then we emit a custom event which we can listen to in this page to do dot view here and then we can fire this JavaScript when that event is received to set show ad tasks back to false thus hiding the modal so let's see if that's working though so a lot another task save that okay that seems to be working now the model now disappears after the farm is submitted now before we move on I'm just going to clear out all the default tasks so I'm going to jump to store tasks top J s and just kind of comment out these tasks I won't delete it I'll just comment it out so we have a reference of what all the field names should be say but okay this add TAS model is still being shown by default so back in the page to do file let's set show add tasks to false so it's only show when we click the add tasks button ok so now our app starts off empty we can add tasks to it from there you okay so before we move on to the next module I just want to add a few little improvements so when this modal is shown it would be good if this task name field autofocus so the user doesn't have to click into it every time they want to add a new task now we created a custom directive to do this back in the view j/s basics module however if we go to the quasar site and then to farm components input tax field jump down to Q import API and be props and then behavior we have this autofocus prop for cue input elements which will autofocus it so we jump to the jump to add task cube and find this name input cheers here we can just add a autofocus problem to this input save that to refresh the page click Add task okay so that field is now autofocus it now if we just close this modal you can see when there's no tasks on the page we have this line here so let's just jump to page to do that view and we have this cue list component which contains all of our tasks within it and the reason we have this line there is because this cue list component is being shown even if there are no tasks inside it so what we could do is we could just hide this cue list component completely if there are no tasks so how can we do that or we could either be if directive to it now our data is stored in an object so we could check whether this object is empty or not so how could we do that well we could use the object keys method which will return the keys in that object as an array so for this one here it would return an array with id-1 id2 and ID 3 and then we can then count that array to determine whether or not this tasks object is empty so back on the page to do file on this queue list and this be if directive we could add so V if object got keys tasks so this will give us an array of all the keys that are inside is tasks object so then we can just do dot link so if the tasks subject is empty then this will be zero which is a falsie value and if there's at least one task then it returned one armoire which is a truth eval you so let's just say that okay that line now disappears so if we had a task now make sure it still displays when there are tasks it'll 2-shot say yeah that's looking a bit better now now let's click on the add tasks button and we have a to date field and a do time field well we don't want the user to be able to enter a due time unless they've already selected a due date so be good if we could hide this due time unless a due date has been entered so let's jump to the add tasks component and find this do tired field what we could do on this row that surrounds it we could just put V V - if tasks to submit dot due date in other words only show this to time row if a due date has been entered so I'll save that okay so now the to time field has disappeared and if I choose a date then we see the Jew type field appear again okay so let's just add another task just bananas without a due date and a due time click Save okay so this task we just added looks okay but this firsts us where we didn't choose a due date or a due time we still have this calendar icon so how can we make that disappear if the user hasn't entered a date let's jump to task view which is in components task and then task top view and we'll look for the section which contains this calendar icon and these two fields which is here this cue item section component so we can just hide this completely so we can just start be - if task top due date in other words only display this section if there is a due date save that and we can now see the calendar icon disappear from the first item okay so let's open up our ad task model these fields it'd be good if they had a Clear button which the user can click to clear these fields so let's jump back to the quasar site two components farm components input text field and we'll see if we can find an input which has a Clear button okay here's one one two three four five six seven eight it's the eighth one down so I'll click on view source one two three four five six seven eight okay so this one has this template inside it with V slot append and inside that you can see the close icon there so I'm just going to copy this bit and throw it into one of our inputs so you want to open up the add task view and look for the name input which is this one and without a closing tag to this Q input and then paste in that code okay let's see how that looks okay we can now see a close button here I'm just going to split up these attributes now we only want to show this icon if a name has been entered so we could just add a quick v if v if task to submit dot name so if there's a name and show this close icon save that okay so it now disappears if we enter something into this name field we can now see this close icon if we clear it then it disappears again so we want to clear this field when the user clicks this Clear button so I start a click handler to it so up to click equals and we just want to set touch to submit name back to an empty string save that no it's gone wrong there duplicate attribute click oh it already has a click handler on it this one so I'll just remove that save okay now if I click this the field gets cleared okay so let's do the same on the due date field so I'll copy this template bit and then we'll go down to the due date queue input on this one already has this template with the slot append so I'm actually I'm just going to copy the cue icon and stick that within here so I'll stick that there tape up and we'll change the vf2 a TAS to submit dot due date huzza value save that now if we choose a due date you can now see this close icon that's it look better it was if it was to the left of this calendar icon so I'm going to move this queue icon up above the other icon save that okay that's a bit better now when this one is clicked we want to clear this due date field but we also want to clear this due time field because we don't want users to be able to submit a due time without a due date so within this click handler we we will fire a method let's call it clear to date will create that method in methods clear due date I will set this dot TAS to submit due date back to an empty string and will also set this docked us to submit dot jus time back to an empty string save that okay so let's enter a due date and we'll enter a two time now if I click on this clear button okay everything is now cleared okay we also want a clear button on this due time field so let's go and find the Clear button from the due date one Cheers here and we'll copy that into the queue time Cuban pop within this template type okay now we only want to show this I can't if a time has been entered so if so be if TAS to submit dot to time and if the user clicks this we only want to clear the do time field so inside this click handler will just do tasks to submit dot do time equals an empty string so that okay so let's see if that works I'll choose a due date choose a Jew time okay you can now see the clear button I'll click that that's not working okay because I've used two equal signs here it should just be one let's try that again I'll click the Clear button on this 2-time field okay that's now being cleared for some reason this input is going a bit smaller than the others when that close button is not being displayed so I'm just going to add a class of call to this queue import to make it stretch out to fill the row so on this Cuban poet aloud class equals call safe make sure that's working choose a due date yeah this seems to be stretching across now choose a to time okay you can see the all the clear buttons now see if they all work yeah they're all working great so that concludes our ad task functionality thanks for watching to 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 video we're gonna have the ability to edit a task by reusing some of the components we built for the add task modal

Channel: Make Apps with Danny

Views: 13,678

Keywords: quasar, course, tutorial, guide, udemy, vue.js, vue, vuejs, quasar components, components, vuex, store, actions, mutations, modal, dialog, forms, validation, quasar framework v1, quasar framework, quasar framework vue, vue js, vue framework, vue validation, vue validate form

Id: gxcSztHnxeY

Length: 52min 14sec (3134 seconds)

Published: Mon Jun 10 2019