Přeskočit na hlavní obsah

Field

Rendering fieldů ve formulářích vám umožní vytvářet formuláře přesně tak, jak potřebujete - fieldy jsou Vue komponenty.

Megio panel

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/fields/MyCustomFieldRenderer.vue
<script setup lang="ts">
import { ref } from 'vue'
import { useVuetify } from 'megio-panel'
import { mdiCloseCircle, mdiMinusCircle } from '@mdi/js'
import type { IFormProp } from 'megio-api/types/collections'

// Dostupné props
const props = defineProps<{
    field: IFormProp
    errors: string[],
    defaultValue?: string | null,
    canBeNull: boolean,
    relatedValues: Record<string, any>
}>()

// Emit pro aktualizaci hodnoty ve formuláři
const emits = defineEmits<{
    (e: 'change', field: IFormProp, value?: string | null): void
}>()

// Vuetify
const { VBtn, VTextField, VIcon } = useVuetify()

// Reaktivní field value nastavené na aktuální hodnotu
const input = ref<undefined | string | null>(props.defaultValue)

// Event pro změnu hodnoty v konkrétním fieldu
function onInputChange(value?: string | null) {
    emits('change', props.field, value)
}

// Nullability toggle
function toggleNull() {
    input.value = input.value === null ? undefined : null
    onInputChange(input.value)
}
</script>

<template>
    <div class="position-relative">
        <span
            v-if="input === null"
            class="text-mono text-grey-lighten-1 position-absolute ps-4 mt-7"
        >
            null
        </span>
        <VTextField
            v-model="input"
            @update:modelValue="onInputChange"
            :label="field.label"
            :name="field.name"
            :error-messages="errors"
            :disabled="field.disabled"
            :readonly="input === null"
            :active="input !== undefined && input === null"
            hide-details="auto"
        >
            <template v-if="canBeNull" #append-inner>
                <div>
                    <VBtn
                        @click="toggleNull"
                        density="comfortable"
                        variant="text"
                        color="grey"
                        icon
                    >
                        <VIcon :icon="input === null ? mdiMinusCircle : mdiCloseCircle" />
                    </VBtn>
                </div>
            </template>
        </VTextField>
    </div>
</template>

2. Registrace komponenty​

Aby se datagrid dozvěděl o novém field-rendereru, je nutné ho zaregistrovat v souboru assets/panel.ts.

assets/panel.ts
import 'megio-panel/styles'
import { createMegioPanel, useGlobals } from 'megio-panel'
import MyCustomFieldRenderer from '@/assets/panel/datagrid/fields/MyCustomFieldRenderer.vue'

const { columns, modals, actions, fields } = useGlobals()
const datagrid = { actions, modals, fields, columns }
const apiUrl = window.location.host.includes('localhost') ? 'http://localhost:8090/' : '/'

createMegioPanel(apiUrl, {
    datagrid: {
        ...datagrid,
        fields: [
            ...fields,
            {
                component: MyCustomFieldRenderer,
                rendererName: 'my-custom-field-renderer'
            }
        ]
    }
})

3. Build projektu​

yarn build

Související​