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

33. Hooking everything up to a form

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

In this section, we're going to cover the entire appointment

00:02

booking flow. The first thing we need to do is start to hook up some of the items that we have on the page to a form so we can actually submit this

00:09

through to the back end. So let's work on the basics, and then we'll go ahead and cover the details and also selecting a slot in the service-only checkout.

00:18

We'll do that in the next few episodes. OK, so the first thing that we want to do is bring in our form from Inertia. So let's bring in our Use Form Helper.

00:29

And then just underneath our props here, let's go ahead and define out a form using that form helper. Now, what are the things that we need to send through? Well, we need to know the service ID.

00:39

That's pretty straightforward. And we can grab that from the props. We know that's always going to be available. So we're just going to say props.service.id.

00:47

The next one is the employee ID, which, as we know, may not be available. We might have a employee or a service-only checkout, in which case the employee won't be available.

00:59

So I'm just going to go ahead and access this as if the ID might not exist. The next thing is going to be the date time. That comes from our slots.

01:07

Remember, that contains the date and the time. So we can just easily send that through to the back end and book that for that particular date and that time as well.

01:16

So this is just going to be a null by default. And then a little bit later, we're going to have a name and an email address, but we'll do that in the next episode.

01:24

OK, so let's focus on hooking these up. To do this, I'm just going to go ahead and dump out the form at the very top of the page. So let's come down to our template.

01:33

Always helps to just dump this out so we can see exactly what we have. So at the moment, we've got a service ID of 1 and an employee ID of 1.

01:40

And if I just get rid of the employee here, you can see that the employee is not in there as well, which is great. That's exactly what we want.

01:48

We could even specifically set that to be a null value if this doesn't exist, just so it stays within the form. Otherwise, it's just going to go. OK, so let's hook up this date time.

01:58

That's probably the most important thing. And then in the next episode, we'll look at choosing an employee if they're not available. So when we click on either of these,

02:06

nothing is happening at the moment. So let's go down to the part where we're iterating over our slots. And we will go ahead and hook this up.

02:14

So basically, this is just a div at the moment. We probably want this to be a button. It's probably a little bit more appropriate. And then when we click on this, so let's add a V on click

02:24

handler here, we want to go ahead and set that form date time to the date time that we have within this slot. So we'll just say form date time. And we can just set this like normal.

02:34

So this is the slot date time. So that's as easy as it gets to assign that to our form. Let's go ahead and try this out. And I'm just going to click on any of these.

02:43

And you can see at the moment, we get a refresh. The reason for this is just that we have a button within a form. And we haven't explicitly set a type of button on this. So it's actually submitting that form, which we don't want.

02:54

So let's click on this. And there we go. Sure enough, it sets the time slot and the date that we have selected.

03:00

If we choose a different date here, you can see that the date changes over as well. So that's working really nicely. So finally, let's just go ahead and highlight this just

03:08

to show that this is the slot that's been selected because at the moment, we don't have any visual indication as to whether this has been selected.

03:16

So we can bind in a class in here. And we can use an object to set a particular background. So let's go ahead and just change the background to the background that we have on hover

03:26

if we have this selected. So basically, we just want to compare the form date time to the slot date time. And if it matches, then we're going to set that background.

03:37

OK, let's go over and have a look at this. And you can see, yeah, sure enough, it does highlight it. Maybe we could make this a little bit darker. So let's actually change this over to BG Slate 100.

03:46

And then the only issue we're going to have here is that when we hover over it, we still have that hover effect. So we can either do another condition on here,

03:54

or we could just completely replace the hover. So we could say on hover, we want this to have a background of Slate 100 as well. And then when we hover, it just stays the same color.

04:04

OK, so now let's just go back to the start of our app. And let's go ahead and choose a professional and the service. We already get these populated, which is great. We choose a date time.

04:17

And that's pretty much everything we need to make a booking. We'll fill in these later. But the next thing that we're going to focus on

04:23

is if we don't have an employee, when we select one of these slots, we want to fill in and refresh the page to fill in the employee that we want to perform that service.

04:33

And that will just be getting the first available employee that can fulfill that. So let's cover that in the next episode. And then we can move up to finish out our checkout.

Episode summary

In this episode, we're getting hands-on with the appointment booking form. The main focus here is to start hooking up all the key pieces of information into a form, so we can eventually send through a booking to the backend. We set up the form using Inertia's useForm helper and make sure it can handle things like the serviceId, employeeId (which is sometimes missing if you don't pick a specific employee), and the all-important dateTime slot that the user selects.

You'll see a quick demo of dumping the form's data out to the template so you can watch the values update live. It's a handy way to check everything is wired up correctly, especially as we set up how selecting a time slot updates the form's dateTime. There's also a UX polish: whenever you click a slot, it gets visually highlighted so users know exactly which slot they've picked.

We talk about making sure the form works nicely even when the employee isn't specified, and wrap up with a preview of what's coming next: handling cases where no employee is picked and defaulting to the first available one. By the end of this episode, the core interactions for booking are all hooked up, just waiting for the user's name and email which we'll tackle in the next part!

Episode discussion

No comments, yet. Be the first!