refs #6157 refactor

src/components/ui/VnPaginate.vue

@@ -68,6 +68,7 @@ const arrayData = useArrayData(props.dataKey, {
     limit: props.limit,
     order: props.order,
     userParams: props.userParams,
+    skip: 0,
 });
 const store = arrayData.store;
 

src/composables/useArrayData.js

@@ -42,7 +42,7 @@ export function useArrayData(key, userOptions) {
         ];
         if (typeof userOptions === 'object') {
             for (const option in userOptions) {
-                const isEmpty = userOptions[option] == null || userOptions[option] == '';
+                const isEmpty = userOptions[option] == null || userOptions[option] === '';
                 if (isEmpty || !allowedOptions.includes(option)) continue;
 
                 if (Object.prototype.hasOwnProperty.call(store, option)) {

src/css/app.scss

@@ -45,3 +45,9 @@ body.body--dark {
 .bg-vn-dark {
     background-color: var(--vn-dark);
 }
+
+.vn-card {
+    background-color: var(--vn-gray);
+    color: var(--vn-text);
+    border-radius: 8px;
+}

src/pages/Claim/Card/ClaimAction.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, watchEffect } from 'vue';
+import { ref, computed, watchEffect, onMounted } from 'vue';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
@@ -10,6 +10,7 @@ import { tMobile } from 'src/composables/tMobile';
 import CrudModel from 'src/components/CrudModel.vue';
 import FetchData from 'src/components/FetchData.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnConfirm from 'src/components/ui/VnConfirm.vue';
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 
 const { t } = useI18n();
@@ -17,8 +18,10 @@ const quasar = useQuasar();
 const route = useRoute();
 const stateStore = computed(() => useStateStore());
 const claim = ref(null);
+const claimRef = ref();
 const claimId = route.params.id;
 const dialogDestination = ref(false);
+const dialogRegularize = ref(false);
 const claimDestinationFk = ref(null);
 const resolvedStateId = ref(null);
 const claimActionsForm = ref();
@@ -27,7 +30,7 @@ const selectedRows = ref([]);
 const destinationTypes = ref([]);
 const destinations = ref([]);
 const totalClaimed = ref(null);
-const maxResponsibility = computed(() => 5);
+const DEFAULT_MAX_RESPONSABILITY = 5;
 const dialogGreuge = ref(false);
 
 const columns = computed(() => [
@@ -45,7 +48,7 @@ const columns = computed(() => [
     {
         name: 'destination',
         label: t('Destination'),
-        field: (row) => getDestination(row.claimDestinationFk),
+        field: (row) => row.claimDestinationFk,
         align: 'left',
     },
     {
@@ -90,17 +93,18 @@ const columns = computed(() => [
     },
 ]);
 
-watchEffect(() => {
-    if (rows.value.length) {
-        destinations.value = rows.value.map((row) =>
-            getDestination(row.claimDestinationFk)
-        );
-        totalClaimed.value = rows.value.reduce((total, row) => total + row.total, 0);
-    }
+onMounted(() => {
+    getTotal();
 });
 
-function getDestination(destinationId) {
-    return destinationTypes.value.find((type) => type.id == destinationId);
+function setData(data) {
+    rows.value = data;
+    getTotal();
+}
+function getTotal() {
+    if (rows.value.length) {
+        totalClaimed.value = rows.value.reduce((total, row) => total + row.total, 0);
+    }
 }
 
 async function updateDestinations(claimDestinationFk) {
@@ -121,16 +125,22 @@ async function regularizeClaim() {
     const query = `Claims/${claimId}/regularizeClaim`;
 
     await axios.post(query);
-    if (claim.value.responsibility >= Math.ceil(maxResponsibility.value) / 2) {
-        dialogGreuge.value = true;
+    if (claim.value.responsibility >= Math.ceil(DEFAULT_MAX_RESPONSABILITY) / 2) {
+        await claimRef.value.fetch();
+        quasar
+            .dialog({
+                component: VnConfirm,
+                title: t('confirmGreuges'),
+                message: t('confirmGreugesMessage'),
+            })
+            .onOk(async () => await onUpdateGreugeAccept());
     } else {
         quasar.notify({
             message: t('globals.dataSaved'),
             type: 'positive',
         });
-
-        claimActionsForm.value.reload();
     }
+    claimActionsForm.value.reload();
 }
 
 async function updateGreuge(greuges) {
@@ -189,6 +199,7 @@ async function importToNewRefundTicket() {
 </script>
 <template>
     <FetchData
+        ref="claimRef"
         :url="`Claims/${claimId}`"
         @on-fetch="(data) => (claim = data)"
         auto-load
@@ -228,10 +239,10 @@ async function importToNewRefundTicket() {
         show-if-above
         v-if="claim"
     >
-        <div class="totalClaim q-mb-md">
+        <QCard class="totalClaim vn-card q-my-md q-pa-sm">
             {{ `${t('Total claimed')}: ${toCurrency(totalClaimed)}` }}
-        </div>
-        <QCard class="q-mb-md q-pa-sm">
+        </QCard>
+        <QCard class="vn-card q-mb-md q-pa-sm">
             <QItem class="justify-between">
                 <QItemLabel class="slider-container">
                     <p class="text-primary">
@@ -275,7 +286,7 @@ async function importToNewRefundTicket() {
         :default-remove="true"
         :default-save="false"
         :default-reset="false"
-        @on-fetch="(data) => (rows = data)"
+        @on-fetch="setData"
         auto-load
     >
         <template #body>
@@ -283,11 +294,9 @@ async function importToNewRefundTicket() {
                 :columns="columns"
                 :rows="rows"
                 :dense="$q.screen.lt.md"
-                :pagination="{ rowsPerPage: 0 }"
                 row-key="id"
                 selection="multiple"
                 v-model:selected="selectedRows"
-                hide-pagination
                 :grid="$q.screen.lt.md"
             >
                 <template #body-cell-ticket="{ value }">
@@ -392,7 +401,7 @@ async function importToNewRefundTicket() {
     <QDialog v-model="dialogDestination">
         <QCard>
             <QCardSection>
-                <QItem class="q-pa-none">
+                <QItem class="q-pa-sm">
                     <span class="q-dialog__title text-white">
                         {{ t('dialog title') }}
                     </span>
@@ -401,6 +410,7 @@ async function importToNewRefundTicket() {
             </QCardSection>
             <QItemSection>
                 <VnSelectFilter
+                    class="q-pa-sm"
                     v-model="claimDestinationFk"
                     :options="destinationTypes"
                     option-label="description"
@@ -423,13 +433,13 @@ async function importToNewRefundTicket() {
             </QCardActions>
         </QCard>
     </QDialog>
-    <QDialog v-model="dialogGreuge">
+    <!-- <QDialog v-model="dialogGreuge">
         <QCardSection>
-            <QItem class="q-pa-none">
-                <span class="q-dialog__title text-white">
+            <QItem class="q-pa-sm">
+                <span class="q-pa-sm q-dialog__title text-white">
                     {{ t('dialogGreuge title') }}
                 </span>
-                <QBtn icon="close" flat round dense v-close-popup />
+                <QBtn class="q-pa-sm" icon="close" flat round dense v-close-popup />
             </QItem>
             <QCardActions class="justify-end q-mr-sm">
                 <QBtn flat :label="t('globals.close')" color="primary" v-close-popup />
@@ -441,17 +451,8 @@ async function importToNewRefundTicket() {
                 />
             </QCardActions>
         </QCardSection>
-    </QDialog>
+    </QDialog> -->
 </template>
-<style lang="scss">
-.claim-action {
-    .q-table {
-        .q-select .q-field__input {
-            display: none !important;
-        }
-    }
-}
-</style>
 <style lang="scss" scoped>
 .slider-container {
     width: 50%;
@@ -472,20 +473,12 @@ async function importToNewRefundTicket() {
         height: min-content;
     }
 }
-.totalClaim {
-    background-color: #313131;
-    color: white;
-    padding: 10px;
-    margin: 5px;
-    border-radius: 8px;
-}
 .responsibility {
     max-width: 100%;
     margin-left: 40px;
 }
 
 .mana {
-    color: white;
     float: inline-start;
 }
 </style>
@@ -493,8 +486,8 @@ async function importToNewRefundTicket() {
 en:
     mana: Is paid with mana
     dialog title: Change destination to all selected rows
-    dialogGreuge title: Insert greuges on client card
-    ClaimGreugeDescription: Claim Id
+    confirmGreuges: Do you want to insert complaints?
+    confirmGreugesMessage: Insert complaints into the client's record
 
 es:
     mana: Cargado al maná
@@ -516,4 +509,6 @@ es:
     dialogGreuge title: Insertar greuges en la ficha del cliente
     ClaimGreugeDescription: Id reclamación
     Id item: Id artículo
+    confirmGreuges: ¿Desea insertar greuges?
+    confirmGreugesMessage: Insertar greuges en la ficha del cliente
 </i18n>

test/cypress/integration/claimAction.spec.js

@@ -19,7 +19,23 @@ describe('ClaimAction', () => {
         cy.fillRow(firstRow, rowData);
     });
 
+    // it('should change destination with 2 rows', () => {
+    //     cy.get('[title="Change destination"]').click();
+
+    //     const rowData = ['Basura'];
+    //     cy.fillRow()
+    // });
+
     it('should regularize', () => {
         cy.get('[title="Regularize"]').click();
     });
+
+    it('should remove the line', () => {
+        cy.fillRow(firstRow, [true]);
+        cy.removeCard();
+        cy.clickConfirm();
+
+        cy.reload();
+        cy.get(firstRow).should('not.exist');
+    });
 });

test/cypress/support/commands.js

@@ -88,7 +88,8 @@ Cypress.Commands.add('addCard', () => {
     cy.get('.q-page-sticky > div > .q-btn').click();
 });
 Cypress.Commands.add('clickConfirm', () => {
-    cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
+    cy.waitForElement('.q-dialog__inner > .q-card');
+    cy.get('.q-card__actions > .q-btn--unelevated > .q-btn__content > .block').click();
 });
 
 Cypress.Commands.add('notificationHas', (selector, text) => {