@hostlink/nuxt-light 0.0.77 → 0.0.78

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "0.0.77"
+  "version": "0.0.78"
 }

package/dist/runtime/components/l-audit-card.vue

@@ -9,7 +9,7 @@ defineProps({
 
 </script>
 <template>
-    <l-card>
+    <l-card title="Audit info">
         <l-list>
             <l-item label="Created time">{{ modelValue.createdTime }}</l-item>
             <l-item label="Created by">{{ modelValue.createdBy }}</l-item>

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

@@ -1,6 +1,6 @@
 <script setup>
 import { useLight } from '../'
-import { useAttrs, ref } from 'vue'
+import { useAttrs, ref, computed } from 'vue'
 
 defineProps({
     loading: Boolean,
@@ -22,16 +22,18 @@ const color = light.getStyle("color", 'primary');
 
 const cl = ["text-white", `bg-${color}`];
 
-const minimize = ref(true);
+const minimize = ref(false);
+
+const icon = computed(() => minimize.value ? "sym_o_add" : "sym_o_remove");
 </script>
 <template>
     <q-card v-bind="attrs">
         <q-bar :class="cl" v-if="title">
             <div>{{ title }}</div>
             <q-space />
-            <q-btn dense flat icon="sym_o_remove" @click="minimize = !minimize" />
+            <q-btn dense flat :icon="icon" @click="minimize = !minimize" />
         </q-bar>
-        <template v-if="minimize">
+        <template v-if="!minimize">
             <slot></slot>
         </template>
 

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

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { useQuasar, QTable } from 'quasar';
 import { ref, computed, onMounted, useSlots, reactive, useAttrs } from "vue";
-import { t, deleteObject, q, f, useLight } from '../';
+import { t, deleteObject, q, f, useLight, GQLFieldBuilder } from '../';
+import { toQuery } from '@hostlink/light'
 
 const errors = ref<InstanceType<any>>([]);
 
@@ -21,6 +22,7 @@ const props = defineProps({
             searchType?: string,
             searchOptions?: Array<any>,
             field?: string | Object,
+            gqlField?: string | Array<string> | Object,
         }>
     },
     actions: {
@@ -194,6 +196,15 @@ const getData = async (
     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;
@@ -203,6 +214,12 @@ const getData = async (
         offset_limit.limit = limit;
     }
 
+    if (offset_limit) {
+        query[operation].data = {
+            __args: offset_limit
+        };
+    }
+
     let params: any = {}
     if (sort) {
         params.sort = sort;
@@ -212,7 +229,13 @@ const getData = async (
         params.filters = filters
     }
 
-    return await q(operation, params, [f("data", offset_limit, fields), f("meta", ["total", "key", "name"])]);
+    query[operation].__args = params;
+
+    query[operation].data = query[operation].data || {};
+    Object.assign(query[operation].data, fields);
+
+    const resp = await q(query);
+    return resp[operation];
 
 }
 
@@ -226,41 +249,43 @@ const onRequest = async (p: any) => {
         },
         async loadData(operation: string, filters: any = null, fields: Array<any> = []) {
 
+
+            const builder = GQLFieldBuilder();
+
             //
-            let localFields: Array<any> = [];
 
             if (props.rowKey) {
-                localFields.push(props.rowKey);
+                builder.add(props.rowKey);
             }
 
             fields.forEach((f) => {
-                localFields.push(f);
+                builder.add(f);
             });
 
             props.columns?.forEach((col) => {
-                if (col.name.startsWith("_")) {
-                    return;
+                if (col.gqlField) {
+                    builder.add(col.gqlField);
                 }
-                if (localFields.includes(col.name)) {
+
+                if (col.name.startsWith("_")) {
                     return;
                 }
-                localFields.push(col.name);
+                builder.add(col.name);
+
             });
 
             if (actionView) {
-                localFields.push("canView");
+                builder.add("canView");
             }
 
             if (actionDelete) {
-                localFields.push("canDelete");
+                builder.add("canDelete");
             }
 
             if (activeEdit) {
-                localFields.push("canUpdate");
+                builder.add("canUpdate");
             }
 
-
-
             let localFilters = getFilterValue();
             //merge the filters
             if (filters) {
@@ -280,7 +305,7 @@ const onRequest = async (p: any) => {
             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, localFields);
+            const allData = await getData(operation, localFilters, sort, offset, limit, builder.get());
 
             rows.value = allData.data;
 
@@ -407,8 +432,7 @@ const filter = ref('');
 
     <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">
+        :rows-per-page-options="rowsPerPageOptions" :selection="selection" v-model:pagination="pagination" :filter="filter">
 
         <template #top-right="props" v-if="fullscreen || searchable">
             <q-input v-if="searchable" outlined dense debounce="300" v-model="filter" placeholder="Search">

package/dist/runtime/lib/GQLFieldBuilder.d.ts

@@ -0,0 +1,5 @@
+export default function (): {
+    merge: (obj1: any, obj2: any) => any;
+    add: (f: any) => void;
+    get(): any;
+};

package/dist/runtime/lib/GQLFieldBuilder.mjs

@@ -0,0 +1,35 @@
+import { toQuery } from "@hostlink/light";
+export default function() {
+  const merge = (obj1, obj2) => {
+    for (let key in obj2) {
+      if (obj2.hasOwnProperty(key)) {
+        obj1[key] = obj1[key] && obj1[key].toString() === "[object Object]" ? merge(obj1[key], obj2[key]) : obj1[key] = obj2[key];
+      }
+    }
+    return obj1;
+  };
+  let fields = {};
+  return {
+    //deep merge
+    merge,
+    add: (f) => {
+      if (typeof f === "string") {
+        fields[f] = true;
+        return;
+      }
+      if (Array.isArray(f)) {
+        f.forEach((item) => {
+          fields[item] = true;
+        });
+        return;
+      }
+      if (typeof f === "object") {
+        fields = merge(fields, toQuery(f));
+        return;
+      }
+    },
+    get() {
+      return fields;
+    }
+  };
+}

package/dist/runtime/lib/index.d.ts

@@ -14,7 +14,8 @@ import updateObject from "./updateObject";
 import listObject from "./listObject";
 import loadObject from "./loadObject";
 import isGranted from "./isGranted";
+import GQLFieldBuilder from "./GQLFieldBuilder";
 declare const notify: (message: string, color?: string) => void;
 import getID from "./getID";
 declare const getApiBase: () => {};
-export { addObject, f, getApiUrl, getCurrentUser, getObject, list, listData, m, q, removeObject, t, updateObject, notify, getID, deleteObject, listObject, isGranted, getApiBase, loadObject };
+export { addObject, f, getApiUrl, getCurrentUser, getObject, list, listData, m, q, removeObject, t, updateObject, notify, getID, deleteObject, listObject, isGranted, getApiBase, loadObject, GQLFieldBuilder, };

package/dist/runtime/lib/index.mjs

@@ -16,6 +16,7 @@ import updateObject from "./updateObject.mjs";
 import listObject from "./listObject.mjs";
 import loadObject from "./loadObject.mjs";
 import isGranted from "./isGranted.mjs";
+import GQLFieldBuilder from "./GQLFieldBuilder.mjs";
 const notify = function(message, color = "green") {
   Notify.create({
     message,
@@ -47,5 +48,6 @@ export {
   listObject,
   isGranted,
   getApiBase,
-  loadObject
+  loadObject,
+  GQLFieldBuilder
 };

package/dist/runtime/lib/q.mjs

@@ -2,14 +2,14 @@ import axios from "axios";
 import f from "./f.mjs";
 import { jsonToGraphQLQuery } from "json-to-graphql-query";
 import { getApiBase } from "./index.mjs";
-import toJson from "./toJson.mjs";
+import { toQuery } from "@hostlink/light";
 export default async function(operation, args = null, fields = []) {
   const service = axios.create({
     withCredentials: true
   });
   let query;
   if (operation instanceof Object) {
-    query = jsonToGraphQLQuery(toJson(operation));
+    query = jsonToGraphQLQuery(toQuery(operation));
   } else {
     if (arguments.length === 2) {
       fields = args;

package/dist/runtime/pages/MailLog/index.vue

@@ -35,9 +35,6 @@ const columns = [
 
 <template>
     <l-page>
-        <l-table @request="$event.loadObjects('MailLog', null, ['body'])" :columns="columns" sort-by="maillog_id:desc">
-
-
-        </l-table>
+        <l-table @request="$event.loadObjects('MailLog')" :columns="columns" sort-by="maillog_id:desc" />
     </l-page>
 </template>

package/dist/runtime/pages/Permission/all.vue

@@ -1,9 +1,18 @@
 <script setup>
 import { reactive } from 'vue'
-import { q, m } from '../../'
-const app = await q("app", ["permissions"])
+import { m } from '../../'
 
-const roles = await q("listRole", ["name", "permissions"])
+import { query } from '@hostlink/light';
+
+const { app, listRole: roles } = await query({
+    app: {
+        permissions: true
+    },
+    listRole: {
+        name: true,
+        permissions: true
+    }
+})
 
 const columns = [{
     label: "Permission",
@@ -41,13 +50,6 @@ app.permissions.forEach(permission => {
 });
 
 const onUpdate = (value, role, permission) => {
-    /*    if (value) {
-           app.permissions.push(role);
-       } else {
-           app.permissions.splice(app.permissions.indexOf(role), 1);
-       }
-       app.save(); */
-
     if (value) {
         m("addPermission", { value: permission, role })
     } else {
@@ -60,8 +62,6 @@ const onUpdate = (value, role, permission) => {
             row[role] = value;
         }
     });
-
-
 }
 
 </script>

package/dist/runtime/pages/Permission/export.vue

@@ -1,15 +1,23 @@
 <script setup>
 import { reactive } from 'vue'
 import { utils, writeFileXLSX } from 'xlsx';
-import { q } from '../../'
+import { query } from '@hostlink/light';
 const obj = reactive({
     roles: []
 });
 
-const app = await q("app", ["permissions"])
-let allData = await q("listRole", ["name", "permissions"]);
+const { app, listRole } = await query({
+    app: {
+        permissions: true
+    },
+    listRole: {
+        name: true,
+        permissions: true
+    }
 
-let roles = allData.map((role) => {
+})
+
+let roles = listRole.map((role) => {
     return {
         label: role.name,
         value: role.name,
@@ -19,7 +27,7 @@ let roles = allData.map((role) => {
 const submit = () => {
 
     //filter roles
-    let e = allData.filter((role) => {
+    let e = listRole.filter((role) => {
         return obj.roles.indexOf(role.name) != -1;
     });
 

package/dist/runtime/pages/Permission/index.vue

@@ -1,8 +1,4 @@
 <script setup>
-const onRequest = async (request) => {
-    request.loadObjects("Permission", null, ["permission_id"])
-};
-
 const columns = [
     {
         label: "Role",
@@ -21,6 +17,7 @@ const columns = [
 </script>
 <template>
     <l-page>
-        <l-table @request="onRequest" :columns="columns" :actions="['delete']"></l-table>
+        <l-table row-key="permission_id" @request="$event.loadObjects('Permission')" :columns="columns"
+            :actions="['delete']"></l-table>
     </l-page>
 </template>

package/dist/runtime/pages/System/database/backup.vue

@@ -1,5 +1,6 @@
 <template>
     <l-page>
+        comming soon
 
     </l-page>
 </template>

package/dist/runtime/pages/System/database/table.vue

@@ -1,6 +1,15 @@
 <script setup>
-import { q } from '../../../'
-const { system: { database } } = await q({ system: { database: ["table"] } })
+import { query } from '@hostlink/light';
+
+const { system: { database } } = await query({
+    system: {
+        database: {
+            table: true
+        }
+    }
+})
+
+
 </script>
 <template>
     <l-page>

package/dist/runtime/pages/System/setting.vue

@@ -49,8 +49,6 @@ const onSave = async () => {
 </script>
 <template>
     <l-page>
-
-        {{ test }}
         <l-form @save="onSave">
             <l-input label="Company" v-model="obj.company"></l-input>
             <l-input label="Company logo" v-model="obj.company_logo"></l-input>

package/dist/runtime/pages/User/index.vue

@@ -1,11 +1,7 @@
 <script setup>
 import { ref } from 'vue'
 const onRequest = async (request) => {
-    //listData("User", params, ["canDelete", "canUpdate", "canRead", "user_id"]);
-
-    request.loadObjects("User", {
-        status: status.value
-    }, ["user_id"]);
+    request.loadObjects("User", { status: status.value });
 };
 
 const columns = [
@@ -52,13 +48,11 @@ const status = ref("0");
 
         <l-tabs v-model="status">
             <l-tab label="Active" name="0">
-                <l-table
-                
-                @request="onRequest" :columns="columns" :actions="['view', 'edit', 'delete']">
+                <l-table row-key="user_id" @request="onRequest" :columns="columns" :actions="['view', 'edit', 'delete']">
                 </l-table>
             </l-tab>
             <l-tab label="Inactive" name="1">
-                <l-table @request="onRequest" :columns="columns" :actions="['view', 'edit', 'delete']">
+                <l-table row-key="user_id" @request="onRequest" :columns="columns" :actions="['view', 'edit', 'delete']">
                 </l-table>
             </l-tab>
         </l-tabs>

package/package.json

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