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
09. The UI to map columns

Episodes

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

Transcript

00:00
We've dumped out our new columns that we want to map. Now let's actually go through and work on the UI, iterate over these, and then allow these to actually be selected and mapped up to what we need.
00:09
And then we're pretty much halfway there. The rest of this is just going to be importing the data and making sure this matches up. So over here, where we're dumping out the columns to map,
00:19
we can leave that if we want to. We're going to go ahead and iterate through this part here. So this forEachColumnsToMap part here. And this is pretty much what you see in this area here.
00:33
So we want one of them for each of the columns that we want to map over. So let's get started on that forEach. We're going to iterate, of course,
00:41
over the columns to map that we've just created. But of course, we now have a key and a value. So we're going to say column and value. And we can go ahead and end the forEach just there.
00:52
So if we just give this a refresh and import, click import again, we've now got one, two, three, and four. So of course, there are four that we want to
01:01
potentially be able to import. Now, we don't want this to actually show until we've selected a file. It doesn't make any sense because we're not going to know
01:10
what headers are inside that CSV file. So we're going to add a little check up here on this ifFileUploaded section that I've added and endFileUploaded just to some sort of check
01:23
so we don't show this if we don't have any file headers. So I'm just going to use the file headers here. We could use something else and we can always change that later.
01:31
But let's go ahead and add this in here. And if, and we should be good. So when we go ahead and hit import now, we don't see anything until we've actually selected a file.
01:42
And we know what the headers of that file are that we can start to choose from this dropdown. So speaking of this dropdown, let's fill these in now. It's pretty easy because if we head down to open this up,
01:57
and we head down to here, we basically already have the file headers as a property. So we can just add a really simple forEach loop in here to go over the file headers.
02:07
And we'll just call them fileHeaderSingular and the forEach there. And then in the here for the column, we can just output the fileHeader.
02:19
And while we're here, we could map this up to a value as well. So fileHeader, so that's very simple. So let's go hit import.
02:27
It's really annoying that we have to keep selecting a file, but no worries. And there we go. So for example, if this said ID, we could map it to ID.
02:35
If it said first name, we can map it to first name, whatever we wanted to do. Now we don't have the labels in here just yet. And we don't know if they're required.
02:43
That's something we're gonna work on later. That's what that asterisk is for. But let's output at least the column label. So we have that in there.
02:50
So we're gonna go ahead and say column, which is just the basic value for this. We are gonna map this up later to a more readable version. But at least now, if we go ahead and select this,
03:03
we have something that looks a little bit better. So the ID in the database, we can map up to ID, first name, last name, et cetera. We've seen this already in the introduction.
03:12
So let's fill in some of the bits that we're gonna need to actually map these values up. So the label itself needs to be for the column itself that we're iterating over.
03:23
And the select over here can now have a name of column and an ID of column. Essentially, so when we go ahead and click on one of them, it maps up to it.
03:36
And also we now have that value in there that we can use. So if I click on that, that, and that, they will map up nicely. Okay, so how are we actually gonna map
03:46
what we choose in here up to here? So essentially, when I select ID here, I want the value ID, which is of course from the CSV, to be put into the value of ID that we have here.
03:57
Well, we can go ahead and add a wire model to this. Really importantly, we're gonna go ahead and defer this. I will remove this in a minute so we can see this working. But what we don't wanna do is every time
04:07
we select every single column, send a network request to the backend. It doesn't make sense to do that. So we are gonna include defer,
04:14
but I'll remove that in just a second. So we're gonna go ahead and say columns to map, which is remember now our array with keys and values, and we're gonna say dot,
04:23
and then the name of the thing. So if we said columns to map dot ID, Livewire is clever enough to work out that you're trying to assign the value
04:31
of this particular select in this loop to the ID within the columns to map array. Of course, we're not gonna hard code it. We're gonna go ahead and say column,
04:41
but that should pretty much do it. So like I said, I'm gonna go ahead and get rid of defer just for now so we can see this working in real time
04:49
with our JSON dump. But let's go ahead and choose that file again and see what we can do. So ID, first name, last name,
04:58
and of course, email. Great. So that is all mapping up really nicely to everything that we would expect.
05:05
Of course, it just so happens at the moment that the columns we have in our database match the CSV exactly because it's an export. But if it wasn't, then of course,
05:13
first name might be customer underscore first name, something different to what you have. But at least we know now that is mapping up nicely. So because that's mapping up,
05:23
I'm gonna go ahead and get rid of this dump out here. And we now have the ability to map these together so we know exactly what we need to import and where to put it.

Episode summary

In this episode, we start building the user interface that lets us map the columns from our imported CSV file to the columns we want in our database. First, we iterate over the new columns we've dumped out and set up a loop in our UI so that each column we want to map gets its own row. This makes it clear which CSV column is being mapped to which database column.

We add logic so that this mapping UI only shows up after we've selected a CSV file (since we don't know the headers until then). Once a file is selected, the column mapping options appear, and for each, you get a dropdown that includes all the headers found in the CSV.

Next, we make sure the UI looks decent by adding labels for each mapping and connect each dropdown to the right value. That way, when you pick a CSV column for a particular database field, it stores that choice so we know how things are mapped up.

To make the interaction smoother, we wire up Livewire properly, allowing the selections to map directly to our internal data structure. For demonstration, we even remove the 'defer' modifier temporarily, so we can watch the columns update in real time as we map them.

By the end of the video, we've got a working interface where it's clear what needs to be imported and where it will go, with all mapping happening live on the UI. The system is now ready to handle more complex mappings where the CSV columns might be named differently than your database fields.

Episode discussion

No comments, yet. Be the first!