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

22. Showing services for an employee

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

Okay we're pretty much going to be repeating ourselves here but we're going

00:02

to build out a controller now which allows us to click on a professional and see which services they have but in addition to this we're going to move this over to its own component so we don't have to repeat all of this code. Okay so let's get started with the

00:15

controller itself so let's make out a controller here and let's call this employee service index controller because we want to show a list of services by an employee so let's create that out and then we'll just define a route out for this

00:30

so this is going to be employees but then we're going to need to actually fetch the employee and we can do that by its slug because we want the urls to look nice here so let's go and say employee service index controller let's give this a name and we'll just

00:44

call this employee of course we could do a little bit better here and say dot services dot index but let's just leave that for now okay so over to the controller itself let's create out an invoke magic method and again let's just go ahead and render out a view in here

01:00

and let's just call this employee and we know that we want to pass down the employee services so we're going to grab the employee first of all with root model bindings that will be automatically available for us and then we want to display the services

01:13

that they perform we also want to pass the employee down so we can reference them by name so for this it's slightly different we don't have a collection of things for the employee we just have a single thing so we're going to use the employee resource again we're going to

01:26

use that every time we reference an employee but this time we're going to use make so we can just say employee and we should be done now for the services it's just exactly the same thing but this time we want to fetch it via the relationship

01:39

so again we want to pull in the service resource we want a collection here of services but this time it's going to be employee and services and of course we know that because when we set up our employee earlier we had a belongs to many

01:55

service relationship so now we should have everything we need let's go ahead and build out the view for this so let's go over to our pages create out an employee.view file go ahead and build out our template pull in our script section up here and let's just define the props that we

02:14

need first of all because we know what these are going to be the employee itself is just going to be an object and the services we know is going to be an array so let's just dump these out on the page just to make sure that we've got them employee and our services

02:30

and we should be good so we need to link this up now so we can do that using ziggy via the name that we gave for the root now if you're not familiar with ziggy basically this comes with this starter kit and what it allows you to do is access all of your root names within

02:45

javascript so you can link through to the right place so as an example down here or really over on the home page what i can do is i can reference the root helper and i can say home and what that's going to do is give me the full

03:03

url to this much like we're used to doing in laravel with the root helper we can do that in javascript as well so this comes bundled in with this starter kit so we don't need to do any kind of setup here all we need to do is under this service section here when we link through

03:17

or more appropriately in this employee section which we're building now is just go ahead and bind in the result of that root so what do we call this i think we just called it employee so we can say root employee now we need to pass down the actual employee that we

03:32

want to bind into that so we just pass that down in javascript and that will build up that url for us so now what we can do over on our home page is click on any of these employees go through to the right url and of course we can see that employee in a

03:46

list of services so super simple to use with ziggy which is already bundled in for us and that's all we need to do so next up we are going to go and just build out the employee page so let's start in here with a link to go back we don't have this

04:00

imported so let's make sure we pull this in from inertia and then we're going to go down and have a go back link and why don't we just add in a left arrow in here

04:14

as an html attribute and we're going to hook this up once again using the ziggy root helper to go back to the home page so we just want a really quick go back link so we can go back and choose someone else if we need to okay i'm just going to style this up

04:27

really quickly so we'll just set the text to extra small and text to blue 500 so we know that's a link and we're done now we don't have our template in here so again what we're going to do is import our base layout we're going to define

04:41

our options in here and we're going to pass that layout down so inertia can pick that up and render that out for us perfect okay so underneath here we are going to create out another header and we can pretty much distill this from the home page

04:56

so let's pull that into here and let's in here say now choose a service from and then we'll output the employee name which we know we're passing down let's take a look at that and there we go great okay let's add a margin top of three

05:14

to that just to space it out and now we want to output all of our services in here which we've already done on our home page so we could pretty much just copy this entire grid take it over here and just paste it in and we know that that should work

05:30

because we're passing this down in exactly the same structure with our resource so now i can see all of the services from alex if we go over to mabel she can only perform one service so we just see one and this is working really nicely but i don't really want to duplicate all of

05:45

this stuff just in case anything changes in the future and i have to update it in more than one place so this is a good candidate to switch out to a component so again we've got a ton of components in here which are already available with the

05:57

starter kit but i'm just going to insert one in here and of course you can organize these if you want to so we are just going to call this service.view we will build out our template in here we'll go ahead and grab

06:10

all of the template that we want which is all of this but we're going to get rid of the v4 so let's take all of that link we'll go ahead and paste it in here and of course re-indent everything and we don't want this v4 here because we want to iterate over this

06:26

component itself so what we're going to do is replace this entire thing out with that service and then we're going to do a v4 on that service and then we're going to pass the service that we're iterating over down as a prop so we haven't

06:41

imported this yet but let's go ahead and import that service from our component section and just service and we should be good now over in our service component now we just need to go ahead and import all of the stuff we need to get this

06:56

working and also define out our props as well so the first thing pretty obvious we've already got a link in here so let's go ahead and import that from inertia and then we'll define the props out for this and that prop is just going to be

07:12

a service which is going to be an object so basically iterate over this component instead pass the service down for each one and have that available in here so we can start to output this stuff and we'll figure out the link in a little bit okay

07:25

so let's give this a refresh and you can see it works in exactly the same way so now what we can do is we can go over to our home page and do the same thing and we can change over the service in here so let's grab this out let's do the same thing

07:39

and we can just copy and paste it over from our employee page so let's pull that into there and no more duplication which is great we just want to go ahead and import that service component and we should be good to go okay let's give that a refresh that

07:55

works and of course that works as well so now we have a page where we can choose a service which is going to go directly through to checkout but we're using the same component so no duplication

Episode summary

In this episode, we focus on building a page that shows all the services an employee can perform. You'll see how we set up a new controller to handle requests for an employee's services, using a clean URL structure with route model binding. We're also making sure that the employee and their associated services are passed down to the view properly so we can display them.

To avoid repeating ourselves, we refactor the services list into its own Vue component. This way, both the home page and the employee service page can use the same code to display services. We walk through making the component, wiring up the props, and integrating everything with Ziggy for easy route handling in JavaScript.

You’ll learn a neat workflow for moving bits of UI into reusable components, keeping things clean and maintainable. By the end, we end up with a page for each employee that lists their available services, and the same services grid can be reused anywhere else in the app without duplication!

Episode discussion

No comments, yet. Be the first!