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
34. Setting an employee for the service checkout
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
So if we land on the checkout and we don't have an employee set,
00:04
what we want to do is when we choose a slot, then we want to set the employee. So there's a couple of ways that we could do this. We could do this directly from this on click and we could change this over to a method which then goes ahead and sets the form a date time,
00:18
but also then finds the employee. Or what I prefer to do is add a watch on to our form. So wherever the date time is changed, whether it is this button or anywhere else, we will then set an employee.
00:30
So let's go up to the top here and just pull in our watcher from view. So we'll put in watch and let's just do this down here. And let's go ahead and watch on our form. So we want to watch form date time specifically.
00:46
And then we want to invoke this when that happens. So let's just say watched in there and make sure that this is working. OK, let's give this a refresh and choose a slot. And yeah, sure enough, that goes ahead and triggers.
00:59
So remember, this needs to trigger every single time this gets changed, because if the customer goes ahead and chooses a different time and only one available employee is in there, we need to make sure that that employee gets changed. OK, so in here, what do we do?
01:14
Well, we need to first of all, check if we actually don't have an employee. First of all, if we do have an employee already set on this page, we don't need to do anything. So we could say if form employee ID,
01:27
then we just want to return and do an early return. Now, otherwise, what we want to do is make another request to this page, really just getting this page again and then setting the employee. Now we're going to have a problem with this.
01:40
Let's go ahead and do it and see what happens. So we're going to use our router again and we're going to make a get request. And the reason we're doing this and not reloading is we need to pass additional attributes to this route, e.g.
01:51
the employee. So what we're going to do is just say route and checkout. And then in here, we're going to pass everything that we need in. So props dot service and the name of the employee or the slug that we want to see
02:07
here. Now, let's just hard code this for now, just so we can see that this is working and then we'll go ahead and fill the rest in. OK, so we want to get that route. This is where we're actually going to find
02:16
the employee, but we're hard coding it just for now. And then the data that we want to pass down is absolutely nothing. And then the options here, we want to do something on success. So on success, we want to go ahead and set the employee ID.
02:31
So this won't be enough to necessarily set it. Let's go ahead and check this out. Remember, we're dumping our form up the top here. So we should see this change now.
02:39
OK, let's go and just put our console down just so we can see if there are any errors here and I'm just going to choose the nine o'clock slot here. OK, so let's take a look at what's happened. The first thing is the employee has been set.
02:51
The URL has been changed because we've made another request to this page with that slug in there for that employee. And that's working really nicely. It's been set in our form as well.
03:01
So we don't necessarily need to set that manually. But what has also happened is we've lost all of our state. So the time that we have chosen has been completely lost. Nothing is really showing here.
03:12
It all looks a little bit odd. So what we want to do is use the preserve state option inside of this request. Everything on the page is going to stay the same except what needs to get updated. OK, let's try this again now with preserve state and see what happens.
03:29
And you can see, sure enough, everything works nicely. All the state that we previously had, like the date time that we've just set, has been set and we have everything in there that we need and that will have picked myself out.
03:41
Now, all we need to do is figure out how to actually get this next available employee from the date that we've chosen. Let's just experiment with this and see what we can do. So if we just log out our slots value,
03:54
which we know is all of these slots that are currently available for that date, and we come over to here and click on one of these, you can see that we get this object of all of this stuff. Now, because we're working with an object, we could change that.
04:08
But let's just go ahead and cast this to an array using object and values on that slots object. So let's come back again and get rid of this. And there we go.
04:19
So we get a bunch of objects in here now with the employees, with these dates. Now we just need to find that specific date and then grab the first employee. So to do this, we're just going to use find. We'll call this S for slots and we'll say S dot date time
04:36
and compare that to the form date time that we've just chosen. Or we could pull the date time into here. It's entirely up to you. And let's just take a look at what this
04:47
gives us and then we can finally pluck that employee out. There we go. So we've got an employees property in here with an array of the IDs. So we can just say employees and then we can just grab the first one.
05:01
So I would just grab the first to make them an employee for that particular slot. OK, let's go ahead and do a final console log on this just to see what we get, and there we go. So let's go ahead and put this in here.
05:11
I'm not sure this is going to work with the way that we've got root model binding set up, but let's just see what happens. And if we come over now and click on one of these. Yeah, we got a 404 not found.
05:21
So what we need to do is actually fetch out the employee slug from this. Now, to do this, what we can do is we can pass the list of employees down into this checkout and then we could pluck that employee out by their ID or we can just change things around so
05:39
that within our slots we actually have the slug of the employee instead. So if we come over to our slot resource, at the moment, what we're doing is plucking out the ID from each of the employees. Let's go ahead and just pluck the slug out
05:52
to make it easier so we don't have to pass more data down than we need. OK, so now that we've done that, let's go ahead and just do a final console log on this and we should end up with. Our slug in there instead.
06:04
So let's go ahead and do this. Let's just fix that up really quickly and get rid of this here. And let's just try this again. So let's go and select here.
06:13
And yeah, there we go. We get a slug. OK, so that kind of makes sense since we're using slugs in the URLs. We don't really need the ID. So now all that's left to do is just
06:21
replace this out into here and we are pretty much good to go. So let's just try this out again and see what happens. OK, so let's go ahead and choose the nine o'clock slot. Sure enough, that set me in there.
06:34
What I'm going to do is just go ahead and add some unavailability to the database for myself just so we can see that this chooses the other employee in the database as well. So let's go ahead and add in a start and end update. And we'll fill in the created and updated
06:48
update as well, and let's make this for today. So let's get rid of all of the employee availability for myself for today. Set that from nine o'clock till five o'clock. And then now if we come over here and we choose this, sure enough,
07:06
it selects Mabel instead to just pick the next available employee, which is great. OK, there we go. We have now set an employee based on that. I think we can go ahead and get rid of our form dump in our template now because I
07:19
don't think we're going to need that. And then we'll go ahead and hook up the customer details in the next episode. But now that is working nicely, regardless of whether we've chosen an employee first or a service first.
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!