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
09. Adding schedule availability
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 now that we've worked out how to iterate over the individual days that we're requesting for that particular time or date period, we want to work out whether the employee can work on them days. That's pretty much all we're interested in right now and of course we'll take into account
00:18
their long-term schedule as well. Now the only problem with this is at the moment we're not passing an employee in, so that's probably a good thing to do right now. So let's go ahead and accept an employee into the constructor here. Just while we're here we'll also pass a service in because we are going to need to use the service to work out a couple of things a little bit later as well.
00:40
So we might as well go ahead and accept this service in and I'm just going to go ahead and set both of these in here so we don't have to define them at the top. Okay so if we go back to our web routes where we're just playing around with stuff, of course we don't have any of these at the moment so let's go ahead and just grab out an employee really quickly from the database. So let's go and
01:01
find myself here and we'll go ahead and pull out a service here as well. So the service that we're going to choose, we'll just choose the one with the id of one. So let's pass that employee in, let's pass that service in and now what we can do for this requested period and all of them days we saw is tracing over, we can pluck out whether the user works on them days. So how are we going to do this?
01:26
Well the whole way that we're going to do this is start with a period like we have and then just go through and call multiple methods that adds or subtracts from that period. This is going to be a common theme throughout doing this. We build something up, we go through it and we sort of filter and adjust it as we go. Okay so in here let's call a method and I'm just going to call
01:48
this add availability from schedule and we're going to go ahead and pass that date in. So we have access to the employee because obviously it's being passed into the constructor so we can just go ahead and build out a method in here, add availability from schedule, we can go ahead and grab in that carbon day and we can look this up. So at the moment of course nothing is happening
02:11
but we can use this to add on to that period that we have stored up here. Okay so to do this the first thing that we want to do is pluck out the user's schedule where the appointment dates that we've chosen now until the end of the month or within a month's time fit within that schedule. So let's go ahead and just pull a schedule out the database for this employee. Remember that
02:34
for the employee we have the schedule relationship set up just in here. So let's say this employee and schedules now really importantly at this point we are working with a laravel collection, we're not going to go ahead and start to query the database here because everything is going to get really really slow if we are iterating over all of these days and creating a query for every single
02:58
day that we are requesting. That is going to make things very very slow and we're also not going to be able to go ahead and egloat any of that kind of stuff. So we're going to access this as a property so we actually get a laravel collection back and despite having a laravel collection we can still use a where clause on this so it still allows us to query this with a where. Okay so we're
03:17
going to say where the starts at date for the schedule and let's just remind ourselves that's this overall start and end date is less than or equal to the date that we're requesting and we're also going to say where and let's just bring this down a little bit the ends at date is greater than or equal to the date that we've requested so that should give us back my schedule
03:41
since we are passing in my user and I have a schedule that sits between them two dates so let's give it a refresh and yeah sure enough we get my schedule. Now we know that I only work on a Monday that's what we added to the database again we're going to be covering this in more detail with testing but for now let's just roll with what we've got. Okay so how do we do this
04:02
in terms of checking the individual days? Well the first thing that I'm going to do is from this method if we don't have a schedule just do an early return there's no point even going any further if we don't have a schedule so I'm actually going to pull this up to the next line and just wrap this assignment for this schedule in an if statement and then do an early return if
04:23
this does not exist so if we get a null back from there the user doesn't have a schedule otherwise that you can see it works. Okay so what we can do now is go ahead and try and get the working hours for the specific date now remember what I said earlier if we take the date that's been passed in and we format that using the L formatting character we get Tuesday so we know
04:45
that today is Tuesday I'm recording on Tuesday so this will give us back the Tuesday dates just before we go any further so we don't get confused I'm actually going to go ahead and set my Tuesday start and end date to this and we could add some more in a bit later if we wanted to so this should add availability once we're done with this for my schedule because of course I
05:04
work on Tuesdays so how are we going to do this? Well to do this we're going to go over to the schedule model itself and just tuck this method away here and this method is going to allow us to get the working hours for a particular date we don't need to add it to this model but I think it does closely relate to this so we're going to pass in a carbon date into here and let's go ahead
05:29
and just invoke this so we can die and dump what we get back from it so let's say schedule get working hours for date and we're going to pass that date in because we know that it does exist within our schedule and we're now accessing the working hours from that schedule on that particular day or for that particular date so at the moment of course we should just get nothing
05:52
and of course we probably gave that okay yeah so we're working with the collection here at the moment so let's just go ahead and say first and there we go great so we get null back from this method of course okay so in here what we can now do and let's just look at an example of this let's go and say this Monday starts at and in our case it would actually be Tuesday starts out so
06:17
let's go ahead and die dump on Tuesday starts out and we get nine o'clock so that works but what we want to do is take the day name from the date and dynamically access this as the column and this makes me feel slightly uncomfortable there's probably a better way to structure the data within the app but to be honest we know what our columns are called we know that the days of the
06:38
week are always going to be Monday to Sunday they're never going to change so I'm pretty confident that by doing this and replacing this particular column access out it'll be fine now and into the future okay so to do this what we need to do is just use curly braces and we just pass in date format and l and of course we want to lowercase this so we're just going to use the
07:03
native string to lower function in php now this isn't obviously going to work so what we need to do is just tack onto this starts out as a string and that should go ahead and get that out for us so let's just give that a refresh and yeah of course let's just make sure we wrap that correctly in here because we're dynamically accessing a string that we're building up as a column so all
07:27
of that goes within the curly braces and yeah we get nine o'clock great so we know that I work on a Tuesday now of course if I didn't work on a Tuesday that would bring back null but we now have the time that I work on that particular day so we can add that period into that collection okay so this isn't obviously good enough what we need to know is the start date and the end date
07:47
that I work on any given day so what we're going to do is we're just going to return this as an array so we're going to pass in the starts at date and we're going to pass in the ends at date and we're just going to go ahead and return these as a variable because we're going to need to tidy this up if not if either of these are null or if one of them are null we would never have a Monday
08:12
or two or any other day that started at a particular hours and never finished at a particular hour so these would always need to be filled together okay let's give that a refresh and there we go we know that now on Tuesday I start at nine and I finish at five so what happens if so what happens if I don't well if I don't let's go back to our schedule availability
08:33
when we try and add this period obviously we're not going to add null there's no point in doing that so if for example I didn't work on a Tuesday and these were both null what's then going to happen is we can't easily check this so we could in here say if the array has a zero key of a zero value of null and it has a null value at position one that's fair enough but we kind of want to do
09:01
this from this method so what we can do is we can just really conveniently wrap this in array filter and what that will do is it will give us back an empty array so with that what we can do is check if the array is empty and if it is empty we'll just return null from this method otherwise we'll return the filled array with a start and end time
09:24
so we get null now but of course if we do work on a Tuesday we get the array so that just makes that method a little bit easier to use going forward now one thing I will say while we are building this if you are not working on a specific day and you don't really want to go through your database and fill your columns in what I'd recommend you do is go
09:47
over to your web routes at the top just while you're sort of playing around we're going to be doing this now tests later but you can actually use carbon to set the test now value so if we just pull carbon in here you can set this to a specific value so I could say I want this to be carbon from date string and let's just make sure that is pulled in properly there we go so we could say
10:13
carbon from date string and you might want to pick a day that you specifically want to test with so I might say 1st of January 2023 at nine o'clock in the morning and now what that will do is it will always be on that specific date that your code will access when it tries to get carbon values I'm not going to do that but we will be doing that while we're testing okay so now that we have got
10:38
the day we want to go ahead and add that in our schedule availability to this slot so the first thing we want to do is check that this is actually empty or not so at the same time as checking this I'm going to destructure it so I'm going to add in an if statement here and I'm going to grab these starts at value and the ends at value from schedule get working hours for date now what that will do
11:03
is it will give us the nine o'clock and the five o'clock or whatever hours they are but at the same time we can check that for a null value so if it is null we'll just return like we did up here with the schedule otherwise what we now have is two separate extracted variables called starts at and ends at just a way to tidy up our code so you can see that we now have these completely
11:22
separately so now what we can do let's get rid of these die dumps is we can go back to what we saw earlier when we were looking at our period collection and we can just go ahead and overwrite the periods by adding in a period for each one and this will be period make and what is the start date and what is the end date well it's going to be whatever day that we're currently on here
11:47
remember we are calling this method for every single day that we're checking so this is going to be called you know 30 times what we're ish when we're looking at within a month so what we want to do is take the date that we're currently working with that might be a Monday or a Tuesday really importantly we want to copy it because we don't want to mutate the value that we actually
12:08
have for this date if we were to call any of these methods directly on that day it would modify the original value this is why working with dates and times can get really complex because when you want to transform a date and change something it will actually modify the original instance it doesn't with that sparse package but it does with normal carbon objects so we're going
12:29
to copy that date and we're going to set the time from the time string and that is going to be when that employee starts that day and then we're going to do the same thing but we're going to do when they end so ends at so let's go ahead and set in the precision here two minutes and let's check out what we get at the end of this so i'm not going to die dump in here i'm going to
12:53
come up to the top here and after we've iterated over each of them days we're now going to die dump on them periods so let's give this a refresh and we now have nine periods so let's just check these out and make sure that they look good so the first period here starts at nine o'clock on today which makes sense because if we check out our database again today is a tuesday and
13:15
i start nine o'clock so that is working nicely let's check the end here and yeah sure enough it ends on today at five o'clock the next one if we check this out is the fifth of february now this is where we can see this working really nicely because if you think about it in the database tuesday is the last day that i work this week it goes all the way up to sunday and then of course
13:41
i will then start back next monday which happens to be the fifth of february so again working really nicely and of course this is going to go all the way up if we check the next date that should be if we just check the start here that's going to be the tuesday and then end at five o'clock on the tuesday but the next one so that's the sixth of february the next one is the twelfth so we're
14:06
just again going into the next week because i only work on mondays and tuesdays in this case so hopefully that makes sense we've built up a list of the days that we work within these periods so now that we've done that we just want to take into account the service that we are performing so my availability is dependent on how long that service actually takes so i cannot fulfill
14:31
appointments at five o'clock because i finish at five o'clock so it doesn't make sense to have my availability go up to five o'clock on that day it needs to take into account the half an hour or the hour or however long the service is so what we're going to do really really simply is just take away or sub the minutes off of the service duration so we can just say this service duration and let's
14:56
check out the difference this has made so let's just take today for example because this is going to be the same for every single day we start at nine but i can only perform that half an hour service from half four so i can do half four up until five okay so hopefully that makes sense we've got all of the days now that i can work within the period that we specified here so within
15:17
a month period these are the days and the times that i can actually perform that we don't have slots yet that's going to come next but we now have all of the availability for that requested time and of course if i were to add in that i worked all of these other days up till friday we would have a lot more days available within this period collection
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!