@hostlink/nuxt-light 0.0.13 → 0.0.15

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "0.0.13"
+  "version": "0.0.15"
 }

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

@@ -1,6 +1,6 @@
 <script setup>
 import { q } from '../light';
-const system = await q("system", ['company', 'companyLogo', 'logged']);
+const { system } = await q({ system: ['company', 'companyLogo', 'logged'] });
 </script>
 <template>
     <q-layout v-if="!system.logged">

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

@@ -1,6 +1,7 @@
 <script setup>
 import { ref } from "vue";
 import { useRouter, useRoute } from "vue-router";
+import { useQuasar } from "quasar";
 
 const route = useRoute();
 const router = useRouter();
@@ -16,7 +17,6 @@ const props = defineProps({
 const que = useQuasar();
 const emit = defineEmits(["save"]);
 const save = async () => {
-    console.log(form.value)
 
     let valid = await form.value.validate();
     if (!valid) return;

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,224 @@
+<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;
+
+
+
+}
+</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-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.13",
+  "version": "0.0.15",
   "description": "HostLink Nuxt Light Framework",
   "repository": "@hostlink/nuxt-light",
   "license": "MIT",