In this series we'll be learning all about implementing models in an Inertia js application. I've got a layer for brief application and I've added this users route. We've got a list of all my users. I have a few button where I can view the profile of a user and I've got this edit button that takes me to the edit page here. I can change the name, any email address of the user, and when I hit update, I'm redirected back to the index page.

I can change the name, any email address of the User, and when I hit update, I'm redirected back to the index page and I get this nice flash message user update successfully. What I want to do is implement this third button, edit a model. So what we're gonna do is scrap this form from the edit page and we're gonna show it in a model on the index page. Let's go into the editor and dive into some code. Let's open the index page and here you can see that I'm accepting array of users.

Let's open the index page and here you can see that I'm accepting an array of Users. Here you can see the table and the columns. Here I'm looping over the users. Here's the user avatar, the name, email address, and here are the three buttons. So we have few edits and edit a model, and when you click this third button, edit a model, this function is executed openEditModel, but we haven't implemented it yet.

this function is executed openEditModel, but we haven't implemented it yet. So let's do that right now. Let's scroll to the top to our script setup block and below here I'm gonna add this function, openEditModel. And this function is going to accept the user and we need to store that user in some kind of state. And I'm naming that state editingUser. So that's gonna be a ref. And we set it to false by default. And let's not forget

So that's gonna be a ref. And we set it to false by default. And let's not forget to import this ref from the fuel library. So within the function, I'm setting editingUser value to the user. Now let's go back to the browser and see where we are gonna mount this model. So I'm opening the inspector here. You can see the body and the app diff where the inertia app is mounted.

You can see the body and the app diff where the Inertia app is mounted. You can see the component and the props. And what we wanna do is mount the Molo component below this tive and you can do that with teleporting view, which is built in. So back into the editor, let's collapse this layout and below here gonna start with this teleport component. And we're gonna teleport to the body.

and below here gonna start with this teleport component. And we're gonna teleport to the body. And let's start with a simple header. Hello world, let's save it. Go back to the browser and sure enough here you can see it. Our header, hello world below the iv. But of course we don't want this header, we want the real modal. So let's go back and let's start with a div. And I'm going to use the fixed gloss inset zero,

So let's go back and let's start with a div. And I'm going to use the fixed gloss inset 0, which is a shortcut for top 0 right 0 bottom 0 left 0. Then I'm gonna use width full height full. And actually there's a shortcut for that as well. So instead of doing this, you can use a size full. And then I want to center everything within this, within this div. And for that we gonna use flex item-center justify-center.

And for that we gonna use flex items-center justify-center. Let's see, now we have hello world at the center of a screen that's close the inspector. And even when we're scrolling, it stays here in the center of the screen. So that's great. Let's add another div to give it some padding, maybe a p-4. Add a nice wide background and also make the corners around it.

Add a nice wide background and also make the corners around it. So rounded-lg that we'll do. Yeah, that looks good. So then of course we need a backdrop for our modal and we're gonna place that above this div again, we're going to use fixed and inset-0 size full, so it's all over the screen. And then we're going to use a black background with an opacity of maybe 75.

And then we're going to use a black background with an opacity of maybe 75. Yeah, that will do. Let's see. Yeah, that looks great, except that our model is now below the backdrop, so we can fix that with a z-index. Let's go for 40 for the backdrop and 50 for the model itself. Yeah, that looks great. Alright, let's grab the form from the edit page and paste it into the model.

let's grab the form from the edit page and paste it into the model. Let's go to edit view. And here you can see our form element. I'm gonna grab this whole thing and copy it to the index page. Be below the header. I'm gonna hit save, so it's gonna reformat. And yeah, here you can see our update button and the cancel button.

And yeah, here you can see our update button and the cancel button. Now redirects back to users index, but we're actually already on this page. So instead of using the visit method, I'm going to use a new method closeModel and we will implement that later on. Later on. Here we have our text inputs. Any errors? Yeah, this looks fine, but of course we need this update User function and form object from the edit page.

Yeah, this looks fine, but of course we need this update. User function and form object from the edit page. So on the edit page in the script setup block, uh, we have a form object that uses the useForm method from the Inertia library. And we have this updateUser method that actually submits the data to this route. So let's grab those two and let's base them into our index page maybe below here. Now this page doesn't have a user prop,

and let's base them into our index page maybe below here. Now this page doesn't have a user prop, so this doesn't make sense. And I'm gonna replace them with two empty strings. And when we are submitting the data, we are also not submitting to this user prop what we're actually submitting to this editingUser. So instead of props userId, I'm going to use editingUser value id. I see I've made a little mistake here. Let's remove this.

to use editing user value id. I see I've made a little mistake here. Let's remove this. Yeah, that looks better. Alright, let's go back to the browser, see what it looks like. Now you've got a blank page and I already know why that is because I forgot to import the useForm from the Inertia library. So in here we have link head and let's also import useForm. Let's refresh. And there it is. Here is a form with the form elements.

Let's refresh. And there it is. Here is a form with the form elements with the input elements. Uh, we have a cancel button, update button and it looks a bit small and the fields are still empty, so let's fix that as well. When this openEditModal function is executed, we not only want to set this editingUser state, but we also want to update the data within this form object. So let's do that right now.

but we also want to update the data within this form object. So let's do that right now. form.name equals userName and form.email equals userDoEmail. And another thing that I want to fix is we only want to show this model when we're actually clicking on the button. So let's add a show to the model. In here in the diff, I'm going to add a show equals editingUser.

In here in the diff, I'm going to add a fee show = editingUser. So only when we click this button the modal should pop up. And another thing that we need to add is this closeModal function. And the only thing that that does is just resetting the editingUser state to false. Alright, let's go to the browser and see what it looks like. The modal is gone, so that's great. Let's click on edit the modal.

The model is gone, so that's great. Let's click on edit the model and yeah, here we have our name, we have our email address. And let's see if the cancel button works. Yeah, that works as well. Let's see if validation works. I'm gonna remove the name and hit update. Yeah, that works as well. So what we're now gonna fix is the width of the modal because it's still a little bit small and of course we need to change this.

because it's still a little bit small and of course we need to change this. Hello world header. Alright, let's scroll to the modal here. Instead of hello world, I'm gonna say edit User, make it a little bit bigger and give it some margin. And then the modal itself, you make it fullWidth and then limit it with maybe maxWidth md. Yeah, that looks much better. All right, let's update it. 1, 2, 3, it updates and yeah, we get this flash message

Yeah, that looks much better. All right, let's update it. 1, 2, 3, it updates and yeah, we get this flash message and we can see that the User has been updated, but actually the model is still here. So what we need to do is still Inertia when the form is submitted and it has been succeeded, close the model. We can do that here in the updateUser method. So we have the PUT request with the route and after route we gonna use this options object and we're gonna use this unsuccess key, uh,

after route we gonna use this options object and we're gonna use this unsuccess key, uh, and call the closeModal function. So when the form succeeded, close the modal. Let's save it, hit refresh. And let's try again. Edit the modal. Let's remove one to three. Again, hit update. And yes, we have our flash message. The modal, uh, the User is updated and our modal is gone. So yeah, that all works.

The modal, uh, the User is updated and our model is gone. So yeah, that all works.