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
17. Removing slots with booked 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 last thing that we want to do here is remove already booked appointments from this availability list. So if we check this out now and just look at the dates
00:09
that we've got here, we start with just a couple of slots. So a really good thing to do at this point, especially if we just want to work from today, is just set a fake time within our Laravel application
00:22
globally. And what we should see now is for today, we've got eight slots. And of course, that will start 1 o'clock
00:29
because of how we set up our starting point from the current date and time. OK, so I'm going to put an appointment in the database from 1 to 1.30.
00:38
And we can tweak this around as we go. So let's go over to our appointments table, and let's create out a value in here, or a record in here. So the service will be 1, 1.
00:50
Let's say now for starts at. We won't set this to canceled. And we'll just go ahead and fill in some details for the name and email address.
01:00
Save this out, and then let's just change this date around. So I want to book this from 1, and I want this to end at 1.30. Great. So we've got an appointment in the database now.
01:10
Now we want to exclude it from the list. Now, there's a case to say that what we could do is within our schedule availability, filter this out in there.
01:19
That would have exactly the same effect. To me, it feels more like schedule availability for an employee should just be when they are available based on their own schedule, not
01:30
appointments. So we're going to add the appointment filter inside of this class, but it doesn't matter whether you want to put it inside
01:38
of the schedule availability. OK, so we're going to go ahead and overwrite the periods here using another method. So let's just create a remove appointments method in here.
01:48
And that's going to take in the periods that we have for that particular employee and the employee itself. So let's go ahead and create this method out just down here.
02:00
And we'll take in the periods. So that's going to be a period collection, which we can now subtract from. That's the really important thing here.
02:07
We want to subtract and cut out the currently booked appointments. So that is going to be our period. And then we, of course, just have an employee in there.
02:19
So of course, appointments are based on an employee. That's why we've passed that employee down to here. We want to get that employee's appointment. Remember earlier, we set up the relationship in here.
02:31
And we have these appointments. Really important. We don't exclude all appointments because we just want the ones for that employee.
02:38
OK, so we're going to go ahead and say employee appointments. So we're going to iterate over these, again, using this at a collection level. And we're going to say where null.
02:47
So we still have a where null on a Laravel collection. And we'll say cancel that. So we do not want to take into account canceled appointments. Now once again, if you have thousands
02:58
of appointments in your database, this is going to iterate over all of them, which can be a problem. So you will want to scope this to the requested day and time.
03:07
And we might fix that up a little bit later as we go. But for now, it's going to be OK. OK, so we're going to go ahead and iterate over each of these. So each of these appointments.
03:17
And we're going to go and bring into scope here a mutable version of the period. So we can subtract from that. And then really, all we want to do in here
03:27
is just go ahead and subtract out of that period the start and end time of the appointment. So exactly like what we did in the other class. So the appointment, if we just access the appointment inside
03:44
of here, make sure we have that available. The appointment starts at. So again, if we come over to our appointment class, we cast these.
03:56
So we can pass these directly in as carbon objects. And we're going to say appointment and ends at. And then, of course, the precision. As always, we're going to set to a minute.
04:09
And for the boundaries, we are going to exclude all. OK, so let's have a look inside of our collection. And let's look at the first time here, which is 1. Now, this is fine because Mabel can do this appointment
04:24
and Alex can't. But it looks like we have got two employees who can do this service. And we know that Alex can't because he's got a booking
04:32
at 1 o'clock to 1.30. Now, the reason that this doesn't work is the starts at time needs to take into account the length of the appointment.
04:40
So what we need to do in here is go ahead and copy the starts at date, just in case we need to reuse it. And we need to go ahead and subtract
04:48
the minutes and the length of the appointment time. So we're going to go ahead and say this service duration. And what we're going to do is add on an additional minute just so all of the appointments line up.
05:01
I'll show you what that looks like without. Let's give this a refresh now that we've done that. And we should see in here, we have the first slot at 1 o'clock.
05:11
Fine. But the only employees that can do this, in this case, is Mabel. Great.
05:18
OK, let's just change this around a little bit. So I'm going to put this to 1 till 2 o'clock. So I've got an hour-long appointment. It doesn't matter what service it is.
05:29
We'll just put it in there. And let's just check this out. So if we go over now and look at our slots that we have in here, we have got the first one, which only Mabel can do,
05:40
the second one, which only Mabel can do because Alex now doesn't have availability at 1.30 either. And then if we look at the next available one, we've got two employees because my appointment rolls up
05:52
to 2 o'clock, so I can do the 2 o'clock slot. So that is just subtracting out what we have. Now, if I just get rid of add minute, let's just see what happens in here.
06:03
So I'm going to go and, again, this is pretty annoying just to have a look through. Employees, one there and one there. And it does actually work.
06:11
So I'm going to leave that in there. I think just when I was testing this and checking the exact timestamps, it didn't line up quite correctly. But adding a minute onto this will just
06:20
line it up for us nicely. So now that we've done this, we're going to add some additional helper functions onto our overall collection class that we can see here.
06:29
And we're going to do that by creating a custom collection. Now, it's going to help when we come to build some of the UI stuff and when we want to drill into this to check certain availability.
06:38
OK, we'll do that. Then we'll write some tests just to make sure everything is working nicely. And we'll be good to go.
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!