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
24. Making an employee optional
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 so let's go ahead and make the employee being passed down to the checkout completely optional. Now the first thing we want to do is go over to our web routes and we want to make this parameter within the url completely optional by just adding a question mark in the end. Scope bindings will still work even if this is null it will still check this if this is there but now when we head
00:21
over and give this a refresh you can see that it just works. Now the only issue we've got here is we can't easily check if this employee hasn't been passed down. Let me show you what I mean. So we're going to go over to our checkout page and I'm just going to come up to the top somewhere and dump the employee out which of course we don't have and you can see that we get an object via
00:42
that api resource but it's just showing each of these items as null. Now that's not really what we want the reason that this happens is when we use route model binding this will just give us back an empty employee object which is still valid to pass down into employee. So if we just go ahead and die dump on this employee and give this a refresh you can see that it gives us an employee
01:04
object but it's just completely empty of data. So what we want to do here is send down in the employee parameter that we pick up in our props we want to send just a null value down so we can easily check if this is actually missing. So to do this we're going to not just say not employee so we could say if the employee doesn't exist then send something down or we could say if the employee
01:29
does exist send this down otherwise null and we can just achieve that with a simple ternary. Now that doesn't work in the same way so if we just go over to our checkout and bring back our employee here you can see it still doesn't work and that's because this object is still built up it just doesn't contain any data. So what we have on Laravel or Eloquent objects is an exists property
01:52
so if this doesn't exist or if this does exist then we can go ahead and actually pass something down otherwise we're going to say null so that can catch a lot of people out. So if we come over now and give that a refresh you can see that we just get a completely null value. Now the reason that this error this page is errored now is because we can't read them properties that we're trying to
02:11
access inside of our template. So if we come over to our checkout and get rid of employee let's just take a look at where we're referencing our employee. So we're doing this for the profile photo we're doing this for the name just here as well. So for the profile photo we could just add in an if statement in here and say if the employee is not a null value e.g. it's truthy then we can show
02:33
the profile photo and for the name this is pretty easy we could just add in an optional here accessor and then otherwise we could just say any employee and then if we come over and give that a refresh you can see it works. Now it would be good idea to just have a little placeholder here for the image exactly the same size as what we already have so what we can just do is create
02:55
out a div in here and we'll just do this all in line and we'll say be else and then just style this up in the same way so we'll still set rounded large and we'll set size to 14 but we'll go ahead and give this a background say of slate 200 and you can see that that just gives us an empty placeholder now later on when we choose the date that we want and we choose a slot what we're then
03:19
going to do is inject this back into the url and then that will show us the employee in there because we'll then have that employee that can perform that service. So there we go we have got an optional employee now being passed in and obviously if we do have an employee in there it's going to work in exactly the same way.
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!