From 390e73415775231e20a7cb58d243ffaa9072bc76 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 7 Nov 2024 12:44:33 +0100
Subject: [PATCH] feat: refs #6839 new ui

---
 src/components/LeftMenu.vue | 69 ++++++++++++++++++++++++++++++++++---
 1 file changed, 64 insertions(+), 5 deletions(-)

diff --git a/src/components/LeftMenu.vue b/src/components/LeftMenu.vue
index 03fe11a85..40e2a08de 100644
--- a/src/components/LeftMenu.vue
+++ b/src/components/LeftMenu.vue
@@ -1,6 +1,6 @@
 <script setup>
 import axios from 'axios';
-import { onMounted, watch, ref, reactive } from 'vue';
+import { onMounted, watch, ref, reactive, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { QSeparator, useQuasar } from 'quasar';
 import { useRoute } from 'vue-router';
@@ -9,6 +9,7 @@ import { toLowerCamel } from 'src/filters';
 import routes from 'src/router/modules';
 import LeftMenuItem from './LeftMenuItem.vue';
 import LeftMenuItemGroup from './LeftMenuItemGroup.vue';
+import VnInput from './common/VnInput.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -22,7 +23,32 @@ const props = defineProps({
     },
 });
 
+const items = ref([]);
 const expansionItemElements = reactive({});
+const pinnedModules = computed(() => {
+    const map = new Map();
+    items.value.forEach((item) => item.isPinned && map.set(item.name, item));
+    return map;
+});
+const search = ref(null);
+
+const filteredItems = computed(() => {
+    if (!search.value) return items.value;
+    return items.value.filter((item) => {
+        const locale = t(item.title).toLowerCase();
+        return locale.includes(search.value.toLowerCase());
+    });
+});
+
+const filteredPinnedModules = computed(() => {
+    if (!search.value) return pinnedModules.value;
+    const map = new Map();
+    for (const [key, pinnedModule] of pinnedModules.value) {
+        const locale = t(pinnedModule.title).toLowerCase();
+        if (locale.includes(search.value.toLowerCase())) map.set(key, pinnedModule);
+    }
+    return map;
+});
 
 onMounted(async () => {
     await navigation.fetchPinned();
@@ -66,8 +92,6 @@ function addChildren(module, route, parent) {
     }
 }
 
-const items = ref([]);
-
 function getRoutes() {
     if (props.source === 'main') {
         const modules = Object.assign([], navigation.getModules().value);
@@ -135,9 +159,44 @@ const handleItemExpansion = (itemName) => {
                     </QItemSection>
                     <QItemSection> {{ t('globals.modules') }}</QItemSection>
                 </QItem>
+                <QItem class="q-px-md q-pt-none">
+                    <VnInput
+                        v-model="search"
+                        :label="t('globals.search')"
+                        class="full-width"
+                        is-outlined
+                        dense
+                    />
+                </QItem>
                 <QSeparator />
-                <template v-for="item in items" :key="item.name">
-                    <template v-if="item.children">
+                <template v-if="filteredPinnedModules.size">
+                    <LeftMenuItem
+                        v-for="[key, pinnedModule] of filteredPinnedModules"
+                        :key="key"
+                        :item="pinnedModule"
+                        group="modules"
+                    >
+                        <template #side>
+                            <QBtn
+                                v-if="pinnedModule.isPinned === true"
+                                @click="togglePinned(pinnedModule, $event)"
+                                icon="remove_circle"
+                                size="xs"
+                                flat
+                                round
+                            >
+                                <QTooltip>
+                                    {{ t('components.leftMenu.removeFromPinned') }}
+                                </QTooltip>
+                            </QBtn>
+                        </template>
+                    </LeftMenuItem>
+                    <QSeparator />
+                </template>
+                <template v-for="item in filteredItems" :key="item.name">
+                    <template
+                        v-if="item.children && !filteredPinnedModules.has(item.name)"
+                    >
                         <LeftMenuItem :item="item" group="modules">
                             <template #side>
                                 <QBtn