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
34. Setting an employee for the service checkout

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
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.

Episode summary

In this episode, we're working on automatically setting an employee for a service during the checkout process. If a customer lands on the checkout page without an employee already selected, we need to pick one as soon as they choose a time slot.

We start by figuring out how to watch the date/time field of our form, so that any changes trigger logic to choose and set an available employee. We first experiment with manually setting the employee using a method, but decide it's more future-proof to use a watcher, so it'll react to changes no matter where they're triggered from.

We then make a request to our route, passing in the necessary service and employee information. We notice that with each request, we were losing the state of the chosen time. To fix this, we add an option to preserve the existing state so the checkout experience feels seamless.

Next, we write logic to pick the next available employee based on the time slot the customer chose. We tweak our backend/API to provide the necessary slug info (instead of just the ID) so it's easy to use in URLs and requests.

After a few more tweaks and tests—including setting an employee as unavailable to check that the "next in line" gets picked—we confirm that our checkout now correctly and automatically assigns the right employee whenever a slot is chosen, no matter who’s available!

That's it for now—we’ll hook up the customer details form in the next episode, but at this point, our employee selection logic is working just the way we want.

Episode discussion

No comments, yet. Be the first!