Merge pull request 'feat: #8410 added new feature to module searchbar' (!1272) from 8410-improveModuleSearchbar into dev

Reviewed-on: #1272
Reviewed-by: Jorge Penadés <jorgep@verdnatura.es>

src/components/LeftMenu.vue

@@ -10,12 +10,13 @@ import routes from 'src/router/modules';
 import LeftMenuItem from './LeftMenuItem.vue';
 import LeftMenuItemGroup from './LeftMenuItemGroup.vue';
 import VnInput from './common/VnInput.vue';
+import { useRouter } from 'vue-router';
 
 const { t } = useI18n();
 const route = useRoute();
 const quasar = useQuasar();
 const navigation = useNavigationStore();
-
+const router = useRouter();
 const props = defineProps({
     source: {
         type: String,
@@ -174,6 +175,10 @@ function normalize(text) {
         .replace(/[\u0300-\u036f]/g, '')
         .toLowerCase();
 }
+const searchModule = () => {
+    const [item] = filteredItems.value;
+    if (item) router.push({ name: item.name });
+};
 </script>
 
 <template>
@@ -188,10 +193,11 @@ function normalize(text) {
                         filled
                         dense
                         autofocus
+                        @keyup.enter.stop="searchModule()"
                     />
                 </QItem>
                 <QSeparator />
-                <template v-if="filteredPinnedModules.size">
+                <template v-if="filteredPinnedModules.size && !search">
                     <LeftMenuItem
                         v-for="[key, pinnedModule] of filteredPinnedModules"
                         :key="key"
@@ -215,11 +221,11 @@ function normalize(text) {
                     </LeftMenuItem>
                     <QSeparator />
                 </template>
-                <template v-for="item in filteredItems" :key="item.name">
+                <template v-for="(item, index) in filteredItems" :key="item.name">
                     <template
-                        v-if="item.children && !filteredPinnedModules.has(item.name)"
+                        v-if="search ||item.children && !filteredPinnedModules.has(item.name)"
                     >
-                        <LeftMenuItem :item="item" group="modules">
+                        <LeftMenuItem :item="item" group="modules" :class="search && index === 0 ? 'searched' : ''">
                             <template #side>
                                 <QBtn
                                     v-if="item.isPinned === true"
@@ -336,6 +342,9 @@ function normalize(text) {
 .header {
     color: var(--vn-label-color);
 }
+.searched{
+    background-color: var(--vn-section-hover-color);
+}
 </style>
 <i18n>
     es: