تماشای این درس نیاز به اشتراک حرفه‌ای دارد.

Modal Edit Route0:00

The last big feature that we're gonna build is our L based models. Now when I click on editing model, the model appears, but I'm still on this User's index route. But what I actually wanna do is click on this edit button, go to this specific edit route, but still have the previous behavior of the index as a backdrop and the model rendered on top of it. So let's go to the editor, see how we can do that. Let's go to the UserController

So let's go to the editor, see how we can do that. Let's go to the UserController and scroll to the edit method, this one. And what we wanna do is pass some kind of base URL. So let's do that as a third argument. Let's do route and then users.index. And let's leave this stuff for now. And we don't want to override this random method because it's part of the Inertia package. So we need to come up with a new method

Create Response Macro0:55

because it's part of the Inertia package. So we need to come up with a new method and let's call it modal. So we want to render this modal with these props. And as a backdrop we want to render this route. Now let's go to the browser and let's open edit in new tab. And of course we are getting an error because this modal method does not exist. So we can add it easily to this responseFactory because it's macro ball.

So we can add it easily to this responseFactory because it's macro ball. Let's go to the AppServiceProvider and below our previous macro, let's do responseFactory and let's import it. We are going add a macro, which is called modal. Let's pass it the callback. And this callback is gonna accept three arguments. So the first one is the components. It's actually the modal components.

So the first one is the components. It's actually the modal components. Then we have the props and then we have the base URL. So let's dump those out um, and see if this works. Oops, props and base URL and that seems to work. Alright, let's make this work. Now we don't want to render this modal

Subrequest Base Route2:13

Alright, let's make this work. Now we don't want to render this modal component and its props. We actually want to render this base URL. So from within this added method we want to do some kind of sub request to this index route. So we need to find out which route belongs to this URL and which controller method belongs to this URL. Let's create a request for this base, URL. And then I'm gonna find out which route it belongs to.

Let's create a request for this base, URL. And then I'm gonna find out which route it belongs to. I'm gonna import this Route facade that has a method, getRoutes and let's dump it out. Let's comment out this one. Go to the browser and this cat route method gives us a route collection and that has all the routes that are registered within our app. So this cat routes gives us a route collection and that has a method called match

So this cat routes gives us a route collection and that has a method called match and we can pass a request to match. So let's set this one to request. And that one actually gives us the route back the registered route. So this points to our User's index, uh, route. And if I open up this action prop, you can see that it uses the UserController and then the index method. And this is really great because now we can pass any URL.

that it uses the UserController and then the index method. And this is really great because now we can pass any URL as a third argument to our modal macro. And then within here we can find out which controller and which method to call. Alright, let's set this two routes. Let's clean up a bit. And then we actually need to bind this route to this request. You know how you can call route on the request instance. When you call this, it actually calls this get route.

Bind Route Resolver3:58

You know how you can call route on the request instance. When you call this, it actually calls this getRouteResolver and that executes a callback by default. And this is set by some service provider under the hood in Laravel, but you can override it. So instead of calling this route method, we can call setRouteResolver and we give it a callback that returns the route that we just found out. This is very important because

that we just found out. This is very important because otherwise that route method doesn't work in our sub request. Next up, we can call run on this route method and I'll show you what that does. This method checks. If our route is bound to a controller action, then it runs the controller and otherwise it runs the callable. 'cause you know, in your routes file you can do something like this, maybe get uh, some route

'cause you know, in your routes file you can do something like this, maybe get uh, some route and then instead of passing a controller and a method, you can give it a callback. So this run callable takes care of this, but we're actually not using it. We are using a controller. So here dispatch is the controller. You don't need to care about this actually at all. Just wanted to show it. Let's go back to a service provider.

You don't need to care about this actually at all. Just wanted to show it. Let's go back to a ServiceProvider. Uh, so now we've run this route. Uh, let's give it the name of response and let's dump that one out, see what it looks like. Let's refresh. And now we have an Inertia response. So not of the edit route, but actually of the index route. So we want to render the index component. Let's check out the props. We have our users, all the users that we want.

Let's check out the props. We have our users, all the users that we want to list in the table, and we also have the errors and status and everything else. So this works great. Instead of dumping it out, let's return it refresh. And yes, now we have an index page. So we're actually visiting the edit route, but we are rendering the index page.

Share Modal via Inertia5:55

So we're actually visiting the edit route, but we are rendering the index page. Now how are we going to pass the modal to this index page? 'cause remember, uh, this component and props are the modal component and the props. So before running the route, I am going to use the Inertia facade. Let's import it, uh, call the share method on it, and then I'm gonna use a key of _modal and let's pass it an array.

and then I'm gonna use a key of _modal and let's pass it an array of our components of the props. And let's pass the base URL as well. Let's save it. Refresh. This still works. Let's open a few dev tools. Go to the index page. And here in the props we have users. And in the attributes you can see we now have this _modal key with the components with the right props.

underscore modal key with the components with the right props. So this is the singular User, the User that we want to edit and we still have access to our base URL. So this works great. Still wanna show you one more thing and it's actually something that you just need to be aware of. Uh, when we call this run method, it execute that index, uh, method on the UseController,

Middleware Caveat7:20

Uh, when we call this run method, it executes that index, uh, method on the UserController, but it doesn't execute the middleware stack that belongs to this route. So when we come in here on the edit route in the UserController, Laravel takes care of the middleware stack that belongs to this route, to the edit route. And then in our model macro, we directly call the index method. So if you have some kind of special middleware

we directly call the index method. So if you have some kind of special middleware that's just attached to the base route to this one, at this point it's not executed. So if you have some special route like index, uh, with special middleware, need to be aware that this middleware is at this point is not executed. But in our macro, uh, we can get a list of the middlewares. So middleware, uh, we can use the Route facade again. And that has a method called gatherRouteMiddleware.

So middleware, uh, we can use the Route facade again. And that has a method called gatherRouteMiddleware. And we pass it our route and let's dump it out. So this is the middleware stack for our index page. Let's refresh. And here you can see it. So it has stuff like encryptCookies, uh, shareErrors. Uh, all this stuff is also executed on the edit route. But this one, substituteBindings, it's a special one and we need to take care of that as well.

But this one, substitute bindings, it's a special one and we need to take care of that as well. What I'm gonna show you that in the next episode.

دوست دارید گاهی خبرهای Laracasts را ایمیل کنیم؟