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

0%
Your progress
  • Total: 3h 4m
  • Played: 0m
  • Remaining: 3h 4m
Join or sign in to track your progress

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 episodes3 hrs 4 mins

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
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!