Extend Laravel Nova Vue Components.

today I wanted to talk to you about how can we extend the functionality of some of the components of laravel novel so lava offers a powerful solution to build in beautiful dashboards and you know for you it offers a lot of things that you can build very quickly and easy and on your dashboard like these car components full like crude reserves resources and all of that so let me show you an issue that I came across last week well you see Nova for project so to do that let me show you these small application that I built using the ivanova so here we have a bus resource and a list of articles and in this list we are we have like title and category and page views for each article so one of the things that you can build very quickly with Noah is the custom filter to basically to filter this list based on a given value so let's say that I want to filter these articles by category so let's go to this post resource class so this is my base class Here I am I have the fields that I'm using here in this list so I have title category of pageviews and let me show you here these filters method so here I recreated this post cattle filter class using the PHP artisan nava filter con and then you can give it a name and these will create a new class for you right so this how this class looks like we have here only two Kusum things so the first one is the filter query so I'm saying okay just give me all the articles where the category is equals to the value that I'm singing here and I'm taking that value from the drop-down and to populate this drop-down that we are going to see here I'm using these values right so to add this filter to a resource which is need to carry any instance on the filter in our filters method inside our pass resource M class so if I hit save here and reload the page we should be able to see this new filter working on this page so let's give it a moment okay and here we can see this new category filter working so if I click here we have all these options that will be fine here on a filter class down here so it's kind of a key value all right so if I select I know like larval and as you can see this list will be updated automatically applying this filter I mean this query to our search here so all these articles belong to the same novel category so that's great the other cool thing that we can add to the results using larval Nova M are cards like these cards that we can see here right so I want to create a new current display the average page views for all these articles so I already created this car what we need to do is to comment this line here in our cards method inside the post resource class and let's see the code here so here on our calculated method and I'm saying okay give me the average life that by days of this model class using these base views column and I using these different values so the average within the last seven days 15 days or 30 days so now that we already added the new instance here in our cards method on the post resource class I can reload the page and should be able to see that car at the top of this page so this is very useful because you cannot like a lot of information for the editors are not the managers of website for example on these a small example so this kind of very valuable information for some people so I think this is very useful so as you can see here we have this trend car so we're cool everything is working now when was they the issue that I had with this implementation so if we try to change or to select a different filter here you can see how our list is updated but the car here doesn't change so although we are filtering this list we are giving category and we are getting those results we are not reflecting this data here at the top on this car so this can be a little bit confusing for the users because you are not like using the same data you know on all the components of these results so this is still showing you like the average page views but for all the articles from all the categories in the site so what I want to change is how this works so I want to be able to date this card based on the filter that I'm using here so by default Nova doesn't allow to do this because you can because this car doesn't have access to this main request object so if we go to these balls pageview strand which is or car that extends this matrix Tran car we'll see if our request but this requests that we receive here is the one that we create via Ajax when the page loads so please let's say that this request is on a different context than this one so we have access to these values and what I want to do is to actually send or pass down these query filters down to these components so I can use it here to filter this query based on the selection that I have down here so let me show you something every time that you change the filter here the URL or this program in the URL changes and the name of this program is like the name of your source - resources underscore filter so let's say if you are on your users resource you'll see like user - resources underscore filter and a different hash here so this has basically an array of all the filters that we have here and all the values that we have selected so again by default I cannot see these data here in my trend car and that's what I want to fix so one way to do this is to create our own custom card right so never allows you to create custom components by running this command laravel search HP artisan Nova artisan of a cart and you'll need to use a vendor name and the name of the tire that you want to create so I'm like a so I already created these custom train car and and install all the dependencies there so this will create a new directory so I have these know a components and inside I have this custom trend and directory and so here I have all my dependencies all the source code for this component and I actually can expert these different repository if I want so anyways if we go to source code of this new component I have let's take a look to the source says yes card that view component so half here cannot be is folding further for this new component right so what I want to do is just to be able to send this URL pram down here to this card so I don't want to rebuild this what I want is to extend the behavior of the Nova card component so let me show you how can we do this so I don't want to change the template I don't want to change anything else from here I just want to extend and the component that comes with level Nova so let me show you if we import this file there is relative to our current directory and that lives under the Navigator and this is called a trend metric that view this Trang metric metric that view is actually the file that renders when we create a new trend tire like this so this is the component that we are actually seeing here and this is the one that I want to extend so here I can say extends turn metric so this car that view component that I have here I just want to stand everything that this term at your company huh so if I try to compile this this is going to fail because the dependencies that we need from for these ten battery component doesn't live here on my local directory so we need to pay their webpack configuration to resolve those suspend dependencies so I don't want to get into too much detail with this so I'm just going to paste in the configuration basically here saying okay I want to resolve these storage areas here to you know be loaded from the novel directory instead of my local directory and also I want to reference these notes model node models from the novel directory again so this is my web pack operation and I need to add this to our custom tran a web pack that that makes file ok so now let's see what we have so I can't compile this and now again let's see if we go back to or - / remember that we are creating a new instance of this post pageviews trend class in our post resources component so I don't want to create a new instance here of our and custom trend because I want to I want this custom turn component to be reusable so let's say that I have the average show of page views but I also when the average of comments the number of comments on all the articles so I don't want to create again another custom trend just for that so what I want to do is this so let's go back to our post resource here so I want to change this reference I want to change the way of how this works so if we go here we have this post page views trend class it is extending from the novel metrics trend class brain want this anymore I want these to extend from my custom trend class right so if we go there to a custom trend class this is extending from or car or Nova card class again I don't want here to extend from Nova car because I need all the methods that are related to a trend like calculate average birthdays ranges all of that so I want to extend here from turn from yeah metric strength class so again my post page view strength extending from my new custom trend and my new custom trend class is extending from the matrix trend class and actually I don't want this here because I can right these from the implementation which my case is this post place real strength so I can remove this and the only thing that we are doing here is changing the component the video component that we are learning to render right so instead of rendering the default trend car that comes with Nova I'm rendering my custom trend that view card here so this one right if we reload the page this should work in the same way and at the moment the only thing that I'm doing is just extending the the Nova component but loading those components from my closed on directory so I can start adding changes to to those files so here everything is working again right so I have my trends here and if I change to different theory here should be a good C data and at this point we haven't done anything yet to solve the initial problem but we are loading this component from our custom directory so that's great again um ok so let's take a look to this trending metric view so why I can't see these filters or these problems on my card component so remember em when you load the page these loads and make an a DX request to an end point and send some payload to the Train PHP class so in our case our pitch bootless is this but here the requests that we receive is not based on this URL but it is a different request that we are making rejects from here okay so if we take a look to this strand metric curl I'll show you so we see this template it's rendering your base training component so I don't care too much about this the only thing that I care is that is this inner mounted here method we call this fetch method right so here in fetch we create a new request to the metric endpoint and we send this metric payload this metric payload is sorry is a computed property that we have down here and here is where where we build the payload that we are going to send to the back end so let's alright this computed property in our extended component so here okay this is a computed property and we need to put this here great so what I want to do here is first thing is that I want to pass these filters down only if I am in their post resources view because I can also use this car on a dashboard and on the dashboard we don't have like the resource so I want to pass down the filters only in the resource view so we can check that by saying if we have a resource name and I want to add something new to the payload right so that's what what I want to add here is my filter so let's create a new filters bar and I want to take the value from the URL so if you remember this is the this is the variable that I want to pull from from there all right so I can access this value through the view router so I can say this route query here right but this is kind of hard coded so I want to these custom turn to be reusable based on the name of the researcher and I'm using at the moment so we can do a little bit more dynamic so to do that we can use here instead of calling this is chain I'm going to say okay give me this resource name whatever is their resource that we have at the moment and add this underscore filter string at the end and this will give me the value that we have sign to this value so in our case is this hash that we have here right so actually this this resource name in our case is going to return this string just post resources okay so now that we have this value I want to touch this value to our payload and then we can say payload that params the filter filters equals to filters and that's it now we are sending a new parameter to the payload to our custom training class so how can we test this if we go back to our M post page view strain remember that this is already extending our boost on trend and class so let it add a lot here to see what are we getting in our request so we can do requests all here and let's recompile the ESS here because we changed our discrete JavaScript code so let's recompile this and then then we can load the logs so this command called this is from previous implementation but let me show you how it's working now okay so let's reload the page here and when the page loads then the car components call and then we make the request to or base view strength class right so here we are sending this time son I'll show you again here so this time son that was already fine on the another component also this 12 hour time variable so boolean true or false range during our case is 7 which is the selected range that we have here and at the end we are adding these filters but so that's great we are actually passing down the filters that we have selected here and and we now have access to those filters here on our trend class so how can we use that to customize or change the result or the data that we are using here okay so let's go back to our page post page view strength class and here how can we track that volume so first let's ask if our request has filters if so then let's pull out those filters from the requests now this is an encoded value so the first thing that we need to do here is to take cold that value and this is going to give us a JSON object so the second thing that we need to do here is to decode that JSON object right and this is going to give us an array so finally this is going to be an array of filters so once we have that variety of filters again say for each filters so about this as filter then I want to modify my query or my mother remember that this function receives either the name of the model of or an instance of the query builder so instead of passing here the name or the string I'm going to create a new instance of my past model so I passed make great and here I want to modify my query builder so I want to say ok for each filter and let's create a new instance of my filter class and call this apply method so if go back to a filter so qatari filter we have this apply method and discipline method specs request object the query object and a value so here we change the query methods to the query object here using this value and we return back then you modify query builder right so I am going to pass down this request now this model I am initiating here and I'm also going to send the filter value that is selected so um this hashed value that we have here contains an array with this data so each element in the filters array it's like a JSON object that is person like STD class so we have these two properties here the class which is the class name and that allows me to create new instance of that filter and the value which is the selected value that we have here right so what I'm saying here is okay let's go through all the list of filter filters that I'm using here and modify this query builder and at the end send that modified query builder to my average birthdays and Method all right so that's it let's take a look to the implementation did we change the ideas I don't think so so okay it's great and let me check okay we are seeing just the articles for the CSS category so let's reload the page and if we did everything correctly we should be sending these filters panel ready to the backend and we shall be going through all these filters and applying all these filters to the results here so let me load this again on a new page just so we can compare and the shape of this so see okay so here we have our CSS kateri and this is our train car and let's use a different category here like level and okay and we load the page for money okay so at this moment these values should correspond to or a CSS kateri only so here we are not taking into consideration all the articles but only oh only those articles with the CSS code and if we compare this with our lateral category selection here you can see that the the is different so that means that we are using the filters different filters on its request so that's great now the the other issue that we have here is that we need to select a filter here and then reload the page because this car is not updated every time that I change the filter the only the only thing that is updated is the list so how can we update this car every time that we update the selection here if we go back to our car that view component and take a look again to this strand metric or our parent component so let's check this created method so here as you can see we we have the event so every time the action executed event is fire we are going we are going to call this fetch function and this faith fetch method is the one that makes the call to the trend endpoint so I want to overwrite this to register a new event a new event listener so here on our creative going to add that here okay so again I want this only if we have a resource name if we are in in their source view and I want to say on the resource resources love it then call again the fetch method so these resources loaded event fires every time that this list is dead so we change this selection here then a new request is made back in and then the list changes so this event is called resource loaded so so let me test this now we need to recompile this so again we created and so your honor created a method we are adding a new even handler so every time that the resource are loaded we are going to call the fetch method and these this should be the only thing that we need to make our car company a tag name so again let's compile this so I'm being drawn that shown and when this is compiled and what should happen is that our car here she'll change after this section is updated here all right so it's kind of slow but we're getting there great so here let's reload the page and in this case our trench should be flat because you have data on this selection that I have here so let's wait for this to load great so no data this is flat and you can see how this is loading again because it loads after this event fires so change the category CSS Kateri and our resource is load here and after the resources load then we should see this card loading and now we are changing this response based on the filters that we are selecting here and also this should work so now effectively we are sending back to our back-end to our trend and class the filters we have here on our main request so we're taking the filters from the URL passing that down to the trend component and updating dynamically this data here so that means that our component is ready to use so the next time that we need to create a new trend component with this same behavior we can use the same nava command so we can say like HP artisan Nava Tran I don't know like post comments trend and the only thing that we need to do here is Tran component post comments here so instead of extending from the default matrix trend we need to stand from our custom trend component and that's it and here we should have access to a request request filters and here you can add logic to that you need to filter down those comments based on your filters so that's it I hope this works for you and you find this useful and let me know if you have any questions and thank you for watching

Channel: Jeff Ochoa

Views: 3,533

Keywords:

Id: WWK2wOhEAdM

Length: 39min 21sec (2361 seconds)

Published: Mon Feb 03 2020