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
06. Launching the export modal

Episodes

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

Transcript

00:00
We're now going to build the export modal which when we click and trigger this it's going to pass along all of the IDs that we've selected or if we haven't selected any IDs we'll just end up with an empty ID array and then we know that we want to export every single record from this table. Okay so how are we going to get modals working? Well let's go ahead and pull in a package like
00:23
yElementsModal which is by far the easiest and quickest way to get modals set up. So let's go down to the installation instructions and let's get this pulled in. So let's pull in this with Composer we then just need to register out with the Livewire directive the yElementsModal stuff so we can do that over in somewhere like app.play.php so we'll pull in everything we need
00:45
to get this working and to be honest that's pretty much all we need to do. All we need to do now is register our modal or create a component so let's say Livewire make and let's call this export modal and we could put that in a separate directory if we wanted to but let's just keep this really simple. I'm going to come over to export modal and rather than extending the base Livewire
01:08
component I'm going to extend the modal component from the Livewire UI package. That has now created a modal for us. Let's go over to the export modal blade file and we'll just write export in there and let's trigger this from our transactions table. So let's find where we are exporting here and let's go ahead and add in a wire click to this and to go ahead and open this modal up we're going
01:38
to dispatch the open modal event. Now what I'm going to do is start to pull all of this stuff down just it's a little bit clearer what we're doing and the component here is going to be the export modal. Okay let's try this out so let's go over to our dashboard let's click export and that's not working so yeah open modal that would make sense actually dispatching the right event and there we
02:06
go there is our component. Okay so for the modal itself we're going to keep this pretty straightforward so let's just start out with some padding around here let's actually bump that up a little bit and then inside of here once again this markup is available on the github repository and we just have a title here export record you're about to export and the count of the records we're about
02:28
to export will send you an email when the export is available which of course we're going to cover later as a feature. We've got two buttons one to start the export one to cancel the process that will just go ahead and close the modal. Let's check this out first of all so let's go ahead and click export here and there we go that is exactly what it looks like so let's get the
02:48
cancel button done first that's really straightforward when we click this we just want to dispatch close modal and that will go ahead and close off the modal for us let's click export and click cancel there we go that closes it off and then why don't we just hook this up to a method while we're here so let's say wire click and let's say start export let's copy this go over to
03:15
our export modal and let's create our method to handle this export of course we're not doing anything in there at the moment but we should now be able to click on that and there we go we get the export out okay so in terms of passing along the count of transactions or the ids of the transactions we can do that directly when we dispatch this so we're going to pass through some
03:42
arguments to this and we'll pretty much do exactly the same thing for the import so we really only need to do this once the first argument is going to be the model because we kind of want to make this export modal as reusable as possible let's say we created another data table with a different data source another model we would not really want to create another modal to handle this we want this
04:05
single modal to handle everything so the model we're going to pass through here now unfortunately what we need to do here is pass through a fully unescaped version of this so we need to say models and transaction we'll see how we can use that in a minute and then more importantly are going to be the ids so how do we get these well we want to pass a javascript array in here since
04:32
this is pure javascript so we're going to say json encode and we're going to pass through the selected ids let's see how we can pick these up inside of our export modal so the first thing is going to be the model which is just going to be a string for now we can get an instance of that later then we're going to have an array of all of the ids so when we click on this why don't we just
04:58
dump out the list of ids just so we can see this working of course we need to reference this okay let's try this out so let's click export and let's click start export and yeah we just get an empty array but let's try and select all of page one we could select all of page two as well if we wanted to and let's try this export process again and there we go there are the ids that we want to
05:21
export now lastly let's just make sure we can get an instance of this model because obviously we need to know what we're actually sending through and then maybe we will go ahead and output the count that we're going to be exporting as well so to start with let's go and create out a maybe a builder method that kind of makes sense we're going to return this model which remember
05:46
is just a string but what we can do is then immediately just invoke that to grab the query instance that will give us a builder which we can continue to chain on like get count etc anything that we need to do now here we're not going to scope this to the ids we're going to do that within the actual start export process itself but we've got the builder instance so we can use that if we
06:11
need to okay so lastly let's go over to our export model here and let's fill in this x value of how many records we want to export now this isn't as easy as just going ahead and dumping the count of the ids out if for example we did do that and say ids then we would get something like this if we didn't select anything we would see export zero records for nothing selected so what we want is
06:42
really inside of here another method so let's go ahead and create our computed property for this so let's make this computed and this is going to be record count now the condition of here is if we have some ids selected then we want the count of them ids so we just return that count if that's not zero otherwise what we can now do is lean on our builder which remember represents
07:11
all of our transactions and we can say count so that will just grab a count from the database which of course in our case is going to be 100,000 records okay let's go ahead and just type in this because we know that's always going to be an int and let's go over to our export model and we'll change this over to this and record count we'll fix up the pluralization of records as well
07:33
we might format this as well to make it a little bit easier to read i'll show you how to do that so let's click on export and yeah models transaction not found okay so let's go over to where we're triggering this from and yeah we just need an extra um slash in there to be unescaped and there we go we've got 100,000 records of course though if we just select page
07:54
one we get 10 more records being exported right we can do better than this because obviously if we have one record then the pluralization just isn't there but also if we want to export 100,000 we might want to format that in a slightly better way so the first thing is going to be how do we format this in fact let's work on the pluralization first that's pretty straightforward string plural
08:18
and record and this record count so now if we only have one we should if we select that again just get one record great now in terms of formatting this we can do this using the number helper from illuminate and support we can say number format and that will give us a much nicer format because we're working with so many records potentially what we now see if we just hit export
08:48
is this comma separated so it actually reads like a number rather than just dumping an integer on the page so there we go we're about to export 100,000 records which we can comfortably do with the system we're about to build but we can also select any number of records to export them as well let's start to move over to the actual export process

Episode summary

In this episode, we jump right into building the export modal for our data table. When you click the export button, we want to trigger a modal where you can confirm the export, and the logic will handle whether you've selected specific records (by their IDs) or are exporting everything.

We start by picking a handy package called yElementsModal to make modal creation super simple, and go through installing it and wiring it up with Livewire. We then create a new ExportModal Livewire component, making sure it extends the modal base from the package. After adding a basic template and hooking it to our export button, we test it out to see the modal popping up.

The modal itself is straightforward: it shows you how many records you're about to export and gives you options to start the export or cancel. We make sure that the 'cancel' button just closes the modal nicely, while the 'export' button triggers the export logic (which we'll build out more in the next step).

Next, we look at how to pass the selected record IDs and the model into the modal, so it can know what exactly you're exporting. We make sure this is generic so we can re-use the same modal for different data tables or models by just passing in different model class strings and selected ID arrays.

To display the correct number of records, we build a computed property: if you've selected some rows, it counts those; if you've selected none, it defaults to counting all records in the table. For usability, we add pluralization and format the numbers nicely (with commas for thousands) so it reads better, especially for big exports.

By the end of the episode, the modal is fully functional: it counts and formats the records properly, responds to button clicks, and can handle both exporting selected records or the whole dataset. Next up, we’ll actually build the export process itself!

Episode discussion

No comments, yet. Be the first!