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

19. Removing empty slots

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 let's tidy up our list of slots and get rid of any of the slots that we've got in here where there are just no employees. There's no point including these slots like at midnight when none of our employees can do this. So aside from returning the range down here which we're eventually going to need to do, after we've done everything let's go ahead and remove empty

00:19

slots. So I'm going to go ahead and call a remove empty slots method in here and let's pass our range into here so we can modify it. Okay so let's create out that method, remove empty slots and of course into here we are going to take in a date collection of our slots. We'll just call that range and then in here we want to iterate over them. We want to filter it basically because

00:42

we're working with a lot of our collection this is going to be very easy to filter. So we're going to return the filtered range and actually just up here we'll need to assign this because we're going to return the filtered value. So let's return range filter and the way this works is if you've never worked with a collection filter before we could just return false in here

01:03

like so and let's take a look at what we get. So yeah we just end up with nothing if we make sure we dump this out. So let's die dump on our availability give that a refresh and yeah we just end up with an empty collection. So not only do we want to filter out the slots we also want to filter out the days as well that's really important. So for each of these we get a date

01:25

our custom date class and what's the condition around this? Well the first thing that I'm going to do is go down here and return true just because we are going to filter out and return false for each of the slots that don't have anything and then we're just going to go and reassign the slots but filter them at the same time. So we're kind of filtering the dates but we're also filtering the

01:44

slots within them dates at the same time. So let's go ahead and say on the date that we've got let's go through the slots and filter them. So we'll end up with all of our filtered slots once we're done with this. So let's pull in our closure here pull in our slot for each of these and then what's the condition? So let's just return false for now go over we have two of our dates here but we have

02:08

no slot so we're getting there we just need this condition. So the condition of this is that the slot actually has employees so we could either do this directly using employees and empty for example or is not empty or we could say has employees and create a little helper over on our slot. So let's create that now so let's say has employees and we can very easily here return

02:34

the employees and is not empty there we go so as long as this is not empty then that's going to return. Okay let's try this out give it a refresh let's check today's date and yeah so we only have three slots of five slots available now so we have got 12 o'clock everything that we would normally expect and obviously these have employees within them that can fulfill that slot.

Episode summary

In this episode, we're cleaning up our list of slots by making sure we only show the ones that actually have employees available. Why keep midnight slots or other times when nobody is around? It just clutters up our display!

So, we start by creating a method to remove those empty slots. We use collection filtering to easily toss out any slots with zero available employees. As we go, we use some quick checks to make sure it’s working (like dumping out the data and seeing what’s left).

Next, we also make sure to filter inside each day—meaning, not only do we remove empty slots, but we also remove days if all their slots have no available employees. For this, we add a handy hasEmployees helper on the slot, which simply checks if there are any employees assigned.

By the end, refreshing the page shows us a much neater list: only the valid slots (and days) when employees are actually available. No more pointless blanks in our schedule!

Episode discussion

No comments, yet. Be the first!