refactor: refs #7527 customerCreditContracts use popup and add all funcionality

src/pages/Customer/Card/CustomerCreditContracts.vue

@@ -2,12 +2,13 @@
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
-
+import { dashIfEmpty, toCurrency, toDate } from 'src/filters';
 import { useQuasar } from 'quasar';
 
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import ModalCloseContract from 'src/pages/Customer/components/ModalCloseContract.vue';
-import { toDate } from 'src/filters';
+import CustomerCreditContractsCreate from '../components/CustomerCreditContractsCreate.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -16,6 +17,7 @@ const quasar = useQuasar();
 
 const vnPaginateRef = ref(null);
 const showQPageSticky = ref(true);
+const showForm = ref();
 
 const filter = {
     order: 'finished ASC, started DESC',
@@ -36,25 +38,21 @@ const fetch = (data) => {
     data.forEach((element) => {
         if (!element.finished) {
             showQPageSticky.value = false;
-            return;
         }
     });
 };
 
-const toCustomerCreditContractsCreate = () => {
-    router.push({ name: 'CustomerCreditContractsCreate' });
-};
-
 const openDialog = (item) => {
     quasar.dialog({
         component: ModalCloseContract,
         componentProps: {
             id: item.id,
-            promise: updateData,
+            promise: async () => {
+                await updateData();
+                showQPageSticky.value = true;
+            },
         },
     });
-    updateData();
-    showQPageSticky.value = true;
 };
 
 const openViewCredit = (credit) => {
@@ -66,14 +64,14 @@ const openViewCredit = (credit) => {
     });
 };
 
-const updateData = () => {
+const updateData = async () => {
-    vnPaginateRef.value?.fetch();
+    await vnPaginateRef.value?.fetch();
 };
 </script>
 
 <template>
-    <div class="full-width flex justify-center">
+    <section class="row justify-center">
-        <QCard class="card-width q-pa-lg">
+        <QCard class="q-pa-lg" style="width: 70%">
             <VnPaginate
                 :user-filter="filter"
                 @on-fetch="fetch"
@@ -84,100 +82,82 @@ const updateData = () => {
                 url="CreditClassifications"
             >
                 <template #body="{ rows }">
-                    <div v-if="rows.length">
+                    <div v-if="rows.length" class="q-gutter-y-md">
                         <QCard
                             v-for="(item, index) in rows"
                             :key="index"
-                            :class="{
+                            :class="{ disabled: item.finished }"
-                                'customer-card': true,
-                                'q-mb-md': index < rows.length - 1,
-                                'is-active': !item.finished,
-                            }"
                         >
                             <QCardSection
-                                class="full-width flex justify-between q-py-none"
+                                class="full-width"
+                                :class="{ 'row justify-between': $q.screen.gt.md }"
                             >
-                                <div class="width-state flex">
+                                <div class="width-state row no-wrap">
-                                    <div
+                                    <QIcon
-                                        class="flex items-center cursor-pointer q-mr-md"
+                                        :style="{
-                                        v-if="!item.finished"
+                                            visibility: item.finished
+                                                ? 'hidden'
+                                                : 'visible',
+                                        }"
+                                        @click.stop="openDialog(item)"
+                                        color="primary"
+                                        name="lock"
+                                        size="md"
+                                        class="fill-icon q-px-md"
                                     >
-                                        <QIcon
+                                        <QTooltip>{{ t('Close contract') }}</QTooltip>
-                                            @click.stop="openDialog(item)"
+                                    </QIcon>
-                                            color="primary"
-                                            name="lock"
-                                            size="md"
-                                            class="fill-icon"
-                                        >
-                                            <QTooltip>{{ t('Close contract') }}</QTooltip>
-                                        </QIcon>
-                                    </div>
 
-                                    <div>
+                                    <div class="column">
-                                        <div class="flex q-mb-xs">
+                                        <VnLv
-                                            <div class="q-mr-sm color-vn-label">
+                                            :label="t('Since')"
-                                                {{ t('Since') }}:
+                                            :value="toDate(item.started)"
-                                            </div>
+                                        />
-                                            <div class="text-weight-bold">
+                                        <VnLv
-                                                {{ toDate(item.started) }}
+                                            :label="t('To')"
-                                            </div>
+                                            :value="toDate(item.finished)"
-                                        </div>
+                                        />
-                                        <div class="flex">
-                                            <div class="q-mr-sm color-vn-label">
-                                                {{ t('To') }}:
-                                            </div>
-                                            <div class="text-weight-bold">
-                                                {{ toDate(item.finished) }}
-                                            </div>
-                                        </div>
                                     </div>
                                 </div>
 
                                 <QSeparator vertical />
 
-                                <div class="width-data flex">
+                                <div class="column width-data">
                                     <div
-                                        class="full-width flex justify-between items-center"
+                                        class="column"
                                         v-if="item?.insurances.length"
+                                        v-for="insurance in item.insurances"
+                                        :key="insurance.id"
                                     >
-                                        <div class="flex">
+                                        <div
-                                            <div class="color-vn-label q-mr-xs">
+                                            :class="{
-                                                {{ t('Credit') }}:
+                                                'row q-gutter-x-md': $q.screen.gt.sm,
-                                            </div>
+                                            }"
-                                            <div class="text-weight-bold">
+                                            class="q-mb-sm"
-                                                {{ item.insurances[0].credit }}
+                                        >
-                                            </div>
+                                            <VnLv
-                                        </div>
+                                                :label="t('Credit')"
-                                        <div class="flex">
+                                                :value="toCurrency(insurance.credit)"
-                                            <div class="color-vn-label q-mr-xs">
+                                            />
-                                                {{ t('Grade') }}:
+                                            <VnLv
-                                            </div>
+                                                :label="t('Grade')"
-                                            <div class="text-weight-bold">
+                                                :value="dashIfEmpty(insurance.grade)"
-                                                {{ item.insurances[0].grade || '-' }}
+                                            />
-                                            </div>
+                                            <VnLv
-                                        </div>
+                                                :label="t('Date')"
-                                        <div class="flex">
+                                                :value="toDate(insurance.created)"
-                                            <div class="color-vn-label q-mr-xs">
+                                            />
-                                                {{ t('Date') }}:
-                                            </div>
-                                            <div class="text-weight-bold">
-                                                {{ toDate(item.insurances[0].created) }}
-                                            </div>
-                                        </div>
-                                        <div class="flex items-center cursor-pointer">
-                                            <QIcon
-                                                @click.stop="openViewCredit(item)"
-                                                color="primary"
-                                                name="preview"
-                                                size="md"
-                                            >
-                                                <QTooltip>{{
-                                                    t('View credits')
-                                                }}</QTooltip>
-                                            </QIcon>
                                         </div>
                                     </div>
                                 </div>
+                                <QBtn
+                                    @click.stop="openViewCredit(item)"
+                                    icon="preview"
+                                    size="md"
+                                    :title="t('View credits')"
+                                    color="primary"
+                                    flat
+                                />
                             </QCardSection>
                         </QCard>
                     </div>
@@ -187,11 +167,11 @@ const updateData = () => {
                 </template>
             </VnPaginate>
         </QCard>
-    </div>
+    </section>
 
     <QPageSticky :offset="[18, 18]" v-if="showQPageSticky">
         <QBtn
-            @click.stop="toCustomerCreditContractsCreate()"
+            @click.stop="showForm = !showForm"
             color="primary"
             fab
             icon="add"
@@ -201,24 +181,25 @@ const updateData = () => {
             {{ t('New contract') }}
         </QTooltip>
     </QPageSticky>
+
+    <QDialog v-model="showForm">
+        <CustomerCreditContractsCreate @on-data-saved="updateData()" />
+    </QDialog>
 </template>
 
 <style lang="scss" scoped>
-.customer-card {
-    border: 2px solid var(--vn-light-gray);
-    border-radius: 10px;
-    padding: 10px;
-    display: flex;
-    justify-content: space-between;
-}
-.is-active {
-    background-color: var(--vn-light-gray);
-}
 .width-state {
     width: 30%;
 }
 .width-data {
-    width: 65%;
+    width: 50%;
+}
+::v-deep(.label) {
+    margin-right: 5px;
+}
+::v-deep(.label)::after {
+    content: ':';
+    color: var(--vn-label-color);
 }
 </style>
 

src/pages/Customer/Card/CustomerCreditContractsInsurance.vue

@@ -0,0 +1,93 @@
+<script setup>
+import { computed, onBeforeMount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import { toCurrency, toDate } from 'src/filters';
+
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import axios from 'axios';
+
+const { t } = useI18n();
+const route = useRoute();
+const create = ref(null);
+const tableRef = ref();
+const columns = computed(() => [
+    {
+        align: 'left',
+        field: 'created',
+        format: ({ created }) => toDate(created),
+        label: t('Created'),
+        name: 'created',
+        create: true,
+        columnCreate: {
+            component: 'date',
+        },
+    },
+    {
+        align: 'left',
+        field: 'grade',
+        label: t('Grade'),
+        name: 'grade',
+        create: true,
+    },
+    {
+        align: 'left',
+        format: ({ credit }) => toCurrency(credit),
+        label: t('Credit'),
+        name: 'credit',
+        create: true,
+    },
+]);
+
+onBeforeMount(async () => {
+    const query = `CreditClassifications/findOne?filter=${encodeURIComponent(
+        JSON.stringify({
+            fields: ['finished'],
+            where: { id: route.params.creditId },
+        }),
+    )}`;
+    const { data } = await axios(query);
+    create.value = data.finished
+        ? false
+        : {
+              urlCreate: 'CreditInsurances',
+              title: t('Create Insurance'),
+              onDataSaved: () => tableRef.value.reload(),
+              formInitialData: {
+                  created: Date.vnNew(),
+                  creditClassificationFk: route.params.creditId,
+              },
+          };
+});
+</script>
+
+<template>
+    <VnTable
+        v-if="create != null"
+        url="CreditInsurances"
+        ref="tableRef"
+        data-key="creditInsurances"
+        :filter="{
+            where: {
+                creditClassificationFk: `${route.params.creditId}`,
+            },
+            order: 'created DESC',
+        }"
+        :columns="columns"
+        :right-search="false"
+        :is-editable="false"
+        :use-model="true"
+        :column-search="false"
+        :disable-option="{ card: true }"
+        :create
+        auto-load
+    />
+</template>
+
+<i18n>
+es:
+    Created: Fecha creación
+    Grade: Grade
+    Credit: Crédito
+</i18n>

src/pages/Customer/components/CustomerCreditContractsCreate.vue

@@ -3,44 +3,29 @@ import { reactive, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
-import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
+import FormModelPopup from 'src/components/FormModelPopup.vue';
 
 const { t } = useI18n();
 const route = useRoute();
 const routeId = computed(() => route.params.id);
-const router = useRouter();
 
 const initialData = reactive({
     started: Date.vnNew(),
     clientFk: routeId.value,
 });
-
-const toCustomerCreditContracts = () => {
-    router.push({ name: 'CustomerCreditContracts' });
-};
 </script>
 
 <template>
-    <FormModel
+    <FormModelPopup
+        v-on="$attrs"
         :form-initial-data="initialData"
         :observe-form-changes="false"
         url-create="creditClassifications/createWithInsurance"
-        @on-data-saved="toCustomerCreditContracts()"
     >
-        <template #moreActions>
+        <template #form-inputs="{ data }">
-            <QBtn
-                :label="t('globals.cancel')"
-                @click="toCustomerCreditContracts"
-                color="primary"
-                flat
-                icon="close"
-            />
-        </template>
-
-        <template #form="{ data }">
             <VnRow>
                 <div class="col">
                     <VnInput
@@ -63,7 +48,7 @@ const toCustomerCreditContracts = () => {
                 </div>
             </VnRow>
         </template>
-    </FormModel>
+    </FormModelPopup>
 </template>
 
 <i18n>

src/pages/Customer/components/CustomerCreditContractsInsurance.vue

@@ -1,63 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-
-import { toCurrency, toDate } from 'src/filters';
-
-import VnTable from 'src/components/VnTable/VnTable.vue';
-
-const { t } = useI18n();
-const route = useRoute();
-
-const filter = {
-    where: {
-        creditClassificationFk: `${route.params.creditId}`,
-    },
-    limit: 20,
-};
-const columns = computed(() => [
-    {
-        align: 'left',
-        field: 'created',
-        format: ({ created }) => toDate(created),
-        label: t('Created'),
-        name: 'created',
-    },
-    {
-        align: 'left',
-        field: 'grade',
-        label: t('Grade'),
-        name: 'grade',
-    },
-    {
-        align: 'left',
-        format: ({ credit }) => toCurrency(credit),
-        label: t('Credit'),
-        name: 'credit',
-    },
-]);
-</script>
-
-<template>
-    <VnTable
-        url="CreditInsurances"
-        ref="tableRef"
-        data-key="creditInsurances"
-        :filter="filter"
-        :columns="columns"
-        :right-search="false"
-        :is-editable="false"
-        :use-model="true"
-        :column-search="false"
-        :disable-option="{ card: true }"
-        auto-load
-    ></VnTable>
-</template>
-
-<i18n>
-es:
-    Created: Fecha creación
-    Grade: Grade
-    Credit: Crédito
-</i18n>

src/pages/Customer/components/ModalCloseContract.vue

@@ -29,7 +29,7 @@ const saveData = async () => {
         finished: timestamp,
     };
     await axios.patch(`CreditClassifications/${$props.id}`, payload);
-    $props.promise();
+    await $props.promise();
     closeButton.value.click();
 };
 </script>

src/router/modules/customer.js

@@ -185,20 +185,12 @@ const customerCard = {
                                     'src/pages/Customer/Card/CustomerCreditContracts.vue'
                                 ),
                         },
-                        {
-                            path: 'create',
-                            name: 'CustomerCreditContractsCreate',
-                            component: () =>
-                                import(
-                                    'src/pages/Customer/components/CustomerCreditContractsCreate.vue'
-                                ),
-                        },
                         {
                             path: 'insurance/:creditId',
                             name: 'CustomerCreditContractsInsurance',
                             component: () =>
                                 import(
-                                    'src/pages/Customer/components/CustomerCreditContractsInsurance.vue'
+                                    'src/pages/Customer/Card/CustomerCreditContractsInsurance.vue'
                                 ),
                         },
                     ],