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
14. Creating the progress list

Episodes

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

Transcript

00:00
Now that we have the state of each of our tasks being updated in the database, it's time to go ahead and iterate over them and build up a UI.
00:07
We're going to do this with LiveWire polling, which means that we can constantly fetch the new status of all of our tasks, very easily iterate over them and show each of the states. Let's start out by just building out a really simple UI with a progress list.
00:23
Okay. So to do this, we're going to go and create a new page. Once we've created the server, we're going to redirect the user over. So let's go ahead and use LiveWire to make out a show server component.
00:33
And we'll go ahead and register this over in our web routes. So let's take what we have here, copy this down and we'll say servers.show, server, and we'll take in the server here by his ID, of course, we'll swap over the component as well.
00:48
Over in the component, let's go ahead and bring in our layout attribute and we'll reference layout and app. And we'll pretty much just take the create server page and copy and paste that over.
01:00
So let's open up show server and paste this in. And then here we want to output the server ID. So let's go ahead and grab the server, grab the ID, and we'll just say server and hash ID. Now in here, we are going to have a button.
01:16
We'll get rid of that just for now. The button's going to cancel the whole progress off as we saw from the introduction, but here we want to list out all of the steps. So just go ahead and make sure everything's working.
01:25
First of all, before we do that, let's go over to the show server component and just make sure that we're accepting that server in with route model binding. Let's first of all, make sure we are redirecting. So let's go over to the live wire, create server component.
01:40
And down here, we're going to redirect the user over to that route. So let's grab the server's show route and let's pass the server directly into there. Okay. Let's go ahead and try this out.
01:50
So click create server, we're redirected over and we can start to show all of the steps here. Now, the reason that we've stored these tasks, each of the tasks in the database is now we don't need to hard code anything into the UI.
02:04
Remember each of the types of things that we're creating in this case, a server could have different lists of tasks, but now we don't need to worry about any kind of logic in our UI to show the different tasks based on the type of server we're creating, we just iterate over the tasks.
02:22
That's all we need to do. So let's go ahead and build up a really simple UI first of all, and we're going to do this with just a few blade components. So let's go and make out a component and we are going to have
02:33
a progress list first of all. So let's go ahead and pull that in and we'll just create this as a view. We don't need a class associated with it. Then under the list, we're going to have each of the items, which is going to be
02:46
the state of each of the tasks that we're creating. Okay. Let's go ahead and output these to the page and then we'll start them up. Okay.
02:53
So if we head over to our show server page, let's go ahead and output these in here. So we're going to say X and progress list. That's going to wrap these items.
03:02
And then we're going to have X server progress item for each of these. Now to iterate over these, we just want to iterate over the tasks. So we're just going to create a for each out in here, and we're going to say for each server tasks as task, and then we can just render one of these items.
03:20
For each of them tasks, we can pass the task in as well. So we can extract all of the information out within this component. Let's go ahead and just do that really roughly for now. So the progress list will just change over to an unordered or ordered list.
03:33
It would probably be better here. And then inside of here, we're just going to have the default slot and that will render each of the items. Now for the progress item, this is going to be a list item and let's just output
03:46
the task ID or the task title just for now. Okay. So up here, we want to go ahead and pull in the props. So let's define out that we're going to have a task being passed
03:56
into here and we should be good. Okay. If we head over to the UI here, there we go. So we've got the first task, second task, and third task.
04:04
Let's just pull across some styles to make this look a little bit better. So for the progress list, we can keep this pretty straightforward and just add an overflow of hidden in here. I don't think we'll need anything else.
04:17
The more complex part is the progress item. So I'm going to go ahead and pull over some predefined styles here. You'll find these in the GitHub repository. If you want to just grab and copy and paste it directly in, these are from
04:30
Tailwind UI and it just gives us the status that we've already seen. So if we head back over and give this a refresh and we need to make sure we're compiling all of our assets. So let's run npm run dev at this point, and we should see the following.
04:47
Let's just take a look at this component. The pending state is currently uncommented. If we go ahead and uncomment the in progress state, let's have a look. That's what it's going to look like in progress.
04:56
So we can just wrap that in an if statement for the complete state. We just have an SVG in here. Let's have a look. That's what it looks like.
05:04
And if we do the same thing for failed as well, we just end up with the following. So we also have this element just here, which has a slight width to it. And if we set a background of Indigo 600, for example, and bring back one of these, it looks like this.
05:22
So whichever state that we have, we can have this as any color we want, and we can change that based on the state as well. So have a really good look at this. We'll change this around a little bit later.
05:33
But for now, we've got each of the components that we need to change around the styles and of course, output the task title and description. Let's go ahead and output the task title and description now, because they're pretty straightforward.
05:45
We know that these are stored at the task level. So let's grab the title here and let's grab the task description here. And let's head over to the next episode and look at how we fetch each of these states.

Episode summary

In this episode, we're building a progress list UI to show the state of each task as we create a server. Now that our tasks are being stored and updated in the database, we can fetch their statuses dynamically and iterate over them in the frontend.

We use Livewire with polling to keep things updated in real time. Starting off, we set up a new page that will act as the server's details view, where we'll redirect users after creating a new server. We update our routes, use route model binding, and make sure the redirect works from our create server component. This way, everything moves smoothly from server creation straight into watching the setup steps.

On the UI side, we scaffold out simple Blade components: a progress-list that wraps server task items, and a server-progress-item for each task. We loop through the tasks, passing each one in so we can represent its state in the interface. For styling, we pull in some Tailwind UI styles to quickly get a nice look, and we also set up the basics for showing different task states: pending, in progress, complete, and failed. We wrap the related markup in if-statements so that the component updates based on each task's current status.

Finally, we wire up the UI to display each task's title and description, and get ready to make this progress tracker fully dynamic in the next episode. It's a great setup for a real-time feedback experience as your server goes through the different provisioning stages.

Episode discussion

No comments, yet. Be the first!