@hostlink/nuxt-light 0.0.90 → 0.0.91

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "0.0.90"
+  "version": "0.0.91"
 }

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

@@ -30,13 +30,13 @@ try {
     <q-layout v-if="!app.logged">
         <q-page-container class="bg-grey-2" style="color:#1f1f1f">
             <q-page padding>
-                <l-login :twoFactojrAuthentication="app.twoFactorAuthentication"
+                <l-login :two-factor-authentication="app.twoFactorAuthentication"
                     :google-client-id="app.googleClientId"></l-login>
             </q-page>
         </q-page-container>
     </q-layout>
 
-    <l-app-main>
+    <l-app-main v-else>
         <slot></slot>
     </l-app-main>
 </template>

package/dist/runtime/components/l-date-picker.vue

@@ -45,14 +45,21 @@ const localValue = computed({
 
 const rules = [];
 
-if (props.required && !props.range) {
+if (props.required) {
     rules.push((val) => {
         if (!val) {
             return "Required";
         }
+    })
+}
+
+if (!props.range) {
+    rules.push((val) => {
         //check val is YYYY-MM-DD
-        if (!val.match(/^\d{4}-\d{2}-\d{2}$/)) {
-            return "Invalid date format";
+        if (val) {
+            if (!val.match(/^\d{4}-\d{2}-\d{2}$/)) {
+                return "Invalid date format";
+            }
         }
     });
 }
@@ -70,9 +77,11 @@ const attrs = {
     ...useAttrs(),
 }
 
+const mask = props.range ? "####-##-## - ####-##-##" : "####-##-##";
+
 </script>
 <template>
-    <q-input v-bind="attrs" v-model="localValue" :rules="rules" :label="$t(label)" hide-bottom-space>
+    <q-input v-bind="attrs" v-model="localValue" :rules="rules" :label="$t(label)" hide-bottom-space :mask="mask">
         <template v-slot:prepend>
             <q-btn icon="sym_o_event" round dense flat>
                 <q-popup-proxy cover transition-show="scale" transition-hide="scale" ref="popup">

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

@@ -0,0 +1,8 @@
+<script setup>
+const props = defineProps(['label']);
+</script>
+<template>
+    <q-field :label="$t(props.label ?? '')">
+        <slot></slot>
+    </q-field>
+</template>

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

@@ -338,7 +338,9 @@ const getFilterValue = () => {
         if (col.searchable) {
             if (filters.value[col.name]) {
 
-                if (col.searchType == "date") {
+                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]
@@ -479,6 +481,11 @@ const filter = ref('');
                 <q-td v-for="col in props.cols">
                     <template v-if="col.searchable">
 
+                        <template v-if="col.searchType == 'number'">
+                            <q-input dense clearable v-model.number="filters[col.name]" @keydown.enter.prevent="onFilters"
+                                @clear="onFilters" mask="##########"></q-input>
+                        </template>
+
                         <template v-if="col.searchType == 'select'">
                             <q-select dense v-model="filters[col.name]" @update:model-value="onFilters" clearable
                                 :options="col.searchOptions" @clear="onFilters" emit-value />

package/dist/runtime/locales/zh-hk.json

@@ -157,4 +157,5 @@
     "Event Log": "事件紀錄",
     "Mail Log": "郵件紀錄",
     "User Log": "使用者紀錄"
+    
 }

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

@@ -1,42 +1,6 @@
 <script setup>
-const columns = [
-    {
-        label: "EventLog ID",
-        name: "eventlog_id",
-        sortable: true,
-        searchable: true,
-    },
-
-    {
-        label: "Class",
-        name: "class",
-        sortable: true,
-        searchable: true,
-    },
-
-    {
-        label: "ID",
-        name: "id",
-        sortable: true,
-        searchable: true,
-    },
-    {
-        label: "Action",
-        name: "action",
-        sortable: true,
-        searchable: true,
-    }, {
-        label: "Created time",
-        name: "created_time",
-        sortable: true,
-        searchable: true,
-    }, {
-        label: "Username",
-        name: "username",
-        sortable: true,
-        searchable: true,
-    }
-]
+import { getModelColumns } from "#imports"
+const columns = getModelColumns('EventLog', ['eventlog_id', 'class', 'id', 'action', 'created_time', 'username'])
 
 </script>
 

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

@@ -1,40 +1,41 @@
 <script setup>
-const columns = [
-    {
-        label: "ID",
-        name: "maillog_id",
-        sortable: true,
-        searchable: true,
-    }, {
-        label: "From",
-        name: "from",
-        sortable: true,
-        searchable: true,
-    }, {
-        label: "To",
-        name: "to",
-        sortable: true,
-        searchable: true,
-    },
-    {
-        label: "Subject",
-        name: "subject",
-        sortable: true,
-        searchable: true,
-    },
-    {
-        label: "Created time",
-        name: "created_time",
-        sortable: true,
-        searchable: true,
-        searchType: "date",
-    }
-]
+import { getModelColumns } from "#imports"
+import { ref } from 'vue'
+const columns = getModelColumns("MailLog", ["maillog_id", "from", "to", "subject", "created_time"])
 
+
+columns.push({
+    label: "Content",
+    name: "_act",
+    gqlField: ["body"]
+})
+const show = ref(false)
+const content = ref("")
 </script>
 
 <template>
     <l-page>
-        <l-table @request="$event.loadObjects('MailLog')" :columns="columns" sort-by="maillog_id:desc" />
+        <q-dialog v-model="show" full-width>
+            <l-card>
+                <q-card-section>
+                    <iframe width="100%" height="500px" :srcdoc="content" frameborder="0"></iframe>
+                </q-card-section>
+            </l-card>
+        </q-dialog>
+        <l-table row-key="maillog_id" @request="$event.loadObjects('MailLog')" :columns="columns" sort-by="maillog_id:desc">
+
+            <template #body-cell-_act="props">
+                <q-td :props="props">
+                    <l-btn @click="
+                        content = props.row.body;
+                    show = true" label="Show" icon="sym_o_visibility">
+                    </l-btn>
+
+
+                </q-td>
+
+            </template>
+
+        </l-table>
     </l-page>
 </template>

package/dist/runtime/pages/User/_user_id/update-role.vue

@@ -42,11 +42,10 @@ const submit = async () => {
 <template>
     <l-page>
         <l-form @submit="submit">
-            <q-field label="Roles" stack-label>
+            <l-field label="Roles" stack-label>
                 <q-option-group type="checkbox" :options="roles" v-model="obj.roles" inline>
                 </q-option-group>
-            </q-field>
-
+            </l-field>
         </l-form>
 
     </l-page>

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

@@ -58,10 +58,10 @@ roles = roles.map((role) => {
 
                     <l-input label="Default page" v-model="obj.default_page"></l-input>
 
-                    <q-field label="Roles" stack-label>
+                    <l-field label="Roles" stack-label>
                         <q-option-group type="checkbox" :options="roles" v-model="obj.roles" inline>
                         </q-option-group>
-                    </q-field>
+                    </l-field>
                 </l-col>
             </l-row>
         </l-form>

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

@@ -1,6 +1,50 @@
 <script setup>
-import { q } from '../../'
-const my = await q("my", ["user_id", "username", "first_name", "last_name", "email", "phone", "roles", "addr1", "addr2", "addr3", "join_date"])
+import { q, getModelColumns } from '../../'
+import { getGQLFields } from '#imports'
+import { toQuery } from '@hostlink/light';
+
+const { my } = await q(
+    {
+        my: ["user_id", "username", "first_name", "last_name", "email", "phone", "roles", "addr1", "addr2", "addr3", "join_date", {
+            userLog: {
+                __args: {
+                    sort: "userlog_id:desc"
+                },
+                data: {
+                    __args: {
+                        limit: 10
+                    },
+                    ...toQuery(getGQLFields('UserLog', ['login_dt', 'result', "user_agent"]))
+                }
+            },
+            eventLog: {
+                __args: {
+                    sort: "eventlog_id:desc"
+                },
+                data: {
+                    __args: {
+                        limit: 10
+                    },
+                    ...toQuery(getGQLFields('EventLog', ['class', 'id', 'action', "created_time"]))
+                }
+            }
+        }]
+    }
+)
+
+const userlogColumns = getModelColumns('UserLog', ['login_dt', 'result', 'user_agent']);
+//remove all searchable
+userlogColumns.forEach(col => {
+    col.searchable = false;
+})
+
+
+const eventLogCols = getModelColumns('EventLog', ['class', 'action', 'created_time']);
+//remove all searchable
+eventLogCols.forEach(col => {
+    col.searchable = false;
+})
+
 </script>
 <template>
     <l-page title="User profile">
@@ -8,18 +52,32 @@ const my = await q("my", ["user_id", "username", "first_name", "last_name", "ema
             <l-btn icon="sym_o_key" to="update-password" label="Update password" />
             <l-btn icon="sym_o_key" to="two-factor-auth" label="Two factor auth" />
         </template>
-        <l-card>
-            <l-list>
-                <l-item label="Username">{{ my.username }}</l-item>
-                <l-item label="First name">{{ my.first_name }}</l-item>
-                <l-item label="Last name">{{ my.last_name }}</l-item>
-                <l-item label="Email">{{ my.email }}</l-item>
-                <l-item label="Phone">{{ my.phone }}</l-item>
-                <l-item label="Address">{{ my.addr1 }} {{ my.addr2 }} {{ my.addr3 }}</l-item>
-                <l-item label="Join date">{{ my.join_date }}</l-item>
-                <l-item label="Roles">{{ my.roles.join(",") }}</l-item>
-            </l-list>
-        </l-card>
+
+        <div class="q-gutter-md q-mt-md">
+            <l-card>
+                <l-list>
+                    <l-item label="Username">{{ my.username }}</l-item>
+                    <l-item label="First name">{{ my.first_name }}</l-item>
+                    <l-item label="Last name">{{ my.last_name }}</l-item>
+                    <l-item label="Email">{{ my.email }}</l-item>
+                    <l-item label="Phone">{{ my.phone }}</l-item>
+                    <l-item label="Address">{{ my.addr1 }} {{ my.addr2 }} {{ my.addr3 }}</l-item>
+                    <l-item label="Join date">{{ my.join_date }}</l-item>
+                    <l-item label="Roles">{{ my.roles.join(",") }}</l-item>
+                </l-list>
+            </l-card>
+
+            <l-card title="User Log">
+                <l-table :rows="my.userLog.data" :columns="userlogColumns" searchable :rows-per-page-options="[0]">
+                </l-table>
+            </l-card>
+
+            <l-card title="Event Log">
+                <l-table :rows="my.eventLog.data" :columns="eventLogCols" searchable :rows-per-page-options="[0]">
+                </l-table>
+            </l-card>
+        </div>
+
 
     </l-page>
 </template>

package/dist/runtime/plugin.mjs

@@ -12,10 +12,14 @@ import { useLight } from "./index.mjs";
 import TypeUser from "./types/User.mjs";
 import TypeUserLog from "./types/UserLog.mjs";
 import TypeSystemValue from "./types/SystemValue.mjs";
+import TypeMailLog from "./types/MailLog.mjs";
+import TypeEventLog from "./types/EventLog.mjs";
 export default defineNuxtPlugin((nuxtApp) => {
   defineModel("User", TypeUser);
   defineModel("UserLog", TypeUserLog);
   defineModel("SystemValue", TypeSystemValue);
+  defineModel("MailLog", TypeMailLog);
+  defineModel("EventLog", TypeEventLog);
   nuxtApp.vueApp.config.errorHandler = (error) => {
     console.log(error);
     const light = useLight();

package/dist/runtime/types/EventLog.d.ts

@@ -0,0 +1,33 @@
+declare const _default: {
+    eventlog_id: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+    };
+    class: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+    };
+    id: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+    };
+    action: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+    };
+    created_time: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+    };
+    username: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+    };
+};
+export default _default;

package/dist/runtime/types/EventLog.mjs

@@ -0,0 +1,32 @@
+export default {
+  eventlog_id: {
+    label: "EventLog ID",
+    sortable: true,
+    searchable: true
+  },
+  class: {
+    label: "Class",
+    sortable: true,
+    searchable: true
+  },
+  id: {
+    label: "ID",
+    sortable: true,
+    searchable: true
+  },
+  action: {
+    label: "Action",
+    sortable: true,
+    searchable: true
+  },
+  created_time: {
+    label: "Created time",
+    sortable: true,
+    searchable: true
+  },
+  username: {
+    label: "Username",
+    sortable: true,
+    searchable: true
+  }
+};

package/dist/runtime/types/MailLog.d.ts

@@ -0,0 +1,30 @@
+declare const _default: {
+    maillog_id: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+        searchType: string;
+    };
+    from: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+    };
+    to: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+    };
+    subject: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+    };
+    created_time: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+        searchType: string;
+    };
+};
+export default _default;

package/dist/runtime/types/MailLog.mjs

@@ -0,0 +1,29 @@
+export default {
+  maillog_id: {
+    label: "ID",
+    sortable: true,
+    searchable: true,
+    searchType: "number"
+  },
+  from: {
+    label: "From",
+    sortable: true,
+    searchable: true
+  },
+  to: {
+    label: "To",
+    sortable: true,
+    searchable: true
+  },
+  subject: {
+    label: "Subject",
+    sortable: true,
+    searchable: true
+  },
+  created_time: {
+    label: "Created time",
+    sortable: true,
+    searchable: true,
+    searchType: "date"
+  }
+};

package/package.json

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