From ac998d33aac91c6309623b8dcc9f64a77a55414b Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Thu, 23 Jan 2025 14:03:47 +0100
Subject: [PATCH] feat: refs #8409 added VnSelectSupplier

---
 src/components/ItemsFilterPanel.vue           | 12 +----
 src/components/common/VnSelectSupplier.vue    | 49 +++++++++++++++++++
 src/pages/Entry/Card/EntryBasicData.vue       | 21 ++------
 src/pages/Entry/EntryCreate.vue               | 29 ++---------
 src/pages/Entry/EntryFilter.vue               | 27 ++--------
 src/pages/Entry/EntryLatestBuysFilter.vue     | 34 ++-----------
 .../InvoiceIn/Card/InvoiceInBasicData.vue     | 24 ++-------
 src/pages/InvoiceIn/InvoiceInCreate.vue       | 22 ++-------
 src/pages/InvoiceIn/InvoiceInFilter.vue       | 22 ++-------
 src/pages/InvoiceIn/InvoiceInList.vue         | 21 +-------
 src/pages/Item/ItemListFilter.vue             | 27 ++--------
 .../Route/Card/RouteAutonomousFilter.vue      | 18 ++-----
 src/pages/Route/Roadmap/RoadmapBasicData.vue  | 30 ++----------
 src/pages/Route/Roadmap/RoadmapFilter.vue     | 30 ++----------
 src/pages/Travel/ExtraCommunityFilter.vue     | 26 ++--------
 15 files changed, 99 insertions(+), 293 deletions(-)
 create mode 100644 src/components/common/VnSelectSupplier.vue

diff --git a/src/components/ItemsFilterPanel.vue b/src/components/ItemsFilterPanel.vue
index 084feb377..946a5f11e 100644
--- a/src/components/ItemsFilterPanel.vue
+++ b/src/components/ItemsFilterPanel.vue
@@ -31,7 +31,6 @@ const props = defineProps({
 const route = useRoute();
 
 const itemTypesOptions = ref([]);
-const suppliersOptions = ref([]);
 const tagOptions = ref([]);
 const tagValues = ref([]);
 const categoryList = ref(null);
@@ -40,13 +39,13 @@ const selectedTypeFk = ref(getParamWhere(route.query.table, 'typeFk', false));
 
 const selectedCategory = computed(() => {
     return (categoryList.value || []).find(
-        (category) => category?.id === selectedCategoryFk.value
+        (category) => category?.id === selectedCategoryFk.value,
     );
 });
 
 const selectedType = computed(() => {
     return (itemTypesOptions.value || []).find(
-        (type) => type?.id === selectedTypeFk.value
+        (type) => type?.id === selectedTypeFk.value,
     );
 });
 
@@ -134,13 +133,6 @@ const setCategoryList = (data) => {
 
 <template>
     <FetchData url="ItemCategories" limit="30" auto-load @on-fetch="setCategoryList" />
-    <FetchData
-        url="Suppliers"
-        limit="30"
-        auto-load
-        :filter="{ fields: ['id', 'name', 'nickname'], order: 'name ASC', limit: 30 }"
-        @on-fetch="(data) => (suppliersOptions = data)"
-    />
     <FetchData
         url="Tags"
         :filter="{ fields: ['id', 'name', 'isFree'] }"
diff --git a/src/components/common/VnSelectSupplier.vue b/src/components/common/VnSelectSupplier.vue
new file mode 100644
index 000000000..3a4572f52
--- /dev/null
+++ b/src/components/common/VnSelectSupplier.vue
@@ -0,0 +1,49 @@
+<script setup>
+import { computed } from 'vue';
+import VnSelect from 'components/common/VnSelect.vue';
+
+const emit = defineEmits(['update:modelValue']);
+const $props = defineProps({
+    modelValue: {
+        type: [String, Number, Object],
+        default: null,
+    },
+});
+const url = 'Suppliers';
+const value = computed({
+    get() {
+        return $props.modelValue;
+    },
+    set(val) {
+        emit('update:modelValue', val);
+    },
+});
+</script>
+
+<template>
+    <VnSelect
+        :label="$t('globals.supplier')"
+        v-bind="$attrs"
+        v-model="value"
+        :url="url"
+        option-value="id"
+        option-label="nickname"
+        :fields="['id', 'name', 'nickname', 'nif']"
+        sort-by="name ASC"
+    >
+        <template #option="scope">
+            <QItem v-bind="scope.itemProps">
+                <QItemSection>
+                    <QItemLabel>
+                        {{ scope.opt?.name }}
+                    </QItemLabel>
+                    <QItemLabel caption>
+                        {{
+                            `#${scope.opt?.id} , ${scope.opt?.nickname} (${scope.opt?.nif})`
+                        }}
+                    </QItemLabel>
+                </QItemSection>
+            </QItem>
+        </template>
+    </VnSelect>
+</template>
diff --git a/src/pages/Entry/Card/EntryBasicData.vue b/src/pages/Entry/Card/EntryBasicData.vue
index 68d666fc0..689eea686 100644
--- a/src/pages/Entry/Card/EntryBasicData.vue
+++ b/src/pages/Entry/Card/EntryBasicData.vue
@@ -12,6 +12,7 @@ import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import FilterTravelForm from 'src/components/FilterTravelForm.vue';
 import VnInputNumber from 'src/components/common/VnInputNumber.vue';
 import { toDate } from 'src/filters';
+import VnSelectSupplier from 'src/components/common/VnSelectSupplier.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -51,28 +52,12 @@ const onFilterTravelSelected = (formData, id) => {
     >
         <template #form="{ data }">
             <VnRow>
-                <VnSelect
-                    :label="t('globals.supplier')"
+                <VnSelectSupplier
                     v-model="data.supplierFk"
-                    url="Suppliers"
-                    option-value="id"
-                    option-label="nickname"
-                    :fields="['id', 'nickname']"
                     hide-selected
                     :required="true"
                     map-options
-                >
-                    <template #option="scope">
-                        <QItem v-bind="scope.itemProps">
-                            <QItemSection>
-                                <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
-                                <QItemLabel caption>
-                                    {{ scope.opt?.nickname }}, {{ scope.opt?.id }}
-                                </QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                    </template>
-                </VnSelect>
+                />
                 <VnSelectDialog
                     :label="t('entry.basicData.travel')"
                     v-model="data.travelFk"
diff --git a/src/pages/Entry/EntryCreate.vue b/src/pages/Entry/EntryCreate.vue
index 1e8490158..358f7631c 100644
--- a/src/pages/Entry/EntryCreate.vue
+++ b/src/pages/Entry/EntryCreate.vue
@@ -13,6 +13,7 @@ import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import { useStateStore } from 'stores/useStateStore';
 import { useState } from 'src/composables/useState';
 import { toDate } from 'src/filters';
+import VnSelectSupplier from 'src/components/common/VnSelectSupplier.vue';
 
 const state = useState();
 const { t } = useI18n();
@@ -26,7 +27,6 @@ const newEntryForm = reactive({
     travelFk: Number(route.query?.travelFk) || null,
     companyFk: user.value.companyFk || null,
 });
-const suppliersOptions = ref([]);
 const travelsOptions = ref([]);
 const companiesOptions = ref([]);
 
@@ -36,13 +36,6 @@ const redirectToEntryBasicData = (_, { id }) => {
 </script>
 
 <template>
-    <FetchData
-        url="Suppliers"
-        :filter="{ fields: ['id', 'nickname'] }"
-        order="nickname"
-        @on-fetch="(data) => (suppliersOptions = data)"
-        auto-load
-    />
     <FetchData
         url="Travels/filter"
         :filter="{ fields: ['id', 'warehouseInName'] }"
@@ -79,28 +72,13 @@ const redirectToEntryBasicData = (_, { id }) => {
         >
             <template #form="{ data, validate }">
                 <VnRow>
-                    <VnSelect
-                        :label="t('Supplier')"
+                    <VnSelectSupplier
                         class="full-width"
                         v-model="data.supplierFk"
-                        :options="suppliersOptions"
-                        option-value="id"
-                        option-label="nickname"
                         hide-selected
                         :required="true"
                         :rules="validate('entry.supplierFk')"
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{ scope.opt?.nickname }}</QItemLabel>
-                                    <QItemLabel caption>
-                                        #{{ scope.opt?.id }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelect>
+                    />
                 </VnRow>
                 <VnRow>
                     <VnSelect
@@ -152,7 +130,6 @@ const redirectToEntryBasicData = (_, { id }) => {
 
 <i18n>
     es:
-        Supplier: Proveedor
         Travel: Envío
         Company: Empresa
 </i18n>
diff --git a/src/pages/Entry/EntryFilter.vue b/src/pages/Entry/EntryFilter.vue
index bc8b40aaa..0f632c0ef 100644
--- a/src/pages/Entry/EntryFilter.vue
+++ b/src/pages/Entry/EntryFilter.vue
@@ -7,6 +7,7 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FetchData from 'components/FetchData.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnSelectSupplier from 'src/components/common/VnSelectSupplier.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -115,34 +116,14 @@ const companiesOptions = ref([]);
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelect
-                        :label="t('entryFilter.params.supplierFk')"
+                    <VnSelectSupplier
                         v-model="params.supplierFk"
                         @update:model-value="searchFn()"
-                        url="Suppliers"
-                        option-value="id"
-                        option-label="name"
-                        :fields="['id', 'name', 'nickname']"
-                        :filter-options="['id', 'name', 'nickname']"
-                        sort-by="nickname"
                         hide-selected
                         dense
                         outlined
                         rounded
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>
-                                        {{ scope.opt?.name}}
-                                    </QItemLabel>
-                                    <QItemLabel caption>
-                                        {{ `#${scope.opt?.id } , ${ scope.opt?.nickname}` }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelect>
+                    />
                 </QItemSection>
             </QItem>
             <QItem>
@@ -202,4 +183,4 @@ const companiesOptions = ref([]);
             </QItem>
         </template>
     </VnFilterPanel>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/pages/Entry/EntryLatestBuysFilter.vue b/src/pages/Entry/EntryLatestBuysFilter.vue
index 59dddce26..235f29dfb 100644
--- a/src/pages/Entry/EntryLatestBuysFilter.vue
+++ b/src/pages/Entry/EntryLatestBuysFilter.vue
@@ -7,6 +7,7 @@ import VnInputDate from 'src/components/common/VnInputDate.vue';
 import VnInput from 'components/common/VnInput.vue';
 import VnSelect from 'components/common/VnSelect.vue';
 import ItemsFilterPanel from 'src/components/ItemsFilterPanel.vue';
+import VnSelectSupplier from 'src/components/common/VnSelectSupplier.vue';
 
 const { t } = useI18n();
 
@@ -18,7 +19,6 @@ defineProps({
 });
 
 const itemTypeWorkersOptions = ref([]);
-const suppliersOptions = ref([]);
 const tagValues = ref([]);
 </script>
 
@@ -30,13 +30,6 @@ const tagValues = ref([]);
         :filter="{ fields: ['id', 'nickname'], order: 'nickname ASC', limit: 30 }"
         @on-fetch="(data) => (itemTypeWorkersOptions = data)"
     />
-    <FetchData
-        url="Suppliers"
-        limit="30"
-        auto-load
-        :filter="{ fields: ['id', 'name', 'nickname'], order: 'name ASC', limit: 30 }"
-        @on-fetch="(data) => (suppliersOptions = data)"
-    />
     <ItemsFilterPanel :data-key="dataKey" :custom-tags="['tags']">
         <template #body="{ params, searchFn }">
             <QItem class="q-my-md">
@@ -57,31 +50,14 @@ const tagValues = ref([]);
             </QItem>
             <QItem class="q-my-md">
                 <QItemSection>
-                    <VnSelect
-                        :label="t('globals.params.supplierFk')"
+                    <VnSelectSupplier
                         v-model="params.supplierFk"
-                        :options="suppliersOptions"
-                        option-value="id"
-                        option-label="name"
+                        @update:model-value="searchFn()"
+                        hide-selected
                         dense
                         outlined
                         rounded
-                        use-input
-                        @update:model-value="searchFn()"
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>
-                                        {{ scope.opt?.name}}
-                                    </QItemLabel>
-                                    <QItemLabel caption>
-                                        {{ `#${scope.opt?.id } , ${ scope.opt?.nickname}` }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelect>
+                    />
                 </QItemSection>
             </QItem>
             <QItem class="q-my-md">
diff --git a/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue b/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
index 90aa50af7..5acffad56 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
@@ -13,6 +13,7 @@ import VnInput from 'src/components/common/VnInput.vue';
 import VnDms from 'src/components/common/VnDms.vue';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
 import axios from 'axios';
+import VnSelectSupplier from 'src/components/common/VnSelectSupplier.vue';
 
 const { t } = useI18n();
 
@@ -115,27 +116,12 @@ function deleteFile(dmsFk) {
     >
         <template #form="{ data }">
             <VnRow>
-                <VnSelect
-                    :required="true"
-                    :label="t('supplierFk')"
+                <VnSelectSupplier
                     v-model="data.supplierFk"
-                    option-value="id"
-                    option-label="nickname"
-                    url="Suppliers"
-                    :fields="['id', 'nickname']"
-                    sort-by="nickname"
+                    hide-selected
                     :is-clearable="false"
-                >
-                    <template #option="scope">
-                        <QItem v-bind="scope.itemProps">
-                            <QItemSection>
-                                <QItemLabel>{{
-                                    `${scope.opt.id} - ${scope.opt.nickname}`
-                                }}</QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                    </template>
-                </VnSelect>
+                    :required="true"
+                />
                 <VnInput
                     clearable
                     clear-icon="close"
diff --git a/src/pages/InvoiceIn/InvoiceInCreate.vue b/src/pages/InvoiceIn/InvoiceInCreate.vue
index f180410aa..78087ec94 100644
--- a/src/pages/InvoiceIn/InvoiceInCreate.vue
+++ b/src/pages/InvoiceIn/InvoiceInCreate.vue
@@ -12,6 +12,7 @@ import { useStateStore } from 'stores/useStateStore';
 import { useState } from 'src/composables/useState';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import VnInput from 'src/components/common/VnInput.vue';
+import VnSelectSupplier from 'src/components/common/VnSelectSupplier.vue';
 
 const state = useState();
 const { t } = useI18n();
@@ -60,28 +61,12 @@ const redirectToInvoiceInBasicData = (__, { id }) => {
         >
             <template #form="{ data, validate }">
                 <VnRow>
-                    <VnSelect
-                        url="Suppliers"
-                        :fields="['id', 'nickname']"
-                        :label="t('Supplier')"
+                    <VnSelectSupplier
                         v-model="data.supplierFk"
-                        option-value="id"
-                        option-label="nickname"
                         hide-selected
                         :required="true"
                         :rules="validate('entry.supplierFk')"
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{ scope.opt?.nickname }}</QItemLabel>
-                                    <QItemLabel caption>
-                                        #{{ scope.opt?.id }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelect>
+                    />
                     <VnInput
                         :label="t('invoicein.list.supplierRef')"
                         v-model="data.supplierRef"
@@ -111,7 +96,6 @@ const redirectToInvoiceInBasicData = (__, { id }) => {
 
 <i18n>
     es:
-        Supplier: Proveedor
         Travel: Envío
         Company: Empresa
 </i18n>
diff --git a/src/pages/InvoiceIn/InvoiceInFilter.vue b/src/pages/InvoiceIn/InvoiceInFilter.vue
index 31a611936..4dce464bd 100644
--- a/src/pages/InvoiceIn/InvoiceInFilter.vue
+++ b/src/pages/InvoiceIn/InvoiceInFilter.vue
@@ -6,6 +6,7 @@ import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInputNumber from 'src/components/common/VnInputNumber.vue';
 import { dateRange } from 'src/filters';
 import { date } from 'quasar';
+import VnSelectSupplier from 'src/components/common/VnSelectSupplier.vue';
 
 defineProps({ dataKey: { type: String, required: true } });
 const dateFormat = 'YYYY-MM-DDTHH:mm:ss.SSSZ';
@@ -65,29 +66,12 @@ function handleDaysAgo(params, daysAgo) {
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelect
+                    <VnSelectSupplier
                         v-model="params.supplierFk"
-                        url="Suppliers"
-                        :fields="['id', 'nickname', 'name']"
-                        :label="getLocale('supplierFk')"
-                        option-label="nickname"
                         dense
                         outlined
                         rounded
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>
-                                        {{ scope.opt?.name}}
-                                    </QItemLabel>
-                                    <QItemLabel caption>
-                                        {{ `#${scope.opt?.id } , ${ scope.opt?.nickname}` }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelect>
+                    />
                 </QItemSection>
             </QItem>
             <QItem>
diff --git a/src/pages/InvoiceIn/InvoiceInList.vue b/src/pages/InvoiceIn/InvoiceInList.vue
index 5e80ae652..08928de58 100644
--- a/src/pages/InvoiceIn/InvoiceInList.vue
+++ b/src/pages/InvoiceIn/InvoiceInList.vue
@@ -15,6 +15,7 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import FetchData from 'src/components/FetchData.vue';
+import VnSelectSupplier from 'src/components/common/VnSelectSupplier.vue';
 
 const user = useState().getUser();
 const { viewSummary } = useSummaryDialog();
@@ -162,25 +163,7 @@ const cols = computed(() => [
             </span>
         </template>
         <template #more-create-dialog="{ data }">
-            <VnSelect
-                v-model="data.supplierFk"
-                url="Suppliers"
-                :fields="['id', 'nickname', 'name']"
-                :label="t('globals.supplier')"
-                option-value="id"
-                option-label="nickname"
-                :filter-options="['id', 'name', 'nickname']"
-                :required="true"
-            >
-                <template #option="scope">
-                    <QItem v-bind="scope.itemProps">
-                        <QItemSection>
-                            <QItemLabel>{{ scope.opt?.nickname }}</QItemLabel>
-                            <QItemLabel caption> #{{ scope.opt?.id }}, {{  scope.opt?.name }} </QItemLabel>
-                        </QItemSection>
-                    </QItem>
-                </template>
-            </VnSelect>
+            <VnSelectSupplier v-model="data.supplierFk" hide-selected :required="true" />
             <VnInput
                 :label="t('invoicein.list.supplierRef')"
                 v-model="data.supplierRef"
diff --git a/src/pages/Item/ItemListFilter.vue b/src/pages/Item/ItemListFilter.vue
index a8349c935..a1557ecad 100644
--- a/src/pages/Item/ItemListFilter.vue
+++ b/src/pages/Item/ItemListFilter.vue
@@ -13,6 +13,7 @@ import { QCheckbox } from 'quasar';
 import { useArrayData } from 'composables/useArrayData';
 import { useValidator } from 'src/composables/useValidator';
 import axios from 'axios';
+import VnSelectSupplier from 'src/components/common/VnSelectSupplier.vue';
 
 const { t } = useI18n();
 
@@ -247,34 +248,14 @@ onMounted(async () => {
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelect
-                        :label="t('params.supplierFk')"
+                    <VnSelectSupplier
                         v-model="params.supplierFk"
                         @update:model-value="searchFn()"
-                        url="Suppliers"
-                        option-value="id"
-                        option-label="name"
-                        :fields="['id', 'name', 'nickname']"
-                        :filter-options="['id', 'name', 'nickname']"
-                        sort-by="name ASC"
                         hide-selected
                         dense
                         outlined
                         rounded
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>
-                                        {{ scope.opt?.name}}
-                                    </QItemLabel>
-                                    <QItemLabel caption>
-                                        {{ `#${scope.opt?.id } , ${ scope.opt?.nickname}` }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelect>
+                    />
                 </QItemSection>
             </QItem>
             <!-- Tags filter -->
@@ -369,7 +350,7 @@ onMounted(async () => {
                         :model-value="fieldFilter.selectedField"
                         :options="moreFields"
                         option-label="label"
-                        option-value="label"                        
+                        option-value="label"
                         dense
                         outlined
                         rounded
diff --git a/src/pages/Route/Card/RouteAutonomousFilter.vue b/src/pages/Route/Card/RouteAutonomousFilter.vue
index 0b807b7b3..37745594c 100644
--- a/src/pages/Route/Card/RouteAutonomousFilter.vue
+++ b/src/pages/Route/Card/RouteAutonomousFilter.vue
@@ -6,6 +6,7 @@ import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
 import VnSelect from 'components/common/VnSelect.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInput from 'components/common/VnInput.vue';
+import VnSelectSupplier from 'src/components/common/VnSelectSupplier.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -19,7 +20,6 @@ const emit = defineEmits(['search']);
 
 const agencyList = ref([]);
 const agencyAgreementList = ref([]);
-const supplierList = ref([]);
 
 const exprBuilder = (param, value) => {
     switch (param) {
@@ -58,14 +58,6 @@ const exprBuilder = (param, value) => {
         @on-fetch="(data) => (agencyAgreementList = data)"
         auto-load
     />
-    <FetchData
-        url="Suppliers"
-        :filter="{ fields: ['name'] }"
-        sort-by="name ASC"
-        limit="30"
-        @on-fetch="(data) => (supplierList = data)"
-        auto-load
-    />
     <VnFilterPanel
         :data-key="props.dataKey"
         :expr-builder="exprBuilder"
@@ -123,14 +115,12 @@ const exprBuilder = (param, value) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-my-sm" v-if="supplierList">
+                <QItem class="q-my-sm">
                     <QItemSection>
-                        <VnSelect
+                        <VnSelectSupplier
                             :label="t('Autonomous')"
                             v-model="params.supplierFk"
-                            :options="supplierList"
-                            option-value="name"
-                            option-label="name"
+                            hide-selected
                             dense
                             outlined
                             rounded
diff --git a/src/pages/Route/Roadmap/RoadmapBasicData.vue b/src/pages/Route/Roadmap/RoadmapBasicData.vue
index eeefaca2c..61d51fcb4 100644
--- a/src/pages/Route/Roadmap/RoadmapBasicData.vue
+++ b/src/pages/Route/Roadmap/RoadmapBasicData.vue
@@ -6,29 +6,18 @@ import FormModel from 'components/FormModel.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInput from 'components/common/VnInput.vue';
 import VnInputTime from 'components/common/VnInputTime.vue';
-import VnSelect from 'components/common/VnSelect.vue';
-import FetchData from 'components/FetchData.vue';
-import { ref } from 'vue';
+import VnSelectSupplier from 'src/components/common/VnSelectSupplier.vue';
 
 const { t } = useI18n();
 const router = useRouter();
 const route = useRoute();
 
-const supplierList = ref([]);
 const filter = { include: [{ relation: 'supplier' }] };
 const onSave = (data, response) => {
     router.push({ name: 'RoadmapSummary', params: { id: response?.id } });
 };
 </script>
 <template>
-    <FetchData
-        url="Suppliers"
-        auto-load
-        :filter="{ fields: ['id', 'nickname'] }"
-        sort-by="nickname"
-        limit="30"
-        @on-fetch="(data) => (supplierList = data)"
-    />
     <FormModel
         :url="`Roadmaps/${route.params?.id}`"
         observe-form-changes
@@ -56,27 +45,14 @@ const onSave = (data, response) => {
                 />
             </VnRow>
             <VnRow>
-                <VnSelect
+                <VnSelectSupplier
                     :label="t('Carrier')"
                     v-model="data.supplierFk"
-                    :options="supplierList"
-                    option-value="id"
-                    option-label="nickname"
                     emit-value
                     map-options
                     use-input
                     :input-debounce="0"
-                >
-                    <template #option="{ itemProps, opt }">
-                        <QItem v-bind="itemProps">
-                            <QItemSection>
-                                <QItemLabel
-                                    >{{ opt.id }} - {{ opt.nickname }}
-                                </QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                    </template>
-                </VnSelect>
+                />
                 <VnInput
                     v-model="data.price"
                     :label="t('Price')"
diff --git a/src/pages/Route/Roadmap/RoadmapFilter.vue b/src/pages/Route/Roadmap/RoadmapFilter.vue
index ecf8d39fc..3f0cb60de 100644
--- a/src/pages/Route/Roadmap/RoadmapFilter.vue
+++ b/src/pages/Route/Roadmap/RoadmapFilter.vue
@@ -3,9 +3,9 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
-import VnSelect from 'components/common/VnSelect.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInput from 'components/common/VnInput.vue';
+import VnSelectSupplier from 'src/components/common/VnSelectSupplier.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -17,7 +17,6 @@ const props = defineProps({
 
 const emit = defineEmits(['search']);
 
-const supplierList = ref([]);
 const exprBuilder = (param, value) => {
     switch (param) {
         case 'tractorPlate':
@@ -37,14 +36,6 @@ const exprBuilder = (param, value) => {
 </script>
 
 <template>
-    <FetchData
-        url="Suppliers"
-        :filter="{ fields: ['id', 'nickname'] }"
-        sort-by="nickname"
-        limit="30"
-        @on-fetch="(data) => (supplierList = data)"
-        auto-load
-    />
     <VnFilterPanel
         :data-key="props.dataKey"
         :search-button="true"
@@ -88,14 +79,11 @@ const exprBuilder = (param, value) => {
                     />
                 </QItemSection>
             </QItem>
-            <QItem v-if="supplierList" class="q-my-sm">
+            <QItem class="q-my-sm">
                 <QItemSection>
-                    <VnSelect
+                    <VnSelectSupplier
                         :label="t('Carrier')"
                         v-model="params.supplierFk"
-                        :options="supplierList"
-                        option-value="id"
-                        option-label="nickname"
                         dense
                         outlined
                         rounded
@@ -103,17 +91,7 @@ const exprBuilder = (param, value) => {
                         map-options
                         use-input
                         :input-debounce="0"
-                    >
-                        <template #option="{ itemProps, opt }">
-                            <QItem v-bind="itemProps">
-                                <QItemSection>
-                                    <QItemLabel
-                                        >{{ opt.id }} - {{ opt.nickname }}</QItemLabel
-                                    >
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelect>
+                    />
                 </QItemSection>
             </QItem>
             <QItem class="q-my-sm">
diff --git a/src/pages/Travel/ExtraCommunityFilter.vue b/src/pages/Travel/ExtraCommunityFilter.vue
index 273158a34..b903aeabf 100644
--- a/src/pages/Travel/ExtraCommunityFilter.vue
+++ b/src/pages/Travel/ExtraCommunityFilter.vue
@@ -8,6 +8,7 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import axios from 'axios';
+import VnSelectSupplier from 'src/components/common/VnSelectSupplier.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -48,11 +49,11 @@ const warehouses = async () => {
 
     continentsResponse.data.forEach((continent) => {
         const countriesInContinent = Object.keys(countryContinentMap).filter(
-            (countryId) => countryContinentMap[countryId] === continent.id.toString()
+            (countryId) => countryContinentMap[countryId] === continent.id.toString(),
         );
 
         warehousesByContinent.value[continent.code] = warehousesResponse.data.filter(
-            (warehouse) => countriesInContinent.includes(warehouse.countryFk.toString())
+            (warehouse) => countriesInContinent.includes(warehouse.countryFk.toString()),
         );
     });
 };
@@ -211,30 +212,13 @@ warehouses();
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelect
-                        :label="t('globals.pageTitles.supplier')"
+                    <VnSelectSupplier
                         v-model="params.cargoSupplierFk"
-                        url="Suppliers"
-                        option-value="id"
-                        option-label="name"
                         hide-selected
                         dense
                         outlined
                         rounded
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>
-                                        {{ scope.opt?.name}}
-                                    </QItemLabel>
-                                    <QItemLabel caption>
-                                        {{ `#${scope.opt?.id } , ${ scope.opt?.nickname}` }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelect>
+                    />
                 </QItemSection>
             </QItem>
             <QItem>