salix-front/src/components/ui/VnSearchbar.vue

<script setup>
import { onMounted, ref, computed, watch } from 'vue';
import { useQuasar } from 'quasar';
import { useArrayData } from 'composables/useArrayData';
import VnInput from 'src/components/common/VnInput.vue';
import { useI18n } from 'vue-i18n';
import { useStateStore } from 'src/stores/useStateStore';
import { useRoute } from 'vue-router';

const quasar = useQuasar();
const { t } = useI18n();
const state = useStateStore();
const route = useRoute();

const props = defineProps({
    dataKey: {
        type: String,
        required: true,
    },
    label: {
        type: String,
        default: 'Search',
    },
    info: {
        type: String,
        default: '',
    },
    redirect: {
        type: Boolean,
        default: true,
    },
    url: {
        type: String,
        default: '',
    },
    filter: {
        type: Object,
        default: null,
    },
    where: {
        type: Object,
        default: null,
    },
    order: {
        type: String,
        default: '',
    },
    limit: {
        type: Number,
        default: 20,
    },
    userParams: {
        type: Object,
        default: null,
    },
    exprBuilder: {
        type: Function,
        default: null,
    },
    customRouteRedirectName: {
        type: String,
        default: '',
    },
    whereFilter: {
        type: Function,
        default: undefined,
    },
    searchRemoveParams: {
        type: Boolean,
        default: true,
    },
});

const searchText = ref();
let arrayDataProps = { ...props };
if (props.redirect)
    arrayDataProps = {
        ...props,
        ...{
            navigate: {
                customRouteRedirectName: props.customRouteRedirectName,
                searchText: searchText.value,
            },
        },
    };
let arrayData = useArrayData(props.dataKey, arrayDataProps);
let store = arrayData.store;
const to = computed(() => {
    const url = { path: route.path, query: { ...(route.query ?? {}) } };
    const searchUrl = arrayData.store.searchUrl;
    const currentFilter = {
        ...arrayData.store.currentFilter,
        search: searchText.value || undefined,
    };

    if (searchUrl) url.query[searchUrl] = JSON.stringify(currentFilter);
    return url;
});

watch(
    () => props.dataKey,
    (val) => {
        arrayData = useArrayData(val, { ...props });
        store = arrayData.store;
    }
);

onMounted(() => {
    const params = store.userParams;
    if (params && params.search) {
        searchText.value = params.search;
    }
});

async function search() {
    arrayData.resetPagination();

    let filter = { params: { search: searchText.value } };

    if (!props.searchRemoveParams || !searchText.value) {
        filter = {
            params: {
                ...store.userParams,
                search: searchText.value,
            },
            filter: store.filter,
        };
    } else {
        arrayData.reset(['currentFilter', 'userParams']);
    }

    if (props.whereFilter) {
        filter.filter = {
            where: props.whereFilter(searchText.value),
        };
        delete filter.params.search;
    }
    await arrayData.applyFilter(filter);
    searchText.value = undefined;
}
</script>
<template>
    <Teleport to="#searchbar" v-if="state.isHeaderMounted()">
        <QForm @submit="search" id="searchbarForm">
            <RouterLink
                :to="to"
                @click="
                    !$event.shiftKey && !$event.ctrlKey && search();
                    $refs.input.focus();
                "
            >
                <QIcon
                    v-if="!quasar.platform.is.mobile"
                    class="cursor-pointer"
                    name="search"
                    size="sm"
                >
                    <QTooltip>{{ t('link') }}</QTooltip>
                </QIcon>
            </RouterLink>
            <VnInput
                id="searchbar"
                ref="input"
                v-model.trim="searchText"
                :placeholder="t(props.label)"
                dense
                autofocus
                data-cy="vn-searchbar"
                borderless
            >
                <template #append>
                    <QIcon
                        v-if="props.info && $q.screen.gt.xs"
                        name="info"
                        class="cursor-info"
                    >
                        <QTooltip>{{ t(props.info) }}</QTooltip>
                    </QIcon>
                </template>
            </VnInput>
        </QForm>
    </Teleport>
</template>

<style lang="scss" scoped>
@media screen and (min-width: $breakpoint-sm-max) {
    .q-field {
        width: 450px;
    }
}

.q-field {
    transition: width 0.36s;
}

:deep(.q-field__native) {
    padding-top: 10px;
    padding-left: 5px;
}

:deep(.q-field--dark .q-field__native:focus) {
    color: black;
}

:deep(.q-field--focused) {
    .q-icon {
        color: black;
    }
}

.cursor-info {
    cursor: help;
}

.q-form {
    display: flex;
    align-items: center;
    border-radius: 4px;
    padding: 0 5px;
    background-color: var(--vn-search-color);

    &:hover {
        background-color: var(--vn-search-color-hover);
    }
    &:focus-within {
        background-color: white;

        .q-icon {
            color: black;
        }
    }
}

.q-icon {
    color: var(--vn-label-color);
}
</style>
<i18n>
en:
    link: click to search, ctrl + click to open in a new tab, shift + click to open in a new window
es:
    link: clic para buscar, ctrl + clic para abrir en una nueva pestaña, shift + clic para abrir en una nueva ventana
</i18n>