@hostlink/nuxt-light 0.0.14 → 0.0.16

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "0.0.14"
+  "version": "0.0.16"
 }

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

@@ -37,8 +37,6 @@ if (user.value && user.value.roles.indexOf('Administrators') != -1) {
     showViewAs = true;
 }
 
-//const menus = (await queryContent("/menus").findOne()).menus;
-const menus = [];
 
 const menuOverlayHeader = ref(false)
 const layoutView = computed(() => {
@@ -178,7 +176,6 @@ const errors = computed(() => {
             <!-- drawer content -->
             <q-scroll-area class="fit">
                 <l-menu v-for="menu in app.menus" :value="menu" v-if="isAdmin" :dense="style.dense" />
-                <l-menu v-for="menu in menus" :value="menu" />
             </q-scroll-area>
         </q-drawer>
 

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

@@ -1,6 +1,6 @@
 <script setup>
 
-defineProps(["value","dense"])
+defineProps(["value", "dense"])
 
 </script>
 
@@ -19,9 +19,9 @@ defineProps(["value","dense"])
 </style>
 
 <template>
-    <q-expansion-item v-if="value.menus" :label="value.label" :icon="value.icon" :dense="dense">
+    <q-expansion-item v-if="value.children?.length > 0" :label="value.label" :icon="value.icon" :dense="dense">
         <q-list class="q-pl-md">
-            <l-menu :value="menu" v-for="menu in value.menus" :dense="dense"></l-menu>
+            <l-menu :value="menu" v-for="menu in value.children" :dense="dense"></l-menu>
         </q-list>
     </q-expansion-item>
     <q-list v-else class="menu-list" :dense="dense">

package/dist/runtime/pages/EventLog/_eventlog_id/view.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { getObject } from "../../light"
+import { getObject } from "../../../light"
 const obj = await getObject(["eventlog_id", "class", "id", "action", "created_time", "username"]);
 </script>
 <template>
@@ -12,8 +12,6 @@ const obj = await getObject(["eventlog_id", "class", "id", "action", "created_ti
                 <l-item label="Action">{{ obj.action }}</l-item>
                 <l-item label="Created time">{{ obj.created_time }}</l-item>
                 <l-item label="Username">{{ obj.username }}</l-item>
-
-
             </l-list>
         </l-card>
     </l-page>

package/dist/runtime/pages/System/menu/index.vue

@@ -0,0 +1,251 @@
+<script setup>
+import { reactive, ref, computed } from 'vue';
+import { m, q } from "../../../light";
+import { useQuasar } from 'quasar';
+
+
+const quasar = useQuasar();
+const menus = ref(await q("appMenus", []));
+
+const selected = ref(null);
+const tree1 = ref(null)
+
+const getUUID = () => {
+    //iso v4
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        let r = Math.random() * 16 | 0,
+            v = c == 'x' ? r : (r & 0x3 | 0x8);
+        return v.toString(16);
+    }).toUpperCase();
+
+}
+
+const onReload = async () => {
+    menus.value = await q("appMenus", []);
+}
+
+const onAdd = () => {
+
+    quasar.dialog({
+        title: 'Add Menu',
+        message: 'Enter menu label',
+        prompt: {
+            model: '',
+        },
+        cancel: true,
+        persistent: true,
+    }).onOk((data) => {
+        if (data === '') return;
+
+        menus.value.push({
+            label: data,
+            uuid: getUUID(),
+            children: [],
+        });
+
+    });
+}
+const onAddChild = (node) => {
+
+    quasar.dialog({
+        title: 'Add Child Menu',
+        message: 'Enter menu label',
+        prompt: {
+            model: '',
+        },
+        cancel: true,
+        persistent: true,
+    }).onOk((data) => {
+        if (data === '') return;
+
+        node.children.push({
+            label: data,
+            uuid: getUUID(),
+            parent: node.uuid,
+            children: [],
+        });
+        tree1.value.setExpanded(selected.value, true)
+
+    });
+}
+const onRemove = (node) => {
+    const parent = node.parent;
+    if (parent) {
+        const parentNode = tree1.value.getNodeByKey(parent);
+        parentNode.children = parentNode.children.filter((item) => item.uuid !== node.uuid);
+        selected.value = parent;
+
+    } else {
+        menus.value = menus.value.filter((item) => item.uuid !== node.uuid);
+
+        selected.value = null;
+    }
+}
+
+const splitterModel = ref(50)
+
+const selectedNode = computed(() => {
+    return tree1.value.getNodeByKey(selected.value);
+});
+
+const onSave = () => {
+
+    //confirm
+    quasar.dialog({
+        title: 'Save Menu',
+        message: 'Are you sure to save menu?',
+        cancel: true,
+        persistent: true,
+    }).onOk(async () => {
+        if (await m("updateAppMenus", {
+            data: menus.value
+        })) {
+            quasar.notify({
+                message: 'Menu saved',
+                color: 'positive',
+                icon: 'check',
+                position: 'top',
+                timeout: 1000,
+            });
+        }
+
+    });
+}
+
+const showMove = ref(false)
+const onMove = () => {
+    showMove.value = true;
+}
+const moveTarget = ref(null)
+
+const onMoveConfirm = () => {
+
+    const selectedNode = tree1.value.getNodeByKey(selected.value);
+
+    //clone selected node
+    const newNode = JSON.parse(JSON.stringify(selectedNode));
+
+    onRemove(selectedNode);
+
+    //add to target
+    newNode.parent = moveTarget.value;
+    let targetNode = tree1.value.getNodeByKey(moveTarget.value);
+    targetNode.children = targetNode.children || [];
+    targetNode.children.push(newNode);
+
+    tree1.value.setExpanded(moveTarget.value, true)
+
+    showMove.value = false;
+
+}
+const onMoveToRoot = () => {
+    const selectedNode = tree1.value.getNodeByKey(selected.value);
+
+    //clone selected node
+    const newNode = JSON.parse(JSON.stringify(selectedNode));
+    newNode.parent = null;
+    onRemove(selectedNode);
+
+    //add to target
+
+    menus.value.push(newNode);
+
+    showMove.value = false;
+}
+
+const getParentNode = (node) => {
+    if (!node.parent) return menus.value;
+    return tree1.value.getNodeByKey(node.parent);
+}
+
+const onMoveUp = (node) => {
+    const parent = getParentNode(node);
+    const index = parent.children.findIndex((item) => item.uuid === node.uuid);
+    if (index > 0) {
+        const temp = parent.children[index - 1];
+        parent.children[index - 1] = node;
+        parent.children[index] = temp;
+    }
+}
+
+const onMoveDown = (node) => {
+    const parent = getParentNode(node);
+    const index = parent.children.findIndex((item) => item.uuid === node.uuid);
+    if (index < parent.children.length - 1) {
+        const temp = parent.children[index + 1];
+        parent.children[index + 1] = node;
+        parent.children[index] = temp;
+    }
+}
+</script>
+
+<template>
+    <l-page>
+        <q-dialog v-model="showMove">
+            <l-card>
+                <q-card-section>
+                    <q-tree :nodes="menus" selected-color="primary" default-expand-all v-model:selected="moveTarget"
+                        node-key="uuid" ref="tree2" />
+                </q-card-section>
+
+                <q-card-actions align="right">
+                    <q-btn flat label="Cancel" color="primary" v-close-popup />
+                    <q-btn flat label="Move" color="primary" @click="onMoveConfirm" />
+                    <q-btn flat label="Move to root" color="primary" @click="onMoveToRoot" />
+                </q-card-actions>
+            </l-card>
+        </q-dialog>
+
+        <l-card>
+            <q-splitter v-model="splitterModel" style="height:680px">
+                <template #before>
+                    <q-card-section>
+                        <q-btn outline rounded color="primary" @click="onAdd" label="Add" icon="sym_o_add" />
+                        <q-btn outline rounded color="primary" @click="onReload" label="Reload" icon="sym_o_refresh" />
+
+                        <q-btn outline rounded color="primary" @click="onSave" label="Save" icon="sym_o_save" />
+                    </q-card-section>
+
+                    <q-tree :nodes="menus" selected-color="primary" default-expand-all v-model:selected="selected"
+                        node-key="uuid" ref="tree1" />
+                </template>
+
+                <template #after v-if="selected">
+
+                    <q-card-section>
+                        <q-btn outline rounded color="primary" @click="onRemove(selectedNode)" label="Remove"
+                            icon="sym_o_remove" />
+                        <q-btn outline rounded color="primary" @click="onAddChild(selectedNode)" label="Add Child"
+                            icon="sym_o_add" />
+
+                        <q-btn outline rounded color="primary" @click="onMove(selectedNode)" label="Move"
+                            icon="sym_o_move" />
+
+                        <q-btn outline rounded color="primary" @click="onMoveUp(selectedNode)" label="Up"
+                            icon="sym_o_arrow_upward" />
+
+                        <q-btn outline rounded color="primary" @click="onMoveDown(selectedNode)" label="Up"
+                            icon="sym_o_arrow_downward" />
+                    </q-card-section>
+
+
+                    <q-card-section>
+                        <q-form>
+                            <l-input label="Label" v-model="selectedNode.label" />
+                            <l-input label="To" v-model="selectedNode.to" />
+                            <l-input label="Icon" v-model="selectedNode.icon" />
+                            <l-input label="Permission" v-model="selectedNode.permission" />
+                            <l-input label="UUID" v-model="selectedNode.uuid" readonly />
+
+                        </q-form>
+                    </q-card-section>
+                </template>
+
+            </q-splitter>
+
+
+
+        </l-card>
+
+    </l-page>
+</template>

package/dist/runtime/routes.mjs

@@ -78,6 +78,11 @@ function System_view_as() {
     /* webpackChunkName: "System-view_as" */ './pages/System/view_as.vue'
   )
 }
+function System_menu_index() {
+  return import(
+    /* webpackChunkName: "System-menu-index" */ './pages/System/menu/index.vue'
+  )
+}
 function User_add() {
   return import(/* webpackChunkName: "User-add" */ './pages/User/add.vue')
 }
@@ -213,6 +218,11 @@ export default [
     path: '/System/view_as',
     component: System_view_as,
   },
+  {
+    name: 'System-menu',
+    path: '/System/menu',
+    component: System_menu_index,
+  },
   {
     name: 'User-add',
     path: '/User/add',

package/package.json

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