Vue.js & FireStore – Build & Deploy

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

alright guys in the last video we went ahead and we fetched all of our employees in the dashboard component from fire store and we put them here in

the collection so what we want to do now is work on the view page if I click on one of these icons it takes us to the view component so we want to open up view employee view and what we want to

do first is go down to the script here and in the return so we have our name then we have our data return and we basically want to have an object with all the properties so for instance

employee underscore ID but we want these set to null at first okay so we're going to say that I'm going to say name no Department no and position no okay now we want to use a life cycle method here

so under the data method we want to have something called before Route enter okay so before Route enter and that's exactly when this runs is before we enter the route so in here in here is where we

want to fetch the individual employee ok we only want one employee that's the one that matches this right here this employee ID so again we're gonna have to bring in our database from our firebase

in it so we're gonna go right here and say knock on so we're gonna say import DB from dot slash firebase and knit and then down here in before route enter and this actually takes in a few parameters

it takes in two from and next and then we're gonna say DB dot collection of course we want our employees collection and we want to specify a condition we want to specify a where okay so we're

gonna say dot where employee underscore ID and the way that we do this is we don't just say employee ID equals or anything we need to put a second parameter with the condition so a

comma and then inside what's inside of single quotes the condition which is equals and then a third parameter which is what we want it to equal which is the ID in the URL and we can get that using

this two parameter right here so we can say to dot and then it has an object called params and then that has a value called employee underscore ID okay and the reason it has this paramus in

the router we defined that as a parameter employee ID which is this okay hopefully that makes sense so employee ID and then we do our dot get okay and then the dot get returns a

promise so we do a dot then okay and in the dot then I'm just going to put this on a new line here so we'll say dot then inside here again we're gonna get a query snapshot and set that to an arrow

function and we want to loop through so query snapshot we're gonna use a for each and inside here we'll get a doc and then we want to actually call use this next method right here so we're gonna

say next and inside here will have an arrow function we're going to use VM and set that to an object and this is where we actually assign all of the fields that we want to put up in the template

so we want to use this VM so we'll say VM dot employee ID is going to equal and remember we have that doc object which has a data method and then we can get any field we want so it's a employee

underscore ID okay and then we're gonna do VM dot name equals dot dot data dot name excuse me I'll just go ahead and copy this down so we want name we also want Department and

we also want position all right now this is this is basically a navigation guard it's going to run before we the page loads now after the page loads we want to do the same thing we want to fetch

the data so we're gonna set up a watcher for the route to call a method called fetch data which will basically do the same thing we did in the in the dashboard except it'll fetch a single

employee instead of all of them so we want to go below right below the before route enter navigation guard and put a comma and we're just gonna say watch and in here we want to say for our route now

we can access our router with money sign route and we want to just set this to a method called fetch data now this method we have to create so we want to go right under the watch put a comma and say

methods okay so methods and then we can define custom methods here and fetch data will be one of them so we'll say fetch data and then this is going to be very

similar to what we did in the dashboard except we're just fetching one employee so we're gonna say DB dot collection employees and we're gonna do a where clause this time so we want to say we're

employee underscore ID comma equals now we can't do what we did up here in the navigation guard where we said 2 dot params because we don't have access to this to object so we can use the router

by saying this dot money sign route dot params and then we can access employee ID okay so we're saying where the employee ID equals whatever is in the route in this case 0 0 3 and then we

want to continue on and say dot get which returns a promise so then we do dot then I'm gonna put dot then down here and inside this dot then we want to put a query snapshot and we're gonna use

an arrow and then inside here again we're gonna just for each through the query snapshot just like we did in the dashboard okay and that's gonna take in the doc the result which is the document

snapshot and then instead of setting like we did in the dashboard we set a data object we're gonna set the specific properties themselves so for instance this dot employee ID is going to be

equal to doc dot data dot employee ID all right so we're gonna do it that way so this dot name equals that dot Department it's killing me not to use semicolons position equals dot dot

data dot position all right so let's save that and make sure we get no errors and then we should have access to all of these properties up in our template and we can do what we want with them so what

I'm gonna do is I'm gonna have again a ul with the collection header so I'm gonna get rid of this h3 will say ul collection and also the class of with header and let's do Li dot collection

header which will be an h4 and in here I'm gonna put double curly braces and name we don't need to do employee dot name because it's not an employee object like with the dashboard it's simply the

name property which we set right here ok so let's save that and we get Sam Smith if we go back let's go to John Doe we get John Doe so let's go ahead and put some more allies in here so we'll

say collection – item and let's do we use Emmet will say times three and in this one here I'm going to put the employee ID I'm gonna put a label so employee ID number and we'll set that to

our double curly braces and say employee ID I have to reload all right so this one here will be the department so just de PT this one will be position like that

and then below the UL I want to have a back button or a back router link so say back and let's see it's gonna go to it's just gonna go to the home page so slash I'm also gonna give it a class of BTN

and a class of gray there we go so I'm also going to put a delete button because we're gonna handle that as well in this video so I'm gonna copy this paste that in and then this will say

delete and let's see actually I'm sorry this should this should be a button not a router link and we're gonna give this a class of red and then the way that we get this to work is we do an @ click

which we'll call an event and we want to call a function called delete employee so let's save that and now we have a delete button and we're gonna get an error because there is no delete

employee so let's go create that so down in our methods under fetch data we'll say delete employee and first of all we'll do a confirm when we do it you'll say if confirm are you

sure then the way that we do a delete is by saying DB dot collection and we first need to get the one we've the employee we want to delete so do the same thing

we did above dot we're actually we'll just copy this let's just copy this whole thing all right so collection employees where employee equals that and then we're

gonna do the dot get the dot then query snapshot for each and then instead of assigning all this stuff we're simply going to say doc dot ref okay we can use this ref object and then that has a

delete method and then after we delete we want to redirect and we can use the router for that we can say this dot money sign route dot push and we want to just go to slash and I used a semicolon

here I'm going to get rid of that I'm sure I've used them other places as well but yeah so that will that should delete it and then it should redirect us so let's save all right so let's see if we

can go back let's say we want to delete Sam Smith we'll click delete are you sure okay and that didn't work it looks like the router didn't work let's see if it actually deleted which it did so Sam

Smith did get deleted but something went wrong here let's see what went wrong here I put wrote it should actually be router route is a pro is a if you want to get

the parameters and so on you can use route but to actually do a redirect you want to use router so I guess we'll go ahead and delete Sarah and then we get redirected good so we can now view all

of our employees the list we can view individual employees and we can delete them so in the next video we're gonna work on the new employee page we'll create our form and we'll be able to add

them through the application

In this video we will fetch the individual employee from Firestore and create the details page, we will also implement the delete functionality

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