From 09a2af41245e745dc16c96ae314cba8028e5c0f7 Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Mon, 4 Mar 2024 06:27:17 -0500
Subject: [PATCH] Solucion a comentarios 29

---
 docker-compose.yml                          |  30 ++--
 src/pages/Customer/Card/CustomerBalance.vue | 183 ++++++--------------
 2 files changed, 69 insertions(+), 144 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 6494739f2..b1dc1508c 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,17 +1,17 @@
 version: '3.7'
 services:
-  main:
-    image: registry.verdnatura.es/salix-frontend:${BRANCH_NAME:?}
-    build:
-      context: .
-      dockerfile: ./Dockerfile
-    ports:
-      - 4000
-    deploy:
-      replicas: ${FRONT_REPLICAS:?}
-      placement:
-        constraints:
-          - node.role == worker
-      resources:
-        limits:
-          memory: 1G
+    main:
+        image: registry.verdnatura.es/salix-frontend:${BRANCH_NAME:?}
+        build:
+            context: .
+            dockerfile: ./Dockerfile
+        ports:
+            - 4000
+        deploy:
+            replicas: ${FRONT_REPLICAS:?}
+            placement:
+                constraints:
+                    - node.role == worker
+            resources:
+                limits:
+                    memory: 1G
diff --git a/src/pages/Customer/Card/CustomerBalance.vue b/src/pages/Customer/Card/CustomerBalance.vue
index 378b679a3..049bb9662 100644
--- a/src/pages/Customer/Card/CustomerBalance.vue
+++ b/src/pages/Customer/Card/CustomerBalance.vue
@@ -12,12 +12,11 @@ import { useStateStore } from 'stores/useStateStore';
 import { useValidator } from 'src/composables/useValidator';
 import { usePrintService } from 'src/composables/usePrintService';
 
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import FetchData from 'components/FetchData.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
-import VnInput from 'src/components/common/VnInput.vue';
 import CustomerNewPayment from 'src/pages/Customer/components/CustomerNewPayment.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
-import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
 
 const { sendEmail } = usePrintService();
 const { t } = useI18n();
@@ -30,18 +29,15 @@ const user = state.getUser();
 
 const clientRisks = ref(null);
 const clientRisksRef = ref(null);
-const closeButton = ref(null);
 const companiesOptions = ref([]);
 const companyId = ref(null);
 const receiptsRef = ref(null);
-const rows = ref([]);
-const showDialog = ref(false);
+const data = ref([]);
 
 const filterCompanies = { order: ['code'] };
-const params = {
+const userParams = {
     clientId: route.params.id,
     companyId: user.value.companyFk,
-    filter: { limit: 20 },
 };
 const filter = {
     include: { relation: 'company', scope: { fields: ['code'] } },
@@ -180,7 +176,7 @@ onBeforeMount(() => {
 watch(
     () => route.params.id,
     (newValue) => {
-        params.clientId = newValue;
+        userParams.clientId = newValue;
         filter.where.clientFk = newValue;
         getData();
     }
@@ -191,6 +187,10 @@ const getData = () => {
     clientRisksRef.value?.fetch();
 };
 
+const onFetch = (data) => {
+    data.value = data;
+};
+
 const showNewPaymentDialog = () => {
     quasar.dialog({
         component: CustomerNewPayment,
@@ -205,7 +205,7 @@ const showNewPaymentDialog = () => {
 const updateCompanyId = (id) => {
     if (id) {
         companyId.value = id;
-        params.companyId = id;
+        userParams.companyId = id;
         filter.where.companyFk = id;
     }
     getData();
@@ -232,13 +232,7 @@ const sendEmailAction = () => {
         auto-load
         url="Companies"
     />
-    <FetchData
-        :params="params"
-        @on-fetch="(data) => (rows = data)"
-        auto-load
-        ref="receiptsRef"
-        url="Receipts/filter"
-    />
+
     <FetchData
         :filter="filter"
         @on-fetch="(data) => (clientRisks = data)"
@@ -247,121 +241,52 @@ const sendEmailAction = () => {
         url="ClientRisks"
     />
 
-    <QTable
-        :columns="columns"
-        :no-data-label="t('globals.noResults')"
-        :pagination="{ rowsPerPage: 12 }"
-        :rows="rows"
-        class="full-width q-mt-md"
-        row-key="id"
+    <VnPaginate
+        auto-load
+        data-key="CustomerBalance"
+        order="id DESC"
+        url="Receipts/filter"
+        :user-params="userParams"
+        ref="receiptsRef"
+        @on-fetch="onFetch"
+        @on-paginate="onPaginate"
     >
-        <template #body-cell="props">
-            <QTd :props="props">
-                <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)"
-                    >
-                        <template
-                            v-if="
-                                props.col.name !== 'conciliated' &&
-                                props.col.name !== 'reference'
-                            "
-                        >
-                            {{ props.value }}
-                        </template>
-
-                        <template v-if="props.col.name === 'reference'">
-                            <div v-if="props.row.isInvoice">
-                                <QBtn color="blue" dense flat>
-                                    {{ t('bill', { ref: props.value }) }}
-                                </QBtn>
-                                <InvoiceOutDescriptorProxy
-                                    :id="props.row.id"
-                                    v-if="props.col.name === 'reference'"
-                                />
-                            </div>
-
-                            <div v-else>
-                                <VnInput
-                                    @keyup.enter="saveFieldValue(props)"
-                                    autofocus
-                                    clearable
-                                    dense
-                                    v-model="props.row.description"
-                                />
-                            </div>
-                        </template>
-
-                        <template
-                            v-if="
-                                props.col.name === 'actions' && props.row.isCompensation
-                            "
-                        >
-                            <QIcon
-                                @click.stop="showDialog = true"
-                                class="q-ml-md"
-                                color="primary"
-                                name="add"
-                                size="sm"
+        <template #body="{ rows }">
+            <QTable
+                :columns="columns"
+                :no-data-label="t('globals.noResults')"
+                :rows-per-page-options="[0]"
+                :rows="rows"
+                class="full-width q-mt-md"
+                row-key="id"
+            >
+                <template #body-cell="props">
+                    <QTd :props="props">
+                        <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)
+                                "
                             >
-                                <QTooltip>
-                                    {{ t('Send compensation') }}
-                                </QTooltip>
-                            </QIcon>
-
-                            <QDialog v-model="showDialog">
-                                <QCard class="q-pa-sm">
-                                    <QCardSection>
-                                        <span
-                                            ref="closeButton"
-                                            class="flex justify-end color-vn-label"
-                                            v-close-popup
-                                        >
-                                            <QIcon name="close" size="sm" />
-                                        </span>
-                                        <div class="text-h6">
-                                            {{ t('Send compensation') }}
-                                        </div>
-                                    </QCardSection>
-                                    <QCardSection>
-                                        <div>
-                                            {{
-                                                t(
-                                                    'Do you want to report compensation to the client by mail?'
-                                                )
-                                            }}
-                                        </div>
-                                    </QCardSection>
-                                    <QCardActions class="flex justify-end q-mb-sm">
-                                        <QBtn
-                                            :label="t('globals.cancel')"
-                                            color="primary"
-                                            flat
-                                            v-close-popup
-                                        />
-                                        <QBtn
-                                            :label="t('globals.save')"
-                                            @click="sendEmailAction"
-                                            class="q-ml-sm"
-                                            color="primary"
-                                        />
-                                    </QCardActions>
-                                </QCard>
-                            </QDialog>
-                        </template>
-
-                        <WorkerDescriptorProxy
-                            :id="props.row.workerFk"
-                            v-if="props.col.name === 'employee'"
-                        />
-                    </component>
-                </QTr>
-            </QTd>
+                                <template v-if="props.col.name !== 'isConciliate'">
+                                    {{ props.value }}
+                                </template>
+                                <WorkerDescriptorProxy
+                                    :id="props.row.clientFk"
+                                    v-if="props.col.name === 'userName'"
+                                />
+                            </component>
+                        </QTr>
+                    </QTd>
+                </template>
+            </QTable>
         </template>
-    </QTable>
+    </VnPaginate>
 
     <QDrawer :width="256" show-if-above side="right" v-model="stateStore.rightDrawer">
         <div class="q-mt-xl q-px-md">
@@ -377,7 +302,7 @@ const sendEmailAction = () => {
             />
         </div>
 
-        <QCard class="q-ma-md q-pa-md q-mt-lg" v-if="rows?.length">
+        <QCard class="q-ma-md q-pa-md q-mt-lg" v-if="data?.length">
             <QCardSection>
                 <div class="flex justify-center text-subtitle1 text-bold">
                     {{ t('Total by company') }}