- [Instructor] The last page we need to create
is the list of attendees on any specific meeting.
So it will be right here
when we click on the attendees list.
We'll need to create routes as well
as a new file for the templates.
So let's go ahead and start by creating a new view.
This is going to be called attendees.view,
and I've created a small jist here
with some simple template code,
so I'll click on this raw button,
copy this stuff, and just paste the template here,
and then I'm going to go into my router
and import this just like I did the check in,
then I'm going to copy the check in route
'cause it's pretty similar.
Right, so now I should be able to go to that route.
That does mean that in my meetings
I need to fix the button
that allows people to go to that route.
So once again, it's going to look similar to the check in,
and it needs to be a dynamic route
that's going to send people to attendees,
and pass along the user ID and the item ID
as well into the parameters.
So let's go ahead and save that
and let's see if our buttons are working, and there we go.
So if you go to this link from the meetings page,
we can at least see the template which is good.
So we need to now activate that template
to display a list of users,
and so we'll go into attendees
and start wiring this up a little bit better.
So we'll need a script and we'll need to import
the database so we can have access to the data.
Export default, I'm going to give this a name
of attendees.
Always a good idea to give things a name,
and then I'm going to create a data section.
It needs to return the list of properties that we want
this component to have.
So I'm going to need a list of attendees,
I'll create as an array,
and I'm also going to need to capture the user ID
from the route parameters.
So I'll use this route params, and then user ID.
Same thing for the meeting ID.
All right, so now we also need to make sure
that we add a life cycle method.
So we're going to check whenever the component mounts
just like we did before when we read data.
We are going to check the database
for the collection that we're calling users,
and then just go down the sort of tree
where the data sits.
So for dock, we're going to use the user ID,
and this will come from the parameters,
so this one right here,
and then we'll go to the meetings collection
and we'll go through the meeting ID document
and then we'll go to the collection called attendees.
All right, so now we can run an on snapshot
and for some reason snapshot is capital S, just the first S.
So whenever the data changes,
then we're going to capture that snapshot,
then do something with that information,
and so just like before,
I'm going to create a temporary array.
I'll call it snap data like before,
just initialize an NT array,
and then go through each one of the snapshots.
Remember, the snapshots have a ton of information,
so we just want to capture pieces that we need
for each snapshot.
So we'll use a for each statement
and we'll get the document for each of the snap shots
and then we will take that snap data array
and we'll go ahead and push the information that we need
into our temporary array.
So this will be, we're going to need the document ID
for each document, 'cause we're going to need to do things
with each document that we receive each attendee,
we're going to be able to delete attendees
and award them prizes or at least give them a star,
and then so I'll store also the email address
and to get to the information in the document
I'll use the data method,
and then look for the email address.
Same thing for the name,
and then I'm going to take the attendees array,
the local copy which will be this one
that's empty right now,
and I'll just assign that to the snap data,
the data that we are getting from our database,
and let's take a look.
It looks like we're not quite getting anything
and that's because our template's really not displaying
the data, all we have is this sort of a display name.
So I need to create a loop here.
So here on this div, I'll use a V-for
which is how we make loops in QJS.
I always like to put item as the name of my thing
that I'm looping through,
and so I'll loop through all the attendees,
and then I always need to include a key,
and my key is going to be item.ID
because each document's going to have an ID
and then I can make an expression out of this,
and say item.displayname.
So let's take a look.
Looks like we made a mistake somewhere,
so let's go ahead and check.
Looks like we have some errors in here,
so collection is not defined, all right so...
Let's make sure we've done things correctly,
and you know this is one thing,
when you reason that view to plug in,
sometimes you forget to add these dots,
and just watch out because what it will do
is it'll try to format and correct errors for you,
and if you forgot to put like a dot collection in here,
it actually puts in a semicolon
which is sort of weird.
You actually need a period here, so let's try that,
and now you can see the different users appearing here.
So watch out, Vter's a pretty awesome extension,
but it does do things sometimes that you didn't type,
and that can make it a little tricky
to find some of the errors that you've made.