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

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

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.

Episode summary

In this episode, we take a look at how to make the employee parameter on our checkout route completely optional. We'll start by tweaking our web routes, adding a question mark to the parameter to indicate it's optional. You'll see that with Laravel's route model binding, if an employee isn't passed, we just get an empty employee object, which isn't particularly helpful.

The next step is to change how we send the employee to our front end. We want it to be null if there wasn't an employee, instead of an empty object. That's where the Eloquent exists property comes in handy—we check if the employee exists and only pass it down if it does, otherwise we send null.

Once that's sorted, we update our checkout view so it doesn't try to access properties on a nullable object, adding checks (and a simple placeholder for the profile photo) whenever the employee isn't present. This way, the page doesn't error out when no employee is selected, and everything looks tidy.

Finally, we explain how later on, when the user makes selections, we'll put the employee back into the URL, and everything will just work as before, but now with full support for cases where there's no employee initially. So, after this episode, your checkout flow is much more flexible!

Episode discussion

No comments, yet. Be the first!