Link to a filtered view

[mauthi]

I have the following situation:

• One page with customers vuetable
• One page with invoices vuetable and a filter for customers

I would like to do the following:

• Add a button to customers vuetable
• By clicking on this button I would like to load the page with invoice vue table and set filter to the single customer

Maybe this is already possible and I just need a quick hint? Otherwise it would be nice if you can add this as feature request

[aocneanu]

BE:

in the customer's json template

"buttons": [
        .....
        {
            "type": "row",
            "icon": "fa fa-usd",
            "class": "has-text-info",
            "event": "load-invoices",
            "fullRoute": "invoices.index",
            "action": "router, 
        }
    ],

FE:

invoices/index.vue

.....

<vue-table
    id="invoices"
    :filters=filters
    .....>
</vue-table>


........
export default {
........
    data() {
         return {
             filters: {customer_id: this.$route.params.id},
             .....
        }
    }

what the vueTable will do under the hood is:

if (button.action === 'router') {
     this.$router.push({ name: button.route, params: { id: row.dtRowId } });
}

(more specifically, the tableBody component)

where button.route will be either the computed prefix.'.'.suffix, or the fullRoute in this case

Please close the previous ticket on this subject if everything is clear there.

[mauthi]

Thx for your fast answer. This solution only works if both tables are on same page - I tried to find a solution where I can link with button to a different page button in row of customer 4711 on xxx.com/billing/customers <http://xxx.com/billing/customers> > links to > xxx.com/billing/invoices <http://xxx.com/billing/invoices/> where customer with id 4711 is filtered do you know what I mean?

[aocneanu]

Ah sorry, I misread, you have separate pages. I will edit.

[mauthi]

had to change something - see: #10

[mauthi]

rest is fine and works like expected!

[mauthi]

If have one question to this:
if (button.action === 'router') { this.$router.push({ name: button.route, params: { id: row.dtRowId } }); }

would it be possible to make the params customizable or extendable to add own values to route params

My use cases:

• would like to change name of id param to e.g. supplier_id
• would like to add additional params like "openSupplierFilter: true"

[mauthi]

see pull request - made a suggestion how to add params

[aocneanu]

The focus that I have when I'm working on components like this is to automatize what's generic, and instead of compromising for custom situations, leave open doors for that.

What I would do in this scenario is to define a button with just an event, put a listener on the table declaration to call a method that will do:

this.$router.push({name: myHardcodedNameRoute, params: { event.supplier_id, customParam } });

or whatever I need.

[gandesc]

What I would do in this scenario is to define a button with just an event, put a listener on the table declaration

I'd do the same - in which case you can handle it as custom as you need, add any params, query other services, etc, before routing.