Vue.js & FireStore – Build & Deploy

Vue.js & Firestore App – Build & Deploy [Part 5]

alright guys so in this video we're gonna work on the new employee component so I'm gonna go ahead and close these two here and we're gonna open up

components in the new employee dot view so from here up that's view new employee so what we're gonna do is first build out the form of the UI so we're gonna keep the h3 here and underneath let's

put a class of row okay remember we're using materialise we're gonna have a form tag not gonna have an action what it's gonna have is an event handler so we're gonna say at submit and then we

could also do dot prevent which will prevent the form from actually submitting and we're going to set this to a function that we're going to create or a method we're going to create called

save employee and then let's also just give this a class of call and then S 12 so 12 column alright and then inside the form we're gonna have a row for each field so inside the role will have a

class of input – field as well as a class of call as well as a class of s 12 and inside here we'll have our input which will be the type of text now we want to bind our data here so we're

gonna say the model V – model and it which is similar to ng model if you come from an angular background and we're gonna set this to employee underscore ID we're also gonna add some validation

here and make this required oops so under that we'll put a label we don't need a for just a label and then we're gonna say employee ID number all right so I'm gonna save that and now you'll

see we have our field here we're gonna get an error because of this it doesn't yet know what this is but don't worry about that yet so we're gonna have a couple other fields so I'm going to copy

this div with the class of row and we're gonna go ahead and put in three more so under the employee employee ID we're gonna have the name we're gonna change the v-model to name as well and let's

see the next one will be the department so I'm going to change the label to Department will change the v-model to de PT and then let's see we're going to change the last one to position and

we'll change the v-model to position so that gives us all our fields now we need a button so we're gonna go under the last row which is right here and we're gonna put in a button and I'm gonna give

this a type of submit and let's also give it a class of BTN it'll just say submit we're also gonna have a cancel button to go back now that's going to be a router linked to the home page so

we'll say – slash I'll give this a class of BTN and BTM gray and we'll say cancel so let's save that and there's our form now what we want to do is go down here we want to bring in our database so

bring in our firebase in it so we're gonna say import DB from dot slash firebase Annette and we're gonna go into our data return and just like we did on the view page we're going to initially

set everything to null so ID will be now named Nell Department no and position no okay and then we're gonna have some methods so we'll go with the data ends and say methods and this is where we

want to create our save employee so to save the employee we want to take the DB dot collection we want our employees collection so employees and then we're gonna call dot add so inside this dot

add we're gonna have an object that will have all the fields so employee ID and we're gonna set that to this dot employee ID now this employee ID is is going to be bound to this v-model so

whatever we put in this input is gonna be what what is in this right here same with all the other fields so we'll say name set that to this dot name will set the department and we'll set the

position as well okay now this ad is is also going to return a promise just like get so we're gonna say dot then and inside here let's let's say doc reference and we're gonna

set this to a code block and all I want to do here is redirect so I'm gonna say this dot router money sign router dot push and let's just redirect to slash okay now you can also do two dot catch

if something goes wrong so we can say catch and we can say error and we can set that to just whatever console.log the error actually we should be able to do this

without curly braces as well like that yeah all right so let's try it out let's save let's reload and we'll go ahead and try and add a new employee so right now we

just have if I hit cancel we just have John Doe in IT so look let's go and click the plus button let's add zero zero what was his ID 0 0 1 so we'll do 0 0 2

name will say Sara Williams and sales and I'll say Sales Lead and submit and there we go so our Williams if I reload she's still there so adding is pretty easy now what I want to do is the Edit

so if we go to the view page I want to have a little button down here just like we have the add button but I want it to be an edit button so let's copy from the what is it the dashboard up here in the

markup we have this fixed act action button we're gonna grab that copy it and bring it over to view employee view and we're gonna put this right below the delete button like that now the link is

gonna be different since we're using a parameter we need to do a bind so we're gonna say V bind want a V bind to and then set that to some curly braces and the name so the name is gonna be edit –

employee which we defined in the router and then the params will be an object and we want to say excuse me employee ID we want to set that to employee ID okay like that so that's our router link

and let's see the icon I just want to change it from plus to pencil because it's an edit so we'll save that and now we have an edit button if we reload this we'll see the data so we click Edit

brings us to the Edit Page so for the edit page the form is going to be the same as far as the markup so let's copy what we have in the new employee view so we'll copy everything that's in the div

so from there to there and we'll put it in the edit yeah let's open up edit employee actually we didn't need to copy the h3 so we'll paste this in we'll get rid of this so that's our edit form now

the submit isn't going to go to save employee we're gonna have a function called update employee now the rest of this can say the same except something goes wrong with the materialized form if

we have a value in these inputs and then we have a label the label goes on top of the value so you can't see it so what I'm gonna do is get rid of the labels I'm sure there's another solution but

this is the easiest one I could figure out so just get rid of those labels and let's see submit that'll stay the same this will stay the same and now we're gonna go down here to the script so

again we have to import our database so we'll say firebase and net and inside the data return we're going to set everything to null and this is actually going to be very similar to the view

actually I could probably just copy everything from view employee because we want to use this before route enter we want to use the watch and we want to use the fetch data okay we don't need the

delete employee but I'm just gonna copy from let's see that ends here that ends there and then the methods ends purple one right here so let's grab from here to here and copy okay then we'll go

right under the data and paste that in and we can get rid of the entire delete employee we don't need that in that comma the rest of this stuff let's see before Route enter yeah that's gonna be

that's all gonna be the same then we want to fetch the data yeah fetch the data then we're setting the properties and these properties are going to be linked to these V models in the form so

they should fill the inputs in the form so let's go ahead and save this and reload and there we go so now we have the form filled if we go to John Doe and go to edit we have all of his fields

filled in here so now we want to handle the actual update which is when we click Submit so in addition to fetch data which ends right here we're going to put in update employee

so for this let's see we could actually copy the fetch data collect this DB collection which ends here I'm gonna grab that because we want to first get it I want to get the correct employee

get the snapshot we want to do query snapshot for each and then instead of doing this instead of just setting properties like this we're gonna say doc dot R f dot update okay just like

remember we did doc dot R f dot delete we're gonna do update and then pass in an object and we're gonna say we want to update for instance the employee ID set to this dot employee ID which is

whatever is in the input okay I remember this is bound to the input so we want that we want the name set to this dot name the department and the position and then this will also give us a promise so

the update we're gonna say dot then and let's see inside here we'll just do an arrow like that and let's go ahead and redirect now I don't want to redirect home I want to redirect back to this

actual employees page so what we'll do is we'll save this dot money sign router so we'll access the router and we'll do a push accept we want to pass in here some curly braces and we want to say the

name of the the route which is going to be view – employee and then we want the params so we want to go comma params and set employee underscore ID to this dot employee underscore ID actually know

what I'm gonna do though I'm gonna I'm gonna make the ID field disabled because I don't want them to be able to edit the ID so for the input let's just put in disabled and reload and now we can't

actually edit the ID which is good okay so back down to our update so it should just redirect us back to that particular user so John Doe let's say he switched from a

database admin to a server admin let's submit and now it redirects us back to John Doe and you can see he's now a server admin so we were able to update his info alright so we now have a full

crud application so in the next video which will be the final video for now I'm not sure if we'll add on to this later but I want to show you how we can easily compile this application into

just static assets and then go ahead and push it to github pages and make it live

In this video we will create the add employee and update employee functionality. We will build the forms with Materialize CSS and proceed the add/updates to Firestore

CODE: Final Project
https://github.com/bradtraversy/vue_firestore_employeemanager

💖 BECOME A PATRON: Show support & get perks!
http://www.patreon.com/traversymedia

VISIT MY WEBISTE: Check Out My Udemy Courses
http://www.traversymedia.com

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
Posts by traversymedia
http://www.instagram.com/traversymedia
https://discord.gg/traversymedia