- So far, we've been able to read the records from our data,
update the information in our records,
and delete items from our data file.
So now, it's time to start working on adding new items.
To do this, we're going to need a new component,
so let's go ahead and, in the components folder,
set up a new file.
We're going to call this one "AddAppointment.vue,"
and in here, we're going to create a template.
This template is going to have a bunch of HTML,
and it's really just a bunch of bootstrap code with HTML.
So, let me go into this just right here,
and I'm going to hit the Raw button
to make sure that I get just the HTML.
And I'm going to copy this, come back here, paste it in here.
I've already added the "font-awesome" tag,
so we'll need to bring that in, and that means
that we'll need to use a Script tag after this.
And in our Script tag,
we're going to import the "FontAwesomeIcon" library
from "fortawesome" and then "vue-fontawesome"
just like before in other places.
When we created this, it automatically made
this export default, just because of some of the
extensions that I'm using in Visual Studio Code.
So, we're going to need to add a name for this component here,
I'm going to call it "AddAppointment,"
and we're going to need to create some data,
so we'll just start the process
by creating the statement that usually holds the data,
which will be this piece of code right here.
Then, we're going to add a components section
and in here, we want to make sure that
we bring in the "FontAwesomeIcon" component
that we imported before.
So, that works pretty well to bring
in the information with the icon.
Let's take a look at our application
and right now, we're not really using this
"AddAppointment" in our "App.vue" file,
so we'll need to add it by issuing an import statement
and we'll add in "AddAppointment" here,
and you could move it up if you wanted to,
but I don't think the order really matters here,
and then, we want to go ahead.
It actually needs to go on top,
so we will do "Add-Appointment"
and we'll do the Self-Closing tag here,
and we'll also need to add it to the components section.
All right, once we do all that,
you'll be able to see the form here,
and you've got this little plus icon already in there.
So, everything's looking pretty good.
I'd like to, sort of, modify the functionality
so that this form doesn't show by default.
I'll see a button to expand this form,
and then, I'll still see the list of all the current items.
So, to do that, I'm going to go back into "AddAppointment,"
and modify some things in here.
One thing I want to do is create a click handler.
So, in the button that has this icon right here,
I want to track an on-click event,
so I'll do "@click" when somebody clicks on this,
and what I want to do is create
a variable called "hidepanel" that's going to exist
only in this component,
and then, when somebody clicks on this,
my "hidepanel" variable will turn from,
say, true to false, that way it creates a sort of toggle,
it'll toggle the value of this "hidepanel."
So, I'll need to add that into my data,
so right here inside this Return statement,
I would add the code here, so let's say,
"hidepanel" and we'll set it to true.
So, by default, the container will be hidden from view.
So, what I need to do here is add a "v-bind" directive,
and the shortcut can be just "class"
and in here, I'll pass along an object
and specify that I want the "display none" class
to add itself to this element
only if the value of "hidepanel" is true.
So, by default, this entire section
with the card body will be hidden
because "hidepanel" is set to true at the beginning
of this component, and let's go ahead and save that.
Take a look at this
and let's try
showing and hiding the component, which works pretty well.
So, one more thing I want to do is
at the very bottom, I'm going to add a "style" section,
and then, just make sure
that the "card-header"
has a cursor style of pointer,
and that way, it'll just look really nice
when I roll over this section, it'll have a hand pointer.
So that's what we need to do to get the sort of core
of the form started, and also to toggle the information
by creating a local variable that exists
only in this component.
We can toggle the display of the body of the card,
which has the form in it.