Sign In Sign Up

Sign In Sign Up

Let's Learn AdonisJS 6

Playing Next Lesson In

seconds

Let's Learn AdonisJS 6

Let's Learn AdonisJS 6 #11.5

How To Use One Form to Create or Edit Movies

In This Lesson

We'll learn how we can merge our create form and edit form together into a create or edit form. We'll conditionally determine whether we'll be creating or editing based on our movie value and use EdgeJS features to simplify the process

Created by: @tomgobich
Published: 1 year ago

🕰️ Chapters
00:00 - Making the Create or Edit Page
02:10 - Setting Input Values for Create or Edit
03:34 - Swapping In & Testing Our Page
04:24 - Deleting Our Create and Edit Pages
04:31 - Testing Our Create or Edit Page

Join the Discussion 2 comments

@adun
3 days ago
Since releasedAt is nullable in the Movie model, the Edit action fails when a movie has no release date, raising:
Error: Cannot read properties of null (reading 'toFormat')
A small defensive fix would be to make the access optional increateOrEdit.edgefile:
// replace value: movie?.releasedAt.toFormat('yyyy-MM-dd') // with value: movie?.releasedAt?.toFormat('yyyy-MM-dd')

Copied!
1
1. Responding to adun
  
  @tomgobich
  2 days ago
  
  Good catch, thanks for sharing @adun! Apologies I missed that!!
  
  1

Transcript

(upbeat music) Since our create and edit form share the exact same fields and they even share the exact same validator,
it would make a lot of sense to go ahead and merge those two into a single page in our application so that we don't need to manage and maintain two separate forms,
despite them being the exact same. The only difference is we're reading from values whenever we're updating and we're reading from default values whenever we're creating. So we can go ahead and hide our browser back away.
And let's go ahead and jump into our edit page, give everything here a copy since we already have the movie being read from within here. And let's create a new page. We'll end up clearing out both our create and edit pages.
So don't worry so much about those existing currently. We'll call this new page create or edit. So that it's very clear that this does both. Paste those contents in.
And now our job is to update this form to where it can either update a record or create a record. The easiest way to do that is some if checks,
checking whether or not we have an actual movie applied in. So for our H1, for example, we could do an @if movie. Then we know that we're updating @else,
then we'll be creating. So we'll @end our if there, do an H1, create a new movie. If you don't like the semantics of that, you can also use EdgeJS variables
to kind of clean that up a little bit. So we can do @let title equals movie, do a ternary check. Then we do update movie.title if we have a movie.
Otherwise we do create a new movie like so. And now rather than doing an if else, we can just do a single H1 that adds in our page title. And we can use those two premises
to route out this page to easily apply an if else based value to our fields. And we also need to update the action accordingly as well.
So I'm gonna go ahead and give this whole route a copy and let's do an @let action equals. Let's have this default to creating.
We're not gonna do a ternary check directly inside of here since the update string is a little long. Admin movies create. And instead what we can do is an @if movie.
So if we're editing, end our if, we can @assign now the action value to our edit route. Remember assign is how we can update already declared variables.
Now that we have our action, we just need to apply it into the actual action attribute like so, and then we can scroll on down and get started with our values.
So if we jump into our form input here and take a look at our value normalization, you can see first thing that we try to do is get a value that we're providing in as a prop.
And if that's not provided, we'll default back to a value old, which checks to see whether or not we have a name. And if we do, it will try to fetch the old value or a previously submitted value
from our session for that name. And if it can't find it, then it will default to an empty string. Meaning that for all of our inputs,
if we just need the default value to be an empty string, all we need to do is use optional chaining on our movie for the value. So if we do have a movie,
then it will use the title and provide that in as our value. And if we do not have a movie, then this won't be provided in a value and our form input component will normalize that
to an empty string automatically for us. So we just need to use that same premise throughout. So we can do optional chaining there, here, and then we can do the exact same thing for each of our selects as well,
because we should never have an actual status ID of null. So if we don't have a movie status, then this should never be truthy. And it will just default back to the browser default of the first option.
Do the same thing for our writer ID and our director ID and our summary and our abstract too. So right down there and right there, which leaves us with our button text,
which is a simple switch between create and update. So we can do a simple turn right here. If we have a movie, then we're updating. Otherwise we are creating. Give that a save.
Before we delete out our create and edit pages, let's go ahead and scroll up to our movie controller and swap the page that we're using for both of those.
So rather than edit here, this will be create or edit. We can give that a copy, scroll up to our create and replace create with creator edit there as well. Let's give it a quick test real quick,
just to make sure that we're not getting any errors. Give this a refresh. Cool, so you can see all of our default values here are coming in A-OK, just the same as we had it whenever we had the separate page.
Let's go back into our movies and go into edit. And it looks like all of the values here are populating A-OK as well. Furthermore, if we right click, go down to inspect
and let's go into the form a little bit here so that we can take a look at the action. You can see that this one's going to attempt to update via a put.
And if we go back to our create, do the exact same thing, take a look at this form. You can see the action is going to try to create. So that seems A-OK as well, which means we should be clear to go ahead
and hide our browser back away, scroll back down to where we have these pages, right click our edit, delete, confirm and move to trash. And let's do the exact same thing for our create as well.
So we can delete that and move to trash. Let's do a quick sanity check here. So let's my cool movie two, give this a release date of maybe the 27th,
the day after my cool movie one. We'll say that this is being written. The writer is Lily and the director is Ted. And give it a summary of a sequel
and an abstract of a really cool sequel. Go ahead and create the movie and, Oh, yep, okay. We're trying to post this into our actual create page.
That's certainly not right, my bad there. Let's go back real quick, jump back into our text editor. And what we meant to do instead of providing create here was store, give that a save,
jump back into our browser and let's try this once more. So let's hit create and there we go. So, okay, we now have my cool movie two, that completed successfully. All of our status writer director looks right.
Should be able to go into edit now and do just quick hyphen edit there to edit it, update it. And that got applied too. Awesome. So everything there seems to be working a-okay.
And now we have a single page for both creating and editing our movies.

Let's Learn AdonisJS 6

113 Lessons

14h 15m

Introduction

1

Fundamentals

2

Building Views with EdgeJS

3

Database and Lucid ORM Basics

4

Lucid ORM Relationships

5

Working With Forms

6

Authentication & Middleware

7

Filtering and Paginating Queries

8

User Watchlist

9

User Profiles

10

Admin Panel

11

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.

Sign up Sign in