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