- gestione dell'editor delle pagine (non funzionante!)

src/components/CMenuItem/CMenuItem.scss

@@ -144,5 +144,6 @@
 }
 
 .subtitle {
-    font-style: italic;
-}
+  font-size: 0.85em;
+  color: #666;
+}

src/components/CMenuItem/CMenuItem.ts

@@ -1,63 +1,72 @@
-import { computed, defineComponent, onMounted, PropType, ref, toRef, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useUserStore } from '@store/UserStore'
-import { useGlobalStore } from '@store/globalStore'
-import { useQuasar } from 'quasar'
-import { costanti } from '@costanti'
-import { fieldsTable } from '@store/Modules/fieldsTable'
-import { shared_consts } from '@src/common/shared_vuejs'
-import { IColGridTable, IOperators } from 'model'
-import { tools } from '@tools'
-import { static_data } from '@src/db/static_data'
+import { computed, defineComponent, PropType } from 'vue';
+
+const norm = (path: string): string =>
+  path
+    .trim()
+    .replace(/^\/+|\/+$/g, '')
+    .toLowerCase();
+
+const toNormPath = (p: any): string => {
+  if (!p) return '';
+  if (typeof p === 'string') return norm(p);
+  return norm(p.path || '');
+};
 
 export default defineComponent({
   name: 'CMenuItem',
   props: {
-    item: Object,
-    getroute: Function,
-    getmymenuclass: Function,
-    getimgiconclass: Function,
-    clBase: String,
-    mainMenu: Boolean,
-    level: {
-      type: Number,
-      default: 0
-    },
+    item: { type: Object, required: true },
+    tools: { type: Object, required: true },
+    getroute: { type: Function, required: true },
+    getmymenuclass: { type: Function, required: true },
+    getimgiconclass: { type: Function, required: true },
+    clBase: { type: String, default: '' },
+    level: { type: Number, default: 1 },
   },
+  setup(props) {
+    const getmenuByPath = (input: any, depth = 0): any => {
+      if (depth > 5) return null;
 
-  components: {},
-  setup(props, { emit }) {
-    const $q = useQuasar()
-    const { t } = useI18n()
-    const userStore = useUserStore()
-    const globalStore = useGlobalStore()
+      const path = toNormPath(input);
+      if (!path) return null;
 
-    function mounted() {
-      // ...
+      let page = props.tools.getmenuByPath ? props.tools.getmenuByPath(path) : null;
+      if (!page) return null;
 
-    }
+      // Evita loop
+      const selfPath = toNormPath(props.item);
+      if (selfPath && path === selfPath) return null;
 
-    function getmenuByPath(pathoobj: any) {
-      let mymenufind = null
-      if (tools.isObject(pathoobj)) {
-        mymenufind = pathoobj
-      } else {
-        mymenufind = static_data.routes.find((menu: any) => menu.path === '/' + pathoobj)
-      }
+      return page;
+    };
 
-      return mymenufind
-    }
+    const children = computed(() => {
+      const item: any = props.item;
+      const r2 = Array.isArray(item.routes2) ? item.routes2 : [];
+      const sm = Array.isArray(item.sottoMenu) ? item.sottoMenu : [];
 
-    onMounted(mounted)
+      return [...r2, ...sm]
+        .map((ref) =>
+          typeof ref === 'string' || !ref.path ? getmenuByPath(ref, props.level) : ref
+        )
+        .filter(Boolean)
+        .sort((a: any, b: any) => (a.order ?? 0) - (b.order ?? 0));
+    });
 
-    function makeClick() {
-    }
+    const hasChildren = computed(() => children.value.length > 0);
+
+    const icon = computed(() => {
+      const item: any = props.item;
+      return item.materialIcon || item.icon || 'far fa-file-alt';
+    })
 
     return {
-      tools,
-      getmenuByPath,
-      makeClick,
-    }
-  }
-})
-
+      children,
+      hasChildren,
+      icon,
+      makeClick: () => {
+        // niente per ora
+      },
+    };
+  },
+});

src/components/CMenuItem/CMenuItem.vue

@@ -1,57 +1,42 @@
 <template>
   <div :style="{ paddingLeft: `${level * 4}px` }">
-
     <q-separator v-if="item.isseparator" />
+
+    <!-- Nodo con figli -->
     <q-expansion-item
-      v-else-if="item.routes2 || (item.sottoMenu && item.sottoMenu.length > 0)"
-      :content-inset-level="item.level_parent"
+      v-else-if="hasChildren"
       :header-class="getmymenuclass(item)"
-      :header-inset-level="item.level_parent"
       :icon="item.materialIcon"
       :label="tools.getLabelByItem(item)"
+      expand-icon="fas fa-chevron-down"
       active-class="my-menu-active"
-      :expand-icon-class="item.mainMenu ? 'my-menu-separat' : ''"
-      :expand-icon="
-        item.mainMenu || item.routes2 ? 'fas fa-chevron-down' : 'none'
-      "
     >
-      <router-link :to="getroute(item)" custom>
-        <c-menu-item
-          v-for="(childItem, childIndex) in item.routes2 || (item.sottoMenu && item.sottoMenu.length > 0)"
-          :key="childIndex"
-          :item="getmenuByPath(childItem)"
-          :tools="tools"
-          :getroute="getroute"
-          :getmymenuclass="getmymenuclass"
-          :getimgiconclass="getimgiconclass"
-          :clBase="clBase"
-          :mainMenu="item.mainMenu"
-          :level="level + 1"
-        />
-      </router-link>
+      <CMenuItem
+        v-for="(child, idx) in children"
+        :key="child._id || child.path || idx"
+        :item="child"
+        :tools="tools"
+        :getroute="getroute"
+        :getmymenuclass="getmymenuclass"
+        :getimgiconclass="getimgiconclass"
+        :clBase="clBase"
+        :level="level + 1"
+      />
     </q-expansion-item>
-    <router-link v-else :to="getroute(item)" custom>
-      <q-item
-        clickable
-        :to="getroute(item)"
-        @click="makeClick"
-        :content-inset-level="item.level_parent"
-        :header-inset-level="item.level_parent"
-        active-class="my-menu-active"
-        expand-icon="none"
-      >
+
+    <!-- Foglia -->
+    <router-link v-else :to="getroute(item)">
+      <q-item clickable :to="getroute(item)" @click="makeClick" active-class="my-menu-active">
         <q-item-section thumbnail>
           <q-avatar
             :icon="item.materialIcon"
-            :size="!!item.iconsize ? item.iconsize : '2rem'"
-            :font-size="!!item.iconsize ? item.iconsize : '2rem'"
+            :size="item.iconsize || '2rem'"
+            :font-size="item.iconsize || '2rem'"
             text-color="primary"
             square
             rounded
-          >
-          </q-avatar>
+          />
         </q-item-section>
-
         <q-item-section>
           <span :class="item.extraclass">{{ tools.getLabelByItem(item) }}</span>
           <span v-if="item.subtitle" class="subtitle">{{ item.subtitle }}</span>