@hostlink/nuxt-light 0.0.63 → 0.0.64

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "0.0.63"
+  "version": "0.0.64"
 }

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

@@ -1,7 +1,9 @@
 <script setup>
-import { useRuntimeConfig } from 'nuxt/app';
+import { useRuntimeConfig } from 'nuxt/app'
 import { setApiUrl } from '@hostlink/light'
-import { q } from '../';
+import { useRoute } from 'vue-router'
+import { q } from '../'
+const route = useRoute()
 const config = useRuntimeConfig();
 setApiUrl(config?.public?.apiBase ?? '/api/');
 
@@ -12,11 +14,8 @@ const { app } = await q({ app: ['company', 'companyLogo', 'logged', 'twoFactorAu
     <q-layout v-if="!app.logged">
         <q-page-container class="bg-grey-2" style="color:#1f1f1f">
             <q-page padding>
-                <l-login 
-                :company="app.company" 
-                :company-logo="app.companyLogo"
-                :twoFactorAuthentication="app.twoFactorAuthentication"
-                ></l-login>
+                <l-login :company="app.company" :company-logo="app.companyLogo"
+                    :twoFactorAuthentication="app.twoFactorAuthentication"></l-login>
             </q-page>
         </q-page-container>
     </q-layout>

package/dist/runtime/components/l-file-manager-preview.vue

@@ -2,6 +2,7 @@
 import { q } from '../';
 const props = defineProps(["modelValue"]);
 
+
 const file = await q("fsFile", {
   path: props.modelValue.path
 }, ["canPreview", "imagePath"])

package/dist/runtime/components/l-file-manager.vue

@@ -4,12 +4,18 @@ import { useI18n } from "vue-i18n";
 import { ref, watch, computed } from 'vue';
 import { useQuasar } from 'quasar';
 import { q, m } from '../';
+import {
+  fsListFolders, fsCreateFolder, fsDeleteFolder, fsDeleteFile, fsRenameFile, fsRenameFolder, fsReadFile,
+  granted
+
+} from "@hostlink/light";
+
 
 const i18n = useI18n();
 const quasar = useQuasar();
 const emit = defineEmits(["input", "close"]);
 
-defineProps({
+const props = defineProps({
   closable: Boolean,
   height: {
     type: String,
@@ -23,6 +29,10 @@ defineProps({
     default: false,
     type: Boolean,
   },
+  base: {
+    default: "/",
+    type: String,
+  },
 });
 
 const loading = ref(false);
@@ -88,10 +98,10 @@ function toggleLeftDrawer() {
   leftDrawerOpen.value = !leftDrawerOpen.value;
 }
 
-const path = ref("");
+const path = ref(props.base);
 
 const onLazyLoad = async ({ node, key, done, fail }) => {
-  const data = await q("fsListFolders", { path: node.path }, ["name", "path"]);
+  const data = await fsListFolders(node.path);
   data.map((item) => {
     item.lazy = true;
     return item;
@@ -123,7 +133,7 @@ const loadItems = async () => {
 
   let folders = [];
   if (!label.value && !localSearch.value) {
-    folders = await q("fsListFolders", { path: path.value }, ["name", "path"]);
+    folders = await fsListFolders(path.value);
     folders = folders.map((item) => {
       item.type = "folder";
       item.lazy = true;
@@ -134,8 +144,6 @@ const loadItems = async () => {
 
   loading.value = false;
 
-
-
   return {
     files,
     folders,
@@ -154,8 +162,6 @@ const label = ref(null);
 const initItems = await loadItems();
 const folders = ref(initItems.folders);
 
-
-
 watch(label, () => {
   loadItems();
 })
@@ -163,13 +169,18 @@ watch(label, () => {
 const selected = ref([]);
 
 const breadcrumbs = computed(() => {
-  let breadcrumbs = [];
+  let breadcrumbs = [
+    {
+      label: i18n.t("Storage"),
+      path: props.base,
+    },
+  ];
 
   if (path.value.toString() == "") {
-    return [];
+    return breadcrumbs;
   }
 
-  let paths = path.value.split("/");
+  let paths = path.value.split(props.base);
 
   let ps = [];
   for (let p of paths) {
@@ -186,6 +197,11 @@ const breadcrumbs = computed(() => {
 });
 
 const onClickRow = (evt, row, index) => {
+  if (row.type == "folder") {
+    preview.value = null;
+    return;
+  }
+
   preview.value = row;
 }
 
@@ -197,7 +213,6 @@ const onDblclickRow = (evt, row, index) => {
     return;
   }
   if (row.type == "file") {
-
     emit("input", row.path);
   }
 }
@@ -238,9 +253,9 @@ const onDeleteSelected = () => {
   }).onOk(async () => {
     for (let row of selected.value) {
       if (row.type == "folder") {
-        await m("fsDeleteFolder", { path: row.path });
+        await fsDeleteFolder(row.path)
       } else {
-        await m("fsDeleteFile", { path: row.path });
+        await fsDeleteFile(row.path);
       }
     }
     selected.value = [];
@@ -251,7 +266,6 @@ const onDeleteSelected = () => {
 }
 
 const onNewFolder = () => {
-
   quasar.dialog({
     title: "New Folder",
     prompt: {
@@ -259,8 +273,7 @@ const onNewFolder = () => {
     },
     cancel: true,
   }).onOk(async (name) => {
-    let p = path.value + "/" + name;
-    await m("fsCreateFolder", { path: p });
+    await fsCreateFolder(path.value + "/" + name)
     const items = await loadItems();
     reloadTreeFolder(path.value, items.folders);
   });
@@ -273,7 +286,7 @@ const onDeleteRow = (row) => {
       message: "Are you sure you want to delete this file?",
       cancel: true,
     }).onOk(async () => {
-      await m("fsDeleteFile", { path: row.path });
+      await fsDeleteFile(row.path);
       const items = await loadItems();
       reloadTreeFolder(path.value, items.folders);
     });
@@ -283,7 +296,7 @@ const onDeleteRow = (row) => {
       message: "Are you sure you want to delete this folder?",
       cancel: true,
     }).onOk(async () => {
-      await m("fsDeleteFolder", { path: row.path });
+      await fsDeleteFolder(row.path);
       const items = await loadItems();
       reloadTreeFolder(path.value, items.folders);
     });
@@ -301,9 +314,9 @@ const onRenameRow = (row) => {
   }).onOk(async (name) => {
     try {
       if (row.type == "file") {
-        await m("fsRenameFile", { path: row.path, name });
+        await fsRenameFile(row.path, name)
       } else {
-        await m("fsRenameFolder", { path: row.path, name });
+        await fsRenameFolder(row.path, name);
       }
     } catch (e) {
       quasar.dialog({
@@ -385,23 +398,64 @@ const filesGrid = computed(() => {
   });
 });
 
+const onDownloadRow = async (row) => {
+
+  const resp = await q("fsFile", {
+    path: row.path
+  }, ["base64Content"]);
+
+  const downloadLink = document.createElement("a");
+  downloadLink.href = `data:application/octet-stream;base64,${resp.base64Content}`;
+  downloadLink.download = row.name;
+  downloadLink.click();
+
 
-const onDownloadRow = (row) => {
-  // window.open("/api/fs/download?path=" + row.path);
 }
 
 const search = ref(null);
 
 const reloadStorage = async () => {
-  path.value = "";
+  path.value = props.base;
 
   search.value = "";
   localSearch.value = "";
   label.value = null;
   const items = await loadItems();
   reloadTreeFolder(path.value, items.folders);
+}
+
+const permission = await granted([
+  'fs.folder.create', 'fs.folder.delete', 'fs.folder.rename',
+  'fs.file.delete', 'fs.file.rename', 'fs.file.upload'
+]);
+
+const canDeleteRow = (row) => {
+  if (row.type == "folder" && permission.includes("fs.folder.delete")) {
+    return true;
+  }
+
+  if (row.type == "file" && permission.includes("fs.file.delete")) {
+    return true;
+  }
+
+  return false;
+}
+
+const canRenameRow = (row) => {
+  if (row.type == "folder" && permission.includes("fs.folder.rename")) {
+    return true;
+  }
+
+  if (row.type == "file" && permission.includes("fs.file.rename")) {
+    return true;
+  }
 
+  return false;
 }
+
+/* const perm = await q("granted", {
+  rights: ["fs.folder.create"]
+}) */
 </script>
 <template>
   <q-layout view="hHh lpR fFf" class="bg-white" container :style="{ 'min-height': height }">
@@ -435,14 +489,15 @@ const reloadStorage = async () => {
               <q-btn icon="add" outline rounded color="primary" :label="$t('New')">
                 <q-menu>
                   <q-list>
-                    <q-item clickable v-close-popup @click="onNewFolder">
+                    <q-item clickable v-close-popup @click="onNewFolder" v-if="permission.includes('fs.folder.create')">
                       <q-item-section avatar>
                         <q-icon name="sym_o_create_new_folder"></q-icon>
                       </q-item-section>
                       <q-item-section>{{ $t('Folder') }}</q-item-section>
                     </q-item>
                     <q-separator />
-                    <q-item clickable v-close-popup @click="showUploadFiles = true">
+                    <q-item clickable v-close-popup @click="showUploadFiles = true"
+                      v-if="permission.includes('fs.file.upload')">
                       <q-item-section avatar>
                         <q-icon name="sym_o_upload_file"></q-icon>
                       </q-item-section>
@@ -509,7 +564,6 @@ const reloadStorage = async () => {
 
       <q-toolbar>
         <q-breadcrumbs>
-          <q-breadcrumbs-el :label="$t('Storage')" @click="path = ''" href="javascript:void(0)"></q-breadcrumbs-el>
           <q-breadcrumbs-el v-for="(b, index) in breadcrumbs" :label="b.label" :key="index" @click="path = b.path"
             href="javascript:void(0)"></q-breadcrumbs-el>
         </q-breadcrumbs>
@@ -583,11 +637,11 @@ const reloadStorage = async () => {
               <q-btn flat icon="sym_o_more_vert" round dense>
                 <q-menu>
                   <q-list>
-                    <q-item clickable v-close-popup @click="onDeleteRow(props.row)">
+                    <q-item clickable v-close-popup @click="onDeleteRow(props.row)" v-if="canDeleteRow(props.row)">
                       <q-item-section avatar>
                         <q-icon name="sym_o_delete"></q-icon>
                       </q-item-section>
-                      <q-item-section>{{ $t('Delete') }}</q-item-section>
+                      <q-item-section>{{ $t('Delete') }} </q-item-section>
                     </q-item>
 
                     <q-item v-if="props.row.type == 'file'" clickable v-close-popup @click="onDownloadRow(props.row)">
@@ -597,7 +651,7 @@ const reloadStorage = async () => {
                       <q-item-section>Download</q-item-section>
                     </q-item>
 
-                    <q-item clickable v-close-popup @click="onRenameRow(props.row)">
+                    <q-item clickable v-close-popup @click="onRenameRow(props.row)" v-if="canRenameRow(props.row)">
                       <q-item-section avatar>
                         <q-icon name="sym_o_edit"></q-icon>
                       </q-item-section>

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

@@ -6,7 +6,6 @@ import { addObject, updateObject } from '../';
 
 const route = useRoute();
 const router = useRouter();
-const module = route.path.split("/")[1];
 
 const form = ref(null);
 const props = defineProps({
@@ -20,17 +19,26 @@ const props = defineProps({
     gutter: {
         type: String,
         default: "md"
+    },
+    submitLabel: {
+        type: String,
+        default: "Save"
+    },
+    submitIcon: {
+        type: String,
+        default: "sym_o_save"
     }
 });
 
 const que = useQuasar();
-const emit = defineEmits(["save"]);
+const emit = defineEmits(["save", "submit"]);
 const save = async () => {
 
     let valid = await form.value.validate();
     if (!valid) return;
     if (valid) {
         emit("save");
+        emit('submit');
     }
 
 
@@ -82,7 +90,7 @@ const onSubmit = (e) => {
             </q-card-section>
 
             <q-card-actions align="right">
-                <l-save-btn @click="save" />
+                <l-btn color="primary" :icon="submitIcon" :label="submitLabel" @click="save" />
             </q-card-actions>
         </l-card>
     </q-form>

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

@@ -92,11 +92,13 @@ const onDelete = async () => {
             <l-add-btn v-if="showAddBtn" />
             <l-edit-btn v-if="showEditBtn" />
             <l-delete-btn v-if="showDeleteBtn" @submit="onDelete" />
-
-            <slot name="header"></slot>
             <q-toolbar-title>{{ i18n.t(title) }}</q-toolbar-title>
         </q-toolbar>
 
+        <div class="q-gutter-sm q-mb-sm">
+            <slot name="header"></slot>
+        </div>
+
         <slot></slot>
     </q-page>
 </template>

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

@@ -31,9 +31,10 @@ const onSave = async () => {
 
             <l-input label="Permission name" v-model="obj.value" required></l-input>
 
-            <q-option-group type="checkbox" :options="roles" v-model="obj.roles">
-
-            </q-option-group>
+            <q-field label="Roles" stack-label>
+                <q-option-group type="checkbox" :options="roles" v-model="obj.roles" inline>
+                </q-option-group>
+            </q-field>
 
         </l-form>
 

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

@@ -0,0 +1,65 @@
+<script setup>
+import { reactive } from 'vue'
+import { utils, writeFileXLSX } from 'xlsx';
+import { q } from '../../'
+const obj = reactive({
+    roles: []
+});
+
+const app = await q("app", ["permissions"])
+let allData = await q("listRole", ["name", "permissions"]);
+
+let roles = allData.map((role) => {
+    return {
+        label: role.name,
+        value: role.name,
+    };
+});
+
+const submit = () => {
+
+    //filter roles
+    let e = allData.filter((role) => {
+        return obj.roles.indexOf(role.name) != -1;
+    });
+
+    let data = [];
+
+    //push permissions to rows
+    app.permissions.forEach(permission => {
+        let row = {
+            permission: permission
+        };
+
+        e.forEach(role => {
+            if (role.permissions.indexOf(permission) != -1) {
+                //tick checkbox
+                row[role.name] = "Yes"
+            } else {
+                row[role.name] = ''
+            }
+        });
+
+        data.push(row);
+    });
+
+
+    const ws = utils.json_to_sheet(data)
+    const wb = utils.book_new()
+    utils.book_append_sheet(wb, ws, "Roles")
+    writeFileXLSX(wb, "permission.xlsx")
+}
+
+</script>
+<template>
+    <l-page>
+        <l-form submit-label="Export" submit-icon="sym_o_download" @submit="submit">
+            <q-field label="Roles" stack-label>
+                <q-option-group type="checkbox" :options="roles" v-model="obj.roles" inline>
+                </q-option-group>
+            </q-field>
+        </l-form>
+
+
+    </l-page>
+</template>

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

@@ -20,7 +20,7 @@ const columns = [
 
 </script>
 <template>
-    <l-page add-btn>
+    <l-page>
         <l-table @request="onRequest" :columns="columns" :actions="['delete']"></l-table>
     </l-page>
 </template>

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

@@ -62,24 +62,7 @@ const columns = [
                 </q-td>
             </template>
 
-
         </q-table>
 
-        <!-- q-table :data="roles">
-
-            <el-table-column width="60px" #default="{ row }">
-                <q-btn v-if="row.canDelete" flat round dense icon="sym_o_delete" @click="onDelete(row.name)" />
-            </el-table-column>
-            <el-table-column prop="name" label="Name" sortable width="200px"></el-table-column>
-            <el-table-column label="Parent">
-
-                <template #default="{ row }">
-
-                    <el-table :data="row.parents">
-                        <el-table-column prop="name" label="Name"></el-table-column>
-                    </el-table>
-                </template>
-            </el-table-column>
-        </q-table -->
     </l-page>
 </template>

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

@@ -2,7 +2,8 @@
 import { reactive } from 'vue'
 import { m } from "../../"
 const obj = reactive({
-    input1: 'test'
+    input1: 'test',
+    editor: 'test',
 })
 const onSave = async () => {
     console.log(obj)
@@ -15,9 +16,13 @@ const onSave = async () => {
 </script>
 <template>
     <l-page>
+        {{ obj }}
         <l-form v-model="obj">
             <l-input v-model="obj.input1" label="Input1" />
             <q-file v-model="obj.file" label="File" accept=".txt" />
+
+            <q-editor v-model="obj.editor" />
+
         </l-form>
     </l-page>
 </template>

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

@@ -1,7 +1,6 @@
 <script setup>
 import { q } from '../../'
-const my = await q("my", ["username", "first_name", "last_name", "email", "phone", "roles", "addr1", "addr2", "addr3", "join_date"])
-
+const my = await q("my", ["user_id", "username", "first_name", "last_name", "email", "phone", "roles", "addr1", "addr2", "addr3", "join_date"])
 </script>
 <template>
     <l-page title="User profile">
@@ -19,9 +18,8 @@ const my = await q("my", ["username", "first_name", "last_name", "email", "phone
                 <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-page>
 </template>

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

@@ -1,6 +1,7 @@
 <script setup>
 import { reactive } from "vue"
-import { q, m, notify } from '../../../'
+import { notify } from '../../../'
+import { updatePassword } from "@hostlink/light"
 
 const obj = reactive({
     old_password: "",
@@ -9,10 +10,7 @@ const obj = reactive({
 })
 
 const onSave = async () => {
-    if (await m("updatePassword", {
-        old_password: obj.old_password,
-        new_password: obj.new_password,
-    })) {
+    if (await updatePassword(obj.old_password, obj.new_password)) {
         notify("Your password has been updated")
     } else {
         notify("Old password is incorrect", "red")

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

@@ -1,6 +1,8 @@
 <script setup>
 import { ref } from "vue"
+import { useRoute } from "vue-router"
 const tab = ref("general")
+const route = useRoute()
 </script>
 
 <template>
@@ -8,7 +10,7 @@ const tab = ref("general")
         <l-card>
             <q-splitter unit="px" :model-value="120">
                 <template #before>
-                    <q-tabs v-model="tab" vertical >
+                    <q-tabs v-model="tab" vertical>
                         <q-route-tab name="general" icon="sym_o_info" :label="$t('General')" to="/User/setting" exact
                             replace />
                         <q-route-tab name="information" icon="sym_o_info" :label="$t('Information')"
@@ -17,14 +19,15 @@ const tab = ref("general")
                             to="/User/setting/password" exact replace />
                         <q-route-tab name="style" icon="sym_o_style" :label="$t('Style')" to="/User/setting/style" exact
                             replace />
-                        <q-route-tab name="2fa" icon="sym_o_key" :label="$t('2FA')" to="/User/setting/two-factor-auth" exact replace />
+                        <q-route-tab name="2fa" icon="sym_o_key" :label="$t('2FA')" to="/User/setting/two-factor-auth" exact
+                            replace />
                         <q-route-tab name="bio" icon="sym_o_fingerprint" :label="$t('Bio')" to="/User/setting/bio-auth"
                             exact replace />
                     </q-tabs>
                 </template>
 
                 <template #after>
-                    <router-view>
+                    <router-view :key="route.path">
                     </router-view>
                 </template>
             </q-splitter>

package/dist/runtime/pages/User/update-password.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { useQuasar } from 'quasar';
-//import { useRouter, router } from 'vue-router';
-
+import { updatePassword } from '@hostlink/light';
 
 const obj = reactive({
     old_password: "",
@@ -13,10 +12,7 @@ const qua = useQuasar();
 const router = useRouter();
 
 const onSave = async () => {
-    if (await m("updatePassword", {
-        old_password: obj.old_password,
-        new_password: obj.new_password,
-    })) {
+    if (await updatePassword(obj.old_password, obj.new_password)) {
         //back
         router.back();
     } else {

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

@@ -8,15 +8,18 @@ const columns = [
     },
     {
         label: "User",
-        name: "username"
+        name: "username",
+        sortable: true,
+        searchable: true,
     },
     {
         label: "Login time",
         name: "login_dt",
         sortable: true,
         searchable: true,
+        searchType: "date",
     }, {
-        label: "Login out",
+        label: "Logout time",
         name: "logout_dt",
         sortable: true,
         searchable: true,

package/dist/runtime/routes.mjs

@@ -52,6 +52,11 @@ function Permission_all() {
     /* webpackChunkName: "Permission-all" */ './pages/Permission/all.vue'
   )
 }
+function Permission_export() {
+  return import(
+    /* webpackChunkName: "Permission-export" */ './pages/Permission/export.vue'
+  )
+}
 function Role_add() {
   return import(/* webpackChunkName: "Role-add" */ './pages/Role/add.vue')
 }
@@ -228,6 +233,11 @@ export default [
     path: '/Permission/all',
     component: Permission_all,
   },
+  {
+    name: 'Permission-export',
+    path: '/Permission/export',
+    component: Permission_export,
+  },
   {
     name: 'Role-add',
     path: '/Role/add',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "0.0.63",
+  "version": "0.0.64",
   "description": "HostLink Nuxt Light Framework",
   "repository": "@hostlink/nuxt-light",
   "license": "MIT",
@@ -34,7 +34,7 @@
     "route-gen": "node route-generate.mjs"
   },
   "dependencies": {
-    "@hostlink/light": "^0.0.16",
+    "@hostlink/light": "^0.0.23",
     "@nuxt/kit": "^3.7.0",
     "@quasar/extras": "^1.16.6",
     "axios": "^1.5.0",
@@ -42,7 +42,8 @@
     "json-to-graphql-query": "^2.2.5",
     "quasar": "^2.12.5",
     "unplugin-auto-import": "^0.16.6",
-    "vue-i18n": "^9.2.2"
+    "vue-i18n": "^9.2.2",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@nuxt/content": "^2.8.2",