Build a Livewire CSV Importer
This episode is for members only

Sign up to access "Build a Livewire CSV Importer" right now.

Get started
Already a member? Sign in to continue
Playing
22. Listing imports

Episodes

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

Transcript

00:00
over the next few episodes we're going to work on showing the import progress and of course because
00:05
these are persisted in the database when we refresh we can just retrieve these back and it'll always show the current progress of an import now while we're doing this it's really important that we just shut down our queue because we're not going to be able to catch them in time if we um have that running so we're going to shut that down just for now make sure we can see them and then we'll
00:27
go ahead and start our queue back up to see the progress a bit later now for this what we're actually going to do is create an entirely new component so if we open up our csv importer component what we're not going to do is just put this down here somewhere the reason being is that what we need to do is whenever we start an import we want a fresh component down here with livewire
00:50
that we can specifically trigger to update and we're also going to be using livewire's polling functionality to every second or a few seconds grab the latest data from the database to show this import we're not going to be using real-time events for this because for something like this it's probably a little bit of an overkill we're just going to create a component now the reason
01:12
we need to create a separate component is if we do this all on this page for example just nest it in a div here we would have to refresh this entire component to get these updates we can't do partial updates on a small part of our code so we're going to create an entirely new component so we can refresh it nicely and we are going to come over and generate that of course with livewire
01:33
so let's say livewire make and we're going to call this csv imports so i've already prepared if we just head over to that csv imports blade file some markup for you just here it's relatively straightforward but again i'll leave this in the course resources for you to grab if you're following along so effectively this is the wrapper that we want to iterate over for each import for
01:58
that particular model which is really important that we currently have going and this is going to be the file name so we know which file we're keeping track of and then we're going to show how many rows we've currently imported out of how many rows they there are so that's pretty much it we can go ahead and add this now to our csv importer and we're actually going to do this just above here
02:20
where we already have this comment so let's say livewire csv imports and we should see that on the page now there we go so that looks good and we've also got obviously that progress bar there which we'll need to add a dynamic width to based on the percentage progress of that particular import okay so to test this out we're going to head over to the database we're going to get
02:41
rid of this current import that we've got here and we may as well clear out the customers table as well because we're going to see that fill up again in just a second so what we should end up with here is absolutely nothing if we were to set this up to work but what i'm going to do is go ahead and upload a file with my q driver or with my q not running so we don't actually process
03:06
anything until we want to so let's hit import on that that will have created our import for us and we can start to display this now there's a couple of things that we need to think about we need to scope this by the model of course because if we were importing products for example we wouldn't want to see any customer imports in the import tab so we're going to need to set up some scopes
03:28
for that to work so let's go over to our csv imports livewire component just here and we're going to create out a computed property which will allow us to access the all of the imports that we need so let's go ahead and create that out now because we can do this but we'll just go ahead and add in some scopes in a minute so we're going to create a get imports property that's
03:49
going to return to us a collection we can type in that if we want to and in here we're going to return the currently authenticated user we're going to access the imports relationship we're going to grab the oldest imports first again that's entirely up to you and we're going to go ahead and get them now bear in mind this will get all imports whether they're completed or not and
04:12
it will get all imports regardless of what model we're working with so we need to make sure we only grab imports that have not completed so they don't have a hundred percent progress and we want to grab them by this scope but we can at least iterate over these for now and actually see them over on our csv imports component so inside of here then we can just do a for each on this imports pretty
04:33
straightforward now and we can go ahead and end that for each just here and we should now see them and then we can just fill the details in okay undefined array q1 let's have a look here as import that would help and let's give that a refresh and there we go so we've just got one at the moment okay so for the file name again pretty straightforward because we've got all of this data
04:56
inside of this model that we can use to output this so we're just going to go ahead and say import file underscore name and we can actually output other data here as well so we can output the processed rows and of course we're going to say out of the total rows and we could even do the progress bar which we'll take a look at in a second
05:23
so there we go imported zero out of a hundred rows of this customers.csv file that we have created okay so we'll go ahead and look at the percentage that this is completed so we can update this bar here which is this blue bar here we'll fiddle around with some data in the database and in the next episode we'll look at some scoping to get this to actually work properly okay so let's
05:45
head over to our import model and what we can do is just create a really simple method on here which is going to give us the percentage progress that we currently have or the percentage complete whatever you want to call it so i'm going to go ahead and call this percentage complete and that's going to return to us an integer and let's go ahead and return the process rows
06:08
so we're just going to grab the processed rows we're going to divide that by the total rows we're going to go ahead and parenthesize this and we're going to multiply that by 100 and then because obviously we are creating a percentage here we're going to want to go ahead and floor this by rounding it down so that's the percentage that's currently complete if we head over to
06:27
the csv imports let's just dump this out somewhere so we just want to say import percentage complete calling that method and of course we should see zero perfect now you could display this percentage if you wanted to we're just going to use it for this bar now let's fiddle around with some of the data here so i'm going to say that there are 40 processed rows obviously because we're working
06:47
with 100 total rows it makes the percentage very very similar to the process well exactly the same as the process rows but we'll go ahead and tweak this in just a way in fact let's do it now so we'll say one two four just to make it a little bit more interesting and there we go get a 32 so we want to go ahead and apply this now to this bar here for that we're just going to use an
07:09
inline style best way to do this and what inline styles are made for so we're going to go ahead and say width and we're just going to grab that import percentage complete output that and of course let's just get rid of these go ahead and add a percentage sign on the end and that's pretty much all we need to do so let's come over hit import and there we go it's about 32 okay so now
07:34
that we've got that done that means that we've got all of the information here for this particular import that we need of course you could show more if you wanted to but now we're going to go ahead and scope this down to things that haven't finished and things that belong only to the customer model so let's do that in the next episode

Episode summary

In this episode, we start working on displaying the progress of CSV imports in our app. The first thing we do is make sure the import queue is turned off—this is just to make sure we can test things out properly without our queue jobs running in the background.

Then, instead of lumping everything into our existing CSV importer component, we go ahead and generate a fresh Livewire component (called csv-imports) to manage and display the import progress. This setup makes it easier to update and refresh just the import progress (using Livewire's polling feature), rather than the whole page or component. That way, we can keep everything looking smooth without overcomplicating things with real-time events.

We then add the basic markup for the import progress listing—a loop over the imports with file names, how many rows have been imported, and a progress bar. We hook this up to pull import data for the current user, and for now, it shows all imports, whether finished or not, and for any model.

After that, we create a simple method on the Import model to calculate the percentage progress. We use that to adjust the width of our progress bar dynamically. A quick test with some fake data shows everything working as expected.

By the end, we've got a nice import listing with real progress bars, but it's still a bit rough—it's showing all imports (even finished ones, and for all models). We'll clean all that up and scope it down properly in the next episode.

Episode discussion

No comments, yet. Be the first!