Build an Appointment Booking System With Inertia
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

0%
Your progress
  • Total: 5h 0m
  • Played: 0m
  • Remaining: 5h 0m
Join or sign in to track your progress
01. Introduction
01. Introduction and demo
5m 45s
0%
02. A fresh Inertia project with Pest
3m 4s
0%
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
20. Employee and service resources
9m 7s
0%
21. Listing employees and services
8m 58s
0%
22. Showing services for an employee
8m 7s
0%
23. Scaffolding the checkout
8m 37s
0%
24. Making an employee optional
3m 38s
0%
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
33. Hooking everything up to a form
4m 42s
0%
34. Setting an employee for the service checkout
7m 30s
0%
35. Adding booking details
3m 55s
0%
36. Storing an appointment
8m 28s
0%
37. Handling appointment collisions
8m 37s
0%
38. Showing the confirmation page
8m 39s
0%
39. Cancelling an appointment
3m 49s
0%

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.

Episode summary

In this episode, we're focusing on making sure that our list of available appointment slots doesn't include times that are already booked. First, we check the current list of slots and set up a fake time in Laravel so we're just working with today for our tests. We then add a test appointment to the database (say, from 1:00 to 1:30), so we have something to filter out.

Next, we move to the code to see how we can subtract these booked appointments from the available time periods. We create a new method called removeAppointments, which takes the set of available periods and the employee in question. The idea is to compare these periods with existing, non-cancelled appointments on that day and remove any slots that overlap.

We also talk a bit about performance and how you might want to scope your queries if you have loads of appointments, but for now, we're just iterating through them all for simplicity. We do a couple of checks and tweaks to handle appointment durations, making sure everything lines up exactly – even down to adding an extra minute just to deal with any edge cases.

After all that, we test things out by changing appointments around and checking that the correct slots show up as available only for the employees that aren't busy at those times. Finally, we get ready to add some extra helper methods and even a custom collection class to make working with availability and building the UI easier later on. Last thing, we mention that next up we'll add some tests to double-check that everything is behaving as it should.

Episode discussion

No comments, yet. Be the first!