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

14. Building the service availability generator

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 so far we have built up the ability to check the periods that an employee can work. We've built up our slot generator that allows us to generate just an empty list

00:11

of slots that we can start to fill in and then filter out. Now we want our main class, which is going to be responsible for taking in one or more employees, a service, and then giving us back these slots that we built up, filled in and filtered with that data.

00:29

OK, so let's get started on this. We're going to just start to build up the very basics of this so we can understand how this is going to work and then we'll go in and start to fill in all the filtering stuff later. OK, so let's go over to our bookings

00:41

folder where we're putting pretty much everything. And I'm going to call this service slot availability because it gives us the availability for a service and the slots for that based on employees. OK, let's go ahead and just pull this in.

00:56

With our namespace and service slot availability, and this is going to be pretty much identical to the availability we had for our employees. So let's create our constructor here.

01:10

But let's also add in a for period method inside of here. And we know that is just going to take in. A start date. And an end date, pretty straightforward.

01:26

So let's do nothing with that for now. And we know that to calculate availability, we need an employee and a service, but we're actually going to accept in a collection of employees and one service. So into the constructor, let's go ahead and pass in a collection.

01:43

Of employees. And that could be an array, it doesn't really matter, and we'll pass in a service as well, and we'll just make that protected here. And let's put in our collection class here.

01:56

And there we go. Great. OK, so let's figure out how we're going to use this again. We'll just do this with our web routes. We'll be writing tests for this a little bit later.

02:04

And let's new this up. So let's say availability, service slot, availability, new this up. We're going to pass in a collection of employees and then we're going to say for period and let's go ahead and choose a period now.

02:19

So I'm going to say now start of day. And then we're going to say now add day end of day. And of course, this is going to work, even if it's in a week's time, it will give us the availability for a week.

02:33

OK, so in terms of the collection of employees, let's just grab. All of the employees, actually, so we could just grab. Every single employee. And just directly.

02:50

Pass them into there, although if you just had one employee, you could change it around. And of course, we want to pass in a service as well. So let's just grab out, I think, the only service that we have at the moment.

03:01

Which is hair, and that's 30 minutes, and let's pass that service into there. OK, great. So give that a refresh. Of course, nothing happens. But now we can start to build this up.

03:11

Now, the first thing that we want to do is generate that initial list of empty slots so we can start adding the employees that are available at that time. So to do that, we're just going to use our slot range generator that we built up here.

03:24

So let's go ahead and grab this and put this directly into here. We'll grab the generation of this. And of course, that should work in exactly the same way and give us back that collection of the dates that we've

03:33

requested and all of the slots. Now, the moment is not the dates we've requested because we're hard coding in to hear them dates. But now we can take the date that we want to see and pass that directly in.

03:45

So we'll say starts out and we will say ends up. OK, so that's going to look exactly the same. But now if I want to check a week of availability, that's not a problem. So we can come over to here and we can say add week.

04:02

And I want to check the availability for a week. That gives me every date from now into the future, obviously within a week period, and then it will have exactly the same things inside of it, all of the slots. So I'm going to switch that back to just

04:16

adding a day on so we can check two days at a time. And then over here, let's just change this around a little bit. I'm going to call this range just to make it a little bit more obvious. Generate that out here.

04:30

And of course, this value here isn't going to be 30. It's going to be the duration of the service. So this service duration. So again, let's just die dump on the range here and let's give that a refresh

04:44

and we should get exactly the same thing because our service is 30 minutes. But let's go ahead and bump that up just so we have a few less slots in here. So I'm going to go over to the hair service and let's set that to 45 minutes. And it's a weird number as well.

05:01

Forty five. So we can do some testing. OK, so now we have significantly less slots because the duration of the service is longer. OK, so now that we have got them slots

05:13

generated for that period that we're requesting and for that service that we're requesting, we now want to iterate over all of the employees so we can check their availability and then add them into the slots that we've generated just here. So we're just going to go ahead and say this employees each.

05:28

So that's a collection. So we can very easily do an each on that. And of course, for each of them iterations, we get an employee through in here.

05:38

We're not going to do anything in here just yet, but we will talk about exactly what we need to do in here to the first thing that we need to do is get the availability for the employee. And we can do that with the availability

05:52

class that we built up earlier that gave us that period. Then what we can do is go ahead and remove appointments. From the period collection,

06:05

so we get back the availability period collection from that employee, we find that already booked appointments and we remove them, which obviously we need to do because we don't have availability for an appointment that's been booked in, then we're going to add the available employees to the range,

06:26

which we've called range here, which is the slots. Let's call this let's call this range. So at the available employees based on their availability and their appointments, and then we're going to remove

06:40

any empty slots, e.g. slots that can't be fulfilled. So if no employees are available for a day, we'll end up with zero slots. If only one slot is available, all the others will be unavailable, including the ones that start from midnight and go past the usual schedule.

06:56

OK, so that's pretty much it. Let's go to the next episode and work on grabbing the availability for each of these employees. And we'll work on the other bits as we go through.

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!