Solucion a comentarios 32

src/pages/Customer/Defaulter/CustomerDefaulter.vue

@@ -12,6 +12,7 @@ import CustomerBalanceDueTotal from './CustomerBalanceDueTotal.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 import CustomerDefaulterAddObservation from './CustomerDefaulterAddObservation.vue';
 
 const { t } = useI18n();
@@ -24,19 +25,20 @@ const rows = ref([]);
 const tableColumnComponents = {
     client: {
         component: QBtn,
-        props: () => ({ flat: true, color: 'blue' }),
+        props: () => ({ flat: true, color: 'blue', noCaps: true }),
         event: () => {},
     },
     isWorker: {
         component: QCheckbox,
-        props: ({ row }) => ({
+        props: (prop) => ({
             disable: true,
-            'model-value': Boolean(row.selected),
+            'model-value': Boolean(prop.value),
         }),
+        event: () => {},
     },
     salesPerson: {
         component: QBtn,
-        props: () => ({ flat: true, color: 'blue' }),
+        props: () => ({ flat: true, color: 'blue', noCaps: true }),
         event: () => {},
     },
     country: {
@@ -44,7 +46,7 @@ const tableColumnComponents = {
         props: () => {},
         event: () => {},
     },
-    paymentMethod: {
+    payMethod: {
         component: 'span',
         props: () => {},
         event: () => {},
@@ -56,7 +58,7 @@ const tableColumnComponents = {
     },
     author: {
         component: QBtn,
-        props: () => ({ flat: true, color: 'blue' }),
+        props: () => ({ flat: true, color: 'blue', noCaps: true }),
         event: () => {},
     },
     lastObservation: {
@@ -87,6 +89,7 @@ const columns = computed(() => [
         field: 'clientName',
         label: t('Client'),
         name: 'client',
+        sortable: true,
     },
     {
         align: 'left',
@@ -99,54 +102,68 @@ const columns = computed(() => [
         field: 'salesPersonName',
         label: t('Salesperson'),
         name: 'salesPerson',
+        sortable: true,
     },
     {
         align: 'left',
         field: 'country',
         label: t('Country'),
         name: 'country',
+        sortable: true,
     },
     {
         align: 'left',
         field: 'payMethod',
         label: t('P. Method'),
-        name: 'paymentMethod',
+        name: 'payMethod',
+        sortable: true,
+        tooltip: t('Pay method'),
     },
     {
         align: 'left',
         field: ({ amount }) => toCurrency(amount),
         label: t('Balance D.'),
         name: 'balance',
+        sortable: true,
+        tooltip: t('Balance due'),
     },
     {
         align: 'left',
         field: 'workerName',
         label: t('Author'),
         name: 'author',
+        sortable: true,
+        tooltip: t('Worker who made the last observation'),
     },
     {
         align: 'left',
         field: 'observation',
         label: t('Last observation'),
         name: 'lastObservation',
+        sortable: true,
     },
     {
         align: 'left',
         field: ({ created }) => toDate(created),
         label: t('L. O. Date'),
         name: 'date',
+        sortable: true,
+        tooltip: t('Last observation date'),
     },
     {
         align: 'left',
         field: ({ creditInsurance }) => toCurrency(creditInsurance),
         label: t('Credit I.'),
         name: 'credit',
+        sortable: true,
+        tooltip: t('Credit insurance'),
     },
     {
         align: 'left',
         field: ({ defaulterSinced }) => toDate(defaulterSinced),
         label: t('From'),
         name: 'from',
+        sortable: true,
     },
 ]);
 
@@ -170,15 +187,17 @@ const viewAddObservation = (rowsSelected) => {
 const refreshData = () => {
     setRows();
 };
+
+const onFetch = (data) => {
+    for (const element of data) {
+        element.isWorker = element.businessTypeFk === 'worker';
+    }
+    rows.value = data;
+};
 </script>
 
 <template>
-    <FetchData
-        :filter="filter"
-        @on-fetch="(data) => (rows = data)"
-        auto-load
-        url="Defaulters/filter"
-    />
+    <FetchData :filter="filter" @on-fetch="onFetch" auto-load url="Defaulters/filter" />
 
     <QDrawer side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
@@ -220,7 +239,16 @@ const refreshData = () => {
                             v-bind="tableColumnComponents[props.col.name].props(props)"
                             @click="tableColumnComponents[props.col.name].event(props)"
                         >
-                            {{ props.value }}
+                            <template v-if="props.col.name !== 'isWorker'">
+                                <div v-if="props.col.name === 'lastObservation'">
+                                    <VnInput
+                                        type="textarea"
+                                        v-model="props.value"
+                                        autogrow
+                                    />
+                                </div>
+                                <div v-else>{{ props.value }}</div>
+                            </template>
 
                             <WorkerDescriptorProxy
                                 :id="props.row.salesPersonFk"
@@ -256,10 +284,15 @@ es:
     Salesperson: Comercial
     Country: País
     P. Method: F. Pago
+    Pay method: Forma de pago
     Balance D.: Saldo V.
+    Balance due: Saldo vencido
     Author: Autor
+    Worker who made the last observation: Trabajador que ha realizado la última observación
     Last observation: Última observación
     L. O. Date: Fecha Ú. O.
+    Last observation date: Fecha última observación
     Credit I.: Crédito A.
+    Credit insurance: Crédito asegurado
     From: Desde
 </i18n>