Build a Invoice App With Vue 3, Vuex & Firebase

all right what's going on everyone in this video we're going to be creating an invoice application using view 3 on the front end and we're also going to be utilizing firebase on the backend to store our invoice data now i got this idea and design off a site called front end mentor now i'm not the greatest graphic designer and idea creators so front end mentor is a great site to go ahead and get some great ideas from and they provide you the actual design file i believe in figma or an xd that you can use to you know walk yourself through creating an application just like you're seeing here today all right so definitely recommend checking it out if you want to become a better developer and you struggle with ui ux like myself all right so now before we go ahead and get into this application i quickly want to do a brief demo and kind of explain what we're going to be building here so this invoice application is going to be pretty simple it has two views it has this home view you're seeing right here and also a more detailed uh invoice view to go ahead and look at all the details of the invoices all right so we're going to be able to create invoices we're going to be able to edit them and also delete them so pretty much a full crud application here now on our home view and all views we're going to have this simple navigation here which is kind of a stretch calling it a navigation it's simply just going to hold our branding here which you can see at the very top is going to be this white invoice logo which i got from font awesome and then this purple background okay and then on our home view here we have our invoice title or our invoices it says and then we have the number of invoices we have total inside of our application which currently is four now we can also filter these invoices by status so we have three different statuses within our application for invoices which are going to be pending draft and paid okay so if i click on the status right here we're going to get this little drop down we can change it to draft so it's only going to show us the invoices that are currently in draft mode and then we have the current invoices that are pending which are two and then we also have the paid okay so pretty simple now we can also clear this by hitting the clear filter option right there and we can also create a new invoice here so when i click on this we're gonna have this modal slide in from the left and we're going to be doing this or we're going to be animating this using the view 3 animations okay so let's quickly go ahead and run through create a new invoice here so we have our bill from information here so we have our street address which i'm just going to fill in here very quickly and then we have our bill 2 which is going to be the client information so once again it's going to fill this in really quickly sorry about all the spam stuff you're seeing there from the autofill i've done this a few times and we'll go ahead and just put all this in like this now the really cool portion of this invoice application at least when creating one is going to be this section right here so we're going to be using javascript to generate the invoice date so as a recording this video right now it is june 2nd 2021 so we don't have a payment due date here and you can't click on anything inside of this field to go ahead and change it now this is going to be or the payment due dates going to be affected or generated based on the payment terms so if i click on the select option right here we have two options for this application we have 30 days and 60 days so if i click on 30 you can see it's going to be generated so right now the payment due date would be a month from today or 30 days which is going to be july 2nd now if we want to do 60 days we can do 60 days and then it'll be august 1st now we have the option to create a product description here so we're going to say it's for uyux now the other cool portion of this is going to be the item list generator so if we click on this button right here we can add an item that we want to bill the client for invoicing so for example we said we did ui ux so let's say we did some design hours here okay and let's say we did five hours and we're really expensive we're gonna say we charge 300 dollars an hour okay so that's going to be a total of 1500 here which is going to calculate the price by the quantity here and you can add as many items as you want so you can go ahead and keep adding these and if you don't want them you can click on the trash can it'll go ahead and remove those as well now as i mentioned there are two different stat are sorry three different statuses within our application for invoices we have the draft pending and paid so we can save this as a draft or we can create an invoice so if i create an invoice it's going to be pending if i save the draft it's going to just be in draft mode which there really isn't any difference it's just going to be a different status that the application went ahead and had like it doesn't have any you know difference in what it is just kind of a status okay now if i click on create invoice here it's going to have the nice loaded animation here it's going to slide back in smoothly and then you should see we have the invoice right here inside of our home view all right so that's pretty much what we have for our home view here now the other view is actually going to be the more detailed invoice view so if i click on one of these invoices here it's going to take us to the route of invoice and then we can see we have the invoice number here which matches what we have right here all right so on this view we have a few different options here we can go back so we can hit the go back button right here which will take us back to our home view we have this little header section here which displays the status of the invoice again and then we have the ability to edit delete or mark it as paid so for example say you have this client pay this invoice so we can go ahead and click mark is paid here it'll change the status if i go back it's all going to be updated here okay so say for example they didn't pay we made a mistake let's go ahead and put that back to mark as pending okay so we can also edit our invoice here so if i click on edit you can see we can change some things here so let's just go ahead and say we'll just spam and put some m's down there to show you that and say we want them to pay quicker we want 30 days and say we actually did some programming for them so we'll say programming here and let's say we charge five hours again and we're gonna say we're really expensive we're gonna charge 600 so we're pretty expensive agency here okay so if i update the invoice here you'll see that my email has updated the payment date is updated and also our total right here is updated all right so we can go ahead and edit our invoice now if we don't want this invoice anymore we can also delete it by clicking the delete button right here so if i click on delete you can see that it's going to delete that invoice and we're going to be redirected back to our invoice home here all right so that's what we're going to be building here so let's go ahead and get started now if you want to follow along with me i uploaded the starting files to the github repository and you can find that link down below in the description now once you hear what you want to go ahead and do is come down to this drop down here and you're going to go to the starting files branch and you're simply going to go ahead and download this repository now you can do that with a zip file or you can open it up with github desktop or you can go ahead and clone it whatever you want to go ahead and do now i already went ahead and did this i downloaded the zip so if we head over to vs code here you'll see that we'll have this folder right here with all the starting files now the first thing i want to go ahead and do is actually open up my terminal here and we need to install all the dependencies for this project so what we can do is we can say npm and say i and that's going to install all the dependencies that we need for our project here so once that is all complete what we can do next is actually spin up our local development server so that we can see all the changes that we're going to be making here for our project and our web browser all right so we're going to say mpm run and scr ve and that's going to go ahead and spin up our local development server here and we should see that on our local host here in just a few seconds and there we go so if i go ahead and click on this it should open up in our browser here you can see uh currently what we have in our starter repository is simply this blue background alright so before we go ahead and get started here i want to kind of run you through what we have currently inside of this repository the dependencies that we're using in case you want to go ahead and start this off from scratch all right so let's go ahead and close this so let's start off with our dependencies here so inside of our package.json all that we're pretty much using is we're using view 3 which we're using currently right now 3.0.11 and then the other dependency that we're using is this one called uid which is going to create our unique ids for our invoices and a few other things then we have our view router and we're also going to be using view x for our state management here and that's pretty much about all we're going to be using so let's head up into our src folder here so we have all of our assets here that we're going to be using so pretty much all svgs all right nothing too crazy going on there in our router file currently all we have is our home route and that's about it in our store we simply just have our default store here and then for our views we simply just have our home view which has nothing in it and then our app.view this is where i've done uh a bulk of things for this repository so we have our simple uh reset here we're going to be using the pop-ins font from google and then i have some default classes here so i went ahead and style all of our buttons now this is just some simple uh styling here so i don't want to waste too much time on this in this project so you can see here we have our button uh just giving it some default padding rounding the uh running the corners here uh setting border none font size all that good stuff now we're going to be doing something like a bootstrap type of thing with our utility classes here so you can see our bootstrapper tailings whatever those things are but we're not going to be using that i just went ahead and created these to make things a little bit easier as i didn't want to go ahead and use uh one of those for this project now as you can see here we just have all these classes for our background color so dark purple red purple green orange and then for our utility classes here since we are going to be using flexbox a lot it made sense to go ahead and use this so we weren't using this display flex everywhere inside of our styling i have flex column here for the flex direction and then our container which we're just setting to with 100 max width of 850 centering that putting that to the center with a margin zero auto here and then giving some padding around uh the entire thing and we're going to alter that a little bit here on our media query and then we have our nav link class right here and then here is where we actually have our status button so if we head back over to our project here you'll see that these are the status buttons right here so how we're actually achieving this is we're using the before selector here and we're just simply entering the content with the uh quotes and then we're just giving it a width and height of 10 pixels border radius to round it and then separating that from the actual content here and then we're going to be doing something similar for the colors here you can see here we're going to use uh the paid class for the green color pending for the orange and then giraffe will be this nice gray all right and then in our main.js this is the simple defaults that come with a view 3 project here alright so that is going to be it for our walkthrough here so let's go ahead and actually get started by creating our first component here which is going to be our navigation so the first thing that we need to do here is create our components folder so we're going to say a new folder within our src and we're going to call this components okay and inside of this components folder we want to go ahead and create our navigation file so we're going to say navigation dot view here and let's go ahead and create our view template and let's go ahead and start off with our markup here so this is going to be a pretty simple component here so we're going to start off with the header tag here we're going to give this a class of flex now inside of this header tag we're going to have pretty much one element which is going to be our branding so we're gonna have a div with a class of branding here and also we're gonna say flex okay and then we're gonna have our image tag here and we're gonna say this is found in our assets and then we're also going to have the file name here which i can show you which is going to be file invoice dollar solid.png okay and that's simply going to be our markup here for this component so pretty simple and pretty straightforward and we're going to say name here and we're going to do navigation all right now for our styling here i'm going to go ahead and change these changes to be scss scoped here and then let's go ahead and start off by styling our header so we'll say our header tag here and we first want to give this a z index of 99. now the reason why we're doing this is because we're going to have our modal slide in from the left and we want it to come behind the navigation not over the top of it okay so we're going to say z index of 99. we also want to give this a flex direction of row now by default when we call the display flex using this class it's already going to be a flex row but we're going to be using a media query to set up a tablet first approach here so we're going to have it be flex row by default and then when it gets to a higher screen value we're going to have it be a column all right and then we're going to give this a background color here of 1 e 2 1 3 9 which is going to be a very dark purple all right and then we're going to have our media query here so we're going to say at media and what's going on here we'll say min width here and for this application we're going to be using 900 pixels for our media queries and at this width we want to go ahead and set a min height of 100 percent we're going to set a min width here of 90 pixels we're going to set the flex direction to be a column here and then we have our border let's see radius we're going to set to 0 on the top left 20 pixels on the top right 20 pixels on the bottom right and then 0 on the bottom left here all right so that's going to be our styling for our header tag now we need to work on our branding here not banding branding there we go all right so for this what we want to go ahead and do is something very similar with our border radius we're going to say border radius we're going to do 0 20 pixels 20 pixels 0. we're going to go ahead and just scroll down here a little bit to make this more visible we're going to do a background color here of a very bright purple which is going to be 7c 5dfa we want to justify the content to the center because we are using the display flex on here so we do have access to justify our content to the center and then we want to give this a padding around all sides of 24 pixels all right and then we're going to go ahead and add a media query here as well so we're going to say at media we'll do our min width here and once again 900 pixels and we simply want to give this a width of 100 to fill out the available space when we are on our desktop and laptop view all right and then finally we need to target our image here inside of branding so we're going to give this a width value of auto and we're going to provide it a height of 30 pixels and that's going to be our navigation component now we have this created but we don't have it visible if i go over to our application you'll see here we don't have anything shown that's because we still need to import this component into our application so let's go ahead and do that now to import this component we're going to be doing that here inside of our app.view now i want to go ahead and do a little bit of editing to our markup here inside of wrap.view so i want to go ahead and create an empty div here and then we're going to have another div with the class of app all right and we're also going to display this as flex okay now inside of here we're going to have our navigation and we're also going to have another div with the class of app content we're going to say let's do flex and also flex column here okay and this is where we're going to store our app content so what i want to go ahead and do is take this router view right here and we're going to add it into this div right here okay so hopefully that kind of makes sense what we're doing here and we'll be adding and editing this as we go along but for now this is going to work just fine so to import our component here we obviously need to have our script text here we don't have those uh have that yet here in this component so let's go ahead and create that so we're gonna say script and we're gonna use the javascript so what we wanna do here is you want to create a components right here and then we need to define or i guess i'm doing this kind of backwards but it doesn't really matter we're going to say we want to use a navigation component here now we want to also import this component inside of the script tag so we'll say navigation here and we're going to say from and then we can go out of here and actually i think it's just one slash and we're going to do components and then we have our navigation component here okay and like i mentioned here what we want to do is you want to use this component inside of this div with a class of app okay so we're going to paste that in there and we're going to do that now before we go ahead and look at this i don't believe it's going to look very good right now you can see right here it looks like this we need to do some styling to our app and our app content here inside of our style tags here so what i want to go ahead and do here is we'll just go below our reset here and we'll target our app here and what we want to do is give this a background color of let's see 141625 and we did that here inside of the reset which i'm going to get rid of okay because that's going to override uh the navigation background color right here which is why you're not seeing it currently within our application so if i save the small change right now you should see that we have this right here okay so let's continue with our styling here so what we want to do as well is give this a min let's do height of 100 vh and then we want the flex direction to be a column here okay and then when we get to a minimum height of let's see here media we'll do min with and we're going to do our 900 pixels here we'll set this to a flex direction of row all right and we could actually uh you know what to keep everything consistent here i just realized we could actually just get rid of this and we can do flex column right here as well instead of defining that inside of our styling here okay so that's going to be it for our app now we also have the class of app content i want to do some styling too over here so i'm going to give this a padding of 0 on the top and bottom 20 on the left and right we're going to give this a flex value of 1 and we're going to position this relative okay so now if i head over to our application you should see that we're having this which doesn't seem right what did we do wrong here let me take a look now the problem appears to be that even though we set this min width to be 900 pixels here at flex row the flex column class is still going to be in effect and it's overriding this uh media query that we said so the two different things we could go ahead and do here so first off we could simply get rid of this class and just define it by saying flex column here or i can simply just go ahead and do the important here and that should go ahead and resolve our issue here as well just kind of keep everything consistent with our classes that we have here with flex column and flex okay so that's what we're going to go ahead and do here simply just explicitly say important so that this will be in effect and override what we currently have in our app or sorry in our flex class right here okay so if we head back over to our navigation now you should see that everything looks really great you can see we have our branding right here and then our actual different colored uh background that goes all the way down to the bottom and then if i inspect this here you can see that it's going to convert over to a row once we get below 900 pixels now as i mentioned a few times here we're not going to be supporting mobile devices for invoice application here so what i want to go ahead and do is implement the ability to check the screen size and once it gets to a certain view that we no longer want to display our application i want to show this message to the user saying sorry this app is not supported on mobile devices so let's go ahead and begin to implement this so what we want to do is go into our app.view here and inside of our script tag i want to create our methods here okay now the method that we're going to be creating is called check let's see here screen okay now inside here what we want to go ahead and do is we're going to create a new variable and we're going to say const window let's see with here and we're going to set this equal to the window and we're going to get the inner width here okay and then what we want to do is we want to run a if check here so what we want to say is if window with is less than or equal to 750 which is going to be 750 pixels then we want to say hey the current user is on a mobile screen so what we need to do is we need to create some data here so we're going to say data and we'll open this up and we'll say return here and we're going to create a data value called mobile okay and by default we're going to set this to null all right so inside of this condition we simply want to go ahead and say this dot mobile is equal to true all right and then we're going to return out of here all right so if this is not true then the user is not on mobile so we're going to say this dot mobile equals false alright so that's going to be simply our method or function to go ahead and check the screen size now obviously this is not going to run itself so we need to do a few things here so the first thing i want to go ahead and do is create our lifecycle hook of created so we can do that simply right below our components here so we're going to say create it here and inside of the created lifecycle hook what we want to go ahead and do is check the screen size by default so we're going to say this dot check screen now that works well but what we also want to do is have some sort of listener that we can watch the screen size if it is getting resized now if it's getting resize we want to run that function so inside of our created lifecycle look i'm also going to do a add event listener so we're going to say window dot add event listener and we're going to listen for the resize and on the resize you want to run this dot check screen here all right so now that we have all that set up let's go ahead and implement into our markup the ability to show and hide something based upon this mobile value right here so what we're going to do is on our div with the class of app right here we're going to run a vf right here so we want to say v if and we're going to say if mobile is false then we want to show this okay otherwise we're going to create another div here and we're going to put the v else on here and let's go ahead and pass at a few classes and we're going to say mobile message we're going to say flex and also flex column here all right now inside of this div we're going to have an h2 and it's going to say sorry this app is not supported on mobile devices geez i can't spell all right there we go and to save some time here and trouble you guys from watching my horrible spelling i'm just going to copy in the paragraph tag here so it says to use this app please use a computer or tablet now before we can go ahead and view this i simply want to do a little bit of markup here so what we're going to do is come right down below our app here and we'll style up the mobile message here now simply all i want to do is do a text align to the center we want to justify content to the center and align items to the center here and then we also want to give this a height of 100 vh here and we're going to give this a background color of the same thing we have up here so we're going to say 14165 and then we're going to give this a color of white here okay and then the last thing i want to go and do is set our paragraph tag here so we're going to set our paragraph tag and i want to give this a margin on the top to separate it from our header by 16 pixels here all right so now if i head back over to the application you should see that once we get down below 750 we're going to see this value right here and if i go ahead and resize it that'll disappear and then we're going to have our navigation shown and then it's going to go back to going vertically here so we have successfully went ahead and implement the ability to check if user is on mobile and then pretty much tell them hey that we're not going to be able to allow you to use this application if you're on a viewport this small now this application is very dependent on our firestore collection in order to populate our application here so what i want to do next is i want to set up the ability to actually create a new invoice so what we're going to work on here is this little header section right up here with our title the amount of invoices the filter by status section and the new invoice button here alright so when we click on this new invoice i want to create this model right here that slides in and will allow us the ability to create a new invoice so let's go ahead and start to work on this so inside of our views folder here we're going to have this file called home.view which is where we're going to implement these things right here all right so let's go ahead and get started with our markup so we're going to keep it as a div of the class of home and i'm also going to pass it the class of container all right now what i want to do here is just put a comment and we're going to say header and then below this we're going to have a div the class of header and we're also going to use the class of flex here all right and then inside of here we're going to have a left-hand side and a right-hand side so we're going to have two children of this div of the class of headers so what we're going to do here is we're going to say div with the class of left now this is also going to have the class of flex and we're going to display this as a flex column here all right and then what i want to do as well is let's go ahead and create our right hand side so we're going to say right here and then we don't want this to be a flex column we want that to be a row all right so inside of our div with the class of left what we're going to do here is we're going to have our h1 and we're going to have this say invoices and then we're going to have our span tag here and we're going to have it say there r and for right now we're going to hard code this but later on we'll go ahead and dynamically output the number of invoices we have in our application so for now i'm just going to say 4 total invoices here okay and that's going to go ahead and do it for the left-hand side pretty simple now for the right this is going to contain our filter by status and also the actual new invoice button here all right so let's start off so what we're going to do here is we're going to create a div with the class of filter and we're going to also have the class of flex and then what i also want to do is put a ref attribute on here and we're going to say filter okay and then what i want to do is we're going to have a click handler on here which is going to toggle the filter method or the filter view that we're going to create so what we're going to do here is we're going to create a function called toggle filter menu okay and let's go ahead and open this div with the classic filter up so what i want to do is create a span tag here and we're going to say let's do filter by let's see sta status here okay and then later on we're going to go ahead and dynamically output what we're going to be filtering it by but for now this will work just fine so what we want to do next is we want to have our actual image tag here because we're going to be using a asset here which i believe is the arrow down so i'm going to go ahead and rename this and get a hold of the name and we're simply going to target the at sign and we'll say assets here and then we're going to have our icon arrow down.svg there all right and then what i want to do next inside of here is actually create our drop down so what we're going to do or how we're going to create this is we're going to have a ul and it's going to have the class of filter menu here and inside of here what i also actually on this ul tag i want to do a v show and we want to only show this if the data value that we haven't created yet a filter menu is true all right and then inside of here we're going to have some list items so i'm just going to go ahead and copy this down four times or three times total or three times four total and we're going to have all of our statuses here so we'll say draft we have pending paid and then we're also going to have an option to clear our filter here all right so that's going to be our filter menu here so what we also need to create is our button still so let's go ahead and create a new div it's going to have the class of button and also flex here and let's see we also want to add a click handle around here as well which is going to trigger the opening of our invoice model so we haven't created this yet or any of these yet but i just want to have that on there okay and then inside of here we're going to have a div with the class of inner button and this is also going to have flex okay and then we want to have our image tag here which is going to have slash assets oops assets and we want to look for the icon plus svg so i'm going to rename that get a hold of that copy this and we'll paste that in right there and then outside of this enter button we want to have a span tag here and we're going to have it say new invoice here and that should go ahead and do it for our markup so if we head over to our application you should see that we're going to have probably this mess right here so let's go ahead and address that by actually doing some styling to our header section here now just below our script tag here we're going to go ahead and create our style tag so we're going to say our scss scope and we're going to start off by targeting our home class and all i want to do on here is pass the color of white and simply what that's going to do is going to make all the text in here white which already looks a lot better okay and then next up i want to go ahead and target our header class here and we're going to give this a margin bottom of 65 now this isn't going to do anything at the moment but once we start actually adding our invoice component what it's going to do is separate the header from those components so there's a nice little space between the two and they're not on top of each other now inside of our header here we have our left and we have our right class now these are both displayed as flex and we want these to take up equal amounts of space within our actual view here right now they're not taking up equal amounts of space this one's 200 uh pixels wide and this one i believe is like something like 265. so on our container class here we have the max width of 850 pixels so what we need to do to actually have these fill up the whole amount of space and take up equal amounts is pass the value of flex here and say one so that'll make them take up equal amounts of space and you can see that's defined right here as well so that looks a lot better now the next thing i want to go ahead and do is actually target our right hand side here so for the left we're not going to do anything it's pretty simple we're not going to actually target the h1 or the span tag so we're going to leave that as it is by default and we're going to work on the right hand side so what i want to do here is i want to justify the content to the flex end and i want to align the items to the center here okay and then what i want to do is i want to target our button class and our filter and we're going to simply align the items to the center as well and then inside of here we have a span tag that i want to go ahead and target and we want to make these font sizes and we're going to say 12 pixels right there okay and then let's go ahead and save that now below this shared styling on a button and filter i want to go ahead and just simply target our filter now and what we're going to do here is position this relative because what we're going to be doing is we have this ul which we're going to be positioning absolute to to our filter here okay so what we're also going to do is we're going to give this a margin on the right hand side to separate it from our button by 40 pixels here and if i go over you'll see that now look like this so things are starting to look a lot better already here so what we want to do next is we want to have our span tag here because when we click on it we need to make sure that we're actually clicking on the actual div here so what we can do is on the span tag we can pass pointer events and put those to none as well uh as on the image as well so that way they act as when the mouse clicks on it they don't exist so hopefully that makes sense you'll see that when we actually add the um the function to actually toggle the filter menu i'll take it off and i'll show you what it looks like when we don't have uh this property on so we're going to do is we're going to say our span our image here we're going to put pointer events to none okay and then next up i want to target our image here and we want to give this a margin on the left of 12 pixels to separate it from our text we want to give this a width of nine pixels and a height of five okay and that should go ahead and do it for that styling right here so we have our filter by status now we want to go ahead and actually create our drop down menu here so we need to style that up so what i want to do is we're going to say filter menu here we want to give this a specific width or a defined width of 120 pixels we want to set this to position let's see absolute here and we want to go ahead and say top so we want to position it from the top of where we're positioning absolute to by 25 pixels okay and then we want to say list style on here and set this equal to none give this a background color of 1 e 2139 here which is going to be a similar color we're going to use throughout the application and we're also going to paste in a box shadow here and there we go i'm just going to go and paste that in here so that should do it for our filter menu as a whole now what i want to do is actually target our li items in here so we're going to say have this be a cursor pointer give this a font size of 12 pixels here and we want to give this a padding for each one of our list items of 10 pixels on the top and bottom and then 20 pixels on the left and right here and what we also want to do is you want to add a hover effect here so we're going to say and hover and what we want to say here is we want to give the color of the text we want to make it the color of the background color here and then what we're going to do is we're going to have the background color of the list item become white here so if we go over to our application you're not going to see that because currently we are hiding the filter menu here because we don't have this data defined because right now it's equating to false because it doesn't exist so what we can do to show you how this looks is if we come down to our export default here we're going to say data and we want to return this and let's go ahead and simply say filter menu and we're going to set it equal to null so if i do that you'll see that it's still not going to be shown but if i change it to true what will happen is you'll see that we have our filter menu here and we can hover over these and it all looks great and that box shadow just goes ahead and separates it a little bit from the background here it makes it stand out a lot more okay so there is our filter by status so let me go ahead and put that back to null now the last thing we need to work on here is actually our button so let's head down to our styling here and just below filter i'm going to target our button here now for our button class here we already have some of this defined inside of our app.view so we are going to be changing a few things but for a lot of the styling you'll see here we don't need to do anything because we already have this button class defined inside of our app.view alright so what i want to do here is we're going to give this a let's see padding value here and we're going to say 8 pixels and we're going to do 10 pixels on the left and right so 8 on the top and bottom 10 on the left and right here and what we want to do is give us a background color and we're going to say 7 c 5 d f a which is that bright purple we've already went and used for our actual branding and our logo on our navigation and the last thing i want to go ahead and do here is give this a border radius of 40 pixels here now inside of this button class we have a class called inner button here all right and what we want to do is if you recall if we head back up to our markup here we have this enter button set to flex as well so inside of here i'm going to pass the margin right value of 8 pixels we're going to give this a border let's see radius of 50 oops and we're going to give this a padding on all sides by 8 pixels here okay and then i'm going to align the items to the center and we're also going to justify content to the center and we're going to give this a background color of fff here all right and then inside of here we have our image so we're going to say img and we're going to do a width and we're going to set that to 10 pixels and we're also going to have the height be 10 pixels as well so that should go ahead and do it for our styling here so if we head over to our application we should see we have this nice button right here but obviously when we click on it we don't have anything happening so we need to set up our functionality to actually click on this invoice and slide over our modal and we also need to set up the ability to click on the filter by status and toggle the filtered menu now the two functions that we need to create here are going to be our toggle filter menu and also our new invoice now i realized when i was going back through my code we actually do not need to have this pointer events on our span and image tag i actually went ahead and over complicated things in my initial demo here so i'm just going to remove that and we also no longer have a need for this filter ref on our filter menu so i want to go and start off by getting rid of that as we do not need it any longer so now the two functions that we need to create here are new invoice and toggle filter menus so we haven't defined our methods that so let's go ahead and do that now for our new invoice function we don't have the modal created to really implement any type of functionality but what i do want to do is just actually create this function and have it empty in our methods here so let's go ahead and have an empty function here now the one function that we can create is going to be our toggle filter menu which is actually going to be a very simple function so just below our new invoice here i'm going to paste in this name of toggle filter menu here and all we want to do each time we click on it is alter the value of filter menu from true to false now the easiest way to do that is by saying this dot filter menu which is going to refer to this data right here and we want to set it equal to the opposite of this dot filter menu which is going to be like a switch or so every time we click on it it's going to go from from false to true and then it's going to go from true to false so we can actually see this in action if we head over to our application now and if i click on the filter by status you can see that when we click on this we have the pop-up appear and if i click on it again it'll go ahead and disappear if i go ahead and select on one of the items it'll go ahead and disappear as well okay so what i also want to do is because currently right now it doesn't have a cursor over it and i think it looks a little bit weird so what we can do is here on the filter we can actually do i believe a whole cursor pointer on this and that should be good let me go actually that's a filter menu that's not going to work we want it to be on the actual filter itself so let's just do cursor and do pointer like that so now if we head over here we should see that we're going to have this cursor pointer right there and that is going to be our filter menu now in order to actually create our invoice we need to work on actually creating our invoice model so let's go ahead and start to work on that now here inside of our components folder let's begin by creating our invoice modal so we'll say invoice modal and we'll do dot view and we'll start off with our view template tags here and let's go ahead and give this a name so we'll say name and we'll just say invoice modal and then i also want to import or i should say paste in all the data that we're going to be using inside of our inside of our markup to bind our input values to the data that we're going to send over to firebase so to save some time i just want to paste those in because there is quite a bit so you can either pause the video here and you can type all these out or you can just head over to the finished repository and you can go ahead and grab these as well alright the link will be down below in the description for that as i mentioned earlier on in the video now with that out of the way let's go ahead and begin with our markup here so what i first want to do is create a div with a class of invoice wrap here we're also going to apply flex and we're going to give this a flex column okay and then i want to pass a few things along with this so we're going to do a click event here so we're going to say add click and we're going to run the function of check let's see click here and we haven't created any of these functions yet but i just want to go ahead and put these in here so we don't have to come back and apply these when we go to create these actual functions in our methods below and then i also want to pass a ref attribute here which is going to be called invoice wrap all right and you'll see why we're going to be using that later now inside of this div we're going to create a form and we're going to give it a class of invoice content and we don't need a form action here but what we do need to do is when we submit this form we want to run a function called submit form now by default when you submit a form it's going to refresh the page so we don't want to do that because then we're going to lose all of our data we want to prevent the default from happening so how we can do that with vue and on the pretty much on any uh you know click handler here or any type of event you can pass the prevent here to prevent the default from happening with whatever you're doing in our case is going to be preventing the default when the form submits okay now inside of here we want to start off with our header so it's going to be our h1 and we're going to call this new invoice okay now the first section we're going to be creating here i'm going to go and comment this out is going to be for our bill from section here so what we want to do is we're going to have a div the class of bill from we're going to apply flex and also flex column now inside of here we're going to have an h4 and it's going to say bill from and now we're going to have to create our inputs here so to do this what we want to do is go down to the next line here and we're going to have another div and this is going to have the class of input flex and also flex column here now inside of this input class we're going to have a label and we're going to say for so this is going to be for the first data here which is going to be the biller street address so i'm going to copy this right here i'm going to paste that in and we're going to put inside the label street here okay and then what we want to do is create our input here so we're going to say input which we're going to have a type of text and we want to apply a few other things to this so we want to first off use the required so we're not going to be doing any sort of validation beyond some required attributes here on our input just to make it a little simple we could do some really in-depth validation but to keep this project simple and within time means i just i just went ahead and use the regex required method here we're just going to look at the input and make sure that it's filled out okay so that's the only validation we're going to be doing here now what we need to do is pass it an id here so if we click on the label we can actually get put into the input here so we're going to pass the id the same value that we have for our label 4 here and then the last thing we want to do is attach a v model which is how we're going to bind whatever a user types into this input to our data down here so we're going to say v dash model and we'll say biller street address now what we need to do here is we're going to have something very similar in a second to this right here so most of the most of this form and this modal will consist of this div structure right here the class of input a label and then an input okay but for the next portion of this we're going to actually have if i come over to a new invoice you'll see that it's going to be a three uh column row here so we need to go ahead and create that so it's going to be a little bit of a different structure than just a street address right here so what we want to do is we're going to have a div with the class of let's see location here location details and we're also going to apply the class of flex now inside of here we're going to have three of our inputs so i'm just going to go and copy this down three times and then we'll save that and then i'll simply just go one two now we obviously need to change some things out here so we want to change this to biller city so we'll say biller and we'll say city and we want to change the label here to say city and then we want to change the four attribute here to the same thing and then we also want the v model to be biller city next up we're going to have our zip code here so we're going to say biller and then we'll do zip code which is camelcase like that and then we'll just come over here to our actual label content and then we'll say zip code here as well and then we need to change that out here and also right here okay and to speed something's up here so next thing we need is going to be our biller country so i'm going to go ahead and copy that from right here and then we can just go ahead and paste that in here in here and here and then we can change the label value in here to say let's see cco country okay and that's going to be it for uh for our bill from section now the next section that we need to create is going to be the bill 2. now just outside of our bill from section here i'm going to do a few line breaks and we're going to go ahead and add a new comment here and we're going to say bill and we'll say 2. okay and then let's add a new div here which is going to have the class of bill 2. we're going to say flex and then also flex column here now inside of here is going to be the same exact structure for the most part so what we want to do is we're going to get an h4 here and we're going to say bill 2 and then we're going to have all of our inputs here so if we head back over to this you can see we're going to have three just single row inputs here so let's go ahead and create those so what i'm going to do to speed things up is just simply copy one of these and what we'll do is we'll do one i'll save that and we can just duplicate that down two more times here so if we head down to our data here first off we're going to want the client name so we'll just come over here and change out this change out this and put that like that and then we need to change the label here to say oops we'll say client's name here the next one we're going to do is a client email so let's just copy this right here and we'll say client email client email like that and we'll just say clients email and then the last one we need here is going to be for the client street address so let's just copy this let's get this let's put that here and we'll just say street address and i think we should capitalize that as well okay so the next thing we need to do is something very similar which is going to be our location details so to pretty much copy this is the best way we can go ahead and speed things up here because it's going to be exactly the same and then we'll just edit out the ids and the four attributes on our labels so let's just go ahead and shrink this up and copy that here and just below our div let's go ahead and paste that in so instead of it being the client let's see i think the client city we're sorry the biller city we're going to change this to client city so we'll say client city client city and client city and we can leave the labels content as city zip code and country so then next up we're going to want to do client zip code here like that and then lastly we want to do the client country here all right let's go ahead and grab that like this and there we go now before we continue on here what i want to go ahead and do is start to actually insert this modal into our application because right now if we go over to our app we click on new invoice we don't really see anything and i kind of want to show you visually what we're doing here as we go along so i think at this point i want to go ahead and quickly add this to our application here so to do that let's head over to our app.view here and just like we went ahead and imported our navigation component we need to do the same thing here for invoice modal so let's go ahead and say right below our import navigation we'll say import and we'll say invoice modal from and then we'll do our uh path here so we'll say slash components and then we'll do invoice modal then let's go ahead and register this invoice modal and where we want to go ahead and insert this is going to be inside of our app content div here all right so we'll go ahead and say like that now we're just going to leave it like this for now eventually we're going to be using our store in our state management to actually toggle the modal on and off but since we're just actually creating the markup and all the styling it's fine to leave it as it is for right now so if we head back over to our application now we should be able to see that we have all the markup that we've created so far for our invoice here now continuing on with our markup here just below our bill 2 section we're going to create our next section here which is going to be our invoice work details okay and then we're going to have our div here which is going to have the class of invoice dash work we're going to apply flex and also flex column here now inside of here we're going to have a div which is going to be a two row uh sorry a two column row for our payment uh our payment details such as the invoice date and the payment due date okay so we're going to have a div the class of payment here not payment payment and then we're going to also apply flex here and now for these two they're going to be very similar to how we have our div up here so what i want to do is copy this one time and then we'll paste it in here and then let's go ahead and paste this down one more time now instead of it being client name we're going to go down here and we want to get the invoice date uh let's see invoice date right here let's go ahead and grab that so we'll say invoice date and what i could actually do it's all at the same time i'm actually taking a lot longer to do that than i should and then we want to pass invoice date and here now one thing that we want to do for this is actually disable this input here okay because we're going to be generating the invoice date and the payment due date ourself so we don't want the user to be able to type anything in here so we can avoid them doing that by putting the disabled attribute here on the input itself okay and then the next portion we want to go ahead and do is going to be the payment due date which is right gonna the value's gonna be right down here and i'll explain to you why we have the payment due date in unix right here we're gonna be using that for actually generating our date okay so we'll have just copy all these and do payment due date here and then we're going to say let's go payments do there we go and that should do it for our payment here so let me go ahead and collapse that up here now the next thing we're going to be working on is going to be our payment terms which is going to be in a single row so if i head back over here you can see that the payment terms and description are going to be single row inputs here okay so what i'm going to do is actually go back up here and let's grab one of these because this is what it's going to mimic the most and let's paste this down and then let's go ahead and oops that's too many let's go ahead and duplicate that like that okay so this one's going to be for the actual payment terms here so let's go down to our data here and we're going to get payment terms and we'll replace the four here as we have for all of them we'll say payment terms and then the label will say payment terms and you know what i'm getting ahead of myself this is actually going to be a select so let's go ahead and say selection we'll say select here and then we need to get rid of this and then we need to end it here and inside of here we're going to actually have some options so we're going to pass an option tag here and the value is going to be 30 for 30 days and then we want to pass the actual text in here and say net 30 days like that and let's copy and paste this down once more and we'll replace this with 60 and then replace the 30 with 60 as well okay so that should be our payment term selection right there hopefully didn't mess anything up there because i did mess that up in the beginning here so what we want to do next is going to be our product description so let's go ahead and grab that from our data down here so this one that's the only one that's going to be different these this would all be the same like we've been normally doing here and then what we want to do is we're going to give it a we're going to copy all this we're going to say product description here and then what we'll do is just copy and paste this in we'll capitalize the p there and then put a space to save some time and there we go that is going to be our product description now the next thing we're going to be working on is going to be our list items which are going to be these right here so we're going to add this section in right here so let's go ahead and just close these up here now what we want to do is we're going to go right below our input here and we're going to say div and we're going to go work items as a div class name and then we want to have inside of here an h3 which we're going to have it say item list all right and then we're going to actually create a table here so we're going to go ahead and open our table tags and we're going to pass this the class of item lists all right and then inside of this table we want to have our table row for our headings so we're going to have a tr and we're going to pass this the class of table heading like that and then inside of here we're going to have our table headers so we're going to have th and then we're going to pass this the class of item let's do dash name and we're going to say in here item name and let's go ahead and copy this down three more times and then we're gonna have the second one here have a class of quantity so q2y our q t y oh my god that was bad and then we'll say q t y that's like a tongue twister there for some reason for me and then let's go ahead and say price and we'll do price inside of here and then the last one is going to be our total okay so total and then we'll do total right here all right so that's going to be it for our first table row now the second table row is going to be dynamic now what we're going to do is we're going to have the ability to add items to our invoice item list array right here and for each one we have we're going to iterate through and create a table row now how we can iterate through a list and actually output uh content is with a v4 loop on the table row so we're going to do is we're going to say tr here and we're going to give this a class of table items okay and we also want to pass along flex here and i forgot to put flex up here as well let's go ahead and pass that up there all right now in on this tr what we want to do is we're going to pass a v4 here so let's say v4 now how we do this is we want to create the item that we want to iterate through so we're going to almost refer to it as a v4 loop but we're going to it's like the the view way to do this so we're going to say item and then we're also going to pass an index value here because you have to have an index value otherwise you're going to get you don't need an index value but it's easier to use an index value on your key because you need to have a key for whenever you're iterating through or using a v4 loop otherwise you're going to get an error all right so we're going to say for each item in our invoice item list right here and then we also need to pass a key so i'm going to go ahead and say colon key and we're going to bind that with the index value here you can see once we do that we're going to get rid of that error now what i want to do is i'm going to copy these right here to save some time and what i want to do is we're going to come inside this table row right here and we're going to save this and instead of it being a th what i want to do is we're going to change this to a td for table data now instead of having the item name in here we're actually going to have an input so we're going to go ahead and say our input tag here and we're going to have it be a type of text but we're going to v model our input to our item value here because inside of this invoice item list we're going to have obj or we're going to have objects and each of the objects are going to have uh the property of the item name the quantity the price and the total so this may not make sense right now but once we create our actual um once we actually create the object inside of the invoice items list it'll make a little bit more sense but for now what we're going to say here is we're going to go v let's see model and we're going to say for item because we can reference that item right here which is what we're iterating through and we whoops i hit the mic sorry about that and we want to say item name which is the value or the name of the value we're going to pass along inside of this array later on okay hopefully that makes sense and isn't too confusing now i'm going to copy this down because we're going to want to do this for the other options here so for our quantity we're going to paste this in here so we're going to have item and it's going to be q t y and then we want to do the same thing for the price and we actually want to get rid of that text in there as well get rid of that as well and then we want to do the same thing for the price here so we're going to say that the v model here is going to be item dot price okay now the next option we're going to have here is going to be our our total so how we're going to get our total and i also want to pass the value of flex on here now how we're going to get our total is we're going to take the item quantity value and we're going to times it by the item price and i made a mistake right there before it gives us an error and that's how we're going to get our total value here so what we can do is inside of our table data we're going to do our money sign and we're going to go ahead and do our brackets here so we can actually reference some our number inside of here and we're going to say item dot total is going to equal item dot q t y and we're going to multiply this by item dot price here and i'll explain this more as we go along and actually create the functionality here for actually creating a new item or a new object inside of this array it'll make a little bit more sense then right now it may be a little confusing and i apologize for that so after this we also want to pass our image here so that we can go ahead and delete this so we're going to have an image and then we're going to pass it the src value of at assets and we're going to say icon dash delete dot svg here okay and then what we're also going to do is we're going to create a function on here we're going to say at click and we're going to call this deletes invoice item and we're going to pass along the item dot id that is created when we go ahead and actually create a new invoice item here so we can go ahead and delete it so as i mentioned with all the uh functions we applied here so far we haven't created those but i wanted to go ahead and do that so that we don't come back here and add those later on all right now the last thing that we need to do is we have all this completed but we need to have our button here so that we can actually create a new invoice item now we're not going to create the functionality you said but we need to actually have the button to do so and if i show you what we have currently you'll see that it doesn't look pretty but this is what we have and we need to go ahead and add this button right here which is going to add a whole new row of our items here all right so let's go over right below our table still inside of our work items here we're going to go ahead and create a new div with a class of flex and also the class of button here okay and then what we're going to do here is we're going to have an image inside of this div so we're going to say image and we're going to look for our in our assets folder and to save some time i don't know why i typed out the last one let's just go over to our assets here and we're going to say the icon plus and we're going to copy that and we'll say like that and then what we want to do inside of here is we're going to have the text of let's see here we'll go down a line add new item like that okay and then what we want to do is pass on this div right here we're going to pass a click handler and we're going to run the function of add new invoice item here all right so that should go ahead and do it for our work items now if we head over to our application here you're not going to see much of a difference you will see that new button here and obviously when you click on it nothing's happened because we haven't got to add in the functionality yet all right now the last thing we need to go ahead and do is actually create our buttons down here to discard we either save our invoice as a draft or also create an invoice here okay so just below our invoice work here let's go ahead and create our last section which is going to be our save and exit buttons here so let's go ahead and comment this and we'll just say save slash exit here okay and let's go ahead and create a div with the class of save and we're also going to pass along flex here and we're going to have a div with a class of left and we're also going to have a div with a class of right here and the right hand side is going to have flex on it so on the left hand side what we want is we're going to create a button here and this button is going to have a class of red now if you recall we had these color classes in our app.view right right below our button here so we have all these different color buttons that we're going to be using so that's where i'm referencing that class from okay so let's go back over here so on this class what we want to go ahead and do is pass a click event here and we want to go ahead and say close invoice here and then we want to pass the actual value in here of cancel inside of our button now on the right hand side we want to have another button here and this is going to have the class of purple and we're going to say let's see here actually this is going to be dark purple let's see dark purple and then we want to have the click event on this one to save draft and then we want to pass the value inside of the button as save let's see draft here all right let's go ahead and create another one right here and instead of it saying save draft we'll say publish invoice and we're going to say a class of purple and then we're going to go ahead and put the content in here of create invoice here and that should go ahead and do it for our markup so i know that was a lot and might have been confusing especially here in the invoice work details but that is going to be all the markup we need here for invoice model so if we take a look at what we have right now it is obviously not going to be pretty the only thing that looks good are going to be the buttons here so let's go ahead and begin to actually work on making this look a lot better and adding some styling to it now the first thing that i want to go ahead and do here is just simply remove these style tags and let's go ahead and grab the ones that have the scss scope now i could add that on there by myself but it's just quicker to do it this way so first off i want to target our class of invoice wrap here now we're going to target it first off on a tablet view okay so what we want to do here is say position and set this to fix now if you recall if we go to our app.view we have the invoice model inside of this div with the app content class and if we go down to our styling there you can see that this is positioned relative so we're going to position this or our invoice model fixed to the position of our app content here okay so let's go ahead and continue on here so we want to say top is set to zero and we're going to say left is set to zero here okay and we're going to give it a background color of transparent and then we want to give it a width of 100 and a height of 100 vh here and the overflow we're going to set to scroll and now we're going to set a media query up here so we're going to say at media and i spelled that wrong we'll do min with here and we're going to say 900 pixels and let's go ahead and open up our brackets here and then we want to go ahead and say left and we're going to say 90 pixels now the reason why we're doing left 90 pixels is because we have the navigation and if you recall we set the min width on our navigation here if i go over to a minimum within 90 pixels so we don't want that overlapping the navigation we wanted left 90 pixels so by setting our invoice model to left by 90 it's going to position it right alongside our navigation there okay now outside of our media query here we're going to target our invoice content so we're going to say invoice and we'll say content here so we want to position this relative and we want a padding around the entire thing here if my keyboard allows me to type out that here we'll say padding 56 now we want to give this a max width of 700 pixels but we also want to say with set it to 100 percent so the max it'll take up is 700 pixels but it can also be 100 of the space available okay now for the background color here let me go ahead and scroll down a little bit we're going to say background color we're going to use 1 4 1 6 2 5 then we want the color here to be white and we're going to use a custom box shadow to make this model pop from the background that we have currently on our application here so we'll say a box shadow which we're gonna have 10 pixels four pixels six pixels negative one with a rgba value of uh an opacity of 20 percent black and then we have the secondary shadow right here so it's just easier for me to copy and paste it and then type all that out now the next thing i want to go and target is some of our headers here so inside of the invoice content we have an h1 which i'm going to give a margin bottom of 48 pixels which our h1 is going to be for our new invoice title right there so we'll say margin bottom 48 and then we'll give that a color of white okay and then what we want to do here is target our h3 and we're going to do a margin bottom here of 16 pixels we're going to give this a font size of 18 pixels and we're going to pass it a color here of 777 f 98 okay and then lastly i want to go ahead and target our h4 here and we're gonna give this a color of seven let's see i think it's a seven c five dfa and we wanna give this a slightly smaller font size we're going to say 12 pixels and we want to do a margin bottom of 24 pixels now if you recall these h4s are used inside of our bill 2 and our bill from and then the h3 is going to be used inside of our work items div right here okay so if we save that and take a look you should already see things are starting to look a lot better here okay so you can see that we have all this and it looks a lot better already it's formatted and we now we need to actually work on styling our inputs here so let's go ahead and actually work on our inputs so let's do let's go right below invoice content here and we're going to go ahead and say let's see dot and oops we'll say input here and we want to give our inputs here let me just go ahead and expand some of these selectors on my style sheet here we want to give this a margin bottom of 24 pixels for each one of our input to have that separation between them then we want to target our label here and we want to give this a font size of 12 pixels and a margin bottom of 6 pixels here all right and then we want to specifically target our input and our select here okay now for these we want to go ahead and pass the width value of 100 percent we're going to give it a background color of number 1 e 2139 we're going to give it a color of white for the text we want to give it a border let's see radius here of four pixels to round the inputs on each corner by four we're going to give it a padding value here of 12 pixels on the top and bottom four on the left and right and then we want to go ahead and set the border to none here now we also want to target the focus on these inputs to get rid of that nasty outline so we're going to say and focus here and we simply want to go ahead and do outline and set that to none now if we save that you should see a drastic difference in our former and you can see that it looks so much better already with the uh new style in here so we have the background color change and the label set to blue so things are starting to come along here so first up what i want to go and do we're going to start from the top bottom here we're going to work on our bill from and our our bill 2 sections so let's head back over to our style sheet here and let's scroll up here and we're going to open up the invoice content once more and we're going to go right below our h4 here and i'm going to have a comment just to go ahead and separate this out we're going to say bill 2 bill from here all right and this is going to be some pretty simple styling so we're going to target our bill 2 and our bill from classes here and we want to go ahead and put a margin bottom on each of these of 48 pixels to have some separation between the two sections and then if recall we have the location details class in here let's see if i can spell okay and we want to go ahead and put a property on here called gap now when you use flex you can use the gap property to set a gap in between each one of the children so we're going to say a gap of 16 pixels here and then what we want to do is target each one of our divs inside of the location details and we want it to take up an equal amount of space similarly i guess very similar if i can speak my sorry about that very similar to how we did in our navig sorry in our home view here with the actual or was it with the left and right here we're going to pass it the value of flex 1 so they all take up equal amounts of space so all three of them will take out the same amount of space available so we'll say flex and we'll set that to one and now if we head over here you should see that now these are all equal spaced and there is a lot more separation between the sections here okay so that's starting to come along now next up we're going to focus on the invoice work here so let's head back to our style sheet here and let's collapse this and we'll go right below the bill 2 and bill frum and we'll put a new comment here which will be invoice work and let's go ahead and target our invoice work section here okay and now the first class i want to target is going to be our payment and we're going to provide a gap between these two children of 24 pixels and we're going to do something very similar and we're going to say div and we're going to pass the flex value here of one okay and that's going to be it for our payment now below this we have our work items here so we're going to say work and we'll do items and what we want to go ahead and do here is we're going to target our class of item list and we want to go ahead and give this a width of 100 percent now the class of item list is going to be our table here so if i scroll back up and inside of the invoice work if you come down to our table here you can see the table has a class of item list so we want to go ahead and explicitly say take up 100 of the room available all right so now we need to do some styling to our table our table rows and table headers so let's come back down here now inside of our inside of our item list selector here let's go ahead and target or put a new comment here and we're going to say item table styling okay and we're going to target the table heading and we also want to target the table items here okay now what we want to go ahead and do here is provide the gap property again we're going to say 16 pixels and we want the font size to be 12 pixels here all right now we had a class with the name of item name on here and we want to provide the flex basis here to be 50 next up we have the quantity so qty or qty and we want to pass this the flex basis of 10 percent now what we're going to be doing here is for all four of these we're going to have a total 100 so this is 50 of the space this is going to be 10 then we have the price and we're going to have this take up 20 and then finally we have our total here so we're going to say ctotal and we're going to say flex basis and we're going to put 20 percent and we also want to align the self to the center here because we pass flex to that one as well okay now below this or below our table styling here let's go ahead and target our table items directly here and we want to position this relative and then we want to give it a margin bottom of 24 pixels here okay now if you recall we have that image now i don't want that image to be a part of the flex children so we're going to position that absolute so we're going to target the image here which is why we gave the table items a position a relative so what we're going to say here is position let's see absolute we're going to give it a top of 15 pixels we're going to give it a right value of zero we want to give it a width of 12 pixels and a height of 16 pixels now the last thing that we need to do is going to be our button here so or then we have to also do a little bit of styling on our save buttons here but right now we should see that things are starting to look a lot better so you can see that currently this is going to be uh the view of our item list which that one shouldn't be centered so i think we messed something up along the way let me go ahead and take a look at that ah yes i did miss something here so let's see here we want to go right above table items here and we're going to say table heading and we want to say a margin on the bottom here of 16 pixels and for our th i want to text align these to the left hand side so if i go check that out now that looks a lot better okay so with that all done we need to work on this button right here which is pretty simple we already have the default styling for pretty much all taken care of so what i want to do is come outside i believe we don't want to be inside of the item list anymore so i'm going to go ahead and collapse that we want to go right outside here we're going to target our button here and what we want to do in here is you want to pass it the color of white we want to give this a background color of two five two nine four five we want to align the items to the center and also justify the content to the center here and we want to have this take up a hundred percent of the width so we're going to say with and set it to 100 percent and then for the image inside of here we want to simply go ahead and uh space a little bit from the text so we're going to say margin right and do four pixels here and that should be all we have to do for our button and you can see that looks a lot better now now the last thing we need to do is for our save section here which you need to give it a little bit of a margin top and we want to align these buttons to the right hand side so some pretty easy styling so let's go ahead and collapse this and we'll say save here and we want to give this a margin on the top of 60 pixels and then we want to come down and we're going to say the div we want to give this a flex value of 1 and then for the right hand side what we're going to do is we want to justify this content to the flex end here and that should go ahead and do it for our styling so if we head over here we can see that did not work so what did we do wrong here let me take a look so the reason why that didn't work is because i'm actually nested the save inside of the invoice work so that's not going to actually apply those classes so let's go ahead and just copy and cut that out and let's go right below the invoice work there and save that and that should go ahead and apply those classes which it did all right so that is going to be the styling for our new invoice here so what i want to work on next is the javascript and the functionality so currently we cannot close or open our new modal is just open by default we have to generate the invoice date here we have to be able to set the payment so that we can actually have that generated based on the date of the invoice and we also want to be able to create our new invoice item list here so let's go ahead and start to implement that into our modal here now the first that we're going to address is the toggling of our invoice modal so when a user clicks on the new invoice button right here we want to have our model appear now when we click on cancel here we want to have our modal disappear all right so let's go ahead and begin to implement this now what we're going to be doing here is actually using our view store okay so what i want to go ahead and do is create a new piece of state here and this is going to be called invoice modal and we're going to set this equal to null now we want to be able to toggle this data of invoice model from true to false now how we can do that is by using a mutation here so a mutation is how you go ahead and update your state inside of your store here okay so let's go ahead and create our mutation here it's going to be pretty simple and we want to call this toggle and we'll say invoice here okay and then we want to pass and state as a parameter here and simply what we want to go ahead and do is each time this mutation is ran we simply want to say state dot invoice modal equals the opposite of whatever current is so it's going to be like a toggle switch from true and false which you've already went ahead and done inside of our project here already okay so now what we need to do is we want to have in our app.view here we want to go up to our invoice model here we want to have this value of state correlate to this invoice model right here so if it's true we want to show it and if it's false we do not want to show it so how we can actually implement or use this value of state inside of this component here is we're going to go down to our methods or sorry right below our methods and we're going to define a computed here now there's a few different ways we can go ahead and import our state here now the simplest way is we're going to go ahead and say dot dot and we want to go ahead and map state here and then we're going to say an array now we need to also import this into our component here so we're going to say import our curly brackets here we're going to say map state and we're going to say from and then view x right here okay now what we do inside of this is we pass the value of the state we want to go ahead and grab which is going to be our invoice modal here okay so if we go ahead and paste that in there so we're able to use this now inside of our component here and we simply want to go ahead and run a v if on our invoice mode here so we'll say v if and we'll say invoice modal is true so right now it's false so if i head back over to our application you should no longer see that we have our invoice model appearing here okay so that's all working great now what we want to do is when a user clicks on new invoice we want to toggle or we want to run this mutation right here so to do this you want to head to our home view right here now inside of this home view if you scroll up we went ahead and created this function right here of new invoice now we want to run this mutation each time that we click on this new invoice function right here so what we need to go ahead and do is actually do a map our mutations inside of this component similar or very similar to how we did inside of our app here and stuff we're going to go ahead and do a map mutation here okay so let's head up to our script tag here and let's go ahead and say import and we're going to say map mutations and we're going to say from and we'll say view x right here now where we're going to go ahead and map this is directly inside of our methods here okay so there are a few other ways to go ahead and make or commit mutations or dispatch dispatch actions but i'm going to go ahead and be using this way for this project so we're going to say our three dots here and we're going to do map mutations and we're going to pass this in array and we're simply going to grab that mutation from our store here which is called toggle invoice and you realize why i capitalize all these is to differentiate that's not even a word to make you know set apart a difference in the functions that we're calling inside of our methods here opposed to our stores so since they're all in caps i'm going to know that when i'm calling this mutation inside of our application or this component that is going to be correlating to a mutation or action inside of our view store here okay so hopefully that makes sense and you realize why i'm capitalizing all these all right so what we want to do now is each time that we click on this new invoice button right here or this function we want to run this mutation so how we can do this is simply by saying this dot and then calling this name of the mutation we went ahead and mapped in here okay so let's say that and then our function okay so now if we head over to our application here if i click on new invoice you should see that our invoice model is going to appear now we have to do the same thing when we click on cancel here inside of our invoice so let's go ahead and do that which is going to be on our invoice modal and we have this uh button right here when we're clicking on it we're running this function of close invoice let's go ahead and define that here so we'll say methods we'll do close invoice here and then we'll go ahead and do this now we have to do the same thing we want to import we'll say import our curly brackets here map mutations and we're going to say from and then we're going to do view x here and then we want to do our three dots and we're going to say map mutations we're going to call our array here and then we're going to pass in that's the wrong one let's go ahead and grab it over here again let's see if that's going to copy it it did and then we simply want to go ahead and say every time we click on close invoice you want to go ahead and run that mutation of toggle invoice here so if i do this and we run that and we put a comma right there i believe is that the problem is and right there we should be all set i'm going to put a space here so we should now be able to successfully toggle our modal in and out so if we head over to our application now i should be able to click on cancel and our modal is going to disappear and then i can go ahead and re-enable our modal by clicking on the new invoice button here so currently we're able to toggle in our modal if we click on this button but as you can see when we do that it's very explicit now what we're going to do here is use the view animation and the transition wrapper to animate this model from coming in and also from leaving okay so let's go ahead and begin to implement that so i'm going to click on cancel here now what we want to do is here inside of wrap that view where we're actually importing this component we want to wrap this modal or this component inside of a transition tag here okay so then we'll say transition and then we'll go ahead and copy this cut it out and let's paste it inside of here now what we want to do is give this transition a name so what we're going to call this is going to be invoice here okay now whenever this gets toggled it's going to throw out some classes that view automatically applies when you're using this transition wrap here which we're going to use those classes to animate our modal from coming in and out here okay so let's go to our style tags here and we'll go right below the mobile message here now let's go and put a comment and we're going to say animate it invoice here and let's just go ahead and lowercase data okay so there's a few classes that we're going to be targeting here so when the transition is going in and out there's going to be a class that's called interactive now since we gave this a name of let's see here invoice we can actually target this specific transition by saying invoice and we're going to say enter active here and inside of here we want to actually control the transition that we're going to be applying so we can say transition here and we want to say 0.8 seconds long we're going to ease and apply this to all now when it leaves it's also going to have the same type of class it's going to be invoice leave active so we can actually apply these as a shared class or shared styling so we're going to say invoice leave active here okay now there are a few other classes that we're going to need to actually uh you know add some properties to which the first one is going to be invoice and we're going to say enter from so this is what it's going to when the component is actually being toggled and it's coming in this is where we want to start the modal from so we want to have it from off the page here so what we're going to do is say a transform and we want to translate it on the x-axis and if you recall we gave our modal a width of 700 pixels so we want to go ahead and say off the page by negative 700 pixels here okay so with this add it right here when we go ahead and toggle our modal in we should see it slide in from the left very smoothly over uh 800 milliseconds okay so if we head back over to our invoice here you should see now that our invoice is going to come in smoothly from the left hand side but if we click on cancel it's just going to you know go out abruptly so what we need to do is there's also one other class that we need to go ahead and apply to this and it's going to be invoice leave 2. so we wanted to go ahead and leave to this property right here so hopefully that makes sense and the classes kind of do you know they kind of describe what's going on here so what we're going to say here is we're going to go invoice and we're going to say leave and 2. and i'll go ahead and put down below in the description the documents to the view animations where it kind of explains these in a little bit more detail we're just going to cover these very quickly here and i may do a video on this in the future on my channel if you guys want to learn more about view animation just leave that comment down below if you want me to cover these a little bit more in depth okay so now with that at it we should be able to toggle in our modal smoothly from clicking on the new invoice and when we click on cancel it should also retract smoothly there now really quickly here i want to go ahead and address something that you may have caught when we actually toggled our invoice out of the view here so when i hit cancel you've seen this little shadow here and that's actually not a shadow that's the scroll bar that we have set from the overflow of scroll here on this modal so what we can do to fix that really quick is head over to our style tags here and on our invoice wrap i'm going to paste in this code here and we're going to say ann coleman colon webkit scroll bar and we're going to display that as none okay and that's going to go ahead and remove that so now if i come over here and i cancel this out you're no longer going to see that nasty little scroll bar that was happening when we were toggling our modal now when we go ahead and open up our invoice model we're going to want to generate with javascript the invoice date here to populate this field alright so let's go ahead and begin to implement that now how we're going to do this is you want to go ahead and open up a created lifecycle hook here inside of our invoice model component now inside of here i'm going to go ahead and do a few line breaks and i'm going to go ahead and add a comment and say gets current date for invoice date field here all right just to kind of give us some context to what we're doing so what we need to do is get the current date and if you recall we have some data in here and the first one we have is going to be this invoice date unix okay so let's go ahead and generate that value here so how we can get a new date is first off we need to say this dot invoice uh let's see invoice date unix is equal to simply new or sorry we're going to say date dot now okay and that's going to get us the current date now to format this what we're going to do is we're going to say this dot invoice date which if we come back up to our markup here inside of the invoice work section here you can see that this input is being binded to this invoice date so here is where we're going to actually format that date and if we go back to our completed demo we're going to make it look like this okay so let's head back down to our life cycle hook here and we're simply going to say this.invoicedate equals we want to pass along a new we're going to do date and we're going to pass in the value here we have inside of invoice date unix so i'll just go ahead and copy that okay so this alone is not going to get us anything so if i head over to our application now you'll see that it's going to return this formatted like this so that looks really ugly let's go ahead and fix that so what we can do here is we can say two local date string here and we can pass in a few parameters so the first one is going to be en us and the other one is going to be a data value that we're going to create to format it how we want it so it's going to be called this dot let's see date options here now we haven't created this yet so what i'm going to do is actually go over to my finished demo and i'm going to grab this sentence it's just an object and it's very simple i'll explain it and inside of our data here let's go ahead and copy and paste this in so this date options object simply is going to have the year and we want to format this to numeric we want the month and we want that short and then we also want the day in numeric here so if we save this and head over to our application now you should see that on our current project here we have the invoice date formatted to the same exact way we have our demo formatted here with us populating our invoice date here we can begin to calculate the payment due date based on the terms that the user selects inside of this payment terms which is going to be 30 or 60. okay so let's go ahead and begin to implement that now how we need to do this is each time a user selects a new value inside of payment terms we want to run a function so how we're going to do this is we're going to watch the data value here of payment terms and each time that it changes because we have a v model set right here if i go back up we have a v model set to payment terms to whatever the selected option is so each time that gets updated we want to run a function so we're going to use a watcher to achieve this so below our methods we're going to say watch and we want to watch the value of payment terms here and each time that this changes we're going to run a function here now inside of this what we want to go ahead and do is i'm going to start off by creating a new constant here and we're going to call this future date okay and we're going to set this equal to a new date here now the next thing we need to do is we need to look at our data value of payment due date unix and we want to set this equal to future date and we're going to run a method called set date here okay now inside here this may get a little confusing we're going to say future date which is this value right here and we want to say dot get date which is a method and we want to go ahead and add this to the actual payment terms that's being outputted from this data value here which will be 30 or 60. now because the value that's going to be returned in here is going to be a string we can add this value with a string it's just not going to work so we need to go ahead and convert that to an integer which we can do by saying let's see parse and i think i spelled that wrong parse end right here and we're simply going to pass this dot payment terms here because what this is going to equal is either 30 or 60 because the value right here inside of the select options are 30 and 60 but they're going to be a string okay so hopefully that makes sense now that we have this what we need to do is something very similar to how we did our invoice date we need to format this okay so right below this uh we want to say this.payment due date is going to equal new date and we're going to pass along this dot payment due date unix here and we're going to convert this to local date string we're going to pass along en us and then our date options data up here as well just like we did here in the invoice date one so we'll say this dot date options okay and that should be it so now if we head over to our application here and we go to select a payment terms here of 30 you should see that it's going to calculate the payment due date for july and if we do 60 it's going to do 60 days which 60 days from right now is going to be august 2nd now currently if we want to add a new item to our invoice if i click this button right here nothing is going to happen so let's go ahead and implement the functionality here when i click on this button we can add a new item to our list here alright so inside of our invoice model here what i want to go ahead and do is reopen back up our methods now if you recall if we go back up to our invoice uh div right here we have the work items we have this function when we click on this button right here of add new invoice items so let's go ahead and actually create this function so let's go ahead and paste that in here and this is going to be pretty simple so we have this data value here of invoice item list which we want to go ahead and add a new object to each time we go ahead and click on that button so simply what we need to do here is say this dot invoice item list and we're going to say push and we'll pass in an object here now we want to go ahead and pass it an id now i don't recall we added in our uid dependency yet to this component so let's go ahead and do that because you want to go ahead and generate a random and unique id for each one of our invoice items and you'll see why in a moment so let's go ahead and import and we'll say our curly brackets here uid from uid okay and then what we can say here is on this id value that we want to push we can simply call uid and then we're going to say our two parentheses here all right and that'll go ahead and generate a new id each time we click on this button now we have a value or a name of item name here we want to go and pass which is going to be an empty string we also want to pass in the quantity so we're going to say qty we'll pass that to an empty string and then we have the price and that's going to be zero and then we have the total here which is going to be zero so if you recall we're getting all these values or the names of these values from what we went ahead and defined here on our initial uh list right here so you can see we have item name quantity price and then we have our total and then we have that id value okay so hopefully that all makes sense now as i told you earlier it might have been a little confusing but this is where we're getting these uh names of these properties on this object okay so now if we go to click on our button here if we go ahead and open up a new invoice here and we select add new item we should see now we're able to go ahead and type in here some data values or some you know some actual uh text here so we'll say you know it doesn't really matter okay so if we want to add a whole bunch of items we can do that but now if we click on delete we can't remove these so what we need to do is we also define a function here i believe on our image here of delete invoice item here so let's go ahead and define this function as well so right below add new item we'll add this function right here now we do want to pass along the parameter of id because we are defining that inside of this function when we click on it okay and this is where that unique id is going to come in handy so we can delete the correct item that the user is clicking on here so what we want to do is we're going to say this dot invoice item list is going to equal this dot invoice item list dot filter and then we want to pass an item as a parameter here and then our arrow function and simply what we want to go ahead and do is say the item dot id that is not equal to the id so this will go ahead and filter out the item that the user wants to go ahead and delete here okay so if i save that and now we head back over to our invoice here and we add a few so let's just say testing one testing two and then testing three so now if i click on two we should see that two is deleted and now we still have testing one and testing three here inside of our item list so at this point with our invoice model we're ready to actually create a new invoice so to do this we're going to need to hook up our project to firebase and actually create a project now we have not done any of that so let's go ahead and head over to firebase and begin to do that so we're going to head over to the firebase console and here i want to go ahead and add a new project so for the project name we're going to go ahead and just say invoice app yt okay so let's go ahead and click continue here now we don't want to enable google analytics like i do for most projects here on this channel so i'm going to go ahead and remove those and we're going to go in a great project here so as always this will take a little while to create and once it is all done we'll be back and finish setting up our for firestore collection so our project was created and now we're here on our firebase dashboard and what we want to go ahead and do is select the firestore database now we're only going to be using this package here for this project so we're going to select this option right here and we're going to go and create our database and we're going to go ahead and select the option of start in test mode here okay so let's go ahead and click next here and we're going to keep the firestore location on the default option selected here for myself so we're going to go ahead and click on enable and like our project took a little time to create it's also going to take a little while for our cloud firestore to provision here so that has finished provisioning here and we now have our firestore database set up but it appears they may be having some sort of connection issue here let's say it's saying it's failing to load and i guess that was just a little error okay so now that we have this set up we have our back end project setup now we need to connect our front end to the back end now so what we need to do is head over to project overview and we're going to get started by adding our app or firebase to our app here we're going to go ahead and select the web option here so we need to go ahead and register our app here so let's say invoice app yt and we are not going to set up firebase hosting for right now so let's go ahead and hit register app here and it should provide us with a little sdk once this is done and there we go so let's go ahead and copy this var config right here we're going to need it and let's head back over to our project here now in our src i want to go ahead and create a new folder and we're going to call this firebase now inside of this folder i want to create a new file and this is going to be called firebase init dot js here okay and we need to do a few things so first off i want to go ahead and import we're going to say firebase from and we're going to do firebase let's see slash app here okay and then we also want to import fire oops we're going to say quotes firebase slash fire store here all right and now we want to go ahead and copy and paste in our config here okay and then simply what we want to go ahead and do is create a new variable so we're going to say const oops we'll say fire base app here and set this equal to dot firebase.ini app and we're going to pass in our firebase configure that we just went ahead and paste it in now the last thing we need to do is actually export here so we're going to say export default and we're going to say firebase let's see oops fire base app dot fire store here okay now with that we are all set and we have successfully hooked up our project here on view to our back and over on firebase so now that we have firebase implemented into our project let's go ahead and begin the process of being able to click on new invoice right here populate this form with data and then send that data over to our firestore collection here all right so what we want to do first is i guess let me explain how this is going to work because this component i should mention is also going to be used for editing our invoices later on down the road so how i have it set up is to account for that now we have a few functions that we're going to need to create here and they're actually going to be four so we have these two right here so we have this one that is going to publish our invoice we have one that's going to actually save draft now all these two functions are going to do is alter the data down here of invoice pending and invoice draft it's actually not going to run or i should say upload our data to our firestore collection where that's going to happen is inside of this submit listener right here okay and then what we're going to do is because like i mentioned this is going to be also for our editing of our invoice we're going to use this submit form function to check whether or not we are editing a form or if we're creating a new form or i should say editing an invoice or creating a new invoice and then from in there we're going to run two separate functions one to upload and then one to edit okay so hopefully that makes sense as soon as we kind of go in here i think it all will start to fall into place so let's start off with these two functions right here of publish invoice and save draft they're pretty simple so what we want to do is come down here and we're going to say publish invoice and then we're going to say this dot invoice pending is going to equal true because by default or when we create this these are actually both set to null so we need to for our status let our application know whether or not this is going to be a pending invoice or it's going to be a draft okay so the next function we're going to create here is going to be save draft so it's going to be the same exact thing let's go ahead and paste that in here and we want to say this dot invoice draft equals true okay now the next function we want to go ahead and create is actually the one we're going to call inside of this submit form here so let's just go ahead and create this function here so we'll go ahead and say submit form and that'll be a function we'll save that and then the other function we want to create there'll be two of these one for now we'll do one later when we actually edit or set up the ability to edit invoice we're gonna say upload invoice here okay and we're going to be using async and a weight here so i'm just going to go ahead and say simply a sync here and then what i want to do is inside of this function for now it doesn't really make sense why we're doing this like why wouldn't we just go ahead and call this function but like i said we're going to be using a condition in here to check whether or not we're uploading or we're editing and then we're going to call the correct function but for now we can just say this dot upload invoice in there okay so for our actual upload invoice function here let's go ahead and actually create that now like i mentioned earlier we're not going to do any form validation here we're only going to be validating one thing and the rest of the validation will be taken care of with this required attribute on all of our inputs so the only thing i want to validate is that if a user has entered something in the invoice item list we don't want that to be empty so what we want to do here is inside of this function we're going to run an if check here you want to say if this dot invoice oops it's a comma this dot invoice item list dot length is less than or equal to zero so if it doesn't contain anything then we want to alert them and say please ensure you filled out work items and we'll give them an exclamation point and then we'll use the return to return out of this function because we don't want to go any farther all right so the next thing i want to go ahead and do is currently if we look at our modal here we are calculating for our items here we have the item name which is fine so item we have the quantity and the price okay now if we add a new item here item two we'll logo two and then 199 again we're not calculating the total between these two and you can see that's actually the data or data value we have in here that we want to go ahead and pass so we could take care of this once we actually retrieve the data on the invoice view which we're going to create later on but i want to go ahead and actually calculate that prior to uploading so that when we're actually populating our invoice component and our view it makes things a little bit easier so to do this i want to create a separate function and it's going to be for calculating the invoice total so we'll do this right below our delete invoice item here so we'll say cal invoice total and what we want to do here is first off we want to make sure we reset the invoice total to zero because if we make edits which you will later on you'll see where this will become a problem because we're going to increment this value right here uh between all of our items so what will happen is even though if we remove something later on it'll keep incrementing that value and it'll just never you know be correct if we do any edits or remove anything once we actually do our editing so we're pretty much setting this up for our editing invoice as well so what we want to do here is say this dot invoice item list and we want to run through a for each loop here and we're going to save for each item and we're going to have our arrow function here and all we want to do is say this dot invoice total is going to be plus equals so we're going to increment this we're going to keep adding on and we want to say item and we want to get that total value there all right and then let's see we got to put a there and that okay so there's our function now whenever we upload an invoice you want to go ahead and call this function so i'm going to copy this and sorry i think i just hit the mic there and then we're going to say right after this if condition we'll go this dot cal invoice total and there we go now at this point we're going to be ready to reach out to our firestore collection and send over our data now to use our database or refer to it in this component we need to import that so if you recall we have this file of firebase init.js where we actually went ahead and imported the firestore and we're exporting our firestore here so we need to go ahead and call or import that file here to actually use our database so we can say import and i'm going to call this db and we're going to say from and we're going to look in our firebase folder and firebase net so what we can do is in this function we're going to go a couple lines down we're going to do we're going to be using async and a way here so i'm going to store the value of the place you want to upload our file to in a variable and we're going to say data base and we want to set this equal to db and we want to reference a collection now we haven't actually created any collections in our database yet but the beauty about firebase is if you refer to a collection that does not exist it'll go ahead and automatically create that for you so we'll just say invoices here and we want to pass the doc method for a new document okay and we'll put a semicolon there now now that we have this value we want to go ahead and await here so we want to wait till we get database back and we're going to say we're going to wait and we're going to set here so we want to go ahead and set all the information on this new collection item that we just created here okay so what i'm going to do here to save some time is copy and paste all this in okay so what we're doing here is we're pretty much taking all the data that we have here in our data inside of this component and we're uploading it to our new collection item here now the only addition that we're doing is going to be this invoice id which we're going to reach out to our uid that we imported up here and we've already used inside of add new invoice item here except we're going to pass it a value of 6 meaning that we want it to be 6 characters long you can go ahead and pass it any value you want now the default is 11 just for clarification here so what we're doing here is you can see that all the data is the same name as what we have in our data here so we're creating these values inside of our database to be the same thing that we have inside of our component here and we're setting this equal to what we have in our data by saying this.biller street address so hopefully that makes sense what we're doing here and then what we want to do after this is we want to close out our modal because when we create a new invoice we don't want the model to stay open we want the model to close and then we want to go ahead and wait for our newly created invoice to appear on our application now we don't have that set up yet but we still want to close out of the modal here so what we can do is we can do a line break right here and we already have this mutation created inside or mapped inside of this component right here of toggle invoice so simply what we want to go ahead and do is we're going to call this mutation in this function so we'll save this and we'll go toggle invoice and we'll go ahead and save that so hopefully with what we have here if we head over to our application and we go and fill out a new invoice we should be able to submit it over to our firestore collection and we should see that collection item there in our console so to save some time here let me go ahead and fill this out for you guys and once i have it all filled out we'll go ahead and submit it together and hopefully we don't encounter any errors and it submits successfully all right so just finishing up this invoice here so the last thing i want to go ahead and do is add a item name here and we'll just say testing we'll do 1 199.99 now i do want to remove something here and see if our validation works when we go to select create invoice here and as you can see we hit create invoice but we got an error well not really an arrow but it says please fill out this field so we'll say put that back okay so now with everything filled out if we go ahead and hit create invoice here hopefully that works and you can see our invoice went ahead and went away and if we go over to if it lets me click on here our cloud firestore and i refresh here hopefully we should see that collection item which we do here and all of our information that we went ahead and populated in our form is now here in a firestore collection now one small issue i want to go ahead and update from the user experience perspective is when we go ahead and submit or create our invoice there is a small time in between where it actually gets uploaded and then where our invoice actually slides back in there's about two or three seconds there where nothing is happening and that's just not a good user experience so what would be better is if we can display a loading animation letting the user know something is going on and that's we're going to go ahead and implement here into our invoice modal so here in our components what i'm going to go ahead and do to speed things up here is paste this component in now it's very simple so if you want to pause and copy this component really quick you can go ahead and do that or you can find this component and all the styling inside of the finish repository now inside this component for the markup pretty simple we have our div of the class of loading and then we have our span tag now for the styling here we're just simply going ahead and displaying this as flex positioning in absolute giving a background color of black with a fifty percent opacity with and get out of the way width and height to a hundred percent z index to 101 to bring it to the top no matter what and also a top and left value of zero and then we're going to put a slight animation on here to make our span spin so we have a keyframe by the name of spin and we're going to go ahead and rotate that on the z axis of 360 degrees now if you want to learn more about animations i do have a video here on my channel that i went ahead and talked about creating all these little animation spinners and you can find that link down below in the description or just browse through my channel i believe it's something to do with css animations alright and then in here we just simply are styling up our span tag now to go ahead and display this what we want to go ahead and do is first off we need to import this component so let's go right below our db here and we're going to say import and we're going to say loading and we're going to say from and we'll do components and we want to grab our loading now we need to register this component inside of our components here so let's go ahead and do that do we not have any components here so let's go ahead and actually create that and we'll paste that in right here so where we want to go ahead and actually put this inside of our component here is going to be inside of our form here so we're going to say loading and there we go now if i save this and we head over to our application you'll see that we have the loading animation is present off the bat now obviously we don't want this so how can we fix this well it's going to be pretty simple we're going to use a data value here and we're going to say v show and we'll say only show this of loading is true now we haven't created this value yet so let's go ahead and do that so we'll say right below date options we'll say loading and we'll set that equal to null so now if we head back over to our application we should no longer see our loading animation present here so what we want to do is each time we go ahead and do an upload of an invoice here we want to go ahead and set the loading to true so we don't want to do this before the f check because if it is if this uh is true then obviously we don't want to go ahead and initiate our loading and sorry if i hit the mic once again and then so what we want to do is right below raf check here so if that's not true then the rest of this function is going to load so we're going to say this dot loading is set equal to true okay and then after we go ahead and set our database information in here we want to go ahead and turn that off so let's go say this dot loading equals false all right and if we head back over to our application here let me go ahead and fill out this form again and then i'll show you how that's going to look when we go ahead and submit our invoice here okay so just about done here once again so the last thing i need to go ahead and do is add a new item and we'll say testing v2 1 199.99 and let's just go ahead and add another item here just for fun so we'll say testing v3 and there we go so now if we go ahead and uh click create invoice we should see our loading animation appear and then once it is done loading it should disappear and then our modal should go ahead and retract and we should see a new collection item in our firestore collection so if we go ahead and click create invoice here you can see that the loading animation went ahead and appeared and then it went ahead and closed so i think that's just a much better experience to go ahead and have than having nothing happen for those two or three seconds and if we come over here you can see we have our new collection right here and everything still looks great so currently when we go ahead and open up a new invoice or our modal the only way we can get out of it is by clicking on this cancel here and we'll get rid of that uh required uh air in just a second but most websites and applications will allow you to go ahead and you know open up a modal here and if you click on the outside it'll either close that pop-up or it'll give you a warning and that's exactly what we're going to do here for our invoice so if i click on anywhere outside of this modal you'll see you're going to get this pop-up that says are you sure you want to exit your changes will not be saved meaning if we have anything typed in here they're not going to be saved so we can either return which is going to keep us inside of this invoice or we can click close and it's going to shut the invoice or close the invoice okay so let's go ahead and work on implementing this now the first thing i want to go ahead and do is fix that error where you've seen on our application that if we go ahead and click cancel here we're going to get this please fill out the field because what's happening is we haven't defined the type of button here on this cancel one so what we can do here is say type and equal button and then we can go ahead and also put these two submits as well so we're going to go ahead and define these here just to go ahead and keep things consistent so we'll say submit there as well so now if we head over to our invoice and click on new invoice again and we click cancel we should not see that error that was up here and when we went ahead and closed out of our invoice here now what i want to go ahead and do is we're going to create a component for our modal here so what we want to do is in our components folder we're going to go ahead and do a new file and we're going to say modal w here and let's go ahead and create our basic view template now for the markup here it's going to be pretty simple we're going to have a div with a class of modal and then inside of here we're going to have a div with the class of modal let's see here consent okay and then we're going to have our paragraph tag which i'm going to copy in to save some time here and it's going to say are you sure you want to exit your changes will not be saved and then what we want to do here is we're going to have a div with a class of actions and then also flex and we're going to have two buttons here so we're going to have one button and when you click on it it's going to run a function of close modal and the button is going to also have a class here of purple and it's going to say return that's going to copy this down now the next button is going to be for closing the invoice so we're going to run a function called close invoice here and this one's going to have the class of red and it's going to say close here now to speed them speed some speed some things up here sorry about that i cannot speak uh we're gonna go ahead and copy in the styling for this here okay so i'm gonna go ahead and open up this and inside of our style tags here we're just gonna go ahead and say a css scope and we're going to go ahead and paste this in now because we are using our flex class on here it does not make sense for me to go ahead and define that in here so what i can do is we'll come back up to our modal and we'll just say flex up there okay so there is our styling pretty simple pretty traditional to most modals that i make here on this channel for the tutorials so if you want to pause it and copy in the styling here you're more than welcome to do that all right so let's go ahead and actually import our modal into our application now we're actually not going to import into our in invoice model here we're actually going to import it into our entire application and the reason is because when we are showing and hiding our modal when we actually do the animation if we have this component inside of this modal itself when we animate the modal out the pop-up model will go with it so we don't want that so for that reason we're gonna head over to our app.view and begin to import this so let's go all the way to the top here and right below invoice model we're gonna go ahead and populate a new line here and we're gonna simply say modal and we'll do from modal here okay and then we want to go ahead and register this down here all right and now where we want to go ahead and position this modal is going to be above our invoice model here and there we go so currently we don't have anything toggling this from being on or off so if we head over to our application we should see that the modal is going to be present here on our application all right so let's go ahead and address that now since we're going to be using this throughout different components i mean we're going to be toggling it we're going to be using the data in different components or this value we're going to go ahead and create a new level of state here within our application so what we want to go ahead and do here is we're going to have a new state value which is going to be called modal active here and we'll set this equal to null now what we want to go ahead and do is you want to have a new mutation because like i mentioned before when we have our state here the correct way to update state is through a mutation okay so we're going to do here is call a new function inside of our mutations called toggle and we'll say modal and we're going to pass in the value of state as a parameter here and in here we want to say state dot modal active and we're going to set this equal to the opposite so we'll say equals modal active there okay so what we need to do is head back over to our app.view here and i don't believe oh we are mapping out our state here so what we want to do is pass a comma here and we want to import our modal active state here and then what we're going to do is we're going to come over to our modal here and we're going to say v if and we're only going to show this if modal active is true so we head back over to our application now we should no longer see that all right so now how are we going to trigger the modal inside of our invoice modal now you may recall we went ahead and defined this function right here of check click so let's go ahead and start to create this function which is how we're actually going to display our modal if a user clicks on the outside of this modal right here now here in our methods right below our map mutations i'm going to go ahead and create this function of check click now i want to go ahead and pass along the event parameter which i'm going to go ahead and define with the parameter value of e here okay so what we need to do here is we want to run a if check here so if you recall if we go all the way back up to our markup we have this ref value of invoice wrap okay so we're going to use this value or this ref attribute to determine if what the user clicks on is equivalent or equal to this div right here okay so hopefully that makes sense so what we want to go ahead and say here is if e dot target is equal to this dot money sign refs dot invoice wrap then what we want to go ahead and do is commit a mutation to show our modal here so what we need to do is let's go ahead and grab this mutation name of toggle modal and we want to go ahead and import that or we want to map that here in our map mutation so just as we did our state value i'm going to go ahead and pass a comma and another string or another quote and we're going to paste in our toggle modal um mutation here so what we want to do is that this is true then we want to go ahead and toggle our modal so we're going to say this and we're going to toggle modal and then our parentheses there so if we head over to our application and if we click on the outside here you should see now we're going to have this modal appear but if we click on close and return nothing is happening so what we need to do is actually create some functions inside of our modal here so what we need to do is let's first off give this a name we forgot about that we'll say name here we'll do modal now we're going to be importing our mat mutations here so let's go ahead and import that so we're going to import we'll say map mutations and we'll say from and we'll do view x here okay so let's first off start by doing the one that's going to be returned which is going to be the function of close model here so if we click on return we want to just close the modal okay so let's go ahead and say methods here and then we're going to go ahead and do our map mutations and we'll just leave that empty for now and then let's go ahead and paste in our closed modal function here so simply all we want to go ahead and do at this point is we want to close our modal out so let's go ahead and map our toggle modal here and then we simply want to say this dot let's see toggle modal here and we're going to go ahead and close that out now if a user wants to close out of the invoice then we need to go ahead and run a toggle modal here and also we need to run the toggle invoice so let's go ahead and paste this in here and we want to go ahead and say this dot toggle modal and then we also want to bring in here into our map mutations our toggle invoice invoice there and let's just copy this like that and then let's just say this dot toggle invoice here so with this set up we should be able to head over to our invoice uh pop up here and let's just refresh to make sure everything is synced up properly so we're going to go ahead and click new invoice here we're going to click on the outside and if we click return it should just close the modal and our invoice should still be there but if i click on close you should see that the modal disappears and then also our invoice modal also retracts back so at this point within our application we're ready to begin populating our app with the data from our firestore collection so before we can actually populate our app we need to retrieve that data from our firestore collection so let's begin to implement that into our app here so what i want to do is head over to our store or index.js here and we're going to start off by creating a new action in order to retrieve um the data so we're going to go go ahead and call this action get invoices here and then we want to pass in here our curly brackets and we want to go ahead and say commit because we're going to be doing a commit and we also want to pass the state here now before i forget we need to go ahead and create a new value of state here which is going to be for our invoice data so we're going to say invoice and we'll say data and we'll put that equal to an empty array okay now we also need to import our database here into our store so we're going to import db from and then we'll say our firebase slash firebase init here and i don't know why it's a semicolon it should be a colon all right so now let's start off here with our function so what we want to do is actually we also want to use a sink and a weight so we're going to say async here and we're going to do const get data is going to be equal to db and we're going to say collection here and the collection you want to go ahead and get data from is going to be our invoices collection okay now we want to go ahead and say const results is going to equal a weight and we're going to say get data and we're going to pass the get method on this so we can go ahead and get our data now with this results right here or this value of results we want to go ahead and iterate through the results here using a for each loop so we'll say results dot four each here and we're going to say for each and we'll say doc because when we use firebase they return a document so let's say doc here and then we're going to go ahead and run our arrow function here now what we're going to be doing later on is when we add a new invoice we're going to go ahead and also call this function in order to populate our application in real time now firebase does have a real-time listener but we're not going to go ahead and use it here in this application so we're going to go ahead and use uh this method that i went ahead and created so what we want to do is when we rerun this function we don't want to get all of them while we do we want to get all the invoices but if the invoice already exists inside of our data we don't want to add it twice so what we can do here is we can run a if condition or if check here and what we want to say is we're going to say if state we're going to put exclamation point for not state so we're going to say state dot invoice data and we're going to use the sum method here okay so we're pretty much checking to make sure that the data excuse me i'm moving my chair we're going to check to make sure that the iteration of the dock that we're running through does not already exist so we're going to be doing that by using the sum method here so we're going to pass in invoice as our parameter here and then we're going to have our arrow function and we're going to say invoice dot doc id and we're going to say equal to doc dot id so what's going to happen here is if this exists then we're not going to go ahead and run the code inside of this code block here we're just simply going to not do anything okay but if it doesn't exist then we want to go ahead and run the rest of the code here inside of this function so what i'm going to do is very similar to how i did it when we sent the data i'm going to go ahead and copy and paste the data that we want to retrieve because it's quite lengthy and i don't want to sit here and type all of it out for you guys it's not really going to be very productive okay so what we're going to do here is we're setting our data to an object and we're having all this data here inside so we have our doc id which is set equal to the doc right here and that id now when we use firebase when we want to get the data we have to say doc.data which is a method and then we call the name of the property that we have on our firestore collection so we have an invoice id value right here which if i head over to our collection here is going to be all these fields right here so the ones that i'm defining in here are actually the fields that we have on firebase they're all the same so it really should be too confusing here all right now what we want to do is we're going to pass our semicolon here and then what we need to do is we're going to have a new mutation here which is why we have commit inside of this uh of this action here or this function now a good rule of thumb is you never update state inside of an action you always commit a mutation inside of your action now it seems a little confusing and it really you know might not make sense to you but that's the best practice you never go ahead and update state within a action here so the mutation that we're going to go ahead and run is going to call it be called set invoice and data and we're going to pass along as a payload this data value right here okay and we're getting an error here and i don't know why what did we do wrong let me go ahead and check here so it appears along the way we forgot our curly brackets somewhere so let's go ahead and add that and that should resolve our error here now we have this commit which we haven't defined yet of set invoice data so let's go ahead and actually create this so we scroll up here to our mutations let's go ahead and say set invoice data here and then for the parameters here we want to pass and state and also the payload now what we want to do here is we're going to say state and we're going to say dot invoice data and we're going to say push and then we're going to pass in the actual payload here okay and that'll go ahead and add that object onto this array of invoice data right here now one other thing i want to do is we're going to go ahead and say invoice we're going to create a new value of state here and say invoices load it and we'll set this equal to null now we want to create another mutation here just outside of this results dot for each loop here and we're going to say commit and we want to say create a mutation called invoices loaded here now you'll understand why we're doing this later on when we go to populate our invoice view but for now you may not may not really understand why we're doing this but this is simply going to let us know that our data is been loaded and we can use our application with our data now it's a very minimal amount of time that you would notice this or the data wouldn't be loaded before the application was loaded but it will make a big difference when we actually have our components and our views that's going to be using this data because they will get a result of null which will result in errors in your council we don't want that so we can avoid that error by committing this invoices loaded and having this value of true once all of our results have been iterated through here so that may be confusing once again but hopefully that makes sense so what we want to say here is we're going to just pass along state and we're going to say state dot invoices let's see oops can't even type uh let's just copy this i'm having a hard time typing today and we'll say equals true there okay so what we want to do now is you want to head over to our app.view and we need to call this action here when we load in our application so just as we have uh well we don't have our mutations here so just how we have mapped our mutations and our methods we're going to go ahead and map our actions inside of our methods as well in this component so we'll say map actions here and we need a comma there i believe and what we want to say here is inside of our methods let's go ahead and do a few line breaks here one more we'll say map actions we'll pass in the array and the action we want to go ahead and map here is going to be i believe it is i forgot already it's set invoice or sorry it's going to be get invoices right here okay and then we can go ahead and pass that along right there and we'll put a comma there and then what we want to go ahead and do is we can call this function in our create a lifecycle hook right here so we'll say get invoices now you're not going to see anything if we head over that's the wrong way if we head over to our application here not going to see anything we shouldn't have any console errors but if i were to head back over to our app here and inside of our store what we can do is after we set the invoice data let's just cancel or log us out to the console to show you that this is working here so we'll say council log state dot invoice data so we should see this hypothetically ran twice because currently we have two collection items in our store right here and you can see we have two items right here so we have an array which has the first iteration from our collection and then we also have the second collection item here inside of our console so that is all working great so now that we're able to see that we're getting our data successfully from our firestore collection we can remove this console.log statement right here okay now the next thing i want to go and do here like i mentioned is we have the state value here of invoices loaded that when we are done getting all of our invoices from our firestore collection we are going to change this value of state right here if invoice is loaded to true so what i want to do is actually use that value to determine whether or not we render in our application so if we head back to our app.view here we can go down to our map state which is going to be down on our computer and we can map that new value of state of invoices loaded and then what we can do here is earlier on when we created our app.view markup we have this initial div that was wrapping the rest of our application here and maybe you didn't know what that was for but what we're going to do here is we're going to say vf so they only want to render out what's in this div if invoices loaded is true now if we head back over to our application here you shouldn't really see too much of a difference but if we were to go ahead and let's say here we didn't call or applicate or sorry we didn't call this function of get invoices you should not see the application get loaded here if i upload this or refresh you'll see that the screen is going to be white all right so with that condition is not true we don't want to render our application because when we use that data later on in our invoice view and our invoice component we want to make sure before we render out the app that we have our data okay now we could go ahead and throw a loading animation on here so that in the event that something happened and the data wasn't loading in we could go ahead and do that so if you want to add that to your project to go ahead and have as a fallback you're more than welcome to do that but i'm just going to go ahead and simply uncomment this and then our application should work as it was now with our data here we can begin to populate our components such as our invoice component and then also our invoice view so what i want to start off with first here is going to be our invoice component that we're going to display here inside of our home view so let's go ahead and create a new component here inside of our components folder and this is simply going to be called oops invoice.view and let's go ahead and render out our template here and we'll say div with an h2 of testing here okay now what i want to do before we begin styling out and creating a markup for this component is i want to go ahead and import it into our home view here so let's go ahead and say import and we'll say invoice from and then we have components and then we have invoice here and then we need to define our invoice inside of our components section right here okay and then what we're going to do is we want to generate one of these components for each invoice that we have so to do that we're going to need to grab our data from our store here of invoice data now we can do this by actually mapping out state inside of this component which we haven't done just yet so what we can do is first off we need to say map state in here and then inside of our sorry actually below our methods we're going to define our compute it and then we're going to say dot and then map state here and we'll pass this an array and then we want to grab our invoice data is it invoices data or just invoice invoice data okay so from here what we can do is then we can let's go right below here and we'll just do a comment because we're going to keep it consistent here we'll say invoices and then what we're going to do here let me just double check one thing is we're going to have a div and then inside of here we're going to have our invoice component so we'll say invoice like that now what we want to go ahead and do here is iterate through our invoice data here and for each object that we have inside of that array we want to go ahead and generate one of these components here so we're going to say v4 and then we're going to pass this the value of invoice here as a parameter and we also want to index here and we're going to say in and then we're going to go invoice data like that and then we need to pass our key so i'm going to go ahead and bind that and then we're going to pass the value of index here okay so currently we have two invoices so if we head over to our application we should see testing twice okay now what we want to do is because we want to go ahead and use this invoice data inside of this component so what we can do is actually a v bind here so we'll say v bind which is the long way i want to show you just this to iterate how this is working so we want to go ahead and bind invoice as invoice here on this component now the shorthand way to do this is actually to get rid of the v bind here and you can simply just pass it colon invoice equals invoice which is a short way to do a v bind to the component which is a little bit cleaner in my opinion but either way will work and there is really no wrong way to do it but i just prefer to do the shorthand method here okay now inside of our invoice what we can do is let's first off give this a name and we'll say invoice and i believe we've been keeping that lowercase so we'll keep it consistent here and then we want to accept the props here as an array and we want to say invoice here so now what i could do is on our invoice we should have an invoice id so just to show you how this is working i can go ahead and inside this h2 you can use our curly brackets here and i can say invoice dot invoice id here and i believe that's the correct uh value here and we should see that we're getting these unique ids for our invoice from our component here so let's get started here with our markup for this component so we're not going to need this div and this h2 so i'm going to go ahead and remove that what we're actually going to wrap this component in is going to be a router link here and what we're going to do here is bind a 2 attribute to this router link and then we're going to pass it an object here okay so where we want this component or sorry this router link to go to is to a view that we have not yet created which is going to be we're going to pass it a name and we're going to say invoice here so if you're unfamiliar with how this works or how i'm achieving this or what this actually does now there are two different ways that you can get or set up a router link you can pass it the two attribute or the two value of the path that you want to go to so you could pass it this right here now the problem with doing that is if you ever change the path or like you know you want to change it from for example from slash nothing to slash home then everywhere that you went ahead and defined this path in a router link you're going to have to update to slash home where is if you use the name like this inside of the router link even though if you update the path and the name is still the same which you're not really probably going to change the name you're going to be okay and your app will be dynamic and you won't have to go ahead and update anything if you change this right here so a quick little lesson that i usually talk about all my videos for anybody new to view is get in the habit of doing this right here with the name okay so let's go ahead and remove that there all right now on top of also passing it this name value we also want to pass it a params here okay so each one of these or this view is going to have a param and we want to define this param so the param is going to be invoice id here and then we want to set this param equal to the prop we have of invoice dot invoice id okay now on top of this we also want to give this a class of invoice and also flex here all right so it's coming off the page let me just kind of collapse that a little bit so what we want to do is open up this router link here and inside of here you want to create a div with the class of left and also flex all right now inside of the left hand side here we're going to have a few things we're going to have the tracking number we're going to have the due date for the invoice and also the person or client that this invoice is for so we're going to go and create some span tags here i'm going to go ahead and create three of them okay and the first one is going to have a class of tracking number and we're going to set this equal to we're going to have a number here and then we're going to have our curly brackets and we're going to say invoice and we're going to go invoice id okay and then the second span here is going to be our due date so we're going to give us a class and we're going to say do date and we want to pass this to curly brackets as well and we're going to say invoice dot payments and we'll say do date there okay and then the last one is going to be for the client so we're going to give this a class and a person our curly brackets and we're going to say invoice and our sorry invoice dot clients name here okay so that's going to be it for our left hand side so on the right hand side what we want to do this is where we're going to have our status and we're also going to have the price okay so we're going to have a div class of right and we're also going to pass it flex so first off we're going to have our span here with the price so we're going to say class we'll do price and we'll have our money sign then let's go ahead and do our curly brackets here and we're going to say invoice dot invoice total yeah that needs to be camel case right there okay now the next portion is going to be our status buttons now we're going to be doing this dynamically and i want to go ahead and reference where we're going to be getting these classes from so in our app.view i know this was quite a while ago from when you're watching this video in terms of the amount of probably hours it's been two or three is down here at the very bottom we have our status button styling so we have our paid we have our pending and we have our draft so this is where we're going to be getting these class names that we're going to be using inside of this markup here so what we're going to do we're going to have a div with the class of status button here and we're also going to pass it flex okay now on top of this we're also going to do some class binding here so we want to only apply certain classes based on if certain uh parts of our invoice here or invoice data is true or not so we're going to say class here our colon class and we're going to pass some curly brackets here so we only want to so the left hand side is going to be the class name you want to apply and then the right hand side of this is going to be based on the condition if it's true or false so if that condition is true then this class will be applied if it's not then it won't be applied so we want to look at the invoice dot invoice pay now this is true then we want to apply this class and then we can go ahead and add a few more here so the next one we want to look at is going to be draft and we only want to have this be applied if invoice dot invoice draft oops is true and then the last one you want to go ahead and do is going to be pending here so we'll say pending colon invoice dot invoice pending and we'll save that and it should reformat that for us okay so inside of this div we're going to have ourselves a few span tags because we need to have text for paid pending or draft so we want to say span tag here and then i'm going to go ahead and do a v let's see the if on here and let's go ahead and copy this down three times so the first one is going to be for our page so we want to say invoice invoice paid and then we want to go ahead and output here in the span tag invoice or i should say paid okay so i'm going to go ahead and copy this right here and let's just paste it right there and we're going to say invoice draft and then we'll say draft and then finally we're going to say the same thing here invoice but we want pending here all right and then we're going to just go ahead and put pending inside of here okay now the last thing we need is going to be our icon so right below this div we're going to go ahead and say div with the class of icon here and inside we're going to have our image and this image is going to be from the path of assets slash and then we want to go up here i'm going to copy we're going to be using the arrow icon arrow right here so let's rename this copy it in here and paste that and that's the wrong place there we go so hopefully if we did nothing wrong we should be able to head over to our application and we should see that we have nothing here so i'm assuming we have a console here and i probably typed something in wrong so let me check here it says no match for name invoice params invoice id okay so the issue is here we haven't created that yet so i believe if we remove this for right now let me see if i just cut that out here and i put nothing in there i believe that should hopefully resolve the air let me refresh it here and yes so for now until we create that route let's go ahead and leave that empty once we create that we can go ahead and add that back okay so as you can see here we have all of our information from our invoices we have the id we have the date due the person is going to the price and currently they're both pending so everything we've done so far besides the uh router link portion is all working great so now what we need to do is some styling to make them look more like this now really quick before we get into our styling here i want to go ahead and put this 2 value back inside of our router link here and we're just going to go ahead and quickly create the view for the actual route here and then we're also going to create the route inside of our router index.js file here so let's go ahead and say a new file inside of our view here and this one's going to be i will say invoice view that's not how you spell it and there we go so what we can do here is to simply generate a quick view template and just put a div in there and nothing else and then we'll come over here to our routes and we're just going to copy this down and we're going to go ahead and say slash invoice and then what we want to do is bind our param that we went ahead and defined right here of invoice id to this route by using the colon and then passing the name of the param that we want to go ahead and pass so the name we want to go ahead and give this is invoice v-o-i-c that's good and then we're gonna go ahead and actually import that view or that component into this file here so we'll say invoice view and then we should be able to just copy this like that and then there we go so now if we head back over to our application here we shouldn't be getting that error and if we click on any of these values here we should be taken to that route of invoice and then that invoice id that we're passing it here inside of our parameter so for our styling here in our invoice component what i want to do is like always is remove these style tags and we're going to go ahead and generate the let's see here scss scoped and the first class you want to go and target is going to be our invoice here now we want to first off start by doing a text decoration here to none to get rid of that underline we want to set this to a cursor of pointer we're going to give this a gap between all the children or the two children of 16 pixels which our children here are going to be the div of left and the div of right okay then on top of that we want to go ahead and give this a margin bottom of 16 pixels to go ahead and separate each one of our invoices here we're going to pass this a color of let's see here white we're going to give this a border radius and we're going to set this 20 pixels and then for the padding we're going to do 28 on the top and bottom and then we're going to do 32 pixels on the left and right here and we want to give this a background color of 1 e 2139 here which is going to be this dark blue that we've been using throughout our application and since we went ahead and defined flex on here i want to align all the items to the center all right and that should already be looking a lot better here let's go back and you can see that now we have this right here so things are starting to already look way better with those little bit of styling added so we're gonna go ahead and do some nesting inside of here so let's start off with our left hand side and we want to align these items to the center as well we want to give this a flex basis of 60 percent here and we want to give a gap between these children inside of this left hand side or this left div of 16 pixels as well and then what we want to do here is have our spans take up equal amount of space so we can go ahead and pass the flex value of one to those and then finally inside of here we have the specific span of tracking number and what we want to do here is we want to have this be all uppercase so to do that we're going to say text transform and we're going to give it the value of uppercase here and that's going to go ahead and do it for our left hand side here so pretty easy styling for this component and we're almost done now last up we have to do the right hand side here which once again we're going to give it a gap of 16 pixels we're going to give it a flex basis of 40 because we gave the left hand 60 so 40 is going to complete that to 100 percent and then align items once again to the center here and then we want to target our price here and what we want to do is give this a flex value of let's see one here we want to give it a font size of 16 pixels if i can type and then lastly you want to go ahead and give this a font weight here and we're going to give this let's see 600 pixels okay now what we want to do here as well is for all the spans inside of this invoice i want to go ahead and give it a default size or a font size here we'll say font size and do 13 pixels all right and that should do it for our styling here so we take a look at our invoice component now it looks a lot better and if i go and click on one of these obviously still it's going to take us to that invoice view which obviously we haven't went ahead and created that yet but we'll be getting to that next so actually really quick before we get into our invoice view there's one more thing i want to go ahead and address here so what if our application does not have any invoices now it really wouldn't be a good practice or something great to show visually to you know users if there is nothing here just to show a blank screen so what i want to do is if i come over here to the demo i want to show something like this if we have no invoices inside of our application so how we're going to do this is if we go back to our code here if we go to the home view here we have this div wrapper here so what we want to do is a condition so we're going to say v if and we're going to look at our invoice data here and we want to look at the length here so if the length is greater than 0 then we want to output this but if it's not we want to go ahead and output a new div we're going to create here that's called empty and we want to pass the class of flex and also flex oops column here and that's that's not right let's go ahead and copy that in here so column okay so inside of here we want to go ahead and first off have our image so this image can be found inside of the assets here and it's going to be called illustration empty svg so let's go ahead and say our normal path here of slash assets and then our illustration empty mdsvg and then what i'm going to do here is copy and paste in the h3m paragraph that we're going to use for the text here now down below in our styling here we have some pretty easy styling so let's just go below the header here and we'll target the empty class and let's go ahead and say margin on the top 160 pixels and we want to align the items to the center here okay and then for our image here i want to go ahead and define a width on here of 214 pixels and a height of 200 pixels now for h3 i'm going to give this a font size of 20 pixels and then a margin on the top of 40 pixels here and then lastly for my paragraph tag here what we're going to do is we're going to give us a text align let's say align here and put that to the center we're going to give this a max width of 224 pixels give it a font let's see font size of 12 there a font weight of a really light of 300 so a little bit less than the normal and then a margin on the top of 16 pixels here so if we head over to our application you're going to see that it's showing here and that's because what we need to do is we need to use a v if and v else so currently we have it saying vf right here so what we can do is we can output a v else on here and we shouldn't see that because this is true okay so we go back over here now we're not going to see it so how we can actually see this without removing it is let's go ahead and say if the length is greater than 3 which is not true so we should see this and that looks great so that's going to be a way better way to visually show your users that we have nothing here without showing them a blank screen it's just not good practice to go ahead and do that so i think this is a really good idea to display if we don't have any invoices now let's begin to work here on our invoice view so the first thing i want to go ahead and do is be able to get the current invoice that we're navigating to so what i mean by that is on our application here when we click on invoice we're being directed to slash invoice slash 3b756b which is an invoice so we want to be able to get that invoice information and display here on the page so we have to do this for each one of our invoices okay because see this one has a different route here now how we're going to do this is we need to get or use this current route id and we need to go through all of our invoices and return the one that matches this id right here okay so let's go ahead and begin to implement that now the first thing that we're going to do is create a new value of state and this is going to be called current invoice array and we're going to set this equal to null now we need to go ahead and create a mutation in order to actually get this current invoice array all right so what we're going to do here is we're going to call this mutation set and we'll say current invoice like that and we want to accept the state in here and also the payload now inside here we're going to say state dot current invoice array is going to be equal to let's see state dot invoice that's where is it at invoice why is it not showing up here invoice data there we go let's give me some trouble and then we're going to call the filter method on here okay so what we want to go ahead and do in here is provide it a parameter so we're going to call this invoice and then we're going to have our arrow function here now we want to return here the invoice.invoiceid that is equal to our payload that we're going to go ahead and pass this function here and that's going to be simply it now over in our invoice view let's go ahead and start to set this component up here we're going to call the name here and we'll just say invoice view now we're going to be needing to map our state to this component we're also going to be needing to map our mutations so let's go ahead and import those to begin we'll say import here and we'll call our map mutations and also map state here we'll say from and then view x in here so let's go ahead and begin by doing our mutation here so we'll call our methods and what we want to go ahead and do here is do map mutations and then we're going to call the sets current invoice here and then let's go ahead and import our state that i want to go ahead and do which is going to be our current invoice array so our computed here and then we're going to go ahead and map our state and then we'll say current invoice array here all right so what we want to go ahead and do now is create a function that we're going to go ahead and call within our created lifecycle hook to go ahead and create or set our current invoice so let's go ahead and call our creator function here and this is going to be called get current invoice now inside of here what we want to go ahead and do is simply call the set current invoice and we need to pass it a payload now the payload that we want to go ahead and pass it is going to be the current route id right here so how can we get that route id now it's actually really easy we can pass it or get that and pass it as a payload by saying this dot money sign route and we can access the params of this route by saying dot params and if you recall the param that we went ahead and defined on this path is invoice id so i can copy this or i just want the invoice id here and we can paste that inside here so we're going to say we want to pass the payload here of this dot route that params that invoice id which will be this right here okay so on top of that what i also want to do is i want to create a local data here so we're going to call data here and then we'll put our comma there and let's return this now inside of here i want to go ahead and create a value of current invoice and we're going to set this equal to null at the start and i'll show you why we're going to do this in one second so first off let's go ahead and actually get the current invoice here so let's do created here and let's go ahead and run the function of this dot let's see get current invoice here now i want to show you let's see how i can do this now since we'll have access to this so we're calling it here that means when the uh the component is created it's going to reach out to our store and call this right here so we should have this value state populated so inside of my div here i should be able to access the values of the current array now so if i just output current invoice array and i want to go ahead and get the invoice id here so if i say invoice id and if i go and save this and i go to my page here we're not going to see anything okay if i come out go back in not seeing anything now the reason why is because that does not exist and i want to keep it clean so this is why i have this right here what we'd have to do is we'd have to pass the value of zero in here every single time you want to go ahead and get something off this current invoice array because at the end of the day it's an array of objects that returns from our filter method so in order to keep our code a little bit cleaner and not have to keep typing in these zeros right here we're gonna set the current invoice array of zero to the current invoice here hopefully that makes sense and then now you can see we're able to see our invoice id here and if i go to another one you'll see that we have this one here so that is all working great so let's go ahead and fix this so inside our function here we're simply going to say this dot let's see current invoice is going to be equal to this dot current invoice array and then zero we'll save that and now what we can do is we can remove this and we can say current invoice dot invoice id and that looks a lot cleaner and in my opinion is a lot easier to read than having to add this zero to our uh value of our data here inside of our um html markup so if i go back over here now that is all still working as it should so let's begin here with our markup so i'm going to remove this div that we went ahead and created for testing here and we're going to go ahead and create a new div now this div is going to have the class of invoice view and we're also going to have the class of container on here now what we want to also do is say v if and we only want to display this if our current invoice is true okay now let's go ahead and open this up now we want to go ahead and start off here by creating a router link here and this is going to be for our back button to go back to our home view so we'll go ahead and save that and we have our class here and it's going to have the class of nav link which if you recall is a class that we have inside of our app.view here okay so that's where we're going to get that from and we also want to pass the value of flex here as a class name and then for the two attribute here we're gonna bind this and we're gonna say name here and we want this to go to our home route now inside of our router link tags here we're gonna have an image so let me open this up so our image and we're going to go to our assets here and we want to get the arrow left svg here so let's copy that and paste that in here all right and then right next to that we're going to have the text saying go back and that's going to be our router link here now right below this we're going to have our header or heading section here which is going to have the status and a few of our buttons so we're going to have the div with the class of header and we're also going to pass the class of flex on here now inside of here we're going to have a left and right hand side very similar to how we did inside of our invoice component so we're going to say div and we're going to say left and we're also going to have flex on here now we have already done something very similar to what i'm about to put in here for the markup so to save some time i'm going to go ahead and paste this in here so we did the same exact thing i believe inside of our invoice component right here where we have this div with the class of status button and flex and we're also going to bind the class here of pay to whatever the current invoice dot invoice paid value or draft or pending is so to save some time here and speed them some things up here i'm going to simply go ahead and copy and paste this into this div with a class a left okay now if you go ahead and copy it and paste it in from this component right here all you're going to want to do is change this from invoice to current invoice okay now for the right hand side i'm going to go ahead and collapse that up here we're going to have a div with the class of right and also flex here and then what we want to do is have a button which we're going to have a few of these and we're going to pass it the class of dark purple and we're also going to have a click handler on here with a function so we're going to say click and we're going to run the function that's not right of toggle edit invoice here and we're going to pass it a parameter of current invoice dot dot id here all right and then for the value inside of this button it's going to be edits here okay and then let's just go ahead and copy we'll just do a new one here so we're going to have another button here and we're going to have a click event and we're going to call delete [Music] invoice and we're also going to pass the current see here current invoice dot doc id to this one and this button will have a class of red and then we're going to pass the value inside of this button as deletes here and then one more button here actually i think we'll have a few we have two more we're gonna have our let's see here button and we're gonna have this one have let's see here it's gonna have a class of green so we'll say class and we'll say green here now we only want to show this button if the invoice.pending is true so this is where we're going to have that switcher to where you can you know mark it as paid and then mark it as pending so we only want to show this button right here if current invoice dot invoice pending is true and the text inside of here will be mark as paid okay oops now the uh the function we want to go ahead and run in here is going to be i will say at click here and we're going to be say update status to paid and we want to pass along the current i'm just going to copy this here to save some time the current invoice dot doc id in here all right and then the final button here we want to go ahead and add is going to be the one to mark it as pending so we only want to show this button if the currents invoice dot invoice let's see draft is true or let's see here if the current invoice that invoice paid is true okay so we only want to have it go back to pending if either one of these conditions are true so we don't want to show this button if the item is already pending so hopefully that makes sense what we're doing here and then when we click on this we want to run the function of update status let's go ahead and camel case that status to pending here all right and then inside of the button here we also want to pass a class which is going to be orange and then for the value in here we're going to have it say mark as pending okay and that should go and reformat it there so that was a lot so hopefully you guys aren't too confused but that's going to be all the markup here for our header and what i want to do here is just a simple comment and we'll say header right there now just below our header here i'm going to go ahead and create a few line breaks and let's go ahead and enter a new comment and we'll say invoice details here and let's create our div so we'll say div dot invoice details we'll say flex and we also want to pass flex column on here okay now we're going to have this separated into three different sections we have the top we have the middle and then we have the bottom of our invoice details so we're going to start obviously at the top here so let's say div dot top and we'll also say flex on here now inside of here we're going to have our div with the class of left and also flex and just save some time i'm going to copy and paste in the actual data for this so inside of here we're going to enter a span with the number we're going to have the invoice id here and then we're also going to have inside of a paragraph tag as both of these are the product description okay now below this we're going to have our div with the class right here and the same thing i want to also actually add flex and flex oops column here now inside of here i'm just going to copy and paste in this as well so we're going to be using all paragraph tags here and inside of here we're going to have the biller street address the biller city the biller zip code and the biller country so this is what you're gonna see on the right hand side of our finish invoice so actually you can't see that because i turned it off so yeah you can see it's right here and this is gonna be the stuff that's gonna be aligned on the right hand side over here okay so next up we want to work on our middle so that's going to be it for the top and we're going to say div dot middle here and we want to pass the class of flex on here and we're going to have the let's see here we'll have an h4 uh is that right no sorry we want to have a div first inside of here of payment we're going to have flex and then flex column here so we're going to have an h4 why'd it do h2 that was really weird you guys seen that was h4 right don't know why i did that we want to have invoice date in here and you know what i'm just gonna copy and paste the rest of this and i don't think you guys want to see me type out all this markup as much as i don't want to type it out myself so uh we have the paragraph tag here with our current invoice and invoice date another h4 with the payment date and then we have a paragraph tag here with the payment due date off the current invoice array or the current invoice data value okay so this is go the middle section is going to be three columns so the payment was the first column now we're going to have a middle column here which is going to have a div or be a div with the class of bill flex and flex column here and i'll just paste this in as well it's really simple markup so i don't think it's really worth me uh typing all this out so we have our h4 with bill 2 and then we're going to have our client name our clients 3 address our client city zip code and then our country okay and then the final section or final portion of this middle is going to be the div with the class of send to we're not top send to flex and flex column here and inside of here we're just going to simply have an h4 and then we're going to have our paragraph tag with the client email okay and that's going to be it for the middle now for the bottom here we have a div with a class of bottom we'll say flex and flex column like that now inside of here we're going to have a div with our billing items and we're going to have our div with the class of heading and we want to pass flex on here now inside of here we're going to have paragraph tags we're going to have four of these and we'll just let's see here copied that down four times so we're going to have the let's see item name in here we'll have the quantity so we'll say qty and there we go let's capitalize that then we have our price and then we have our total here okay now very similar to how we did our new invoice we need to iterate through our invoice item list here inside of our invoice details so right below our headings div we're going to go and create a div with a class of item and also flex here okay and then in here we want to do a v4 loop i'm going to say item as our parameter index and then we want to say in we're going to say current invoice dot invoice item list like that and don't forget we have to do our key and we're going to pass in the index value there for that now inside of here let's just go ahead and paste this in it's very similar to how we already did it in our new invoice model we're going to have the item that item name the quantity the price and the total here okay and then the final thing here inside of the bottom so if i close out the billing items here we're going to have the actual total so we're going to have a div with a class of total and then flex and we're going to have a paragraph tag here with the amount due and then another paragraph tag here and we're going to say current invoice dot invoice total here and that's going to be all the markup we need here so i know once again this combined with the actual markup for our invoice model was a lot but now that we're done that's going to be the majority of the markup we need to do for this whole entire project so that's good now hopefully if we did nothing else wrong we should be able to head over to our application here and see all this data like so and we have no errors so that's good so let's go ahead and address this because obviously we need to do some formatting so let's go ahead and add some styling to our invoice view so let's go ahead and remove our style tags here and let's add our scss scoped and the first thing we want to go ahead and target is going to be our invoice and we'll save view here now inside of here i want to target our nav link first off so we already defined a lot of the properties or a few properties inside of wrapped up view but i want to do some additional styling to this inside of the component as well so we'll say margin bottom here 32 pixels we're going to align the items to the center if you recall we went ahead and set this to flex so we were able to do that we want to give this a color here of white and then we want to give it a font size of 12 pixels here now inside of this nav link we also have our image so let's go ahead and target that we're going to give it a margin on the right of 16 pixels here we're going to give it a width of 7 pixels and then a height of 10 pixels here okay and that's going to be it for our nav links so next up we're going to target our header and also our invoice details together so we'll say invoice details here and the shared styling that we want to go ahead and do here is give it a background color and we're going to say 1 e 21 39 and we also want to give it a border radius here of 20 pixels okay and then now what we're going to do is actually target our header specifically here and what we want to do is first off give this a line items to the center we're going to give it a padding of 24 pixels on top and bottom and then we're going to do 32 pixels on the left and right and we're going to get everything inside here a font size of 12 pixels okay now inside of our header we have a few uh children and we have the left hand class or the left class which you want to align the items to the center as well and then we have our span inside of here which i want to go ahead and give a color and we're going to say d f e 3 f a which this stands for the actual pound sign and then we want to give this a margin on the right of 16 pixels to separate it from the actual invoice number okay now that's going to be it for our left hand side here let's go ahead and target our right we're going to say give this a flex value of 1 and we want to justify that content to the flex end so what that's going to do is if we head over to our application here you should see that it didn't actually do anything it's not over to the end yet did we forget to add flex to the right hand side i'm wondering so header so it looks like it did work i was just looking at the wrong portion here i was looking at the actual invoice details and we're still working on this header section right here so that did work and as you can see it got pushed all to the right here so that is working i was just looking at the wrong one all right now inside of right here continuing on we have our button and i want to go ahead and give this a color here of white so we'll say fff and that should go ahead and do it for our headers so if we take a look everything should be good here and that looks great all right so let's go ahead and start to work on our invoice details here so it's target invoice details and we want to give this a padding all around of 48 pixels here and we want to give it a margin on the top to separate it from our header by let's see 24 pixels there okay so let's go ahead and start with our top section here so in our top the only thing are to start off what i want to do is give the div and we want to say color here and we want to target or give us a color of df e3fa and we want to give them the flex value here of one so when we refer to the top and the div if we go back up here just to kind of clarify this we have two divs here in the top now we could go ahead and refer to them as left and right but we can also just refer to them as the div and inside of this uh div with the class at top we have two children div so it works the same so if you're wondering why i'm doing that it's just you know they both work the same and it goes ahead and makes sense instead of typing out right and left to go ahead and do some shared styling there all right and then let's go ahead and target our left specifically here and we want to give this a font size 12 pixels here and then we want to target the paragraph and the paragraph tag and we're going to say first child here now inside of here we want to give this a font size of 24 pixels we're going to give this a text transform here and we're going to say uppercase and we're going to give it a color here of white and then a margin on the bottom of eight pixels here okay and then the next step what i want to go ahead and do is target the second paragraph cha our second paragraph element in this div so we're to say and child 2 and we want to go ahead and give this a font size here and we're going to say 16 pixels and then for our span that we have inside of here we're going to go ahead and give it the color so we'll say color and we're going to do let's see 888 eb 0 here and i forgot the pound sign and that should go ahead and do it for our left hand side here so right below left let's target our right and what we want to do here is give this a font size of 12 pixels and we want to justify or sorry align the items to the flex and here so this was actually the div i was looking at when i thought something was wrong so if we head over here now you should see that we have this and we must have did something wrong because that should be underneath it so i probably forgot to give the left the value of flex column here so let's go ahead and pass that along here do that take a look and okay that looks a lot better so we're making progress and this is already starting to look a lot better here all right so continuing on here we're going to work on the middle section so i'm going to save some space and collapse the top here now let's go ahead and target our middle and for our middle we want to go ahead and give this a margin on the top to separate it by 50 pixels a color value here of our df e3fa and we want to go ahead and provide a gap to the three children divs in this div by 16 pixels okay and then we want to target our h4 and we want to give these a font size of 12 pixels and a font weight here of 400 and then we want to give this a margin on the bottom here of 12 pixels now for the h4s they're going to be for i believe we have the invoice details so if we go to middle here we have the payment the h4s have the invoice date and also the payment date and then we have the send to and i believe that's all and i think we might have it here in bill too okay so that that is where the h4s are pertaining to then let's go ahead and style up our paragraph tag here give this a font size of 16 pixels here and then inside of here we have two classes we're going to target called bill and then payment here and we want to give these the flex value of one okay and then i want to go and target the payment class specifically and we want to say the h4 and we're going to say m child here and we're going to say 3 so it's going to be that second h4 inside of our payment and we want to give it a margin on the top of 32 pixels here okay and then for our paragraph tags we want to give these a little bit of a bolder font weight so we're going to say font weight and set that to 600 here so if we save that take a look you'll see that we have the invoice date here we have the paragraph tag here and the h4 with the third and the child three is getting pushed up right here you can see that we have the margin top right here getting set right there okay so things are starting to look a lot better now the next thing i want to go ahead and target is going to be our bill so let's go right below payment here and we'll target bill and here we want to target the paragraph and the nth child and we want to target the second one and what we're going to do here is give this one a font size of 16 pixels okay and then we also want to target the third child so i'm going to go ahead and copy and duplicate that down here and we'll say three and on here we just want to give this a margin top of auto so everything below the third paragraph tag or the third paragraph and down will be pushed down to the bottom of the page and if you see well you're not going to see that because we have these uh the font size here pretty big still and if we go ahead and actually target our paragraph tag here next we're going to change the font size to 12 pixels here and now we should see that effect happen where we have this gap between here because the third child is getting pushed down from the top therefore resulting in all the other items below it getting pushed down with it okay so that's going to go ahead and do it for our bill now the last one i want to go ahead and do is going to be for our send to so we're going to say send to and we want to provide this one a flex value of 2. okay and that's going to go out and make it look like this is going to take up more than the equal so these are taking a flex one flex one and flex two okay and that is looking good now the last section here we wanna go ahead and work on is going to be our bottom i believe that's the last section hopefully let's see middle well i should say i think we have the bottom yep so that's gonna be our last section here so we're almost done here i know this has been a lot of css and markup but uh we need to go ahead and do this if you want to fast forward through this or just go ahead and get all the styling from the repository you're more than welcome to do so but if you want to learn some css and follow along then we're almost done and then we have the bottom here so we'll say bottom and we're going to give this a margin on the top of 50 pixels here okay and then we have our billing items and we're going to give this a padding value of 32 pixels we're going to pass a border let's see radius here of 20 pixels on the top left 20 pixels on the top right and then zero zero and then we want to give this a background color here of two five two nine four five and that's the at sign not the pound sign okay now inside of here we have our heading so we'll say headings and we're going to give this a color of our df let's see dfe3fa we're going to give this a let's see font size of 12 pixels and then a margin on the bottom here of 32 pixels and then we want to target our paragraph and we're going to do the first child and in here we're going to go ahead and give this a flex value of 3 and we want to text a line to the left hand side here so we'll say left all right and this is going to be for our actual uh invoice items here so we take a look it's going to be for these right here okay so what we want to do next is target all the paragraph elements here and we're going to say flex and pass that the value of 1 and then text align that to the right hand side here and hopefully we start seeing that i'll take effect i think we may have messed something up because that should be working that's our billing items here do we type in the name wrong let's see here so it looks like i did make a mistake here and this should actually be heading so if we save that we should see our changes happen there and there we go so this is a small little mistake in our actual selector name here so i believe that's actually going to do it for our heading here next up you want to target our item class so we'll come down here and say item now this is actually going to be for our items that we have inside of our array here so if i scroll up we have our billing here and then we have the item right here which is this div okay so let's head back down here and what we want to do is we want to pass this the value of margin bottom and do 32 pixels we're going to give it a font size of 13 pixels and a color of white here and what we want to go ahead and do is target the let's see last child here and we want to give it a margin on the bottom of zero so if there is more than one item we don't want to have the margin bottom be 32 if there's only one item or if there's five we don't need a margin bottom on that last item to have 32 so we're going to go ahead and remove that by saying and last child here okay and then we want to go ahead and target our paragraph here and we're going to say first child i'm going to say flex 3 text the line to the left and then we're going to say paragraph are all other paragraph tags in here we want to pass it a flex value of 1 and then text align that to the right hand side here and that's going to go ahead and do it for our actual billing items here now the last thing we need to go ahead and do is actually style up our total section here and let's start off by giving us a color of white a padding value of 32 pixels and then we want to give this a background color and we're going to say rgba here and we're going to pass it the value of 12 14 22 and then 70 opacity here and we're going to align all the items to the center here and we want to give this a border radius of 0 0 20 pixels on the bottom not 220 pixels on the bottom right and 20 pixels on the bottom left and then we want to go ahead and target our paragraph tag here and say flex value of one font size of 12 pixels and then our paragraph we're going to say m child here we're going to use 2 and we're going to say font size is equal to 28 pixels here and then text align this to the right hand side there and that was a lot of css i know i mentioned it before but uh that is going to be it here so hopefully if we cross our fingers and i go over to our application here everything should look good and i believe it does it seems like maybe that's not correct here so let me go ahead and actually get to an invoice here if i do pending not going to show all right give me one second to go ahead and confirm that this is all good something does seem off with this section right here though so i did make a little mistake when i typed in the color code because this is supposed to be what it's going to look like and this is what we currently have so obviously that is not correct so the issues that we did is that for rgba i said rbg8 it's rgba like that and then for our background color here it's supposed to be two five two nine four five so if we save that there we go that looks a lot better and that is our styling for our invoice view now currently when we select our invoice here we're going to be taken to our new invoice view where we can see all the details about the invoice here but we still need to go ahead and do a few things here such as be able to edit our invoice delete it and also have it become mark as paid or change it from paid to pendium okay so we're going to go ahead and start from the left to the right so what we want to do first is be able to edit our invoice here so let's go ahead and begin to implement that now here inside of review store we're going to go ahead and create a new piece of state so this state is going to be called edit invoice here and we're going to set this equal to null now as we have done with many of our state values here in order for us to toggle this at an invoice value from true to false we're going to need to create a new mutation here so we'll go to the bottom here under set current invoice and we're going to go ahead and put all caps on and we're going to say not set we'll do toggle and we'll say edits invoice here and we want to do underscore invoice okay now inside of here what we want to do is pass in the value of state and then we're going to say state dot edit invoice is going to equal the opposite of state dot edit invoice here okay so now for us to toggle this what we need to do is head back over to our invoice view here and inside here we have a few functions oh sorry the invoice view we can actually close that out we don't need that so inside here we have this function called toggle edit invoice now initially we were going to pass the current invoice dot doc id but we actually no longer need this so we can simply just say whenever we click on this you want to run the function of toggle edit invoice here so down in our methods here what we want to go ahead and do is create a new method for our toggle in invoice our toggle edit invoice function and what we're going to be doing here is we need to go ahead and run or commit a few mutations here now those are going to be the toggle invoice mutation and also the new invoice we are sorry the new mutation we created of toggle edit invoice so what we can do here is we can actually map these inside of our map mutations here so we want to go ahead and get the toggle edit invoice so let's just go ahead and copy and paste this in here and then the other one we want to go ahead and get is the actual toggle editing our toggle invoice too many toggles and invoices here so we'll do toggle invoice right there and we'll paste this in so what we want to go ahead and do here is we want to say this dot and we'll do toggle edit invoice and then we're going to go ahead and do this dot toggle invoice here okay so now if we head over to our application and we click on edit here what should happen is our invoice or our invoice model should go ahead and come in from the left if we do that you can see that all works but clearly right now what we need to do is somehow have a way to populate this with our current data right here and also we need to make a few changes such as updating the title here to edit invoice and also to the buttons down below here now in order to make these changes what we're going to go ahead and do is actually use the state value here of edit invoice inside of our invoice modal to detect whether or not the modal should be in edit mode or it should be in new invoice mode right here okay so in order to use this value of state we need to head down to our script tag here and actually map our state so currently inside of this component we aren't doing that so we need to go ahead and import that here so let's say import map state inside of this import right here and then let me just go ahead and minimize that and we'll come down here below or above our watch and we'll do our compute it and we'll say here map state and then we want to go ahead and open our array here and we're going to say let's do edits or sorry edits invoice here okay and if we go ahead and save that or sorry we need to put a wait what am i doing let's just actually put a comma there and that should all update there for us so now we have access to use this value here of edit invoice inside of our component here so let's go ahead and do our update so first off the h1 of new invoice now we only want to display this right here so we're going to say v if if edit and we'll say invoice is not true alright so otherwise we'll go ahead and say so what we're going to do here is a v if and we'll say a v else here so if this is true and edited voice is true we want to go ahead and say edit invoice here and if we go over to our application you should see now if we click on edit this is going to say edit invoice right here now a few other changes we need to make here on the form are going to be inside or these buttons right here if we go over to our demo when we go to edit a invoice here we want it to say cancel and or update invoice here okay so let's go ahead and just close out of this here and let's just go ahead and cancel that there so inside of our markup here we need to go down to our buttons here and what we want to do is on the save draft and create invoice you want to put a v if on here as well so i only want to show these if edit invoice is not true let's go ahead and copy this and we'll paste that and then we also want to add a new button here so we're going to come down below and we're going to have a button we're going to throw the v else on here as well so we'll say v else and you know what actually let's not do that we're going to say vf here and we'll say if actually i could just copy and paste that in right here and we're only going to show this button if edit invoice is true we're going to pass this a class of let's see here purple and this is going to say update in voice here and let's not forget to pass this a type of submit as well so say equals here and our quotes and there we go and why didn't that oh because we did that all right so there we go now if we head over to what happened to our other one here what i do wrong what the heck happened um not really sure how that happened so what we need to do is put on type of submit there and that is good i'm not even sure how that happened how we deleted that but if we head over to our application now click on edit here we should see that we don't have that change let me refresh here and see if that does it and there we go so as you can see here now we have cancel and then we have update invoice now instead of that and if we click out of here and we hit close and we go back and we create a new invoice here you should see that it's still going to say edit invoice now the reason why it's doing this is because we never went ahead and re-toggled the editing invoice state here inside of our store now where we need to do this inside is inside of our modal here so when we close the modal here what we also want to do is we want to toggle the edit state value if it is currently true so to do this what we want to do is you want to also map state in here and we need to define our computed so we'll come right below here and we're going to say map state our array and we're going to say edit invoice here so what we need to do we'll save that now in our closed invoice here we want to say if well this dot edit invoice is true then we want to map our mutation here which is going to be the toggle edit invoice so let's copy that and in our modal here we want to map this out so we'll say toggle edit invoice here so when we close our invoice if this is currently true then we want to go ahead and run this mutation here okay so we'll say this and toggle that now if we head over to our application and we do a refresh here let's go ahead and go to try to edit one so if you click on edit you should see its edit invoice here all of our stuff is correct down here and if we click on cancel it's going to go ahead and go away which we actually didn't update it there as well so now if we go back and we hit a new invoice it's still going to say edit invoice so we also need to update it there but now if i click on close on the new invoice since it was on the modal we should see that it's going to say new invoice here so what we need to do is on our invoice view here i believe is our invoice modal when we click on close invoice here what we want to do is we have this function right here we want to do the same thing we want to say if we'll say this dot edit invoice is true then we want to say this dot let's see toggle uh we actually never mapped it in here as well so let me go ahead and do that really quick i was wondering why it wasn't showing up so toggle edit invoice here i thought we had mapped that already in here but i guess we did not and let's go ahead and just put a comma here and then we'll run this right here okay so that should go ahead and fix it up i know that was actually pretty confusing there was a lot of spots we needed to update that but i think now if we go ahead and do it at any page we should see that it's going to be all set so if i go back here we click on edit we have edit invoice which is correct so we have these buttons down here that are updated if we click on cancel and we go back and we click on new invoice we should see it now it says new invoice and if we do the same thing if we go back here we edit it and we click on the outside here to close it within the modal we click close we go back and we hit new invoice this is all back to the correct formatting for actually creating a new invoice now we went ahead and made the ui updates to our invoice mode when we click on edit but we still don't have our data populated here from our current invoice so let's go ahead and fix that now here inside of the invoice model we want to go to our created lifecycle hook here so first off if we're going to be populating our invoice with the data from the current invoice we're editing we don't want to actually set this right here so let's go ahead and run it if check here and we want to say if this dot edit invoice is not true then we want to go ahead and populate this information right here otherwise we don't want to do that okay now we currently already have a reference to the invoice that we're editing here inside of our store and that's stored inside of this value of current invoice array now what we need to do is inside of our map state down here we want to map this value of state inside of this invoice modal component now what we're going to do is inside of our create a lifecycle hook here we're going to run another if check so we want to say if this dot edit invoice is true then what we're going to do is i'm going to create a local value here a local variable called current invoice and we're going to do something very similar to what we did inside of i believe where was it our invoice view here where we have this and we're setting the current invoice equal to our state value here of this dot current array of zero okay so we're going to say this dot state or sorry this dot current invoice array and we're gonna say zero now to save some time here what i'm gonna do is i'm gonna go ahead and copy and paste in the data here so what we're gonna be doing is we have all this data that we went ahead and created inside of this component so we're going to be setting this data right here all equal to the data that we have inside of the current invoice array so if i copy and paste this in here and we go back over to our application we should see now that we have all the current information that we have right here inside of this edit invoice model so we have the client name which you can see matches up right there we have the street address which matches up right there so we are now able to populate our edit invoice model and we can now actually make changes to our invoice if we want to go ahead and do that now currently if we select the ability to edit our invoice here and we want to update it you can see visually we can go ahead and do that in our form so we want to change the client name to a bunch of ls here and just make some changes now if we go to actually click on update invoice here it's actually not going to update this current invoice what's going to happen is if we come over to our firestore collection it's actually going to create a new invoice here now the reason why this is happening is because inside of our function here if we go to our invoice modal here it's running the upload invoice function which when we run that is is going to actually create a new uh collection item inside of our firestore database and we don't want that what we want to do is you want to go ahead and actually update the current invoice that we're editing so let's go ahead and begin to implement the functionality to update it and not create a new collection item now let's begin here inside of our store where we need to create a few new things so we need to create a new mutation and we also need to create a new action now inside of this action what we're going to be doing here is first off we want to delete the current invoice inside of our state that we're going to be uh that we're going to be updating okay and then from there what we're gonna go ahead and do inside of this action is we're actually gonna call this action right here of get invoices to go ahead and get all the invoices which will then have the newly updated values from our firestore collection on the invoice that we just went ahead and updated okay so hopefully that makes sense then what we want to go ahead and do is obviously toggle our edit invoice here and then toggle our modal and then we're going to go ahead and have to reset the current invoice right here to the actual invoice that we just went ahead and edited okay so hopefully that's not too confused i know it was a lot to take in there but let's go ahead and get started here so what we need to do is create a new mutation here and this is going to be called delete invoice and we'll pass this and what we want to say inside of the parameters is going to be state and we want to pass a payload here now inside of this delete invoice what we're going to do is we're going to target our state dot invoice data and we're going to set it equal to our state dot invoice data and we're going to call the filter method here and then we're going to have our parameter of invoice and then our arrow function here and what we want to go ahead and do is we want to target the invoice parameter here and we want to say the doc id that is not equal to the payload so what this is going to do it's going to filter out the document that we want to delete from our state of invoice data here okay now that's going to be it for our mutations and we're going to call this mutation inside of our new action that we're about to create here which is going to be called update invoice okay so let's go ahead and create this and we'll say update invoice here and we're going to be using async and a weight in here so i'm going to go ahead and define that outside of this function and we'll do that and then open our curly brackets here now for the parameters here we want to go ahead and we want to call commits and we also want to pass dispatch now we're also going to be passing this a payload which i'm going to destructure here so the payload that we're going to be sending this is going to be doc id and also the routes id here okay now we're going to be using the doc id to pass in as a payload and our delete invoice right here and then we're going to use the route id inside of this mutation right here to go ahead and reset the current invoice now the first thing that we want to go ahead and do inside of this action is delete the current invoice that we want to update here okay so we're going to say commit and we want to run our mutation here of deletes invoice and we want to pass it the doc id payload that we're going to go ahead and define over on our invoice modal okay so that is the first portion here now once we delete it at this point in time our newly updated invoice should be over on our firestore collection so we want to go ahead and reach out to our function here of get invoices and go ahead and get that new invoice and if recall what we did here is we are saying if the invoice that is running through already exists then don't do nothing so since we deleted it that invoice that we just updated won't exist and we're going to go ahead and pull all the new information that we went ahead and updated here and then we're going to send that back to our array here of invoice data all right so hopefully that makes sense so we're going to go ahead and await here and we're going to call dispatch and then we want to call our get invoices here okay and then you want to go ahead and do a few commits here so then at this point when we're done updating our invoice you want to toggle the invoice close and we also want to turn off our editing invoice state here so what we're going to do is we're going to pass in the value here of toggle invoice and then let's go ahead and copy this down and we're going to say toggle and we'll pass in edits invoice here and now the final thing that we want to go and commit is the re uh assigning here or we want to go ahead and rerun this mutation here of set current invoice so let's go ahead and copy that and we'll paste this down here and then let's go ahead and paste this in and then we we need to pass in the payload here of route id as well okay so that's going to go ahead and be it for our updates here on the store now what we need to do is we need to create a new function inside of our invoice model to go ahead and handle the updating of our invoice so let's head over to that component and begin to work on that now here inside of our invoice model what i want to do first is if you recall earlier on we had this if condition right here that was checking if edit invoice is true and then we're setting our current invoice here equal to the current invoice array and then we're populating all of our data with this variable right here okay now we went ahead and created this value that we don't have in our data of this dot doc id and in order to use this inside of our update invoice function we need to go ahead and actually create this data inside of our data here so right below our date options here we're going to go and paste doc id and we'll set this equal to null and if we are editing an invoice then it'll go ahead and get assigned to the currentinvoice.doc id okay so next up what we want to go ahead and do is actually create our update invoice function now this function is going to be very very very similar to our upload invoice here so what we're going to do is actually just copy and paste this down here and let me go ahead and collapse that now instead of saying upload here let's change this to update now what we also need to do is we need to check so now this function right here of submit form is going to make sense and you're going to see why we did this because when we submit the form we either want to go ahead and run the update invoice function or we want to run the upload invoice function now how we're going to determine which one to you know run is by our state value here of edit invoice so let's go ahead and run an if check here now if this value of edit invoice is true then we know we're making an edit to our invoice so therefore we're going to run a run are this dot update invoice function and then what we'll do is we'll return out of here so if this isn't true then that means we're not editing an invoice and we're actually uploading a new one so then our upload invoice function will go ahead and run okay so let's go ahead and go through our update and voice function here we're going to make some changes but like i said a lot of things are going to stay the same so for example these three things right here we're going to keep the same we still want to check to make sure that the user has entered in items into the invoice item list and they did not go ahead and delete those on accident and you know we still want to check that we want to set loading to true we are going to calculate the invoice total in the event that the user made some changes to the invoice item list okay now the changes come right here at this variable of cons database here now this variable right here is going to create a new document now we don't want to go ahead and do that what we want to do is we want to get a reference to the document that we're up or updating so how we can do that is by passing this dot doc id that value we just went ahead and created inside of our data which we pass at this value right here this variable of database will return that collection item that we want to go ahead and update okay now instead of actually setting here what we want to do is i'm going to delete this we don't want to set because it's going to actually override everything we just want to update here okay so i'm going to go ahead and paste this in so a few line breaks here and we want to perform what they call a update method which is part of the firestore firestore library and you can see here it's going to look like this so we're going to say await database and then we're going to run the update method here we want to update all of these values for that current collection item that we're referencing right here in this line so you may notice that this is a lot smaller than our original set up here inside of our upload invoice now the reason is because we don't need to define an invoice id we're not going to be updating that that's already created and we're not going to be updating these values of pending draft or paid and i believe we also eliminated a few of them as well inside of our update here so if you want to pause and copy this in you're more than welcome to or you can head over to the finish repository and you can copy and paste this in here but that's going to be it for our actual updates here now we still want to go ahead and have the loading set to false here and then the last thing we need to do or actually two things is we need to create our payload that we're going to be sending our action of update invoice here now in order to use our update invoice action here we need to map our actions inside of our mutations here which we have not done yet so let's go ahead and do that so we're going to say dot dot and we'll say map actions we'll get our array and we call this update invoice here okay let me put a comma there now we actually still need to import this as well so let's head up to our import tag here and it already did it for us apparently so that's cool i noticed that it works sometimes and sometimes it doesn't so i guess it just depends on how you're actually importing that if you're actually mapping it out first or i'm not really sure but you can see that we are able to actually use our map actions here inside of our component now so what we're going to do is we're going to remove this dot toggle invoice and we're going to replace it with i will say i guess i could just remove this whole thing here we'll say update invoice here now like i mentioned we need to create our payload so if you recall what we're going to be sending along is the document id and also the route id here so let's go ahead and create a new variable here called data and we're going to set this equal to an object now so we want to go ahead and create our doc id here not this we'll say doc id and we want to set this equal to the current document id so we're going to say this dot doc id now we also want to create a value here of route id and we're going to set this equal to this dot money sign route dot params and we want to get the param here of invoice id okay and then all we need to do is pass this data value along as a payload or parameter here inside of this function now with all this implemented hopefully if we head over to our application now and we go to edit our invoice we'll see that change happen and if we go to our firestore collection all those changes that we made inside of our modal should be updated inside of that collection item all right so here on our invoice view let's go ahead and try to make it edit here to our invoice so we'll select on edit here our modal is going to pop out and let's just change your email here to testing123 at yahoo.com here and then let's go ahead and perform an update here so you can see that everything worked successfully our invoice was toggled back and if we come over to our invoice here we don't see a change but if we go to refresh it here we should see that our email right here will be changed to testing123 so now we're able to successfully go ahead and update our invoice so now we're able to make a update to our invoice and that is great but to see the change that we made we have to refresh the page which in my opinion isn't a very good user experience for an application now what would be ideal is that when you make the update you see the change happen here on our invoice view in real time so let's go ahead and implement that ability here within our application so inside of our invoice view component the first thing i want to go ahead and do is map in a value of state from our store and this is going to be edit invoice here now what we're going to be doing is each time the edit invoice is toggled we want to watch for that so each time there's a change in its value we want to go ahead and watch for that now how we can do this is by using a watcher here on our component so we're going to say watch and open this up now what we want to watch is going to be edit invoice here now inside here each time this is toggled what we want to do is we want to look for when it is false so when it is true that means the user is currently making an update and when it is false that is going to mean the user has made an update and is no longer doing so and at that point we want to reinitialize or reset the value here of this dot current invoice to our new current invoice array with the updated info for our invoice here okay so to do this we're simply going to say an if check here and we want to check this dot edit invoice and we want to make sure this is false now if it's false what we're going to do here is say this dot current invoice is going to equal this dot current invoice array and that first value here okay so now if we head back over to our application this simple code right here of our watcher will go ahead and update our data in real time so let's go ahead and make an update here or an edit and let's change your email back we'll say john john komarnicki.com here now when i select update here you should see that our email updated in real time and we did not have to go ahead and refresh our page to see that change take effect so now that we have the ability to edit our invoice inside this view we also want to have the ability to delete our invoice now we already have half of this set up from our current editing that we did inside of this action right here of delete invoice as a mutation so what that's going to do is delete it off the front end side of our application now that's not going to remove it on our firestore collection so what we need to do is create a new action here inside of our store to go ahead and handle that so we're going to go ahead and call async here and we're going to create a new action called delete and we'll say invoice now what we want to pass inside of here is we're going to call commits so let's go ahead and take off cap locks there commit and we also want to accept a payload here which is going to be called the dock id now inside of this action what we're going to do is first off we need to get a reference to the item or the collection item that we want to delete so let's go ahead and create a new variable here called get invoice and set this equal to db dot let's see not doc not yet it's a little too early we're going to say db.collection and we want to reference our collection of invoices here and if you recall how we can get a certain doc from the collection is by passing a dot doc or the doc method and then we want to insert that document id which we're going to be passing here along as a payload so i can go ahead and call doc id right here and that'll give us the current invoice that we want to delete now with this value we want to call a wait here and we're going to say git invoice and there is a method called delete and that is going to be it that will go ahead and delete our invoice off our firestore collection now the last thing you want to do here is run a commit to actually delete our invoice off the front end here so let's go ahead and open this up and we'll say delete invoice here and then we want to pass along that doc id and that's going to be our simple action here so let's head back over to our invoice view here now if you recall we have this function here or click on this button for delete of delete invoice and we're going to pass along the current invoice dot doc id here so let's go right below our toggle edit invoice here and let's paste this delete invoice in and recall we want to accept a parameter of doc id okay now we're going to be using a action inside of this component and we don't have that defined here in our method so let's go ahead and do that so say map actions here and it's going to automatically import it there for us and let's call our array and we'll call delete invoice here now what we want to do is put a comma there that should get rid of our error now inside of our function here what we want to do is we're going to be using actually a sync here as well so let's pass as a sync okay and we first want to call our action of delete invoice so we're going to go ahead and say a weight here this dot delete invoice and we want to pass along this doc id here okay now after we delete this invoice we want to be redirected back to the home page because we're going to delete the invoice we no longer want to be on this page so how we can do that is by calling this dot money sign router we can provided the push method here and we can provide it the destination that we want to go and we're going to go ahead and do this with an object going to pass it the name value and the name of the component we want to go ahead and be pushed to which is going to be our home view here so now if we head back over to our application and if we refresh here to make sure everything is up to date we should be able to delete this invoice and go back to our home view and we should no longer see this invoice within our application here so let's go ahead and click delete and there we go we get directed back to our home view and that invoice is no longer in our application and if we go back to our firestore collection here we did have three and now we only have two invoices left now the last thing that we need to do here inside of our invoice view is have the ability to update our status of our invoice here which is going to be controlled by this button of mark as paid now if you recall inside of our invoice view here we have two different buttons so we're going to have a function that's going to be able to update the status to paid that is if the current invoice is pending and we're also going to have a function to update the status back to pending which will be visible if it is currently a draft or it's currently already paid here okay so to get started here what we need to do is head over to our store and create a few mutations and a few different actions here so let's start off with our mutations because we're going to be calling these mutations within our actions so the mutations are going to control what we change on the front end here so the first one i'm going to go ahead and create here is called update we'll say status underscore 2 and paid here now this mutation is going to accept state and also a payload now what we want to do is you want to iterate through our current invoice data here and we're going to do that using a for each loop so we're going to say state dot for each here or sorry state dot invoice data dot for each and we're going to pass it the parameter of invoice here and then we're going to have our arrow function here now inside of here what we want to do is a if check so what we want to check is if the invoice dot doc id is equal to the payload so if that is true that means you want to go ahead and do some updates to the values inside of this current object inside of this array so when we're updating the status to paid it is currently pending so what we want to say here is we have invoice dot invoice paid and we're going to set that equal to true okay and we also have invoice dot invoice pending and we want to set this equal to false okay so that's going to handle our changes on the front end now we also have another mutation which i'm going to go ahead and just simply copy and paste this down because they're going to be very similar except we want to have this function be called update status to pending here okay and we're going to run the same exact for each loop here now this time what we want to do is also include oops we don't want caps here invoice dot invoice let's see draft and we want to set this to false now instead of invoice pending being false we want to set this to true and then our invoice pay we want to go ahead and make sure that it's set to false all right so those are the two mutations that'll handle everything on the front end of things now let's go ahead and create our actions here so we're going to be using async and await like we have for all of our actions and we're going to call this one update status to page i'm going to copy this right here now what we want to accept in here is going to be very similar to this right here our delete invoice we want to accept a commit or able to or we want to be able to make a commit here so we're going to pass in commit and then we also want to pass the doc id here okay so inside of this action here we're going to say const get invoice is equal to db dot collection here and we'll pass at our invoices and then we'll say dot doc and we're going to pass it our payload here of doc and we'll go id there okay now this is very similar to our delete invoice and then what we want to do is instead of deleting it we're going to await it and we'll wait to get that value and we're going to perform an update here now inside of this update what we want to go ahead and do is the same things that we did inside of our for our for each loop here and we want to update the invoice paid and the invoice pending so to do that we'll say invoice paid and we'll say that is true and we're going to go ahead and say invoice pending here and set this to false okay and that's going to be our action and our sorry that's going to go ahead and update things on the back end now what we need to do is pass our commit along here which is going to update things on the front end so this one's going to be update status to paid so i'll just go ahead and copy that in here and there we go that is our finished action so the update status appending is going to be very similar so let's go ahead and copy this down and let's go ahead and update this one to update status to pending here paste that in here and let's also change our commit right here okay and then like i mentioned before inside of this mutation we're going to be targeting the invoice draft as well so we're going to say invoice and i got to take caps off here draft and this one's going to be false let's put that space back there and in this case pending is going to be true and paid will be false okay so that's going to take care of our actions inside the store now we need to do is head back over to our invoice view and hook up these actions to our functions that we went ahead and have on our buttons so really quick here i forgot to do one thing which is pass along the payload here inside of our commit so this won't actually do anything if we don't pass it a payload so let's go ahead and say doc id in there and then also doc id in here okay so if we head back over to our invoice view now and we go ahead and start to set things up so first off to use these actions inside of our component here we need to go ahead and map them so what we want to do here is let's say we're going to map and it's going to be called updates and we need caps here updates status to pending and then we also want to have our update status to paid so let's copy this and comma quotes and we'll say paid here okay so what we want to do next is we want to grab the function name so the first one we have is our update status to page so let's go ahead and call that right below our delete video or sorry delete invoice and we'll go ahead and say update that as a page and recall we want to go ahead and pass a doc id here and then we want to do is pass the name of the action here which is going to be update status to paid and then let's pass along our doc id here okay now let's copy and paste this down here and we're going to call this update status to pending pass the doc id and then we need to pass the action of update status to pending here with the doc id so with this implemented and everything correct in our store now we should be able to head over to our application here and if we click on let's refresh it here really quick if we click on mark as paid we should see that now the status changes to paid and we can actually see we have our other button here to mark it back as pending so if i click on this it'll go ahead and change back to pending so we can now successfully toggle our status from pending to paid and from paid to pending now currently if we go ahead and create a new invoice i forgot to go ahead and add one thing so when we actually hit the update invoice button we won't see that invoice populate here until we refresh the page so what we need to do is inside of our invoice model here inside of this upload invoice function we need to go ahead and dispatch an action inside of this function to go ahead and re-get our invoices which is right here so let's go ahead and map this to our component so go back to our modal here and we already have our map actions let's just go ahead and add a new value to this array we'll say get invoices here and then let's go ahead and paste this right below the toggle invice so we'll save this dot get invoices and paste that so now we head back over here and we create a new invoice here so let's fill this out really quick and last here let's do our product description which would be ui ux let's add a item here of testing one two three quantity one 199.99 and let's go ahead and create our invoice here so you should see now that when we create it it's going to happen in real time and we no longer need to refresh to actually see our newly created invoice now the last feature that we need to implement here is going to be the ability to filter our invoices by status so we already have the ui and ux for this built out here but we don't have any functionality attached to it so let's go ahead and begin to implement that now the first thing i want to go ahead and do is create a new piece of data here inside of this component or home component or home view and it's going to be called filtered invoice here and we're going to set this equal to null okay now what we want to do is each time a user clicks on one of these li items we want to pass or we want to run a function so let's go and open this up here and we're going to paste in this click here of filtered invoices and let's go ahead and just put this on all of them okay and i think i did that wrong let's see here i think that should be good now what we want to do is actually create this function so let's go ahead and copy this and go inside of our methods here and just below this function of toggle filter menu let's go ahead and create this function here now the purpose of this function is to go ahead and set this filtered invoice to the value that we have inside of this li and we're going to use this value right beside let's see here the filter by status you want to go ahead and put a colon here and we're going to put another span and we only want to display this if filtered invoice is true and let's go ahead and use our curly brackets here and say filtered invoice here okay so inside of this function what we're going to do is we're going to pass at the event parameter here now we have four different text values inside of this or inside of these allies here we have draft pending paid and clear filters so what we want to have it do here is we want to run a if check first of all so we want to say if e dot target and we can get the value that's inside of this li by calling the inner text on here and we want to say if this is equal to clear filter we want to make sure this is the appropriate capitalization here so if this is true then we want to go ahead and set this dot filtered invoice equal to null and then we want to return out of here now if this is not the case and the option selected does not equal this then you want to go ahead and say this dot filtered invoice equals e dot target dot inner text here okay so now if we head over to our application here we're going to at least have the appearance of this all set we haven't actually implemented the functionality to filter out our data but if we go over to this filter by status here you should see now if we click on paid it's going to say paid pending draft and then it's going to clear the filter we'll have nothing now the one thing i do want to fix is where that colon is at we shouldn't have that visible because that looks a little bad so let's go ahead and remove that really quick i think i put that on the wrong side so i'll get rid of it here and then we'll just say like that i think that'll look a lot better okay and if we uh refresh it we should see that gets removed and we have pending clear filter okay that looks a lot better now what we need to do here is filter out our data now how we're going to do this is with a computed property here so let's go ahead and head down to our script tag here and inside a computer i want to create a new computed value of filtered data here okay now what we want to go ahead and do here is return and we want to say this dot invoice data and let's see here why is it not showing up for me anymore invoice data okay i don't know why that's not showing up but what we're going to do here is we have this a value of state which has all of our invoice data which is what we're using to iterate through our invoice component right here you can see we have invoice data now what we want to do is we want to go ahead and perform the filter method on here okay and we're going to have our invoice and we're going to have our callback here our row function now inside of here what we want to do is we want to look at the value currently of filtered invoice here and if it equals a draft then we want to go ahead and return only the invoices that have a property of invoice.invoicedraft that is true and this is what it's going to look like so we'll say if this dot filtered invoice is equal to draft here then we want to return here invoice dot invoice draft equals true all right so then what we want to do is copy this down two more times and what we want to say here is you want to look at if it's pending and if this is true then we want to return all the invoices that have an invoice pending value of true and then lastly what we want to do here is look at if it's paid and then if that is true then we want to return all the invoices that have an invoice paid property of true now if it is nothing because if we don't return everything here what i mean by that is if filtered invoice is not actually equal to any of these here then currently with how we have this set up it's not going to return anything and our data will be empty okay so i can show you this so what we want to do now is take this computed value right here and we want to go back up to our invoice here and instead of running through invoice data we want to run through filter data here so now with currently how we have this set up we should not see anything in our invoice component right here and that's because none of these filtered invoice values equated to true but now if i go ahead and select pending we will see some of the pendings here now to you know to fix the issue with if we don't have any filtered value selected we can come down to the very end here inside of this uh invoice filter or our invoice data filter method and we can simply just return our invoice here okay and that'll go ahead and return all of our invoices if none of these equate to true okay so if we head over here now we should have all of our invoices and if we select draft we'll have our drafts if we have pending we'll only see our pending and if we have paid we'll only see our paid and we can go ahead and clear our filter to show all of our current invoices inside of our application now one last small thing i want to go ahead and update here is currently we're not actually outputting the correct value of invoices or we're not doing it dynamically now by coincidence we do have four invoices currently total in our application here so what we want to do to dynamically set this to be equal to the amount of invoices we have in our application is come inside of our home view here and where we have this right here on our span tag we want to remove this for and we're going to look at the value of invoice data and we're going to get the length of that and that'll go ahead and dynamically output the number of invoices we have inside of our application here so if we head back over we're still going to see four but now if i go ahead and let's say delete this one you'll see that it'll update to three invoices here so that's going to go ahead and dynamically go ahead and output the total amount of invoices we have here inside of our application all right so that's going to wrap it up here for invoice application if you guys did enjoy be sure to leave a like on it down below and if you're new to the channel be sure to subscribe for more content like this and i will see you guys in the next video take care

Channel: John Komarnicki

Views: 18,626

Rating: 4.988811 out of 5

Keywords: vue js, vue tutorial, vue 3 tutorial, vue 3, vue firebase app, vue 3 firebase app, vue js project tutorial, invoice app, vue 3 invoice app, vue 3 vuex, vue.js vuex

Id: vsJtN54aA7w

Length: 249min 56sec (14996 seconds)

Published: Mon Jun 07 2021