feat: #8410 added new feature to module searchbar #1272

Merged
provira merged 18 commits from 8410-improveModuleSearchbar into dev 2025-01-31 10:02:50 +00:00
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 = () => {
provira marked this conversation as resolved Outdated

Estás haciendo 2 bucles, pasar a 1. Respuesta de copilot:

const searchModule = () => {
    const searching = ref(false);
    items.value.some((item) => {
        const title = getLocale(item.title).normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase();
        if (title.includes(search.value.toLowerCase()) && !searching.value) {
            searching.value = true;
            router.push({ name: item.name });
            return true; // Termina el bucle al encontrar el primer resultado
        }
        return false;
    });
}
Estás haciendo 2 bucles, pasar a 1. Respuesta de copilot: ``` const searchModule = () => { const searching = ref(false); items.value.some((item) => { const title = getLocale(item.title).normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase(); if (title.includes(search.value.toLowerCase()) && !searching.value) { searching.value = true; router.push({ name: item.name }); return true; // Termina el bucle al encontrar el primer resultado } return false; }); } ```
const [item] = filteredItems.value;
if (item) router.push({ name: item.name });
jorgep marked this conversation as resolved Outdated

No es necesario que sea ref, usar variable normal.

No es necesario que sea ref, usar variable normal.

arreglado

arreglado
};
</script> </script>
<template> <template>
@ -188,10 +193,11 @@ function normalize(text) {
filled filled
dense dense
autofocus autofocus
@keyup.enter.stop="searchModule()"
provira marked this conversation as resolved Outdated

Solo gastas esta función en 1 sitio, es innecesaria.

Solo gastas esta función en 1 sitio, es innecesaria.
/> />
jorgep marked this conversation as resolved Outdated

llamar solo a la fn searchModule() @keyup.enter.stop="searchModule()"

llamar solo a la fn **searchModule()** `@keyup.enter.stop="searchModule()"`
</QItem> </QItem>
<QSeparator /> <QSeparator />
<template v-if="filteredPinnedModules.size"> <template v-if="filteredPinnedModules.size && !search">
jorgep marked this conversation as resolved Outdated

Las variables ponlas juntas y las funciones lo mismo.

Las variables ponlas juntas y las funciones lo mismo.
<LeftMenuItem <LeftMenuItem
provira marked this conversation as resolved Outdated

Solo gastas esta función en 1 sitio, es innecesaria.

Solo gastas esta función en 1 sitio, es innecesaria.
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 />
provira marked this conversation as resolved Outdated

en lugar de usar una función, puedes hacer searchingVal = !!$event; que te devuelve el valor booleano. Y te ahorras líneas.

en lugar de usar una función, puedes hacer searchingVal = !!$event; que te devuelve el valor booleano. Y te ahorras líneas.
</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: