View

Vlastní views vám otevřou možnost absolutního přizpůsobení panelu dle potřeb každého projektu.

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í view

assets/panel/views/MyCustomView.vue

<script lang="ts" setup>
import { useVuetify } from 'megio-panel'

const { VBtn } = useVuetify()
</script>

<template>
    <div class="d-flex align-center justify-center h-100">
        <div class="text-center">
            <h1>Test vlastního view</h1>
            <VBtn variant="tonal" class="mt-3">Test btn</VBtn>
        </div>
    </div>
</template>

2. Registrace routy

assets/panel.ts

import 'megio-panel/styles'
import { createMegioPanel, useGlobals } from 'megio-panel'
import { RouteRecordRaw } from 'megio-panel/types'

const { routes } = useGlobals()

const ownRoutes: RouteRecordRaw[] = [
    ...routes,
    // Přidání vlastního view
    {
        path: '/my-view',
        name: 'megio.view.custom-view',
        component: () => import('@/assets/panel/views/MyCustomView.vue')
    }
]

// Mount panelu na DOM
createMegioPanel('http://localhost:8090/', { routes: ownRoutes })

3. Build projektu

yarn build

Ukázkové příklady

Pro lepší představu o možnostech vlastních views, je zde několik ukázkových příkladů.

User view - ReadAll

Příklad view pro zobrazení všech uživatelů v datagridu s využitím Megio komponent.

assets/panel/views/user/ReadAll.vue

<script lang="ts" setup>
import { ref, inject } from 'vue'
import { megio } from 'megio-api'
import { useComponents, useRouter } from 'megio-panel'
import type { IDatagridSettings } from 'megio-panel/types'
import type { IRespReadAll, IPagination, IRow, IOrderBy, ISearch } from 'megio-api/types/collections'

// Vue router z `megio-panel`
const router = useRouter()

// Megio komponenty z `megio-panel`
const { MDatagrid, MLayout, MPageHeading } = useComponents()

// Název kolekce pro načtení dat
const recipeName = 'user'

// Načtení akcí pro datagrid
const actions = inject<IDatagridSettings['actions']>('datagrid-actions')

// Definice proměnných
const loading = ref<boolean>(true)
const datagrid = ref()

// Load callback pro datagrid
async function loadFunction(
    newPagination: IPagination,
    orderBy: IOrderBy[],
    search?: ISearch
): Promise<IRespReadAll> {
    loading.value = true

    const resp = await megio.collections.readAll({
        recipe: recipeName,
        schema: true,
        currentPage: newPagination.currentPage,
        itemsPerPage: newPagination.itemsPerPage,
        orderBy,
        search
    })

    loading.value = false

    return resp
}

// Event pro otevření detailu uživatele
async function handleFirstColumnClick(row: IRow) {
    await router.push({
        name: 'app.view.users.update',
        params: {
            id: row.id
        }
    })
}

// Event pro otevření formuláře pro vytvoření uživatele
async function handleAddButtonClick() {
    await router.push({ name: 'app.view.users.create' })
}
</script>

<template>
    <MLayout :loading="loading">
        <template v-slot:default>
            <div class="pa-7">
                <MPageHeading
                    :breadcrumb="['Uživatelé']"
                    :btn-add-resources="[]"
                    @on-add="handleAddButtonClick"
                    @on-refresh="() => datagrid.refresh()"
                />
                <MDatagrid
                    v-if="actions"
                    ref="datagrid"
                    class="mt-5"
                    :key="recipeName"
                    :loadFunction="loadFunction"
                    :rowActions="actions.row"
                    :bulkActions="actions.bulk"
                    :allowActionsFiltering="true"
                    :defaultItemsPerPage="15"
                    :btn-detail-resources="[]"
                    emptyDataMessage="Data nejsou k dispozici."
                    @onFirstColumnClick="handleFirstColumnClick"
                />
            </div>
        </template>
    </MLayout>
</template>

User view - Create

Příklad view pro vytvoření nového uživatele s využitím Megio komponent.

assets/panel/views/user/Create.vue

<script lang="ts" setup>
import { onMounted } from 'vue'
import { mdiArrowLeft } from '@mdi/js'
import { useComponents, useVuetify, useCreateForm, useRouter, useToast } from 'megio-panel'
import type { IRespCreate } from 'megio-api/types/collections'

// Vue router a toaster z `megio-panel`
const router = useRouter()
const toast = useToast()

// Megio a Vuetify komponenty z `megio-panel`
const { VBreadcrumbs, VBtn } = useVuetify()
const { MDatagridForm, MLayout } = useComponents()

// Composable pro vytvoření formuláře
const {
    loading,
    formSchema,
    collectionName,
    load,
    save
} = useCreateForm({ recipe: 'user', onSave })

// Callback volaný po uložení dat
async function onSave(data: IRespCreate['data']) {
    await router.push({
        name: 'app.view.users.update',
        params: {
            id: data.ids?.[0]
        }
    })
    toast.add('Záznam byl úspěšně vytvořen', 'success')
}

// Event pro kliknutí na tlačítko zpět
async function onClickBack() {
    await router.push({ name: 'app.view.users' })
}

// Načtení dat při načtení komponenty
onMounted(() => load())
</script>

<template>
    <MLayout :loading="loading" class="bg-grey-lighten-4">
        <template v-slot:default>
            <div class="d-flex justify-space-between align-center pa-7 pb-5">
                <VBreadcrumbs
                    :items="['Přidat', collectionName]"
                    class="pa-0"
                    style="font-size: 1.4rem"
                />
                <VBtn
                    @click="onClickBack"
                    :icon="mdiArrowLeft"
                    variant="tonal"
                    size="small"
                />
            </div>
            <MDatagridForm
                v-if="!loading"
                :save-function="save"
                :form-schema="formSchema"
                :collection-name="collectionName"
            />
        </template>
    </MLayout>
</template>

User view - Update

Příklad view pro úpravu existujícího uživatele s využitím Megio komponent.

assets/panel/views/user/Update.vue

<script lang="ts" setup>
import { onMounted } from 'vue'
import { mdiArrowLeft } from '@mdi/js'
import { useComponents, useVuetify, useUpdateForm, useRouter, useRoute } from 'megio-panel'

// Vue router a aktuální routa z `megio-panel`
const router = useRouter()
const route = useRoute()

// Megio a Vuetify komponenty z `megio-panel`
const { MLayout, MDatagridForm } = useComponents()
const { VBreadcrumbs, VBtn } = useVuetify()

// Composable pro úpravu formuláře
const {
    load,
    loading,
    formSchema,
    collectionName,
    save
} = useUpdateForm('user', route.params.id.toString())

// Event pro kliknutí na tlačítko zpět
async function onClickBack() {
    await router.push({ name: 'app.view.users' })
}

// Načtení dat při načtení komponenty
onMounted(() => load())
</script>

<template>
    <MLayout :loading="loading" class="bg-grey-lighten-4">
        <template v-slot:default>
            <div class="d-flex justify-space-between align-center pa-7 pb-5">
                <VBreadcrumbs
                    :items="['Upravit', collectionName]"
                    class="pa-0"
                    style="font-size: 1.4rem"
                />
                <VBtn
                    @click="onClickBack"
                    :icon="mdiArrowLeft"
                    variant="tonal"
                    size="small"
                />
            </div>
            <MDatagridForm
                v-if="!loading"
                :saveFunction="save"
                :form-schema="formSchema"
                :collection-name="collectionName"
            />
        </template>
    </MLayout>
</template>

Registrace rout

Ukázka registrace vlastních views do panelu.

assets/panel.ts

import 'megio-panel/styles'
import { createMegioPanel, useGlobals } from 'megio-panel'
import { RouteRecordRaw } from 'megio-panel/types'

const { routes } = useGlobals()

const ownRoutes: RouteRecordRaw[] = [
    ...routes,
    // Přidání vlastních view
    {
        path: '/users',
        name: 'app.view.users',
        component: () => import('@/assets/panel/views/user/ReadAll.vue')
    },
    {
        path: '/users/create',
        name: 'app.view.users.create',
        component: () => import('@/assets/panel/views/user/Create.vue')
    },
    {
        path: '/users/update/:id',
        name: 'app.view.users.update',
        component: () => import('@/assets/panel/views/user/Update.vue')
    }
]

// Mount panelu na DOM
createMegioPanel('http://localhost:8090/', { routes: ownRoutes })