Merge pull request 'feat: #8410 added new feature to module searchbar' (!1272) from 8410-improveModuleSearchbar into dev
gitea/salix-front/pipeline/head This commit looks good Details

Reviewed-on: #1272
Reviewed-by: Jorge Penadés <jorgep@verdnatura.es>
This commit is contained in:
PAU ROVIRA ROSALENY 2025-01-31 10:02:49 +00:00
commit 5ae5cec9f9
1 changed files with 14 additions and 5 deletions

View File

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