Merge branch 'dev' into 7679_improve_newPostcode_form

2024-10-16 12:07:26 +00:00 · 2024-10-16 12:07:26 +00:00 · 70ae50a5f1
parent 0fae36c239 3069ac27d0
commit 70ae50a5f1
26 changed files with 243 additions and 205 deletions
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
    "name": "salix-front",
-    "version": "24.42.0",
+    "version": "24.44.0",
    "description": "Salix frontend",
    "productName": "Salix",
    "author": "Verdnatura",
--- a/src/components/CreateBankEntityForm.vue
+++ b/src/components/CreateBankEntityForm.vue
@ -31,8 +31,8 @@ const countriesFilter = {

 const countriesOptions = ref([]);

-const onDataSaved = (formData, requestResponse) => {
-    emit('onDataSaved', formData, requestResponse);
+const onDataSaved = (...args) => {
+    emit('onDataSaved', ...args);
 };

 onMounted(async () => {
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@ -227,6 +227,8 @@ function nullishToTrue(value) {
 }

 const getVal = (val) => ($props.useLike ? { like: `%${val}%` } : val);
+
+defineExpose({ opts: myOptions });
 </script>

 <template>
--- a/src/components/ui/VnNotes.vue
+++ b/src/components/ui/VnNotes.vue
@ -1,6 +1,6 @@
 <script setup>
 import axios from 'axios';
-import { ref } from 'vue';
+import { ref, reactive } from 'vue';
 import { onBeforeRouteLeave } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
@ -12,36 +12,40 @@ import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnUserLink from 'components/ui/VnUserLink.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import VnAvatar from 'components/ui/VnAvatar.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelect from 'components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
+import VnInput from 'components/common/VnInput.vue';

 const $props = defineProps({
    url: { type: String, default: null },
    filter: { type: Object, default: () => {} },
    body: { type: Object, default: () => {} },
    addNote: { type: Boolean, default: false },
+    selectType: { type: Boolean, default: false },
 });

 const { t } = useI18n();
 const state = useState();
 const quasar = useQuasar();
 const currentUser = ref(state.getUser());
-const newNote = ref('');
+const newNote = reactive({ text: null, observationTypeFk: null });
+const observationTypes = ref([]);
 const vnPaginateRef = ref();
-function handleKeyUp(event) {
-    if (event.key === 'Enter') {
-        event.preventDefault();
-        if (!event.shiftKey) insert();
-    }
-}
+
 async function insert() {
+    if (!newNote.text || ($props.selectType && !newNote.observationTypeFk)) return;
+
    const body = $props.body;
-    const newBody = { ...body, ...{ text: newNote.value } };
+    const newBody = {
+        ...body,
+        ...{ text: newNote.text, observationTypeFk: newNote.observationTypeFk },
+    };
    await axios.post($props.url, newBody);
    await vnPaginateRef.value.fetch();
-    newNote.value = '';
 }
-
 onBeforeRouteLeave((to, from, next) => {
-    if (newNote.value)
+    if (newNote.text)
        quasar.dialog({
            component: VnConfirm,
            componentProps: {
@ -54,6 +58,13 @@ onBeforeRouteLeave((to, from, next) => {
 });
 </script>
 <template>
+    <FetchData
+        v-if="selectType"
+        url="ObservationTypes"
+        :filter="{ fields: ['id', 'description'] }"
+        auto-load
+        @on-fetch="(data) => (observationTypes = data)"
+    />
    <QCard class="q-pa-xs q-mb-xl full-width" v-if="$props.addNote">
        <QCardSection horizontal>
            <VnAvatar :worker-id="currentUser.id" size="md" />
@ -62,29 +73,42 @@ onBeforeRouteLeave((to, from, next) => {
                {{ t('globals.now') }}
            </div>
        </QCardSection>
-        <QCardSection class="q-pa-xs q-my-none q-py-none" horizontal>
-            <QInput
-                v-model="newNote"
-                class="full-width"
-                type="textarea"
-                :label="t('Add note here...')"
-                filled
-                size="lg"
-                autogrow
-                autofocus
-                @keyup="handleKeyUp"
-                clearable
-            >
-                <template #append>
-                    <QBtn
-                        :title="t('Save (Enter)')"
-                        icon="save"
-                        color="primary"
-                        flat
-                        @click="insert"
-                    />
-                </template>
-            </QInput>
+        <QCardSection class="q-px-xs q-my-none q-py-none">
+            <VnRow class="full-width">
+                <VnSelect
+                    :label="t('Observation type')"
+                    v-if="selectType"
+                    url="ObservationTypes"
+                    v-model="newNote.observationTypeFk"
+                    option-label="description"
+                    style="flex: 0.15"
+                    :required="true"
+                    @keyup.enter.stop="insert"
+                />
+                <VnInput
+                    v-model.trim="newNote.text"
+                    type="textarea"
+                    :label="t('Add note here...')"
+                    filled
+                    size="lg"
+                    autogrow
+                    @keyup.enter.stop="insert"
+                    clearable
+                    :required="true"
+                >
+                    <template #append>
+                        <QBtn
+                            :title="t('Save (Enter)')"
+                            icon="save"
+                            color="primary"
+                            flat
+                            @click="insert"
+                            class="q-mb-xs"
+                            dense
+                        />
+                    </template>
+                </VnInput>
+            </VnRow>
        </QCardSection>
    </QCard>
    <VnPaginate
@ -98,6 +122,10 @@ onBeforeRouteLeave((to, from, next) => {
        class="show"
        v-bind="$attrs"
        search-url="notes"
+        @on-fetch="
+            newNote.text = '';
+            newNote.observationTypeFk = null;
+        "
    >
        <template #body="{ rows }">
            <TransitionGroup name="list" tag="div" class="column items-center full-width">
@ -111,13 +139,28 @@ onBeforeRouteLeave((to, from, next) => {
                            :descriptor="false"
                            :worker-id="note.workerFk"
                            size="md"
+                            :title="note.worker?.user.nickname"
                        />
                        <div class="full-width row justify-between q-pa-xs">
-                            <VnUserLink
-                                :name="`${note.worker.user.nickname}`"
-                                :worker-id="note.worker.id"
-                            />
-                            {{ toDateHourMin(note.created) }}
+                            <div>
+                                <VnUserLink
+                                    :name="`${note.worker.user.nickname}`"
+                                    :worker-id="note.worker.id"
+                                />
+                                <QBadge
+                                    class="q-ml-xs"
+                                    outline
+                                    color="grey"
+                                    v-if="selectType && note.observationTypeFk"
+                                >
+                                    {{
+                                        observationTypes.find(
+                                            (ot) => ot.id === note.observationTypeFk
+                                        )?.description
+                                    }}
+                                </QBadge>
+                            </div>
+                            <span v-text="toDateHourMin(note.created)" />
                        </div>
                    </QCardSection>
                    <QCardSection class="q-pa-xs q-my-none q-py-none">
@ -131,12 +174,6 @@ onBeforeRouteLeave((to, from, next) => {
 <style lang="scss" scoped>
 .q-card {
    width: 90%;
-    @media (max-width: $breakpoint-sm) {
-        width: 100%;
-    }
-    &__section {
-        word-wrap: break-word;
-    }
 }
 .q-dialog .q-card {
    width: 400px;
@ -150,11 +187,28 @@ onBeforeRouteLeave((to, from, next) => {
    opacity: 0;
    background-color: $primary;
 }
+
+.vn-row > :nth-child(2) {
+    margin-left: 0;
+}
+
+@media (max-width: $breakpoint-xs) {
+    .vn-row > :deep(*) {
+        margin-left: 0;
+    }
+    .q-card {
+        width: 100%;
+
+        &__section {
+            padding: 0;
+        }
+    }
+}
 </style>
 <i18n>
    es:
        Add note here...: Añadir nota aquí...
        New note: Nueva nota
        Save (Enter): Guardar (Intro)
-
+        Observation type: Tipo de observación
 </i18n>
--- a/src/pages/Customer/Card/CustomerNotes.vue
+++ b/src/pages/Customer/Card/CustomerNotes.vue
@ -22,5 +22,6 @@ const noteFilter = computed(() => {
        :filter="noteFilter"
        :body="{ clientFk: route.params.id }"
        style="overflow-y: auto"
+        :select-type="true"
    />
 </template>
--- a/src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue
@ -25,19 +25,31 @@ const { notify } = useNotify();
 const { t } = useI18n();

 const newObservation = ref(null);
+const obsId = ref(null);

 const onSubmit = async () => {
    try {
-        const data = $props.clients.map((item) => {
-            return { clientFk: item.clientFk, text: newObservation.value };
-        });
-        await axios.post('ClientObservations', data);
+        if (!obsId.value)
+            obsId.value = (
+                await axios.get('ObservationTypes/findOne', {
+                    params: { filter: { where: { description: 'Finance' } } },
+                })
+            ).data?.id;

-        const payload = {
+        const bodyObs = $props.clients.map((item) => {
+            return {
+                clientFk: item.clientFk,
+                text: newObservation.value,
+                observationTypeFk: obsId.value,
+            };
+        });
+        await axios.post('ClientObservations', bodyObs);
+
+        const bodyObsMail = {
            defaulters: $props.clients,
            observation: newObservation.value,
        };
-        await axios.post('Defaulters/observationEmail', payload);
+        await axios.post('Defaulters/observationEmail', bodyObsMail);

        await $props.promise();

--- a/src/pages/Customer/components/CustomerAddressEdit.vue
+++ b/src/pages/Customer/components/CustomerAddressEdit.vue
@ -240,39 +240,33 @@ function handleLocation(data, location) {
                class="row q-gutter-md q-mb-md"
                v-for="(note, index) in notes"
            >
-                <div class="col">
-                    <VnSelect
-                        :label="t('Observation type')"
-                        :options="observationTypes"
-                        hide-selected
-                        option-label="description"
-                        option-value="id"
-                        v-model="note.observationTypeFk"
-                    />
-                </div>
-                <div class="col">
-                    <VnInput
-                        :label="t('Description')"
-                        :rules="validate('route.description')"
-                        clearable
-                        v-model="note.description"
-                    />
-                </div>
-                <div class="flex items-center">
-                    <QIcon
-                        @click.stop="deleteNote(note.id, index)"
-                        class="cursor-pointer"
-                        color="primary"
-                        name="delete"
-                        size="sm"
-                    >
-                        <QTooltip>
-                            {{ t('Remove note') }}
-                        </QTooltip>
-                    </QIcon>
-                </div>
+                <VnSelect
+                    :label="t('Observation type')"
+                    :options="observationTypes"
+                    hide-selected
+                    option-label="description"
+                    option-value="id"
+                    v-model="note.observationTypeFk"
+                />
+                <VnInput
+                    :label="t('Description')"
+                    :rules="validate('route.description')"
+                    clearable
+                    v-model="note.description"
+                />
+                <QIcon
+                    :style="{ flex: 0, 'align-self': $q.screen.gt.xs ? 'end' : 'center' }"
+                    @click.stop="deleteNote(note.id, index)"
+                    class="cursor-pointer"
+                    color="primary"
+                    name="delete"
+                    size="sm"
+                >
+                    <QTooltip>
+                        {{ t('Remove note') }}
+                    </QTooltip>
+                </QIcon>
            </VnRow>
-
            <QBtn
                @click.stop="addNote()"
                class="cursor-pointer add-icon q-mt-md"
--- a/src/pages/Department/Card/DepartmentBasicData.vue
+++ b/src/pages/Department/Card/DepartmentBasicData.vue
@ -1,9 +1,7 @@
 <script setup>
-import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';

-import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
@ -11,17 +9,8 @@ import VnSelect from 'src/components/common/VnSelect.vue';

 const route = useRoute();
 const { t } = useI18n();
-
-const workersOptions = ref([]);
-const clientsOptions = ref([]);
 </script>
 <template>
-    <FetchData
-        url="Workers/search"
-        @on-fetch="(data) => (workersOptions = data)"
-        auto-load
-    />
-    <FetchData url="Clients" @on-fetch="(data) => (clientsOptions = data)" auto-load />
    <FormModel
        :url="`Departments/${route.params.id}`"
        model="department"
@ -62,7 +51,7 @@ const clientsOptions = ref([]);
                <VnSelect
                    :label="t('department.bossDepartment')"
                    v-model="data.workerFk"
-                    :options="workersOptions"
+                    url="Workers/search"
                    option-value="id"
                    option-label="name"
                    hide-selected
@ -72,7 +61,7 @@ const clientsOptions = ref([]);
                <VnSelect
                    :label="t('department.selfConsumptionCustomer')"
                    v-model="data.clientFk"
-                    :options="clientsOptions"
+                    url="Clients"
                    option-value="id"
                    option-label="name"
                    hide-selected
--- a/src/pages/InvoiceOut/InvoiceOutFilter.vue
+++ b/src/pages/InvoiceOut/InvoiceOutFilter.vue
@ -15,25 +15,10 @@ const props = defineProps({
        required: true,
    },
 });
-
-const workers = ref();
-const workersCopy = ref();
 const states = ref();
-
-function setWorkers(data) {
-    workers.value = data;
-    workersCopy.value = data;
-}
 </script>
-
 <template>
    <FetchData url="ClaimStates" @on-fetch="(data) => (states = data)" auto-load />
-    <FetchData
-        url="Workers/activeWithInheritedRole"
-        :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="setWorkers"
-        auto-load
-    />
    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
        <template #tags="{ tag, formatFn }">
            <div class="q-gutter-x-xs">
--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/src/pages/InvoiceOut/InvoiceOutList.vue
@ -13,6 +13,8 @@ import { toCurrency, toDate } from 'src/filters/index';
 import { useStateStore } from 'stores/useStateStore';
 import { QBtn } from 'quasar';
 import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import InvoiceOutFilter from './InvoiceOutFilter.vue';

 const { t } = useI18n();
 const stateStore = useStateStore();
@ -182,6 +184,11 @@ watchEffect(selectedRows);
        :label="t('searchInvoice')"
        data-key="invoiceOut"
    />
+    <RightMenu>
+        <template #right-panel>
+            <InvoiceOutFilter data-key="invoiceOut" />
+        </template>
+    </RightMenu>
    <VnSubToolbar>
        <template #st-actions>
            <QBtn
@ -206,6 +213,7 @@ watchEffect(selectedRows);
                active: true,
            },
        }"
+        :right-search="false"
        v-model:selected="selectedRows"
        order="id DESC"
        :columns="columns"
--- a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
+++ b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
@ -170,7 +170,6 @@ const downloadCSV = async () => {
                }
            }
        "
-        :limit="0"
        :columns="columns"
        auto-load
        :is-editable="false"
--- a/src/pages/Item/ItemTypeCreate.vue
+++ b/src/pages/Item/ItemTypeCreate.vue
@ -15,7 +15,6 @@ const router = useRouter();

 const newItemTypeForm = reactive({});

-const workersOptions = ref([]);
 const categoriesOptions = ref([]);
 const temperaturesOptions = ref([]);

@ -25,12 +24,6 @@ const redirectToItemTypeBasicData = (_, { id }) => {
 </script>

 <template>
-    <FetchData
-        url="Workers"
-        @on-fetch="(data) => (workersOptions = data)"
-        :filter="{ order: 'firstName ASC', fields: ['id', 'firstName'] }"
-        auto-load
-    />
    <FetchData
        url="ItemCategories"
        @on-fetch="(data) => (categoriesOptions = data)"
@ -61,7 +54,9 @@ const redirectToItemTypeBasicData = (_, { id }) => {
                    <VnSelect
                        v-model="data.workerFk"
                        :label="t('itemType.shared.worker')"
-                        :options="workersOptions"
+                        url="Workers"
+                        sort-by="firstName ASC"
+                        :fields="['id', 'firstName']"
                        option-value="id"
                        option-label="firstName"
                        hide-selected
--- a/src/pages/ItemType/Card/ItemTypeBasicData.vue
+++ b/src/pages/ItemType/Card/ItemTypeBasicData.vue
@ -12,17 +12,10 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 const route = useRoute();
 const { t } = useI18n();

-const workersOptions = ref([]);
 const categoriesOptions = ref([]);
 const temperaturesOptions = ref([]);
 </script>
 <template>
-    <FetchData
-        url="Workers"
-        @on-fetch="(data) => (workersOptions = data)"
-        :filter="{ order: 'firstName ASC', fields: ['id', 'firstName'] }"
-        auto-load
-    />
    <FetchData
        url="ItemCategories"
        @on-fetch="(data) => (categoriesOptions = data)"
@ -50,7 +43,9 @@ const temperaturesOptions = ref([]);
                <VnSelect
                    v-model="data.workerFk"
                    :label="t('shared.worker')"
-                    :options="workersOptions"
+                    url="Workers"
+                    sort-by="firstName ASC"
+                    :fields="['id', 'firstName']"
                    option-value="id"
                    option-label="firstName"
                    hide-selected
--- a/src/pages/Monitor/Ticket/MonitorTickets.vue
+++ b/src/pages/Monitor/Ticket/MonitorTickets.vue
@ -25,7 +25,11 @@ const stateOpts = ref([]);
 const zoneOpts = ref([]);
 const visibleColumns = ref([]);
 const { viewSummary } = useSummaryDialog();
-const [from, to] = dateRange(Date.vnNew());
+const from = Date.vnNew();
+from.setHours(0, 0, 0, 0);
+const to = new Date(from.getTime());
+to.setDate(to.getDate() + 1);
+to.setHours(23, 59, 59, 999);

 function exprBuilder(param, value) {
    switch (param) {
--- a/src/pages/Order/Card/OrderCreateDialog.vue
+++ b/src/pages/Order/Card/OrderCreateDialog.vue
@ -126,12 +126,6 @@ onMounted(async () => {
 </script>

 <template>
-    <FetchData
-        url="addresses"
-        @on-fetch="(data) => (clientOptions = data)"
-        :filter="{ fields: ['id', 'name', 'defaultAddressFk'], order: 'id' }"
-        auto-load
-    />
    <FormModelPopup
        url-create="Orders/new"
        :title="t('Create Order')"
@ -165,13 +159,16 @@ onMounted(async () => {
                    </template>
                </VnSelect>
                <VnSelect
+                    ref="addressRef"
                    :label="t('order.form.addressFk')"
                    v-model="data.addressId"
-                    :options="addressList"
+                    url="addresses"
+                    :fields="['id', 'nickname', 'defaultAddressFk', 'street', 'city']"
+                    sort-by="id"
                    option-value="id"
                    option-label="street"
                    hide-selected
-                    :disable="!addressList?.length"
+                    :disable="!$refs.addressRef?.length"
                >
                    <template #option="scope">
                        <QItem v-bind="scope.itemProps">
--- a/src/pages/Order/Card/OrderFilter.vue
+++ b/src/pages/Order/Card/OrderFilter.vue
@ -17,10 +17,6 @@ const props = defineProps({

 const agencyFilter = { fields: ['id', 'name'] };
 const agencyList = ref(null);
-const salesPersonFilter = {
-    fields: ['id', 'nickname'],
-};
-const salesPersonList = ref(null);
 const sourceList = ref([]);
 </script>

@ -32,14 +28,6 @@ const sourceList = ref([]);
        auto-load
        @on-fetch="(data) => (agencyList = data)"
    />
-    <FetchData
-        url="Workers/search"
-        :filter="salesPersonFilter"
-        sort-by="nickname ASC"
-        @on-fetch="(data) => (salesPersonList = data)"
-        :params="{ departmentCodes: ['VT'] }"
-        auto-load
-    />
    <FetchData
        url="Orders/getSourceValues"
        :filter="{ fields: ['value'] }"
--- a/src/pages/Shelving/Card/ShelvingFilter.vue
+++ b/src/pages/Shelving/Card/ShelvingFilter.vue
@ -1,7 +1,5 @@
 <script setup>
-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 'src/components/common/VnSelect.vue';

@ -14,22 +12,9 @@ const props = defineProps({
 });

 const emit = defineEmits(['search']);
-
-const workers = ref();
-
-function setWorkers(data) {
-    workers.value = data;
-}
 </script>

 <template>
-    <FetchData
-        url="Workers/activeWithInheritedRole"
-        :filter="{ where: { role: 'salesPerson' } }"
-        sort-by="firstName ASC"
-        @on-fetch="setWorkers"
-        auto-load
-    />
    <VnFilterPanel
        :data-key="props.dataKey"
        :search-button="true"
--- a/src/pages/Supplier/Card/SupplierAccounts.vue
+++ b/src/pages/Supplier/Card/SupplierAccounts.vue
@ -99,7 +99,11 @@ const setWireTransfer = async () => {
                    :key="index"
                    class="row q-gutter-md q-mb-md"
                >
-                    <VnInput :label="t('supplier.accounts.iban')" v-model="row.iban">
+                    <VnInput
+                        :label="t('supplier.accounts.iban')"
+                        v-model="row.iban"
+                        :required="true"
+                    >
                        <template #append>
                            <QIcon name="info" class="cursor-info">
                                <QTooltip>{{ t('components.iban_tooltip') }}</QTooltip>
@ -113,6 +117,7 @@ const setWireTransfer = async () => {
                        option-label="bic"
                        option-value="id"
                        hide-selected
+                        :required="true"
                        :roles-allowed-to-create="['financial']"
                    >
                        <template #form>
--- a/src/pages/Supplier/SupplierList.vue
+++ b/src/pages/Supplier/SupplierList.vue
@ -3,6 +3,8 @@ import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnTable from 'components/VnTable/VnTable.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import SupplierListFilter from './SupplierListFilter.vue';

 const { t } = useI18n();
 const tableRef = ref();
@ -93,6 +95,11 @@ const columns = computed(() => [

 <template>
    <VnSearchbar data-key="SuppliersList" :limit="20" :label="t('Search suppliers')" />
+    <RightMenu>
+        <template #right-panel>
+            <SupplierListFilter data-key="SuppliersList" />
+        </template>
+    </RightMenu>
    <VnTable
        ref="tableRef"
        data-key="SuppliersList"
@ -109,6 +116,7 @@ const columns = computed(() => [
                return data;
            },
        }"
+        :right-search="false"
        order="id ASC"
        :columns="columns"
        auto-load
--- a/src/pages/Ticket/TicketCreateDialog.vue
+++ b/src/pages/Ticket/TicketCreateDialog.vue
@ -27,7 +27,6 @@ const initialFormState = reactive({
    warehouseId: user.value.warehouseFk,
    landed: null,
 });
-const clientOptions = ref([]);
 const agenciesOptions = ref([]);
 const addressesOptions = ref([]);
 const warehousesOptions = ref([]);
@ -111,12 +110,6 @@ const redirectToTicketList = (_, { id }) => {
 </script>

 <template>
-    <FetchData
-        url="Clients"
-        @on-fetch="(data) => (clientOptions = data)"
-        :filter="{ fields: ['id', 'name', 'defaultAddressFk'], order: 'id' }"
-        auto-load
-    />
    <FetchData
        url="Warehouses"
        @on-fetch="(data) => (warehousesOptions = data)"
@ -137,7 +130,9 @@ const redirectToTicketList = (_, { id }) => {
                    <VnSelect
                        :label="t('ticket.create.client')"
                        v-model="data.clientId"
-                        :options="clientOptions"
+                        url="Clients"
+                        :fields="['id', 'name', 'defaultAddressFk']"
+                        sort-by="id"
                        option-value="id"
                        option-label="name"
                        hide-selected
--- a/src/pages/Ticket/TicketFilter.vue
+++ b/src/pages/Ticket/TicketFilter.vue
@ -6,6 +6,7 @@ import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';

 const { t } = useI18n();
 const props = defineProps({
@ -15,7 +16,6 @@ const props = defineProps({
    },
 });

-const workers = ref([]);
 const provinces = ref([]);
 const states = ref([]);
 const agencies = ref([]);
@ -27,12 +27,6 @@ const warehouses = ref([]);
    <FetchData url="States" @on-fetch="(data) => (states = data)" auto-load />
    <FetchData url="AgencyModes" @on-fetch="(data) => (agencies = data)" auto-load />
    <FetchData url="Warehouses" @on-fetch="(data) => (warehouses = data)" auto-load />
-    <FetchData
-        url="Workers/activeWithInheritedRole"
-        :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="(data) => (workers = data)"
-        auto-load
-    />
    <VnFilterPanel :data-key="props.dataKey" :search-button="true" search-url="table">
        <template #tags="{ tag, formatFn }">
            <div class="q-gutter-x-xs">
@ -66,23 +60,19 @@ const warehouses = ref([]);
                </QItemSection>
            </QItem>
            <QItem>
-                <QItemSection v-if="!workers">
-                    <QSkeleton type="QInput" class="full-width" />
-                </QItemSection>
-                <QItemSection v-if="workers">
-                    <QSelect
+                <QItemSection>
+                    <VnSelect
                        :label="t('Salesperson')"
                        v-model="params.salesPersonFk"
-                        :options="workers"
+                        url="Workers/activeWithInheritedRole"
+                        :where="{ role: 'salesPerson' }"
                        option-value="id"
-                        option-label="name"
-                        emit-value
-                        map-options
-                        use-input
+                        option-label="firstName"
+                        :use-like="false"
+                        sort-by="firstName ASC"
                        dense
                        outlined
                        rounded
-                        :input-debounce="0"
                    />
                </QItemSection>
            </QItem>
--- a/src/pages/Worker/Card/WorkerCalendarFilter.vue
+++ b/src/pages/Worker/Card/WorkerCalendarFilter.vue
@ -3,9 +3,11 @@ import WorkerEventLabel from 'pages/Worker/Card/WorkerEventLabel.vue';
 import FetchData from 'components/FetchData.vue';
 import { useI18n } from 'vue-i18n';
 import VnSelect from 'components/common/VnSelect.vue';
+import useNotify from 'src/composables/useNotify';
 import { useRoute } from 'vue-router';
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { toDateFormat } from '../../../filters/date';
+const { notify } = useNotify();

 const { t } = useI18n();
 const route = useRoute();
@ -33,6 +35,13 @@ const props = defineProps({
    },
 });

+watch(
+    () => props.contractHolidays,
+    (newValue) => {
+        checkHolidays(newValue);
+    },
+    { deep: true, immediate: true }
+);
 const emit = defineEmits(['update:businessFk', 'update:year', 'update:absenceType']);

 const selectedBusinessFk = computed({
@ -53,12 +62,22 @@ const selectedAbsenceType = computed({
    },
 });

-const generateYears = () => {
+function generateYears() {
    const now = Date.vnNew();
    const maxYear = now.getFullYear() + 1;

    return Array.from({ length: 5 }, (_, i) => String(maxYear - i)) || [];
-};
+}
+
+function checkHolidays(contractHolidays) {
+    if (!contractHolidays) return;
+    if (
+        contractHolidays.holidaysEnjoyed > contractHolidays.totalHolidays ||
+        contractHolidays.hoursEnjoyed > contractHolidays.totalHours
+    ) {
+        notify(t('Vacation days have been exceeded'), 'negative');
+    }
+}

 const absenceTypeList = ref([]);
 const contractList = ref([]);
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@ -29,6 +29,7 @@ const postcodesOptions = ref([]);

 const user = useState().getUser();
 const defaultPayMethod = ref();
+const bankEntitiesRef = ref();
 const columns = computed(() => [
    {
        align: 'left',
@ -118,6 +119,12 @@ onBeforeMount(async () => {
    ).data?.payMethodFk;
 });

+async function handleNewBankEntity(data, resp) {
+    await bankEntitiesRef.value.fetch();
+    data.bankEntityFk = resp.id;
+    bankEntitiesOptions.value.push(resp);
+}
+
 function handleLocation(data, location) {
    const { town, code, provinceFk, countryFk } = location ?? {};
    data.postcode = code;
@ -177,6 +184,7 @@ async function autofillBic(worker) {
        auto-load
    />
    <FetchData
+        ref="bankEntitiesRef"
        url="BankEntities"
        @on-fetch="(data) => (bankEntitiesOptions = data)"
        auto-load
@ -344,7 +352,9 @@ async function autofillBic(worker) {
                    >
                        <template #form>
                            <CreateBankEntityForm
-                                @on-data-saved="(data) => bankEntitiesOptions.push(data)"
+                                @on-data-saved="
+                                    (_, resp) => handleNewBankEntity(data, resp)
+                                "
                            />
                        </template>
                        <template #option="scope">
--- a/src/pages/Zone/ZoneDeliveryPanel.vue
+++ b/src/pages/Zone/ZoneDeliveryPanel.vue
@ -94,9 +94,9 @@ watch(
                url="Postcodes/location"
                :fields="['geoFk', 'code', 'townFk', 'countryFk']"
                sort-by="code, townFk"
-                option-value="code"
+                option-value="geoFk"
                option-label="code"
-                option-filter="code"
+                :filter-options="['code', 'geoFk']"
                hide-selected
                dense
                outlined
--- a/test/cypress/integration/claim/claimDevelopment.spec.js
+++ b/test/cypress/integration/claim/claimDevelopment.spec.js
@ -33,7 +33,8 @@ describe('ClaimDevelopment', () => {
        cy.saveCard();
    });

-    it('should add and remove new line', () => {
+    // TODO: #8112
+    xit('should add and remove new line', () => {
        cy.wait(['@workers', '@workers']);
        cy.addCard();

--- a/test/cypress/integration/claim/claimNotes.spec.js
+++ b/test/cypress/integration/claim/claimNotes.spec.js
@ -1,4 +1,6 @@
 describe('ClaimNotes', () => {
+    const saveBtn = '.q-field__append > .q-btn > .q-btn__content > .q-icon';
+    const firstNote = '.q-infinite-scroll :nth-child(1) > .q-card__section--vert';
    beforeEach(() => {
        cy.login('developer');
        cy.visit(`/#/claim/${2}/notes`);
@ -7,7 +9,7 @@ describe('ClaimNotes', () => {
    it('should add a new note', () => {
        const message = 'This is a new message.';
        cy.get('.q-textarea').type(message);
-        cy.get('.q-field__append > .q-btn > .q-btn__content > .q-icon').click(); //save
-        cy.get(':nth-child(1) > .q-card__section--vert').should('have.text', message);
+        cy.get(saveBtn).click();
+        cy.get(firstNote).should('have.text', message);
    });
 });