@hostlink/nuxt-light 1.1.8 → 1.3.0

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

@@ -1,10 +1,10 @@
 <script setup>
+import { ref } from 'vue'
 import { Notify } from 'quasar'
 import { reset } from "@formkit/core"
 import { useRouter } from 'vue-router'
-import { q, m } from '../../'
+import { q, m } from '#imports'
 
-const router = useRouter()
 const { app } = await q({ app: { config: ["name", "value"] } })
 const obj = app.config.reduce((acc, cur) => {
     acc[cur.name] = cur.value
@@ -63,65 +63,104 @@ if (obj.mode != 'prod') {
     obj.mode = 'prod'
 }
 
+const tab = ref('general')
 
 </script>
 <template>
     <l-page>
-        <FormKit type="l-form" :value="obj" #default="{ value }" @submit="onSubmit">
-            <FormKit type="l-input" label="Company" name="company" validation="required"></FormKit>
-            <FormKit type="l-input" label="Company logo" name="company_logo"></FormKit>
-
-            <q-separator />
-
-            <q-field label="Password policy" stack-label>
-                <FormKit type="q-checkbox" label="Upper Case" name="password_contains_uppercase" true-value="1"
-                    false-value="0" />
-                <FormKit type="q-checkbox" label="Lower Case" name="password_contains_lowercase" true-value="1"
-                    false-value="0" />
-                <FormKit type="q-checkbox" label="Number" name="password_contains_numeric" true-value="1" false-value="0" />
-                <FormKit type="q-checkbox" label="Special Character" name="password_contains_symbol" true-value="1"
-                    false-value="0" />
-            </q-field>
-
-            <FormKit type="l-input" label="Password min Length" name="password_min_length" validation="required|number">
-            </FormKit>
-
-            <q-field label="File manager" stack-label>
-                <FormKit type="q-checkbox" label="Show" name="file_manager" true-value="1" false-value="0" />
-            </q-field>
-
-            <q-field label="Two factor authentication" stack-label>
-                <FormKit type="q-checkbox" label="Enable" name="two_factor_authentication" true-value="1" false-value="0" />
-            </q-field>
-
-            <FormKit label="Mode" type="l-select" :options="[
-                { label: 'Production', value: 'prod' },
-                { label: 'Development', value: 'dev' },
-
-            ]" name="mode" validation="required">
-            </FormKit>
-
-            <q-separator />
-
-            <FormKit label="Auth lockout duration" type="l-input" name="auth_lockout_duration"
-                hint="The number of minutes the user is locked out after the maximum number of failed login attempts. Default is 15 minutes."
-                validation="required" />
-
-            <FormKit label="Auth lockout attempts" type="l-input" name="auth_lockout_attempts"
-                hint="The number of failed login attempts before the user is locked out. Default is 5 attempts."
-                validation="required" />
-
-            <FormKit label="Access token expiration" type="l-input" name="access_token_expire"
-                hint="The access token expiration time in seconds. Default is 28800 seconds (8 hours)."
-                validation="required" />
-
-            <q-separator />
-
-            <FormKit label="Copyright name" type="l-input" name="copyright_name" validation="required" />
-            <FormKit label="Copyright year" type="l-input" name="copyright_year" validation="required" />
-
-
-        </FormKit>
 
+        <q-card flat bordered>
+            <q-splitter unit="px" :model-value="120">
+                <template #before>
+                    <q-tabs v-model="tab" vertical :active-color="$light.color">
+                        <q-tab name="general" icon="sym_o_info" :label="$t('General')" />
+                        <q-tab name="security" icon="sym_o_security" :label="$t('Security')" />
+                        <q-tab name="Modules" icon="sym_o_apps" :label="$t('Modules')" />
+                        <q-tab name="Developer" icon="sym_o_code" :label="$t('Developer')" />
+                    </q-tabs>
+                </template>
+                <template #after>
+                    <FormKit type="l-form" :value="{
+                        company: obj.company,
+                        company_logo: obj.company_logo,
+                        copyright_name: obj.copyright_name,
+                        copyright_year: obj.copyright_year
+                    }" v-if="tab == 'general'" @submit="onSubmit">
+                        <FormKit type="l-input" label="Company" name="company" validation="required"></FormKit>
+                        <FormKit type="l-input" label="Company logo" name="company_logo"></FormKit>
+
+                        <FormKit label="Copyright name" type="l-input" name="copyright_name" validation="required" />
+                        <FormKit label="Copyright year" type="l-input" name="copyright_year" validation="required" />
+
+                    </FormKit>
+
+                    <FormKit type="l-form" :value="{
+                        password_contains_uppercase: obj.password_contains_uppercase,
+                        password_contains_lowercase: obj.password_contains_lowercase,
+                        password_contains_numeric: obj.password_contains_numeric,
+                        password_contains_symbol: obj.password_contains_symbol,
+                        password_min_length: obj.password_min_length,
+                        two_factor_authentication: obj.two_factor_authentication,
+                        auth_lockout_duration: obj.auth_lockout_duration,
+                        auth_lockout_attempts: obj.auth_lockout_attempts,
+                        access_token_expire: obj.access_token_expire,
+                    }" v-if="tab == 'security'" @submit="onSubmit">
+                        <q-field label="Password policy" stack-label>
+                            <FormKit type="q-checkbox" label="Upper Case" name="password_contains_uppercase" true-value="1"
+                                false-value="0" />
+                            <FormKit type="q-checkbox" label="Lower Case" name="password_contains_lowercase" true-value="1"
+                                false-value="0" />
+                            <FormKit type="q-checkbox" label="Number" name="password_contains_numeric" true-value="1"
+                                false-value="0" />
+                            <FormKit type="q-checkbox" label="Special Character" name="password_contains_symbol"
+                                true-value="1" false-value="0" />
+                        </q-field>
+
+                        <FormKit type="l-input" label="Password min Length" name="password_min_length"
+                            validation="required|number">
+                        </FormKit>
+
+
+                        <q-field label="Two factor authentication" stack-label>
+                            <FormKit type="q-checkbox" label="Enable" name="two_factor_authentication" true-value="1"
+                                false-value="0" />
+                        </q-field>
+
+                        <FormKit label="Auth lockout duration" type="l-input" name="auth_lockout_duration"
+                            hint="The number of minutes the user is locked out after the maximum number of failed login attempts. Default is 15 minutes."
+                            validation="required" />
+
+                        <FormKit label="Auth lockout attempts" type="l-input" name="auth_lockout_attempts"
+                            hint="The number of failed login attempts before the user is locked out. Default is 5 attempts."
+                            validation="required" />
+
+                        <FormKit label="Access token expiration" type="l-input" name="access_token_expire"
+                            hint="The access token expiration time in seconds. Default is 28800 seconds (8 hours)."
+                            validation="required" />
+                    </FormKit>
+
+                    <FormKit type="l-form" :value="{
+                        file_manager: obj.file_manager,
+
+                    }" v-if="tab == 'Modules'" @submit="onSubmit">
+                        <q-field label="File manager" stack-label>
+                            <FormKit type="q-checkbox" label="Show" name="file_manager" true-value="1" false-value="0" />
+                        </q-field>
+                    </FormKit>
+
+                    <FormKit type="l-form" :value="{
+                        mode: obj.mode,
+
+                    }" v-if="tab == 'Developer'" @submit="onSubmit">
+                        <FormKit label="Mode" type="l-select" :options="[
+                            { label: 'Production', value: 'prod' },
+                            { label: 'Development', value: 'dev' },
+
+                        ]" name="mode" validation="required">
+                        </FormKit>
+                    </FormKit>
+                </template>
+            </q-splitter>
+        </q-card>
     </l-page>
 </template>

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

@@ -1,55 +1,41 @@
 <script setup>
-import { model, getObject, getModelFields, q } from '../../../';
+import { useLight } from "#imports";
+import { useRoute } from "vue-router"
+import { ref } from 'vue';
 
-const obj = await getObject(["user_id", "username", "first_name", "last_name", "email", "phone", "roles", 'status', 'join_date']);
+const route = useRoute();
+const light = useLight();
 
+const tab = ref('overview');
+const splitter = ref(10);
+const id = route.params.user_id;
 </script>
 
 <template>
-    <l-page>
+    <l-page edit-btn>
         <template #header>
             <l-btn to="change-password" icon="sym_o_key" permission="user.changePassword" label="Change password"></l-btn>
             <l-btn to="update-role" icon="sym_o_people" permission="user.role.add" label="Update role"></l-btn>
         </template>
 
-        <l-card class="q-mb-md">
-            <l-list v-model="obj" :fields="getModelFields('User', [
-                'username',
-                'first_name',
-                'last_name',
-                'email',
-                'phone',
-                'roles',
-                'status',
-                'join_date'
-            ])">
-            </l-list>
-        </l-card>
-
-        <l-tabs>
-            <l-tab label="Event log">
-                <l-table row-key="eventlog_id" sort-by="eventlog_id:desc"
-                    :columns="model('EventLog').columns(['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>
+
+        <q-card flat bordered>
+            <q-tabs v-model="tab" :class="`text-${light.color}`" inline-label align="justify">
+                <q-tab name="overview" icon="sym_o_person" label="Overview" />
+                <q-tab name="userlog" icon="sym_o_description" label="User log" />
+                <q-tab name="eventlog" icon="sym_o_description" label="Event log" />
+            </q-tabs>
+
+            <l-user-overview v-if="tab === 'overview'" :id="id" />
+            <l-user-userlog v-if="tab === 'userlog'" :id="id" />
+            <l-user-eventlog v-if="tab === 'eventlog'" :id="id" />
+
+
+
+        </q-card>
+
+
+
+
     </l-page>
 </template>

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

@@ -51,29 +51,52 @@ eventLogCols.forEach(col => {
             <l-btn icon="sym_o_password" to="setting/password" label="Update password" />
             <l-btn icon="sym_o_key" to="setting/two-factor-auth" label="Two factor auth" />
         </template>
-        <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-row>
+            <l-col md="4">
+
+                <l-card>
+
+                    <q-card-section class="text-h5 text-center">
+                        {{ my.first_name }} {{ my.last_name }}
+                    </q-card-section>
+
+                    <q-card-section class="text-center text-center q-pt-none">
+                        <q-chip v-for="role in my.roles" :key="role" :label="role" :color="$light.color" text-color="white"
+                            class="q-ma-xs" />
+                    </q-card-section>
+
+
+                    <q-separator />
+                    <l-list :bordered="false">
+
+                        <q-item-label header>Details</q-item-label>
+                        <l-item label="Username">{{ my.username }}</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-list>
+                </l-card>
+            </l-col>
+
+            <l-col md="8">
+
+                <l-tabs>
+                    <l-tab label="User Log">
+                        <l-table :rows="my.userLog.data" :columns="userlogColumns" searchable :rows-per-page-options="[0]">
+                        </l-table>
+                    </l-tab>
+                    <l-tab label="Event Log">
+                        <l-table :rows="my.eventLog.data" :columns="eventLogCols" searchable :rows-per-page-options="[0]">
+                        </l-table>
+                    </l-tab>
+
+                </l-tabs>
+
+
+            </l-col>
+        </l-row>
+
     </l-page>
 </template>

package/dist/runtime/pages/User/setting/my_favorite.vue

@@ -0,0 +1,74 @@
+<script setup>
+import { useLight, model, q } from "#imports"
+import { ref } from "vue"
+import { Notify } from "quasar";
+const light = useLight()
+
+const columns = [
+    { name: "_delete", align: "center" },
+    { name: 'label', label: 'Label', align: 'left' },
+    { name: 'path', label: 'Path', align: 'left' },
+    { name: 'icon', label: 'Icon', align: 'left' }
+]
+
+const onSave = async (id, data) => {
+
+    await model("MyFavorite").update(id, data);
+
+    //show success message
+    Notify.create({
+        message: "Updated successfully",
+        color: "positive",
+        icon: "check"
+    });
+
+
+    await light.reloadMyFavorites()
+
+}
+
+const onRemove = async (id) => {
+    await model("MyFavorite").delete(id);
+    await light.reloadMyFavorites()
+}
+
+</script>
+<template>
+    <q-table :columns="columns" :rows="$light.myFavorites" :rows-per-page-options="[0]">
+
+        <template #body-cell-_delete="props">
+            <q-td auto-width>
+                <q-btn flat icon="sym_o_delete" round @click="onRemove(props.row.my_favorite_id)"></q-btn>
+            </q-td>
+        </template>
+
+        <template #body-cell-label="props">
+            <q-td key="label">
+                {{ props.row.label }}
+                <q-popup-edit v-model="props.row.label" #default="scope" buttons
+                    @save="onSave(props.row.my_favorite_id, { 'label': $event })">
+                    <q-input v-model="scope.value" dense autofocus counter @keyup.enter="scope.set" />
+                </q-popup-edit>
+            </q-td>
+
+        </template>
+
+        <template #body-cell-path="props">
+            <q-td key="path">
+                {{ props.row.path }}
+                <q-popup-edit v-model="props.row.path" #default="scope" buttons
+                    @save="onSave(props.row.my_favorite_id, { 'path': $event })">
+                    <q-input v-model="scope.value" dense autofocus counter @keyup.enter="scope.set" />
+                </q-popup-edit>
+            </q-td>
+        </template>
+
+        <template #body-cell-icon="props">
+            <q-td key="icon">
+                <l-icon-picker v-model="props.row.icon" flat round @update:model-value="onSave(
+                    props.row.my_favorite_id, { 'icon': $event })"></l-icon-picker>
+            </q-td>
+        </template>
+
+    </q-table>
+</template>

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

@@ -23,7 +23,10 @@ const route = useRoute()
                             replace />
                         <q-route-tab name="bio" icon="sym_o_fingerprint" :label="$t('Bio')" to="/User/setting/bio-auth"
                             exact replace />
-                        <q-route-tab name="openid" icon="sym_o_key" :label="$t('Open ID')" to="/User/setting/open_id" exact replace />
+                        <q-route-tab name="openid" icon="sym_o_key" :label="$t('Open ID')" to="/User/setting/open_id" exact
+                            replace />
+                        <q-route-tab name="myfav" icon="sym_o_star" :label="$t('My favorite')"
+                            to="/User/setting/my_favorite" exact replace />
 
                     </q-tabs>
                 </template>

package/dist/runtime/plugin.mjs

@@ -1,4 +1,4 @@
-import { Quasar, Dialog, Notify, Loading } from "quasar";
+import { Quasar, Dialog, Notify, Loading, AppFullscreen } from "quasar";
 import { createI18n } from "vue-i18n";
 import { defineNuxtPlugin } from "#app";
 import { useRouter } from "vue-router";
@@ -24,6 +24,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   defineModel("SystemValue", TypeSystemValue);
   defineModel("MailLog", TypeMailLog);
   defineModel("EventLog", TypeEventLog);
+  nuxtApp.vueApp.config.globalProperties.$light = useLight();
   nuxtApp.vueApp.config.errorHandler = (error) => {
     console.log(error);
     const light = useLight();
@@ -58,7 +59,8 @@ export default defineNuxtPlugin((nuxtApp) => {
     plugins: {
       Dialog,
       Notify,
-      Loading
+      Loading,
+      AppFullscreen
     }
   });
   let locale = localStorage.getItem("locale") || "en";

package/dist/runtime/routes.mjs

@@ -131,6 +131,11 @@ function User_setting_information() {
     /* webpackChunkName: "User-setting-information" */ './pages/User/setting/information.vue'
   )
 }
+function User_setting_my_favorite() {
+  return import(
+    /* webpackChunkName: "User-setting-my_favorite" */ './pages/User/setting/my_favorite.vue'
+  )
+}
 function User_setting_open_id() {
   return import(
     /* webpackChunkName: "User-setting-open_id" */ './pages/User/setting/open_id.vue'
@@ -342,6 +347,11 @@ export default [
         path: 'information',
         component: User_setting_information,
       },
+      {
+        name: 'User-setting-my_favorite',
+        path: 'my_favorite',
+        component: User_setting_my_favorite,
+      },
       {
         name: 'User-setting-open_id',
         path: 'open_id',

package/package.json

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