Build an Appointment Booking System With Inertia

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

16. Removing empty slots

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

02. A fresh Inertia project with Pest

02. Core functionality

03. How we build up availability

04. Employees and services

05. Employee schedules and exclusions

06. Setting up appointments

07. Working with date periods

08. Iterating over requested days in a period

09. Adding schedule availability

10. Subtracting employee schedule exclusions

11. Excluding time already passed

12. Writing tests for schedule availability

13. Generating slots

14. Building the service availability generator

15. Adding employees into slots

16. Removing empty slots

17. Removing slots with booked appointments

18. Using a custom date collection

19. Writing tests for service availablity

03. Building the booking UI

20. Employee and service resources

21. Listing employees and services

22. Showing services for an employee

23. Scaffolding the checkout

24. Making an employee optional

04. Building the availability calendar

25. Rendering the datepicker

26. Fetching availability

27. Disabling unavailable dates

28. Showing the first available date

29. Fetching future availability

30. Showing slot count on the calendar

31. Fixing up core availability in the past

32. Showing available slots

05. Booking appointments

33. Hooking everything up to a form

34. Setting an employee for the service checkout

35. Adding booking details

36. Storing an appointment

37. Handling appointment collisions

38. Showing the confirmation page

39. Cancelling an appointment

Transcript

00:00

OK, so we've added employees into slots based on each of these employees availability.

00:04

That is all done. Let's go ahead and just remove any empty slots just to clear things up before we start to remove any slots based on when appointments have already

00:15

been booked. OK, so down here, we're going to go ahead and just call another method just to, again, filter through everything.

00:22

And let's call this remove empty slots. And what we want to do is reassign the range. So this is going to take in, of course, the range itself. And then it's just going to return that range

00:34

and then reassign it back to that before we return it inside of here. And we don't want to do this within the loop because we only need to delete any empty slots once

00:44

after all of the employees have been added. OK, let's go ahead and create this method out just down here. So remove empty slots. And we know that that is going to take in a Laravel

00:53

collection. And that is going to be our range. OK, let's add in our function definition there. And we're done.

01:00

OK, so what we're going to do here is immediately return this range. But we're going to filter this out. So this shouldn't look any different.

01:07

We should see everything that we saw before. But now what we can do is go ahead and use filter. Because we're working with a collection, we can use this filter method, which

01:16

takes in a condition within here. So we can return false, for example. That's going to get rid of everything. Now, the good thing about this filter

01:26

is we're going to look inside of each of the slots. But this will also, if all of the slots within a date are removed, the date will be removed as well, which is really good.

01:34

We don't want to see any dates available if there are no slots for that particular day. So if Alex and Mabel both didn't work on Saturday and Sunday, that date would just be unavailable.

01:45

It wouldn't be in there, which is exactly what we need. OK, so now that we've done this, let's actually make this work. So each of the things that we get in here is a date. So let's go ahead and bring that in.

01:55

And inside of here, we're going to reassign the slots to a filtered version of the slots. Now, what that means is we're filtering the slots. But then out of here, we're also filtering the dates,

02:06

which is what I just mentioned. So let's go ahead and filter on the slots here. We'll go ahead and bring in each of them slots. And what is the condition?

02:15

Well, the condition for a slot being available is if there are employees within that slot. So what we could do is open up our slot class and just create our helper method in here called hasEmployees.

02:29

And we could return if this employees is empty. So if it's not empty, it does have employees. So in here, we're going to return slot hasEmployees. And we're done.

02:43

That will have filtered out all of them slots. So now in here, we're just going to return true. And we should be good. Now, yeah, so I think, actually, the best way to do this

02:53

is to keep the date in there, because we want that to be added to the calendar. But then we could just show a grayed out version of the calendar if that's not available.

03:03

So if I give that a refresh, both dates are available here. Now, that should have filtered that down massively. So today, for example, again, right now, it's just about coming up to 3 o'clock.

03:14

So we should have this slot available, which is 3 o'clock, of course. And the employees within here that can do that are Alex and Mabel, and then so on and so forth. So them slots are both available.

03:28

If we look at this date here, we've got 16 slots, because, of course, that's tomorrow. We don't have any bookings yet. We've not filtered bookings out.

03:36

So all of these slots are available from 9 o'clock. And of course, both employees can do this as well. Now, what we could do is just to test this out, add in a schedule exclusion for both of these employees.

03:49

So I'm going to go ahead and say that, let's say, tomorrow. So let's say the 31st from 9 in the morning till 5 for both employees. And we come over. We've got this date here.

04:10

And sure enough, we have no slots available. So we will keep the date in there. At least then we can add it to the calendar, but we can gray it out if there aren't any slots available.

04:19

I think that makes more sense. OK. So we've now got a much more filtered down version of all of our dates that we've requested and all of the slots in there that we can do.

04:29

So I'm just going to go ahead and get rid of these exclusions here. We can always add them back later. And next, let's look at filtering out dates or slots where appointments have already been booked.

39 episodes•5 hrs 0 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 Inertia (using Vue), 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 Inertia!

Alex Garrett-Smith

Alex Garrett-Smith

Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!