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.

39 episodes•5 hrs 0 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 create an entire booking flow with Inertia (using Vue), 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 Inertia!

Alex Garrett-Smith

Alex Garrett-Smith

Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!