Merge branch 'dev' into 7404-fixSomeStyleIssues

src/components/UserPanel.vue

@@ -13,12 +13,14 @@ import FetchData from 'components/FetchData.vue';
 import { useClipboard } from 'src/composables/useClipboard';
 import { useRole } from 'src/composables/useRole';
 import VnAvatar from './ui/VnAvatar.vue';
+import useNotify from 'src/composables/useNotify';
 
 const state = useState();
 const session = useSession();
 const router = useRouter();
 const { t, locale } = useI18n();
 const { copyText } = useClipboard();
+const { notify } = useNotify();
 
 const userLocale = computed({
     get() {
@@ -53,6 +55,7 @@ const user = state.getUser();
 const warehousesData = ref();
 const companiesData = ref();
 const accountBankData = ref();
+const isEmployee = computed(() => useRole().isEmployee());
 
 onMounted(async () => {
     updatePreferences();
@@ -70,18 +73,28 @@ function updatePreferences() {
 
 async function saveDarkMode(value) {
     const query = `/UserConfigs/${user.value.id}`;
-    await axios.patch(query, {
-        darkMode: value,
-    });
-    user.value.darkMode = value;
+    try {
+        await axios.patch(query, {
+            darkMode: value,
+        });
+        user.value.darkMode = value;
+        onDataSaved();
+    } catch (error) {
+        onDataError();
+    }
 }
 
 async function saveLanguage(value) {
     const query = `/VnUsers/${user.value.id}`;
-    await axios.patch(query, {
-        lang: value,
-    });
-    user.value.lang = value;
+    try {
+        await axios.patch(query, {
+            lang: value,
+        });
+        user.value.lang = value;
+        onDataSaved();
+    } catch (error) {
+        onDataError();
+    }
 }
 
 function logout() {
@@ -97,11 +110,23 @@ function localUserData() {
     state.setUser(user.value);
 }
 
-function saveUserData(param, value) {
-    axios.post('UserConfigs/setUserConfig', { [param]: value });
-    localUserData();
+async function saveUserData(param, value) {
+    try {
+        await axios.post('UserConfigs/setUserConfig', { [param]: value });
+        localUserData();
+        onDataSaved();
+    } catch (error) {
+        onDataError();
+    }
 }
-const isEmployee = computed(() => useRole().isEmployee());
+
+const onDataSaved = () => {
+    notify('globals.dataSaved', 'positive');
+};
+
+const onDataError = () => {
+    notify('errors.updateUserConfig', 'negative');
+};
 </script>
 
 <template>

src/components/common/VnLocation.vue

@@ -12,14 +12,43 @@ const props = defineProps({
         default: null,
     },
 });
+const formatLocation = (obj, properties) => {
+    const parts = properties.map((prop) => {
+        if (typeof prop === 'string') {
+            return obj[prop];
+        } else if (typeof prop === 'function') {
+            return prop(obj);
+        }
+        return null;
+    });
+
+    const filteredParts = parts.filter(
+        (part) => part !== null && part !== undefined && part !== ''
+    );
+
+    return filteredParts.join(', ');
+};
+
+const locationProperties = [
+    'postcode',
+    (obj) =>
+        obj.city
+            ? `${obj.city}${obj.province?.name ? `(${obj.province.name})` : ''}`
+            : null,
+    (obj) => obj.country?.name,
+];
 const modelValue = ref(
-    props.location
-        ? `${props.location?.postcode}, ${props.location?.city}(${props.location?.province?.name}), ${props.location?.country?.name}`
-        : null
+    props.location ? formatLocation(props.location, locationProperties) : null
 );
 function showLabel(data) {
-    return `${data.code}, ${data.town}(${data.province}), ${data.country}`;
+    const dataProperties = [
+        'code',
+        (obj) => (obj.town ? `${obj.town}(${obj.province})` : null),
+        'country',
+    ];
+    return formatLocation(data, dataProperties);
 }
+
 const handleModelValue = (data) => {
     emit('update:model-value', data);
 };

src/i18n/locale/en.yml

@@ -305,6 +305,7 @@ errors:
     statusBadGateway: It seems that the server has fall down
     statusGatewayTimeout: Could not contact the server
     userConfig: Error fetching user config
+    updateUserConfig: Error updating user config
     tokenConfig: Error fetching token config
     writeRequest: The requested operation could not be completed
 login:

src/i18n/locale/es.yml

@@ -309,6 +309,7 @@ errors:
     statusBadGateway: Parece ser que el servidor ha caído
     statusGatewayTimeout: No se ha podido contactar con el servidor
     userConfig: Error al obtener configuración de usuario
+    updateUserConfig: Error al actualizar la configuración de usuario
     tokenConfig: Error al obtener configuración de token
     writeRequest: No se pudo completar la operación solicitada
 login:

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

@@ -0,0 +1,58 @@
+/// <reference types="cypress" />
+describe('UserPanel', () => {
+    beforeEach(() => {
+        cy.viewport(1280, 720);
+        cy.login('developer');
+        cy.visit(`/#dashboard`);
+        cy.waitForElement('.q-page', 6000);
+    });
+
+    it('should notify when update user warehouse', () => {
+        const userWarehouse =
+            '.q-menu .q-gutter-xs > :nth-child(3) > .q-field > .q-field__inner > .q-field__control > .q-field__control-container > .q-field__native> .q-field__input';
+
+        // Abro el panel
+        cy.openUserPanel();
+
+        // Compruebo la opcion inicial
+        cy.get(userWarehouse).should('have.value', 'VNL').click();
+
+        // Actualizo la opción
+        getOption(3);
+
+        //Compruebo la notificación
+        cy.get('.q-notification').should('be.visible');
+        cy.get(userWarehouse).should('have.value', 'VNH');
+
+        //Restauro el valor
+        cy.get(userWarehouse).click();
+        getOption(2);
+    });
+    it('should notify when update user company', () => {
+        const userCompany =
+            '.q-menu .q-gutter-xs > :nth-child(2)  >  .q-field--float > .q-field__inner > .q-field__control > .q-field__control-container > .q-field__native> .q-field__input';
+
+        // Abro el panel
+        cy.openUserPanel();
+
+        // Compruebo la opcion inicial
+        cy.get(userCompany).should('have.value', 'Warehouse One').click();
+
+        //Actualizo la opción
+        getOption(2);
+
+        //Compruebo la notificación
+        cy.get('.q-notification').should('be.visible');
+        cy.get(userCompany).should('have.value', 'Warehouse Two');
+
+        //Restauro el valor
+        cy.get(userCompany).click();
+        getOption(1);
+    });
+});
+
+function getOption(index) {
+    cy.waitForElement('[role="listbox"]');
+    const option = `[role="listbox"] .q-item:nth-child(${index})`;
+    cy.get(option).click();
+}

test/cypress/support/commands.js

@@ -248,3 +248,9 @@ Cypress.Commands.add('validateContent', (selector, expectedValue) => {
 Cypress.Commands.add('openActionsDescriptor', () => {
     cy.get('.header > :nth-child(3) > .q-btn__content > .q-icon').click();
 });
+
+Cypress.Commands.add('openUserPanel', () => {
+    cy.get(
+        '.column > .q-avatar > .q-avatar__content > .q-img > .q-img__container > .q-img__image'
+    ).click();
+});