From c21afccf7533955dfad64ea6ef85178481560291 Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Mon, 8 Jan 2024 14:25:21 -0500
Subject: [PATCH 1/2] Se crea el formulario para agregar nuevas observaciones
 en la tablade morosos

---
 .../Customer/Defaulter/CustomerDefaulter.vue  | 44 +++++++----
 .../CustomerDefaulterAddObservation.vue       | 79 +++++++++++++++++++
 2 files changed, 108 insertions(+), 15 deletions(-)
 create mode 100644 src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue

diff --git a/src/pages/Customer/Defaulter/CustomerDefaulter.vue b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
index d54d5df35..aff57318f 100644
--- a/src/pages/Customer/Defaulter/CustomerDefaulter.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
@@ -2,7 +2,7 @@
 import { ref, computed, onBeforeMount } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import { QBtn, QCheckbox } from 'quasar';
+import { QBtn, QCheckbox, useQuasar } from 'quasar';
 
 import { toCurrency, toDate } from 'filters/index';
 import { useArrayData } from 'composables/useArrayData';
@@ -12,12 +12,19 @@ import CustomerNotificationsFilter from './CustomerDefaulterFilter.vue';
 import CustomerBalanceDueTotal from './CustomerBalanceDueTotal.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import CustomerDefaulterAddObservation from './CustomerDefaulterAddObservation.vue';
 
 const { t } = useI18n();
 const stateStore = useStateStore();
+const quasar = useQuasar();
 
 const arrayData = ref(null);
 const balanceDueTotal = ref(0);
+const customerId = ref(0);
+const selected = ref([]);
+const workerId = ref(0);
+
+const rows = computed(() => arrayData.value.store.data);
 
 onBeforeMount(async () => {
     arrayData.value = useArrayData('CustomerDefaulter', {
@@ -31,16 +38,9 @@ onBeforeMount(async () => {
         },
         0
     );
-    console.log(balanceDueTotal.value);
     stateStore.rightDrawer = true;
 });
 
-const rows = computed(() => arrayData.value.store.data);
-
-const selected = ref([]);
-const workerId = ref(0);
-const customerId = ref(0);
-
 const tableColumnComponents = {
     client: {
         component: QBtn,
@@ -49,11 +49,10 @@ const tableColumnComponents = {
     },
     isWorker: {
         component: QCheckbox,
-        props: ({ value }) => ({
+        props: ({ row }) => ({
             disable: true,
-            'model-value': Boolean(value),
+            'model-value': Boolean(row.selected),
         }),
-        event: () => {},
     },
     salesperson: {
         component: QBtn,
@@ -180,6 +179,15 @@ const selectWorkerId = (id) => {
     customerId.value = 0;
     workerId.value = id;
 };
+
+const viewAddObservation = (rowsSelected) => {
+    quasar.dialog({
+        component: CustomerDefaulterAddObservation,
+        componentProps: {
+            clients: rowsSelected,
+        },
+    });
+};
 </script>
 
 <template>
@@ -190,11 +198,17 @@ const selectWorkerId = (id) => {
     </QDrawer>
 
     <QToolbar class="bg-vn-dark">
-        <div id="st-data">
+        <div id="st-data" class="row">
             <CustomerBalanceDueTotal :amount="balanceDueTotal" />
+            <div class="flex items-center q-ml-lg">
+                <QBtn
+                    color="primary"
+                    icon="vn:notes"
+                    :disabled="!selected.length"
+                    @click.stop="viewAddObservation(selected)"
+                />
+            </div>
         </div>
-        <QSpace />
-        <div id="st-actions"></div>
     </QToolbar>
 
     <QPage class="column items-center q-pa-md">
@@ -204,7 +218,7 @@ const selectWorkerId = (id) => {
             :rows="rows"
             class="full-width q-mt-md"
             hide-bottom
-            row-key="id"
+            row-key="clientFk"
             selection="multiple"
             v-model:selected="selected"
         >
diff --git a/src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue b/src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue
new file mode 100644
index 000000000..4a828b492
--- /dev/null
+++ b/src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue
@@ -0,0 +1,79 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import axios from 'axios';
+
+import VnRow from 'components/ui/VnRow.vue';
+
+const $props = defineProps({
+    clients: {
+        type: Array,
+        required: true,
+    },
+});
+
+const { t } = useI18n();
+
+const newObservation = ref(null);
+
+const onSubmit = async () => {
+    const data = $props.clients.map((item) => {
+        return { clientFk: item.clientFk, text: newObservation.value };
+    });
+    await axios.post('ClientObservations', data);
+    const payload = {
+        defaulters: $props.clients,
+        observation: newObservation.value,
+    };
+    await axios.post('Defaulters/observationEmail', payload);
+};
+</script>
+
+<template>
+    <QDialog ref="dialogRef">
+        <QCard class="q-pa-md q-mb-md">
+            <QCardSection>
+                <QForm @submit="onSubmit()" class="q-pa-sm">
+                    <div>
+                        {{
+                            t('Add observation to all selected clients', {
+                                numberClients: t($props.clients.length),
+                            })
+                        }}
+                    </div>
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <QInput
+                                :label="t('Message')"
+                                type="textarea"
+                                v-model="newObservation"
+                            />
+                        </div>
+                    </VnRow>
+                    <div class="q-mt-lg row justify-end">
+                        <QBtn
+                            :label="t('globals.cancel')"
+                            color="primary"
+                            flat
+                            class="q-mr-md"
+                            v-close-popup
+                        />
+                        <QBtn
+                            :label="t('globals.save')"
+                            type="submit"
+                            color="primary"
+                            v-close-popup
+                        />
+                    </div>
+                </QForm>
+            </QCardSection>
+        </QCard>
+    </QDialog>
+</template>
+
+<i18n>
+    es:
+        Add observation to all selected clients: Añadir observación a { numberClients } cliente(s) seleccionado(s)
+        Message: Mensaje
+</i18n>

From dd8373ea2208990497205a21fa232e221b4cacfe Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Mon, 8 Jan 2024 17:28:56 -0500
Subject: [PATCH 2/2] Se hacen mejoras al momento de hacer las peticiones y se
 refresca la data actualizada

---
 .../Customer/Defaulter/CustomerDefaulter.vue  | 39 ++++++++++++-------
 .../CustomerDefaulterAddObservation.vue       | 39 ++++++++++++++-----
 2 files changed, 54 insertions(+), 24 deletions(-)

diff --git a/src/pages/Customer/Defaulter/CustomerDefaulter.vue b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
index aff57318f..bf7480985 100644
--- a/src/pages/Customer/Defaulter/CustomerDefaulter.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
@@ -26,21 +26,6 @@ const workerId = ref(0);
 
 const rows = computed(() => arrayData.value.store.data);
 
-onBeforeMount(async () => {
-    arrayData.value = useArrayData('CustomerDefaulter', {
-        url: 'Defaulters/filter',
-        limit: 0,
-    });
-    await arrayData.value.fetch({ append: false });
-    balanceDueTotal.value = arrayData.value.store.data.reduce(
-        (accumulator, currentValue) => {
-            return accumulator + (currentValue['amount'] || 0);
-        },
-        0
-    );
-    stateStore.rightDrawer = true;
-});
-
 const tableColumnComponents = {
     client: {
         component: QBtn,
@@ -170,6 +155,25 @@ const columns = computed(() => [
     },
 ]);
 
+onBeforeMount(() => {
+    getArrayData();
+});
+
+const getArrayData = async () => {
+    arrayData.value = useArrayData('CustomerDefaulter', {
+        url: 'Defaulters/filter',
+        limit: 0,
+    });
+    await arrayData.value.fetch({ append: false });
+    balanceDueTotal.value = arrayData.value.store.data.reduce(
+        (accumulator, currentValue) => {
+            return accumulator + (currentValue['amount'] || 0);
+        },
+        0
+    );
+    stateStore.rightDrawer = true;
+};
+
 const selectCustomerId = (id) => {
     workerId.value = 0;
     customerId.value = id;
@@ -185,9 +189,14 @@ const viewAddObservation = (rowsSelected) => {
         component: CustomerDefaulterAddObservation,
         componentProps: {
             clients: rowsSelected,
+            promise: refreshData,
         },
     });
 };
+
+const refreshData = () => {
+    getArrayData();
+};
 </script>
 
 <template>
diff --git a/src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue b/src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue
index 4a828b492..b150f4d8b 100644
--- a/src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue
@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import axios from 'axios';
+import { useQuasar } from 'quasar';
 
 import VnRow from 'components/ui/VnRow.vue';
 
@@ -11,22 +12,42 @@ const $props = defineProps({
         type: Array,
         required: true,
     },
+    promise: {
+        type: Function,
+        required: true,
+    },
 });
 
 const { t } = useI18n();
+const quasar = useQuasar();
 
 const newObservation = ref(null);
 
 const onSubmit = async () => {
-    const data = $props.clients.map((item) => {
-        return { clientFk: item.clientFk, text: newObservation.value };
-    });
-    await axios.post('ClientObservations', data);
-    const payload = {
-        defaulters: $props.clients,
-        observation: newObservation.value,
-    };
-    await axios.post('Defaulters/observationEmail', payload);
+    try {
+        const data = $props.clients.map((item) => {
+            return { clientFk: item.clientFk, text: newObservation.value };
+        });
+        await axios.post('ClientObservations', data);
+
+        const payload = {
+            defaulters: $props.clients,
+            observation: newObservation.value,
+        };
+        await axios.post('Defaulters/observationEmail', payload);
+
+        await $props.promise();
+
+        quasar.notify({
+            message: t('globals.dataSaved'),
+            type: 'positive',
+        });
+    } catch (error) {
+        quasar.notify({
+            message: t(`${error.message}`),
+            type: 'negative',
+        });
+    }
 };
 </script>