Crud: Handle Actions Using JavaScript

When you want to extend a crud by adding new actions, you'll often need to handle these actions not on the backend, but on the frontend. This could be a better way to open a popup when clicking an action.

Let's consider the following example. We would like to transfer specific units from a product to a warehouse. But we need a popup to appear when a user clicks on "Transfer Stock." That way, we'll load a custom Vue component.

Inject A Footer On A Crud Instance

Now, we need to conditionally inject a custom footer on a Crud instance that we want to extend. This means when only a ProductCrud instance is being used, for example. For that, we first need to register a filter.

Here, we've injected a view on the footer of the crud instance that will process "products".

Note that the "ns-products" here refers to an identifier (formerly namespace) of the CRUD component ProductCrud (available on App\Crud\ProductCrud). This means that to inject a vue no a specific crud component, we need to have the identifier first.

Register A Custom Row Action

Now, we need to register a custom row action, with the identifier "my-product-transfer".

Catching The Action From Javascript

Now we need to catch that action as we haven't defined any specific known type.

First, we check if the event is "ns-table-row-action", then we check if the action namespace is "my-product-transfer". Then we can execute our component. We'll then need to use a "Popup" object to create a popup for our specific component. We'll assume you have correctly registered your Vue component and would like to open it when an action is clicked. We'll here use the previous example.

From now on, we should be able to see a popup showing up.