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
36. Cancelling appointments
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
So how do we cancel an appointment?
00:01
Well, we've already taken into account the cancel.date when we are checking for availability. So if we just remind ourselves over on our service slot availability, when we checked out appointments,
00:15
so let's go up here, we took where null canceled out into account. So really, all we're going to need to do here is head over to Appointment Show,
00:23
create our method in here, which cancels the appointment. So let's create a cancelAppointment method. And all this is going to do is update that with a cancel.date.
00:35
So let's go and say thisAppointment.update, and we will just pass in the cancel.date, and we'll just set that to now. Now, the reason I've done canceled.at
00:46
is because we can see then when it was canceled, but also we can create a helper over on our appointment model and check if it's canceled or not. So let's do this just down here, and let's create out canceled.
01:01
And all we want to do is return here if canceled.at is not null. That's all we need to do, but we've also got a record of when it was canceled as well.
01:12
So I always do this with dates for things that would normally be Booleans. OK, so what we can now do is, first of all, show whether it is canceled.
01:21
So let's just refresh this and cancel this latest appointment. OK, and we can come over now to the appointment show, and we can add a ternary in here. So let's grab this text.
01:35
Let's say appointment canceled. Then we're going to show canceled. Otherwise, we will show this text here, and let's just escape that.
01:50
OK, so we should see canceled now. That's it. Now, we shouldn't see this if it's canceled, because we've already canceled it.
01:57
So we'll wrap an if statement around here, and then we'll go ahead and hook this up. So if the appointment is not canceled, then we want to show this form.
02:09
And that if, and there we go. Great. So let's uncancel this by making that null. There we go.
02:18
So the whole state switches. So when we click on this, we want a confirmation. So let's do this with Alpine. So let's say xdata, and let's say x on submit prevent.
02:31
And let's go ahead and call a, not wire, let's get rid of that. Let's call a method directly on here. So we'll just say cancel appointment like this, and that should work for us as long as we invoke that.
02:45
So let's just check this out and hit cancel appointment. And yeah, it gets canceled. But in between that, because we're now using live wire, now using Alpine for this component,
02:55
we can actually do an if statement in here. So let's just do a really rough inline if statement, and say if window confirm, are you sure? Then it will only go ahead and cancel it.
03:08
So let's go over and see the difference now. Cancel appointment, I'm going to not do that. And then I'm going to accept it, and yeah, sure enough, it gets canceled.
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.