Merge branch '8197-VnCardMain' of https://gitea.verdnatura.es/verdnatura/salix-front into 8197-VnCardMain

src/components/CrudModel.vue

@@ -176,14 +176,13 @@ async function saveChanges(data) {
     const changes = data || getChanges();
     try {
         await axios.post($props.saveUrl || $props.url + '/crud', changes);
-    } catch (e) {
-        return (isLoading.value = false);
+    } finally {
+        isLoading.value = false;
     }
     originalData.value = JSON.parse(JSON.stringify(formData.value));
     if (changes.creates?.length) await vnPaginateRef.value.fetch();
 
     hasChanges.value = false;
-    isLoading.value = false;
     emit('saveChanges', data);
     quasar.notify({
         type: 'positive',

src/components/common/VnSelect.vue

@@ -8,7 +8,14 @@ import dataByOrder from 'src/utils/dataByOrder';
 const emit = defineEmits(['update:modelValue', 'update:options', 'remove']);
 const $attrs = useAttrs();
 const { t } = useI18n();
-const { isRequired, requiredFieldRule } = useRequired($attrs);
+
+const isRequired = computed(() => {
+    return useRequired($attrs).isRequired;
+});
+const requiredFieldRule = computed(() => {
+    return useRequired($attrs).requiredFieldRule;
+});
+
 const $props = defineProps({
     modelValue: {
         type: [String, Number, Object],
@@ -284,9 +291,9 @@ async function onScroll({ to, direction, from, index }) {
         :loading="isLoading"
         @virtual-scroll="onScroll"
     >
-        <template v-if="isClearable" #append>
+        <template #append>
             <QIcon
-                v-show="value"
+                v-show="isClearable && value"
                 name="close"
                 @click.stop="
                     () => {
@@ -299,7 +306,22 @@ async function onScroll({ to, direction, from, index }) {
             />
         </template>
         <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
-            <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
+            <div v-if="slotName == 'append'">
+                <QIcon
+                    v-show="isClearable && value"
+                    name="close"
+                    @click.stop="
+                        () => {
+                            value = null;
+                            emit('remove');
+                        }
+                    "
+                    class="cursor-pointer"
+                    size="xs"
+                />
+                <slot name="append" v-if="$slots.append" v-bind="slotData ?? {}" />
+            </div>
+            <slot v-else :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
         </template>
     </QSelect>
 </template>

src/components/ui/VnFilterPanel.vue

@@ -79,7 +79,7 @@ const userParams = ref({});
 defineExpose({ search, sanitizer, params: userParams });
 
 onMounted(() => {
-    userParams.value = $props.modelValue ?? {};
+    if (!userParams.value) userParams.value = $props.modelValue ?? {};
     emit('init', { params: userParams.value });
 });
 
@@ -105,7 +105,8 @@ watch(
 
 watch(
     () => arrayData.store.userParams,
-    (val, oldValue) => (val || oldValue) && setUserParams(val)
+    (val, oldValue) => (val || oldValue) && setUserParams(val),
+    { immediate: true }
 );
 
 watch(

src/components/ui/VnLinkPhone.vue

@@ -1,23 +1,28 @@
 <script setup>
-import { reactive, useAttrs, onBeforeMount, capitalize } from 'vue';
+import { ref, reactive, useAttrs, onBeforeMount, capitalize } from 'vue';
 import axios from 'axios';
 import { parsePhone } from 'src/filters';
+import useOpenURL from 'src/composables/useOpenURL';
+
 const props = defineProps({
     phoneNumber: { type: [String, Number], default: null },
     channel: { type: Number, default: null },
+    country: { type: String, default: null },
 });
 
+const phone = ref(props.phoneNumber);
 const config = reactive({
     sip: { icon: 'phone', href: `sip:${props.phoneNumber}` },
     'say-simple': {
         icon: 'vn:saysimple',
-        href: null,
+        url: null,
         channel: props.channel,
     },
 });
 const type = Object.keys(config).find((key) => key in useAttrs()) || 'sip';
 
 onBeforeMount(async () => {
+    if (!phone.value) return;
     let { channel } = config[type];
 
     if (type === 'say-simple') {
@@ -25,23 +30,28 @@ onBeforeMount(async () => {
             .data;
         if (!channel) channel = defaultChannel;
 
-        config[type].href = `${url}?customerIdentity=%2B${parsePhone(
-            props.phoneNumber
-        )}&channelId=${channel}`;
+        phone.value = await parsePhone(props.phoneNumber, props.country.toLowerCase());
+        config[
+            type
+        ].url = `${url}?customerIdentity=%2B${phone.value}&channelId=${channel}`;
     }
 });
+
+function handleClick() {
+    if (config[type].url) useOpenURL(config[type].url);
+    else if (config[type].href) window.location.href = config[type].href;
+}
 </script>
 <template>
     <QBtn
-        v-if="phoneNumber"
+        v-if="phone"
         flat
         round
         :icon="config[type].icon"
         size="sm"
         color="primary"
         padding="none"
-        :href="config[type].href"
-        @click.stop
+        @click.stop="handleClick"
     >
         <QTooltip>
             {{ capitalize(type).replace('-', '') }}

src/composables/useRequired.js

@@ -2,8 +2,14 @@ import { useValidator } from 'src/composables/useValidator';
 
 export function useRequired($attrs) {
     const { validations } = useValidator();
-
-    const isRequired = Object.keys($attrs).includes('required');
+    const hasRequired = Object.keys($attrs).includes('required');
+    let isRequired = false;
+    if (hasRequired) {
+        const required = $attrs['required'];
+        if (typeof required === 'boolean') {
+            isRequired = required;
+        }
+    }
     const requiredFieldRule = (val) => validations().required(isRequired, val);
 
     return {

src/filters/parsePhone.js

@@ -1,12 +1,18 @@
-export default function (phone, prefix = 34) {
-    if (phone.startsWith('+')) {
-        return `${phone.slice(1)}`;
-    }
-    if (phone.startsWith('00')) {
-        return `${phone.slice(2)}`;
-    }
-    if (phone.startsWith(prefix) && phone.length === prefix.length + 9) {
-        return `${prefix}${phone.slice(prefix.length)}`;
+import axios from 'axios';
+
+export default async function parsePhone(phone, country) {
+    if (!phone) return;
+    if (phone.startsWith('+')) return `${phone.slice(1)}`;
+    if (phone.startsWith('00')) return `${phone.slice(2)}`;
+
+    let prefix;
+    try {
+        prefix = (await axios.get(`Prefixes/${country.toLowerCase()}`)).data?.prefix;
+    } catch (e) {
+        prefix = (await axios.get('PbxConfigs/findOne')).data?.defaultPrefix;
     }
+    prefix = prefix.replace(/^0+/, '');
+
+    if (phone.startsWith(prefix)) return phone;
     return `${prefix}${phone}`;
 }

src/i18n/locale/en.yml

@@ -330,6 +330,7 @@ globals:
         fi: FI
         myTeam: My team
         departmentFk: Department
+        countryFk: Country
     changePass: Change password
     deleteConfirmTitle: Delete selected elements
     changeState: Change state

src/i18n/locale/es.yml

@@ -334,6 +334,7 @@ globals:
         SSN: NSS
         fi: NIF
         myTeam: Mi equipo
+        countryFk: País
     changePass: Cambiar contraseña
     deleteConfirmTitle: Eliminar los elementos seleccionados
     changeState: Cambiar estado

src/pages/Customer/Card/CustomerFiscalData.vue

@@ -67,6 +67,7 @@ function handleLocation(data, location) {
                     option-label="vat"
                     option-value="id"
                     v-model="data.sageTaxTypeFk"
+                    data-cy="sageTaxTypeFk"
                     :required="data.isTaxDataChecked"
                 />
                 <VnSelect
@@ -75,6 +76,7 @@ function handleLocation(data, location) {
                     hide-selected
                     option-label="transaction"
                     option-value="id"
+                    data-cy="sageTransactionTypeFk"
                     v-model="data.sageTransactionTypeFk"
                     :required="data.isTaxDataChecked"
                 >

src/pages/Customer/Card/CustomerSummary.vue

@@ -95,6 +95,7 @@ const sumRisk = ({ clientRisks }) => {
                             :phone-number="entity.mobile"
                             :channel="entity.country?.saySimpleCountry?.channel"
                             class="q-ml-xs"
+                            :country="entity.country?.code"
                         />
                     </template>
                 </VnLv>

src/pages/Customer/Card/CustomerWebAccess.vue

@@ -42,13 +42,13 @@ async function hasCustomerRole() {
     >
         <template #form="{ data, validate }">
             <QCheckbox :label="t('Enable web access')" v-model="data.account.active" />
-            <VnInput :label="t('User')" clearable v-model="data.name" />
+            <VnInput :label="t('User')" clearable v-model="data.account.name" />
             <VnInput
                 :label="t('Recovery email')"
                 :rules="validate('client.email')"
                 clearable
                 type="email"
-                v-model="data.email"
+                v-model="data.account.email"
                 class="q-mt-sm"
                 :info="t('This email is used for user to regain access their account')"
             />

src/pages/Customer/components/CustomerAddressCreate.vue

@@ -18,8 +18,6 @@ const router = useRouter();
 
 const formInitialData = reactive({ isDefaultAddress: false });
 
-const urlCreate = ref('');
-
 const agencyModes = ref([]);
 const incoterms = ref([]);
 const customsAgents = ref([]);
@@ -40,13 +38,18 @@ function handleLocation(data, location) {
     data.countryFk = countryFk;
 }
 
-function onAgentCreated(requestResponse, data) {
-    customsAgents.value.push(requestResponse);
-    data.customsAgentFk = requestResponse.id;
+function onAgentCreated({ id, fiscalName }, data) {
+    customsAgents.value.push({ id, fiscalName });
+    data.customsAgentFk = id;
 }
 </script>
 
 <template>
+    <FetchData
+        @on-fetch="(data) => (customsAgents = data)"
+        auto-load
+        url="CustomsAgents"
+    />
     <FetchData
         @on-fetch="(data) => (agencyModes = data)"
         auto-load
@@ -57,7 +60,7 @@ function onAgentCreated(requestResponse, data) {
     <FormModel
         :form-initial-data="formInitialData"
         :observe-form-changes="false"
-        :url-create="urlCreate"
+        :url-create="`Clients/${route.params.id}/createAddress`"
         @on-data-saved="toCustomerAddress()"
         model="client"
     >
@@ -141,8 +144,7 @@ function onAgentCreated(requestResponse, data) {
                     <template #form>
                         <CustomerNewCustomsAgent
                             @on-data-saved="
-                                (_, requestResponse) =>
-                                    onAgentCreated(requestResponse, data)
+                                (requestResponse) => onAgentCreated(requestResponse, data)
                             "
                         />
                     </template>

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -37,7 +37,7 @@ const columns = computed(() => [
         },
         isId: true,
         columnFilter: {
-            name: 'search',
+            name: 'id',
         },
     },
     {
@@ -74,7 +74,9 @@ const columns = computed(() => [
         component: 'select',
         attrs: {
             url: 'Clients',
-            fields: ['id', 'name'],
+            fields: ['id', 'socialName'],
+            optionLabel: 'socialName',
+            optionValue: 'id',
         },
         columnField: {
             component: null,

src/pages/InvoiceOut/locale/es.yml

@@ -10,7 +10,7 @@ invoiceOutList:
         ref: Referencia
         issued: Fecha emisión
         created: F. creación
-        dueDate: F. máxima
+        dueDate: Fecha vencimiento
         invoiceOutSerial: Serial
         ticket: Ticket
         taxArea: Area

src/pages/Item/Card/ItemTags.vue

@@ -138,6 +138,7 @@ const insertTag = (rows) => {
                                 :required="false"
                                 :rules="validate('itemTag.tagFk')"
                                 :use-like="false"
+                                sort-by="value"
                             />
                             <VnInput
                                 v-else-if="

src/pages/Monitor/Ticket/MonitorTicketFilter.vue

@@ -59,7 +59,11 @@ const getLocale = (label) => {
         </template>
         <template #customTags="{ params, searchFn, formatFn }">
             <VnFilterPanelChip
-                v-if="params.scopeDays !== null"
+                v-if="
+                    params.scopeDays !== undefined ||
+                    params.scopeDays !== '' ||
+                    params.scopeDays !== null
+                "
                 removable
                 @remove="handleScopeDays(params, null, searchFn)"
             >
@@ -197,6 +201,18 @@ const getLocale = (label) => {
                     />
                 </QItemSection>
             </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        outlined
+                        dense
+                        rounded
+                        :label="t('globals.params.countryFk')"
+                        v-model="params.countryFk"
+                        url="Countries"
+                    />
+                </QItemSection>
+            </QItem>
             <QItem>
                 <QItemSection>
                     <VnSelect

src/pages/Supplier/Card/SupplierAccounts.vue

@@ -24,13 +24,14 @@ const supplier = ref(null);
 const supplierAccountRef = ref(null);
 const wireTransferFk = ref(null);
 const bankEntitiesOptions = ref([]);
+const filteredBankEntitiesOptions = ref([]);
 
 const onBankEntityCreated = async (dataSaved, rowData) => {
     await bankEntitiesRef.value.fetch();
     rowData.bankEntityFk = dataSaved.id;
 };
 
-const onChangesSaved = () => {
+const onChangesSaved = async () => {
     if (supplier.value.payMethodFk !== wireTransferFk.value)
         quasar
             .dialog({
@@ -55,12 +56,35 @@ const setWireTransfer = async () => {
     await axios.patch(`Suppliers/${route.params.id}`, params);
     notify('globals.dataSaved', 'positive');
 };
+
+function findBankFk(value, row) {
+    row.bankEntityFk = null;
+    if (!value) return;
+
+    const bankEntityFk = bankEntitiesOptions.value.find((b) => b.id == value.slice(4, 8));
+    if (bankEntityFk) row.bankEntityFk = bankEntityFk.id;
+}
+
+function bankEntityFilter(val, update) {
+    update(() => {
+        const needle = val.toLowerCase();
+        filteredBankEntitiesOptions.value = bankEntitiesOptions.value.filter(
+            (bank) =>
+                bank.bic.toLowerCase().startsWith(needle) ||
+                bank.name.toLowerCase().includes(needle)
+        );
+    });
+}
 </script>
 <template>
     <FetchData
         ref="bankEntitiesRef"
         url="BankEntities"
-        @on-fetch="(data) => (bankEntitiesOptions = data)"
+        @on-fetch="
+            (data) => {
+                (bankEntitiesOptions = data), (filteredBankEntitiesOptions = data);
+            }
+        "
         auto-load
     />
     <FetchData
@@ -98,6 +122,7 @@ const setWireTransfer = async () => {
                     <VnInput
                         :label="t('supplier.accounts.iban')"
                         v-model="row.iban"
+                        @update:model-value="(value) => findBankFk(value, row)"
                         :required="true"
                     >
                         <template #append>
@@ -109,7 +134,9 @@ const setWireTransfer = async () => {
                     <VnSelectDialog
                         :label="t('worker.create.bankEntity')"
                         v-model="row.bankEntityFk"
-                        :options="bankEntitiesOptions"
+                        :options="filteredBankEntitiesOptions"
+                        :default-filter="false"
+                        @filter="(val, update) => bankEntityFilter(val, update)"
                         option-label="bic"
                         option-value="id"
                         hide-selected

src/pages/Travel/Card/TravelCard.vue

@@ -7,13 +7,13 @@ import filter from './TravelFilter.js';
     <VnCard
         data-key="Travel"
         base-url="Travels"
-        search-data-key="TravelList"
-        :filter="filter"
         :descriptor="TravelDescriptor"
+        :filter="filter"
+        search-data-key="TravelList"
         :searchbar-props="{
-            url: 'Travels',
+            url: 'Travels/filter',
+            searchUrl: 'table',
             label: 'Search travel',
-            info: 'You can search by travel id or name',
         }"
     />
 </template>

src/pages/Travel/TravelList.vue

@@ -208,6 +208,7 @@ const columns = computed(() => [
         ref="tableRef"
         data-key="TravelList"
         url="Travels/filter"
+        redirect="travel"
         :create="{
             urlCreate: 'Travels',
             title: t('Create Travels'),
@@ -221,9 +222,7 @@ const columns = computed(() => [
         order="landed DESC"
         :columns="columns"
         auto-load
-        redirect="travel"
         :is-editable="false"
-        :use-model="true"
     >
         <template #column-status="{ row }">
             <div class="row">

src/router/modules/travel.js

@@ -75,9 +75,9 @@ export default {
                 },
                 {
                     name: 'TravelHistory',
-                    path: 'history',
+                    path: 'log',
                     meta: {
-                        title: 'history',
+                        title: 'log',
                         icon: 'history',
                     },
                     component: () => import('src/pages/Travel/Card/TravelLog.vue'),

src/router/modules/zone.js

@@ -106,7 +106,7 @@ export default {
                 },
                 {
                     name: 'ZoneHistory',
-                    path: 'history',
+                    path: 'log',
                     meta: {
                         title: 'log',
                         icon: 'history',

src/utils/dataByOrder.js

@@ -1,6 +1,7 @@
 function orderData(data, order) {
     if (typeof order === 'function') return data.sort(data);
     if (typeof order === 'string') order = [order];
+    if (!Array.isArray(data)) return [];
     if (Array.isArray(order)) {
         let orderComp = [];
 

test/cypress/integration/client/clientFiscalData.spec.js

@@ -3,11 +3,16 @@ describe('Client fiscal data', () => {
     beforeEach(() => {
         cy.viewport(1280, 720);
         cy.login('developer');
-        cy.visit('#/customer/1110/fiscal-data', {
+        cy.visit('#/customer/1107/fiscal-data', {
             timeout: 5000,
         });
     });
-    it('Should load layout', () => {
+    it('Should change required value when change customer', () => {
         cy.get('.q-card').should('be.visible');
+        cy.dataCy('sageTaxTypeFk').filter('input').should('not.have.attr', 'required');
+        cy.get('#searchbar input').clear();
+        cy.get('#searchbar input').type('1{enter}');
+        cy.get('.q-item > .q-item__label').should('have.text', ' #1');
+        cy.dataCy('sageTaxTypeFk').filter('input').should('have.attr', 'required');
     });
 });

test/cypress/integration/vnComponent/vnBreadcrumbs.spec.js

@@ -3,6 +3,7 @@ describe('VnBreadcrumbs', () => {
     const firstCard = '.q-infinite-scroll > :nth-child(1)';
     const lastBreadcrumb = '.q-breadcrumbs--last > .q-breadcrumbs__el';
     beforeEach(() => {
+        cy.viewport(1920, 1080);
         cy.login('developer');
         cy.visit('/');
     });

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

@@ -1,29 +1,50 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, beforeAll, vi } from 'vitest';
+import { axios } from 'app/test/vitest/helper';
 import parsePhone from 'src/filters/parsePhone';
 
 describe('parsePhone filter', () => {
-    it("adds prefix +34 if it doesn't have one", () => {
-        const resultado = parsePhone('123456789', '34');
-        expect(resultado).toBe('34123456789');
+    beforeAll(async () => {
+        vi.spyOn(axios, 'get').mockReturnValue({ data: { prefix: '34' } });
     });
 
-    it('maintains prefix +34 if it is already correct', () => {
-        const resultado = parsePhone('+34123456789', '34');
-        expect(resultado).toBe('34123456789');
+    it('no phone', async () => {
+        const phone = await parsePhone(null, '34');
+        expect(phone).toBe(undefined);
     });
 
-    it('converts prefix 0034 to +34', () => {
-        const resultado = parsePhone('0034123456789', '34');
-        expect(resultado).toBe('34123456789');
+    it("adds prefix +34 if it doesn't have one", async () => {
+        const phone = await parsePhone('123456789', '34');
+        expect(phone).toBe('34123456789');
     });
 
-    it('converts prefix 34 without symbol to +34', () => {
-        const resultado = parsePhone('34123456789', '34');
-        expect(resultado).toBe('34123456789');
+    it('maintains prefix +34 if it is already correct', async () => {
+        const phone = await parsePhone('+34123456789', '34');
+        expect(phone).toBe('34123456789');
     });
 
-    it('replaces incorrect prefix with the correct one', () => {
-        const resultado = parsePhone('+44123456789', '34');
-        expect(resultado).toBe('44123456789');
+    it('converts prefix 0034 to +34', async () => {
+        const phone = await parsePhone('0034123456789', '34');
+        expect(phone).toBe('34123456789');
+    });
+
+    it('converts prefix 34 without symbol to +34', async () => {
+        const phone = await parsePhone('34123456789', '34');
+        expect(phone).toBe('34123456789');
+    });
+
+    it('replaces incorrect prefix with the correct one', async () => {
+        const phone = await parsePhone('+44123456789', '34');
+        expect(phone).toBe('44123456789');
+    });
+
+    it('adds default prefix on error', async () => {
+        vi.spyOn(axios, 'get').mockImplementation((url) => {
+            if (url.includes('Prefixes'))
+                return Promise.reject(new Error('Network error'));
+            else if (url.includes('PbxConfigs'))
+                return Promise.resolve({ data: { defaultPrefix: '39' } });
+        });
+        const phone = await parsePhone('123456789', '34');
+        expect(phone).toBe('39123456789');
     });
 });

test/vitest/helper.js

@@ -44,7 +44,18 @@ vi.mock('vue-router', () => ({
 vi.mock('axios');
 
 vi.spyOn(useValidator, 'useValidator').mockImplementation(() => {
-    return { validate: vi.fn() };
+    return {
+        validate: vi.fn(),
+        validations: () => ({
+            format: vi.fn(),
+            presence: vi.fn(),
+            required: vi.fn(),
+            length: vi.fn(),
+            numericality: vi.fn(),
+            min: vi.fn(),
+            custom: vi.fn(),
+        }),
+    };
 });
 
 class FormDataMock {