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
10. Setting required import columns

Episodes

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

Transcript

00:00
Now that we have our column mapping set up and this is working nicely, it's really important that we validate these based on what is required.
00:09
So you might have columns in here that you don't need to import, in which case we need to show an error. So they might just be optional columns that the user can import, but they're not necessarily required. They might be nullable in the database, which we have a couple of.
00:24
So let's go ahead and get started on this. We'll again start the base index here because we're going to be passing through to here what the required columns actually are. So let's go and say required columns and you could extend on this and make this really
00:40
really advanced if you wanted to, but to be honest just for an importer this kind of makes sense. So we're going to say id, first name, last name and email. Of course we could add another column in here because all of these will now show as required, but that's
00:56
absolutely fine. So we've got these required columns, again hopping over to the csv importer, we want to go ahead and add in an array in here of them required columns which will by default just be an empty array. And now what we need to do
01:10
is figure out when we press the import button at the bottom here, how do we then validate them? Because we're passing them in as this array, what we're actually going to need to do, and I mentioned this earlier,
01:22
is dynamically build up the required validation rule for these. So we're going to have to go ahead and map through these, build the rule up and then merge in the file rule as well. That's why we did this validate only file
01:38
when we upload the file, because when we validate everything we don't want to also validate each of the columns inside of here. So we're going to play around with this inside of here, but before we do that we need to have some sort of hook inside of our csv importer. So when we
01:53
actually click import, so let's have a look at the import button, when we actually click on this it actually does something. So that's going to be in the form itself, so we can say wire, submit, prevent, and we could just call an import method and we can
02:08
trigger the validation from there. So let's do this maybe just down here underneath updated file. So create that import method and we'll just die dump on import here for now. We also have this disabled property on the button, which I'm going to get rid of
02:25
temporarily. We are going to be disabling that until we have mapped all of our columns. So let's go ahead and hit import, let's hit import here and there we go. We get that died and done, so we can validate at that point.
02:38
So let's figure out the rules first of all. So if we head over to our csv importer and here we just say this validate, that's going to go ahead and call our rules. So we can still die dump in there, that's fine. And if we head up to our rules we're now
02:54
going to die dump out the mapped validation rules for each of the things that we've passed in. So let's create out a variable to represent this, we'll just call this column rules. We're going to collect up again because we're just dealing with a plain array,
03:08
the required columns, and once again we're going to map over these with keys so we can create out an array with a columns to map dot and then the name of the column and have this required. So essentially what we want to build up here, if we just return back down to this
03:24
array, we want to say columns to map dot id for example to be, if we just add required in there, we also want first name if it's required, if we've specified it within that property that we're passing in
03:40
and so on and so forth. So we want these to look like this but of course do this dynamically. So we're going to go ahead and let's just create out an actual closure here to make this a little bit more easy to read. That's going to have a column inside of here
03:54
and we're going to return columns to map dot the column name and then assign to that an array with the required ruling. So that's just going to give us exactly what we just saw inside of here. Let's die dump on this just so we know that this is looking good, so column
04:12
rules and let's go ahead and give this a go. So if we hit import, click upload a file, head over and choose the customers file, there we go. We have got the id which is required, the first name, the last name because obviously we've specified all of these. If we didn't we would
04:27
have less in there. So now what we want to do is merge this in with here. That's pretty simple with php, we just need to use the array merge function and we can merge in the column rules and then this array here with the file rules in. Now what we can do
04:44
is go over to our csv importer and where we added in our validation error here we can actually add this in now. So let's say error and this is dynamic again because remember we're iterating through this so each of the validation rules
04:58
needs to map up to what we're iterating through. We're going to say columns to map dot append on that column and go ahead and of course end that error there and then in here we just want to output the message. Now it's not going to look great at the moment but we're going to
05:15
be tidying this up in the next episode with some custom names for the columns that we want to import. So let's try this out. So to actually test this, in fact we don't need to really do anything because all of these are
05:29
required. So what we should now find is if we open up our customer csv and we have all of these in here and hit import, we get an error for each one. If we change this to id and hit import the message goes because of
05:42
course we've chosen it and the user would then have to just go through and fill in each of these until they've done all of them and only then would the rest of our import method run after we had called that validate method.

Episode summary

In this episode, we're taking things up a notch by making sure our CSV import tool knows exactly which columns are absolutely required for a successful import (think crucial columns like id, first_name, last_name, and email).

Here’s what we do:

  • We set up a way to define which columns are required, and pass this information through to our CSV importer component.
  • Inside the importer, we work on dynamically building up validation rules—so when the user clicks the import button, we can check if all the required columns are mapped and filled out.
  • We wire up the import button to trigger validation, making sure users can’t proceed unless every must-have column is set.
  • There's some live coding and debugging: we test the rules, see what validation errors show up if required columns are missing, and make sure errors display nicely next to each relevant column.

The episode wraps up with a quick test: we deliberately unset a required column to see the validation error, fix it, and check that the error disappears. We also mention that things are going to get tidied up further in the next video, especially with custom column names. So, at the end of this one, you’ll have solid, dynamic required column validation in place for your CSV imports!

Episode discussion

No comments, yet. Be the first!