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

<script setup>
import { onMounted, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useQuasar } from 'quasar';

import VnInput from 'src/components/common/VnInput.vue';

import { useArrayData } from 'composables/useArrayData';

const quasar = useQuasar();

const props = defineProps({
    dataKey: {
        type: String,
        required: true,
    },
    label: {
        type: String,
        required: false,
        default: 'Search',
    },
    info: {
        type: String,
        required: false,
        default: '',
    },
    redirect: {
        type: Boolean,
        required: false,
        default: true,
    },
    url: {
        type: String,
        default: '',
    },
    filter: {
        type: Object,
        default: null,
    },
    where: {
        type: Object,
        default: null,
    },
    order: {
        type: String,
        default: '',
    },
    limit: {
        type: Number,
        default: 10,
    },
    userParams: {
        type: Object,
        default: null,
    },
    staticParams: {
        type: Array,
        default: () => [],
    },
    exprBuilder: {
        type: Function,
        default: null,
    },
    customRouteRedirectName: {
        type: String,
        default: '',
    },
});

const router = useRouter();
const route = useRoute();
const arrayData = useArrayData(props.dataKey, { ...props });
const store = arrayData.store;
const searchText = ref('');

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

async function search() {
    const staticParams = Object.entries(store.userParams).filter(
        ([key, value]) => value && (props.staticParams || []).includes(key)
    );
    await arrayData.applyFilter({
        params: {
            ...Object.fromEntries(staticParams),
            search: searchText.value,
        },
    });
    if (!props.redirect) return;

    if (props.customRouteRedirectName) {
        router.push({
            name: props.customRouteRedirectName,
            params: { id: searchText.value },
        });
        return;
    }

    const { matched: matches } = route;
    const { path } = matches[matches.length - 1];
    const newRoute = path.replace(':id', searchText.value);
    await router.push(newRoute);
}
</script>

<template>
    <QForm @submit="search">
        <VnInput
            id="searchbar"
            v-model="searchText"
            :placeholder="props.label"
            dense
            standout
            autofocus
        >
            <template #prepend>
                <QIcon
                    v-if="!quasar.platform.is.mobile"
                    class="cursor-pointer"
                    name="search"
                    @click="search"
                />
            </template>
            <template #append>
                <QIcon
                    v-if="searchText !== ''"
                    name="close"
                    @click="searchText = ''"
                    class="cursor-pointer"
                />

                <QIcon
                    v-if="props.info && $q.screen.gt.xs"
                    name="info"
                    class="cursor-info"
                >
                    <QTooltip>{{ props.info }}</QTooltip>
                </QIcon>
            </template>
        </VnInput>
    </QForm>
</template>

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

.q-field {
    transition: width 0.36s;
}
</style>

<style lang="scss">
.cursor-info {
    cursor: help;
}
#searchbar {
    .q-field--standout.q-field--highlighted .q-field__control {
        background-color: white;
        color: black;
        .q-field__native,
        .q-icon {
            color: black !important;
        }
    }
}
</style>