Build an Appointment Booking System With Livewire

Sign in Get started

This episode is for members only

Sign up to access "Build an Appointment Booking System With Livewire" right now.

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

01. Introduction and setting up

01. Introduction and demo

02. A fresh Laravel app

02. Database setup

04. Creating employees and services tables

05. Employee schedules and exclusions tables

06. Creating the appointments table

03. Displaying employees and services

07. Displaying employees and services

08. Showing all services by an employee

04. Core functionality

09. How we build up availability

10. Working with date periods

11. Iterating over requested days in a period

12. Adding schedule availability

13. Removing schedule exclusions

14. Excluding time already passed today

15. Generating slots

16. Using a custom date collection

17. Building the service availability generator

18. Adding employees into slots

19. Removing empty slots

20. Removing slots with booked appointments

05. Building the checkout

21. Scaffolding the checkout design

22. Making the employee optional

23. Loading availability

24. Building Alpine plugins

25. Showing the calendar

26. Locking unavailable dates

27. Showing the slot count on the calendar

28. Updating the selected date

29. Showing time slots

30. Setting a time slot

31. Finding an available employee

06. Booking appointments

32. Taking customer details

33. Re-checking availability

34. Creating the appointment record

07. Appointment confirmation

35. The appointment confirmation page

36. Cancelling appointments

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.

Episode summary

In this episode, we tackle a key step in our booking flow: automatically assigning an available employee when someone books an appointment slot without picking an employee.

First up, we squash a little bug in our date picker. Sometimes, if you double click the input, it tries to set the date to null. We quickly patch this up by adding a simple check so our form ignores null dates. Once that's sorted, we move on to the real challenge: choosing an employee for the selected time slot.

Here's how we handle that: when you select a service and pick a time without choosing an employee, our code will scan the available slots and grab the first available employee for that slot. We walk through adding this logic, talk about how you could swap in your own custom rules (like employee priority, if you have one), and neatly pull this out into a helper method to keep things tidy.

Finally, we put it to the test—picking a service, picking a date and time, and seeing our booking flow automatically assign the first available employee. Boom—seamless checkout experience!

So, after this episode, you'll have a user-friendly appointment booking process that takes the hassle out of picking an employee, making things easy for both your users and your codebase.

Episode discussion

No comments, yet. Be the first!