- [Instructor] It's time to work on
our code for adding meetings.
But before we do that, I'm going to need to change
one more thing about the user information
that I receive.
And that is the fact that right here,
when I create the user's information,
I'm actually just passing along the display name.
I want to pass along all the user's information
and that will give me a user ID
that I'll need to have whenever I want to
push some information into the database.
So I'm going to save this and unfortunately though,
that's actually going to pass the entire object.
So if you went back to a meeting log,
you'd see this huge object with all kinds of stuff in it.
And that means I just need to go into home
and make sure that this is just user dot display name.
All right, if we peak over here,
you can see that it looks just like it did before.
Which is the way that we want to do this.
So now I need to go and bring in a new template.
I've created som html here that you can just copy.
So go ahead and hit the Raw button
and copy all this.
This sure has a lot of divs on it, so,
but that's the way html works.
So we'll go ahead and paste that in here.
And you'll see that it's just sort of
a nice form when we go to meetings
where we can type in a meeting name
and then hit this plus button.
And we need to wire all that stuff up.
So what I'll do is
I'll create a script tack here
and I'm going to give this a name
and then we're going to need some more stuff in here.
We're going to need a data property
and as usual, this is going to be a function
that returns the information
that we want in this component.
So I'm going to use meeting name,
and I'll set that to nothing,
and over here in this input field,
I'm going to add a V-model directive here
that keeps track of that meeting name.
All right, so I also need to add a local method.
And actually, I'm going to go over here to the button,
right, so when somebody clicks on this button,
I'm going to look for a click event on the button.
Prevent the default behavior,
which would cause the page to reload.
And then execute a local function
that I'm going to call handle add.
All right, so I need to create that local function.
We're going to do that down here.
So in addition to data,
we're going to have a set of methods.
And the method that we want to create
is handle add.
So sometimes you'll notice that I emit events
and sometimes I prefer to sort of prehandle the events
before I ship them up to the parent component.
This is going to be one of those methods
that does something before
I send things over to the main component.
So we'll create a function
and we'll go ahead and emit
an event that I'm going to call add meeting.
So this is going to be an event in the parent component.
And then we're going to need to send something along,
so this meeting name,
so this is known as the payload,
something that we're going to be sending
to our parent component.
So it's going to emit that and then what I want to do is
go ahead and clear out meeting name.
And what I need to do is,
I want after somebody types in a meeting name here,
what I want to do is add it to the database
and then I want to clear the meeting name out,
which this will do.
But then I also want to make sure that
my input is reset to this point right here.
So in order to do that,
we're going to need to create a reference
to this input field
so that we can send it an event
and whenever you send an event,
it's called a focus event.
So we're going to go back into this input field
and create a reference,
we'll call it also meeting name.
So now, down here, we can go ahead
and target that.
Looking for all the references in the current document.
The one called meeting name
and issue a focus event.
So remember that view is usually managing the dom for you,
but sometimes you need to do dom like things
so this is how you do it.
You create a reference and then
we can pass along a focus event
which will make that input field the thing
that has focus on the page
and put the cursor where we want it.
All right, I also need to make sure
that I pass along the user as a prop.
Now I think I'm already passing it.
So I'll show you in just a minute where I'm doing that.
But I need to make sure that I
capture it inside this subcomponent.
So I'm going to say props user and in the app dot view file,
you'll notice that in my router view,
I'm passing along the user's information.
But I can't use it inside the subcomponent
unless I receive it.
And make sure that we capture that event,
so add meeting, the event is going to
target a local method called add meeting.
So this is the event,
sending it to a local function that I need to create now.
And that's going to go in my methods.
So I have log out here
and now I need do add meeting.
So a function.
This function is going to receive a payload,
the information that we want to act upon, right?
And something that I always find interesting
is that in view, when you receive the event,
you don't need to worry about the payload in here,
you just put in the name of the local function
that you want to run when this event takes place.
But that payload is automatically
passed along to our method.
And you just create a variable right here
called payload and then anything that you pass along
will be in that variable automatically for you.
So now we need to target the database.
So we have that in this DB variable
that comes from when we create this DB dot JS file.
So we'll say DB and then collection.
So we want to go ahead and
create something in the users collection
and what we want to do is create a document,
so we'll say document,
and I want to use the user's ID,
the one that we get from authentication.
Remember we got all that information,
one of the things that we wanted is the user's ID.
Since we now pass along all of that user's
information into the local this user variable,
we can ask for the user ID and pass that along
to the database so that whenever I store any information,
it's all going to go under this user's ID.
All right, then we want to create a new collection
that doesn't exist quite yet
cause we haven't pushed anything.
And I'm going to call this collection meetings.
And then I want to add some data into that collection.
So this will be a new document.
And this is just going to be an object
that passes along some information.
So I want to pass along the payload,
which will be the name of the meeting.
And I'm going to pass along an additional
piece of information called created at.
Just another field so that if I want to,
I can sort by this field.
And Firebase, firestore,
so we'll use a built in variable called server timestamp.
And this is going to generate a timestamp.
We could do this in JavaScript,
but it's actually much better to
just use the server's version
cause it's always going to be more accurate.
So we need to add a dot here and a dot on at.
And actually, this is created at,
not created add, let's go ahead and save that.
Now let's check out application.
And let's try typing in a meeting here.
So when we hit plus,
you should see this automatically clear.
Now let's go into our database
and sometimes you need to refresh the page here.
And now you can see this new document
and if you look the user's ID,
it should match this key or this hash that I created for us.
It automatically created the collection for us as well.
And then it created a document
with an individual document ID.
And now we can see that we have
the information that we typed in here.
So it's going to create a new document
for every meeting that you add.
And it's just going to push it into the database.
Which is great.