Job Batching Progress with Laravel
This episode is for members only

Sign up to access "Job Batching Progress with Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
15. Fetching task states

Episodes

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

Transcript

00:00
OK, so we're not going to run our queue just yet,
00:02
but we are going to update each of these states when the task, the server task, is in that state. To grab this information, we can just add some helpers to the server task model.
00:14
So let's open that up and see how we can do this. So let's look at pending first of all, and then we can just pretty much copy and paste these down, because they're all going to be the same.
00:24
And to do this, once again, the package that we are using, the model state package that we're using, has an equals method, which we can use to very conveniently compare these.
00:35
Remember in the database, each of our server tasks is when we look at the state stored as a class. So we need to compare this really easily in order to update the UI.
00:46
So we're going to go ahead and return here this state, which remember is that cast thing. We can just use equals, and we can just pass in a fully qualified namespace to the state
00:56
that we had before. So is pending is now either going to be a true or a false value. And of course, we can type in that as well.
01:03
OK, let's just dump is pending just to see if this works. Over in our progress item, let's just do this anywhere. So let's say task is pending, and let's go over and give that a refresh.
01:14
So this one is in progress, remember, and these two are pending. So we get one dumped out as a cast boolean value. OK, let's do the same thing for every single state
01:25
that we have, and then we can just update the UI. So let's grab this down, and we'll say is in progress. And of course, we'll compare that to our in progress state. We'll also have a is complete state as well.
01:40
So we'll compare that to our complete state. And then finally, we'll have our failed as well. So is failed and change this over to failed. Great.
01:51
OK, so now we can update the UI. All we want to do is just wrap each of these depending on the state. So if the task is pending, we want
02:00
to show this one just here. So end that if statement, pull this in. We'll do the same thing for in progress. So let's say if task is in progress,
02:13
and again, just wrap that. Let's go ahead and pull this in. And I'm going to finish off these other ones just so I don't waste too much of your time.
02:21
OK, so I've gone ahead and done these all the way down to is failed. And if we come over now, we should see a much better state.
02:26
So this one is currently in progress. We know that this immediately transitions to in progress when we start our batch. Let's go ahead and update the line just up here
02:36
to show a different colored line based on which state we're currently in. So let's go ahead and pull this down just so we can work with this a little bit better.
02:45
We're going to take all of the original classes, and we're going to use the class directive within Blade to pass the original list of classes in. So let's go ahead and just pass them into there, pull that in.
02:57
And now what we can do is conditionally change the background color based on the state. So if we have a background of indigo 600, that means the task is complete.
03:06
So we can reference is complete in here. And then if it is not complete, so if it's in any other state other than complete, we just want a gray background to this.
03:17
So let's say gray 300, and we'll reference task is complete. But we'll just say if it's not complete. And of course, you can change around this UI to do anything you want based on the status of each of the tasks.
03:30
Let's just take a look at this, and you can see we have something that looks like this. Now, before we look at polling in the next episode, let's just manually change the state around of some of these
03:40
just to make sure everything's good. So I'm going to change this to a complete state, and I'm going to change this to an in progress state. Let's go back over to the browser and see that.
03:49
You can see that that line has changed because this task is complete. This one is now pending. And of course, with any of the others as well.
03:56
So let's just say that this one fails, and we'll end up with the following, and we change this over. If all of these are complete, let's just
04:04
make sure that this looks good. So let's pull this down into here, and there we go. So that is the state we'll see when everything is complete. Although, we're going to also be looking at checking this
04:15
for when it is finished and redirecting the user as well. OK, so we know how to get our states. I'll leave it up to you to decide what UI you want to implement and how you want this to look.
04:25
But the really important thing now is figuring out how to pull this so we always get an up-to-date state as this rolls in, as each of the jobs transitions to a new state.

Episode summary

In this episode, we focus on fetching and displaying the individual states of our server tasks. Rather than starting the queue right away, we add some helper methods to our server task model for each state—pending, in progress, complete, and failed—using a handy equals method from our models state package. This lets us check the state of each task in a really clear way.

Once those helpers are in place, we update our UI so that each task clearly shows if it's pending, in progress, complete, or failed. We wrap each task's display in Blade conditional statements to selectively show the relevant info based on its state. To make it even clearer visually, we tweak the background color of a progress line to change depending on whether the task is complete or not.

Before moving on to more dynamic stuff like polling, we do some manual testing—flipping the states of a few tasks and checking that the UI updates as expected. The end result is a much more responsive interface that accurately reflects what's happening behind the scenes.

By the end of this video, you'll know how to tie task states to your UI, leaving you free to get creative with the way things look! Next up, we'll see how to automatically keep these task states in sync as they're updated.

Episode discussion

No comments, yet. Be the first!