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

20. Employee and service resources

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, in this section, we're going to focus on building out the booking UI that we saw in the introduction. We're not going to go through checkout at the moment, but we'll have everything in place to get started.

00:09

So the first thing that we want to do is just clear everything out of our routes here. We don't need anything in here. Let's just go ahead and leave in our route facade so we can get started.

00:20

And we're going to go ahead and create our home controller in here, which will just be responsible for listing the employees and all of the services. So let's get started with a controller in here.

00:32

And of course, we're going to go ahead and call that home controller. Let's define the route out here really quickly. So we just want this to be on the home page. Reference that home controller.

00:42

And of course, we'll give this a name of home. OK, over in our home controller, let's go in and create a invoke magic method in here. And we're going to go ahead and return using inertia

00:54

and render a view file called home. And then we'll just start to parse everything down that we need to this. So let's go over to our view section here under JS, under pages. And let's go ahead and create out a home.view file.

01:09

Just while we're here, let's get rid of the other pages that we're not going to need as well. Great. And we could get rid of the orphan profile ones,

01:17

but you might want to keep them in. So let's go and create out a template in here. We'll just write home, and we'll just head over to the browser, give this a refresh, and make sure this is working.

01:27

Now, it's not at the moment, so let's just go ahead and make sure we're running npm run dev. And once we've done that, we should see our home page. Great.

01:35

OK, so the goal for this episode is just to parse the data down, but in a nice structure. We don't just want to parse the models or a collection of all of the employee models and services.

01:44

We want these to be in a nice structure so we can pluck out just the data we need. So to do this, let's go ahead and first of all, just parse this data down and just see what it looks like. So normally, what we would do is just say employee,

01:59

and we might go ahead and order this by a specific column. Might order that by name in ascending order, and we'd probably say something like get. We'd do a similar thing for the services as well that we want to output.

02:11

So let's go ahead and do that, but we won't order them. We'll just go ahead and grab them. Now, if we do this over on the home page, let's bring in our script section at the top, and we're going to use script setup for this.

02:24

And let's define out our props in here. So we've got a bunch of employees, and that's going to be an array data type, and the same for our services as well. So if we just dump them out on the page and take a look at what we've got.

02:38

So let's pull in our employees, and let's pull in our services just next to that. You'll see that we just have all of the data within our database. Now, we don't necessarily want to do that because we might want to format the dates, and we might

02:53

want to not include certain columns. So to do this, what we're going to do is use an API resource, which is a common way to structure data with API requests. And since we're working with inertia and view,

03:06

it kind of makes sense to send these down like API data because it kind of is like building a client that consumes an API. So we'll get started with our first resource in here, and that is going to be our employee resource.

03:22

So let's create that out with Artisan, and let's open up our employee resource. And basically, we just want to return an array in here with all of the data and its structure. So for example, we might want to output the ID for an employee.

03:37

We would just reference it as this, which will go ahead and defer to the resource that we've passed into this resource. Now, let's go over to our home controller and swap this out to actually use this resource now.

03:49

So I'm just going to cut this out, and I'm going to go ahead and bring that employee resource in. And I'm going to use the collection method and then pass all of that data into there.

03:59

Now what's going to happen is this collection will get structured by this for each of them records. So if we go over to our home page and have a look and just get rid of services, you'll see that we just get a bunch of data with only the things

04:14

that we've specified, so that's really, really helpful. Now, what we want to do is kind of get rid of this data wrapper. So to do that, we're going to come over to our app service provider. And under our boot method, we're going to go ahead and reference

04:27

our JSON resource class and say without wrapping. And what that will do is just globally disable that data wrapping, and you'll see that we just get a pure array here of these objects, which is much more convenient than referencing data

04:40

everywhere. OK, so now that we've done that, let's just quickly do the same for our service, and then we'll fill in all the data that we want to see.

04:48

So let's go and create another resource for our service, and we're going to call that service resource. We will go over to our service resource and just get rid of this, which by default would just output all of that data.

05:01

And again, we'll just output the ID in here, which we probably don't need, but we'll just leave it in as an example. And we'll come back over to our home controller and do exactly the same for what we did here.

05:12

So again, service resource and collection, because we have a collection of items, and we're just going to pass all of them services in. And then sure enough, if we come over to our home page,

05:24

swap this over for our services, again, we just get a list of our services and their IDs. OK, great, so let's focus on our employee resource first and all of the data that we need to add to this.

05:35

So pretty straightforward, the employees have a name, so we're just going to reference this name. We'll do the same for the slug as well, which we'll need to reference in our URLs.

05:47

And we'll grab the profile photo URL and output that as well. So really, really straightforward. We now just have the basic data we need. And of course, you can add more to that if you need to.

05:59

OK, so over to our service resource, let's go ahead and add in for this. And I'll just swap this over to services, just so we can see what we're doing.

06:07

And let's add in the data for this. So for this, we'll go ahead and add in a title. So the title of the service, again, the slug of the service, so we can reference it

06:18

within our routes. We'll output the duration as well, which we know is just a basic integer. And we'll also update the output of the price as well.

06:29

Now, when we do this, the price is still going to be in cents. Now, because we're working with Laravel 11, usually I would pull in the Laravel money package, which

06:38

uses PHP money behind the scenes. But at the moment, at least, there's no support for Laravel 11. So what we'll do just while we're here

06:45

is we'll create a very basic accessor for this price to transform it into a dollar value with a formatted decimal point that we can use inside of our views.

06:56

Now, to do this, what we're going to do is head over to our service model. And we can just add in this accessor in here. So all we need to do, and I'm actually

07:04

going to bump this up here, is go ahead and create out a protected price function in here or method in here. This is going to return an attribute. And this is going to come from illuminate database eloquent

07:17

attribute. From here, what we can do is return that attribute class. So let's pull that in again and say make. And then we can define the getter for this value.

07:27

Now, we can either do a long closure or a shorthand closure. It makes sense to do a short closure here. For now, let's just take in the value of this. So that's going to be the price itself.

07:37

And we know that that's an integer. And let's just return price and maybe just format on the dollar sign onto the start of that. Now, that's not going to make sense at the moment.

07:46

But we'll at least see this working. And then we can format this price. So now that we have created this, whenever this is accessed, it's now going to change this value, which makes sense.

07:56

And of course, this could go inside of your resource. But it kind of makes sense to have a global formatted price. And again, if you're using the Laravel money package, this makes things a lot easier.

08:07

OK, so how do we format this price then? Well, we're just going to go ahead and wrap this in the native number format function within PHP. We're going to divide the price by 100, of course,

08:17

because we're working with cents. And then as the second argument to this, we can choose how many decimal places we want this to have, which you can adjust or set to 0 if you want,

08:27

depending on your pricing. So now what we end up with is taking them cents values, a nice formatted amount. Now, so again, this isn't the most ideal way to do this.

08:37

You'd probably want to pull that package in. And once this does have support for Laravel 11, I'll add another episode to the course. OK, so now that we've done this, we've pretty much got

08:47

all of our data over on our home controller being passed down in a nice format to our view. Let's go over to the next episode and just fill this in and get this output on the page and styled up.

08:59

And then, of course, we'll be able to click on these to either go through to choose a service or go straight through to the checkout if we're choosing a service first.

Episode summary

In this episode, we're diving into building the booking UI by preparing all the data we'll need on the frontend, specifically for employees and services. We start by cleaning up our app's routes and setting up a new HomeController that will handle fetching the employees and services. Instead of just dumping raw models straight to the frontend, we use Laravel API resources. This lets us structure and format the data nicely, making it easier to use in our Vue components.

We walk through creating both an EmployeeResource and a ServiceResource, picking exactly which fields we want to send—like names, slugs, profile photos, service durations, and prices. Along the way, we set up our app so that the data comes down in clean arrays (not awkwardly nested in a data key), making it even easier to work with in Vue.

A big part of this episode is dealing with price formatting. Since our prices are stored in cents, we make a simple accessor on the Service model to format them as human-friendly dollar amounts, so they're ready to display on the UI. We also chat briefly about potentially using the Laravel Money package in the future for more robust currency handling.

By the end of the episode, we've got all our employee and service data pulled, structured, and ready for the frontend. Next up, we'll be showing this data in our UI and wiring up navigation so users can either pick an employee or go straight to checkout through a selected service!

Episode discussion

No comments, yet. Be the first!