This episode is for members only
Sign up to access "Build an Appointment Booking System With Livewire" right now.
Get started
Already a member? Sign in to continue
Playing
31. Finding an available employee
Episodes
01. Introduction and setting up
02. Database setup
03. Displaying employees and services
04. Core functionality
09. How we build up availability
3m 40s
0%
10. Working with date periods
6m 54s
0%
11. Iterating over requested days in a period
3m 30s
0%
12. Adding schedule availability
11m 33s
0%
13. Removing schedule exclusions
3m 35s
0%
14. Excluding time already passed today
2m 17s
0%
15. Generating slots
11m 50s
0%
16. Using a custom date collection
1m 28s
0%
17. Building the service availability generator
6m 18s
0%
18. Adding employees into slots
8m 14s
0%
19. Removing empty slots
3m
0%
20. Removing slots with booked appointments
6m 17s
0%
05. Building the checkout
21. Scaffolding the checkout design
4m
0%
22. Making the employee optional
1m 54s
0%
23. Loading availability
8m 31s
0%
24. Building Alpine plugins
3m 18s
0%
25. Showing the calendar
3m 32s
0%
26. Locking unavailable dates
15m 1s
0%
27. Showing the slot count on the calendar
7m 52s
0%
28. Updating the selected date
3m 29s
0%
29. Showing time slots
5m 43s
0%
30. Setting a time slot
2m 43s
0%
31. Finding an available employee
3m 31s
0%
06. Booking appointments
07. Appointment confirmation
Transcript
00:00
So finally, before we get to actually creating appointments, we've kind of neglected this checkout flow where we just provide in the service and not the employee. Now, when I click on one of these slots, that works, but we still don't have an employee set. Ideally, what we want to do is if we're in this state and I click on one of these slots, we want to look through all of the slot employees, pick out the first one and assign them to be that employee. But just before we do that, I've noticed a slight weird glitch with the picker events where when I double click on this input, you can see that it sets the date, but it sets it to a null value.
00:38
So we're just going to fix that up first and then we'll move on. OK, so if we head over to our checkout form or our checkout itself where we set the date here, we're going to have this as a potential null value. And then we can just do a really quick check here. So if we do ever get a null value in here, we just return and do nothing.
00:55
So I'm just going to say if is null date, then we're just not going to do anything. So let's head back over. I'm going to double click on this again and you can see it's just not doing anything and it's just staying as the default. But of course, what I can do is go ahead and select a new date now and everything works.
01:11
OK, so let's go over to the main homepage here and let's figure out this flow. So I just want to choose hair and then I want to go ahead and pick a date. So I don't really care who's going to do my hair, then I want to pick a time. So how are we going to set the employee at this point?
01:30
Well, we're going to go over to our checkout component. And when we set the time down here, if there is no employee, we are then going to pluck out the first employee. So how do we do this? Well, let's just first of all, add the check in here.
01:45
If there is no employee set, that's when we want to do this and we're going to go ahead and set the employee to a value. Let's go ahead and pull this out to a new method just so it's a little bit easier to see. So we'll say get next available employee, for example. So get next available employee.
02:08
And let's see what we need to do. So based on the time slot chosen, we want to go into that slot. Then we want to pluck out the first employee from that list. And of course, you can change the logic around for this.
02:20
You might have a priority for certain employees, so you might assign a priority in the database. Whatever you want to do, the logic goes in here. So we need to go into our slots. First of all, we need to pluck out the first slot that matches the time that we have set in that form.
02:36
So again, we're just going to use first with a closure to pluck this out. So let's go ahead and pull in our slot here. And the condition is that the slot time that we have to a time string, so that's going to be in minutes, is equal to the form time that we've set.
02:55
So we're just doing a lot of filtering and plucking. You can add helper methods here if you need to. So from that slot, that first slot that matches the time that we've just chosen, we're going to pluck out the employees.
03:07
And I'm just going to grab the first available one. Again, you can add any kind of custom logic in here to pick this out if you need to. So now that we've done this, that's going to set that employee and our Livewire template should be updated. So let's go through the whole flow again.
03:23
So let's go back. I'm going to choose hair. I'm going to pick a date. We'll just say today.
03:27
Click on here. And there we go. Great. That employee has now been set.
36 episodes•3 hrs 4 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 Livewire, 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 Livewire!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!