This episode is for members only
Sign up to access "Build an Appointment Booking System With Laravel" right now.
Get started
Already a member? Sign in to continue
Playing
34. Handling appointment collisions
Episodes
01. Introduction
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
05. Booking appointments
31. Hooking up customer appointment details
5m 17s
0%
32. Disabling future steps
2m 43s
0%
33. Storing an appointment
14m 43s
0%
34. Handling appointment collisions
8m 1s
0%
35. Redirecting to a confirmation page
2m 55s
0%
36. Building the appointment confirmation page
5m 40s
0%
37. Cancelling an appointment
5m 30s
0%
Transcript
00:00
When we're creating appointments,
00:01
there's a chance that two appointments for the same slot and same date can be inserted into the database. So what we're going to do to mitigate this
00:09
is at the appointment controller level, whenever we are inserting an appointment, we're going to check that this is available. There's a couple of ways that you could do this.
00:17
You could hook into an Eloquent event for the actual creation itself and throw an exception or something like that. But since we're trying to keep things simple,
00:26
we could just do a really basic if statement here to check the availability again before every single appointment is created and then just throw an error and show that on the client side.
00:36
That's exactly what we're going to do now. So we're pretty much going to do exactly the same thing as we have over on our checkout controller and just use our service slot availability class
00:48
again to just detect the availability. So let's go ahead and just pull this over. We are collecting up the employee. We don't have the employee at the moment.
00:56
We just have the employee's ID. So just up here, let's also go ahead and find the employee by the employee ID, which remember is already validated. So it's all good.
01:08
Add that in here. We've already got the service because we're using that. And then we're going to check the specific period that we want as well.
01:15
So the period is going to be on the carbon pars request date and the start of the day. So we're going to grab all slots for that day so we can make sure that the slot that the user's requesting
01:27
is within this. And we'll go to the end of the day. You could even narrow that down as well. But since this is really fast, it doesn't really matter.
01:35
It's not going to add any extra load. OK, so now we've got that availability stuff in there. We want to check in there if a slot actually exists already. And it's free.
01:45
So let's go and start out if statement. And we don't really have a nice way to do this at the moment. But let's just write this out how we'd want this to look. So we're going to go and say availability first, which,
01:56
remember, will bring us back our date object with all of our slots in which we can check within. So that's all good. And we want to say something like contains slot and then
02:07
parse in the time. So if the availability doesn't contain this slot, here we want to throw an error. So basically, if the slot is not free,
02:20
throw an error or return a response that we can handle. So we don't have this contains slot method over on our date here. So let's go ahead and just build this in now.
02:29
So let's create out a contains slot helper here, which is pretty handy. And we're going to accept into here a time. And we might as well just type in this to a string
02:38
because it's always going to be a string. So to do this, we're going to go and search in the slots within this date. So we can actually use the search function or the method
02:47
on our collection object. And we'll search inside of here. We'll get a slot back that we can use to compare. Let's bring time into scope here.
02:58
And then we basically just want to check if any of them slots that we're searching in under the time, that carbon object, if the formatted matches the slot that we've checked, then we are going
03:13
to find this returns the actual slot itself. So if this returns false or null, the slot doesn't exist. So let's go ahead and try this out and see what happens. So just here, because we're working on the client side
03:26
and sending an AJAX request, I'm going to say slot taken. Now, to test this out just in the browser without writing any kind of tests, what we're going to do is we're going to book an appointment in the database
03:40
manually. And then we're going to book the same appointment. So I'm going to get rid of this one. Let's switch this to 10 o'clock to 1030.
03:49
And we're not going to refresh the page. And we're going to try and book this specific slot. Let's make sure we go ahead and clear out our Laravel log. And let's go ahead and try and book this.
03:58
So let's book this 10 o'clock slot, which already exists. Hit Make Booking. And there we go. We get logged out, slot taken.
04:06
So that's working really nicely. All we need to do now is return a response here with a specific error code, which we can pick up from the client side.
04:14
So let's go ahead and return a JSON response here. We're not sure what we're going to put in there yet. But we are going to add in a 409 conflict in there. So in here, probably just a message or just an error key
04:28
is going to be good enough. So let's say that slot was taken while you were making your booking. Please try again.
04:37
Something like that that makes sense. OK, so now when we try and do this again, what we're going to do is get an Axios error here, because we're going to have a 409 conflict.
04:47
So over in our Network tab or just in our console, we get that 409 back, which is great. And now we can just show the error. So how are we going to do this?
04:56
Well, back over to our checkout, let's go to the point where we're booking here. And let's go ahead and catch on this Axios post to our appointments any errors that we get.
05:06
So we're going to get back a response here. And we'll just console log out the response body. And let's actually call that error. And then we'll say error.response.
05:19
I think it's data, not body. OK, and we'll log the error out as well, just so we can see that we're getting that. OK, so that's going to go ahead and refresh the page.
05:26
But what we can, of course, do is set this again to one that already exists. Let's say 10 till 11. Save that out.
05:37
And that's created a duplicate. So let's get rid of, see where we are, 10 30. So let's get rid of this one. OK, so I'm going to book that 10 30.
05:49
And just before I enter anything else, bring up the console. And there we go. Great, so that slot was taken while you were making your booking.
05:58
So now all we need to do is put this error in some sort of overall key within our Alpine component. And then if that exists, we just show an error on the page. So let's go over to our checkout.
06:09
And let's set this instead up here in an error key, which by default will be null or false. So in here, we can just say this error. And we'll set that to exactly what we console logged out
06:23
here. And then somewhere, I think probably under the your details and book section, we'll output this error.
06:33
So we're going to say x text error. And we'll say x show error. And then we'll add an x close to that so nothing shows if it's not in there.
06:42
OK, so that should be enough. Let's go over and give this a refresh. Back over to the database, change this appointment over to 10 o'clock till 11.
06:51
That's fine. Try and book for 10. And what we should now see is that error coming back, being set into that key, and then
06:59
being displayed just up here. Perfect, so it's not letting us book. Nothing is happening. But what we can now do is just style this up.
07:06
And we're done with the conflict stuff. So I'm just going to go ahead and add some really basic styles to this. Let's set a slate of 900, text white.
07:15
We'll give it the same padding as everything else. And we'll set rounded to large. And we'll set a margin bottom of 3 so it doesn't hit that. Or let's do that at the top.
07:26
I think that's fine. Yeah, that'll be OK. OK, so let's try this one more time. And we should see the error in there nicely.
07:32
So let's change that to 11 till 12. We'll try and book the 11 o'clock slot. And obviously, that's being checked behind the scenes. So now, there we go.
07:43
Your slot was taken while you're making your booking. Please try again. Of course, feel free to change that and style it up how you want.
07:48
But the most important thing now is whenever a booking is made, an appointment is made, before we do that, we're checking for slots that are already in there or don't exist and showing an error message.
37 episodes•4 hrs 49 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 build a simple UI with Alpine.js, with 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 Laravel!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!