🕰️ Chapters
- Setting Up Our Edit Page
- Creating MovieService getFormOptions Method
- Querying Our Movie for Editing
- Changing Our Edit Page Text
- Setting Default Values from our Movie
- Adding An Edit Link on our Admin Movie Table
- Testing Our Edit Page's Default Values
- Debugging Our Released At Value
- Validating and Updating Our Movie
- Testing Our Movie Update
- Clearing Our Empty Values
- Transforming Values for Not Nullable, Default Values
Allowing Admins to Update Movies and Clear Values
In this lesson, we'll recreate our movie form for the purpose of updating our movies. We'll also add the ability to clear values and discuss the difference between VineJS' optional and nullable chain options.
- Author
- Tom Gobich
- Published
- Jun 15
- Duration
- 13m 27s
Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.
Adocasts
Burlington, KY
Transcript
Allowing Admins to Update Movies and Clear Values
-
(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.
-
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.
-
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
-
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.
-
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.
-
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.
-
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.
-
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.
-
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,
-
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.
-
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.
-
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,
-
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.
-
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
-
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.
-
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,
-
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,
-
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,
-
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,
-
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,
-
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
-
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.
-
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.
-
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,
-
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.
-
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
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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
-
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
-
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.
-
All right, next up we have our text areas.
-
So here we'll set a value directly on here,
-
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,
-
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.
-
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.
-
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.
-
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.
-
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,
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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
-
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
-
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.
-
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.
-
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.
-
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
-
because we're not returning anything back.
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