00:00
(upbeat music) Okay, so before we move any further with our movie creation form, let's go ahead and add the ability to edit it.
00:09
Then we can merge the two forms together. That way we're just working with one version of this form since both versions are going to be relatively the same and offer the same fields.
00:18
So to start with, let's go ahead and duplicate our movie creation form into a new page. So we'll scroll on down to where we have our pages, admin movies create. Let's give that page a copy and a paste
00:28
directly inside of our movies directory. Go ahead and right click that and let's rename. We'll just call this edit. Then we jump on up to our movies controller, scroll down to where we have our edit.
00:37
And in addition to params, we're also going to want our view. Then for starters, we can return view, render pages, admin movies, and point that to our edit page.
00:47
In terms of this edit page state, the first thing that we're gonna wanna do is keep the same state that we have on our create page, which consists of our statuses and our synapse.
00:56
These make up the option values for both our movie status and writer director fields. One option is to give these two here a copy and paste it down inside of our edit.
01:04
An alternative option is to move these calls into a service. We already have a movie service here so we can make use of that. I'm gonna go ahead and give these a copy real quick. Now we can jump into our movie service.
01:14
I'm gonna scroll on down and let's add in a new method. We don't have anything special going on with this particular method. So we're gonna make it static async,
01:21
get form data or get form options, something of the sort. We can make those two queries and then return back that data. So statuses and synapse.
01:31
We need to import these two models. So I'm gonna hit command dot and add our import. And we need to do the same thing with our movie status. So command dot and add our import.
01:39
This allows us to just have one location where we can define the queries needed to build out the actual form for both our create and edit fields. And of course, notice the omission of our actual movie data,
01:49
which we'll need specifically just for our edit form. So now we can jump back into our movies controller, replace both of these queries with const. We can just do data equals await movie service.
01:59
Remember, since it's static, we don't need to instantiate an instance of this class. So we can just call get form data like so. And then rather than individually passing in state
02:07
to this form, we can just pass in our data. Scroll on down to our edit and we need to do the exact same thing.
02:12
So const data equals await movie service dot get form data. And rather than providing the data as the entire state of this particular page,
02:22
instead we want to spread it in just like so. Because in addition to our data, we also need to get our movie. So let's do const movie equals await, import our movie model if it's not already,
02:32
it looks like it was. And we're going to be working with the ID here from our params. So we can do find or fail, since we don't want to progress any further with the edit,
02:40
if the idea that we're looking for does not actually exist. Cool, so there's our movie. We can just add that into our state like so, and we're good to go there. Let's jump back into our edit page now,
02:49
because we now have access to our movie and we just need to make use of it to set the default values for our form inputs. So value movie dot title, just like so. And while we have it on our page,
02:59
we also need to update our route as well as our title. So we can switch our title to something like update and then do movie dot title to give a little note
03:07
as to what movie we are actually changing. Our route goes from admin movies store to admin movies update. We need to provide in the ID, which is our movie dot ID.
03:16
And we need to specify a query string with the underscore method set to put, so that we can use our put route handler to actually handle this route here.
03:25
Okay, with those two set, we should be good to go ahead with setting the rest of our default values here for our movie. So we'll do movie dot release at. Now this is a lux and date time,
03:35
but the actual field we're working with here is a native date field. So we're going to need to convert our release at to an applicable date field value.
03:44
So we're gonna need to switch this to format and this one's getting a little long, so I'm gonna go ahead and break it down just like so. And the format that we're gonna wanna change this to
03:53
should be YYYY for a four digit year, hyphen MM for a two digit month and day day for a two digit day. Believe I've got those tokens right.
04:03
The process would be relatively similar here if you needed to do something with a time, you would just switch these to the time applicable fields. And of course you could do two separate fields if you need a full date time.
04:12
So you could do a date field and then the time field and merge the two together before saving them into your record. Okay, so next we have our select other than doing a value directly on our form.
04:22
Instead, what we wanna do is mark the active option. So I'm gonna go ahead and break the status name down into a separate line.
04:28
And what we wanna do here is HTML, ATTRS, provided an object we'll add. And I always get options confused on whether or not that you selected or checked.
04:37
I believe it's checked, we'll see whether or not I'm right. And then we'll just do movie.statusID equals the status option ID.
04:45
So if the current movie that we're editing's ID matches the current option's ID, then we'll add in a select attribute marking this particular option as the active one.
04:54
We'll go ahead and give this line here a copy because I believe we have something similar going on for our Sinist fields. So we'll break these down as well. Go ahead and give that a paste
05:04
rather than checking the status ID here. Instead, we wanna check the writer ID and the Sinist ID. Okay, let's give that a copy once more
05:12
since this one's a lot closer to our director. Scroll on down, break this down into a new line, paste it in there, and switch this from writer ID to now director ID.
05:22
All right, next up we have our text areas. So here we'll set a value directly on here,
05:27
movie.summary, and then we have value movie.abstract. And then instead of creating a movie, this will be updating a movie. Okay, cool, so if we got everything right,
05:36
that should do it. Let's go ahead and jump back into our browser. Let's go ahead and jump down into our list page. So our admin movies index, scroll down a little bit here.
05:45
We should have an empty th and an applicable empty td. Within here, all that we need to do is add a link to the edit page.
05:52
So we can do a href route admin movies edit, provided the ID is the movie.id, and then just say edit there for the action.
06:02
All right, let's jump into our browser and give it a test. So here we have My Cool Movie number one. We can go ahead and click edit on that. All right, we jump into the edit page where it says update My Cool Movie one.
06:12
The title's applied. Our release date is not, so we'll take a look at that. But our status, writer, director, and abstract all look good. And we did leave the summary empty,
06:21
which is coming through as empty here too, awesome. So the first thing that I'm gonna check with our release date is that the tokens I'm using are the actual tokens I expect them to be.
06:30
So let's go and jump into our edit page here. Scroll up a little bit to where we have that field. I'm just gonna give this block here a copy and plop it inside of an inspect.
06:39
So inspect, just like so, so that we can jump back into that page and visually see, yep, okay. So yyyy obviously is not right.
06:48
I bet you it must be lowercase. Let's try that. So yyyy, give that a save, jump back into our browser. There we go, that looks a little bit better. Let's go and see if that works for our field value.
06:58
So lowercase yyyy, give that a save. Now we jump back into our browser. And sure enough, it did, awesome. Okay, let's jump back into here and get rid of our inspect.
07:06
It is always easy to get those tokens confused. You can search for Luxon date/time and jump into the documentation for it. Go into get started, go on down to formatting.
07:15
And they should have all of the tokens listed somewhere within here. Yeah, there's a bunch of string helpers and there's the tokens, okay. You have all of the tokens listed here
07:23
if you're ever confused on what you need to use for your applicable use case. But for us, we got ours back to working. So now what we need to do is make sure that we can actually adjust all of these fields
07:32
and that it saves applicably. So to make things evident, I'm just gonna do hyphen edit instead of 6/26/2024. We'll make this really obvious and switch this to 2025.
07:42
For our status, we'll go from post-production to released. Our writer, we'll go from Lila to Quincy and our director, we'll go from Trudy to Natasha. We'll add in a summary.
07:52
This is my summary and we'll edit our abstract. So just do hyphen edit there as well. Let's go ahead and hit update. And oh my gosh, you know what we forgot to do is actually handle the route.
08:01
So let's go back, hide that back away, jump into our movies controller because we actually need to handle the update submission and do something with it. We got back nothing whenever we attempted that
08:10
because we're not returning anything back. I got ahead of myself there. Okay, so what we wanna do is create a validator for this, the same way that we did for the create.
08:19
So we can jump into our movie validator. Our update's going to be relatively the same as our store, if not exactly the same. Yeah, I think it's gonna be exactly the same.
08:28
So what we can do is get rid of the action store and just do movie validator. Trying to think ahead here and I don't think this is going to change at all. So we can normalize that and jump into our movies controller,
08:38
scroll on up, fix our import here for our movie store validator and switch that to just movie validator anywhere that we're already using it. Should just be two spots. And then while we're up here,
08:47
we can go ahead and get rid of our unused imports. Scroll on back down, make sure that our store looks good. We can go ahead and give that line there a copy because we'll now also need it within our update. Give it a paste right in there.
08:57
Then we'll need to get our movie. So const movie equals await movie.findOrFail for Ram's ID.
09:04
Then we can await movie.merge the data that we have and save that in. Then we can go ahead and return.
09:11
Let's go ahead and grab our response out of the HTTP context and do response.redirectToRouteAdminMoviesIndex.
09:20
Okay, that looks good. Now that we actually have an update procedure defined, let's go ahead and jump back into our browser and give this one more try. So I hit back here and Firefox managed to keep
09:29
all of the edits that I have made. And let's go ahead and hit update movie one more time. And there we go. So we can see our edits actually applied
09:37
and we got redirected back into our admin movies index page. We now have my cool movie one hyphen edit. Our status is no longer post-production, but now released.
09:45
Our writers now Quincy Abernathy and our directors now Natasha. So everything there seems to be working A-okay. We jump back into the edit page. We see all of our edits maintained.
09:54
We can also go ahead and get rid of them as well. So we'll switch this back to 2024, back to post-production, back to Lila. And I think we had it at Trudy.
10:03
We can leave the summary and that's fine. And let's go ahead and get rid of that. Actually, you know what? Let's get rid of our summary to make sure that that's going to clear out okay, because I bet you it is not.
10:12
Hit update to go back into edit to check our summary. And sure enough, it did not actually clear out. And the reason it did not clear out is that we had our browser back away. Go back into our movie validator.
10:22
We have it set as an optional string, meaning that if it's not provided, it's not going to come through with the underlying validated data.
10:30
And hence, won't actually be applicable to our merge call because it's not going to be inside of that data. So to remedy this, what we can do instead is switch this from optional to nullable.
10:39
Optional is going to mean that we may or may not actually include a summary inside of our form data. So we can optionally include it. Nullable means that the field is going to be provided,
10:49
but it may or may not have an actual value. And of course, you can chain the two together as well. So if you may or may not provide a field and it may or may not have a value, you can do optional and nullable together.
10:59
In our case though, we're always going to be providing in a summary field, but it may or may not have a value. So nullable here is what we're after. That's also true for our release that as well.
11:09
So this will switch from optional to nullable. And you'll notice that our value down here is now potentially nullable as well. So we need to account for that too.
11:17
If not value, then just go ahead and return. Now that we have these set to null, if we go ahead and take a look at our movies controller, you're going to see that our data is actually not happy with this
11:25
because we have a summary of type string or null, but instead of our movie model, we have a summary of type just string. And furthermore, if we scroll down to our database,
11:35
migrations, go into our movie table creation migration, we have the summary set to not nullable with a default value of an empty string.
11:42
So rather than normalizing empty strings to null, we're instead normalizing them to an empty string. Of course, there's a couple of options when it comes to dealing with this.
11:51
First and foremost, you can use Vine.js' default behavior of switching empty values to nullable, make that reflected inside of your model,
11:59
and everything will be happy A-okay with how we have it now, leaving just our movie validator to nullable for that particular value.
12:06
For example, if we were to jump up into our movie model, switch this type to string or null, and now take a look at our movies controller, you'll see data is perfectly happy with that. However, if you want to leave things
12:16
how we currently have it and have the default value set to an empty string, what we could do instead of setting this column to nullable is we can set it back to how we had it originally,
12:24
where the default value is an empty string and the column itself is not nullable. Jump up into our movies validator. We want to leave this as nullable
12:32
so that if the value is null or an empty string, we still get our summary field value so that it updates accordingly. But we want to just transform this value.
12:41
So we'll take the value in and do a ternary check to say something like, if we have a value, then just return a value, otherwise return an empty string. Of course, similar to how we did with our exists and unique,
12:51
you could also create your own VineJS rule called something like maybe default two that does this check automatically. And then you could just provide in the default value.
13:00
We only have a few isolated instances where we're going to actually want this. So we'll just leave this as is here. With that applied, our movies controller should be happy
13:08
because we're now normalizing the returned data to a string. So if it's nullable, we're normalizing it to an empty string for our summary, which will then merge into our data now.
13:16
So if we go ahead and jump back into our browser, jump back into edit, scroll down and get rid of our summary, update now, go back to edit, our summary is cleared out. Awesome.
13:25
So everything there seems to be working A-okay now.
