Merge pull request 'feat: #8655 added button for scrolling up' (!1523) from 8655-scrollUpButton into dev

Reviewed-on: #1523
Reviewed-by: Pablo Natek <pablone@verdnatura.es>
Reviewed-by: Alex Moreno <alexm@verdnatura.es>

package.json

@@ -1,6 +1,6 @@
 {
     "name": "salix-front",
-    "version": "25.16.0",
+    "version": "25.18.0",
     "description": "Salix frontend",
     "productName": "Salix",
     "author": "Verdnatura",

src/App.vue

@@ -2,6 +2,7 @@
 import { onMounted } from 'vue';
 import { useQuasar, Dark } from 'quasar';
 import { useI18n } from 'vue-i18n';
+import VnScroll from './components/common/VnScroll.vue';
 
 const quasar = useQuasar();
 const { availableLocales, locale, fallbackLocale } = useI18n();
@@ -38,6 +39,7 @@ quasar.iconMapFn = (iconName) => {
 
 <template>
     <RouterView />
+    <VnScroll/>
 </template>
 
 <style lang="scss">

src/components/FormModel.vue

@@ -406,6 +406,7 @@ defineExpose({
             </QBtnDropdown>
             <QBtn
                 v-else
+                data-cy="saveDefaultBtn"
                 :label="tMobile('globals.save')"
                 color="primary"
                 icon="save"

src/components/VnTable/VnTable.vue

@@ -33,6 +33,7 @@ import VnTableOrder from 'src/components/VnTable/VnOrder.vue';
 import VnTableFilter from './VnTableFilter.vue';
 import { getColAlign } from 'src/composables/getColAlign';
 import RightMenu from '../common/RightMenu.vue';
+import VnScroll from '../common/VnScroll.vue'
 
 const arrayData = useArrayData(useAttrs()['data-key']);
 const $props = defineProps({
@@ -168,6 +169,7 @@ const params = ref(useFilterParams($attrs['data-key']).params);
 const orders = ref(useFilterParams($attrs['data-key']).orders);
 const app = inject('app');
 const tableHeight = useTableHeight();
+const vnScrollRef = ref(null);
 
 const editingRow = ref(null);
 const editingField = ref(null);
@@ -189,6 +191,17 @@ const tableModes = [
     },
 ];
 
+const onVirtualScroll = ({ to }) => {
+    handleScroll();
+    const virtualScrollContainer = tableRef.value?.$el?.querySelector('.q-table__middle');
+    if (virtualScrollContainer) {
+      virtualScrollContainer.dispatchEvent(new CustomEvent('scroll'));
+      if (vnScrollRef.value) {
+        vnScrollRef.value.updateScrollContainer(virtualScrollContainer);
+      }
+    }
+};
+
 onBeforeMount(() => {
     const urlParams = route.query[$props.searchUrl];
     hasParams.value = urlParams && Object.keys(urlParams).length !== 0;
@@ -327,16 +340,13 @@ function handleOnDataSaved(_) {
     if (_.onDataSaved) _.onDataSaved({ CrudModelRef: CrudModelRef.value });
     else $props.create.onDataSaved(_);
 }
-
 function handleScroll() {
     if ($props.crudModel.disableInfiniteScroll) return;		
-
     const tMiddle = tableRef.value.$el.querySelector('.q-table__middle');		
     const { scrollHeight, scrollTop, clientHeight } = tMiddle;		
     const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) <= 40;		
     if (isAtBottom) CrudModelRef.value.vnPaginateRef.paginate();		
 }
-
 function handleSelection({ evt, added, rows: selectedRows }, rows) {
     if (evt?.shiftKey && added) {
         const rowIndex = selectedRows[0].$index;
@@ -669,9 +679,9 @@ const rowCtrlClickFunction = computed(() => {
                 ref="tableRef"
                 v-bind="table"
                 :class="[
-                    'vnTable',
-                    table ? 'selection-cell' : '',
-                    $props.footer ? 'last-row-sticky' : '',
+                  'vnTable',
+                  table ? 'selection-cell' : '',
+                  $props.footer ? 'last-row-sticky' : '',
                 ]"
                 wrap-cells
                 :columns="splittedColumns.columns"
@@ -683,7 +693,7 @@ const rowCtrlClickFunction = computed(() => {
                 flat
                 :style="isTableMode && `max-height: ${$props.tableHeight || tableHeight}`"
                 :virtual-scroll="isTableMode"
-                @virtual-scroll="handleScroll"
+                @virtual-scroll="onVirtualScroll"
                 @row-click="(event, row) => handleRowClick(event, row)"
                 @update:selected="emit('update:selected', $event)"
                 @selection="(details) => handleSelection(details, rows)"
@@ -1087,6 +1097,11 @@ const rowCtrlClickFunction = computed(() => {
             </template>
         </FormModelPopup>
     </QDialog>
+    <VnScroll 
+      ref="vnScrollRef"
+      v-if="isTableMode"
+      :scroll-target="tableRef?.$el?.querySelector('.q-table__middle')"
+    />
 </template>
 <i18n>
 en:

src/components/common/VnScroll.vue

@@ -0,0 +1,100 @@
+<script setup>
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
+
+const props = defineProps({
+    scrollTarget: { type: [String, Object], default: 'window' }
+});
+
+const scrollPosition = ref(0);
+const showButton = ref(false);
+let scrollContainer = null;
+
+const onScroll = () => {
+    if (!scrollContainer) return;
+    scrollPosition.value = 
+        typeof props.scrollTarget === 'object' 
+            ? scrollContainer.scrollTop 
+            : window.scrollY;
+};
+
+watch(scrollPosition, (newValue) => {
+    showButton.value = newValue > 0;
+});
+
+const scrollToTop = () => {
+    if (scrollContainer) {
+        scrollContainer.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+};
+
+const updateScrollContainer = (container) => {
+  if (container) {
+    if (scrollContainer) {
+      scrollContainer.removeEventListener('scroll', onScroll);
+    }
+    scrollContainer = container;
+    scrollContainer.addEventListener('scroll', onScroll);
+    onScroll();
+  }
+};
+
+defineExpose({
+  updateScrollContainer
+});
+
+const initScrollContainer = async () => {
+    await nextTick();
+
+    if (typeof props.scrollTarget === 'object') {
+        scrollContainer = props.scrollTarget;
+    } else {
+        scrollContainer = window;
+    }
+
+    if (!scrollContainer) return
+        scrollContainer.addEventListener('scroll', onScroll);    
+};
+
+
+onMounted(() => {
+    initScrollContainer();
+});
+
+onUnmounted(() => {
+    if (scrollContainer) {
+        scrollContainer.removeEventListener('scroll', onScroll);
+        scrollContainer = null;
+    }
+});
+</script>
+
+<template>
+    <QIcon
+        v-if="showButton"
+        color="primary"
+        name="keyboard_arrow_up"
+        class="scroll-to-top"
+        @click="scrollToTop"
+    >
+        <QTooltip>{{ $t('globals.scrollToTop') }}</QTooltip>
+    </QIcon>
+</template>
+
+<style scoped>
+.scroll-to-top {
+  position: fixed;
+  top: 70px;
+  font-size: 65px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1000;
+  transition: transform 0.2s ease-in-out;
+}
+
+.scroll-to-top:hover {
+  transform: translateX(-50%) scale(1.2);
+  cursor: pointer;
+  filter: brightness(0.8);
+}
+</style>
+

src/components/common/VnSmsDialog.vue

@@ -232,7 +232,7 @@ fr:
     pt: Portugais
 pt:
     Send SMS: Enviar SMS
-    CustomerDefaultLanguage: Este cliente utiliza o <strong>{locale}</strong> como seu idioma padrão
+    CustomerDefaultLanguage: Este cliente utiliza o {locale} como seu idioma padrão
     Language: Linguagem
     Phone: Móvel
     Subject: Assunto

src/i18n/locale/en.yml

@@ -6,6 +6,7 @@ globals:
     quantity: Quantity
     entity: Entity
     preview: Preview
+    scrollToTop: Go up
     user: User
     details: Details
     collapseMenu: Collapse lateral menu

src/i18n/locale/es.yml

@@ -6,6 +6,7 @@ globals:
     quantity: Cantidad
     entity: Entidad
     preview: Vista previa
+    scrollToTop: Ir arriba
     user: Usuario
     details: Detalles
     collapseMenu: Contraer menú lateral

src/pages/Customer/Card/CustomerConsumption.vue

@@ -18,7 +18,7 @@ import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import VnSelect from 'components/common/VnSelect.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 
-const arrayData = useArrayData('Client');
+const arrayData = useArrayData('Customer');
 const { t } = useI18n();
 const route = useRoute();
 const campaignList = ref();
@@ -260,7 +260,7 @@ const updateDateParams = (value, params) => {
                     :label="t('globals.campaign')"
                     :filled="true"
                     class="q-px-sm q-pt-none fit"
-                    :option-label="(opt) => t(opt.code)"
+                    :option-label="(opt) => t(opt.code ?? '')"
                     :fields="['id', 'code', 'dated', 'scopeDays']"
                     @update:model-value="(data) => updateDateParams(data, params)"
                     dense

src/pages/Customer/Card/CustomerSamples.vue

@@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
 import { QBtn, useQuasar } from 'quasar';
-
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import { toDateTimeFormat } from 'src/filters/date';
 import VnTable from 'src/components/VnTable/VnTable.vue';
@@ -34,7 +33,7 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        format: (row) => row.type.description,
+        format: (row) => row?.type?.description,
         label: t('Description'),
         name: 'description',
     },
@@ -74,12 +73,11 @@ const tableRef = ref();
 <template>
     <VnTable
         ref="tableRef"
-        data-key="ClientSamples"
+        data-key="CustomerSamples"
         auto-load
-        :filter="filter"
+        :user-filter="filter"
         url="ClientSamples"
         :columns="columns"
-        :pagination="{ rowsPerPage: 12 }"
         :disable-option="{ card: true }"
         :right-search="false"
         :rows="rows"

src/pages/Ticket/TicketFilter.vue

@@ -42,7 +42,11 @@ const groupedStates = ref([]);
         auto-load
     />
     <FetchData url="Warehouses" @on-fetch="(data) => (warehouses = data)" auto-load />
-    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+    <VnFilterPanel
+        :data-key="props.dataKey"
+        :search-button="true"
+        :unremovableParams="['from', 'to']"
+    >
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
                 <strong>{{ t(`params.${tag.label}`) }}: </strong>

src/pages/Zone/Card/ZoneEventExclusionForm.vue

@@ -68,7 +68,7 @@ const arrayData = useArrayData('ZoneEvents');
 const exclusionGeoCreate = async () => {
     const params = {
         zoneFk: parseInt(route.params.id),
-        date: dated,
+        date: dated.value,
         geoIds: tickedNodes.value,
     };
     await axios.post('Zones/exclusionGeo', params);
@@ -101,9 +101,17 @@ const exclusionCreate = async () => {
         const existsEvent = data.events.find(
             (event) => toDateFormat(event.dated) === toDateFormat(dated.value),
         );
+        const existsGeoEvent = data.geoExclusions.find(
+            (event) => toDateFormat(event.dated) === toDateFormat(dated.value),
+        );
         if (existsEvent) {
             await axios.delete(`Zones/${existsEvent?.zoneFk}/events/${existsEvent?.id}`);
         }
+        if (existsGeoEvent) {
+            await axios.delete(
+                `Zones/${existsGeoEvent?.zoneFk}/exclusions/${existsGeoEvent?.zoneExclusionFk}`,
+            );
+        }
 
         if (isNew.value || props.event?.type) await axios.post(`${url}`, [body]);
         else await axios.put(`${url}/${props.event?.id}`, body);
@@ -122,8 +130,21 @@ const onSubmit = async () => {
 
 const deleteEvent = async () => {
     if (!props.event) return;
-    const exclusionId = props.event?.zoneExclusionFk || props.event?.id;
-    await axios.delete(`Zones/${route.params.id}/exclusions/${exclusionId}`);
+    if (!props.event.created) {
+        const filter = {
+            where: {
+                dated: dated.value,
+            },
+        };
+        const params = { filter: JSON.stringify(filter) };
+        const { data: res } = await axios.get(`Zones/${route.params.id}/exclusions`, {
+            params,
+        });
+        if (res) await axios.delete(`Zones/${route.params.id}/exclusions/${res[0].id}`);
+    } else {
+        const exclusionId = props.event?.zoneExclusionFk || props.event?.id;
+        await axios.delete(`Zones/${route.params.id}/exclusions/${exclusionId}`);
+    }
     await refetchEvents();
 };
 
@@ -135,7 +156,7 @@ const refetchEvents = async () => {
 };
 
 onMounted(() => {
-    if (props.event) {
+    if (props.event && props.event.dated) {
         dated.value = props.event?.dated;
         excludeType.value =
             props.eventType === 'geoExclusion' ? 'specificLocations' : 'all';

src/pages/Zone/Card/ZoneEventInclusionForm.vue

@@ -56,6 +56,7 @@ const isNew = computed(() => props.isNewMode);
 const eventInclusionFormData = ref({ wdays: [] });
 const dated = ref(props.date || Date.vnNew());
 const _inclusionType = ref('indefinitely');
+const hasDeletedEvent = ref(false);
 const inclusionType = computed({
     get: () => _inclusionType.value,
     set: (val) => {
@@ -84,7 +85,7 @@ const createEvent = async () => {
     }
 
     const zoneIds = props.zoneIds?.length ? props.zoneIds : [route.params.id];
-    for (const id of zoneIds) {
+    for (const zoneId of zoneIds) {
         let today = eventInclusionFormData.value.dated
             ? moment(eventInclusionFormData.value.dated)
             : moment(dated.value);
@@ -92,7 +93,7 @@ const createEvent = async () => {
 
         const { data } = await axios.get(`Zones/getEventsFiltered`, {
             params: {
-                zoneFk: id,
+                zoneFk: zoneId,
                 started: today,
                 ended: lastDay,
             },
@@ -106,15 +107,19 @@ const createEvent = async () => {
             await axios.delete(
                 `Zones/${existsExclusion?.zoneFk}/exclusions/${existsExclusion?.id}`,
             );
+            await refetchEvents();
+            hasDeletedEvent.value = true;
         }
 
-        if (isNew.value)
-            await axios.post(`Zones/${id}/events`, eventInclusionFormData.value);
+        delete eventInclusionFormData.value.id;
+        if (isNew.value || hasDeletedEvent.value)
+            await axios.post(`Zones/${zoneId}/events`, eventInclusionFormData.value);
         else
             await axios.put(
-                `Zones/${id}/events/${props.event?.id}`,
+                `Zones/${zoneId}/events/${props.event?.id}`,
                 eventInclusionFormData.value,
             );
+        hasDeletedEvent.value = false;
     }
     quasar.notify({
         message: t('globals.dataSaved'),

test/cypress/integration/invoiceOut/invoiceOutList.spec.js

@@ -28,7 +28,7 @@ describe('InvoiceOut list', () => {
         cy.dataCy('InvoiceOutDownloadPdfBtn').click();
     });
 
-    it('should open the invoice descriptor from table icon', () => {
+    it.skip('should open the invoice descriptor from table icon', () => {
         cy.get(firstSummaryIcon).click();
         cy.get('.cardSummary').should('be.visible');
         cy.get('.summaryHeader > div').should('include.text', 'A1111111');

test/cypress/integration/invoiceOut/invoiceOutSummary.spec.js

@@ -15,7 +15,7 @@ describe('InvoiceOut summary', () => {
         cy.login('developer');
         cy.visit(`/#/invoice-out/1/summary`);
     });
-    it('open the descriptors', () => {
+    it.skip('open the descriptors', () => {
         cy.get(firstRowDescriptors(1)).click();
         cy.get('.descriptor').should('be.visible');
         cy.get('.q-item > .q-item__label').should('include.text', '1');
@@ -30,7 +30,7 @@ describe('InvoiceOut summary', () => {
         cy.get('.q-item > .q-item__label').should('include.text', '1101');
     });
 
-    it('should open the ticket list', () => {
+    it.skip('should open the ticket list', () => {
         cy.get(toTicketList).click();
         cy.get('[data-col-field="stateFk"]').each(($el) => {
             cy.wrap($el).contains('T1111111');

test/cypress/integration/order/orderList.spec.js

@@ -11,14 +11,15 @@ describe('OrderList', () => {
 
     it('create order', () => {
         cy.get('[data-cy="vnTableCreateBtn"]').click();
-        cy.selectOption(clientCreateSelect, 1101);
-        cy.get(addressCreateSelect).click();
+        cy.selectOption('[data-cy="Client_select"]', 1101);
+        cy.dataCy('landedDate').find('input').type('06/01/2001');
+        cy.get('[data-cy="Address_select"]').click();
         cy.get(
             '.q-menu > div> div.q-item:nth-child(1) >div.q-item__section--avatar > i',
         ).should('have.text', 'star');
-        cy.dataCy('landedDate').find('input').type('06/01/2001');
-        cy.selectOption(agencyCreateSelect, 1);
-
+        cy.get('.q-menu > div> .q-item:nth-child(1)').click();  
+        cy.get('.q-card [data-cy="Agency_select"]').click();
+        cy.get('.q-menu > div> .q-item:nth-child(1)').click();
         cy.intercept('GET', /\/api\/Orders\/\d/).as('orderSale');
         cy.get('[data-cy="FormModelPopup_save"] > .q-btn__content > .block').click();
         cy.wait('@orderSale');

test/cypress/integration/ticket/ticketSale.spec.js

@@ -2,7 +2,7 @@
 const firstRow = 'tbody > :nth-child(1)';
 
 describe('TicketSale', () => {
-    describe('#23', () => {
+    describe.skip('Ticket  #23', () => {
         beforeEach(() => {
             cy.login('claimManager');
             cy.viewport(1920, 1080);

test/cypress/integration/wagon/wagonType/wagonTypeEdit.spec.js

@@ -10,7 +10,7 @@ describe('WagonTypeEdit', () => {
         cy.get('.q-card');
         cy.get('input').first().type(' changed');
         cy.get('div.q-checkbox__bg').first().click();
-        cy.get('.q-btn--standard').click();
+        cy.dataCy('saveDefaultBtn').click();
     });
 
     it('should delete a tray', () => {