Build a Livewire CSV Importer/Exporter
This episode is for members only

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

Get started
Already a member? Sign in to continue
Playing
12. Showing all exports

Episodes

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

Transcript

00:00
The export process is working really nicely but obviously at the moment we don't have any way to monitor our exports particularly if they are really large. So let's head over and create out an exports table that we can use to monitor these. So we'll create this as a live wire component you don't necessarily need to but we might need to update it later to make it a
00:20
little bit more dynamic. So let's make out a component called export and let's call this export table. It's kind of makes sense export table and let's add this to the exports page that we created in the last episode. So export table and let's open up the template for this and again I've created out some pre-made table code here that you can go ahead and grab directly
00:49
from the github repository. But if we head over to exports it will look like that. So we've got requested app, file, record count and status which will change based on whether it's finished or not and when it is finished it will show a link to download the export. Okay let's go ahead and get this filled in. So over in the export table component let's actually open up that main
01:15
export table here. We just want to pass down all of the exports. So exports are going to be from the current user. We already have that exports relationship. We'll go ahead and scope this and say latest and we will paginate these by 10. Let's go over to our export table. I'll just fill in the pagination here before I forget. So exports and links and let's go ahead and start to iterate
01:45
through these. So for each exports as export and let's go ahead and wrap that and for each pull that in. What do we want to do? We'll just output as much of the data as we can. We've only got two at the moment. The first one is the requested app. So requested that is just going to be the created at date. So let's say export created at and we can cast that to a
02:16
date time integer if you wanted a date time output whatever you want to do. I'll just keep it as created at for now. In terms of the file this is going to be just the file name. So that's just what we have stored. So this is a pretty straightforward one again. We're just going to say export file and that will just allow us to visually map up what we're downloading so we can so we can sort of
02:40
find it more easily when we download it. Record count again really straightforward but what we want to do is make sure we format this and we'll use the number helper that we used earlier. So we'll say number format export record underscore count and that will show us 10 but then of course if it's 100 000 we'll see something like that. Okay great so the last one is going to be whether
03:06
it's ready or the second to last is going to be whether it's ready or not. So for this I think a helpful method just so we can add a little bit of readability. So we might say if it's ready let's say complete otherwise let's say pending. Just really basic status for this it's it's very binary it's either done or not so we'll implement this is ready method. So let's go over to our export
03:34
and how do we determine whether it is ready or not. So let's create this is ready method out which we know return to boolean. We know it's ready if we have a file available and if it's completed. Now actually we generate the file when we first create the record so it's probably just a good idea to to return not is null for this completed out.
04:02
And that should be enough to work that out. So let's just give that a refresh and you can see both of these are complete. Let's just fiddle around with one of these in the database manually so I'll just get rid of that and there we go so we get pending. So yeah I think that's a good status update for now. Now the last one is going to be the download link. We will work on this
04:23
specifically in the next episode but we only want to show this if the export is ready. So let's just say export is ready and that if you can do pretty much anything you want here and we're going to have a link to download this. So let's go ahead and just style this up so it looks a little bit different. So let's say text in to go 500 and there we go so obviously it doesn't show if this is pending.
04:51
Okay so we've got a bunch of exports let's just tidy up the process here though and the first thing I'm going to do is head over to the navigation and I'm going to go ahead and add this in. So let's look for dashboard here. Let's dump out our exports link here as well and yeah let's just fix that up. Exports
05:22
and there we go so we can now switch directly to our exports and after we have exported something so let's just export 10 of these we want to redirect, close this modal but by redirecting we will automatically close it over to our export so we can sort of monitor this straight away. So that's very easy because we're just working with a live wire component here so over in the
05:47
export modal after we've queued this we can just do what we want. The user doesn't need to hang around here so we can just redirect over to that export route. Let's do that and we're done. Okay let's just go through the whole process of this again. I'm just going to get rid of everything in the database here and I'm also going to clear out some of these files that we have
06:06
hanging around. Okay great so let's go back over to the browser. Let's go to our dashboard and let's export. I'm just going to do one just to test this out so it's start export pending and of course eventually that is going to be complete with the ability to eventually download it. We know that's not the case because we don't have the ability to download it yet. We have the record
06:26
exported here and of course in the database it's completed. Okay let's go over now and look at the secure process of downloading files. We need to be really careful here because obviously these could contain some sensitive information. We don't just want to let anyone download these.

Episode summary

In this episode, we're taking a big step forward with our export system! Up to now, we've had the export process working, but there was no easy way for users to keep an eye on their exports, especially when they have a lot or some really big ones in progress. To fix that, we're building an export table and plugging it into our exports page.

We start by creating a new Livewire component called ExportTable (though you could make it however you prefer), and then we add this to our exports page. The table shows all of the current user's exports with helpful details: when the export was requested, the filename, how many records it contains (nicely formatted with thousands separators), and the status (either "Pending" or "Complete"). We also set things up so that, once an export is ready, a download link will appear—which we’ll flesh out in the next episode.

On the technical side, we show how to fetch and paginate the exports specific to the current user, display each export's information, and format everything in a user-friendly way. There are some handy tricks for keeping the status readable, and we also do a quick update to our navigation so users can always get to their exports. Plus, we tweak the export modal so that after starting an export, it automatically redirects to the exports page, helping users track progress right away.

We wrap up by testing the whole thing end-to-end, walking through creating an export and seeing it show up in our table. The download part is coming up next, but now we have a great way to monitor all exported files at a glance!

Episode discussion

No comments, yet. Be the first!