Akce

Akce jsou ve své podstatě jen tlačítka v datagridu, která mohou vyvolat různé události nad vybranými položkami.

Typy akcí

• row action - spustí se po kliknutí na tlačítko v řádku tabulky.
• bulk action - spustí se po kliknutí na tlačítko v hromadných akcích.

1. Registrace akcí

V předchozí kapitole jsme si ukázali, jak vytvořit modální okno. Nyní si ukážeme, jak vytvořit akci, která toto modální okno otevře.

assets/panel.ts

import 'megio-panel/styles'
import { createMegioPanel, useGlobals } from 'megio-panel'
import MyCustomModal from '@/assets/panel/datagrid/modals/MyCustomModal.vue'

const { modals, actions, columns, fields } = useGlobals()
const datagrid = { modals, actions, columns, fields }

// Mount panelu na DOM
createMegioPanel('http://localhost:8090/', {
    datagrid: {
        ...datagrid,
        modals: [
            ...modals,
            // Vlastní modální okno otevírané přes akci `custom-action`
            {
                component: MyCustomModal,

                // Název akce, která má otevřít tento modal
                onAction: 'custom-action'
            }
        ],
        actions: {
            // Akce pro konkrétní řádek
            row: [
                ...actions.row,
                {
                    // Label zobrazeného tlačítka
                    label: 'Moje row akce',

                    // Trigger akce, jenž je přiřazena MyCustomModal.vue
                    name: 'custom-action',

                    // Zobrazí tlačítko pouze u výchozí kolekce a u kolekce `user`
                    showOn: ['/collections/@', '/collections/user']
                }
            ],

            // Hromadné akce
            bulk: [
                ...actions.bulk,
                {
                    // Label zobrazeného tlačítka
                    label: 'Moje hromadná akce',

                    // Trigger akce, jenž je přiřazena MyCustomModal.vue
                    name: 'custom-action',

                    // Zobrazí tlačítko pouze u výchozí kolekce a u kolekce `user`
                    showOn: ['/collections/@', '/collections/user']
                }
            ]
        }
    }
})

2. Build projektu

yarn build