feat: CustomerCredit section

src/pages/Customer/Card/CustomerCard.vue

@@ -17,7 +17,7 @@ const routeName = computed(() => route.name);
         :filter-panel="routeName != 'CustomerConsumption' && CustomerFilter"
         search-data-key="CustomerList"
         :searchbar-props="{
-            url: 'Clients/extendedListFilter',
+            url: 'Clients/filter',
             label: 'Search customer',
             info: 'You can search by customer id or name',
         }"

src/pages/Customer/Card/CustomerCreditContracts.vue

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
 import { useQuasar } from 'quasar';
+import VnTable from 'src/components/VnTable/VnTable.vue';
 
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import ModalCloseContract from 'src/pages/Customer/components/ModalCloseContract.vue';
@@ -72,6 +73,28 @@ const updateData = () => {
 </script>
 
 <template>
+    <!-- <VnTable
+        ref="tableRef"
+        data-key="Greuges"
+        url="Greuges"
+        search-url="greuges"
+        :filter="filter"
+        :order="['shipped DESC', 'amount']"
+        :columns="columns"
+        :right-search="false"
+        :is-editable="false"
+        :use-model="true"
+        :column-search="false"
+        @on-fetch="(data) => setRows(data)"
+        :disable-option="{ card: true }"
+        :create="{
+            urlCreate: `Greuges`,
+            title: t('New greuge'),
+            onDataSaved: () => tableRef.reload(),
+            formInitialData: { shipped: new Date(), clientFk: route.params.id },
+        }"
+        auto-load
+    ></VnTable> -->
     <div class="full-width flex justify-center">
         <QCard class="card-width q-pa-lg">
             <VnPaginate

src/pages/Customer/Card/CustomerCreditOpinion.vue

@@ -3,9 +3,8 @@ import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
-import { QBtn } from 'quasar';
-
 import { toCurrency, toDateHourMin } from 'src/filters';
+import VnTable from 'src/components/VnTable/VnTable.vue';
 
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
@@ -16,8 +15,8 @@ import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.v
 const { t } = useI18n();
 const route = useRoute();
 
-const clientInformasRef = ref();
+const tableRef = ref();
-const rows = ref([]);
+// const rows = ref([]);
 
 const filter = {
     include: [
@@ -37,10 +36,9 @@ const filter = {
 const columns = computed(() => [
     {
         align: 'left',
-        field: 'created',
+        format: ({ created }) => toDateHourMin(created),
-        format: (value) => toDateHourMin(value),
         label: t('Since'),
-        name: 'since',
+        name: 'created',
     },
     {
         align: 'left',
@@ -53,59 +51,63 @@ const columns = computed(() => [
         field: 'rating',
         label: t('Rating'),
         name: 'rating',
+        create: true,
+        columnCreate: {
+            component: 'number',
+            autofocus: true,
+        },
     },
     {
         align: 'right',
         field: 'recommendedCredit',
-        format: (value) => toCurrency(value),
+        format: ({ recommendedCredit }) => toCurrency(recommendedCredit),
         label: t('Recommended credit'),
         name: 'recommendedCredit',
+        create: true,
+        columnCreate: {
+            component: 'number',
+            autofocus: true,
+        },
     },
 ]);
 
-watch(
+// watch(
-    () => route.params.id,
+//     () => route.params.id,
-    (newValue) => {
+//     (newValue) => {
-        if (!newValue) return;
+//         if (!newValue) return;
-        filter.where.clientFk = newValue;
+//         filter.where.clientFk = newValue;
-        clientInformasRef.value?.fetch();
+//         clientInformasRef.value?.fetch();
-    }
+//     }
-);
+// );
 </script>
 
 <template>
-    <FetchData
+    <VnTable
-        ref="clientInformasRef"
+        ref="tableRef"
+        data-key="ClientInformas"
         url="ClientInformas"
         :filter="filter"
-        @on-fetch="(data) => (rows = data)"
+        :order="['created DESC']"
+        :columns="columns"
+        :right-search="false"
+        :is-editable="false"
+        :use-model="true"
+        :column-search="false"
+        :disable-option="{ card: true }"
         auto-load
-    />
+        :create="{
-    <FormModel
+            urlCreate: `Clients/${route.params.id}/setRating`,
-        :form-initial-data="{}"
+            title: 'Create rating',
-        :url-create="`Clients/${route.params.id}/setRating`"
+            onDataSaved: () => tableRef.reload(),
-        @on-data-saved="clientInformasRef.fetch()"
+            formInitialData: {},
+        }"
     >
-        <template #form="{ data }">
+        <template #column-employee="{ row }">
-            <VnRow>
+            <span class="link" @click.stop>{{ row.worker.user.nickname }}</span>
-                <VnInput
+            <WorkerDescriptorProxy :id="row.clientFk" />
-                    :label="t('Rating')"
-                    clearable
-                    type="number"
-                    v-model.number="data.rating"
-                />
-                <VnInput
-                    :label="t('Recommended credit')"
-                    clearable
-                    type="number"
-                    v-model.number="data.recommendedCredit"
-                />
-            </VnRow>
         </template>
-    </FormModel>
+    </VnTable>
-
+    <!-- <QTable
-    <div class="full-width flex justify-center" v-if="rows.length">
-        <QTable
             :columns="columns"
             :pagination="{ rowsPerPage: 0 }"
             :rows="rows"
@@ -120,8 +122,7 @@ watch(
                     <WorkerDescriptorProxy :id="row.clientFk" />
                 </QTd>
             </template>
-        </QTable>
+        </QTable> -->
-    </div>
 </template>
 
 <i18n>

src/pages/Customer/components/CustomerCreditContractsCreate.vue

@@ -48,6 +48,7 @@ const toCustomerCreditContracts = () => {
                         clearable
                         type="number"
                         v-model.number="data.credit"
+                        autofocus
                     />
                 </div>
                 <div class="col">

src/pages/Customer/components/CustomerCreditContractsInsurance.vue

@@ -1,47 +1,26 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
-import { toCurrency, toDateHourMinSec } from 'src/filters';
+import { toCurrency, toDate } from 'src/filters';
 
-import FetchData from 'components/FetchData.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
 
 const { t } = useI18n();
 const route = useRoute();
 
-const rows = ref([]);
-
 const filter = {
     where: {
         creditClassificationFk: `${route.params.creditId}`,
     },
     limit: 20,
 };
-
-const tableColumnComponents = {
-    created: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    grade: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    credit: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-};
-
 const columns = computed(() => [
     {
         align: 'left',
         field: 'created',
-        format: (value) => toDateHourMinSec(value),
+        format: ({ created }) => toDate(created),
         label: t('Created'),
         name: 'created',
     },
@@ -53,8 +32,7 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        field: 'credit',
+        format: ({ credit }) => toCurrency(credit),
-        format: (value) => toCurrency(value),
         label: t('Credit'),
         name: 'credit',
     },
@@ -62,41 +40,19 @@ const columns = computed(() => [
 </script>
 
 <template>
-    <FetchData
+    <VnTable
-        :filter="filter"
-        @on-fetch="(data) => (rows = data)"
-        auto-load
         url="CreditInsurances"
-    />
+        ref="tableRef"
-
+        data-key="creditInsurances"
-    <QPage class="column items-center q-pa-md" v-if="rows.length">
+        :filter="filter"
-        <QTable
+        :columns="columns"
-            :columns="columns"
+        :right-search="false"
-            :pagination="{ rowsPerPage: 12 }"
+        :is-editable="false"
-            :rows="rows"
+        :use-model="true"
-            class="full-width q-mt-md"
+        :column-search="false"
-            row-key="id"
+        :disable-option="{ card: true }"
-        >
+        auto-load
-            <template #body-cell="props">
+    ></VnTable>
-                <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)"
-                        >
-                            {{ props.value }}
-                        </component>
-                    </QTr>
-                </QTd>
-            </template>
-        </QTable>
-    </QPage>
-
-    <h5 class="flex justify-center color-vn-label" v-else>
-        {{ t('globals.noResults') }}
-    </h5>
 </template>
 
 <i18n>