@hostlink/nuxt-light 1.20.3 → 1.20.5

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

@@ -1,5 +1,459 @@
-<script setup>
-import { useSlots } from "vue";
+<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();
 
@@ -7,44 +461,294 @@ 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>
-    <q-table row-key="name">
 
-        <template #header="props">
 
+<template>
+    <l-card flat bordered :maximizable="maximizable" :minimizable="minimizable" :title="title"
+        v-model:minimized="minimized" v-model:maximized="maximized">
 
-            <q-tr :props="props">
+        <q-toolbar v-if="addComponent">
+            <q-btn icon="sym_o_add" :label="$t('Add')" :color="$light.color" @click="onAdd" v-if="addComponent" />
+        </q-toolbar>
 
-                <q-th auto-width key="_expand" :props="{
-                    colsMap: {
-                        _expand: {
-                            align: 'right'
-                        }
-                    }
-                }">1</q-th>
 
-                <q-th auto-width key="_actions">act</q-th>
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">{{ col.label }}</q-th>
-            </q-tr>
+        <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>
 
-        <template #body="props">
+        <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>
+
+
 
-            <q-tr :props="props">
-                <template v-for="col in props.cols">
-                    <slot v-if="slots['body-cell-' + col.name]" :name="'body-cell-' + col.name" v-bind="props"
-                        :key="col.name"></slot>
-                    <template v-else>
-                        <q-td :props="props" :key="col.name">
-                            {{ col.name }}
-                            {{ col.value }}</q-td>
+            <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>
-                </template>
-            </q-tr>
+                </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>
-    </q-table>
+
+            <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>