@hostlink/nuxt-light 1.21.5 → 1.21.7

package/dist/runtime/components/l-table2.vue

@@ -1,754 +0,0 @@
-<script setup lang="ts">
-import { useQuasar, QTable, type QTableColumn, type QTableProps, Dialog, QTab } from 'quasar';
-
-import { ref, computed, onMounted, useSlots, useAttrs, watch, defineComponent, h } from "vue";
-import { t, q, useLight, GQLFieldBuilder, model } from '../';
-import { toQuery } from '@hostlink/light';
-import { collect } from "#imports"
-
-const $q = useQuasar();
-
-
-const minimized = defineModel<boolean>("minimized", { default: false })
-const maximized = defineModel<boolean>("maximized", { default: false })
-
-// extends QTableColumn
-export type LTableColumn = QTableColumn & {
-    searchable?: boolean,
-    searchType?: string,
-    searchOptions?: Array<any> | Function,
-    searchMultiple?: boolean,
-    gqlField?: string | Array<string> | Object,
-    backgroundColor?: string | Function
-}
-
-
-const errors = ref<InstanceType<any>>([
-]);
-
-export type LTableProps = QTableProps & {
-    columns?: Array<LTableColumn>,
-    actions?: Array<string>,
-    sortBy?: string | null | undefined,
-    rowKey?: string,
-    modelName?: string | null | undefined,
-    searchable?: boolean | null | undefined,
-    selected?: Array<any>,
-    maximizable?: boolean,
-    minimizable?: boolean,
-    rows?: Array<any>,
-    onRequestData?: (request: LTableRequest) => void
-    addComponent?: Dialog
-    addComponentProps?: any
-}
-
-
-const props = withDefaults(defineProps<LTableProps>(), {
-    actions: () => [],
-    rowsPerPageLabel: "Records per page:",
-    selection: "none",
-    rowsPerPageOptions: () => [3, 5, 7, 10, 15, 20, 25, 50, 0],
-    pagination: () => {
-        return {
-            sortBy: null,
-            descending: true,
-            page: 1,
-            rowsPerPage: 10,
-        }
-    },
-    fullscreen: false,
-    searchable: false,
-    maximizable: false,
-    minimizable: false,
-    selected: () => [],
-    loadingLabel: "Loading...",
-    noDataLabel: "No data available",
-    dark: undefined,
-});
-
-
-const isServerSide = (props.rows == undefined);
-
-
-const light = useLight();
-
-const pagination = ref(props.pagination);
-
-if (props.rowsPerPageOptions[0] == 0) {
-    pagination.value.rowsPerPage = 0;
-}
-
-//apply all aligns to the columns 
-props.columns?.forEach((col) => {
-    if (!col.align) {
-        col.align = "left";
-    }
-    if (!col.field && col.name) {
-        col.field = col.name
-    }
-
-    col.label = t(col.label)
-})
-
-if (props.columns) {
-    for (let i = 0; i < props.columns.length; i++) {
-        if (props.columns[i].searchOptions) {
-            let opts = props.columns[i].searchOptions;
-            if (typeof opts == "function") {
-                props.columns[i].searchOptions = await opts();
-            }
-
-
-        }
-    }
-}
-
-export interface LTableRequest {
-    sort: string,
-    fields: Array<string>,
-    gql: {
-        __args: {
-            filters: any,
-            sort: string
-        },
-        data: {
-            __args: {
-                limit: number
-            },
-            [key: string]: any
-        },
-        meta: {
-            total: boolean,
-            key: boolean,
-            name: boolean
-        }
-    },
-    offset: number,
-    limit: number,
-    loadData: (model: string, filters: any, fields: Array<any>) => void,
-    loadObjects: (model: string, filters: any, fields: Array<any>) => void,
-    setData: (data: { data: Array<{ data: any }>, meta: { total: Number, key: string, name: string } }) => void,
-}
-
-const emits = defineEmits<{
-    "request-data": [p: LTableRequest],
-    "update:selected": [p: Array<any>]
-}>()
-
-
-const loading = ref(false);
-
-let activeEdit = false;
-let actionView = false;
-let actionDelete = false;
-if (props.actions.length > 0) {
-    actionView = props.actions.includes("view");
-    activeEdit = props.actions.includes("edit");
-    actionDelete = props.actions.includes("delete");
-}
-
-
-
-if (props.sortBy) {
-    let [sortBy, descending] = props.sortBy.split(":");
-    pagination.value.sortBy = sortBy;
-    pagination.value.descending = descending == "desc";
-}
-
-const hasSearch = computed(() => {
-    return props.columns?.some((col) => {
-        return col.searchable;
-    })
-})
-
-const table = ref<InstanceType<typeof QTable>>();
-
-const filters = ref<InstanceType<any>>({});
-const rows = ref<InstanceType<any>>(props.rows);
-if (rows.value == undefined) {
-    rows.value = [];
-}
-
-onMounted(() => {
-    table.value && table.value.requestServerInteraction();
-})
-
-
-let primaryKey = ref(props.rowKey);
-const modelName = ref(props.modelName);
-
-
-const validateData = () => {
-    if (primaryKey.value == null) return;
-
-    if (props.actions.includes("edit")) {
-        if (rows.value.length > 0) {
-            //get first row
-            let row = rows.value[0];
-            //check has primary key
-
-            if (!row[primaryKey.value]) {
-                errors.value.push("[edit] Primary key not found in the data");
-            }
-        }
-    }
-
-    if (props.actions.includes("delete")) {
-        if (rows.value.length > 0) {
-            //get first row
-            let row = rows.value[0];
-            //check has primary key
-
-            if (!row[primaryKey.value]) {
-                errors.value.push("[delete] Primary key not found in the data");
-            }
-        }
-    }
-
-}
-
-const getData = async (
-    operation: string,
-    filters = {},
-    sort: String,
-    offset: number,
-    limit: number,
-    fields: Array<string> = []) => {
-
-    const query: any = {};
-    query[operation] = {
-        meta: {
-            total: true,
-            key: true,
-            name: true
-        }
-    }
-
-    let offset_limit: any = {}
-    if (offset) {
-        offset_limit.offset = offset;
-    }
-
-    if (limit) {
-        offset_limit.limit = limit;
-    }
-
-    if (offset_limit) {
-        query[operation].data = {
-            __args: offset_limit
-        };
-    }
-
-    let params: any = {}
-    if (sort) {
-        params.sort = sort;
-    }
-
-    if (filters) {
-        params.filters = filters
-    }
-
-    query[operation].__args = params;
-
-    query[operation].data = query[operation].data || {};
-    Object.assign(query[operation].data, fields);
-
-    const resp = await q(query);
-    return resp[operation];
-
-}
-
-const onLocalRequest = async (p: any) => {
-    if (!isServerSide) return;
-
-
-    let sort = "";
-    if (p.pagination.sortBy) {
-        sort = p.pagination.sortBy + ":" + (p.pagination.descending ? "desc" : "asc");
-    }
-
-    //fields
-    const builder = GQLFieldBuilder();
-    if (props.rowKey) {
-        builder.add(props.rowKey);
-    }
-
-    props.columns?.forEach((col) => {
-        if (col.gqlField) {
-            builder.add(col.gqlField);
-            return;
-        }
-
-        if (!col.name) return;
-        if (col.name.startsWith("_")) {
-            return;
-        }
-        builder.add(col.name);
-
-    });
-
-    if (actionView) {
-        builder.add("canView");
-    }
-
-    if (actionDelete) {
-        builder.add("canDelete");
-    }
-
-    if (activeEdit) {
-        builder.add("canUpdate");
-    }
-
-
-    const callback: LTableRequest = {
-        sort: sort,
-        fields: builder.get(),
-        offset: (p.pagination.page - 1) * p.pagination.rowsPerPage,
-        limit: p.pagination.rowsPerPage,
-        gql: {
-            __args: {
-                filters: getFilterValue(),
-                sort: sort
-            },
-            data: {
-                __args: {
-                    limit: p.pagination.rowsPerPage,
-                    offset: (p.pagination.page - 1) * p.pagination.rowsPerPage
-                },
-                ...toQuery(builder.get())
-            },
-            meta: {
-                total: true,
-                key: true,
-                name: true
-            }
-        },
-        setData(data: { data: Array<{ data: any }>, meta: { total: number, key: string, name: string } }) {
-            rows.value = data.data;
-            primaryKey.value = data.meta.key;
-            modelName.value = data.meta.name;
-            pagination.value.rowsNumber = data.meta.total;
-
-            pagination.value.page = p.pagination.page;
-            pagination.value.sortBy = p.pagination.sortBy;
-            pagination.value.descending = p.pagination.descending;
-            pagination.value.rowsPerPage = p.pagination.rowsPerPage;
-
-            loading.value = false;
-
-            validateData();
-        },
-        loadObjects(model: string, filters: any = null, fields: Array<any> = []) {
-            return this.loadData(model, filters, fields);
-        },
-        async loadData(model: string, filters: any = null, fields: Array<any> = []) {
-            fields.forEach((f) => {
-                builder.add(f);
-            })
-
-            let localFilters = getFilterValue();
-            if (filters) {
-                localFilters = {
-                    ...localFilters,
-                    ...filters
-                }
-            }
-            loading.value = true;
-
-            try {
-                let c = collect(model, builder.get())
-
-                console.log(localFilters)
-
-                if (localFilters) {
-                    for (let [key, value] of Object.entries(localFilters)) {
-                        if (typeof value == "object") {
-                            if (value.contains) {
-                                c = c.whereContains(key, value.contains);
-                            }
-                            if (value.between) {
-                                c = c.whereBetween(key, value.between);
-                            }
-                        } else {
-                            c = c.where(key, value);
-                        }
-                    }
-                }
-
-                if (sort) {
-                    if (sort.split(":")[1] == "asc") {
-                        c = c.sortBy(sort.split(":")[0]);
-                    } else {
-                        c = c.sortByDesc(sort.split(":")[0]);
-                    }
-                }
-
-                c = c.forPage(p.pagination.page, p.pagination.rowsPerPage);
-
-                const data = await c.all();
-                const allData = {
-                    data,
-                    meta: c.meta
-                }
-                //const allData = await getData("list" + model, localFilters, sort, this.offset, this.limit, builder.get());
-                this.setData(allData);
-            } catch (e: any) {
-                quasar.dialog({
-                    message: e,
-                    color: "negative"
-                })
-                this.setData({ data: [], meta: { total: 0, key: "", name: "" } });
-            }
-
-
-
-        }
-    }
-
-
-    loading.value = true;
-    //emits("request", p);
-    emits("request-data", callback);
-
-}
-
-const getFilterValue = () => {
-    let f: any = {};
-
-    props.columns?.forEach((col) => {
-        if (col.searchable) {
-            if (filters.value[col.name] !== null && filters.value[col.name] !== "" && filters.value[col.name] !== undefined) {
-
-                if (col.searchType == "number") {
-                    f[col.name] = filters.value[col.name]
-                } else if (col.searchType == "date") {
-                    if (filters.value[col.name].from) {
-                        f[col.name] = {
-                            between: [filters.value[col.name].from, filters.value[col.name].to]
-                        }
-                    }
-                } else if (col.searchType == "select") {
-                    f[col.name] = filters.value[col.name]
-
-                } else {
-                    f[col.name] = {
-                        contains: filters.value[col.name]
-                    }
-                }
-            }
-        }
-    });
-    return f;
-}
-
-
-const onFilters = () => {
-
-    //clone the filters
-    onLocalRequest({
-        pagination: {
-            page: 1,
-            rowsPerPage: props.pagination.rowsPerPage,
-            sortBy: props.pagination.sortBy,
-            descending: props.pagination.descending
-        }
-    })
-}
-
-const slots = useSlots();
-
-const ss = Object.entries(slots).map(([key, value]) => {
-    return key;
-});
-
-const quasar = useQuasar();
-const onDelete = async (id: any) => {
-    if (modelName.value == null) return;
-
-    try {
-        await model(modelName.value).delete(id);
-    } catch (e: any) {
-        quasar.notify({
-            message: e.message,
-            color: "negative"
-        })
-        return;
-    }
-    // refresh the table
-    if (table.value) {
-        table.value.requestServerInteraction();
-    }
-}
-const attrs = computed(() => {
-    return {
-        ...props,
-
-        ...{
-            dense: light.getStyle("tableDense"),
-            flat: light.getStyle("tableFlat"),
-            bordered: light.getStyle("tableBorder"),
-            separator: light.getStyle("tableSeparator"),
-        },
-        loadingLabel: t(props.loadingLabel),
-        noDataLabel: t(props.noDataLabel),
-        rowsPerPageOptions: props.rowsPerPageOptions,
-        rowsPerPageLabel: t(props.rowsPerPageLabel),
-        selection: props.selection,
-        rowKey: props.rowKey,
-    }
-});
-
-const filter = ref('');
-
-const toColumns = props.columns?.filter((col: any) => {
-    return col.to;
-}).map((col: any) => {
-    col.slot_name = 'body-cell-' + col.name;
-    return col;
-
-})
-/* 
-const filterFn = (val, update, abort) {
-    update(() => {
-        const needle = val.toLocaleLowerCase()
-        options.value = stringOptions.filter(v => v.toLocaleLowerCase().indexOf(needle) > -1)
-    })
-},
- */
-
-const isDark = computed(() => {
-    return light.theme == "dark";
-})
-
-const hasRowExpand = computed(() => {
-    return ss.indexOf("row-expand") >= 0;
-})
-
-const hasActions = computed(() => {
-    return props.actions.length > 0;
-})
-
-const getCellStyle = (col: any, row: any) => {
-    const style: any = col.cellStyle ?? {};
-    if (col.backgroundColor) {
-        if (typeof col.backgroundColor == "function") {
-            style.backgroundColor = col.backgroundColor(row);
-        } else {
-            style.backgroundColor = col.backgroundColor;
-        }
-
-    }
-    return style;
-}
-
-const getCellClass = (col: any, row: any) => {
-    const cl: any = [];
-
-    if (col.cellClass) {
-        if (typeof col.cellClass == "function") {
-            cl.push(col.cellClass(row));
-        } else {
-            cl.push(col.cellClass);
-        }
-
-    }
-    return cl;
-}
-
-const localSelected = computed({
-    get() {
-        return props.selected;
-    },
-    set(val) {
-        emits("update:selected", val);
-    }
-});
-
-watch(() => props.rows, (val) => {
-    rows.value = val;
-});
-
-const computedColumns = computed(() => {
-    return props.columns;
-})
-
-
-function requestServerInteraction() {
-    table.value && table.value.requestServerInteraction();
-}
-
-defineExpose({
-    requestServerInteraction
-})
-
-const onAdd = () => {
-    if (!props.addComponent) return;
-
-    $q.dialog({
-        component: props.addComponent,
-        componentProps: props.addComponentProps,
-
-    }).onOk(() => {
-        requestServerInteraction();
-    })
-}
-</script>
-
-
-<template>
-    <l-card flat bordered :maximizable="maximizable" :minimizable="minimizable" :title="title"
-        v-model:minimized="minimized" v-model:maximized="maximized">
-
-        <q-toolbar v-if="addComponent">
-            <q-btn icon="sym_o_add" :label="$t('Add')" :color="$light.color" @click="onAdd" v-if="addComponent" />
-        </q-toolbar>
-
-
-        <template v-if="errors.length > 0">
-            <div class="q-mb-sm">
-                <div class="q-gutter-sm">
-                    <l-alert type="negative" v-for="e in errors">{{ e }}</l-alert>
-                </div>
-            </div>
-        </template>
-
-        <q-table v-bind="attrs" :loading="loading" :rows="rows" ref="table" @request="onLocalRequest" :columns="columns"
-            v-model:pagination="pagination" :filter="filter" v-model:selected="localSelected">
-
-
-
-
-
-            <template #header="props">
-                <q-tr :props="props">
-                    <q-td v-if="selection != 'none'" auto-width>
-                        <q-checkbox v-model="props.selected" />
-                    </q-td>
-                    <q-th v-if="hasRowExpand" auto-width></q-th>
-                    <q-th v-if="hasActions" auto-width></q-th>
-                    <q-th v-for="col in props.cols" :key="col.name" :props="props">{{ col.label }}</q-th>
-                </q-tr>
-            </template>
-
-
-
-            <template #body="props">
-                <q-tr :props="props">
-                    <q-td v-if="selection != 'none'" auto-width>
-                        <q-checkbox v-model="props.selected" />
-                    </q-td>
-                    <q-td v-if="hasRowExpand" auto-width>
-                        <q-btn :class="{ 'text-grey-8': !isDark }" flat round size="sm"
-                            :icon="props.expand ? 'sym_o_expand_more' : 'sym_o_expand_less'"
-                            @click="props.expand = !props.expand"></q-btn>
-                    </q-td>
-
-                    <q-td v-if="hasActions" auto-width>
-                        <div :class="{ 'text-grey-8': !isDark }" v-if="primaryKey">
-
-                            <l-view-btn v-if="actionView && props.row.canView"
-                                :to="`/${modelName}/${props.row[primaryKey]}/view`" size="sm" />
-
-                            <l-edit-btn v-if="activeEdit && props.row.canUpdate"
-                                :to="`/${modelName}/${props.row[primaryKey]}/edit`" size="sm" />
-
-                            <l-delete-btn v-if="actionDelete && props.row.canDelete"
-                                @submit="onDelete(props.row[primaryKey])" size="sm"></l-delete-btn>
-
-                            <slot name="actions" v-bind="props"></slot>
-                        </div>
-
-                    </q-td>
-
-
-
-                    <template v-for="col in props.cols">
-                        <template v-if="ss.indexOf('body-cell-' + col.name) >= 0">
-                            <slot :name="'body-cell-' + col.name" v-bind="props"></slot>
-                        </template>
-                        <template v-else>
-                            <q-td :key="col.name" :props="props" :auto-width="col.autoWidth ?? false"
-                                :style="getCellStyle(col, props.row)" :class="getCellClass(col, props.row)"><template
-                                    v-if="col.to" class="bg-primary">
-                                    <l-link :to="col.to(props.row)">{{ col.value }}</l-link>
-                                </template><template v-else>{{ col.value }}</template></q-td>
-                        </template>
-                    </template>
-                </q-tr>
-                <q-tr v-show="props.expand" :props="props">
-                    <q-td colspan="100%">
-                        <slot name="row-expand" v-bind="props"></slot>
-                    </q-td>
-                </q-tr>
-            </template>
-
-
-            <template #top-right="props" v-if="searchable">
-                <q-input v-if="searchable" outlined dense debounce="300" v-model="filter" :placeholder="$t('Search')"
-                    :color="$light.color">
-                    <template v-slot:append>
-                        <q-icon name="search" />
-                    </template>
-                </q-input>
-
-
-
-
-            </template>
-
-
-            <!-- template v-for="col in toColumns" v-slot:[col.slot_name]="props">
-            <q-td :props="props">
-                <l-link :to="col.to(props.row)">
-                    {{ col.field(props.row) }}
-                </l-link>
-            </q-td>
-        </template -->
-
-
-            <template #top-row="props" v-if="hasSearch && isServerSide">
-                <q-tr>
-                    <q-td v-if="selection != 'none'" auto-width />
-                    <q-td v-if="hasRowExpand" auto-width />
-                    <q-td v-if="hasActions" auto-width />
-                    <q-td v-for="col in props.cols">
-                        <template v-if="col.searchable">
-
-                            <template v-if="col.searchType == 'number'">
-                                <q-input style="min-width: 80px;" dense clearable filled square
-                                    v-model.number="filters[col.name]" @keydown.enter.prevent="onFilters"
-                                    @clear="onFilters" mask="##########" :enterkeyhint="$t('search')"></q-input>
-                            </template>
-
-                            <template v-if="col.searchType == 'select'">
-                                <q-select dense clearable filled square v-model="filters[col.name]"
-                                    @update:model-value="onFilters" options-dense :options="col.searchOptions"
-                                    emit-value map-options :multiple="col.searchMultiple" :color="$light.color" />
-
-                            </template>
-
-
-                            <template v-if="col.searchType == 'date'">
-                                <l-date-picker dense clearable filled square :outlined="false" hide-bottom-space
-                                    v-model="filters[col.name]" @update:model-value="onFilters" range
-                                    @clear="onFilters" />
-                            </template>
-
-                            <template v-if="!col.searchType || col.searchType == 'text'">
-                                <q-input style="min-width: 80px;" dense clearable filled square
-                                    v-model="filters[col.name]" @keydown.enter.prevent="onFilters" @clear="onFilters"
-                                    :enterkeyhint="$t('search')" :color="$light.color"></q-input>
-
-                            </template>
-
-                        </template>
-                    </q-td>
-                </q-tr>
-            </template>
-
-            <template v-for="slot of ss" v-slot:[slot]="props">
-                <slot :name="slot" v-bind="props"></slot>
-            </template>
-        </q-table>
-    </l-card>
-</template>