This episode is for members only
Sign up to access "Build an Appointment Booking System With Livewire" right now.
Get started
Already a member? Sign in to continue
Playing
33. Re-checking availability
Episodes
01. Introduction and setting up
02. Database setup
03. Displaying employees and services
04. Core functionality
09. How we build up availability
3m 40s
0%
10. Working with date periods
6m 54s
0%
11. Iterating over requested days in a period
3m 30s
0%
12. Adding schedule availability
11m 33s
0%
13. Removing schedule exclusions
3m 35s
0%
14. Excluding time already passed today
2m 17s
0%
15. Generating slots
11m 50s
0%
16. Using a custom date collection
1m 28s
0%
17. Building the service availability generator
6m 18s
0%
18. Adding employees into slots
8m 14s
0%
19. Removing empty slots
3m
0%
20. Removing slots with booked appointments
6m 17s
0%
05. Building the checkout
21. Scaffolding the checkout design
4m
0%
22. Making the employee optional
1m 54s
0%
23. Loading availability
8m 31s
0%
24. Building Alpine plugins
3m 18s
0%
25. Showing the calendar
3m 32s
0%
26. Locking unavailable dates
15m 1s
0%
27. Showing the slot count on the calendar
7m 52s
0%
28. Updating the selected date
3m 29s
0%
29. Showing time slots
5m 43s
0%
30. Setting a time slot
2m 43s
0%
31. Finding an available employee
3m 31s
0%
06. Booking appointments
07. Appointment confirmation
Transcript
00:00
What we're about to do now is incredibly important. Let's say that we are on this checkout. We choose the date.
00:05
We choose the time slot. We enter our details. But someone prior to us hitting that Submit button has already booked that slot.
00:13
Well, if we don't check this when we go ahead and submit this form, we're going to end up with duplicate appointments created in the database, which, of course, is not what we want. So what we are going to do is when we submit this,
00:27
we are going to use that availability method, which is a computed property, to check if there is still availability in here. If there's not, we'll redirect back with a message.
00:39
Otherwise, we'll just go ahead and create the appointment. Now, this is computed. So what we need to do, if we just head back over to our Submit method, we need to bust the cache of this
00:49
before we start to use it again. We cache this as a computed property because we want this to be really fast between requests. But we don't want this to be cached as we're checking it.
01:00
So all we need to do before we start to recheck this availability is just bust this by unsetting it. And then that will reload that data for us. And then down here, we'll have fresh availability,
01:13
including appointments that have already been booked for us to check this out. So let's just go through and write out the code that we would probably want to see.
01:22
And then we'll go ahead and fill in any helper methods within the custom classes that we've created. So if we don't have availability, so let's access availability, which is now busted,
01:35
for a date. So for date would be super helpful to be able to pass through the form date. So we get the availability for the date
01:42
that this person is booking. That might not exist. So we're going to use a null safe in here. And we want to check that that date contains a slot,
01:50
or in this case, doesn't contain a slot. And let's pass through the form time, like so. And if that is the case, then we want an error. So let's just die dump for now and just say taken.
02:03
And we can test this out by creating some stuff in the database. Otherwise, down here, we want to create an appointment. And here, we'll return as well.
02:13
We'll add that in now, even though, of course, this will cut this out. OK, this isn't going to work at the moment over on our date collection.
02:20
We don't have that for date method. So let's go ahead and create that out first. We'll dump it out and see what we get. So let's go ahead and pull in a string in here.
02:29
We'll call this date to check. And we are going to go ahead and return the first date where this matches. So we'll just say first again with a closure.
02:41
So let's create that out. And we will take in a date in here, obviously, which is why we call this date to check. And we'll return where the date to date string
02:55
equals what we've passed in, which is that date to check. And of course, make sure we pull that into scope here. And we should be good. This will pluck out the date, basically,
03:08
that we've requested, kind of like we're building up our own eloquent. We're just working with a custom collection. So let's say grab this and die dump on it.
03:20
And let's see what we get when we run this. So I'm just going to pick any slot. It doesn't really matter. Enter any details in here.
03:28
Hit Make Booking. And yeah, there we go. We get the date here with the slots in that we want. Now what we can do is build out this contained slot directly
03:38
on that date. So if we head over to our date class here, let's just create out a method in here which checks if it has a slot or not.
03:53
And that's just going to be a string with the time to check. We just want to deal with strings here. We can pass in carbon objects, but it's a little bit easier to grab these times.
04:04
So again, we're going to do pretty much the same thing. But this time, we're not going to say first, because we just want to check if it contains it. So we're going to access the slots within here,
04:13
which remember, we're storing up here in a collection. And we're just going to use contains. So just see if it contains this slot under a condition. Grab the slot here.
04:24
And we'll use that time to check. And we'll return the slot time. And remember, format it in the way that we've been formatting it everywhere, which
04:35
is to time string with minutes. And we're going to check that again to the time to check. And that should just return to us a true or false value whether or not this contains this slot.
04:46
So now we can take this entire thing. We'll die dump it out here just to check that we get what we expect. And let's have a look.
04:53
So I expect this to return true, because no one else has booked anything while I've been developing this. So let's hit Make Booking. And yeah, we get true.
05:02
Now let's give the page a refresh. I'm going to choose the 9 o'clock slot on the 27th. Enter my details, but I'm not going to submit this just yet. Instead, I'm going to head over to the database
05:13
and I'm going to create an appointment for that date. So this is the 27th at 9 o'clock. And even if it overlapped, so even if it was half past 8 to half past 9,
05:23
it still would not contain that slot. In fact, let's do that now. So let's say 8.30 to the same date, obviously. And we'll say till 9.30.
05:35
So that slot at 9 should now not be available, because I'm busy for half an hour. So let's go over, hit Make Booking, and perfect. We get false.
05:44
So because that slot has been taken while we've booked, now we know that we can return and show the user an error. There's a couple of ways that we could do this. We could flash a message.
05:53
It really doesn't matter. But I'm actually going to add an error to our form here. So I'm going to say form.time. And then I'm just going to add in that time,
06:02
or that slot was taken while you were making your booking. Try another one. OK, so now we're returning. We're adding this to the message bag.
06:15
Of course, what you could do is use session to flash a value, then put it up in your template if you wanted to. But let's treat this as a validation error instead. OK, so now that we've got that, we
06:27
can just go and add the error over to our checkout. And we should be good. So let's find out where our name is and come up to the top. And here it is.
06:38
So let's add in an error again. And we'll put all of this inside of here. And we'll say form.time. And we'll output the message that we've
06:53
manually assigned in there. Great. OK, let's go over and try this out again. I'm going to choose 10 o'clock now.
07:00
Obviously, the 9 o'clock slot's disappeared because it has been booked up. Let's go and try this out. I'm actually going to try and make a successful booking.
07:08
And yeah, that works nicely. Let's try this again. And we will go ahead and adjust that appointment. So let's head over to the database.
07:18
And let's actually create a new one. So let's create one here for 10 o'clock. Or we could do 10.30 because, again, that appointment is one hour.
07:29
So we couldn't fulfill the 10 slot. And let's do that to 10.30 till 11. And yeah, we should be good. So now I'm going to hit Make Booking.
07:39
Great. That slot was taken while you were making your booking. Try another one. Because everything got refreshed,
07:44
that slot has now disappeared. So I'm going to have to pick the next one and then make the booking. And it creates it successfully.
36 episodes•3 hrs 4 mins•3 months 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 Livewire, 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 Livewire!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.