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
18. Using a custom date collection

Episodes

0%
Your progress
  • Total: 5h 0m
  • Played: 0m
  • Remaining: 5h 0m
Join or sign in to track your progress

Transcript

00:00
So our slot range generator gives us back a collection of these custom date objects.
00:05
And that's fine. But if we think about it, we want some general helper methods to determine things like the first available date. So we want to know when we show our calendar,
00:17
what date should we put in there as the first available date. We don't just want to put today. We want the UI to be convenient so we can help the user out when they're booking.
00:27
So what we're going to do is we're going to change this collection here, which is just a standard Laravel collection, over to a custom collection.
00:34
And I'm going to add one helper method in here to demonstrate how this works. What we'll then do is when we're building up the UI, we can add any more methods in here that we need.
00:43
OK, so to create a custom collection, we're just going to go ahead and create this out here. So I'm going to call this DateCollection. And we'll go ahead and just fill everything out
00:53
that we need inside of here. And this is just going to be a standard class, so DateCollection. And this is going to extend the base Laravel collection. That's pretty much all we need to do to get this working.
01:09
So now what we can do in here is just new up a new DateCollection. And that's all we need to do. So now the only difference is this is now a DateCollection.
01:18
It has all of the functionality of a collection. So it's going to work in exactly the same way. But we just have a custom one. So in here, we can now start to add some helpful methods.
01:28
For example, the really important part of this is, like I just said, the first available date. So for example, if you're booking today and there are no more slots available for today
01:37
or tomorrow or the next day, we want to show the first date that's available for bookings. So let's go ahead and implement this. Then we will go and just dump it out in our web routes.
01:47
And then, of course, we're going to write our tests in the next episode. OK, so we're going to go ahead and say this. And we're working within a collection still.
01:54
So we can use this really, really handy first helper on a collection. This will grab the first record, of course. But it can also be passed a closure.
02:03
So for example, I could add a condition of when I should grab the first one. So in here, we're going to go ahead and grab the date. And we're going to return DateSlotsCount
02:16
is greater than or equal to 1. So basically, iterate over all of the dates that we have and return the first one where we have slots. That's pretty much what we need to do there.
02:29
OK, let's go ahead and try this out over on our web routes just to get a feel for this. And then we're pretty much done. And we can add to this as we need.
02:37
So I'm going to say availability first available date. And let's see what we get. Give that a refresh. And here we go.
02:45
So this is today. We do have slots for today. Let's just take a look at them slots. And as you can see, we've got all of them slots.
02:54
Now, if we just go ahead and change this around, and I set this to, say, 5 o'clock today, obviously, we don't have any slots after 5 because our employees only work up until 5.
03:06
So if we now go over and give that a refresh, you'll see that this has switched over to tomorrow. So now when we render this on the UI, that is the date that's going to be available despite the fact
03:16
that today is the current date. So there we go. So that's just a really quick switch around of a collection so we can add any custom methods we
03:24
need into that collection to help us out when we're building the UI. OK, let's go ahead and write these tests. And then we can get on with building a basic UI in Laravel.

Episode summary

In this episode, we're taking our existing slot range generator—which gives us a plain old Laravel collection of custom date objects—and making it way more useful for our booking app. Instead of using the default collection, we're going to create our own custom DateCollection class that extends Laravel's collection, so we'll have all the usual collection goodness plus some special, booking-specific helper methods.

We start by building this DateCollection class and move our dates into it. The big benefit here is we can now add helpful methods, like figuring out the first available date with open slots. This is really handy for the UI, so users don't have to scroll through days with no availability just to find the next open date.

Once we've got our custom collection in place, we implement a quick helper that finds the first date with available slots. We play around with it, update the web routes, and see it in action. For example, if today has no slots left, the code automatically picks the next available day. It makes the booking experience feel smoother for your users.

By the end of this video, you'll know how to set up a custom collection, add useful methods, and hook that straight into your UI. Next up, we'll write some tests to make sure everything works as expected, and then we can move on to building out the basic interface in Laravel!

Episode discussion

No comments, yet. Be the first!