This episode is for members only
Sign up to access "Build an Appointment Booking System With Inertia" right now.
Get started
Already a member? Sign in to continue
Playing
04. Employees and services
Episodes
02. Core functionality
03. How we build up availability
7m 55s
0%
04. Employees and services
7m 39s
0%
05. Employee schedules and exclusions
7m 53s
0%
06. Setting up appointments
5m 34s
0%
07. Working with date periods
10m 4s
0%
08. Iterating over requested days in a period
4m 51s
0%
09. Adding schedule availability
15m 38s
0%
10. Subtracting employee schedule exclusions
7m 53s
0%
11. Excluding time already passed
2m 57s
0%
12. Writing tests for schedule availability
19m 50s
0%
13. Generating slots
14m 47s
0%
14. Building the service availability generator
7m 5s
0%
15. Adding employees into slots
9m 44s
0%
16. Removing empty slots
4m 42s
0%
17. Removing slots with booked appointments
6m 44s
0%
18. Using a custom date collection
3m 34s
0%
19. Writing tests for service availablity
18m 42s
0%
03. Building the booking UI
04. Building the availability calendar
25. Rendering the datepicker
6m 51s
0%
26. Fetching availability
9m 16s
0%
27. Disabling unavailable dates
6m 25s
0%
28. Showing the first available date
2m 4s
0%
29. Fetching future availability
10m 4s
0%
30. Showing slot count on the calendar
9m 1s
0%
31. Fixing up core availability in the past
2m 34s
0%
32. Showing available slots
5m 49s
0%
05. Booking appointments
Transcript
00:00
OK, let's start with the easiest part of this, which is the employees, the services, and which services they can perform, which will
00:06
be linked via a pivot table. So let's get started on our employee. So we're going to go ahead and make out a model in here called employee.
00:14
And we'll generate a migration and a factory alongside that. The factory is super important because, of course, we need to test this. OK, so let's work on the schema first of all.
00:22
So let's go over to our create employees table schema. And let's just add some really basic information about each of our employees. So we're going to go ahead and add in a name.
00:33
We were going to add a slug as well because within the URL, we're going to use slugs for this. So let's say unique slug. And we also want in a profile photo URL as well.
00:45
So let's say profile photo URL, which we'll go ahead and add in as well. OK, that was pretty much it for the employees. Let's go ahead and just migrate this.
00:53
OK, so we now have our employees table. Let's just add in a couple of employees in here just to test things out. So I'm going to add in a name, a slug.
01:01
For the profile photo URL, I don't know what that's going to be yet. So we'll just fill in everything else. And let's go ahead and just duplicate this down and add
01:09
in another employee, again, with no profile photo. OK, so next up is going to be the services table, which is just as easy, to be honest. And later on, we're going to add in some money formatting stuff
01:21
so we can make this better. So let's go ahead and make out another model. And of course, that's going to be a service, again, with a migration and a factory as well.
01:30
So let's go over to create our services table. And again, we're just going to have a really simple title for this. We're going to have a slug again.
01:41
And that is going to be unique. And we're going to have a duration. So let's choose an unsigned integer here and set that to be the duration.
01:51
That's going to be in minutes. So 30 will be 30 minutes. And then we're going to have another unsigned integer in here.
01:58
And that is going to be the price. Now, the reason that is an integer is because for the price, we're going to add this in as a cent or a pence unit.
02:07
And then we're going to format that properly with the Laravel money package. But we'll get to that later when we work on the UI. OK, so that's pretty much it for our services.
02:16
Again, let's go ahead and run our migrations to get that in the database. And we should be good. We should now see our services.
02:24
So again, let's just add a couple of example services in here just so we can see how this works. So I'm going to say hair, set the slug, duration I'm going to set to 30.
02:35
Price, we'll just add anything in there for now. It doesn't really matter. And let's go ahead and save that out. And let's duplicate this down.
02:42
And let's add in another service in here. Again, doesn't really matter what it is. We'll reduce that. And we'll just keep the price and the created update
02:51
the same. OK, so now we need to work out which employees can perform which services. And we can do this very easily with a pivot table in Laravel.
03:00
So we're going to create out a custom migration in here. And we're going to create an employee service table. So we can choose which employees can perform which services. So let's go over to that migration, create employee
03:12
service table. And really all we need to do in here is add two foreign IDs. So we need a foreign ID for the employee ID. And we'll go ahead and make sure that's constrained
03:24
so we know that it exists, and a service ID. So we can choose Alex ID 1 can perform hair, so the service 1, and so on and so forth. So let's go ahead and run phpArtisanMigrate on this.
03:38
And we should be good. So let's fill this in, and then we'll just play around with this. This might be pretty obvious to you if you've worked with Laravel relationships before.
03:46
But if not, this should hopefully make sense. So I'm going to say Alex can perform service 1, which is hair. And Alex can also perform service 2, which is beard. But I'm going to add just one more in here
04:01
to say that Mabel, employee ID 2, can only perform service 1, which is hair. So that's all good. OK, so now that we've got these in there,
04:10
let's go over to our models just to create the relationships for this. And then we'll just start to dump some details out. So we'll go over to our employee first.
04:18
And for this, we want to use that pivot table to show which services we can perform. So let's go ahead and say services in here. And we're going to return this belongs to many.
04:29
And it belongs to many services. And because of the way that we've named these tables, Laravel will work out what it needs. We've got employee in alphabetical order
04:39
and then underscore service. OK, so there we go. And we can do the same with the service as well. So we can find out from our service
04:48
which employees can perform this particular service. So we can do exactly the same relationship and say belongs to many and employee. So we can work out the inverse of that as well.
05:02
Great. OK, let's just do a little bit of dumping just within our web roots. It doesn't really matter where we do this just
05:08
to test this out. So I'm going to go ahead and grab out an employee here. And I'm going to find employee 1. And I'm going to dump the employee services
05:18
that we can perform. So let's go over to the browser and give this a refresh. And as you can see, Alex, ID of 1, can perform these two services.
05:26
That works really nicely. Of course, if we find employee 2, Mabel, she can only perform one service. So that's working really nicely.
05:34
We could add tests for this. But generally, with relationships, I don't like to. We're just really going to be focusing on testing the core functionality of actually
05:42
building everything up. OK, so now that we've got them in there, we now know which employees can perform which services, which works out really well when we are calculating things out.
05:52
Now, just before we go, let's go ahead and fill in our factories so when it comes to testing this kind of stuff, we can easily generate these out. So we're going to go over to our database section
06:02
under factories. We've got these two factories created. So for the employee factory, we just want to fill out some really basic information about this.
06:10
And then when it comes to our tests and generating out fake data, this works really nicely. So we'll go ahead and add in a name here. And at the same time as generating this out,
06:20
I'm going to assign it so we can easily generate the slug. We'll use the fake helper here. And we'll just grab a first name. So now we've got that variable name defined.
06:30
We can create a slug out directly from this. So we can just use the string helper. And we can slug out the name. And that will give us just the slug version of that name.
06:40
Now for the profile photo URL, it doesn't really matter if we have a profile photo URL for testing. But this does need to be filled.
06:47
So we're just going to say fake and image URL. And that will just generate a random image URL for us. We're not going to use that in our tests. But at least we have it in there.
06:56
OK, so we're going to do the same for the service as well. Now with this in our test, we're going to want to be really careful and generate out specific durations for our services.
07:07
So again, we really just need the basic information in here. So let's add in a title for our service. And again, I'm just going to hard code this to hair. And I'm going to do the same thing for the slug as well.
07:18
So we'll just string slug the title here. And we're just going to set the price in here to say $0.00. So if we look at our database, we're filling in the title, slug, and price.
07:29
But the duration is going to be left empty. So when we create our tests out, we'll choose that specific duration to make sure that all of them slots are being generated properly.
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
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!