From 2b235e93e7d369e28fa627c0eb4119bff842e218 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Wed, 20 Nov 2024 11:25:17 +0100
Subject: [PATCH 1/8] feat: refs #8194 created VnSelectWorker component and use
 it in Lilium

---
 src/components/common/VnSelectWorker.vue      | 106 ++++++++++++++++++
 src/pages/Customer/Card/CustomerBasicData.vue |  29 ++---
 src/pages/Customer/CustomerFilter.vue         |  30 ++---
 src/pages/Customer/CustomerList.vue           |  39 ++-----
 .../Department/Card/DepartmentBasicData.vue   |  12 +-
 src/pages/Item/ItemRequestFilter.vue          |  30 ++---
 .../Monitor/Ticket/MonitorTicketFilter.vue    |  27 ++---
 src/pages/Order/Card/OrderFilter.vue          |  27 ++---
 src/pages/Route/Card/RouteFilter.vue          |  25 ++---
 src/pages/Route/Card/RouteForm.vue            |  28 ++---
 src/pages/Supplier/Card/SupplierBasicData.vue |  31 ++---
 .../Ticket/Card/TicketCreateTracking.vue      |  29 ++---
 src/pages/Worker/WorkerCreate.vue             |  25 ++---
 src/pages/Worker/WorkerList.vue               |  25 ++---
 14 files changed, 215 insertions(+), 248 deletions(-)
 create mode 100644 src/components/common/VnSelectWorker.vue

diff --git a/src/components/common/VnSelectWorker.vue b/src/components/common/VnSelectWorker.vue
new file mode 100644
index 000000000..26406b47a
--- /dev/null
+++ b/src/components/common/VnSelectWorker.vue
@@ -0,0 +1,106 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import VnSelect from 'components/common/VnSelect.vue';
+import VnAvatar from 'src/components/ui/VnAvatar.vue';
+
+const { t } = useI18n();
+const emit = defineEmits(['update:modelValue']);
+const $props = defineProps({
+    modelValue: {
+        type: [String, Number, Object],
+        default: null,
+    },
+    label: {
+        type: String,
+        required: true,
+    },
+    url: {
+        type: String,
+        required: true,
+    },
+    optionValue: {
+        type: String,
+        default: 'id',
+    },
+    optionLabel: {
+        type: String,
+        default: 'name',
+    },
+    fields: {
+        type: Array,
+        default: null,
+    },
+    params: {
+        type: Object,
+        default: null,
+    },
+    sortBy: {
+        type: String,
+        default: null,
+    },
+    exprBuilder: {
+        type: Function,
+        default: null,
+    },
+    hasAvatar: {
+        type: Boolean,
+        default: false,
+    },
+    hasInfo: {
+        type: Boolean,
+        default: false,
+    },
+    noOne: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const value = computed({
+    get() {
+        return $props.modelValue;
+    },
+    set(val) {
+        emit('update:modelValue', val);
+    },
+});
+</script>
+
+<template>
+    <VnSelect
+        :label="t($props.label)"
+        v-model="value"
+        :url="$props.url"
+        :option-value="$props.optionValue"
+        :option-label="$props.optionLabel"
+        :fields="$props.fields"
+        :params="$props.params"
+        :sort-by="$props.sortBy"
+        :expr-builder="$props.exprBuilder"
+        :no-one="$props.noOne"
+        hide-selected
+    >
+        <template #prepend v-if="hasAvatar">
+            <VnAvatar :worker-id="value" color="primary" :title="title" />
+        </template>
+        <template #append v-if="hasInfo">
+            <QIcon name="info" class="cursor-pointer">
+                <QTooltip>{{ t('Responsible for approving invoices') }}</QTooltip>
+            </QIcon>
+        </template>
+        <template #option="scope">
+            <QItem v-bind="scope.itemProps">
+                <QItemSection>
+                    <QItemLabel>
+                        {{ scope.opt.name }}
+                    </QItemLabel>
+                    <QItemLabel caption>
+                        {{ scope.opt.nickname }},
+                        {{ scope.opt.code }}
+                    </QItemLabel>
+                </QItemSection>
+            </QItem>
+        </template>
+    </VnSelect>
+</template>
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index a77d2f865..e7c03bf5c 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -9,6 +9,7 @@ import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnAvatar from 'src/components/ui/VnAvatar.vue';
+import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -103,17 +104,18 @@ const exprBuilder = (param, value) => {
                 />
             </VnRow>
             <VnRow>
-                <VnSelect
-                    url="Workers/search"
-                    v-model="data.salesPersonFk"
+                <VnSelectWorker
                     :label="t('customer.summary.salesPerson')"
+                    v-model="data.salesPersonFk"
+                    :url="'Workers/search'"
+                    :option-value="'id'"
+                    :option-label="'nickname'"
+                    :fields="['id', 'name', 'nickname']"
                     :params="{
                         departmentCodes: ['VT', 'shopping'],
                     }"
-                    :fields="['id', 'nickname']"
-                    sort-by="nickname ASC"
-                    option-label="nickname"
-                    option-value="id"
+                    :sort-by="'nickname ASC'"
+                    :has-avatar="true"
                     :rules="validate('client.salesPersonFk')"
                     :expr-builder="exprBuilder"
                     emit-value
@@ -126,18 +128,7 @@ const exprBuilder = (param, value) => {
                             :title="title"
                         />
                     </template>
-                    <template #option="scope">
-                        <QItem v-bind="scope.itemProps">
-                            <QItemSection>
-                                <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
-                                <QItemLabel caption
-                                    >{{ scope.opt?.nickname }},
-                                    {{ scope.opt?.code }}</QItemLabel
-                                >
-                            </QItemSection>
-                        </QItem>
-                    </template>
-                </VnSelect>
+                </VnSelectWorker>
                 <VnSelect
                     v-model="data.contactChannelFk"
                     :options="contactChannels"
diff --git a/src/pages/Customer/CustomerFilter.vue b/src/pages/Customer/CustomerFilter.vue
index 79d48a667..765a718cd 100644
--- a/src/pages/Customer/CustomerFilter.vue
+++ b/src/pages/Customer/CustomerFilter.vue
@@ -3,6 +3,7 @@ import { useI18n } from 'vue-i18n';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelect from 'components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
+import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
 
 const { t } = useI18n();
 defineProps({
@@ -65,19 +66,19 @@ const exprBuilder = (param, value) => {
             </QItem>
             <QItem class="q-mb-sm">
                 <QItemSection>
-                    <VnSelect
-                        url="Workers/search"
+                    <VnSelectWorker
+                        :label="t('Salesperson')"
+                        v-model="params.salesPersonFk"
+                        :url="'Workers/search'"
+                        :option-value="'id'"
+                        :option-label="'name'"
+                        :fields="['id', 'name', 'nickname']"
                         :params="{
                             departmentCodes: ['VT'],
                         }"
-                        auto-load
-                        :label="t('Salesperson')"
+                        :sort-by="'nickname ASC'"
                         :expr-builder="exprBuilder"
-                        v-model="params.salesPersonFk"
                         @update:model-value="searchFn()"
-                        option-value="id"
-                        option-label="name"
-                        sort-by="nickname ASC"
                         emit-value
                         map-options
                         use-input
@@ -86,18 +87,7 @@ const exprBuilder = (param, value) => {
                         outlined
                         rounded
                         :input-debounce="0"
-                    >
-                        <template #option="{ itemProps, opt }">
-                            <QItem v-bind="itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{ opt.name }}</QItemLabel>
-                                    <QItemLabel caption>
-                                        {{ opt.nickname }},{{ opt.code }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template></VnSelect
-                    >
+                    />
                 </QItemSection>
             </QItem>
             <QItem class="q-mb-sm">
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 3cb17332c..af73e6554 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -2,7 +2,6 @@
 import { ref, computed, markRaw } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import VnSelect from 'src/components/common/VnSelect.vue';
 import VnTable from 'components/VnTable/VnTable.vue';
 import VnLocation from 'src/components/common/VnLocation.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
@@ -12,6 +11,7 @@ import RightMenu from 'src/components/common/RightMenu.vue';
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 import { toDate } from 'src/filters';
 import CustomerFilter from './CustomerFilter.vue';
+import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
 
 const { t } = useI18n();
 const router = useRouter();
@@ -421,40 +421,21 @@ function handleLocation(data, location) {
         auto-load
     >
         <template #more-create-dialog="{ data }">
-            <VnSelect
-                url="Workers/search"
-                v-model="data.salesPersonFk"
+            <VnSelectWorker
                 :label="t('customer.summary.salesPerson')"
+                v-model="data.salesPersonFk"
+                :url="'Workers/search'"
+                :option-value="'id'"
+                :option-label="'nickname'"
+                :fields="['id', 'name', 'nickname']"
                 :params="{
                     departmentCodes: ['VT', 'shopping'],
                 }"
-                :fields="['id', 'nickname', 'code']"
-                sort-by="nickname ASC"
-                option-label="nickname"
-                option-value="id"
+                :sort-by="'nickname ASC'"
+                :has-avatar="true"
                 emit-value
                 auto-load
-            >
-                <template #prepend>
-                    <VnAvatar
-                        :worker-id="data.salesPersonFk"
-                        color="primary"
-                        :title="title"
-                    />
-                </template>
-                <template #option="scope">
-                    <QItem v-bind="scope.itemProps">
-                        <QItemSection>
-                            <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
-                            <QItemLabel caption
-                                >{{ scope.opt?.nickname }},
-                                {{ scope.opt?.code }}</QItemLabel
-                            >
-                        </QItemSection>
-                    </QItem>
-                </template>
-            </VnSelect>
-
+            />
             <VnLocation
                 :acls="[{ model: 'Province', props: '*', accessType: 'WRITE' }]"
                 v-model="data.location"
diff --git a/src/pages/Department/Card/DepartmentBasicData.vue b/src/pages/Department/Card/DepartmentBasicData.vue
index 07bccd971..314a9f2fe 100644
--- a/src/pages/Department/Card/DepartmentBasicData.vue
+++ b/src/pages/Department/Card/DepartmentBasicData.vue
@@ -6,6 +6,7 @@ import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
+import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -48,14 +49,13 @@ const { t } = useI18n();
                 />
             </VnRow>
             <VnRow>
-                <VnSelect
+                <VnSelectWorker
                     :label="t('department.bossDepartment')"
                     v-model="data.workerFk"
-                    url="Workers/search"
-                    option-value="id"
-                    option-label="name"
-                    hide-selected
-                    map-options
+                    :url="'Workers/search'"
+                    :option-value="'id'"
+                    :option-label="'name'"
+                    :fields="['id', 'name', 'nickname']"
                     :rules="validate('department.workerFk')"
                 />
                 <VnSelect
diff --git a/src/pages/Item/ItemRequestFilter.vue b/src/pages/Item/ItemRequestFilter.vue
index 64bc0e575..db9316277 100644
--- a/src/pages/Item/ItemRequestFilter.vue
+++ b/src/pages/Item/ItemRequestFilter.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 VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -145,33 +146,20 @@ const decrement = (paramsObj, key) => {
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelect
+                    <VnSelectWorker
                         :label="t('params.requesterFk')"
-                        v-model="params.requesterFk"
+                        v-model="params.requesterFkk"
+                        :url="'Workers/search'"
+                        :option-value="'id'"
+                        :option-label="'name'"
+                        :fields="['id', 'name', 'nickname']"
                         @update:model-value="searchFn()"
-                        url="Workers/search"
-                        :fields="['id', 'name']"
-                        order="name ASC"
+                        :sort-by="'name ASC'"
                         :params="{ departmentCodes: ['VT'] }"
-                        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?.nickname }},
-                                        {{ scope.opt?.code }}</QItemLabel
-                                    >
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelect>
+                    />
                 </QItemSection>
             </QItem>
             <QItem>
diff --git a/src/pages/Monitor/Ticket/MonitorTicketFilter.vue b/src/pages/Monitor/Ticket/MonitorTicketFilter.vue
index 57248d580..7f232426d 100644
--- a/src/pages/Monitor/Ticket/MonitorTicketFilter.vue
+++ b/src/pages/Monitor/Ticket/MonitorTicketFilter.vue
@@ -9,6 +9,7 @@ import VnInput from 'src/components/common/VnInput.vue';
 import VnInputNumber from 'src/components/common/VnInputNumber.vue';
 import FetchData from 'src/components/FetchData.vue';
 import { dateRange } from 'src/filters';
+import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
 
 defineProps({ dataKey: { type: String, required: true } });
 const { t, te } = useI18n();
@@ -108,33 +109,19 @@ const getLocale = (label) => {
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelect
+                    <VnSelectWorker
                         outlined
                         dense
                         rounded
                         :label="t('globals.params.salesPersonFk')"
                         v-model="params.salesPersonFk"
-                        url="Workers/search"
+                        :url="'Workers/search'"
+                        :option-value="'id'"
+                        :option-label="'name'"
+                        :fields="['id', 'name', 'nickname']"
                         :params="{ departmentCodes: ['VT'] }"
-                        is-outlined
-                        option-value="id"
-                        option-label="name"
                         :no-one="true"
-                    >
-                        <template #option="{ opt, itemProps }">
-                            <QItem v-bind="itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{ opt.name }}</QItemLabel>
-                                    <QItemLabel
-                                        v-if="opt.code"
-                                        class="text-grey text-caption"
-                                    >
-                                        {{ `${opt.nickname}, ${opt.code}` }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelect>
+                    />
                 </QItemSection>
             </QItem>
             <QItem>
diff --git a/src/pages/Order/Card/OrderFilter.vue b/src/pages/Order/Card/OrderFilter.vue
index 917369919..42359febe 100644
--- a/src/pages/Order/Card/OrderFilter.vue
+++ b/src/pages/Order/Card/OrderFilter.vue
@@ -6,6 +6,7 @@ import VnFilterPanel from 'src/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 VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -61,28 +62,18 @@ const sourceList = ref([]);
                     outlined
                     rounded
                 />
-                <VnSelect
-                    :label="t('salesPerson')"
+                <VnSelectWorker
+                    :label="t('globals.salesPerson')"
                     v-model="params.workerFk"
-                    url="Workers/search"
-                    :filter="{ departmentCodes: ['VT'] }"
-                    sort-by="nickname ASC"
-                    option-label="nickname"
+                    :url="'Workers/search'"
+                    :option-value="'id'"
+                    :option-label="'nickname'"
+                    :fields="['id', 'name', 'nickname']"
+                    :sort-by="'nickname ASC'"
                     dense
                     outlined
                     rounded
-                >
-                    <template #option="{ itemProps, opt }">
-                        <QItem v-bind="itemProps">
-                            <QItemSection>
-                                <QItemLabel>{{ opt.name }}</QItemLabel>
-                                <QItemLabel caption>
-                                    {{ opt.nickname }},{{ opt.code }}
-                                </QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                    </template>
-                </VnSelect>
+                />
                 <VnInputDate
                     v-model="params.from"
                     :label="t('fromLanded')"
diff --git a/src/pages/Route/Card/RouteFilter.vue b/src/pages/Route/Card/RouteFilter.vue
index a6cd149f1..94e4570a3 100644
--- a/src/pages/Route/Card/RouteFilter.vue
+++ b/src/pages/Route/Card/RouteFilter.vue
@@ -4,6 +4,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 VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -31,29 +32,19 @@ const emit = defineEmits(['search']);
         <template #body="{ params }">
             <QItem class="q-my-sm">
                 <QItemSection>
-                    <VnSelect
+                    <VnSelectWorker
                         :label="t('Worker')"
                         v-model="params.workerFk"
-                        url="Workers/search"
-                        sort-by="nickname ASC"
-                        option-value="id"
-                        option-label="nickname"
+                        :url="'Workers/search'"
+                        :option-value="'id'"
+                        :option-label="'nickname'"
+                        :fields="['id', 'name', 'nickname']"
+                        :sort-by="'nickname ASC'"
                         dense
                         outlined
                         rounded
                         :input-debounce="0"
-                    >
-                        <template #option="{ itemProps, opt }">
-                            <QItem v-bind="itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{ opt.name }}</QItemLabel>
-                                    <QItemLabel caption>
-                                        {{ opt.nickname }},{{ opt.code }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelect>
+                    />
                 </QItemSection>
             </QItem>
             <QItem class="q-my-sm">
diff --git a/src/pages/Route/Card/RouteForm.vue b/src/pages/Route/Card/RouteForm.vue
index 8c89718fa..dfbfdc788 100644
--- a/src/pages/Route/Card/RouteForm.vue
+++ b/src/pages/Route/Card/RouteForm.vue
@@ -11,6 +11,7 @@ import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInput from 'components/common/VnInput.vue';
 import axios from 'axios';
 import VnInputTime from 'components/common/VnInputTime.vue';
+import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -94,26 +95,15 @@ const onSave = (data, response) => {
     >
         <template #form="{ data }">
             <VnRow>
-                <VnSelect
-                    :label="t('Worker')"
+                <VnSelectWorker
+                    :label="t('worker')"
                     v-model="data.workerFk"
-                    url="Workers/search"
-                    sort-by="nickname ASC"
-                    option-value="id"
-                    option-label="nickname"
-                    :input-debounce="0"
-                >
-                    <template #option="{ itemProps, opt }">
-                        <QItem v-bind="itemProps">
-                            <QItemSection>
-                                <QItemLabel>{{ opt.name }}</QItemLabel>
-                                <QItemLabel caption>
-                                    {{ opt.nickname }}, {{ opt.code }}
-                                </QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                    </template>
-                </VnSelect>
+                    :url="'Workers/search'"
+                    :option-value="'id'"
+                    :option-label="'nickname'"
+                    :fields="['id', 'name', 'nickname']"
+                    :sort-by="'nickname ASC'"
+                />
                 <VnSelect
                     :label="t('Vehicle')"
                     v-model="data.vehicleFk"
diff --git a/src/pages/Supplier/Card/SupplierBasicData.vue b/src/pages/Supplier/Card/SupplierBasicData.vue
index 70f6432dd..afd888c54 100644
--- a/src/pages/Supplier/Card/SupplierBasicData.vue
+++ b/src/pages/Supplier/Card/SupplierBasicData.vue
@@ -5,6 +5,7 @@ import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
+import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -30,31 +31,17 @@ const companySizes = [
                     :rules="validate('supplier.nickname')"
                     clearable
                 />
-                <VnSelect
+                <VnSelectWorker
                     :label="t('supplier.basicData.workerFk')"
                     v-model="data.workerFk"
-                    url="Workers/search"
-                    sort-by="nickname ASC"
+                    :url="'Workers/search'"
+                    :option-value="'id'"
+                    :option-label="'name'"
+                    :fields="['id', 'name', 'nickname']"
+                    :sort-by="'nickname ASC'"
+                    :has-info="true"
                     :rules="validate('supplier.workerFk')"
-                >
-                    <template #append>
-                        <QIcon name="info" class="cursor-pointer">
-                            <QTooltip>{{
-                                t('Responsible for approving invoices')
-                            }}</QTooltip>
-                        </QIcon>
-                    </template>
-                    <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>
+                />
                 <VnSelect
                     :label="t('supplier.basicData.size')"
                     v-model="data.companySize"
diff --git a/src/pages/Ticket/Card/TicketCreateTracking.vue b/src/pages/Ticket/Card/TicketCreateTracking.vue
index 3ea762c6c..afcc42653 100644
--- a/src/pages/Ticket/Card/TicketCreateTracking.vue
+++ b/src/pages/Ticket/Card/TicketCreateTracking.vue
@@ -9,6 +9,7 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import FetchData from 'components/FetchData.vue';
 
 import { useState } from 'src/composables/useState';
+import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
 
 const emit = defineEmits(['onRequestCreated']);
 
@@ -46,29 +47,15 @@ const onStateFkChange = (formData) => (formData.userFk = user.value.id);
                     option-label="name"
                     option-value="id"
                 />
-                <VnSelect
+                <VnSelectWorker
                     :label="t('expedition.worker')"
                     v-model="data.userFk"
-                    url="Workers/search"
-                    fields=" ['id', 'name']"
-                    sort-by="name ASC"
-                    hide-selected
-                    option-label="name"
-                    option-value="id"
-                >
-                    <template #option="{ opt, itemProps }">
-                        <QItem v-bind="itemProps">
-                            <QItemSection>
-                                <QItemLabel>
-                                    {{ opt.name }}
-                                </QItemLabel>
-                                <QItemLabel caption>
-                                    {{ opt.nickname }}, {{ opt.code }}
-                                </QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                    </template></VnSelect
-                >
+                    :url="'Workers/search'"
+                    :option-value="'id'"
+                    :option-label="'name'"
+                    :fields="['id', 'name', 'nickname']"
+                    :sort-by="'name ASC'"
+                />
             </VnRow>
         </template>
     </FormModelPopup>
diff --git a/src/pages/Worker/WorkerCreate.vue b/src/pages/Worker/WorkerCreate.vue
index 5676837dd..e9b6b2060 100644
--- a/src/pages/Worker/WorkerCreate.vue
+++ b/src/pages/Worker/WorkerCreate.vue
@@ -14,6 +14,7 @@ import FormModel from 'components/FormModel.vue';
 import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
 import VnRadio from 'src/components/common/VnRadio.vue';
 import { useState } from 'src/composables/useState';
+import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
 
 const { t } = useI18n();
 const user = useState().getUser();
@@ -149,27 +150,15 @@ async function autofillBic(worker) {
                         hide-selected
                         :rules="validate('Worker.company')"
                     />
-                    <VnSelect
+                    <VnSelectWorker
                         :label="t('worker.summary.boss')"
                         v-model="data.bossFk"
-                        url="Workers/search"
-                        option-value="id"
-                        option-label="name"
-                        hide-selected
+                        :url="'Workers/search'"
+                        :option-value="'id'"
+                        :option-label="'name'"
+                        :fields="['id', 'name', 'nickname']"
                         :rules="validate('Worker.boss')"
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{ scope.opt.name }}</QItemLabel>
-                                    <QItemLabel caption
-                                        >{{ scope.opt.nickname }},
-                                        {{ scope.opt.code }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelect>
+                    />
                 </VnRow>
                 <VnRow>
                     <VnInput
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
index 81b231710..d7ef805e4 100644
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@@ -15,6 +15,7 @@ import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
 import FetchData from 'src/components/FetchData.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
+import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
 import WorkerFilter from './WorkerFilter.vue';
 import { useState } from 'src/composables/useState';
 import axios from 'axios';
@@ -260,26 +261,14 @@ async function autofillBic(worker) {
                         option-label="code"
                         hide-selected
                     />
-                    <VnSelect
+                    <VnSelectWorker
                         :label="t('worker.summary.boss')"
                         v-model="data.bossFk"
-                        url="Workers/search"
-                        option-value="id"
-                        option-label="name"
-                        hide-selected
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{ scope.opt.name }}</QItemLabel>
-                                    <QItemLabel caption
-                                        >{{ scope.opt.nickname }},
-                                        {{ scope.opt.code }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelect>
+                        :url="'Workers/search'"
+                        :option-value="'id'"
+                        :option-label="'name'"
+                        :fields="['id', 'name', 'nickname']"
+                    />
                 </VnRow>
                 <VnRow>
                     <VnInput v-model="data.fi" :label="t('worker.create.fi')" />

From 1e1032b3da746e0ad3fa3728ad18d67b4d020e98 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Thu, 5 Dec 2024 11:00:40 +0100
Subject: [PATCH 2/8] refactor: refs #8194 structure changes in component and
 related files

---
 src/components/common/VnSelectWorker.vue      | 75 ++++++-------------
 src/pages/Customer/Card/CustomerBasicData.vue | 18 +----
 src/pages/Customer/CustomerFilter.vue         |  5 --
 src/pages/Customer/CustomerList.vue           |  7 +-
 .../Department/Card/DepartmentBasicData.vue   |  4 -
 src/pages/Item/ItemRequestFilter.vue          |  7 +-
 .../Monitor/Ticket/MonitorTicketFilter.vue    | 20 +++--
 src/pages/Order/Card/OrderFilter.vue          |  5 --
 src/pages/Route/Card/RouteFilter.vue          |  5 --
 src/pages/Route/Card/RouteForm.vue            | 10 +--
 src/pages/Supplier/Card/SupplierBasicData.vue |  5 --
 .../Ticket/Card/TicketCreateTracking.vue      | 10 +--
 src/pages/Worker/WorkerCreate.vue             |  4 -
 src/pages/Worker/WorkerList.vue               |  6 +-
 14 files changed, 44 insertions(+), 137 deletions(-)

diff --git a/src/components/common/VnSelectWorker.vue b/src/components/common/VnSelectWorker.vue
index 26406b47a..208e8924a 100644
--- a/src/components/common/VnSelectWorker.vue
+++ b/src/components/common/VnSelectWorker.vue
@@ -1,48 +1,10 @@
 <script setup>
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
 import VnSelect from 'components/common/VnSelect.vue';
 import VnAvatar from 'src/components/ui/VnAvatar.vue';
 
-const { t } = useI18n();
 const emit = defineEmits(['update:modelValue']);
 const $props = defineProps({
-    modelValue: {
-        type: [String, Number, Object],
-        default: null,
-    },
-    label: {
-        type: String,
-        required: true,
-    },
-    url: {
-        type: String,
-        required: true,
-    },
-    optionValue: {
-        type: String,
-        default: 'id',
-    },
-    optionLabel: {
-        type: String,
-        default: 'name',
-    },
-    fields: {
-        type: Array,
-        default: null,
-    },
-    params: {
-        type: Object,
-        default: null,
-    },
-    sortBy: {
-        type: String,
-        default: null,
-    },
-    exprBuilder: {
-        type: Function,
-        default: null,
-    },
     hasAvatar: {
         type: Boolean,
         default: false,
@@ -51,9 +13,13 @@ const $props = defineProps({
         type: Boolean,
         default: false,
     },
-    noOne: {
-        type: Boolean,
-        default: false,
+    modelValue: {
+        type: [String, Number, Object],
+        default: null,
+    },
+    params: {
+        type: Object,
+        default: null,
     },
 });
 
@@ -69,24 +35,27 @@ const value = computed({
 
 <template>
     <VnSelect
-        :label="t($props.label)"
+        v-bind="$attrs"
         v-model="value"
-        :url="$props.url"
-        :option-value="$props.optionValue"
-        :option-label="$props.optionLabel"
-        :fields="$props.fields"
+        :url="
+            $props.params
+                ? `Workers/search?departmentCodes=${JSON.stringify(
+                      $props.params.departmentCodes
+                  )}`
+                : 'Workers/search'
+        "
+        option-value="id"
+        option-label="nickname"
+        :fields="['id', 'name', 'nickname', 'code']"
+        sort-by="name ASC"
         :params="$props.params"
-        :sort-by="$props.sortBy"
-        :expr-builder="$props.exprBuilder"
-        :no-one="$props.noOne"
-        hide-selected
     >
-        <template #prepend v-if="hasAvatar">
+        <template #prepend v-if="$props.hasAvatar">
             <VnAvatar :worker-id="value" color="primary" :title="title" />
         </template>
-        <template #append v-if="hasInfo">
+        <template #append v-if="$props.hasInfo">
             <QIcon name="info" class="cursor-pointer">
-                <QTooltip>{{ t('Responsible for approving invoices') }}</QTooltip>
+                <QTooltip>{{ $t('Responsible for approving invoices') }}</QTooltip>
             </QIcon>
         </template>
         <template #option="scope">
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index e7c03bf5c..80e8f5b35 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -8,7 +8,6 @@ import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
-import VnAvatar from 'src/components/ui/VnAvatar.vue';
 import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
 
 const route = useRoute();
@@ -16,7 +15,6 @@ const { t } = useI18n();
 
 const businessTypes = ref([]);
 const contactChannels = ref([]);
-const title = ref();
 const handleSalesModelValue = (val) => ({
     or: [
         { id: val },
@@ -107,28 +105,14 @@ const exprBuilder = (param, value) => {
                 <VnSelectWorker
                     :label="t('customer.summary.salesPerson')"
                     v-model="data.salesPersonFk"
-                    :url="'Workers/search'"
-                    :option-value="'id'"
-                    :option-label="'nickname'"
-                    :fields="['id', 'name', 'nickname']"
                     :params="{
                         departmentCodes: ['VT', 'shopping'],
                     }"
-                    :sort-by="'nickname ASC'"
                     :has-avatar="true"
                     :rules="validate('client.salesPersonFk')"
                     :expr-builder="exprBuilder"
                     emit-value
-                    auto-load
-                >
-                    <template #prepend>
-                        <VnAvatar
-                            :worker-id="data.salesPersonFk"
-                            color="primary"
-                            :title="title"
-                        />
-                    </template>
-                </VnSelectWorker>
+                />
                 <VnSelect
                     v-model="data.contactChannelFk"
                     :options="contactChannels"
diff --git a/src/pages/Customer/CustomerFilter.vue b/src/pages/Customer/CustomerFilter.vue
index 765a718cd..2b74a659b 100644
--- a/src/pages/Customer/CustomerFilter.vue
+++ b/src/pages/Customer/CustomerFilter.vue
@@ -69,14 +69,9 @@ const exprBuilder = (param, value) => {
                     <VnSelectWorker
                         :label="t('Salesperson')"
                         v-model="params.salesPersonFk"
-                        :url="'Workers/search'"
-                        :option-value="'id'"
-                        :option-label="'name'"
-                        :fields="['id', 'name', 'nickname']"
                         :params="{
                             departmentCodes: ['VT'],
                         }"
-                        :sort-by="'nickname ASC'"
                         :expr-builder="exprBuilder"
                         @update:model-value="searchFn()"
                         emit-value
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index af73e6554..6d6599b9c 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -424,17 +424,14 @@ function handleLocation(data, location) {
             <VnSelectWorker
                 :label="t('customer.summary.salesPerson')"
                 v-model="data.salesPersonFk"
-                :url="'Workers/search'"
-                :option-value="'id'"
-                :option-label="'nickname'"
-                :fields="['id', 'name', 'nickname']"
                 :params="{
                     departmentCodes: ['VT', 'shopping'],
                 }"
-                :sort-by="'nickname ASC'"
                 :has-avatar="true"
+                :id-value="data.salesPersonFk"
                 emit-value
                 auto-load
+                option-label="nickname"
             />
             <VnLocation
                 :acls="[{ model: 'Province', props: '*', accessType: 'WRITE' }]"
diff --git a/src/pages/Department/Card/DepartmentBasicData.vue b/src/pages/Department/Card/DepartmentBasicData.vue
index 314a9f2fe..22ce06821 100644
--- a/src/pages/Department/Card/DepartmentBasicData.vue
+++ b/src/pages/Department/Card/DepartmentBasicData.vue
@@ -52,10 +52,6 @@ const { t } = useI18n();
                 <VnSelectWorker
                     :label="t('department.bossDepartment')"
                     v-model="data.workerFk"
-                    :url="'Workers/search'"
-                    :option-value="'id'"
-                    :option-label="'name'"
-                    :fields="['id', 'name', 'nickname']"
                     :rules="validate('department.workerFk')"
                 />
                 <VnSelect
diff --git a/src/pages/Item/ItemRequestFilter.vue b/src/pages/Item/ItemRequestFilter.vue
index db9316277..83758fd79 100644
--- a/src/pages/Item/ItemRequestFilter.vue
+++ b/src/pages/Item/ItemRequestFilter.vue
@@ -148,13 +148,8 @@ const decrement = (paramsObj, key) => {
                 <QItemSection>
                     <VnSelectWorker
                         :label="t('params.requesterFk')"
-                        v-model="params.requesterFkk"
-                        :url="'Workers/search'"
-                        :option-value="'id'"
-                        :option-label="'name'"
-                        :fields="['id', 'name', 'nickname']"
+                        v-model="params.requesterFk"
                         @update:model-value="searchFn()"
-                        :sort-by="'name ASC'"
                         :params="{ departmentCodes: ['VT'] }"
                         dense
                         outlined
diff --git a/src/pages/Monitor/Ticket/MonitorTicketFilter.vue b/src/pages/Monitor/Ticket/MonitorTicketFilter.vue
index 7f232426d..3d8fd1174 100644
--- a/src/pages/Monitor/Ticket/MonitorTicketFilter.vue
+++ b/src/pages/Monitor/Ticket/MonitorTicketFilter.vue
@@ -115,13 +115,23 @@ const getLocale = (label) => {
                         rounded
                         :label="t('globals.params.salesPersonFk')"
                         v-model="params.salesPersonFk"
-                        :url="'Workers/search'"
-                        :option-value="'id'"
-                        :option-label="'name'"
-                        :fields="['id', 'name', 'nickname']"
                         :params="{ departmentCodes: ['VT'] }"
                         :no-one="true"
-                    />
+                    >
+                        <template #option="{ opt, itemProps }">
+                            <QItem v-bind="itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{ opt.name }}</QItemLabel>
+                                    <QItemLabel
+                                        v-if="opt.code"
+                                        class="text-grey text-caption"
+                                    >
+                                        {{ `${opt.nickname}, ${opt.code}` }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectWorker>
                 </QItemSection>
             </QItem>
             <QItem>
diff --git a/src/pages/Order/Card/OrderFilter.vue b/src/pages/Order/Card/OrderFilter.vue
index 42359febe..66de9eaa1 100644
--- a/src/pages/Order/Card/OrderFilter.vue
+++ b/src/pages/Order/Card/OrderFilter.vue
@@ -65,11 +65,6 @@ const sourceList = ref([]);
                 <VnSelectWorker
                     :label="t('globals.salesPerson')"
                     v-model="params.workerFk"
-                    :url="'Workers/search'"
-                    :option-value="'id'"
-                    :option-label="'nickname'"
-                    :fields="['id', 'name', 'nickname']"
-                    :sort-by="'nickname ASC'"
                     dense
                     outlined
                     rounded
diff --git a/src/pages/Route/Card/RouteFilter.vue b/src/pages/Route/Card/RouteFilter.vue
index 94e4570a3..2e429aba8 100644
--- a/src/pages/Route/Card/RouteFilter.vue
+++ b/src/pages/Route/Card/RouteFilter.vue
@@ -35,11 +35,6 @@ const emit = defineEmits(['search']);
                     <VnSelectWorker
                         :label="t('Worker')"
                         v-model="params.workerFk"
-                        :url="'Workers/search'"
-                        :option-value="'id'"
-                        :option-label="'nickname'"
-                        :fields="['id', 'name', 'nickname']"
-                        :sort-by="'nickname ASC'"
                         dense
                         outlined
                         rounded
diff --git a/src/pages/Route/Card/RouteForm.vue b/src/pages/Route/Card/RouteForm.vue
index dfbfdc788..f323ccc3b 100644
--- a/src/pages/Route/Card/RouteForm.vue
+++ b/src/pages/Route/Card/RouteForm.vue
@@ -95,15 +95,7 @@ const onSave = (data, response) => {
     >
         <template #form="{ data }">
             <VnRow>
-                <VnSelectWorker
-                    :label="t('worker')"
-                    v-model="data.workerFk"
-                    :url="'Workers/search'"
-                    :option-value="'id'"
-                    :option-label="'nickname'"
-                    :fields="['id', 'name', 'nickname']"
-                    :sort-by="'nickname ASC'"
-                />
+                <VnSelectWorker :label="t('worker')" v-model="data.workerFk" />
                 <VnSelect
                     :label="t('Vehicle')"
                     v-model="data.vehicleFk"
diff --git a/src/pages/Supplier/Card/SupplierBasicData.vue b/src/pages/Supplier/Card/SupplierBasicData.vue
index afd888c54..d74510eff 100644
--- a/src/pages/Supplier/Card/SupplierBasicData.vue
+++ b/src/pages/Supplier/Card/SupplierBasicData.vue
@@ -34,11 +34,6 @@ const companySizes = [
                 <VnSelectWorker
                     :label="t('supplier.basicData.workerFk')"
                     v-model="data.workerFk"
-                    :url="'Workers/search'"
-                    :option-value="'id'"
-                    :option-label="'name'"
-                    :fields="['id', 'name', 'nickname']"
-                    :sort-by="'nickname ASC'"
                     :has-info="true"
                     :rules="validate('supplier.workerFk')"
                 />
diff --git a/src/pages/Ticket/Card/TicketCreateTracking.vue b/src/pages/Ticket/Card/TicketCreateTracking.vue
index afcc42653..74fbfa4a8 100644
--- a/src/pages/Ticket/Card/TicketCreateTracking.vue
+++ b/src/pages/Ticket/Card/TicketCreateTracking.vue
@@ -47,15 +47,7 @@ const onStateFkChange = (formData) => (formData.userFk = user.value.id);
                     option-label="name"
                     option-value="id"
                 />
-                <VnSelectWorker
-                    :label="t('expedition.worker')"
-                    v-model="data.userFk"
-                    :url="'Workers/search'"
-                    :option-value="'id'"
-                    :option-label="'name'"
-                    :fields="['id', 'name', 'nickname']"
-                    :sort-by="'name ASC'"
-                />
+                <VnSelectWorker :label="t('expedition.worker')" v-model="data.userFk" />
             </VnRow>
         </template>
     </FormModelPopup>
diff --git a/src/pages/Worker/WorkerCreate.vue b/src/pages/Worker/WorkerCreate.vue
index e9b6b2060..a4c6c2a06 100644
--- a/src/pages/Worker/WorkerCreate.vue
+++ b/src/pages/Worker/WorkerCreate.vue
@@ -153,10 +153,6 @@ async function autofillBic(worker) {
                     <VnSelectWorker
                         :label="t('worker.summary.boss')"
                         v-model="data.bossFk"
-                        :url="'Workers/search'"
-                        :option-value="'id'"
-                        :option-label="'name'"
-                        :fields="['id', 'name', 'nickname']"
                         :rules="validate('Worker.boss')"
                     />
                 </VnRow>
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
index d7ef805e4..907d50298 100644
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@@ -15,10 +15,10 @@ import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
 import FetchData from 'src/components/FetchData.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
-import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
 import WorkerFilter from './WorkerFilter.vue';
 import { useState } from 'src/composables/useState';
 import axios from 'axios';
+import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
 
 const { t } = useI18n();
 const tableRef = ref();
@@ -264,10 +264,6 @@ async function autofillBic(worker) {
                     <VnSelectWorker
                         :label="t('worker.summary.boss')"
                         v-model="data.bossFk"
-                        :url="'Workers/search'"
-                        :option-value="'id'"
-                        :option-label="'name'"
-                        :fields="['id', 'name', 'nickname']"
                     />
                 </VnRow>
                 <VnRow>

From c7115f4781d73316b648859586395c95821af632 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Thu, 5 Dec 2024 11:14:15 +0100
Subject: [PATCH 3/8] refactor: refs #8194 moved translation to the correct
 place

---
 src/components/common/VnSelectWorker.vue      | 5 +++++
 src/pages/Supplier/Card/SupplierBasicData.vue | 1 -
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/common/VnSelectWorker.vue b/src/components/common/VnSelectWorker.vue
index 208e8924a..a6caeb300 100644
--- a/src/components/common/VnSelectWorker.vue
+++ b/src/components/common/VnSelectWorker.vue
@@ -73,3 +73,8 @@ const value = computed({
         </template>
     </VnSelect>
 </template>
+
+<i18n>
+es:
+    Responsible for approving invoices: Responsable de aprobar las facturas
+</i18n>
diff --git a/src/pages/Supplier/Card/SupplierBasicData.vue b/src/pages/Supplier/Card/SupplierBasicData.vue
index d74510eff..cc5f26e4b 100644
--- a/src/pages/Supplier/Card/SupplierBasicData.vue
+++ b/src/pages/Supplier/Card/SupplierBasicData.vue
@@ -84,6 +84,5 @@ const companySizes = [
 
 <i18n>
 es:
-    Responsible for approving invoices: Responsable de aprobar las facturas
     Small(1-5), Medium(6-50), Big(> 50): Pequeño(1-5), Mediano(6-50), Grande(> 50)
 </i18n>

From accf61517a2367ca0f09923b23f29d060784f96b Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Thu, 5 Dec 2024 13:31:39 +0100
Subject: [PATCH 4/8] refactor: refs #8194 requested changes

---
 src/components/common/VnSelectWorker.vue      | 24 ++++++++++++-------
 src/pages/Customer/CustomerList.vue           |  1 -
 src/pages/Item/ItemRequestFilter.vue          |  2 ++
 src/pages/Order/Card/OrderFilter.vue          |  3 +++
 src/pages/Route/Card/RouteFilter.vue          |  1 -
 src/pages/Route/Card/RouteForm.vue            |  2 +-
 src/pages/Supplier/Card/SupplierBasicData.vue |  2 +-
 .../Ticket/Card/TicketCreateTracking.vue      |  2 +-
 src/pages/Worker/WorkerList.vue               |  1 +
 9 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/components/common/VnSelectWorker.vue b/src/components/common/VnSelectWorker.vue
index a6caeb300..07288954a 100644
--- a/src/components/common/VnSelectWorker.vue
+++ b/src/components/common/VnSelectWorker.vue
@@ -31,23 +31,28 @@ const value = computed({
         emit('update:modelValue', val);
     },
 });
+const url = computed(() => {
+    let url = 'Workers/search';
+    const { departmentCodes } = $props.params ?? {};
+    if (!departmentCodes) return url;
+    const params = new URLSearchParams({
+        departmentCodes: JSON.stringify(departmentCodes),
+    });
+
+    return url.concat(`?${params.toString()}`);
+});
 </script>
 
 <template>
     <VnSelect
+        :label="$t('globals.worker')"
         v-bind="$attrs"
         v-model="value"
-        :url="
-            $props.params
-                ? `Workers/search?departmentCodes=${JSON.stringify(
-                      $props.params.departmentCodes
-                  )}`
-                : 'Workers/search'
-        "
+        :url="url"
         option-value="id"
         option-label="nickname"
         :fields="['id', 'name', 'nickname', 'code']"
-        sort-by="name ASC"
+        sort-by="nickname ASC"
         :params="$props.params"
     >
         <template #prepend v-if="$props.hasAvatar">
@@ -55,9 +60,10 @@ const value = computed({
         </template>
         <template #append v-if="$props.hasInfo">
             <QIcon name="info" class="cursor-pointer">
-                <QTooltip>{{ $t('Responsible for approving invoices') }}</QTooltip>
+                <QTooltip>{{ $t($props.hasInfo) }}</QTooltip>
             </QIcon>
         </template>
+        <slot name="more-options" />
         <template #option="scope">
             <QItem v-bind="scope.itemProps">
                 <QItemSection>
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 6d6599b9c..e86e35966 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -431,7 +431,6 @@ function handleLocation(data, location) {
                 :id-value="data.salesPersonFk"
                 emit-value
                 auto-load
-                option-label="nickname"
             />
             <VnLocation
                 :acls="[{ model: 'Province', props: '*', accessType: 'WRITE' }]"
diff --git a/src/pages/Item/ItemRequestFilter.vue b/src/pages/Item/ItemRequestFilter.vue
index 83758fd79..38dae75f0 100644
--- a/src/pages/Item/ItemRequestFilter.vue
+++ b/src/pages/Item/ItemRequestFilter.vue
@@ -150,7 +150,9 @@ const decrement = (paramsObj, key) => {
                         :label="t('params.requesterFk')"
                         v-model="params.requesterFk"
                         @update:model-value="searchFn()"
+                        :fields="['id', 'name']"
                         :params="{ departmentCodes: ['VT'] }"
+                        hide-selected
                         dense
                         outlined
                         rounded
diff --git a/src/pages/Order/Card/OrderFilter.vue b/src/pages/Order/Card/OrderFilter.vue
index 66de9eaa1..dc86600ac 100644
--- a/src/pages/Order/Card/OrderFilter.vue
+++ b/src/pages/Order/Card/OrderFilter.vue
@@ -65,6 +65,9 @@ const sourceList = ref([]);
                 <VnSelectWorker
                     :label="t('globals.salesPerson')"
                     v-model="params.workerFk"
+                    :params="{
+                        departmentCodes: ['VT'],
+                    }"
                     dense
                     outlined
                     rounded
diff --git a/src/pages/Route/Card/RouteFilter.vue b/src/pages/Route/Card/RouteFilter.vue
index 2e429aba8..6f65313d3 100644
--- a/src/pages/Route/Card/RouteFilter.vue
+++ b/src/pages/Route/Card/RouteFilter.vue
@@ -33,7 +33,6 @@ const emit = defineEmits(['search']);
             <QItem class="q-my-sm">
                 <QItemSection>
                     <VnSelectWorker
-                        :label="t('Worker')"
                         v-model="params.workerFk"
                         dense
                         outlined
diff --git a/src/pages/Route/Card/RouteForm.vue b/src/pages/Route/Card/RouteForm.vue
index f323ccc3b..aa5caf1ef 100644
--- a/src/pages/Route/Card/RouteForm.vue
+++ b/src/pages/Route/Card/RouteForm.vue
@@ -95,7 +95,7 @@ const onSave = (data, response) => {
     >
         <template #form="{ data }">
             <VnRow>
-                <VnSelectWorker :label="t('worker')" v-model="data.workerFk" />
+                <VnSelectWorker v-model="data.workerFk" />
                 <VnSelect
                     :label="t('Vehicle')"
                     v-model="data.vehicleFk"
diff --git a/src/pages/Supplier/Card/SupplierBasicData.vue b/src/pages/Supplier/Card/SupplierBasicData.vue
index cc5f26e4b..759608dca 100644
--- a/src/pages/Supplier/Card/SupplierBasicData.vue
+++ b/src/pages/Supplier/Card/SupplierBasicData.vue
@@ -34,7 +34,7 @@ const companySizes = [
                 <VnSelectWorker
                     :label="t('supplier.basicData.workerFk')"
                     v-model="data.workerFk"
-                    :has-info="true"
+                    has-info="Responsible for approving invoices"
                     :rules="validate('supplier.workerFk')"
                 />
                 <VnSelect
diff --git a/src/pages/Ticket/Card/TicketCreateTracking.vue b/src/pages/Ticket/Card/TicketCreateTracking.vue
index 74fbfa4a8..5c1e916f2 100644
--- a/src/pages/Ticket/Card/TicketCreateTracking.vue
+++ b/src/pages/Ticket/Card/TicketCreateTracking.vue
@@ -47,7 +47,7 @@ const onStateFkChange = (formData) => (formData.userFk = user.value.id);
                     option-label="name"
                     option-value="id"
                 />
-                <VnSelectWorker :label="t('expedition.worker')" v-model="data.userFk" />
+                <VnSelectWorker v-model="data.userFk" :fields="['id', 'name']" />
             </VnRow>
         </template>
     </FormModelPopup>
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
index 907d50298..bd1c27938 100644
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@@ -361,6 +361,7 @@ async function autofillBic(worker) {
 
 <i18n>
 es:
+    Create worker: Crear trabajador
     Search worker: Buscar trabajador
     You can search by worker id or name: Puedes buscar por id o nombre del trabajador
 </i18n>

From 6c05347219744dbd9758bfc4484be736ea9e5402 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Thu, 5 Dec 2024 13:45:18 +0100
Subject: [PATCH 5/8] refactor: refs #8194 modified select worker to allow no
 one filter from monitor ticket

---
 src/components/common/VnSelectWorker.vue         | 11 ++++++++++-
 src/pages/Monitor/Ticket/MonitorTicketFilter.vue | 13 -------------
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/components/common/VnSelectWorker.vue b/src/components/common/VnSelectWorker.vue
index 07288954a..a564a7605 100644
--- a/src/components/common/VnSelectWorker.vue
+++ b/src/components/common/VnSelectWorker.vue
@@ -21,6 +21,10 @@ const $props = defineProps({
         type: Object,
         default: null,
     },
+    noOne: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const value = computed({
@@ -54,6 +58,7 @@ const url = computed(() => {
         :fields="['id', 'name', 'nickname', 'code']"
         sort-by="nickname ASC"
         :params="$props.params"
+        :no-one="$props.noOne"
     >
         <template #prepend v-if="$props.hasAvatar">
             <VnAvatar :worker-id="value" color="primary" :title="title" />
@@ -69,8 +74,12 @@ const url = computed(() => {
                 <QItemSection>
                     <QItemLabel>
                         {{ scope.opt.name }}
+                        {{ console.log('scope.opt: ', scope.opt) }}
                     </QItemLabel>
-                    <QItemLabel caption>
+                    <QItemLabel v-if="!scope.opt.id">
+                        {{ scope.opt.nickname }}
+                    </QItemLabel>
+                    <QItemLabel caption v-if="scope.opt.id">
                         {{ scope.opt.nickname }},
                         {{ scope.opt.code }}
                     </QItemLabel>
diff --git a/src/pages/Monitor/Ticket/MonitorTicketFilter.vue b/src/pages/Monitor/Ticket/MonitorTicketFilter.vue
index e6318c0ed..8377d73ef 100644
--- a/src/pages/Monitor/Ticket/MonitorTicketFilter.vue
+++ b/src/pages/Monitor/Ticket/MonitorTicketFilter.vue
@@ -122,19 +122,6 @@ const getLocale = (label) => {
                         :params="{ departmentCodes: ['VT'] }"
                         :no-one="true"
                     >
-                        <template #option="{ opt, itemProps }">
-                            <QItem v-bind="itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{ opt.name }}</QItemLabel>
-                                    <QItemLabel
-                                        v-if="opt.code"
-                                        class="text-grey text-caption"
-                                    >
-                                        {{ `${opt.nickname}, ${opt.code}` }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
                     </VnSelectWorker>
                 </QItemSection>
             </QItem>

From cf522684d6651f9980c513efca9dfb98d3d05aaa Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Thu, 5 Dec 2024 14:00:45 +0100
Subject: [PATCH 6/8] refactor: refs #8194 deleted unnecessary label

---
 src/pages/Supplier/Card/SupplierBasicData.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/Supplier/Card/SupplierBasicData.vue b/src/pages/Supplier/Card/SupplierBasicData.vue
index 759608dca..842109656 100644
--- a/src/pages/Supplier/Card/SupplierBasicData.vue
+++ b/src/pages/Supplier/Card/SupplierBasicData.vue
@@ -32,7 +32,6 @@ const companySizes = [
                     clearable
                 />
                 <VnSelectWorker
-                    :label="t('supplier.basicData.workerFk')"
                     v-model="data.workerFk"
                     has-info="Responsible for approving invoices"
                     :rules="validate('supplier.workerFk')"

From 96920dd540950ec289e956e042ea9807a2a0998e Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Thu, 5 Dec 2024 14:13:31 +0100
Subject: [PATCH 7/8] refactor: refs #8194 modified select worker template

---
 src/components/common/VnSelectWorker.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/common/VnSelectWorker.vue b/src/components/common/VnSelectWorker.vue
index a564a7605..67a1bcab1 100644
--- a/src/components/common/VnSelectWorker.vue
+++ b/src/components/common/VnSelectWorker.vue
@@ -68,20 +68,17 @@ const url = computed(() => {
                 <QTooltip>{{ $t($props.hasInfo) }}</QTooltip>
             </QIcon>
         </template>
-        <slot name="more-options" />
         <template #option="scope">
             <QItem v-bind="scope.itemProps">
                 <QItemSection>
                     <QItemLabel>
                         {{ scope.opt.name }}
-                        {{ console.log('scope.opt: ', scope.opt) }}
                     </QItemLabel>
                     <QItemLabel v-if="!scope.opt.id">
                         {{ scope.opt.nickname }}
                     </QItemLabel>
-                    <QItemLabel caption v-if="scope.opt.id">
-                        {{ scope.opt.nickname }},
-                        {{ scope.opt.code }}
+                    <QItemLabel caption v-else>
+                        {{ scope.opt.nickname }}, {{ scope.opt.code }}
                     </QItemLabel>
                 </QItemSection>
             </QItem>

From fea161d5c2fdd7981233a05b4d9348af3f6ed69e Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Thu, 5 Dec 2024 14:19:58 +0100
Subject: [PATCH 8/8] perf: refs #8194 select worker component

---
 src/components/common/VnSelectWorker.vue | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/components/common/VnSelectWorker.vue b/src/components/common/VnSelectWorker.vue
index 67a1bcab1..b0fef4443 100644
--- a/src/components/common/VnSelectWorker.vue
+++ b/src/components/common/VnSelectWorker.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, useAttrs } from 'vue';
 import VnSelect from 'components/common/VnSelect.vue';
 import VnAvatar from 'src/components/ui/VnAvatar.vue';
 
@@ -17,16 +17,10 @@ const $props = defineProps({
         type: [String, Number, Object],
         default: null,
     },
-    params: {
-        type: Object,
-        default: null,
-    },
-    noOne: {
-        type: Boolean,
-        default: false,
-    },
 });
 
+const $attrs = useAttrs();
+
 const value = computed({
     get() {
         return $props.modelValue;
@@ -35,9 +29,10 @@ const value = computed({
         emit('update:modelValue', val);
     },
 });
+
 const url = computed(() => {
     let url = 'Workers/search';
-    const { departmentCodes } = $props.params ?? {};
+    const { departmentCodes } = $attrs.params ?? {};
     if (!departmentCodes) return url;
     const params = new URLSearchParams({
         departmentCodes: JSON.stringify(departmentCodes),
@@ -57,8 +52,6 @@ const url = computed(() => {
         option-label="nickname"
         :fields="['id', 'name', 'nickname', 'code']"
         sort-by="nickname ASC"
-        :params="$props.params"
-        :no-one="$props.noOne"
     >
         <template #prepend v-if="$props.hasAvatar">
             <VnAvatar :worker-id="value" color="primary" :title="title" />