- [Instructor] So now that we've finished displaying
the list of meetings,
let's go ahead and start programming
some of these buttons right here.
So these are three buttons.
The first is going to allow you to delete one of these records.
The second one will send you to a check-in link,
where people can check-in to a specific meeting.
And then the last one is going to display
the list of meetings.
The easiest one is this one right here,
so let's go ahead and do that.
And we are, right now, in meetings.
So what we will do is create an event
when somebody clicks on that button.
So that is down here.
And I will do a click event
and then emit something called delete meeting.
And as the payload I'm going to pass along the item ID.
So I need to create this in the parent component.
And we'll go to app.vue.
So in our router we need to capture that event
and we'll make it execute a local event
we'll call delete meeting.
So we'll need to do that as a method.
I'll do it after add meeting.
And this meeting will receive a payload from the event.
So this is pretty easy.
We need to just target the proper collection
so that will be DB or the database.
Look for the collection that is named users
and we will look for
the document with the current users ID.
And then we'll look for the subcollection,
and they're called meetings.
And we will look for the document
that has the ID of payload
which is what we get when somebody clicks.
The payload has the ID of the meeting
and once we get that then all we need to do is...
And don't forget to put these periods.
Bad things happen when you forget periods.
And then we'll do a delete here.
And that's pretty much it.
So let's go ahead and save this.
Make sure that our meetings are also saved.
And then we'll see if we can delete one these.
Let's delete this duplicate here.
Yep, so you can see that now
we can just delete meetings pretty quickly.
So right now we can add a meeting and delete a meeting.
And you can see that a lot of what we need to do
is pretty much the same thing over and over.
And one thing I could talk about
is how I make the decision to sometimes,
like in the login screen,
you may have seen that I create more of these methods
within the subcomponent.
This is because the login screen itself has to stand alone.
So people can come in and login to the website
without having been on any previous page.
And so it's better, in this case,
to have all the methods inside the component
and they need to stand by themselves.
Register is the same way.
Like you don't really want to prevent people
from coming to register by going to any previous page.
But on pages like the meetings,
where I definitely want to manage all the information
about the meeting and make that data available
to more than one competent,
and you'll see that as we go along.
I need to make that available to users
when they check in as well as the list of meetings
within each user.
Those are components that need to share things
with other components.
So that is better managed on the main component
as opposed to a subcomponent.
So that's kind of how I made the decision between those.