This episode is for members only
Sign up to access "Build an Appointment Booking System With Inertia" right now.
Get started
Already a member? Sign in to continue
Playing
33. Hooking everything up to a form
Episodes
02. Core functionality
03. How we build up availability
7m 55s
0%
04. Employees and services
7m 39s
0%
05. Employee schedules and exclusions
7m 53s
0%
06. Setting up appointments
5m 34s
0%
07. Working with date periods
10m 4s
0%
08. Iterating over requested days in a period
4m 51s
0%
09. Adding schedule availability
15m 38s
0%
10. Subtracting employee schedule exclusions
7m 53s
0%
11. Excluding time already passed
2m 57s
0%
12. Writing tests for schedule availability
19m 50s
0%
13. Generating slots
14m 47s
0%
14. Building the service availability generator
7m 5s
0%
15. Adding employees into slots
9m 44s
0%
16. Removing empty slots
4m 42s
0%
17. Removing slots with booked appointments
6m 44s
0%
18. Using a custom date collection
3m 34s
0%
19. Writing tests for service availablity
18m 42s
0%
03. Building the booking UI
04. Building the availability calendar
25. Rendering the datepicker
6m 51s
0%
26. Fetching availability
9m 16s
0%
27. Disabling unavailable dates
6m 25s
0%
28. Showing the first available date
2m 4s
0%
29. Fetching future availability
10m 4s
0%
30. Showing slot count on the calendar
9m 1s
0%
31. Fixing up core availability in the past
2m 34s
0%
32. Showing available slots
5m 49s
0%
05. Booking appointments
Transcript
00:00
In this section, we're going to cover the entire appointment
00:02
booking flow. The first thing we need to do is start to hook up some of the items that we have on the page to a form so we can actually submit this
00:09
through to the back end. So let's work on the basics, and then we'll go ahead and cover the details and also selecting a slot in the service-only checkout.
00:18
We'll do that in the next few episodes. OK, so the first thing that we want to do is bring in our form from Inertia. So let's bring in our Use Form Helper.
00:29
And then just underneath our props here, let's go ahead and define out a form using that form helper. Now, what are the things that we need to send through? Well, we need to know the service ID.
00:39
That's pretty straightforward. And we can grab that from the props. We know that's always going to be available. So we're just going to say props.service.id.
00:47
The next one is the employee ID, which, as we know, may not be available. We might have a employee or a service-only checkout, in which case the employee won't be available.
00:59
So I'm just going to go ahead and access this as if the ID might not exist. The next thing is going to be the date time. That comes from our slots.
01:07
Remember, that contains the date and the time. So we can just easily send that through to the back end and book that for that particular date and that time as well.
01:16
So this is just going to be a null by default. And then a little bit later, we're going to have a name and an email address, but we'll do that in the next episode.
01:24
OK, so let's focus on hooking these up. To do this, I'm just going to go ahead and dump out the form at the very top of the page. So let's come down to our template.
01:33
Always helps to just dump this out so we can see exactly what we have. So at the moment, we've got a service ID of 1 and an employee ID of 1.
01:40
And if I just get rid of the employee here, you can see that the employee is not in there as well, which is great. That's exactly what we want.
01:48
We could even specifically set that to be a null value if this doesn't exist, just so it stays within the form. Otherwise, it's just going to go. OK, so let's hook up this date time.
01:58
That's probably the most important thing. And then in the next episode, we'll look at choosing an employee if they're not available. So when we click on either of these,
02:06
nothing is happening at the moment. So let's go down to the part where we're iterating over our slots. And we will go ahead and hook this up.
02:14
So basically, this is just a div at the moment. We probably want this to be a button. It's probably a little bit more appropriate. And then when we click on this, so let's add a V on click
02:24
handler here, we want to go ahead and set that form date time to the date time that we have within this slot. So we'll just say form date time. And we can just set this like normal.
02:34
So this is the slot date time. So that's as easy as it gets to assign that to our form. Let's go ahead and try this out. And I'm just going to click on any of these.
02:43
And you can see at the moment, we get a refresh. The reason for this is just that we have a button within a form. And we haven't explicitly set a type of button on this. So it's actually submitting that form, which we don't want.
02:54
So let's click on this. And there we go. Sure enough, it sets the time slot and the date that we have selected.
03:00
If we choose a different date here, you can see that the date changes over as well. So that's working really nicely. So finally, let's just go ahead and highlight this just
03:08
to show that this is the slot that's been selected because at the moment, we don't have any visual indication as to whether this has been selected.
03:16
So we can bind in a class in here. And we can use an object to set a particular background. So let's go ahead and just change the background to the background that we have on hover
03:26
if we have this selected. So basically, we just want to compare the form date time to the slot date time. And if it matches, then we're going to set that background.
03:37
OK, let's go over and have a look at this. And you can see, yeah, sure enough, it does highlight it. Maybe we could make this a little bit darker. So let's actually change this over to BG Slate 100.
03:46
And then the only issue we're going to have here is that when we hover over it, we still have that hover effect. So we can either do another condition on here,
03:54
or we could just completely replace the hover. So we could say on hover, we want this to have a background of Slate 100 as well. And then when we hover, it just stays the same color.
04:04
OK, so now let's just go back to the start of our app. And let's go ahead and choose a professional and the service. We already get these populated, which is great. We choose a date time.
04:17
And that's pretty much everything we need to make a booking. We'll fill in these later. But the next thing that we're going to focus on
04:23
is if we don't have an employee, when we select one of these slots, we want to fill in and refresh the page to fill in the employee that we want to perform that service.
04:33
And that will just be getting the first available employee that can fulfill that. So let's cover that in the next episode. And then we can move up to finish out our checkout.
39 episodes•5 hrs 0 mins•1 year ago
Overview
Building an availability calendar and booking system is a notoriously difficult problem to solve. That’s exactly what we’re going to cover in this course.
Step by step, we’ll build an appointment slot generator that calculates availability based on employee schedules, employee’s booked time off, the length of service chosen, existing appointments, and cancelled appointments.
For maximum flexibility, we’ll also allow multi-employee availability checks, so we’ll be able to see every employee who can perform a service (and their available slots).
To finish up, we’ll create an entire booking flow with Inertia (using Vue), including a beautiful booking calendar that shows detailed availability across multiple dates, the ability to choose a time slot — and finally the ability to book an appointment.
Phew. We’ve got a lot to learn — let’s build a booking system with Inertia!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!