Merge branch 'dev' of https://gitea.verdnatura.es/hyervoni/salix-front-mindshore into feature/TravelSubmodules

.eslintrc.js

@@ -58,7 +58,7 @@ module.exports = {
     rules: {
         'prefer-promise-reject-errors': 'off',
         'no-unused-vars': 'warn',
-
+        "vue/no-multiple-template-root": "off" ,
         // allow debugger during development only
         'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     },

package.json

@@ -24,8 +24,7 @@
         "validator": "^13.9.0",
         "vue": "^3.3.4",
         "vue-i18n": "^9.2.2",
-        "vue-router": "^4.2.1",
+        "vue-router": "^4.2.1"
-        "vue-router-mock": "^0.2.0"
     },
     "devDependencies": {
         "@intlify/unplugin-vue-i18n": "^0.8.1",

src/components/FormModel.vue

@@ -177,13 +177,6 @@ watch(formUrl, async () => {
 });
 </script>
 <template>
-    <QBanner
-        v-if="$props.observeFormChanges && hasChanges"
-        class="text-white bg-warning full-width"
-    >
-        <QIcon name="warning" size="md" class="q-mr-md" />
-        <span>{{ t('globals.changesToSave') }}</span>
-    </QBanner>
     <div class="column items-center full-width">
         <QForm
             v-if="formData"

src/components/UserPanel.vue

@@ -1,19 +1,19 @@
 <script setup>
 import { onMounted, computed } from 'vue';
-import { Dark, Quasar, useQuasar } from 'quasar';
+import { Dark, Quasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import axios from 'axios';
 import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
-import { localeEquivalence } from "src/i18n/index";
+import { localeEquivalence } from 'src/i18n/index';
 
 const state = useState();
 const session = useSession();
 const router = useRouter();
 const { t, locale } = useI18n();
-const quasar = useQuasar();
+import { useClipboard } from 'src/composables/useClipboard';
-
+const { copyText } = useClipboard();
 const userLocale = computed({
     get() {
         return locale.value;
@@ -21,7 +21,7 @@ const userLocale = computed({
     set(value) {
         locale.value = value;
 
-        value = localeEquivalence[value] ?? value
+        value = localeEquivalence[value] ?? value;
 
         try {
             /* @vite-ignore */
@@ -81,12 +81,8 @@ function logout() {
     router.push('/login');
 }
 
-function copyUserToken(){
+function copyUserToken() {
-    navigator.clipboard.writeText(session.getToken());
+    copyText(session.getToken(), { label: 'components.userPanel.copyToken' });
-    quasar.notify({
-        type: 'positive',
-        message: t('components.userPanel.copyToken'),
-    });
 }
 </script>
 
@@ -129,7 +125,11 @@ function copyUserToken(){
                 <div class="text-subtitle1 q-mt-md">
                     <strong>{{ user.nickname }}</strong>
                 </div>
-                <div class="text-subtitle3 text-grey-7 q-mb-xs copyUserToken" @click="copyUserToken()" >@{{ user.name }}
+                <div
+                    class="text-subtitle3 text-grey-7 q-mb-xs copyText"
+                    @click="copyUserToken()"
+                >
+                    @{{ user.name }}
                 </div>
 
                 <QBtn
@@ -152,8 +152,8 @@ function copyUserToken(){
     width: 150px;
 }
 
-.copyUserToken {
+.copyText {
-   &:hover{
+    &:hover {
         cursor: alias;
     }
 }

src/components/common/VnLocation.vue

@@ -0,0 +1,135 @@
+<script setup>
+import { ref, toRefs, computed, watch, onMounted } from 'vue';
+import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
+import VnSelectCreate from 'components/common/VnSelectCreate.vue';
+import FetchData from 'components/FetchData.vue';
+const emit = defineEmits(['update:modelValue', 'update:options']);
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+const postcodesOptions = ref([]);
+const postcodesRef = ref(null);
+
+const $props = defineProps({
+    modelValue: {
+        type: [String, Number, Object],
+        default: null,
+    },
+    options: {
+        type: Array,
+        default: () => [],
+    },
+    optionLabel: {
+        type: String,
+        default: '',
+    },
+    optionValue: {
+        type: String,
+        default: '',
+    },
+    filterOptions: {
+        type: Array,
+        default: () => [],
+    },
+    isClearable: {
+        type: Boolean,
+        default: true,
+    },
+    defaultFilter: {
+        type: Boolean,
+        default: true,
+    },
+});
+
+const { options } = toRefs($props);
+const myOptions = ref([]);
+const myOptionsOriginal = ref([]);
+
+const value = computed({
+    get() {
+        return $props.modelValue;
+    },
+    set(value) {
+        emit('update:modelValue', value);
+    },
+});
+
+onMounted(() => {
+    locationFilter()
+});
+
+function setOptions(data) {
+    myOptions.value = JSON.parse(JSON.stringify(data));
+    myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
+}
+setOptions(options.value);
+
+watch(options, (newValue) => {
+    setOptions(newValue);
+});
+
+function showLabel(data) {
+       return `${data.code} - ${data.town}(${data.province}), ${data.country}`;
+}
+
+function locationFilter(search) {
+    let where = { search };
+    postcodesRef.value.fetch({filter:{ where}, limit: 30});
+}
+
+function handleFetch( data) {
+    postcodesOptions.value = data;
+}
+
+</script>
+<template>
+    <FetchData
+        ref="postcodesRef"
+        url="Postcodes/filter"
+        @on-fetch="(data) =>handleFetch(data)"
+    />
+    <VnSelectCreate
+        v-if="postcodesRef"
+        v-model="value"
+        :options="postcodesOptions"
+        :label="t('Location')"
+        :option-label="showLabel"
+        :placeholder="t('Search by postalCode, town, province or country')"
+        @input-value="locationFilter"
+        :default-filter="false"
+        :input-debounce="300"
+        :class="{ required: $attrs.required }"
+        v-bind="$attrs"
+        emit-value
+        map-options
+        use-input
+        clearable
+        hide-selected
+        fill-input
+    >
+        <template #form>
+            <CreateNewPostcode @on-data-saved="locationFilter()" />
+        </template>
+        <template #option="{itemProps, opt}">
+            <QItem v-bind="itemProps">
+                <QItemSection v-if="opt">
+                    <QItemLabel>{{ opt.code }}</QItemLabel>
+                    <QItemLabel caption>{{ showLabel(opt) }}</QItemLabel>
+                </QItemSection>
+            </QItem>
+        </template>
+    </VnSelectCreate>
+</template>
+<style lang="scss" scoped>
+.add-icon {
+    cursor: pointer;
+    background-color: $primary;
+    border-radius: 50px;
+}
+</style>
+
+<i18n>
+es:
+    Location: Ubicación
+    Search by postalcode, town, province or country: Buscar por código postal, ciudad o país
+</i18n>

src/components/common/VnLog.vue

@@ -168,17 +168,17 @@ function getLogTree(data) {
     let originLog = null;
     let userLog = null;
     let modelLog = null;
-    let prevLog;
     let nLogs;
 
-    data.forEach((log) => {
+    for (let i = 0; i < data.length; i++) {
+        let log = data[i];
+        let prevLog = i > 0 ? data[i - 1] : null;
         const locale = validations[log.changedModel]?.locale || {};
 
         // Origin
         const originChanged = !prevLog || log.originFk != prevLog.originFk;
         if (originChanged) {
             logs.push((originLog = { originFk: log.originFk, logs: [] }));
-            prevLog = log;
         }
         // User
         const userChanged = originChanged || log.userFk != prevLog.userFk;
@@ -197,6 +197,7 @@ function getLogTree(data) {
             log.changedModel != prevLog.changedModel ||
             log.changedModelId != prevLog.changedModelId ||
             nLogs >= 6;
+
         if (modelChanged) {
             userLog.logs.push(
                 (modelLog = {
@@ -221,7 +222,7 @@ function getLogTree(data) {
         propNames = [...new Set(propNames)];
 
         log.props = parseProps(propNames, locale, vals, olds);
-    });
+    }
     return logs;
 }
 
@@ -320,7 +321,6 @@ function selectFilter(type, dateType) {
     }
     if (type === 'action' && selectedFilters.value.changedModel === null) {
         selectedFilters.value.changedModel = undefined;
-        reload = false;
     }
     if (type === 'userRadio') {
         selectedFilters.value.userFk = userRadio.value;
@@ -415,18 +415,19 @@ setLogTree();
             <div class="line bg-grey"></div>
         </QItem>
         <div
-            class="user-log q-mb-sm row"
+            class="user-log q-mb-sm"
             v-for="(userLog, userIndex) in originLog.logs"
             :key="userIndex"
         >
             <div class="timeline">
                 <div class="user-avatar">
-                    <VnUserLink v-if="userLog.user.image" :worker-id="userLog.user.id">
+                    <VnUserLink :worker-id="userLog.user.id">
                         <template #link>
                             <VnAvatar
                                 :class="{ 'cursor-pointer': userLog.user.id }"
                                 :worker-id="userLog.user.id"
                                 :title="userLog.user.nickname"
+                                size="lg"
                             />
                         </template>
                     </VnUserLink>
@@ -665,7 +666,6 @@ setLogTree();
                         option-label="locale"
                         :options="actions"
                         @update:model-value="selectFilter('action')"
-                        @clear="() => selectFilter('action')"
                         hide-selected
                     />
                 </QItem>
@@ -823,14 +823,30 @@ setLogTree();
 .q-item {
     min-height: 0px;
 }
+.q-menu {
+    display: block;
 
+    & > .loading {
+        display: flex;
+        justify-content: center;
+    }
+    & > .q-card {
+        min-width: 180px;
+        max-width: 400px;
+
+        & > .header {
+            color: $dark;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+    }
+}
 .origin-log {
     &:first-child > .origin-info {
         margin-top: 0;
     }
     & > .origin-info {
-        width: 100%;
-        max-width: 42em;
         margin-top: 28px;
         gap: 6px;
 
@@ -847,14 +863,15 @@ setLogTree();
     }
 }
 .user-log {
+    display: flex;
     width: 100%;
     max-width: 40em;
-
     & > .timeline {
         position: relative;
-        padding-right: 5px;
+        padding-right: 1px;
-        width: 50px;
+        width: 38px;
         min-width: 38px;
+        flex-grow: auto;
         & > .arrow {
             height: 8px;
             width: 8px;
@@ -874,7 +891,7 @@ setLogTree();
             position: absolute;
             background-color: $primary;
             width: 2px;
-            left: 23px;
+            left: 19px;
             z-index: -1;
             top: 0;
             bottom: -8px;
@@ -893,6 +910,7 @@ setLogTree();
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
+        min-height: 22px;
         .model-value {
             font-style: italic;
         }
@@ -984,25 +1002,6 @@ setLogTree();
         }
     }
 }
-.q-menu {
-    display: block;
-
-    & > .loading {
-        display: flex;
-        justify-content: center;
-    }
-    & > .q-card {
-        min-width: 180px;
-        max-width: 400px;
-
-        & > .header {
-            color: $dark;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-        }
-    }
-}
 </style>
 <i18n>
 en:

src/components/common/VnSelectFilter.vue

@@ -12,11 +12,11 @@ const $props = defineProps({
         default: () => [],
     },
     optionLabel: {
-        type: String,
+        type: [String],
         default: '',
     },
     filterOptions: {
-        type: Array,
+        type: [Array],
         default: () => [],
     },
     isClearable: {
@@ -47,6 +47,7 @@ function setOptions(data) {
     myOptions.value = JSON.parse(JSON.stringify(data));
     myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
 }
+
 setOptions(options.value);
 const filter = (val, options) => {
     const search = val.toString().toLowerCase();

src/components/ui/VnAvatar.vue

@@ -1,19 +1,37 @@
 <script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
+import { useColor } from 'src/composables/useColor';
 
 const $props = defineProps({
     workerId: { type: Number, required: true },
     description: { type: String, default: null },
+    size: { type: String, default: null },
+    title: { type: String, default: null },
 });
 const session = useSession();
 const token = session.getToken();
+const { t } = useI18n();
+
+const title = computed(() => $props.title ?? t('globals.system'));
+const showLetter = ref(false);
 </script>
 <template>
     <div class="avatar-picture column items-center">
-        <QAvatar color="orange">
+        <QAvatar
+            :style="{
+                backgroundColor: useColor(title),
+            }"
+            :size="$props.size"
+            :title="title"
+        >
+            <template v-if="showLetter">{{ title.charAt(0) }}</template>
             <QImg
+                v-else
                 :src="`/api/Images/user/160x160/${$props.workerId}/download?access_token=${token}`"
                 spinner-color="white"
+                @error="showLetter = true"
             />
         </QAvatar>
         <div class="description">

src/components/ui/VnFilterPanel.vue

@@ -64,10 +64,12 @@ onMounted(() => {
 });
 
 const isLoading = ref(false);
-
 async function search() {
     isLoading.value = true;
     const params = { ...userParams.value };
+    store.userParamsChanged = true;
+    store.filter.skip = 0;
+    store.skip = 0;
     const { params: newParams } = await arrayData.addFilter({ params });
     userParams.value = newParams;
 
@@ -89,7 +91,9 @@ async function reload() {
 
 async function clearFilters() {
     isLoading.value = true;
-
+    store.userParamsChanged = true;
+    store.filter.skip = 0;
+    store.skip = 0;
     // Filtrar los params no removibles
     const removableFilters = Object.keys(userParams.value).filter((param) =>
         props.unremovableParams.includes(param)

src/components/ui/VnLv.vue

@@ -2,6 +2,7 @@
 import { computed } from 'vue';
 import { dashIfEmpty } from 'src/filters';
 
+import { useClipboard } from 'src/composables/useClipboard';
 const $props = defineProps({
     label: { type: String, default: null },
     value: {
@@ -10,8 +11,19 @@ const $props = defineProps({
     },
     info: { type: String, default: null },
     dash: { type: Boolean, default: true },
+    copy: { type: Boolean, default: false },
 });
 const isBooleanValue = computed(() => typeof $props.value === 'boolean');
+
+const { copyText } = useClipboard();
+
+function copyValueText() {
+    copyText($props.value, {
+        component: {
+            copyValue: $props.value,
+        },
+    });
+}
 </script>
 <style scoped>
 .label,
@@ -48,5 +60,16 @@ const isBooleanValue = computed(() => typeof $props.value === 'boolean');
                 </QTooltip>
             </QIcon>
         </div>
+        <div class="copy" v-if="$props.copy && $props.value" @click="copyValueText()">
+            <QIcon name="Content_Copy" color="primary" />
+        </div>
     </div>
 </template>
+
+<style lang="scss" scoped>
+.copy {
+    &:hover {
+        cursor: pointer;
+    }
+}
+</style>

src/components/ui/VnPaginate.vue

@@ -104,6 +104,8 @@ async function paginate() {
     await arrayData.loadMore();
 
     if (!arrayData.hasMoreData.value) {
+        if (store.userParamsChanged) arrayData.hasMoreData.value = true;
+        store.userParamsChanged = false;
         isLoading.value = false;
         return;
     }
@@ -129,9 +131,9 @@ async function onLoad(...params) {
     pagination.value.page = pagination.value.page + 1;
 
     await paginate();
-
+    let isDone = false;
-    const endOfPages = !arrayData.hasMoreData.value;
+    if (store.userParamsChanged) isDone = !arrayData.hasMoreData.value;
-    done(endOfPages);
+    done(isDone);
 }
 </script>
 
@@ -172,7 +174,7 @@ async function onLoad(...params) {
         v-if="store.data"
         @load="onLoad"
         :offset="offset"
-        class="full-width full-height overflow-auto"
+        class="full-width full-height"
     >
         <slot name="body" :rows="store.data"></slot>
         <div v-if="isLoading" class="info-row q-pa-md text-center">

src/components/ui/VnSearchbar.vue

@@ -87,15 +87,10 @@ async function search() {
     });
     if (!props.redirect) return;
 
-    const rows = store.data;
+    const { matched: matches } = route;
-    const module = route.matched[1];
+    const { path } = matches[matches.length-1];
-    if (rows.length === 1) {
+    const newRoute = path.replace(':id', searchText.value);
-        const [firstRow] = rows;
+    await router.push(newRoute);
-        await router.push({ path: `${module.path}/${firstRow.id}` });
-    } else if (route.matched.length > 3) {
-        await router.push({ path: `/${module.path}` });
-        arrayData.updateStateParams();
-    }
 }
 </script>
 

src/composables/useArrayData.js

@@ -142,7 +142,8 @@ export function useArrayData(key, userOptions) {
         userParams = sanitizerParams(userParams, store?.exprBuilder);
 
         store.userParams = userParams;
-
+        store.skip = 0;
+        store.filter.skip = 0;
         await fetch({ append: false });
         return { filter, params };
     }

src/composables/useClipboard.js

@@ -0,0 +1,17 @@
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+
+export function useClipboard() {
+    const quasar = useQuasar();
+    const { t } = useI18n();
+    /**
+     *
+     * @param {String} value Value to send to clipboardAPI
+     * @param {Object} {label, component} Refer to Quasar notify configuration. Label is the text to translate
+     */
+    function copyText(value, { label = 'components.VnLv.copyText', component = {} }) {
+        navigator.clipboard.writeText(value);
+        quasar.notify({ type: 'positive', message: t(label, component) });
+    }
+    return { copyText };
+}

src/i18n/en/index.js

@@ -336,6 +336,7 @@ export default {
             grouping: 'Grouping',
             buyingValue: 'Buying value',
             packagingFk: 'Box',
+            file: 'File',
         },
         notes: {
             observationType: 'Observation type',
@@ -1018,6 +1019,7 @@ export default {
             m3Price: 'M3 Price',
             routePrice: 'Route price',
             minimumKm: 'Minimum Km',
+            addRow: 'Add row',
         },
         consumption: {
             entry: 'Entry',
@@ -1087,6 +1089,7 @@ export default {
             description: 'Description',
         },
     },
+
     components: {
         topbar: {},
         userPanel: {
@@ -1110,5 +1113,8 @@ export default {
             addToPinned: 'Add to pinned',
             removeFromPinned: 'Remove from pinned',
         },
+        VnLv: {
+            copyText: '{copyValue} has been copied to the clipboard',
+        },
     },
 };

src/i18n/es/index.js

@@ -335,6 +335,7 @@ export default {
             grouping: 'Grouping',
             buyingValue: 'Coste',
             packagingFk: 'Embalaje',
+            file: 'Fichero',
         },
         notes: {
             observationType: 'Tipo de observación',
@@ -1018,6 +1019,7 @@ export default {
             m3Price: 'Precio M3',
             routePrice: 'Precio ruta',
             minimumKm: 'Km mínimos',
+            addRow: 'Añadir fila',
         },
         consumption: {
             entry: 'Entrada',
@@ -1110,5 +1112,8 @@ export default {
             addToPinned: 'Añadir a fijados',
             removeFromPinned: 'Eliminar de fijados',
         },
+        VnLv: {
+            copyText: '{copyValue} se ha copiado al portapepeles',
+        },
     },
 };

src/pages/Claim/Card/ClaimAction.vue

@@ -37,6 +37,7 @@ const marker_labels = [
     { value: DEFAULT_MIN_RESPONSABILITY, label: t('claim.summary.company') },
     { value: DEFAULT_MAX_RESPONSABILITY, label: t('claim.summary.person') },
 ];
+const multiplicatorValue = ref();
 
 const columns = computed(() => [
     {
@@ -134,17 +135,7 @@ async function regularizeClaim() {
         message: t('globals.dataSaved'),
         type: 'positive',
     });
-    if (claim.value.responsibility >= Math.ceil(DEFAULT_MAX_RESPONSABILITY) / 2) {
+    await onUpdateGreugeAccept();
-        quasar
-            .dialog({
-                component: VnConfirm,
-                componentProps: {
-                    title: t('confirmGreuges'),
-                    message: t('confirmGreugesMessage'),
-                },
-            })
-            .onOk(async () => await onUpdateGreugeAccept());
-    }
 }
 
 async function onUpdateGreugeAccept() {
@@ -153,9 +144,9 @@ async function onUpdateGreugeAccept() {
             filter: { where: { code: 'freightPickUp' } },
         })
     ).data.id;
-    const freightPickUpPrice = (await axios.get(`GreugeConfigs/findOne`)).data
+    const freightPickUpPrice =
-        .freightPickUpPrice;
+        (await axios.get(`GreugeConfigs/findOne`)).data.freightPickUpPrice *
-
+        multiplicatorValue.value;
     await axios.post(`Greuges`, {
         clientFk: claim.value.clientFk,
         description: `${t('ClaimGreugeDescription')} ${claimId}`.toUpperCase(),
@@ -226,10 +217,10 @@ async function importToNewRefundTicket() {
         show-if-above
         v-if="claim"
     >
-        <QCard class="totalClaim vn-card q-my-md q-pa-sm">
+        <QCard class="totalClaim q-my-md q-pa-sm no-box-shadow">
             {{ `${t('Total claimed')}: ${toCurrency(totalClaimed)}` }}
         </QCard>
-        <QCard class="vn-card q-mb-md q-pa-sm">
+        <QCard class="q-mb-md q-pa-sm no-box-shadow">
             <QItem class="justify-between">
                 <QItemLabel class="slider-container">
                     <p class="text-primary">
@@ -250,6 +241,7 @@ async function importToNewRefundTicket() {
                 </QItemLabel>
             </QItem>
         </QCard>
+        <QCard class="q-mb-md q-pa-sm no-box-shadow" style="margin-bottom: 1em">
             <QItemLabel class="mana q-mb-md">
                 <QCheckbox
                     v-model="claim.isChargedToMana"
@@ -257,6 +249,23 @@ async function importToNewRefundTicket() {
                 />
                 <span>{{ t('mana') }}</span>
             </QItemLabel>
+        </QCard>
+        <QCard class="q-mb-md q-pa-sm no-box-shadow" style="position: static">
+            <QInput
+                :disable="
+                    !(claim.responsibility >= Math.ceil(DEFAULT_MAX_RESPONSABILITY) / 2)
+                "
+                :label="t('confirmGreuges')"
+                class="q-field__native text-grey-2"
+                type="number"
+                placeholder="0"
+                id="multiplicatorValue"
+                name="multiplicatorValue"
+                min="0"
+                max="50"
+                v-model="multiplicatorValue"
+            />
+        </QCard>
     </QDrawer>
     <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport>
     <CrudModel
@@ -494,4 +503,5 @@ es:
     Id item: Id artículo
     confirmGreuges: ¿Desea insertar greuges?
     confirmGreugesMessage: Insertar greuges en la ficha del cliente
+    Apply Greuges: Aplicar Greuges
 </i18n>

src/pages/Claim/Card/ClaimDescriptor.vue

@@ -2,7 +2,7 @@
 import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { toDate } from 'src/filters';
+import { toDate, toPercentage } from 'src/filters';
 import { useState } from 'src/composables/useState';
 import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
 import ClaimDescriptorMenu from 'pages/Claim/Card/ClaimDescriptorMenu.vue';
@@ -32,7 +32,16 @@ const filter = {
         {
             relation: 'client',
             scope: {
-                include: { relation: 'salesPersonUser' },
+                include: [
+                    { relation: 'salesPersonUser' },
+                    {
+                        relation: 'claimsRatio',
+                        scope: {
+                            fields: ['claimingRate'],
+                            limit: 1,
+                        },
+                    },
+                ],
             },
         },
         {
@@ -135,6 +144,10 @@ const setData = (entity) => {
                 :value="entity.ticket?.address?.province?.name"
             />
             <VnLv :label="t('claim.card.zone')" :value="entity.ticket?.zone?.name" />
+            <VnLv
+                :label="t('claimRate')"
+                :value="toPercentage(entity.client?.claimsRatio?.claimingRate)"
+            />
         </template>
         <template #actions="{ entity }">
             <QCardActions>
@@ -163,3 +176,9 @@ const setData = (entity) => {
     margin-top: 0;
 }
 </style>
+<i18n>
+    en:
+        claimRate: Claming rate
+    es:
+        claimRate: Ratio de reclamación
+</i18n>

src/pages/Claim/Card/ClaimNotes.vue

@@ -30,7 +30,7 @@ const body = {
 </script>
 <template>
     <div class="column items-center">
-        <VnNotes
+        <VnNotes style="overflow-y: scroll;"
             :add-note="$props.addNote"
             :id="id"
             url="claimObservations"

src/pages/Claim/ClaimList.vue

@@ -87,20 +87,22 @@ function viewSummary(id) {
                         v-for="row of rows"
                     >
                         <template #list-items>
-                            <VnLv :label="t('claim.list.customer')" @click.stop>
+                            <VnLv :label="t('claim.list.customer')">
                                 <template #value>
-                                    <span class="link">
+                                    <span class="link" @click.stop>
                                         {{ row.clientName }}
                                         <CustomerDescriptorProxy :id="row.clientFk" />
                                     </span>
                                 </template>
                             </VnLv>
-                            <VnLv :label="t('claim.list.assignedTo')" @click.stop>
+                            <VnLv :label="t('claim.list.assignedTo')">
                                 <template #value>
+                                    <span @click.stop>
                                         <VnUserLink
                                             :name="row.workerName"
                                             :worker-id="row.workerFk"
                                         />
+                                    </span>
                                 </template>
                             </VnLv>
                             <VnLv

src/pages/Customer/Card/CustomerBillingData.vue

@@ -1,8 +1,10 @@
 <script setup>
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
+import axios from 'axios';
+
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
@@ -16,16 +18,25 @@ const route = useRoute();
 
 const payMethods = ref([]);
 const bankEntitiesOptions = ref([]);
+const bankEntitiesRef = ref(null);
 
-const onBankEntityCreated = (data) => {
+const filter = {
-    bankEntitiesOptions.value.push(data);
+    fields: ['id', 'bic', 'name'],
+    order: 'bic ASC',
+    limit: 30,
+};
+
+const getBankEntities = () => {
+    bankEntitiesRef.value.fetch();
 };
 </script>
 
 <template>
     <fetch-data @on-fetch="(data) => (payMethods = data)" auto-load url="PayMethods" />
-    <FetchData
+    <fetch-data
+        ref="bankEntitiesRef"
         @on-fetch="(data) => (bankEntitiesOptions = data)"
+        :filter="filter"
         auto-load
         url="BankEntities"
     />
@@ -73,9 +84,7 @@ const onBankEntityCreated = (data) => {
                         v-model="data.bankEntityFk"
                     >
                         <template #form>
-                            <CreateBankEntityForm
+                            <CreateBankEntityForm @on-data-saved="getBankEntities()" />
-                                @on-data-saved="onBankEntityCreated($event)"
-                            />
                         </template>
                         <template #option="scope">
                             <QItem v-bind="scope.itemProps">

src/pages/Customer/Card/CustomerConsignees.vue

@@ -91,7 +91,7 @@ const toCustomerConsigneeEdit = (consigneeId) => {
                     }"
                     @click="toCustomerConsigneeEdit(item.id)"
                 >
-                    <div class="consignees-card-icon">
+                    <div class="q-ml-xs q-mr-md flex items-center">
                         <QIcon name="star" size="md" color="primary" />
                     </div>
                     <div>
@@ -160,11 +160,6 @@ const toCustomerConsigneeEdit = (consigneeId) => {
         background-color: var(--vn-light-gray);
     }
 }
-.consignees-card-icon {
-    margin: 0 15px 0 5px;
-    display: flex;
-    align-items: center;
-}
 </style>
 
 <i18n>

src/pages/Customer/Card/CustomerCredits.vue

@@ -109,9 +109,9 @@ const toCustomerCreditCreate = () => {
                     <QTr :props="props" class="cursor-pointer">
                         <component
                             :is="tableColumnComponents[props.col.name].component"
-                            class="col-content"
-                            v-bind="tableColumnComponents[props.col.name].props(props)"
                             @click="tableColumnComponents[props.col.name].event(props)"
+                            class="rounded-borders q-pa-sm"
+                            v-bind="tableColumnComponents[props.col.name].props(props)"
                         >
                             {{ props.value }}
                             <WorkerDescriptorProxy :id="workerId" />
@@ -130,13 +130,6 @@ const toCustomerCreditCreate = () => {
     </QPageSticky>
 </template>
 
-<style lang="scss" scoped>
-.col-content {
-    border-radius: 4px;
-    padding: 6px;
-}
-</style>
-
 <i18n>
 es:
     Since: Desde

src/pages/Customer/Card/CustomerLog.vue

@@ -1,3 +1,262 @@
+<script setup>
+import { onBeforeMount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import { useStateStore } from 'stores/useStateStore';
+
+import FetchData from 'components/FetchData.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const stateStore = useStateStore();
+
+const clientLogs = ref(null);
+const urlClientLogsEditors = ref(null);
+const urlClientLogsModels = ref(null);
+const clientLogsModelsOptions = ref([]);
+const clientLogsOptions = ref([]);
+const clientLogsEditorsOptions = ref([]);
+const radioButtonValue = ref('all');
+const insert = ref(false);
+const update = ref(false);
+const deletes = ref(false);
+const select = ref(false);
+const neq = ref(null);
+const inq = ref([]);
+
+const filterClientLogs = {
+    fields: [
+        'id',
+        'originFk',
+        'userFk',
+        'action',
+        'changedModel',
+        'oldInstance',
+        'newInstance',
+        'creationDate',
+        'changedModel',
+        'changedModelId',
+        'changedModelValue',
+        'description',
+    ],
+    include: [
+        {
+            relation: 'user',
+            scope: {
+                fields: ['nickname', 'name', 'image'],
+                include: { relation: 'worker', scope: { fields: ['id'] } },
+            },
+        },
+    ],
+    order: ['creationDate DESC', 'id DESC'],
+    limit: 20,
+};
+const filterClientLogsEditors = {
+    fields: ['id', 'nickname', 'name', 'image'],
+    order: 'nickname',
+    limit: 30,
+};
+const filterClientLogsModels = { order: ['changedModel'] };
+const urlBase = `ClientLogs/${route.params.id}`;
+
+onBeforeMount(() => {
+    stateStore.rightDrawer = true;
+    filterClientLogs.where = {
+        and: [
+            { originFk: `${route.params.id}` },
+            { userFk: { neq: radioButtonValue.value } },
+            { action: { inq: inq.value } },
+        ],
+    };
+    urlClientLogsEditors.value = `${urlBase}/editors`;
+    urlClientLogsModels.value = `${urlBase}/models`;
+});
+
+const getClientLogs = async (value, status) => {
+    if (status === 'neq') {
+        neq.value = value;
+    } else {
+        setInq(value, status);
+    }
+    filterClientLogs.where = {
+        and: [
+            { originFk: `${route.params.id}` },
+            { userFk: { neq: neq.value } },
+            { action: { inq: inq.value } },
+        ],
+    };
+    clientLogs.value?.fetch();
+};
+
+const setInq = (value, status) => {
+    if (status) {
+        if (!inq.value.includes(value)) {
+            inq.value.push(value);
+        }
+    } else {
+        inq.value = inq.value.filter((item) => item !== value);
+    }
+};
+</script>
+
 <template>
-    <div class="flex justify-center">Log</div>
+    <FetchData
+        :filter="filterClientLogs"
+        @on-fetch="(data) => (clientLogsOptions = data)"
+        auto-load
+        url="ClientLogs"
+        ref="clientLogs"
+    />
+    <FetchData
+        :filter="filterClientLogsEditors"
+        @on-fetch="(data) => (clientLogsEditorsOptions = data)"
+        auto-load
+        :url="urlClientLogsEditors"
+    />
+    <FetchData
+        :filter="filterClientLogsModels"
+        @on-fetch="(data) => (clientLogsModelsOptions = data)"
+        auto-load
+        :url="urlClientLogsModels"
+    />
+
+    <h5 class="flex justify-center label-color">
+        {{ t('globals.noResults') }}
+    </h5>
+
+    <QDrawer :width="256" show-if-above side="right" v-model="stateStore.rightDrawer">
+        <div class="q-mt-sm q-px-md">
+            <VnInput :label="t('Search')">
+                <template #append>
+                    <QIcon name="info" class="cursor-pointer">
+                        <QTooltip>
+                            {{ t('Search by id or concept') }}
+                        </QTooltip>
+                    </QIcon>
+                </template>
+            </VnInput>
+            <VnSelectFilter
+                :label="t('Entity')"
+                :options="[]"
+                class="q-mt-md"
+                hide-selected
+                option-label="name"
+                option-value="id"
+            />
+
+            <div class="q-mt-lg">
+                <QRadio
+                    :dark="true"
+                    :label="t('All')"
+                    @update:model-value="getClientLogs($event, 'neq')"
+                    dense
+                    v-model="radioButtonValue"
+                    val="all"
+                />
+            </div>
+            <div class="q-mt-md">
+                <QRadio
+                    :dark="true"
+                    :label="t('User')"
+                    @update:model-value="getClientLogs($event, 'neq')"
+                    dense
+                    v-model="radioButtonValue"
+                    val="user"
+                />
+            </div>
+            <div class="q-mt-md">
+                <QRadio
+                    :dark="true"
+                    :label="t('System')"
+                    @update:model-value="getClientLogs($event, 'neq')"
+                    dense
+                    v-model="radioButtonValue"
+                    val="system"
+                />
+            </div>
+
+            <VnSelectFilter
+                :label="t('User')"
+                :options="[]"
+                class="q-mt-sm"
+                hide-selected
+                option-label="name"
+                option-value="id"
+            />
+            <VnInput :label="t('Changes')" class="q-mt-sm">
+                <template #append>
+                    <QIcon name="info" class="cursor-pointer">
+                        <QTooltip>
+                            {{ t('Search by changes') }}
+                        </QTooltip>
+                    </QIcon>
+                </template>
+            </VnInput>
+
+            <div class="q-mt-md">
+                <QCheckbox
+                    :label="t('Creates')"
+                    @update:model-value="getClientLogs('insert', $event)"
+                    v-model="insert"
+                />
+            </div>
+            <div>
+                <QCheckbox
+                    :label="t('Edits')"
+                    @update:model-value="getClientLogs('update', $event)"
+                    v-model="update"
+                />
+            </div>
+            <div>
+                <QCheckbox
+                    :label="t('Deletes')"
+                    @update:model-value="getClientLogs('delete', $event)"
+                    v-model="deletes"
+                />
+            </div>
+            <div>
+                <QCheckbox
+                    :label="t('Accesses')"
+                    @update:model-value="getClientLogs('select', $event)"
+                    v-model="select"
+                />
+            </div>
+
+            <VnInputDate :label="t('Date')" class="q-mt-sm" />
+            <VnInput :label="t('To')" class="q-mt-md" />
+        </div>
+    </QDrawer>
+
+    <QPageSticky
+        :offset="[18, 18]"
+        v-if="radioButtonValue !== 'all' || insert || update || deletes || select"
+    >
+        <QBtn color="primary" fab icon="filter_alt_off" />
+        <QTooltip>
+            {{ t('Quit filter') }}
+        </QTooltip>
+    </QPageSticky>
 </template>
+
+<i18n>
+es:
+    Search: Buscar
+    Search by id or concept: xxx
+    Entity: Entidad
+    All: Todo
+    User: Usuario
+    System: Sistema
+    Changes: Cambios
+    Search by changes: xxx
+    Creates: Crea
+    Edits: Modifica
+    Deletes: Elimina
+    Accesses: Accede
+    Date: Fecha
+    To: Hasta
+    Quit filter: Quitar filtro
+</i18n>

src/pages/Customer/Card/CustomerNotes.vue

@@ -36,7 +36,9 @@ const toCustomerNoteCreate = () => {
                         v-for="(item, index) in rows"
                         :key="index"
                         :class="{
-                            'consignees-card': true,
+                            'q-pa-md': true,
+                            'q-rounded': true,
+                            'custom-border': true,
                             'q-mb-md': index < rows.length - 1,
                         }"
                     >
@@ -82,7 +84,7 @@ const toCustomerNoteCreate = () => {
 </template>
 
 <style lang="scss">
-.consignees-card {
+.custom-border {
     border: 2px solid var(--vn-light-gray);
     border-radius: 10px;
     padding: 10px;

src/pages/Customer/Card/CustomerSummary.vue

@@ -38,7 +38,7 @@ const balanceDue = computed(() => {
 const balanceDueWarning = computed(() => (balanceDue.value ? 'negative' : ''));
 
 const claimRate = computed(() => {
-    return customer.value.claimsRatio.claimingRate * 100;
+    return customer.value.claimsRatio.claimingRate;
 });
 
 const priceIncreasingRate = computed(() => {
@@ -81,7 +81,7 @@ const creditWarning = computed(() => {
                         <VnLinkPhone :phone-number="entity.mobile" />
                     </template>
                 </VnLv>
-                <VnLv :label="t('customer.summary.email')" :value="entity.email" />
+                <VnLv :label="t('customer.summary.email')" :value="entity.email" copy />
                 <VnLv
                     :label="t('customer.summary.salesPerson')"
                     :value="entity?.salesPersonUser?.name"

src/pages/Customer/CustomerCreate.vue

@@ -2,12 +2,11 @@
 import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
-import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
+import VnLocation from 'src/components/common/VnLocation.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const { t } = useI18n();
@@ -29,23 +28,18 @@ const newClientForm = reactive({
     isEqualizated: false,
 });
 
-const postcodeFetchDataRef = ref(null);
-const townsFetchDataRef = ref(null);
 const workersOptions = ref([]);
 const businessTypesOptions = ref([]);
-const citiesLocationOptions = ref([]);
-const provincesLocationOptions = ref([]);
-const countriesOptions = ref([]);
 const postcodesOptions = ref([]);
 
-const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formData) => {
+
-    await postcodeFetchDataRef.value.fetch();
+function handleLocation(data, location ) {
-    await townsFetchDataRef.value.fetch();
+    const { town, code, provinceFk, countryFk } = location ?? {}
-    formData.postcode = code;
+    data.postcode = code;
-    formData.provinceFk = provinceFk;
+    data.city = town;
-    formData.city = citiesLocationOptions.value.find((town) => town.id === townFk).name;
+    data.provinceFk = provinceFk;
-    formData.countryFk = countryFk;
+    data.countryFk = countryFk;
-};
+}
 </script>
 
 <template>
@@ -54,33 +48,11 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formDa
         auto-load
         url="Workers/search?departmentCodes"
     />
-    <FetchData
-        ref="postcodeFetchDataRef"
-        url="Postcodes/location"
-        @on-fetch="(data) => (postcodesOptions = data)"
-        auto-load
-    />
     <FetchData
         @on-fetch="(data) => (businessTypesOptions = data)"
         auto-load
         url="BusinessTypes"
     />
-    <FetchData
-        ref="townsFetchDataRef"
-        @on-fetch="(data) => (citiesLocationOptions = data)"
-        auto-load
-        url="Towns/location"
-    />
-    <FetchData
-        @on-fetch="(data) => (provincesLocationOptions = data)"
-        auto-load
-        url="Provinces/location"
-    />
-    <FetchData
-        @on-fetch="(data) => (countriesOptions = data)"
-        auto-load
-        url="Countries"
-    />
     <QPage>
         <VnSubToolbar />
         <FormModel
@@ -139,96 +111,19 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formDa
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectCreate
+                        <VnLocation
-                            v-model="data.postcode"
-                            :label="t('Postcode')"
                             :rules="validate('Worker.postcode')"
                             :roles-allowed-to-create="['deliveryAssistant']"
                             :options="postcodesOptions"
-                            option-label="code"
+                            v-model="data.location"
-                            option-value="code"
+                            @update:model-value="
-                            hide-selected
+                                (location) => handleLocation(data, location)
+                            "
                         >
-                            <template #form>
+                        </VnLocation>
-                                <CustomerCreateNewPostcode
-                                    @on-data-saved="onPostcodeCreated($event, data)"
-                                />
-                            </template>
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection v-if="scope.opt">
-                                        <QItemLabel>{{ scope.opt.code }}</QItemLabel>
-                                        <QItemLabel caption
-                                            >{{ scope.opt.code }} -
-                                            {{ scope.opt.town.name }} ({{
-                                                scope.opt.town.province.name
-                                            }},
-                                            {{
-                                                scope.opt.town.province.country.country
-                                            }})</QItemLabel
-                                        >
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectCreate>
-                    </div>
-                    <div class="col">
-                        <!-- ciudades -->
-                        <VnSelectFilter
-                            :label="t('City')"
-                            :options="citiesLocationOptions"
-                            hide-selected
-                            option-label="name"
-                            option-value="name"
-                            v-model="data.city"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel>{{ scope.opt.name }}</QItemLabel>
-                                        <QItemLabel caption>
-                                            {{
-                                                `${scope.opt.name}, ${scope.opt.province.name} (${scope.opt.province.country.country})`
-                                            }}
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectFilter>
-                    </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('Province')"
-                            :options="provincesLocationOptions"
-                            hide-selected
-                            option-label="name"
-                            option-value="id"
-                            v-model="data.provinceFk"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel>{{
-                                            `${scope.opt.name} (${scope.opt.country.country})`
-                                        }}</QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectFilter>
-                    </div>
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('Country')"
-                            :options="countriesOptions"
-                            hide-selected
-                            option-label="country"
-                            option-value="id"
-                            v-model="data.countryFk"
-                        />
                     </div>
                 </VnRow>
+
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput v-model="data.userName" :label="t('Web user')" />

src/pages/Customer/components/CustomerConsigneeCreate.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { onBeforeMount, reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import axios from 'axios';
 
@@ -16,20 +16,9 @@ import CustomerNewCustomsAgent from 'src/pages/Customer/components/CustomerNewCu
 
 const { t } = useI18n();
 const route = useRoute();
+const router = useRouter();
 
-const formInitialData = reactive({
+const formInitialData = reactive({ isDefaultAddress: false });
-    isDefaultAddress: false,
-    nickname: null,
-    street: null,
-    postalCode: null,
-    city: null,
-    provinceFk: null,
-    agencyModeFk: null,
-    phone: null,
-    mobile: null,
-    incotermsFk: null,
-    customsAgentFk: null,
-});
 
 const townsFetchDataRef = ref(null);
 const postcodeFetchDataRef = ref(null);
@@ -63,19 +52,28 @@ const getCustomsAgents = async () => {
 const refreshData = () => {
     getCustomsAgents();
 };
+
+const toCustomerConsignees = () => {
+    router.push({
+        name: 'CustomerConsignees',
+        params: {
+            id: route.params.id,
+        },
+    });
+};
 </script>
 
 <template>
     <FetchData
-        ref="postcodeFetchDataRef"
         @on-fetch="(data) => (postcodesOptions = data)"
         auto-load
+        ref="postcodeFetchDataRef"
         url="Postcodes/location"
     />
     <FetchData
-        ref="townsFetchDataRef"
         @on-fetch="(data) => (citiesLocationOptions = data)"
         auto-load
+        ref="townsFetchDataRef"
         url="Towns/location"
     />
     <FetchData
@@ -94,6 +92,7 @@ const refreshData = () => {
         :form-initial-data="formInitialData"
         :observe-form-changes="false"
         :url-create="urlCreate"
+        @on-data-saved="toCustomerConsignees()"
         model="client"
     >
         <template #form="{ data, validate }">

src/pages/Department/Card/DepartmentDescriptor.vue

@@ -90,17 +90,15 @@ const removeDepartment = () => {
             </QItem>
         </template>
         <template #body="{ entity }">
-            <VnLv :label="t('department.chat')" :value="entity.chatName" dash />
+            <VnLv :label="t('department.chat')" :value="entity.chatName" />
-            <VnLv :label="t('department.email')" :value="entity.notificationEmail" dash />
+            <VnLv :label="t('department.email')" :value="entity.notificationEmail" copy />
             <VnLv
                 :label="t('department.selfConsumptionCustomer')"
                 :value="entity.client?.name"
-                dash
             />
             <VnLv
                 :label="t('department.bossDepartment')"
                 :value="entity.worker?.user?.name"
-                dash
             />
         </template>
         <template #actions>

src/pages/Entry/Card/EntryBuys.vue

@@ -227,18 +227,20 @@ const openRemoveDialog = async () => {
             component: VnConfirm,
             componentProps: {
                 title: t('Confirm deletion'),
-                message:
+                message: t(
-                    rowsSelected.value.length > 1
+                    `Are you sure you want to delete this buy${
-                        ? t('Are you sure you want to delete this buys?')
+                        rowsSelected.value.length > 1 ? 's' : ''
-                        : t('Are you sure you want to delete this buy?'),
+                    }?`
+                ),
                 data: rowsSelected.value,
             },
         })
         .onOk(async () => {
             try {
                 await deleteBuys();
-                const notifyMessage =
+                const notifyMessage = t(
-                    rowsSelected.value.length > 1 ? t('Buys deleted') : t('Buy deleted');
+                    `Buy${rowsSelected.value.length > 1 ? 's' : ''} deleted`
+                );
                 notify(notifyMessage, 'positive');
             } catch (err) {
                 console.error('Error deleting buys');
@@ -381,7 +383,7 @@ const importBuys = () => {
     </VnPaginate>
     <QPageSticky :offset="[20, 20]">
         <QBtn fab icon="upload" color="primary" @click="importBuys()" />
-        <QTooltip>
+        <QTooltip class="text-no-wrap">
             {{ t('Import buys') }}
         </QTooltip>
     </QPageSticky>

src/pages/Entry/Card/EntryBuysImport.vue

@@ -197,10 +197,11 @@ const redirectToBuysView = () => {
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
                     <QFile
-                        label="Standard"
+                        :label="t('entry.buys.file')"
                         :multiple="false"
                         v-model="importData.file"
                         @update:model-value="onFileChange($event)"
+                        class="required"
                     >
                         <template #append>
                             <QIcon name="vn:attach" class="cursor-pointer">

src/pages/InvoiceIn/InvoiceInList.vue

@@ -76,7 +76,6 @@ function viewSummary(id) {
                 data-key="InvoiceInList"
                 url="InvoiceIns/filter"
                 order="issued DESC, id DESC"
-                auto-load
             >
                 <template #body="{ rows }">
                     <CardList

src/pages/Order/Card/OrderCatalogItem.vue

@@ -51,13 +51,6 @@ const dialog = ref(null);
                         :value="item?.[`value${index + 4}`]"
                     />
                 </template>
-                <QRating
-                    :model-value="item.stars"
-                    icon="star"
-                    icon-selected="star"
-                    color="primary"
-                    readonly
-                />
                 <div class="footer">
                     <div class="price">
                         <p>{{ item.available }} {{ t('to') }} {{ item.price }}</p>
@@ -72,7 +65,8 @@ const dialog = ref(null);
                         </QIcon>
                     </div>
                     <p v-if="item.priceKg" class="price-kg">
-                        {{ t('price-kg') }} {{ toCurrency(item.priceKg) || DEFAULT_PRICE_KG }}
+                        {{ t('price-kg') }}
+                        {{ toCurrency(item.priceKg) || DEFAULT_PRICE_KG }}
                     </p>
                 </div>
             </div>

src/pages/Supplier/Card/SupplierAgencyTerm.vue

@@ -128,7 +128,7 @@ onMounted(() => {
     <QPageSticky :offset="[20, 20]">
         <QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
         <QTooltip>
-            {{ t('supplier.list.newSupplier') }}
+            {{ t('supplier.agencyTerms.addRow') }}
         </QTooltip>
     </QPageSticky>
 </template>

src/pages/Supplier/Card/SupplierCard.vue

@@ -62,3 +62,8 @@ const { t } = useI18n();
     }
 }
 </style>
+
+<i18n>
+    es:
+        Search suppliers: Buscar proveedores
+</i18n>

src/pages/Supplier/Card/SupplierFiscalData.vue

@@ -288,7 +288,6 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formDa
                     </div>
                 </div>
             </VnRow>
-            <pre> {{ data }}</pre>
         </template>
     </FormModel>
 </template>

src/pages/Ticket/Card/TicketSummary.vue

@@ -58,7 +58,7 @@ function formattedAddress() {
 
 function isEditable() {
     try {
-        return !ticket.value.ticketState.state.alertLevel;
+        return !ticket.value.ticketState?.state?.alertLevel;
     } catch (e) {
         console.error(e);
     }
@@ -153,8 +153,8 @@ async function changeState(value) {
                 </a>
                 <VnLv :label="t('ticket.summary.state')">
                     <template #value>
-                        <QChip :color="ticket.ticketState.state.classColor ?? 'dark'">
+                        <QChip :color="ticket.ticketState?.state?.classColor ?? 'dark'">
-                            {{ ticket.ticketState.state.name }}
+                            {{ ticket.ticketState?.state?.name }}
                         </QChip>
                     </template>
                 </VnLv>

src/pages/Worker/Card/WorkerDescriptor.vue

@@ -101,7 +101,7 @@ const setData = (entity) => {
         </template>
         <template #body="{ entity }">
             <VnLv :label="t('worker.card.name')" :value="entity.user?.nickname" />
-            <VnLv :label="t('worker.card.email')" :value="entity.user?.email"> </VnLv>
+            <VnLv :label="t('worker.card.email')" :value="entity.user?.email" copy />
             <VnLv
                 :label="t('worker.list.department')"
                 :value="entity.department ? entity.department.department.name : null"

src/pages/Worker/Card/WorkerSummary.vue

@@ -80,7 +80,7 @@ const filter = {
                     :label="t('worker.list.department')"
                     :value="worker.department.department.name"
                 />
-                <VnLv :label="t('worker.list.email')" :value="worker.user.email" />
+                <VnLv :label="t('worker.list.email')" :value="worker.user.email" copy />
                 <VnLv :label="t('worker.summary.boss')" link>
                     <template #value>
                         <VnUserLink

src/pages/Worker/WorkerCreate.vue

@@ -10,6 +10,7 @@ import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
 import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
 import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
+import VnLocation from 'src/components/common/VnLocation.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
@@ -21,14 +22,6 @@ const workerConfigFilter = {
     field: ['payMethodFk'],
 };
 
-const provincesFilter = {
-    fields: ['id', 'name', 'countryFk'],
-};
-
-const townsFilter = {
-    fields: ['id', 'name', 'provinceFk'],
-};
-
 const newWorkerForm = ref({
     companyFk: null,
     payMethodFk: null,
@@ -49,10 +42,6 @@ const newWorkerForm = ref({
     bankEntityFk: null,
 });
 
-const postcodeFetchDataRef = ref(null);
-const townsFetchDataRef = ref(null);
-const provincesOptions = ref([]);
-const townsOptions = ref([]);
 const companiesOptions = ref([]);
 const workersOptions = ref([]);
 const payMethodsOptions = ref([]);
@@ -67,13 +56,14 @@ const onBankEntityCreated = (data) => {
     bankEntitiesOptions.value.push(data);
 };
 
-const onPostcodeCreated = async ({ code, provinceFk, townFk }, formData) => {
+
-    await postcodeFetchDataRef.value.fetch();
+function handleLocation(data, location ) {
-    await townsFetchDataRef.value.fetch();
+    const { town, postcode: code, provinceFk, countryFk } = location ?? {}
-    formData.postcode = code;
+    data.postcode = code;
-    formData.provinceFk = provinceFk;
+    data.city = town;
-    formData.city = townsOptions.value.find((town) => town.id === townFk).name;
+    data.provinceFk = provinceFk;
-};
+    data.countryFk = countryFk;
+}
 
 onMounted(async () => {
     const userInfo = await useUserConfig().fetch();
@@ -88,25 +78,7 @@ onMounted(async () => {
         :filter="workerConfigFilter"
         auto-load
     />
-    <FetchData
+
-        ref="postcodeFetchDataRef"
-        url="Postcodes/location"
-        @on-fetch="(data) => (postcodesOptions = data)"
-        auto-load
-    />
-    <FetchData
-        url="Provinces/location"
-        @on-fetch="(data) => (provincesOptions = data)"
-        :filter="provincesFilter"
-        auto-load
-    />
-    <FetchData
-        ref="townsFetchDataRef"
-        url="Towns/location"
-        @on-fetch="(data) => (townsOptions = data)"
-        :filter="townsFilter"
-        auto-load
-    />
     <FetchData
         url="Companies"
         @on-fetch="(data) => (companiesOptions = data)"
@@ -184,77 +156,19 @@ onMounted(async () => {
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectCreate
+                        <VnLocation
-                            v-model="data.postcode"
-                            :label="t('worker.create.postcode')"
                             :rules="validate('Worker.postcode')"
                             :roles-allowed-to-create="['deliveryAssistant']"
                             :options="postcodesOptions"
-                            option-label="code"
+                            v-model="data.location"
-                            option-value="code"
+                            @update:model-value="
-                            hide-selected
+                                    (location) => handleLocation(data, location)
+                                    "
                             >
-                            <template #form>
+                        </VnLocation>
-                                <CustomerCreateNewPostcode
-                                    @on-data-saved="onPostcodeCreated($event, data)"
-                                />
-                            </template>
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection v-if="scope.opt">
-                                        <QItemLabel>{{ scope.opt.code }}</QItemLabel>
-                                        <QItemLabel caption
-                                            >{{ scope.opt.code }} -
-                                            {{ scope.opt.town.name }} ({{
-                                                scope.opt.town.province.name
-                                            }},
-                                            {{
-                                                scope.opt.town.province.country.country
-                                            }})</QItemLabel
-                                        >
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectCreate>
-                    </div>
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('worker.create.province')"
-                            v-model="data.provinceFk"
-                            :options="provincesOptions"
-                            option-value="id"
-                            option-label="name"
-                            hide-selected
-                            :rules="validate('Worker.provinceFk')"
-                        />
                     </div>
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('worker.create.city')"
-                            v-model="data.city"
-                            :options="townsOptions"
-                            option-value="name"
-                            option-label="name"
-                            hide-selected
-                            :rules="validate('Worker.city')"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel>{{ scope.opt.name }}</QItemLabel>
-                                        <QItemLabel caption
-                                            >{{ scope.opt.name }},
-                                            {{ scope.opt.province.name }} ({{
-                                                scope.opt.province.country.country
-                                            }})</QItemLabel
-                                        >
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectFilter>
-                    </div>
                     <div class="col">
                         <VnInput
                             :label="t('worker.create.street')"

src/stores/useArrayDataStore.js

@@ -19,6 +19,7 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
             order: '',
             data: ref(),
             isLoading: false,
+            userParamsChanged: false,
             exprBuilder: null,
         };
     }

test/cypress/integration/VnLocation.spec.js

@@ -0,0 +1,31 @@
+const inputLocation = ':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control';
+const locationOptions ='[role="listbox"] > div.q-virtual-scroll__content > .q-item'
+describe('VnLocation', () => {
+    beforeEach(() => {
+        cy.viewport(1280, 720);
+        cy.login('developer');
+        cy.visit('/#/worker/create');
+        cy.waitForElement('.q-card');
+    });
+
+    it('Show all options', function() {
+      cy.get(inputLocation).click();
+      cy.get(locationOptions).should('have.length',5);
+    });
+
+    it('input filter location as "al"', function() {
+        cy.get(inputLocation).click();
+        cy.get(inputLocation).clear();
+        cy.get(inputLocation).type('al');
+        cy.get(locationOptions).should('have.length',3);
+    });
+    it('input filter location as "ecuador"', function() {
+        cy.get(inputLocation).click();
+        cy.get(inputLocation).clear();
+        cy.get(inputLocation).type('ecuador');
+        cy.get(locationOptions).should('have.length',1);
+        cy.get(`${locationOptions}:nth-child(1)`).click();
+        cy.get(':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > :nth-child(2) > .q-icon').click();
+
+    });
+})

test/cypress/integration/claim/claimAction.spec.js

@@ -31,7 +31,6 @@ describe('ClaimAction', () => {
 
     it('should regularize', () => {
         cy.get('[title="Regularize"]').click();
-        cy.clickConfirm();
     });
 
     it('should remove the line', () => {

test/cypress/integration/invoiceIn/invoiceInList.spec.js

@@ -9,6 +9,7 @@ describe('InvoiceInList', () => {
     beforeEach(() => {
         cy.login('developer');
         cy.visit(`/#/invoice-in`);
+        cy.clickFilterSearchBtn();
     });
 
     it('should redirect on clicking a invoice', () => {

test/cypress/integration/vnSearchBar.spec.js

@@ -0,0 +1,19 @@
+/// <reference types="cypress" />
+describe('VnSearchBar', () => {
+    beforeEach(() => {
+        cy.login('developer');
+        cy.visit('/');
+    });
+
+        it('should redirect to new customer', () => {
+            cy.visit('#/customer/1112/basic-data')
+            cy.openLeftMenu();
+            cy.get('.q-item > .q-item__label').should('have.text',' #1112')
+            cy.closeLeftMenu();
+            cy.clearSearchbar();
+            cy.writeSearchbar('1{enter}');
+            cy.openLeftMenu();
+            cy.get('.q-item > .q-item__label').should('have.text',' #1')
+            cy.closeLeftMenu();
+        });
+});

test/cypress/support/commands.js

@@ -163,7 +163,28 @@ Cypress.Commands.add('openRightMenu', (element) => {
     cy.get('#actions-append').click();
 });
 
+Cypress.Commands.add('openLeftMenu', (element) => {
+    if (element) cy.waitForElement(element);
+    cy.get('.q-toolbar > .q-btn--round.q-btn--dense > .q-btn__content > .q-icon').click();
+});
+Cypress.Commands.add('closeLeftMenu', (element) => {
+    if (element) cy.waitForElement(element);
+    cy.get('.fullscreen').click();
+});
+
+Cypress.Commands.add('clearSearchbar', (element) => {
+    if (element) cy.waitForElement(element);
+    cy.get('#searchbar > form > label > div:nth-child(1) input').clear();
+});
+
+Cypress.Commands.add('writeSearchbar', (value) => {
+    cy.get('#searchbar > form > label > div:nth-child(1) input').type(value);
+});
 Cypress.Commands.add('validateContent', (selector, expectedValue) => {
     cy.get(selector).should('have.text', expectedValue);
 });
+
+Cypress.Commands.add('clickFilterSearchBtn', () => {
+    cy.get('.q-item__section > .q-btn > .q-btn__content > .q-icon').click();
+});
 // registerCommands();

test/vitest/__tests__/components/Paginate.spec.js

@@ -119,7 +119,7 @@ describe('VnPaginate', () => {
             await vm.onLoad(index, done);
 
             expect(vm.pagination.page).toEqual(2);
-            expect(done).toHaveBeenCalledWith(true);
+            expect(done).toHaveBeenCalledWith(false);
         });
     });
 });

test/vitest/__tests__/components/common/VnSearchBar.spec.js

@@ -0,0 +1,53 @@
+import { vi, describe, expect, it, beforeAll, beforeEach, afterEach } from 'vitest';
+import { createWrapper, axios } from 'app/test/vitest/helper';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+
+
+describe('VnSearchBar', () => {
+    let vm;
+    let wrapper;
+
+    beforeAll(() => {
+        wrapper = createWrapper(VnSearchbar, {
+            propsData: {
+                dataKey: 'CustomerList',
+                label: 'Search customer',
+                info: 'Info customer',
+            },
+        });
+        vm = wrapper.vm;
+        vm.route.matched = [
+            {
+                path: '/',
+            },
+            {
+                path: '/customer',
+            },
+            {
+                path: '/customer/:id',
+            },
+            {
+                path: '/customer/:id/basic-data',
+            },
+        ];
+    });
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+    it('should be defined', async () => {
+        expect(vm.searchText).toBeDefined();
+        expect(vm.searchText).toEqual('');
+    });
+    it('should redirect', async () => {
+        vi.spyOn(vm.router,'push');
+        vm.searchText = '1';
+        await vm.search();
+        expect(vm.router.push).toHaveBeenCalledWith('/customer/1/basic-data');
+        vm.searchText = '1112';
+        expect(vm.searchText).toEqual('1112');
+        vi.spyOn(vm.router,'push');
+        await vm.search();
+        expect(vm.router.push).toHaveBeenCalledWith('/customer/1112/basic-data');
+     });
+});