From 5ff90d127b2e0b2ff3ab296fe87fdcb27a6ca834 Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Sun, 10 Mar 2024 21:20:19 -0500
Subject: [PATCH] Solucion a comentarios 33

---
 .../Customer/Card/CustomerBillingData.vue     |   7 +-
 .../Customer/Defaulter/CustomerDefaulter.vue  |  12 +
 .../components/CustomerSamplesCreate.vue      | 322 +++++++++++-------
 3 files changed, 203 insertions(+), 138 deletions(-)

diff --git a/src/pages/Customer/Card/CustomerBillingData.vue b/src/pages/Customer/Card/CustomerBillingData.vue
index e1b126195..a47dae71f 100644
--- a/src/pages/Customer/Card/CustomerBillingData.vue
+++ b/src/pages/Customer/Card/CustomerBillingData.vue
@@ -59,12 +59,7 @@ const getBankEntities = (data, formData) => {
                     />
                 </div>
                 <div class="col">
-                    <VnInput
-                        :label="t('Due day')"
-                        :rules="validate('client.socialName')"
-                        clearable
-                        v-model="data.dueDay"
-                    />
+                    <VnInput :label="t('Due day')" clearable v-model="data.dueDay" />
                 </div>
             </VnRow>
 
diff --git a/src/pages/Customer/Defaulter/CustomerDefaulter.vue b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
index 8165da169..1ca16abdd 100644
--- a/src/pages/Customer/Defaulter/CustomerDefaulter.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
@@ -230,6 +230,18 @@ const onFetch = (data) => {
             selection="multiple"
             v-model:selected="selected"
         >
+            <template #header="props">
+                <QTr :props="props" class="bg">
+                    <QTh>
+                        <QCheckbox v-model="props.selected" />
+                    </QTh>
+                    <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                        {{ t(col.label) }}
+                        <QTooltip v-if="col.tooltip">{{ col.tooltip }}</QTooltip>
+                    </QTh>
+                </QTr>
+            </template>
+
             <template #body-cell="props">
                 <QTd :props="props">
                     <QTr :props="props" class="cursor-pointer">
diff --git a/src/pages/Customer/components/CustomerSamplesCreate.vue b/src/pages/Customer/components/CustomerSamplesCreate.vue
index 7b0d34bd3..b37ed79fa 100644
--- a/src/pages/Customer/components/CustomerSamplesCreate.vue
+++ b/src/pages/Customer/components/CustomerSamplesCreate.vue
@@ -7,25 +7,31 @@ import axios from 'axios';
 import { useQuasar } from 'quasar';
 
 import { useState } from 'src/composables/useState';
+import { useValidator } from 'src/composables/useValidator';
+import useNotify from 'src/composables/useNotify';
 
 import FetchData from 'components/FetchData.vue';
-import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import CustomerSamplesPreview from 'src/pages/Customer/components/CustomerSamplesPreview.vue';
 
+const { notify } = useNotify();
 const { t } = useI18n();
+const { validate } = useValidator();
 const quasar = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const state = useState();
 const user = state.getUser();
 
-const optionsEmailUsers = ref([]);
+const client = ref({});
+const hasChanged = ref(false);
+const isLoading = ref(false);
 const optionsClientsAddressess = ref([]);
 const optionsCompanies = ref([]);
+const optionsEmailUsers = ref([]);
 const optionsSamplesVisible = ref([]);
 const sampleType = ref({ hasPreview: false });
 
@@ -53,11 +59,9 @@ const filterSamplesVisible = {
 const initialData = reactive({});
 
 onBeforeMount(async () => {
-    const { companyFk } = user.value;
     const { data } = await axios.get(`Clients/1/getCard`);
+    client.value = data;
     initialData.clientFk = route.params.id;
-    initialData.companyFk = companyFk;
-    initialData.companyId = companyFk;
     initialData.recipient = data.email;
     initialData.recipientId = data.id;
 });
@@ -73,28 +77,27 @@ const setClientsAddresses = (data) => {
 };
 
 const setSampleType = (sampleId) => {
-    sampleType.value = optionsSamplesVisible.value.find(
-        (option) => option.id === sampleId
-    );
+    hasChanged.value = true;
+    const { companyFk } = user.value;
+    sampleType.value = optionsSamplesVisible.value.find((option) => {
+        return option.id === sampleId;
+    });
+    initialData.companyFk = companyFk;
+    initialData.companyId = companyFk;
 };
 
-const onDataSaved = async ({
-    addressId,
-    companyFk,
-    companyId,
-    from,
-    recipient,
-    replyTo,
-}) => {
-    await axios.post(`Clients/${route.params.id}/incoterms-authorization-email`, {
-        addressId,
-        companyFk,
-        companyId,
-        from,
-        recipient,
-        replyTo,
-    });
-    toCustomerSamples();
+const setInitialData = () => {
+    hasChanged.value = false;
+
+    initialData.addressId = optionsClientsAddressess.value[0].id;
+    initialData.companyFk = null;
+    initialData.from = null;
+    initialData.recipient = client.value.email;
+    initialData.recipientId = client.value.id;
+    initialData.replyTo = optionsEmailUsers.value[0]?.email;
+    initialData.typeFk = '';
+
+    sampleType.value = {};
 };
 
 const getPreview = async () => {
@@ -123,6 +126,43 @@ const getPreview = async () => {
     }
 };
 
+const onSubmit = async () => {
+    isLoading.value = true;
+
+    try {
+        const { data } = await axios.patch('ClientSamples', initialData);
+        notify('globals.dataSaved', 'positive');
+        onDataSaved(data);
+    } catch (error) {
+        notify('errors.create', 'negative');
+    } finally {
+        isLoading.value = false;
+    }
+};
+
+const onDataSaved = async ({
+    addressId,
+    companyFk,
+    companyId,
+    from,
+    recipient,
+    replyTo,
+}) => {
+    await axios.post(`Clients/${route.params.id}/incoterms-authorization-email`, {
+        addressId,
+        companyFk,
+        companyId,
+        from,
+        recipient,
+        replyTo,
+    });
+    toCustomerSamples();
+};
+
+const updateModelValue = () => {
+    hasChanged.value = true;
+};
+
 const toCustomerSamples = () => {
     router.push({ name: 'CustomerSamples' });
 };
@@ -154,14 +194,8 @@ const toCustomerSamples = () => {
         url="Samples/visible"
     />
 
-    <FormModel
-        :form-initial-data="initialData"
-        :observe-form-changes="false"
-        @on-data-saved="onDataSaved"
-        model="samplesCreate"
-        url-create="ClientSamples"
-    >
-        <template #moreActions>
+    <Teleport to="#st-actions">
+        <QBtnGroup push class="q-gutter-x-sm">
             <QBtn
                 :label="t('globals.cancel')"
                 @click="toCustomerSamples"
@@ -170,7 +204,7 @@ const toCustomerSamples = () => {
                 icon="close"
             />
             <QBtn
-                :disabled="isLoading || !sampleType.hasPreview"
+                :disabled="isLoading || !sampleType?.hasPreview"
                 :label="t('Preview')"
                 :loading="isLoading"
                 @click.stop="getPreview()"
@@ -178,10 +212,30 @@ const toCustomerSamples = () => {
                 flat
                 icon="preview"
             />
-        </template>
+            <QBtn
+                :disabled="!hasChanged"
+                :label="t('globals.reset')"
+                :loading="isLoading"
+                @click="setInitialData"
+                color="primary"
+                flat
+                icon="restart_alt"
+                type="reset"
+            />
+            <QBtn
+                :disabled="!hasChanged"
+                :label="t('globals.save')"
+                :loading="isLoading"
+                @click="onSubmit"
+                color="primary"
+                icon="save"
+            />
+        </QBtnGroup>
+    </Teleport>
 
-        <template #form="{ data, validate }">
-            <VnRow class="row q-gutter-md q-mb-md">
+    <div class="full-width flex justify-center">
+        <QCard class="card-width q-pa-lg">
+            <QForm>
                 <div class="col">
                     <VnSelectFilter
                         :label="t('Sample')"
@@ -190,106 +244,110 @@ const toCustomerSamples = () => {
                         hide-selected
                         option-label="description"
                         option-value="id"
-                        required="true"
-                        v-model="data.typeFk"
+                        v-model="initialData.typeFk"
                     />
                 </div>
-            </VnRow>
 
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        :label="t('Recipient')"
-                        clearable
-                        required="true"
-                        v-model="data.recipient"
-                    >
-                        <template #append>
-                            <QIcon name="info" class="cursor-pointer">
-                                <QTooltip>{{
-                                    t('Its only used when sample is sent')
-                                }}</QTooltip>
-                            </QIcon>
-                        </template>
-                    </VnInput>
-                </div>
-                <div class="col">
-                    <VnInput
-                        :label="t('Reply to')"
-                        clearable
-                        required="true"
-                        v-model="data.replyTo"
-                    >
-                        <template #append>
-                            <QIcon name="info" class="cursor-pointer">
-                                <QTooltip>{{
-                                    t('To who should the recipient replay?')
-                                }}</QTooltip>
-                            </QIcon>
-                        </template>
-                    </VnInput>
-                </div>
-            </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnInput
+                            :label="t('Recipient')"
+                            @update:model-value="updateModelValue"
+                            clearable
+                            required="true"
+                            v-model="initialData.recipient"
+                        >
+                            <template #append>
+                                <QIcon name="info" class="cursor-pointer">
+                                    <QTooltip>{{
+                                        t('Its only used when sample is sent')
+                                    }}</QTooltip>
+                                </QIcon>
+                            </template>
+                        </VnInput>
+                    </div>
+                    <div class="col">
+                        <VnInput
+                            :label="t('Reply to')"
+                            @update:model-value="updateModelValue"
+                            clearable
+                            required="true"
+                            v-model="initialData.replyTo"
+                        >
+                            <template #append>
+                                <QIcon name="info" class="cursor-pointer">
+                                    <QTooltip>{{
+                                        t('To who should the recipient replay?')
+                                    }}</QTooltip>
+                                </QIcon>
+                            </template>
+                        </VnInput>
+                    </div>
+                </VnRow>
 
-            <VnRow
-                class="row q-gutter-md q-mb-md"
-                v-if="sampleType.hasCompany || sampleType.datepickerEnabled"
-            >
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Company')"
-                        :options="optionsCompanies"
-                        :rules="validate('entry.companyFk')"
-                        hide-selected
-                        option-label="code"
-                        option-value="id"
-                        required="true"
-                        v-model="data.companyFk"
-                        v-if="sampleType.hasCompany"
-                    />
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Address')"
-                        :options="optionsClientsAddressess"
-                        hide-selected
-                        option-label="nickname"
-                        option-value="id"
-                        required="true"
-                        v-model="data.addressId"
-                        v-if="sampleType.id === 20"
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>
-                                        {{
-                                            `${scope.opt.nickname}, ${scope.opt.street}, ${scope.opt.city}, ${scope.opt.province.name} - ${scope.opt.agencyMode.name}`
-                                        }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                        <template #append>
-                            <QIcon name="edit" class="cursor-pointer">
-                                <QTooltip>{{ t('Edit address') }}</QTooltip>
-                            </QIcon>
-                        </template>
-                    </VnSelectFilter>
-                </div>
-            </VnRow>
+                <VnRow
+                    class="row q-gutter-md q-mb-md"
+                    v-if="sampleType?.hasCompany || sampleType?.datepickerEnabled"
+                >
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('Company')"
+                            :options="optionsCompanies"
+                            :rules="validate('entry.companyFk')"
+                            hide-selected
+                            option-label="code"
+                            option-value="id"
+                            required="true"
+                            v-model="initialData.companyFk"
+                            v-if="sampleType.hasCompany"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('Address')"
+                            :options="optionsClientsAddressess"
+                            hide-selected
+                            option-label="nickname"
+                            option-value="id"
+                            required="true"
+                            v-model="initialData.addressId"
+                            v-if="sampleType.id === 20"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>
+                                            {{
+                                                `${scope.opt.nickname}, ${scope.opt.street}, ${scope.opt.city}, ${scope.opt.province.name} - ${scope.opt.agencyMode.name}`
+                                            }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                            <template #append>
+                                <QIcon name="edit" class="cursor-pointer">
+                                    <QTooltip>{{ t('Edit address') }}</QTooltip>
+                                </QIcon>
+                            </template>
+                        </VnSelectFilter>
+                    </div>
+                </VnRow>
 
-            <VnRow class="row q-gutter-md q-mb-md" v-if="sampleType.datepickerEnabled">
-                <div class="col">
-                    <VnInputDate
-                        :label="t('Since')"
-                        required="true"
-                        v-model="data.from"
-                    />
-                </div>
-            </VnRow>
-        </template>
-    </FormModel>
+                <VnRow
+                    class="row q-gutter-md q-mb-md"
+                    v-if="sampleType?.datepickerEnabled"
+                >
+                    <div class="col">
+                        <VnInputDate
+                            :label="t('Since')"
+                            required="true"
+                            v-model="initialData.from"
+                        />
+                    </div>
+                </VnRow>
+            </QForm>
+        </QCard>
+    </div>
 </template>
 
 <i18n>