Solucion a comentarios 29

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 data = ref([]);
-const showDialog = ref(false);
 
 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,10 +241,21 @@ const sendEmailAction = () => {
         url="ClientRisks"
     />
 
+    <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="{ rows }">
             <QTable
                 :columns="columns"
                 :no-data-label="t('globals.noResults')"
-        :pagination="{ rowsPerPage: 12 }"
+                :rows-per-page-options="[0]"
                 :rows="rows"
                 class="full-width q-mt-md"
                 row-key="id"
@@ -261,107 +266,27 @@ const sendEmailAction = () => {
                             <component
                                 :is="tableColumnComponents[props.col.name].component"
                                 class="col-content"
-                        v-bind="tableColumnComponents[props.col.name].props(props)"
+                                v-bind="
-                        @click="tableColumnComponents[props.col.name].event(props)"
+                                    tableColumnComponents[props.col.name].props(props)
-                    >
+                                "
-                        <template
+                                @click="
-                            v-if="
+                                    tableColumnComponents[props.col.name].event(props)
-                                props.col.name !== 'conciliated' &&
-                                props.col.name !== 'reference'
                                 "
                             >
+                                <template v-if="props.col.name !== 'isConciliate'">
                                     {{ 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"
-                            >
-                                <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"
+                                    :id="props.row.clientFk"
-                            v-if="props.col.name === 'employee'"
+                                    v-if="props.col.name === 'userName'"
                                 />
                             </component>
                         </QTr>
                     </QTd>
                 </template>
             </QTable>
+        </template>
+    </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') }}