@hostlink/nuxt-light 0.0.100 → 0.0.102

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "0.0.100"
+  "version": "0.0.102"
 }

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
-import { useQuasar, QTable } from 'quasar';
+import { useQuasar, QTable, is } from 'quasar';
 import { ref, computed, onMounted, useSlots, useAttrs } from "vue";
 import { t, deleteObject, q, useLight, GQLFieldBuilder } from '../';
+import { toQuery } from '@hostlink/light';
 
 const errors = ref<InstanceType<any>>([]);
 
@@ -77,6 +77,7 @@ const props = defineProps({
     }
 })
 
+
 const pagination = ref(props.pagination);
 
 if (props.rowsPerPageOptions[0] == 0) {
@@ -102,8 +103,8 @@ if (props.columns) {
             if (typeof opts == "function") {
                 props.columns[i].searchOptions = await opts();
             }
-            
-            
+
+
         }
     }
 }
@@ -127,8 +128,26 @@ const renderColumns = computed(() => {
 })
 
 interface LTableRequest {
-    loadData: (model: string, filters: any, fields: Array<any>) => void
-
+    sort: string,
+    fields: Array<string>,
+    gql: {
+        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<{
@@ -171,6 +190,10 @@ onMounted(() => {
     }
 })
 
+const isServerSide = computed(() => {
+    return props.rows == undefined;
+})
+
 let primaryKey = ref(props.rowKey);
 const modelName = ref(props.modelName);
 
@@ -254,95 +277,108 @@ const getData = async (
 }
 
 const onRequest = async (p: any) => {
+    if (!isServerSide.value) return;
 
 
-    const callback = {
-
-        loadObjects(model: string, filters: any = null, fields: Array<any> = []) {
-            return this.loadData("list" + model, filters, fields);
-        },
-        async loadData(operation: string, filters: any = null, fields: Array<any> = []) {
+    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);
+    }
 
-            const builder = GQLFieldBuilder();
+    props.columns?.forEach((col) => {
+        if (col.gqlField) {
+            builder.add(col.gqlField);
+        }
 
-            //
+        if (!col.name) return;
+        if (col.name.startsWith("_")) {
+            return;
+        }
+        builder.add(col.name);
 
-            if (props.rowKey) {
-                builder.add(props.rowKey);
-            }
+    });
 
-            fields.forEach((f) => {
-                builder.add(f);
-            });
+    if (actionView) {
+        builder.add("canView");
+    }
 
-            props.columns?.forEach((col) => {
-                if (col.gqlField) {
-                    builder.add(col.gqlField);
-                }
+    if (actionDelete) {
+        builder.add("canDelete");
+    }
 
-                if (col.name.startsWith("_")) {
-                    return;
-                }
-                builder.add(col.name);
+    if (activeEdit) {
+        builder.add("canUpdate");
+    }
 
-            });
 
-            if (actionView) {
-                builder.add("canView");
+    const callback = {
+        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;
 
-            if (actionDelete) {
-                builder.add("canDelete");
-            }
+            pagination.value.page = p.pagination.page;
+            pagination.value.sortBy = p.pagination.sortBy;
+            pagination.value.descending = p.pagination.descending;
+            pagination.value.rowsPerPage = p.pagination.rowsPerPage;
 
-            if (activeEdit) {
-                builder.add("canUpdate");
-            }
+            loading.value = false;
 
-            let localFilters = getFilterValue();
+            validateData();
+        },
+        loadObjects(model: string, filters: any = null, fields: Array<any> = []) {
+            return this.loadData("list" + model, filters, fields);
+        },
+        async loadData(operation: string, filters: any = null, fields: Array<any> = []) {
+            fields.forEach((f) => {
+                builder.add(f);
+            })
 
-            /*             console.log("merge filters", filters)
-                        
-                        console.log("local filters", getFilterValue())
-             */            //merge the filters
+            let localFilters = getFilterValue();
             if (filters) {
                 localFilters = {
                     ...localFilters,
                     ...filters
                 }
             }
-
-            let sort = "";
-            if (p.pagination.sortBy) {
-                sort = p.pagination.sortBy + ":" + (p.pagination.descending ? "desc" : "asc");
-            }
-
-
             loading.value = true;
-            const offset = (p.pagination.page - 1) * p.pagination.rowsPerPage;
-            const limit = p.pagination.rowsPerPage;
-            const allData = await getData(operation, localFilters, sort, offset, limit, builder.get());
-
-            rows.value = allData.data;
-
-            //meta
-            primaryKey.value = allData.meta.key;
-            modelName.value = allData.meta.name;
-
-
-            //pagination.value.rowsPerPage = p.pagination.rowsPerPage;
-            pagination.value.page = p.pagination.page;
-            pagination.value.sortBy = p.pagination.sortBy;
-            pagination.value.descending = p.pagination.descending;
-            pagination.value.rowsNumber = allData.meta.total;
-
-            loading.value = false;
-            validateData()
+            const allData = await getData(operation, localFilters, sort, this.offset, this.limit, builder.get());
+            this.setData(allData);
 
         }
     }
 
+
+    loading.value = true;
     //emits("request", p);
     emits("request", callback);
 
@@ -469,6 +505,7 @@ const isDark = computed(() => {
         rows:{{ props.rows }}
     </template>
 
+
     <q-table v-bind="attrs" :row-key="rowKey" :loading="loading" :rows="rows" ref="table" @request="onRequest"
         :rows-per-page-label="$t(props.rowsPerPageLabel)" :columns="renderColumns"
         :rows-per-page-options="rowsPerPageOptions" :selection="selection" v-model:pagination="pagination" :filter="filter"
@@ -518,7 +555,7 @@ const isDark = computed(() => {
 
 
 
-        <template #top-row="props" v-if="hasSearch">
+        <template #top-row="props" v-if="hasSearch && isServerSide">
             <q-tr>
                 <q-td v-if="selection != 'none'" auto-width>
 

package/dist/runtime/pages/User/_user_id/view.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { getObject, getModelFields } from '../../../';
+import { getObject, getModelFields, q, getModelColumns } from '../../../';
 const obj = await getObject(["user_id", "username", "first_name", "last_name", "email", "phone", "roles", 'status', 'join_date']);
 
 </script>
@@ -11,7 +11,7 @@ const obj = await getObject(["user_id", "username", "first_name", "last_name", "
             <l-btn to="update-role" icon="sym_o_people" permission="user.role.add" label="Update role"></l-btn>
         </template>
 
-        <l-card>
+        <l-card class="q-mb-md">
             <l-list v-model="obj" :fields="getModelFields('User', [
                 'username',
                 'first_name',
@@ -24,5 +24,41 @@ const obj = await getObject(["user_id", "username", "first_name", "last_name", "
             ])">
             </l-list>
         </l-card>
+
+
+
+        <l-tabs>
+
+            <l-tab label="Event log">
+                <l-table row-key="eventlog_id" sort-by="eventlog_id:desc"
+                    :columns="getModelColumns('EventLog', ['eventlog_id', 'class', 'id', 'action', 'created_time'])"
+                    @request="async (req) => {
+
+
+                        const a = {
+                            listUser: {
+                                __args: {
+                                    filters: {
+                                        user_id: obj.user_id
+                                    }
+                                },
+                                data: {
+                                    __args: {
+                                        limit: 1
+                                    },
+                                    eventLog: req.gql
+                                }
+                            }
+                        }
+
+                        let resp = await q(a);
+                        req.setData(resp.listUser.data[0].eventLog)
+
+
+                    }" />
+            </l-tab>
+
+        </l-tabs>
+
     </l-page>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "0.0.100",
+  "version": "0.0.102",
   "description": "HostLink Nuxt Light Framework",
   "repository": "@hostlink/nuxt-light",
   "license": "MIT",