- [Instructor] Let's go ahead and take care
of a couple of these buttons.
These last two are going to be a little bit easier
so we'll get going with those.
First, we'll take a look at creating
the email button functionality.
Now, this is pretty easy because
all we're going to do, is tell the browser
to send the email.
The email is going to be pretty easy
because all we need to do here,
is create a link to an email
and the browser will try
to launch my current email client
and send the user an email.
So, all I got to do here, is do an href,
and just do a mailto and then colon,
and I'll pass along the item eMail.
Now, the deleting button is going to be a little harder
but it's similar to deleting a meeting,
and we've done that previously.
So, this is going to look for a click event,
and when somebody clicks on this button,
it's going to execute an event called deleteAttendee,
and in this case, I'll pass along
the item ID here as the payload.
Now, I could write this in the parent component
but this particular functionality
is only relevant to the attendees page,
which is sort of a hybrid of the previous pages
that we've done, where as in the previous pages,
they have been either pages that needed to be accessible
to everybody, or the admin.
This one's a little bit different
in that we need to show different things to the admin
than regular users
and then we have this button sort of section showing
only to admin users, so, to me,
makes more sense to add this method here
and not on the parent.
So, we'll create a methods section
and we'll create this method called deleteAttendee.
It's going to receive an attendeeID here,
and I'll need to do a check to make sure,
just like before, that the current user
that is logged into this application
is on a page that matches their user ID.
That way, people who are not the admins of this page
can't be deleting some of these users.
So then we're going to match the user ID of the page,
which comes from the route, right?
We see that user ID right here,
and then we're going to make sure that
the user ID of the current user matches that.
So, if that's the case,
then I'm going to go through the database,
look for the proper collection called users,
look for the document of this current user,
look for the meetings collection
and we will look for the current meeting
by using the this.meetingID.
And again, that comes from the route parameters,
and then we'll look for the attendees collection,
and then we'll look for the attendeeID
that came along as the payload in this method
and then we'll just execute a delete method on that.
So, let's go ahead and save this
and see if we can delete one of these users.
Right, so that looks like it works,
and if I click on this,
it should try to launch my email application
and it should come up with the email address
of the user that I clicked on, which is great.
I don't need to send anybody an email right now,
so, let's close out of that.
And that's all you need for these two buttons.
This one's going to be a little bit harder
because we're going to have to
insert a piece of data into an existing document.
So we'll take a look at that in the next video.