- [Voiceover] So I want to add some administration features
to the users in my meetings.
I don't know if I made this super clear in the last video,
but I did check in a few users into this first meeting.
So what I want to do is add some buttons
at each of these sort of records so
that I can delete users, send them an email,
and also perhaps give them a prize by adding a star
to one of the users.
So I'm planning on using this
when I'm hosting a meetup and I want to check in users
and award some prizes to some users.
Right, so what I need to do is make sure that I receive
the users as a prop in my attendees component.
So in App.vue, in the route for this user,
I'm sending along the user information, but
I won't see it here unless I receive it,
so I need to go ahead and
add a props field in here
and make sure that I at least receive the user information
into this space, so that'll give the logged in user.
I'm also going to import
the Font Awesome Icon library.
That's going to give me some icons that I use in my buttons.
So now, I can create a conditional area
in my list of attendees that
I'll be able to admin but only
if this happens to be a registered user
and also if the user happens to be
the same user as the page that I'm going to.
So if you're a member,
the information about the attendees is passed along/here
with the meeting ID as well as the user ID,
so I can use that to compare and make sure that
if the current user matches the user ID
of the path that I'm sending,
then that user can see these admin sort of buttons here.
So, let's go ahead and add that.
And it's really not that much code.
So, normally, I would paste this code from somewhere else,
but it's not a lot of stuff,
so I'm just going to type this all in.
So, this will be
a section that is going to be a button group.
This is a bootstrap component, so btn-group,
padding on the right of two,
and this button group will only display,
so I'll use a v-if statement here,
if the user is not
null, so if there is a user account for this user
and also if the user UID
is the same as the user ID.
So the user UID will come from the props.
This user ID, if you remember,
is coming in from my route parameters.
So, this user ID here
is received from the route parameters,
and I'm just making sure that
the user that I get from the route
matches the user ID that I get from the path
that I'm going to in my routes.
If that's the case, I'm going to need to create some buttons
and the first one will have a class of
button, button small,
and outline-secondary.
We'll give it a title
so when people roll over the buttons, they can read this.
Okay, and
in here, I'll use the font-awesome-component.
It's actually font-awesome-icon-component,
and this'll be the star icon.
So I'm going to need to create
about three of these.
So there's going to be three things.
Now, this second one
is actually going to be an anchor tag.
It's not going to be a button
because it's just going to be a button to let people
email somebody from the meeting.
So, say you have a meeting.
People check in, and you award some prizes.
So, after the meeting, you can go into that page
and then just click on this button to send them
an email and just let them know,
"Hey, here's how you retrieve the award,"
just in case you've given them a link
or some other way of getting to the award.
All right, so
this'll be "Send user an email".
The icon would be envelope,
and then this last one will be
"Delete Attendee".
Sometimes, some people just happen to
try to check in more than once,
so if you have multiple people
that checked in for whatever reason,
or maybe somebody tries to check in,
somebody who's not there or something,
for whatever reason, if you want to delete an attendee,
that's what this one will do.
So the icon will be trash,
and let's check them out,
see if we're getting...
We're getting three buttons here,
so that means probably that we forgot to do something,
and that would be,
we need to make sure
that we also add in a component section.
It always feels like Vue should be smart enough
to sort of just know, but
hey, I didn't write it.
All right, so let's save that,
and we can see our icons.
What's nice is that
bootstrap makes all this stuff responsive, so
you can see that all the code that I wrote
actually makes it appear in different columns,
and to make sure that
this is only being shown to the current registered user,
I will open up an incognito window
and just paste that URL in here.
And you can see that if you are not
the registered user that owns
this particular user ID in this meeting,
then you'll only see the names,
and you don't see all of these different icons
because you don't want normal people to
have these icons
and be able to delete or award things to your users.