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
06. Setting up appointments
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
OK, so the final bit of setup that we're going to do are for appointments.
00:03
These are pretty straightforward. They're just one record in the database where this starts at date and time and then ends at date and time, and whether it's canceled
00:11
or not, and then just any kind of data you want to collect about your customer when you create these bookings. So let's start out with a model, of course.
00:20
And we're just going to call this appointment. We're going to generate a migration and a factory, of course, alongside of that. Because when we're testing this, we
00:27
create appointments to make sure that the slots are still correct. OK, so let's go over to our Create Appointments table and fill in the important stuff, first of all.
00:37
And the first one is just going to be a UUID. So we're going to identify these by a UUID when we reference these in the client side. You don't have to do this.
00:47
You could use the ID if you wanted to. But a UUID is a little bit more appropriate for this. OK, so the next thing is we need to know what service has been booked.
00:55
So let's go and add a foreign ID for the service ID and constrain that. And the same for the employee as well, of course. We need to know who this is booked with.
01:05
So next up is the start date and time. So let's add in a date time column in here for our start at. And we'll do the same for the ends at.
01:15
Of course, both need to be filled in. And then we're just going to have another date and time in here, which is going to be a canceled at. So let's say in canceled at.
01:24
We'll actually make this just a normal timestamp. And we're going to go ahead and set that to nullable because, of course, it's not always going to be canceled. Now, after this, it's completely up to you.
01:33
It's just going to be what information you want to collect about your customers when you're making a booking. So just to keep things simple for now,
01:41
I'm just going to go ahead and collect in a name and an email address. But of course, you could add pretty much anything in here, like a telephone number, whatever you need to add.
01:50
OK, so now that we've got this, let's go ahead and run our migrations in here. And we are good. So let's head over to the appointments factory,
01:58
first of all. This is going to be pretty straightforward because while we're writing our tests, we're going to manually set the start date and time
02:05
and all of that kind of stuff while we're writing these because we're going to be testing for very specific things. So really in here, all I want is just
02:12
a name and an email address. So we could either use the fake helper or just add these in. So we could add in a first name if we wanted to. And we'll do the same thing for the email address.
02:23
But of course, we'll go ahead and pull in an email address for that. And yeah, that's pretty much what we need for our testing. OK, so over to the appointment model,
02:31
let's go ahead and add in the casts that we need for these two dates, which is the starts at date and the ends at date. So they are both going to be date times.
02:41
The reason that this is important, again, is because while we are calculating availability, we need to know these, as in they need to be date objects
02:51
so we can slice up the availability properly. OK, so we'll just go ahead and add in here guarded to an empty array just so we don't need to set these to fillable.
03:01
And let's just fill in the relationships here really quickly. These are really only used for display purposes so we can see who this service or who this employee is
03:10
and what the service is. But let's go ahead and say return belongs to, and this belongs to a service. So that's the service that's been booked
03:20
so we can display it on our confirmation eventually. And of course, the same thing for the employee as well. It belongs to an employee with who we've booked with. So lastly, and really importantly,
03:31
we want to go ahead and fill in this UUID once it gets created. So we're going to go and create out in here, and let's just do this just below here,
03:41
a booted method in here to hook into an Eloquent event. So while this is being created, we want to fill that UUID in so that gets automatically generated.
03:51
So this is going to be a static booted function which hooks into the lifecycle of this. And we're then going to say when this is being created, so while it's being created,
04:03
we want to go ahead and take that appointment. So let's just type in that in here, and we want to set the appointment UUID to a UUID. So basically, as we create this appointment,
04:17
this is going to pre-fill in a UUID, hooking into while it's being created, not after it's being created. And then once this gets saved, that UUID will be filled.
04:27
And I'm not going to demonstrate that just yet. Again, we could write a test for this if we wanted to, but we're going to focus our tests on this main core functionality.
04:35
So that should be enough now to get everything working. Now we're going to go back to the employee table because while we're working out availability, we need to know which appointments
04:44
this particular employee has booked. So really the last thing that we're going to add in here is an appointments relationship. And of course, again,
04:55
it's going to be a really simple has many appointment. And that's pretty much what we need to do. So now we've got the schedule for an employee. We've got the exclusions,
05:05
which we can remove from that period. And we've got all of the appointments, which we can remove from that period to end up with the list of slots
05:14
that we can actually calculate for this particular employee. Okay, so I think we're pretty much done. Again, we might need to come back and tweak a few things, but that is our appointments table done.
05:23
And we can finally move on to the real core functionality. In the next episode, we're going to look at the concept of date periods and how they're going to work in this system.
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!