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
22. Showing services for an employee
Episodes
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
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
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
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
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!