@hostlink/nuxt-light 1.7.1 → 1.8.1

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.7.1"
+  "version": "1.8.1"
 }

package/dist/runtime/components/L/Revision.vue

@@ -0,0 +1,232 @@
+<script setup>
+import { Dialog, Notify } from "quasar"
+import { computed, ref, reactive } from "vue";
+import { q, m } from "#imports";
+
+import * as Diff2Html from 'diff2html';
+import 'diff2html/bundles/css/diff2html.min.css';
+
+/* const diffs = '--- a/server/vendor/golang.org/x/sys/unix/zsyscall_linux_mipsle.go\n+++ b/server/vendor/golang.org/x/sys/unix/zsyscall_linux_mipsle.go\n@@ -1035,6 +1035,17 @@ func Prctl(option int, arg2 uintptr, arg3 uintptr, arg4 uintptr, arg5 uintptr) (\n \n // THIS FILE IS GENERATED BY THE COMMAND AT THE TOP; DO NOT EDIT\n \n+func Pselect(nfd int, r *FdSet, w *FdSet, e *FdSet, timeout *Timespec, sigmask *Sigset_t) (n int, err error) {\n+\tr0, _, e1 := Syscall6(SYS_PSELECT6, uintptr(nfd), uintptr(unsafe.Pointer(r)), uintptr(unsafe.Pointer(w)), uintptr(unsafe.Pointer(e)), uintptr(unsafe.Pointer(timeout)), uintptr(unsafe.Pointer(sigmask)))\n+\tn = int(r0)\n+\tif e1 != 0 {\n+\t\terr = errnoErr(e1)\n+\t}\n+\treturn\n+}\n+\n+// THIS FILE IS GENERATED BY THE COMMAND AT THE TOP; DO NOT EDIT\n+\n func read(fd int, p []byte) (n int, err error) {\n \tvar _p0 unsafe.Pointer\n \tif len(p) > 0 {\n';
+const html = Diff2Html.html(diffs, {
+    drawFileList: true,
+    matching: 'lines',
+    outputFormat: 'side-by-side',
+});
+ */
+
+const props = defineProps({
+    modelId: {
+        type: String,
+        required: true
+    },
+    modelClass: {
+        type: String,
+        required: true
+    }
+});
+
+
+const { revisionsByModel } = await q({
+    "revisionsByModel": {
+        __args: {
+            model_id: parseInt(props.modelId),
+            model_class: props.modelClass
+        },
+        revision_id: true,
+        revisionBy: true,
+        createdTime: true,
+        content: true,
+        delta: true,
+        diff: true
+    }
+})
+
+
+const num_of_revisions = computed(() => {
+    return revisionsByModel.length;
+})
+
+const showDialog = ref(false);
+
+const selectedRevision = ref(null);
+const onClick = (revision) => {
+    selectedRevision.value = revision;
+
+    showDialog.value = true;
+}
+
+const onRestore = () => {
+    //confirm restore
+    Dialog.create({
+        title: 'Restore',
+        message: 'Are you sure you want to restore selected fields?',
+        ok: 'Yes',
+        cancel: 'No'
+    }).onOk(async () => {
+        //restore
+        if (await m("restoreRevision", {
+            revision_id: selectedRevision.value.revision_id,
+            fields: restore_fields.value
+        })) {
+            Notify.create({
+                message: 'Restored successfully',
+                color: 'positive'
+            })
+
+            //reload
+            window.location.reload();
+
+        }
+
+
+    })
+
+}
+
+const restore_fields = ref([]);
+
+const onToggleAll = () => {
+    if (restore_fields.value.length === 0) {
+        restore_fields.value = Object.keys(getFilteredContent.value);
+    } else {
+        restore_fields.value = [];
+    }
+}
+
+const isCheckedAll = computed(() => {
+    return restore_fields.value.length === Object.keys(getFilteredContent.value).length;
+})
+
+const isAllowRestore = computed(() => {
+    return restore_fields.value.length > 0;
+})
+const showOnlyDelta = ref(false);
+
+const getFilteredContent = computed(() => {
+    if (showOnlyDelta.value) {
+        const contents = {};
+
+        for (const key in selectedRevision.value.delta) {
+            contents[key] = selectedRevision.value.content[key];
+        }
+
+        return contents;
+    } else {
+        return selectedRevision.value.content;
+    }
+})
+
+const outputFormat = ref('side-by-side');
+const getDiffHtml = (diffs) => {
+    if (!diffs) {
+        return '';
+    }
+    return Diff2Html.html(diffs, {
+        drawFileList: false,
+        matching: 'lines',
+        outputFormat: outputFormat.value,
+        highlight: true
+    });
+}
+
+
+</script>
+
+<template>
+    <div>
+
+        <div v-html="html"></div>
+        <q-dialog v-model="showDialog" full-height full-width>
+            <q-card>
+                <q-toolbar>
+                    <l-btn label="Restore" icon="sym_o_restore" permission="revision.restore" @click="onRestore"
+                        :disabled="!isAllowRestore" />
+
+                    <q-checkbox label="Show changed only" v-model="showOnlyDelta" :color="$light.color"></q-checkbox>
+
+                    <q-btn-toggle class="q-mx-md" v-model="outputFormat" :toggle-color="$light.color" :options="[
+            { label: 'side-by-side', value: 'side-by-side' }, { label: 'line-by-line', value: 'line-by-line' }
+        ]" />
+                    <q-space />
+                    <q-btn flat round dense icon="close" @click="showDialog = false" />
+                </q-toolbar>
+
+
+                <div class="q-pa-md">
+
+                    <div class="text-h6 q-mb-md">
+                        Revision by: {{ selectedRevision.revisionBy }} <br>
+                        Created at: {{ selectedRevision.createdTime }}
+
+                    </div>
+
+                    <q-markup-table dense separator="cell" flat bordered>
+                        <thead>
+                            <tr>
+                                <th width="48px">
+                                    <q-checkbox @click="onToggleAll" v-model="isCheckedAll"
+                                        :color="$light.color"></q-checkbox>
+                                </th>
+                                <th>Field</th>
+                                <th>Value</th>
+                                <th>Changed</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <template v-for="(value, key) in getFilteredContent" :key="key">
+
+                                <tr>
+
+                                    <td><q-checkbox v-model="restore_fields" :val="key"
+                                            :color="$light.color"></q-checkbox>
+                                    </td>
+                                    <td :class="{ 'bg-yellow-3': selectedRevision.delta[key] != undefined }">{{ key }}
+                                    </td>
+                                    <td>
+                                        <pre>{{ value }}</pre>
+                                    </td>
+                                    <td>
+                                        <pre>{{ selectedRevision.delta[key] }}</pre>
+                                    </td>
+
+                                </tr>
+
+                                <tr v-if="getDiffHtml(selectedRevision.diff[key])">
+                                    <td colspan="4">
+                                        <div v-html="getDiffHtml(selectedRevision.diff[key])"></div>
+                                    </td>
+                                </tr>
+                            </template>
+                        </tbody>
+
+
+                    </q-markup-table>
+
+                </div>
+
+
+
+            </q-card>
+        </q-dialog>
+
+        <l-card>
+            <q-list>
+                <q-expansion-item :label="`Revisions: ${num_of_revisions}`" icon="sym_o_history" expand-separator>
+
+                    <q-list>
+                        <q-item v-for="revision in revisionsByModel" :key="revision.revision_id"
+                            @click="onClick(revision)" clickable>
+                            <q-item-section>
+                                <q-item-label>Revision by: {{ revision.revisionBy }}</q-item-label>
+                                <q-item-label caption>{{ revision.createdTime }}</q-item-label>
+
+                            </q-item-section>
+                        </q-item>
+                    </q-list>
+
+                </q-expansion-item>
+
+            </q-list>
+        </l-card>
+    </div>
+</template>

package/dist/runtime/components/L/Storage.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { computed } from 'vue';
+import { format } from "quasar"
+const { humanStorageSize } = format
+const props = defineProps({
+    storage: {
+        type: Object,
+        required: true
+    },
+})
+
+
+const usagePercent = computed(() => {
+    return Math.round((props.storage.totalSpace - props.storage.freeSpace) / props.storage.totalSpace)
+})
+
+const progressColor = computed(() => {
+    if (usagePercent.value > 0.95) {
+        return "negative"
+    }
+    if (usagePercent.value > 0.9) {
+        return "warning"
+    }
+    return "primary"
+})
+
+</script>
+<template>
+    <q-card>
+        <q-card-section>
+            {{ $t("Storage") }}
+            <q-linear-progress rounded size="20px" :value="usagePercent" :color="progressColor" class="q-mt-sm" />
+            {{ $t('storage_usage', [humanStorageSize(storage.freeSpace), humanStorageSize(storage.totalSpace)]) }}
+        </q-card-section>
+    </q-card>
+</template>

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

@@ -3,29 +3,56 @@ import { useRoute, useRouter } from 'vue-router';
 import { useLight, q, m } from "#imports";
 import { useQuasar, Loading, Dialog } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import { ref, computed, reactive, provide, watch, toRaw, inject } from 'vue';
+import { ref, computed, reactive, provide, watch, toRaw } from 'vue';
 import { useRuntimeConfig } from 'nuxt/app';
 
 Loading.show()
-//download system value
-/* import { download } from './../lib/SystemValue'
-await download();
- */
+
 const config = useRuntimeConfig();
 
 const appVersion = config.public.appVersion ?? '0.0.1';
 
 const quasar = useQuasar();
 const tt = await q({
-    system: ["devMode", "time"],
-    app: ["menus", "viewAsMode", "languages",
-        "copyrightYear",
-        "copyrightName",
-        "hasFavorite",
-        { i18nMessages: ["name", "value"] }],
-    my: ['username', 'first_name', 'last_name', 'roles', "styles", "language", "permissions", "default_page", { myFavorites: ["my_favorite_id", "label", "path", "icon"] }],
+    system: {
+        devMode: true,
+        time: true,
+        storage: {
+            freeSpace: true,
+            usageSpace: true,
+            totalSpace: true,
+        }
+    },
+    app: {
+        menus: true,
+        viewAsMode: true,
+        languages: true,
+        copyrightName: true,
+        copyrightYear: true,
+        hasFavorite: true,
+        i18nMessages: {
+            name: true,
+            value: true
+        }
+    }, my: {
+        username: true,
+        first_name: true,
+        last_name: true,
+        roles: true,
+        styles: true,
+        language: true,
+        permissions: true,
+        default_page: true,
+        myFavorites: {
+            my_favorite_id: true,
+            label: true,
+            path: true,
+            icon: true
+        }
+    }
 })
 
+
 let app = tt.app
 let my = reactive(tt.my)
 
@@ -54,13 +81,6 @@ i18n.locale = my.language || 'en';
 
 let system = tt.system;
 
-if (light.isGranted("system.storage")) {
-    let s = await q("system", ["diskFreeSpace", "diskUsageSpace", "diskTotalSpace", "diskFreeSpacePercent"]);
-    //merge system value
-    system = { ...system, ...s };
-
-}
-
 // message
 let messages = i18n.messages.value[i18n.locale];
 for (let t of app.i18nMessages) {
@@ -168,35 +188,17 @@ const exitViewAs = async () => {
 }
 
 const storageColor = computed(() => {
-    if (system) {
-        if (system.diskFreeSpacePercent < 0.05) {
+    if (system.storage) {
+        const percent = system.storage.freeSpace / system.storage.totalSpace;
+        if (percent < 0.05) {
             return "negative"
         }
-        if (system.diskFreeSpacePercent < 0.1) {
+        if (percent < 0.1) {
             return "warning"
         }
     }
 })
 
-const storageProgressColor = computed(() => {
-    if (system) {
-        if (system.diskFreeSpacePercent < 0.05) {
-            return "negative"
-        }
-        if (system.diskFreeSpacePercent < 0.1) {
-            return "warning"
-        }
-    }
-    return "primary"
-})
-
-const storageUsagePercent = computed(() => {
-    if (system) {
-        return 1 - system.diskFreeSpacePercent;
-    }
-    return 0;
-})
-
 const containerClass = computed(() => {
     return (light.theme == 'dark') ? {} : { 'bg-grey-2': true }
 })
@@ -223,8 +225,6 @@ const onToggleFav = async () => {
 
         //reload my.myFavorites
         light.reloadMyFavorites();
-
-
         return;
     }
 
@@ -320,24 +320,13 @@ if (route.fullPath == "/" && my.default_page) {
                             </q-item>
                         </q-list>
                     </q-menu>
-
-
                 </q-btn>
 
-                <q-btn icon="sym_o_storage" flat round dense class="q-mr-sm" v-if="system" :color="storageColor">
+                <q-btn icon="sym_o_storage" flat round dense class="q-mr-sm" v-if="system.storage"
+                    :color="storageColor">
                     <q-menu>
-                        <q-card style="width:250px">
-                            <q-card-section>
-                                {{ $t("Storage") }}
-                                <q-linear-progress rounded size="20px" :value="storageUsagePercent"
-                                    :color="storageProgressColor" class="q-mt-sm" />
-                                {{ $t('storage_usage', [system.diskFreeSpace, system.diskTotalSpace]) }}
-                            </q-card-section>
-
-                        </q-card>
+                        <l-storage :storage="system.storage" style="width:250px" />
                     </q-menu>
-
-
                 </q-btn>
 
                 <div class="q-mx-sm" v-if="$q.screen.gt.xs">
@@ -422,7 +411,8 @@ if (route.fullPath == "/" && my.default_page) {
             </q-scroll-area>
         </q-drawer>
 
-        <q-page-container :class="containerClass" :style="containerStyle">  <!-- Error message -->
+        <q-page-container :class="containerClass" :style="containerStyle"> <!-- Error message -->
+            <slot name="header"></slot>
             <q-banner dense inline-actions class="bg-grey-4 q-ma-md" v-for=" error  in  errors " rounded>
                 {{ error }}
 
@@ -448,9 +438,8 @@ if (route.fullPath == "/" && my.default_page) {
             <q-item>
                 <q-item-section>
                     {{ light.getCompany() }} {{ appVersion }} - Copyright {{ app.copyrightYear }} {{ app.copyrightName
-                    }}.
-                    Build {{
-        light.getVersion() }}
+                    }}. Build
+                    {{ light.getVersion() }}
                 </q-item-section>
             </q-item>
         </q-footer>

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

@@ -48,7 +48,13 @@ provide('color', color)
     </q-layout>
 
     <l-app-main v-else>
+
+        <template #header>
+            <slot name="header"></slot>
+        </template>
+
         <slot></slot>
+
+
     </l-app-main>
 </template>
-  

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

@@ -157,8 +157,10 @@ onMounted(() => {
     google.accounts.id.initialize({
       client_id: props.googleClientId,
       callback: handleGoogleCredentialResponse,
-    });
+      use_fedcm_for_prompt: true
 
+    });
+    google.accounts.id.prompt();
     google.accounts.id.renderButton(
       document.getElementById('g_id_signin'),
       {

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

@@ -23,9 +23,12 @@ const fields = ["company", "company_logo",
     "auth_lockout_attempts",
     "access_token_expire",
     "copyright_year",
-    "copyright_name"
+    "copyright_name",
+    "revision"
 ];
 
+obj.revision = obj.revision ? obj.revision.split(',') : []
+
 //filter out fields that are not in the app.config table
 Object.keys(obj).forEach((key) => {
     if (!fields.includes(key)) {
@@ -80,11 +83,11 @@ const tab = ref('general')
                 </template>
                 <template #after>
                     <FormKit type="l-form" :bordered="false" :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">
+                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>
 
@@ -94,21 +97,21 @@ const tab = ref('general')
                     </FormKit>
 
                     <FormKit type="l-form" :bordered="false" :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">
+                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="l-checkbox" label="Upper Case" name="password_contains_uppercase" true-value="1"
-                                false-value="0" />
-                            <FormKit type="l-checkbox" label="Lower Case" name="password_contains_lowercase" true-value="1"
-                                false-value="0" />
+                            <FormKit type="l-checkbox" label="Upper Case" name="password_contains_uppercase"
+                                true-value="1" false-value="0" />
+                            <FormKit type="l-checkbox" label="Lower Case" name="password_contains_lowercase"
+                                true-value="1" false-value="0" />
                             <FormKit type="l-checkbox" label="Number" name="password_contains_numeric" true-value="1"
                                 false-value="0" />
                             <FormKit type="l-checkbox" label="Special Character" name="password_contains_symbol"
@@ -139,23 +142,29 @@ const tab = ref('general')
                     </FormKit>
 
                     <FormKit type="l-form" :bordered="false" :value="{
-                        file_manager: obj.file_manager,
-
-                    }" v-if="tab == 'Modules'" @submit="onSubmit">
+                file_manager: obj.file_manager,
+                revision: obj.revision
+            }" v-if="tab == 'Modules'" @submit="onSubmit">
                         <q-field label="File manager" stack-label>
-                            <FormKit type="l-checkbox" label="Show" name="file_manager" true-value="1" false-value="0" />
+                            <FormKit type="l-checkbox" label="Show" name="file_manager" true-value="1"
+                                false-value="0" />
                         </q-field>
+
+                        <FormKit type="q-select" label="Revision" name="revision" use-input use-chips multiple
+                            hide-dropdown-icon input-debounce="0" new-value-mode="add-unique" />
+
+
                     </FormKit>
 
                     <FormKit type="l-form" :bordered="false" :value="{
-                        mode: obj.mode,
+                mode: obj.mode,
 
-                    }" v-if="tab == 'Developer'" @submit="onSubmit">
+            }" v-if="tab == 'Developer'" @submit="onSubmit">
                         <FormKit label="Mode" type="l-select" :options="[
-                            { label: 'Production', value: 'prod' },
-                            { label: 'Development', value: 'dev' },
+                { label: 'Production', value: 'prod' },
+                { label: 'Development', value: 'dev' },
 
-                        ]" name="mode" validation="required" >
+            ]" name="mode" validation="required">
                         </FormKit>
                     </FormKit>
                 </template>

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

@@ -7,18 +7,17 @@ const route = useRoute();
 const light = useLight();
 
 const tab = ref('overview');
-const splitter = ref(10);
 const id = route.params.user_id;
 </script>
 
 <template>
     <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="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>
 
-
         <q-card flat bordered>
             <q-tabs v-model="tab" :active-color="$light.color" inline-label align="justify">
                 <q-tab name="overview" icon="sym_o_person" label="Overview" />

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

@@ -5,7 +5,7 @@ const onRequest = async (request) => {
     request.loadObjects("User", { status: status.value });
     //request.loadObjects("User");
 };
-const columns = model("User").columns(["username", "first_name", "label_name", "email", "phone", "join_date", "status"]);
+const columns = model("User").columns(["username", "first_name", "label_name", "email", "phone", "join_date", "status","has2FA"]);
 const status = ref("0");
 const selected = ref([]);
 </script>
@@ -13,7 +13,6 @@ const selected = ref([]);
 <template>
     <l-page>
 
-
         <l-tabs v-model="status">
             <l-tab label="Active" name="0">
                 <l-table row-key="user_id" @request="onRequest" :columns="columns"

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

@@ -52,5 +52,10 @@ declare const _default: {
         field: (row: any) => any;
         backgroundColor: (row: any) => "primary" | undefined;
     };
+    has2FA: {
+        label: string;
+        searchType: string;
+        format: (value: any) => "Yes" | "No";
+    };
 };
 export default _default;

package/dist/runtime/types/User.mjs

@@ -67,5 +67,12 @@ export default {
         return "primary";
       }
     }
+  },
+  has2FA: {
+    label: "2FA",
+    searchType: "select",
+    format: (value) => {
+      return value ? "Yes" : "No";
+    }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.7.1",
+  "version": "1.8.1",
   "description": "HostLink Nuxt Light Framework",
   "repository": "@hostlink/nuxt-light",
   "license": "MIT",
@@ -40,6 +40,7 @@
     "@nuxt/module-builder": "^0.5.2",
     "@quasar/extras": "^1.16.6",
     "axios": "^1.5.0",
+    "diff2html": "^3.4.47",
     "formkit-quasar": "^0.0.15",
     "json-to-graphql-query": "^2.2.5",
     "quasar": "^2.12.5",