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
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:
commit
5ae5cec9f9
|
@ -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:
|
||||||
|
|
Loading…
Reference in New Issue