We now have backend powered models and before we build our next big feature, I wanna fix two things in the front end. First, we broke transitions in previous episode, so we're gonna fix that. And then when I make the screen a little bit smaller like this and I'm trying to scroll that, I'm scrolling the backdrop, scrolling the table instead of the mod content. So we're gonna fix that as well.

scrolling the table instead of the modal content. So we're gonna fix that as well. Let's close the modal and let's dive into the code. Our model component uses this transition component from the fuel library. So here we we're using it for the backdrop and here you can see the one for the modal itself. And remember how I told you that this feeShow was really important for the transition component to work.

that this fee show was really important for the transition component to work When show changes from false to true, the transition would kick in any other way around. But the problem with backend mods is that the show prop is always true. Let's go to a layout file. And here you can see that we are rendering this modal component if we've received a backend response. So it's not like this modal component is

component if we've received a backend response. So it's not like this modal component is waiting here to appear. It's only there when we actually have a backend response. So in our model component, we cannot rely on this fee show. What we need to do is add this appear prop and I'll add it here as well. And let's go to the Vue documentation and I'll show you what it does here. It says if you also want

and I'll show you what it does here. It says if you also want to apply a transition on the initial render of a note, you can add the appear prop. And that's what we want to do. We want to mount a model and then immediately show the transition. So let's see if it works. Let's go back to our demo app. Let's hit edit the model and the show transition works. Let's hit cancel and that one doesn't work yet. Why is that?

Let's hit edit the model and the show transition works. Let's hit cancel and that one doesn't work yet. Why is that? Let's go back to our code. Let's go to our layout file. And here you can see when we receive this close event, we are executing this close method and that resets the motor value back to no. And that means that the motor component is not rendered at all because of this fee. If so, when close is executed, this modal component is completely removed from the

If so, when close is executed, this modal component is completely removed from the DOM immediately. So the transition, the leave transition doesn't have time to be executed. So how are we gonna fix that? Let's go back to use modal to our backend request this one. And when we receive a response, we set it to modal value, we set our resource component and below here I'm gonna add a new key value show

we set our resource component and below here I'm gonna add a new key value show and I set it to true by default. Then when we hit close, I'm not resetting the whole modal value to null, but I'm just setting show back to false. Let's see how we currently determine whether a modal is shown or not. Let's go to editModal. Let's go to our template. And here you can see the show prop.

Let's go to edit modal. Let's go to our template. And here you can see the show prop. So we wanna show the modal when we have a User. Let's remove it from here. And then in our layout file, I'm gonna edit again to this modal components. So we bind show to modalShow and remember this key matches. This one in useModal, the one that we just added. So let's see how that bubbles up.

This one in use modal, the one that we just added. So let's see how that bubbles up. This modal component, the one that we resolve is actually this editModal. So we are passing the show prop to editModal. And because the show prop is not a prop in this component, it's passed down to a generic modal component. So from here, from our layout file, the show prop is bubbled up to a generic modal component. So let's see if that works.

is bubbled up to a generic mod component. So let's see if that works. Let's go to the browser, let's open the model. Let's hit cancel. And sure enough, the transition works, but the mode is actually still in the dump. Let me show that to you. Let's go to the few dev tools. Make this a little bit bigger here we have our index with a layout file and if I scroll to the bottom, you can see, still see edit modal.

and if I scroll to the bottom, you can see, still see editModal. So it's still there. How can we fix that? Let's go back to use modal. And what we wanna do is just wait for a transition to finish. So what we could do maybe a little bit hacky, we could use a setTimeout. So let's set modalValue to false and let's wait 300 milliseconds which matches

So let's set mode of value to know and let's wait 300 milliseconds which matches the duration of our transition. So we tell the modal component, uh, execute the leaf transition. We are waiting 300 milliseconds and then we are removing the modal from the do. Let's see if that works. Let's open the modal here. We can see that it's mounted,

modal here. We can see that it's mounted, we're hitting cancel and now it's gone. So this works, but it's actually not that nice because we don't want to depend on setTimeout and we don't want to sync this 300 milliseconds with this 300 milliseconds of the motor components. So how can we do better? We could make use of the afterLeave event. That's also part of the transition components.

after leave event. That's also part of the transition components. So this after leave event is fired when the leave transition has been completed. So what we wanna do is just throw our own event, which I'm also gonna call afterLeave. And let's add this to divine emits right here. And then I'm gonna listen for this event in our layout file. So in here we have close and now we also have afterLeave.

And then I'm gonna listen for this event in our layout file. So in here we have close and now we also have afterLeave. And let's call this method reset. We're gonna add a new method reset to our usedModal file. We now have close and reset. And here in usedModal let's add that function, function reset and that will set the modal value to null. Let's export it and let's remove the setTimeout. We don't want that anymore. So small recap.

the set time out. We don't want that anymore. So small recap. When the afterLeave event is emitted from here, when the transition has been completed, we are calling the reset method from our layout file and that one will remove the mode from the dump. Let's see if this works. Let's refresh the browser it edit a model. Here we can see the edit model component. Let's hit cancel. The transition worked and our component is gone.

Here we can see the editModal component. Let's hit cancel. The transition worked and our component is gone. So that works great. Now let's take a look at our second problem. When we open the modal and we make it a little bit smaller, we have this scroll issue. So how can we mimic this on a bigger screen? Let's go to editModal and directly above the form I'm gonna add some dummy data.

Let's go to edit modal and directly above the form I'm gonna add some dummy data then paragraphs of loam ipsum. Let's check it out. Yeah, that's great. So what's the problem? In this case, our body is crawling and not the model itself. Well let's open the inspector. And here you can see that we have an overflow on the body and we don't really want that. So let's go back to our modal components.

and we don't really want that. So let's go back to our modal components. And what we wanna do here is watch this show prop. So let's import watch from the fuel library, then maybe blow here, let's add that watcher. So we are going to watch props. That show here is our callback method and then we want to use immediate. We're setting it to true as an option because we want to execute this uh,

We're setting it to true as an option because we want to execute this uh, callback function immediately when this model is mounted. So what we're gonna do in our callback, let's scrap our body, the style of the body, and then we want to edit the overflow prop. So when the model is shown, we want to set overflow to hidden and otherwise we just want to set it back to an empty string so that it resets.

otherwise we just want to set it back to an empty string so that it resets. Let's go to the browser and see if this works. Let's refresh edit imo. And you can see that the scroll bar is gone. So I can't scroll anymore, but I also can't scroll in here. And that's because this model is far too big. So it's somewhere here and somewhere here below. So we should give this a max height as well. Let's go back to modal into our template.

So we should give this a max height as well. Let's go back to modal into our template. Let's see, where is it? So yeah, this is the one with the wide background and a pending four. Let's add a mix, uh, a max height of the screen. And then we are also gonna set overflow to auto. So as we get nice scroll bars, let's see if that actually works. Atmo And yeah, now we have nice scroll bars

let's see if that actually works. Atmo And yeah, now we have nice scroll bars and we can reach all the content. Yeah, looks much better. Maybe we can tweak one more thing. Um, drop a little bit of the max-height 'cause this looks a little bit weird to me. So what we're gonna do instead of max-height: screen, I'm gonna change this to an arbitrary value. We're gonna use calc, which is a CSS thing,

to a arbitrary value. We're gonna use calc, which is a CSS thing, and we're gonna replace screen with 100 and then port height. And then we are gonna subtract 2rem. Let's see if that works. Yeah, I already saw it. Yeah, that's much better. So let me show you how that works. Um, where is it? Right here You can see that the max height is now determined by this calculation.

Right here You can see that the max height is now determined by this calculation. So when I change the height of the screen, the height of the model is also changed. So that really works great. Let's remove all the dummy content to see if our regular model still works. Let's remove all this stuff safe and that still works without the scroll bars. And if I make it smaller, then we get nice scroll bars.

and that still works without the scroll bars. And if I make it smaller, then we get nice scroll bars. All right, great. Let's continue in the next episode.