Build an Appointment Booking System With Livewire

Sign in Get started

This episode is for members only

Sign up to access "Build an Appointment Booking System With Livewire" right now.

Already a member? Sign in to continue

Playing

36. Cancelling appointments

Episodes

0%

Your progress

Total: 3h 4m
Played: 0m
Remaining: 3h 4m

Join or sign in to track your progress

01. Introduction and setting up

01. Introduction and demo

02. A fresh Laravel app

02. Database setup

04. Creating employees and services tables

05. Employee schedules and exclusions tables

06. Creating the appointments table

03. Displaying employees and services

07. Displaying employees and services

08. Showing all services by an employee

04. Core functionality

09. How we build up availability

10. Working with date periods

11. Iterating over requested days in a period

12. Adding schedule availability

13. Removing schedule exclusions

14. Excluding time already passed today

15. Generating slots

16. Using a custom date collection

17. Building the service availability generator

18. Adding employees into slots

19. Removing empty slots

20. Removing slots with booked appointments

05. Building the checkout

21. Scaffolding the checkout design

22. Making the employee optional

23. Loading availability

24. Building Alpine plugins

25. Showing the calendar

26. Locking unavailable dates

27. Showing the slot count on the calendar

28. Updating the selected date

29. Showing time slots

30. Setting a time slot

31. Finding an available employee

06. Booking appointments

32. Taking customer details

33. Re-checking availability

34. Creating the appointment record

07. Appointment confirmation

35. The appointment confirmation page

36. Cancelling appointments

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.

Episode summary

In this episode, we go over how to cancel appointments in our app. We start by reviewing how appointment availability is handled, paying special attention to the canceled_at field. That way, already canceled appointments are excluded from being booked again.

We then add a new method called cancelAppointment inside the appointment show component. This method simply updates the canceled_at field with the current timestamp whenever the appointment gets canceled. This gives us the ability to not only check if an appointment is canceled (by seeing if the date is set) but also to see when it was canceled.

To make our UI reflect these changes, we add logic to show a 'Canceled' status on appointments that have been canceled, and hide the cancel button in those cases. We also add a confirmation dialog using AlpineJS so users don't accidentally cancel appointments.

By the end of the episode, canceling an appointment updates the state, shows a confirmation, and dynamically updates the UI to reflect the change. It's a nice clean way of handling canceled appointments while keeping the user interface friendly and safe against mistakes.

Episode discussion

No comments, yet. Be the first!