Modal

Pomocí modálních oken lze rozšířit datagrid o různé hromadné i individuální akce, které se provedou nad vybranými položkami.

Instalace vitejs/plugin-vue

Pokud jste doposud nepracovali se soubory .vue, tak nyní je potřeba provést menší konfiguraci - postupujte prosím podle následujících kroků v kapitole práce s assety - vue a teprve poté pokračujte dále.

1. Vytvoření komponenty

assets/panel/datagrid/modals/MyCustomModal.vue

<script setup lang="ts">
import { ref } from 'vue'
import { megio } from 'megio-api'
import { useToast, useVuetify } from 'megio-panel'
import type { IRow } from 'megio-api/types/collections'

// Dostupné props
const props = defineProps<{
    open: boolean
    rows: IRow[],
    recipe: string
}>()

// Dostupné emits
const emits = defineEmits<{
    (e: 'onAccept'): void,
    (e: 'onCancel'): void
}>()

// Vuetify
const {
    VDialog, VSpacer, VBtn, VChip,
    VCard, VCardTitle, VCardText, VCardActions
} = useVuetify()

// Vyskakoací notifikace
const toast = useToast()

// Reaktivní proměnná pro loading state
const loading = ref<boolean>(false)

// Asynchronní zpracování accept akce
async function handleAccept() {
    loading.value = true

    const resp = await megio.collections.delete({
        recipe: props.recipe,
        ids: props.rows.map(row => row.id)
    })

    loading.value = false

    if (resp.success) {
        toast.add('Položka byla úspěšně odstraněna', 'warning')
        emits('onAccept')
    }
}
</script>

<template>
    <VDialog v-model="props.open" :max-width="500" :scrollable="true" :persistent="true">
        <VCard>
            <VCardTitle class="text-h5 mt-3 px-5 pt-5 pb-0">
                Testovací modal
            </VCardTitle>
            <VCardText class="py-3 px-5" style="max-height: 300px">
                <div class="mb-5">
                    Opravdu si přejete odstranit
                    {{ rows.length === 1 ? 'tuto položku' : 'tyto položky' }}?
                </div>
                <VChip class="me-2 mb-2" size="small" v-for="row in rows">
                    {{ row.id }}
                </VChip>
            </VCardText>
            <VCardActions class="justify-end">
                <VSpacer></VSpacer>
                <VBtn
                    @click="emits('onCancel')"
                    :disabled="loading"
                    variant="tonal"
                    color=""
                >
                    Zrušit
                </VBtn>
                <VBtn
                    @click="handleAccept"
                    :loading="loading"
                    variant="tonal"
                    color="error"
                >
                    Potvrdit
                </VBtn>
            </VCardActions>
        </VCard>
    </VDialog>
</template>

2. Registrace komponenty

assets/panel.ts

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

// Výchozí nastavení celého datagridu
const { modals, actions, columns, fields } = useGlobals()
const datagrid = { modals, actions, columns, fields }

// Mount panelu na DOM
createMegioPanel('http://localhost:8090/', {
    datagrid: {
        ...datagrid,
        modals: [
            ...modals,
            {
                // Komponenta modálního okna
                component: MyCustomModal,

                // Název akce, která má otevřít tento modal (viz další kapitola)
                onAction: 'custom-action'
            }
        ]
    }
})

3. Build projektu

yarn build