00:05
So now we have the ability to add and remove crew members as well as designate
00:08
what their title is for this individual movie.
00:11
Let's go ahead and do the exact same thing for our cast members as well.
00:14
It's gonna be relatively similar.
00:15
So within our movies controller here, inside of our edit method,
00:19
this is where we're querying the array of crew members applied to the individual
00:22
movie that we're editing.
00:24
Whenever it comes to create, remember if we scroll on up to our create page,
00:27
we don't need to worry about this, the movie's data, or anything in general
00:31
because nothing has been applied to the individual movie as we're just
00:34
creating it there.
00:35
But for our edit, we do need to worry about that.
00:38
So we can give our crew members here a copy, give ourselves a couple of new lines
00:42
and paste it in, change it from crew to now cast, and
00:46
we also need to change the relationship to the exact same.
00:49
So switch it from crew to cast.
00:51
The rest of the query there can remain the same as it's just filtering it down to
00:54
the individual movie that we're editing and then ordering it by its sort order.
00:58
So that applies for our cast as well.
01:00
Then all we have to do is add our cast members into our page state.
01:04
So let's go do that.
01:05
So cast members right there.
01:08
And now we have access to both our crew as well as our cast members inside of our
01:11
create or edit page, specifically whenever we're editing a movie.
01:15
So let's go ahead and jump into our create or edit page now and
01:18
come down to our H4 and the div where we have our x-data members applied that
01:23
we're passing in our crew members.
01:24
Essentially, we're going to want to replicate this whole section.
01:27
So I'm going to hit the caret to collapse that down and
01:28
make copying this just a little bit easier.
01:31
Give that a copy, give ourselves a couple new lines underneath it, and
01:34
then paste it on it.
01:35
For the most part, things can remain the same here.
01:37
If we scroll on up to the top where we have this section,
01:40
we're going to want to change instances where we have specifically crew to cast.
01:43
So for example, our heading here will change to cast members from crew members.
01:47
Where we're passing in our crew members,
01:48
we're going to want to instead pass in our cast members.
01:52
The x-data that we have here from Alpine JS is going to be scoped to this
01:55
particular div, so we don't need to worry about collision between this div and
01:59
our crew members div up above it.
02:01
And since they're going to be scoped to the divs,
02:03
that means this members is going to be used for this member array.
02:06
And up above, this members would be used for the crew members array.
02:10
Okay, so let's scroll back down and continue going through and
02:13
replacing instances where we have crew with cast.
02:17
We also want to do that with our name.
02:18
So rather than crew, we'll have cast as the name prefix for our fields.
02:22
And then down here, cast there as well.
02:24
And in addition, this field itself is not going to be a title, but
02:27
rather a character name.
02:30
So within the name field of our cast array,
02:33
remember this index here is what's making this an array.
02:35
And then the second square brackets is the individual property name inside
02:40
of this index of the array.
02:42
We want to change that property name from title to character name.
02:45
We also want to change the reference of the X model from members index title
02:49
to character name there.
02:52
And then from title up here on the label to character name there too.
02:57
And I believe everything else should be able to remain the same because we're
03:01
still working with our synists, so the options there remain the same.
03:04
We're still working with our synists there, so
03:06
the X model there remains the same.
03:08
And we're still working with a variable called members,
03:10
scoped to this individual div, working with our cast members.
03:14
And if we scroll down a little bit, we also have the add button.
03:17
The click functionality should remain the same there too.
03:19
Although we do want to switch title here to character name as well, and
03:24
switch add crew member to add cast member there as well too.
03:28
Cool, so if we give that a save and jump back to our browser and
03:30
take a look at things, we should now see we have a crew member section as well as
03:34
a cast member section.
03:36
We should be able to add a cast member and it will add somebody in,
03:39
or we can select the cast member and give them some character name there.
03:44
The last thing that we have left to do is the actual store and
03:47
update functionality of the cast members here.
03:50
So if we go ahead and hide our browser back away, and
03:53
we'll first wanna jump into our movie validator.
03:56
And right here we have our crew, we can go ahead and give that section,
03:59
including the optional down there, a copy, give ourselves a new line, and
04:04
paste that in, changing the name from crew to now cast.
04:08
As that matches within our creator edit field,
04:10
what we have named these actual field names.
04:13
So that's the root key name and then inside of there is gonna be an array
04:17
of objects where we'll have an ID and a character name property inside of it.
04:21
So for our validator, we'll want to reflect that where we have an array
04:25
of objects with an ID and a character name property inside of it.
04:33
Since we are still working with Sinist,
04:34
the ID validator there can remain the same, so we're a-okay for that.
04:38
And we can jump into our movies controller now, scroll on down and
04:41
we can take care of our update first.
04:43
So in addition to extracting out our crew,
04:45
we also want to extract out our cast now.
04:48
Scroll on down a little bit further and give our crew members portion a copy and
04:53
a paste, changing the name from crew to cast and crew to cast there as well.
05:00
Then rather than having a title, we have a character name there.
05:04
And I'm gonna go ahead and give that a copy and
05:06
paste it where we have title there, as well as title there.
05:09
So that now we have character name in all three places.
05:12
Then we have a number of red squigglies going on, so
05:13
I'm gonna go ahead and give it a save, so that it formats.
05:16
And last thing that we need to do is add these to our movie,
05:19
just as we are here for our crew.
05:21
So we can await movie related cast members and
05:25
sync those in as cast members there.
05:29
Otherwise, provide in an empty array if none were provided.
05:33
Give that a save and that should be our update functionality done.
05:36
We can go ahead and scroll on up now to our store functionality,
05:40
which should be right up here.
05:41
And it looks like we left this out altogether.
05:44
So we're gonna wanna go ahead and account for it, so
05:46
we can extract our cast and our crew out here.
05:50
And we'll want this to take place after we have created the movie.
05:52
So we'll wanna grab a reference of our movie, so const movie there.
05:56
And the actual functionality is gonna be the exact same as we have within
06:00
our update.
06:00
So if we scroll on down to where we have this section, we could probably go ahead
06:05
and just extract this out into a service, so that we don't have to have this in
06:09
two separate places, as it's quite a decently sized portion.
06:14
So I'm gonna go ahead and cut this out.
06:15
And let's go down to our services, movie service, and
06:19
we'll just put this down at the bottom.
06:21
We can do static, async, and we can call this method something like sync,
06:25
cast, and crew.
06:27
And we can accept in cast and crew members, and
06:30
we'll fix the typing here for that in a second.
06:32
Let's go ahead and first just paste what we had in.
06:35
Okay, let's go ahead and scroll on up, and
06:37
now let's fix the types for our cast and crew here.
06:39
So I believe we should be able to infer this from our validator.
06:42
So we should be able to use infer.
06:44
Looks like we might already have that imported and
06:47
provided the type of our movie validator, and import that from our validator.
06:52
Now, this is our entire movie validator.
06:54
So if we take a look at the type here, it's gonna come back with our poster,
06:58
poster URL, title, summary, so on and so forth.
07:00
We just care about the cast here.
07:02
So I believe we should be able to reach into there and
07:06
specify that we just care about the cast type for that.
07:10
And now if we take a look at our cast type,
07:12
it's just an array of ID and character name or undefined.
07:15
So cool, that matches exactly what we're looking for.
07:18
Now we can do the exact same thing here for our crew.
07:21
So we can infer type of movie validator and reach just for the crew.
07:27
There, give that a save for formatting.
07:29
And let's scroll on down and see if we have any red squigglies.
07:32
We do, we aren't passing the movie in.
07:34
So we also want to pass the movie in here as well.
07:36
So that will be movie of type movie model.
07:40
Okay, so let's give that one more scroll through our method.
07:43
And now it looks like everything there is happy.
07:45
So we should be able to give that a save, jump back into our movies controller.
07:48
And let's now await movie service.
07:51
Remember, we set that as a static function, so
07:54
we don't need to instantiate our movie service at all.
07:56
But rather, we could just use this as a static method and call our sync cast and
08:00
crew, provide in our movie, the cast and the crew data that we have.
08:06
And now we should be okie doke.
08:07
Furthermore, if we didn't want to save our movie, if the cast and
08:11
crew failed or vice versa, we could wrap this in a database transaction as well.
08:16
So before we covered how you could do it with a try catch, but
08:19
there's also managed transactions too.
08:21
So for this, we could do await DB to reach for the database module dot and
08:25
call transaction.
08:26
And this accepts in an option to take a look at the overloads
08:30
that is a callback that's then provided in the transaction client.
08:34
And any operations that we perform inside of the transaction callback will then
08:39
essentially be wrapped inside of a try catch.
08:41
And if anything fails, then the callback will self manage itself and
08:46
roll back our changes.
08:47
And if the callback completes successfully,
08:49
then it will go ahead and commit the changes.
08:52
So let's run through that in practice.
08:53
So we have an async function that accepts in our TRX of transaction.
08:58
Then we provide it in a callback function.
09:00
We can move our movie merge data inside of there as well as our sync cast and
09:04
crew.
09:05
Of course, now we need to bind that transaction to these operations.
09:08
And we have an instance of our movie here.
09:11
And for our sync cast and crew, we're working with the relationship from our
09:15
movie.
09:15
So if we bind the transaction directly to our movie instance,
09:19
it will cascade through that relationship.
09:21
So we can just do movie dot use transaction here and provide it the TRX.
09:27
And now this save call will use the transaction off the movie model and
09:31
our sync cast and crew will use the transaction off of the movie model as well
09:34
because it directly works with those relationships right down here.
09:40
Awesome, so let's jump back into our movies controller.
09:42
I got an extra line right there I'm gonna get rid of, give that a save and
09:45
we should be a okay now for our update.
09:47
And now let's go and scroll on up to our store method right up here
09:51
as we need to do something relatively similar.
09:53
So we can go ahead and start with our transaction.
09:55
So await DB dot transaction, just as we did before,
10:00
this will be a sync function that accepts in our TRX for our transaction.
10:03
We can move our movie creation directly inside of there and
10:06
tell it to use this transaction via the second argument.
10:09
Remember client is how we pass this in so we can specify a client of TRX.
10:15
And now our transaction is bound into our movie and
10:17
it's gonna work the exact same way as it did for
10:19
our update by cascading through our relationships.
10:22
So we can now do await movie service dot sync cast and
10:27
crew pass in our movie instance as well as our cast and
10:32
our crew members from our validator.
10:35
And now we'll create our movie.
10:36
If everything with that completes successfully,
10:38
then we'll move on to syncing our cast and crew.
10:41
If everything with that completes successfully,
10:43
we'll then exit out of our callback function right here.
10:46
And the managed transaction will commit that to the database.
10:49
If we were to have a failure at either our movie or
10:53
our sync of our cast and crew members, this callback function will catch that error,
10:57
roll back our changes, and they won't be applied.
11:00
So this is definitely a cleaner approach to the try catch.
11:04
And this is referred to as the managed transaction as it's managing the commit
11:07
and rollback actions for us.
11:10
So cool, we'll give that a save.
11:11
And we should be a-okay to jump back into our browser now.
11:14
Now let's try to make some changes.
11:15
So we're already within an edit screen here.
11:16
So let's go ahead and try to add in a couple of cast members.
11:19
We'll do one there with a character name of maybe Clem.
11:23
And we can click on Add Cast Members to add a second one.
11:25
And it looks like it does not want to render out our second one.
11:28
So let's go ahead and inspect and open up our console here and
11:31
see what our error is.
11:31
So cannot access property after V is undefined expression members.
11:36
I'm not 100% certain, but I think the issue might be, and
11:39
I'm not sure why we weren't seeing this with our crew members.
11:42
But I think the issue might be that we're referencing the ID here,
11:45
which is the actual pivot table ID rather than the synist ID.
11:49
As the ID there would never change as we add more people.
11:52
So let's go ahead and hide our browser back away and
11:53
see if swapping that fixes this for us.
11:56
So we'll switch this from just ID to synist_ID, which will then just push in
12:01
the first synist ID, automatically selecting them as the synist ID rather than
12:05
the pivot table ID.
12:06
And we're gonna wanna make that switch in a couple more spots.
12:09
I'm gonna give that a copy.
12:10
We'll switch it here as well as there.
12:13
And I think the last place that we would want to switch it,
12:15
because it's already in place there, is up inside of our key.
12:19
So let's give that a save and see if that fixes our cast members issue.
12:22
And if it does, then we'll go through and apply that to our crew as well.
12:25
So let's try adding one there.
12:26
We can select somebody there, add a cast member there.
12:29
And yep, sure enough, seems to fix it.
12:31
Okay, let's go apply that for our crew members as well.
12:34
So scroll up, let's expand our crew members.
12:37
We want to switch the ID from that to that.
12:40
Scroll down and apply the same thing here, there, and
12:44
scroll down a little bit further.
12:45
And right here where we're pushing into it a default value as well.
12:49
Okay, scroll back down to where we had our cast members.
12:51
And we go ahead, jump back into our browser.
12:54
Make sure that we can add somebody there.
12:55
Okay, make sure that we can add somebody here.
12:58
Select the person that we were working with before.
13:00
We put in our character name there.
13:02
Add another member, and cool.
13:04
Okay, seems like everything's working now.
13:06
Let's go ahead and select somebody else and put in a name there.
13:09
We can go ahead and add in a second crew member as well.
13:12
That works fine.
13:13
Maybe they were in charge of food.
13:14
Okay, let's go ahead and try to update our movie.
13:16
And cool, so now you can see for our movie that we were working with,
13:20
we have two cast members as well as two crew members.
13:23
So everything there seemed to be working a-okay.
13:25
Let's go ahead and go back into edit.
13:27
Scroll on down, we should now see the exact same people, their titles, and
13:30
their character names.
13:31
And it seems like everything's working there too.
13:34
Since we did not cover creation in the last lesson like I thought we did with
13:38
our crew, let's go ahead and create a new movie and
13:40
make sure that everything's working there too.
13:42
So My Awesome Movie 3, select a release dates of maybe do the 29th.
13:49
Maybe this is in production still.
13:52
The writer is Lily, and the director is Naya.
13:57
Abstract is Awesome Movie, the Trilogy.
14:02
We'll add in our crew members, and it looks like that's not working.
14:05
So let's right-click, Inspect, take a look at our console, and
14:08
Cannot Access Property Push Members is undefined.
14:11
Okay, that one's a little bit more straightforward of an issue.
14:13
So let's go ahead, hide that back away, hide our browser back away.
14:16
And this will be for both of them.
14:17
So JSON stringify, we wanna do cast members or an empty array.
14:23
We wanna do the exact same thing for our crew members.
14:25
So let's scroll on up to where we have that, and or
14:29
an empty array there as well.
14:31
So now let's give that a save, jump back into our browser.
14:33
Everything should have refreshed.
14:34
Looks like Firefox wants to hold on to my values.
14:36
Give everything a hard refresh just to make sure it clears out.
14:39
And let's try to add in a crew member now.
14:40
There we go, and a cast member, awesome.
14:43
Okay, let's go and fill this all back out.
14:44
So Awesome Movie 3, give it some release date, say it's maybe a production.
14:51
Select a writer, and select a director.
14:55
Awesome Movie, the trilogy, our cast member,
14:59
we'll scroll down, they were in charge of food.
15:02
And now our cast members, that was crew members that we just selected, sorry.
15:06
Eldred, and give them a character name, and
15:10
a cast member, do two here, Johanna, and maybe they play the boss.
15:16
Okay, so we should have one crew member, two cast members, and
15:19
this should be Awesome Movie, the trilogy, or Awesome Movie 3, I think we called it.
15:23
So let's go and create this movie, and awesome.
15:25
So it seems like everything worked there.
15:26
This is called Awesome Movie 3, it's in production.
15:29
The writers who we selected, director is Natasha.
15:32
We have two cast members and one crew member.
15:34
So everything there looks okay.
15:36
Jump back in the edit, make sure everything pre-populates okay as well,
15:39
which it does.
15:40
So cool, seems like we have everything working now.
15:42
We have both create and edit.
15:45
We can add in our crew and our cast members.
15:47
We can also remove both as well.
15:50
So if we remove somebody from our cast, we now just have one member in there.
Join The Discussion! (2 Comments)
Please sign in or sign up for free to join in on the dicussion.
gribbl
Hello,
I'm going to bother you again. 😆 I think there’s still an issue, especially when you add or remove the same person since they share the same
cineast_id. I believe we should generate a unique ID, using something likeMath.random()as a quick solution, to avoid relying oncineast_id.Please sign in or sign up for free to reply
tomgobich
Yep - you're absolutely right, sorry about that! Tacking one more property into the object specifically to uniquely identify the row would fix it up and
Math.random()is usually what I reach for as well for those use cases.I like to use the below because the
_prefix ensures it can also be used in theidattribute if needed.Please sign in or sign up for free to reply