Build an Appointment Booking System With Inertia
This episode is for members only

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

Get started
Already a member? Sign in to continue
Playing
38. Showing the confirmation page

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
5m 45s
0%
02. A fresh Inertia project with Pest
3m 4s
0%
02. Core functionality
03. How we build up availability
7m 55s
0%
04. Employees and services
7m 39s
0%
05. Employee schedules and exclusions
7m 53s
0%
06. Setting up appointments
5m 34s
0%
07. Working with date periods
10m 4s
0%
08. Iterating over requested days in a period
4m 51s
0%
09. Adding schedule availability
15m 38s
0%
10. Subtracting employee schedule exclusions
7m 53s
0%
11. Excluding time already passed
2m 57s
0%
12. Writing tests for schedule availability
19m 50s
0%
13. Generating slots
14m 47s
0%
14. Building the service availability generator
7m 5s
0%
15. Adding employees into slots
9m 44s
0%
16. Removing empty slots
4m 42s
0%
17. Removing slots with booked appointments
6m 44s
0%
18. Using a custom date collection
3m 34s
0%
19. Writing tests for service availablity
18m 42s
0%
03. Building the booking UI
20. Employee and service resources
9m 7s
0%
21. Listing employees and services
8m 58s
0%
22. Showing services for an employee
8m 7s
0%
23. Scaffolding the checkout
8m 37s
0%
24. Making an employee optional
3m 38s
0%
04. Building the availability calendar
25. Rendering the datepicker
6m 51s
0%
26. Fetching availability
9m 16s
0%
27. Disabling unavailable dates
6m 25s
0%
28. Showing the first available date
2m 4s
0%
29. Fetching future availability
10m 4s
0%
30. Showing slot count on the calendar
9m 1s
0%
31. Fixing up core availability in the past
2m 34s
0%
32. Showing available slots
5m 49s
0%
05. Booking appointments
33. Hooking everything up to a form
4m 42s
0%
34. Setting an employee for the service checkout
7m 30s
0%
35. Adding booking details
3m 55s
0%
36. Storing an appointment
8m 28s
0%
37. Handling appointment collisions
8m 37s
0%
38. Showing the confirmation page
8m 39s
0%
39. Cancelling an appointment
3m 49s
0%

Transcript

00:00
So let's build out a very simple confirmation page. And then we'll go ahead and redirect to this once we make an appointment so we can see confirmation
00:07
of what we've booked. OK, let's start out with a controller, of course. So let's make out a controller here. And we're going to call this appointment show controller,
00:17
just keeping convention. Let's go ahead and just take one of these, obviously switch this to get. And we're going to need the appointment to be passed in.
00:27
And we want to reference this by the UUID. OK, let's switch over the controller, appointment show controller, and of course, change the name over as well. OK, first things first, let's go and render out a inertia view.
00:41
So let's render out a confirmation. We'll just call this confirmation. Of course, we get the appointment in here, like so. And we're going to need to pass the appointment down,
00:52
but we don't have an appointment API resource at the moment. So we'll build that in just a second. So if we come down to our pages section, let's go ahead and create out a confirmation.vue file.
01:03
And let's just add in a really basic template in here with appointment. And let's see what we have. So we'll just take one of the existing appointments
01:12
and the UUIDs from that. And let's go over to appointments, slash that UUID. And sure enough, we have that in there, great. So let's go ahead and fill in our appointment API resource.
01:26
We haven't even created this yet, so let's do that now. So let's make out a resource. And of course, that's going to be an appointment resource. Let's open it up and just think about some of the stuff
01:36
that we need to add to this. OK, so let's get started. And we'll go ahead and return the ID anyway. We don't have to.
01:44
And of course, we will want the UUID in there as well, just in case we need to build up any other URLs. We want the service in here, so we're going to have to use a nested resource in here.
01:55
To do this, we just go ahead and do exactly the same as we would normally do, make that out, and then reference this service. And of course, already in the appointment controller,
02:05
we have all of that kind of stuff hooked up already. So the service is important, so we can show what we've booked. The employee is, of course, important as well, so we can see who it's from.
02:16
So let's go ahead and reference the employee relationship. And then we just want the date in here. So we want to format this in a way that we want to show out. So let's say this starts at, and let's
02:28
think about what we want to show on this page. So we probably want to show the date of the appointment, the start time, and then something like until end time. So we want to kind of split these out
02:40
so we can show them really easily without having to do all of this stuff on the front end. So the date is just going to be the formatted date, and we want it to look nice so the customer can easily
02:49
see what they've booked. So let's just say FDY, and that's going to be something like the 1st of Jan, and then, of course, the year.
02:57
OK. Next up is going to be the start time. So let's just call this start at, and let's format this in a way that we
03:04
want to see, which is just going to be the hours and the minutes. We don't need the seconds. And let's do the same for end at as well, and just swap that
03:13
over, and we should be good. OK, so now that we've got that, we can go ahead and pass this appointment down, which contains all of the information that we need.
03:21
So let's use that appointment resource to make out the appointment that we've just passed in, and that should now be available within our template. So let's go over to any of our other templates
03:33
and just grab the base layout here, go back over to our confirmation, and pull this in. So we'll pull that in there, and, of course, use define options to pull in that base layout,
03:49
and that's going to look a lot better. And then let's just pull in our props. So let's define out the props that we're accepting into here, which, of course, is our appointment.
03:58
That's going to be an object, and we'll just dump this out here so we can see that we've got all of the details, and, yeah, that looks pretty good. So now all we need to do is just style this out, and we're done.
04:10
OK, so for the top part of this, we are pretty much going to take this from the checkout. So let's just copy this over. I don't think this is worth pulling over to a new component,
04:20
but let's at least pull in this top bit here that we used, and we'll go ahead and separate all of these sections out as well like we have everywhere else. So we'll just do a space Y of 12, pull this in,
04:32
and then we'll just replace all of this stuff out. So it's just going to have all of the details. So this is now going to be appointment and employee profile.
04:41
We'll take that, and we don't need the if there. We don't need this v else either because we're always going to have this booked with an employee. Same with the service title, same with the service duration.
04:52
The employee name is always going to be there, so we can just access that and not have that condition. And then the appointment service price as well. And I think that should be just about good
05:03
for the top part of there. There we go, great. So let's add a header to this top section. So let's go ahead and just wrap this entire thing in a div
05:13
and then add in a header. And again, we could just steal the header styles from one of here, pull that in, and we'll just say, thanks, you're booked in, something like that.
05:27
And let's have a look. And yeah, that looks OK. So the next section that we're going to build out is just going to contain the date and time.
05:35
So again, we'll pull in a header and say when or when it's for, whatever you want to say. And then let's create out a very simple container to house this. So we'll set a margin on the top here,
05:46
background of slate 100, rounded large, and we'll just give this a little bit of padding. And then in here, we want the appointment date that we formatted.
05:55
So let's just take a look at that first. And yeah, there we go. We have a nice formatted date. Then we want the time.
06:01
So that's going to be appointment and starts at. And then we can say something like until, and then we can grab the appointment ends at date. And there we go.
06:12
So it's at this date, at this time, until that time. So a really simple confirmation page, but we need to redirect to this when we've booked an appointment, because at the moment,
06:22
redirecting back doesn't make sense. So let's go over to our appointment store controller. And let's go ahead and return a redirect to a route. We know that this is appointments show.
06:35
And of course, we need to pass the appointment in. So let's just assign this to appointment and pass that in. And we should be good. Let's go through the whole flow and see what this looks like.
06:46
OK, so let's go back to the home page. And I'm going to go ahead and choose service. We didn't actually hook this up, so let's just fix that up quickly now.
06:54
So if we go over to our home page where we want to choose a service first, we didn't add an href to this. So let's do this in here.
07:03
And we can copy this from the employee page where we hooked that up just here. So let's just take all of this. But of course, we just want to pass in the service and not
07:13
the employee. OK, let's give that a refresh. Click on here. Going to choose any date, any time.
07:19
That's selected Mabel. Let's go and enter our details. And we should see that booked. It doesn't look like it's working.
07:27
So let's just pull up our console and our network tab because this is going to reveal a lot about the validation rules. And yeah, the employee ID field is required.
07:36
So it does look like we actually need this in here. OK, so as well as the checkout page or the confirmation page, we're going to be doing some fixes here. So let's go over to our checkout and just take a look at this.
07:48
So let's go up to where we were watching. And I think after this, let's go ahead and set the employee ID specifically on the form. I think this preserve state is going to be
08:01
stopping that from happening. So let's explicitly set the employee ID in here to our props employee and ID because that's probably not getting refreshed.
08:11
OK, let's try this again. And we'll go through the entire flow just to make sure everything is good and we are booking and landing.
08:17
OK, so I'm going to choose hair here. Choose 10 o'clock. That's selected Mabel. Let's enter our details.
08:23
And that should now be setting that within our form. We shouldn't have a validation error. And there we go. We're booked in.
08:30
So our confirmation page is redirected to. We've fixed up a couple of issues. And in the next episode, we're going to look at cancelling an appointment.

Episode summary

In this episode, we focus on building a simple but effective confirmation page that users see once they've successfully booked an appointment. We start by creating a new controller and making sure it can fetch and render appointment details based on a UUID. Something we didn't have yet was an API resource to properly format and send our appointment data, so we quickly put that together too, ensuring that things like the date, service, employee, and times are neatly prepared for the frontend.

On the Vue side, we create a fresh confirmation.vue file, pull in our base layout for consistency, and set up props to receive the appointment details. After confirming all the data shows up as expected, we borrow some styles and markup from our checkout page to speed things up. The end result is a confirmation page that thanks the user and gives them all the details about what they've booked—date, time, employee, service, and more—all presented in a clean, readable format.

We also troubleshoot a couple of minor issues along the way (like making sure the employee ID flows through the booking process), ensuring that the whole booking and confirmation flow feels seamless for the user. Now, when someone books an appointment, they get instantly redirected to this new confirmation page with all the info they need. In the next episode, we'll take things further by looking at how appointments can be cancelled.

Episode discussion

No comments, yet. Be the first!