Build an Appointment Booking System With Inertia

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

39. Cancelling an appointment

Episodes

0%

Your progress

Total: 5h 0m
Played: 0m
Remaining: 5h 0m

Join or sign in to track your progress

01. Introduction

01. Introduction and demo

02. A fresh Inertia project with Pest

02. Core functionality

03. How we build up availability

04. Employees and services

05. Employee schedules and exclusions

06. Setting up appointments

07. Working with date periods

08. Iterating over requested days in a period

09. Adding schedule availability

10. Subtracting employee schedule exclusions

11. Excluding time already passed

12. Writing tests for schedule availability

13. Generating slots

14. Building the service availability generator

15. Adding employees into slots

16. Removing empty slots

17. Removing slots with booked appointments

18. Using a custom date collection

19. Writing tests for service availablity

03. Building the booking UI

20. Employee and service resources

21. Listing employees and services

22. Showing services for an employee

23. Scaffolding the checkout

24. Making an employee optional

04. Building the availability calendar

25. Rendering the datepicker

26. Fetching availability

27. Disabling unavailable dates

28. Showing the first available date

29. Fetching future availability

30. Showing slot count on the calendar

31. Fixing up core availability in the past

32. Showing available slots

05. Booking appointments

33. Hooking everything up to a form

34. Setting an employee for the service checkout

35. Adding booking details

36. Storing an appointment

37. Handling appointment collisions

38. Showing the confirmation page

39. Cancelling an appointment

Transcript

00:00

OK, so let's look at cancelling an appointment.

00:02

The first thing we'll do is get this button on the page. We will send a request through to cancel this, and then we're going to update the UI to show that it's in a canceled state.

00:11

OK, let's go ahead and just add a button down here then. So we'll just make this really simple and just say cancel appointment. Give this a style, and we'll just set the text to blue 500.

00:24

And there we go. We have a very simple button. OK, so we're going to hook this up to a function up here. So let's just call this cancel.

00:32

And we'll go ahead and use a router request to send this through. So let's go ahead and import our router from Inertia. Of course, we don't have our controller yet,

00:44

but we're going to say something like router delete. And then we're going to go through to a route like appointments.destroy. And of course, passing in the appointment

00:57

which we grabbed from our props. So we want it to look like that. And that is pretty much what we need to do. So let's go ahead and build out the controller for this.

01:06

So let's make out a controller. Of course, call this appointment destroy controller. We'll register the route for this, and it's going to be a really simple update.

01:16

So let's grab one of these, switch this over to delete. Still keep the same URL, but of course, just switch this over to the destroy controller and change this to destroy.

01:28

OK, so inside of here, this is incredibly straightforward. All we want to do is set the canceled out date to the current date and time. So we'll grab our appointment in with route model binding,

01:40

go ahead and update it. So let's just say update. And we'll set the canceled at to now, which will just give us the current date and time.

01:50

And then we're just going to return back. That's pretty much what we need to do. So let's go over and just hook this up. Let's go ahead and hook this up to actually click through

01:59

to it. So let's say V on click, and we'll say cancel. And we should be good. So let's click on this, go over to the database,

02:07

and yeah, sure enough, it's been canceled. So a couple of things we want to do. First thing is we want some sort of confirmation. We'll keep this really, really simple for now.

02:16

But of course, you could integrate some other kind of modal or dialogue to confirm this. I'm just going to use a window confirm for now, and just say, are you sure?

02:28

And if this is canceled, so if the user cancels this, we're just going to go ahead and return. So really simple. Now when we click on this, if we hit cancel,

02:37

that is not going to be canceled. Otherwise, if we hit OK, sure enough, that gets canceled. OK, so this appointment has been canceled. We need to know whether it's been canceled,

02:46

and then we're going to change up the UI. So over in the appointment resource, let's go and add in a canceled value to here. And we basically would just want to check

02:55

if the canceled date is not null. So let's just say this canceled at, because remember, that's a nullable column. And now we can use this just to swap around the UI.

03:05

So the first thing we'll do is change the text over here. So let's just do this in a ternary. So if the appointment is canceled, we will just show some canceled text.

03:15

Otherwise, we'll go ahead and show, thanks, you're booked in. So as you can see now, it says canceled. And the last thing we'll do is just go ahead and get rid of the cancel button.

03:24

And of course, you can go ahead and change this up to what you need. So let's go down to where we have our button here. And we'll just say the if not appointment canceled,

03:36

then we want to show that. So there we go. We have a canceled state. Let's switch this back just to see how

03:41

this looks in the entire flow. When I click on this, I can cancel. Otherwise, our appointment gets canceled. Great.

Episode summary

In this episode, we're tackling how to let users cancel an appointment in our app. First, we add a simple "Cancel Appointment" button to the UI and style it so it stands out. Then, we wire it up so when it's clicked, it triggers a function to send a DELETE request using Inertia's router to our backend.

On the backend, we build a new destroy controller method that marks the appointment as canceled by setting a canceled_at timestamp. After that, we make sure to register this new route, so everything's hooked up properly.

To keep things user-friendly (and to prevent accidental cancellations), we add a quick confirmation step using window.confirm. If the user confirms, we proceed; if not, nothing happens.

Once an appointment has been canceled, we update the frontend to reflect its new state. This includes showing "canceled" text instead of the booking confirmation, and hiding the cancel button so users can't cancel it twice. We walk through the entire flow, from clicking cancel to seeing the UI update, showing how it all works together.

By the end, you'll have a clean and clear way for users to cancel appointments, complete with confirmation and real-time UI updates!

Episode discussion

No comments, yet. Be the first!