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
15. Adding employees into slots

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 in this episode, we're just going to focus on getting the availability for each of the employees that we need to detect for a service and going ahead and adding them to our slot list.
00:10
We're not going to be doing anything else like taking appointments that have already been booked into account or removing empty slots, but this is a good start.
00:18
OK, so before we do anything, we are modifying this range. That's what we're going to be modifying for each of our employees and adding to. So the first thing I'm going to do
00:27
is go ahead and return that range. And then over here, we can die dump on our availability. And of course, at the moment, we're just going to get back a list of them,
00:36
two dates that we've requested with all of the slots that we've requested and each of the times. So let's go over and first of all, grab the availability for each of the employees inside of here.
00:49
Now, this is pretty straightforward because we've already built this class up. So let's go ahead and new up our schedule availability class. Let's pass the employee in here.
01:00
And remember, as part of this, we also need the service as well. So let's pass that service into there. And then we're just going to say for period,
01:09
the API here is exactly the same. And it's going to be the starts at date and the ends at date as well. And we just need to bring these into scope inside of here.
01:23
And there we go. Now, because we're going to be modifying the range, before I forget, we're going to go ahead and bring in a mutable range into scope.
01:31
So when we change this, it will modify the original range. If we don't include the ampersand here, it's not going to actually modify this. OK, so we've got the availability for each employee.
01:40
You can see it's pretty quick. So even if, for example, we went over here and said add month, we are going to see a slight delay. But you can see that it still loads pretty quickly.
01:51
And we have all of these dates in here with all of these potential slots that we can start pushing these employees to. So let's go and just change that back to add a day.
02:01
And there we go. So we've got two dates. So now we want to iterate over the availability of an employee. And I'm actually going to call this period.
02:09
It makes a little bit more sense because it is a period collection that we're getting back. We just remind ourselves and I dump on that. You can see that we get this period collection
02:18
of the periods that they can work. OK, so we're going to go ahead and iterate over these periods. We could put this into a collection for each over it.
02:25
But let's just stick with this. And we're going to add the availability for that employee. So we're going to defer to another method here. So we'll say add available employee for a period.
02:37
And into this, we're going to pass in the range so we can modify that. We're going to pass in the period. And we're going to pass in the employee.
02:45
So let's go ahead and build this method out. And then we'll pull this together and see what this looks like when we dump it out in the browser.
02:52
OK, so we're expecting in a range here, which is a period collection. And we want a period specifically in here for that particular period
03:00
that they might be able to work. And the employee here as well. Great. OK, let's just go ahead and die dump on our range
03:07
to remind ourselves of what that gives us. And yeah, oh yeah, OK, so of course, that is our collection. That's not a period collection. And there we go.
03:18
So we've got our collection of these dates. So now what we want to do with these dates is iterate over each of the dates. So let's go ahead and say range each
03:26
now that we're working with the collection. We'll get a date for each of them. We're going to bring the period and the employee into scope because we're now working within a closure.
03:37
And now we're going to iterate over each of the slots and see if an employee can fulfill that slot based on this period, which remember is a period that they can work. So as long as that slot that we're
03:49
going to iterate over falls within this period here, then we can push this employee to there. OK, let's do this. And then we'll roll over it once we're done.
03:59
So we're going to go over the date slots. Remember, this is now our custom date object. So let's make sure we pull that in. So we're going to iterate over our slots like so.
04:10
We're doing a little bit of nesting here, but I don't think it's too much trouble. It kind of comes with this kind of stuff. And again, we're going to bring our period
04:18
and our employee into scope. And now we need to work out whether a period contains the slot time. So if the period that a employee can work contains the slot.
04:35
So let's go ahead and just write out how we might want this to look. So period contains slot time. Then we want to say slot add employee maybe
04:49
and add that employee into the slot. So at the moment, if we just look at our period, contains is a method on the period that comes from that sparse package.
05:02
So if it contains that, then we're good to go. So let's go ahead and dump can work this period or can fulfill this period. And if we give it a refresh, you can
05:11
see that we get all of them dumped out. We're not going to actually add this, but I'm going to go ahead and dump can't work this period. And let's see what we get.
05:22
And yeah, so this will be the 12 o'clock period, which we can't work because it doesn't fall within our schedule. And then when we get to the 9 o'clock period, we'll see can work this period.
05:35
So obviously, this is for multiple employees. But you can see that we've got some cans in here as well. OK, so we'll get rid of that. And let's bring back what we had before.
05:44
So we'll say some nice slot add employee. And we can even type in that so we actually get what we need to in there. Now, obviously, that method doesn't exist on our slot class
05:58
at the moment, but we can create a method to do that. So add employee. And we'll go ahead and pull in our employee just here. And we'll say this employees.
06:15
And we'll push that employee to that list. OK, great. So now that exists, we're all good. So let's go ahead and just run this and see the output.
06:24
And then we'll go through this again. OK, so let's go into the first day here, which we know that I can work because we've already seen that in our availability calendar.
06:32
It is also currently half past 2 when I'm recording. So we shouldn't see availability for that time. So let's just look in one of these slots and see what time we're on.
06:43
This is 9 o'clock. So you'll notice that inside of this slot employees, there aren't any employees in there. Let's go down a little bit further.
06:53
No employees in here at 1 o'clock. So we're getting a little bit closer. No employees here. And we have an employee in here at 3 o'clock.
07:04
So this should be me. And there we go. So I can work at 3 o'clock because, of course, it's past that time.
07:12
The reason all this comes together is because our availability for our employees, remember, cuts off the time from the current time that we're on in the day.
07:20
So all of these employees will now be added to this based on their availability. Let's just go to the database. And obviously, under schedules, we only have,
07:28
if we just check our employees, we only have a schedule for Alex at the moment. So let's add another schedule in here. We'll just duplicate this down and do this for Mabel.
07:38
And we'll just leave it exactly the same. So now when we go over and refresh this, it's a little bit annoying because we're not filtering anything out here.
07:45
Check the slots down here. And let's find a slot there. So this is 4 o'clock. And of course, we have two employees
07:56
that can work that time because they are both available. If we'd added some sort of schedule exclusion for Mabel at 4 o'clock till 5 o'clock, she wouldn't exist within that list of employees
08:07
because her availability doesn't allow it. So we're pretty much done here. Of course, we're going to clear things up a little bit by excluding appointments and filtering out these things.
08:18
But let's just roll over this one more time to make sense. So the first thing that we did is iterate over the employees. We already know that because we want to check multiple employees in one go.
08:26
We got the periods, the period collection that they can work, which we've already looked at throughout the course. We iterate over each period.
08:34
So remember, periods can be broken up into chunks based on when an employee is available. They might be available for half a day only. And then we go ahead and pass in everything
08:44
that we need to add them. So we've got the range, which is what we want to push them to. We've got the period, which is the period they can work. And of course, the employee, because we
08:53
need to be able to push them. And what we do is we iterate over the entire range of slots. And for each of them slots, we work out if, and this contains, and this is why this package is so helpful,
09:06
if this period contains that slot time that we're requesting, we can then push the employee into it. So this package will allow us to take the time that we've
09:15
already defined and see if it fits in with that particular slot. We kind of saw that from the documentation earlier, but that's pretty much how that works.
09:24
And then we just go ahead and add that employee to the slot. Now, it's going to be really helpful to see this when we are actually filtering out slots that we can't do. So let's go to the next episode and just filter out
09:35
all of the slots that are just empty of employees that can't be fulfilled. And then we'll go ahead and add on the ability to exclude already booked appointments.

Episode summary

In this episode, we focus on adding employees to available time slots based on their schedule. The first step is to get the availability for each employee for the service we're working on. We're not worrying yet about booked appointments or filtering out empty slots—just the basics of matching employees with slots.

You'll see how we grab each employee's availability and then, for every period they're available, we check the slots for those days to see where they could work. If the slot falls within an employee's available period, we add them to the slot. We walk through how to do this programmatically by iterating over employees, their periods, and then the slots. We also handle making sure we're modifying the slot list properly as we go.

Along the way, we test everything out, check how it works with multiple employees (including adding a new one to the database), and confirm that each slot ends up with the right list of available employees. By the end of this demo, the basic mechanism for linking employees to their available time slots is all set up.

Next up, we’ll tackle filtering out slots that have no available employees and start considering appointments that are already booked.

Episode discussion

No comments, yet. Be the first!