From ab549b6e6a5a3f3b61792d71f27ea2abf917e608 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 18 Dec 2023 11:57:56 -0300
Subject: [PATCH] Agregar funcionalidades al formulario y al InputSelectCreate

---
 src/components/CreateBankEntityForm.vue  | 30 ++++++++++-----
 src/components/FormModel.vue             |  1 +
 src/components/common/VnSelectCreate.vue |  8 +---
 src/components/common/VnSelectFilter.vue | 19 +++-------
 src/pages/Worker/WorkerCreate.vue        | 48 ++++++++++++------------
 5 files changed, 51 insertions(+), 55 deletions(-)

diff --git a/src/components/CreateBankEntityForm.vue b/src/components/CreateBankEntityForm.vue
index c2b711883..a20bf641a 100644
--- a/src/components/CreateBankEntityForm.vue
+++ b/src/components/CreateBankEntityForm.vue
@@ -7,11 +7,11 @@ import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 
-const emit = defineEmits(['closeForm', 'onDataSaved']);
+const emit = defineEmits(['onDataSaved']);
 
 const { t } = useI18n();
 
-const formData = reactive({
+const bankEntityFormData = reactive({
     name: null,
     bic: null,
     countryFk: null,
@@ -22,6 +22,7 @@ const countriesFilter = {
     fields: ['id', 'country', 'code'],
 };
 
+const closeButton = ref(null);
 const countriesOptions = ref([]);
 const loading = ref(false);
 
@@ -29,14 +30,14 @@ const setCountriesOptions = (data) => {
     countriesOptions.value = data;
 };
 
-const closeForm = () => {
-    emit('closeForm');
-};
-
 const onDataSaved = (data) => {
     emit('onDataSaved', data);
     closeForm();
 };
+
+const closeForm = () => {
+    if (closeButton.value) closeButton.value.click();
+};
 </script>
 
 <template>
@@ -47,14 +48,17 @@ const onDataSaved = (data) => {
         auto-load
     />
     <FormModel
-        :form-initial-data="formData"
+        :form-initial-data="bankEntityFormData"
         :observe-form-changes="false"
         :default-actions="false"
         url-create="bankEntities"
         model="bankEntity"
-        @on-data-saved="onDataSaved(data)"
+        @on-data-saved="onDataSaved($event)"
     >
         <template #form="{ data, validate }">
+            <span ref="closeButton" class="close-icon" v-close-popup>
+                <QIcon name="close" size="22px" />
+            </span>
             <h1 class="title">{{ t('title') }}</h1>
             <span class="q-mb-md">{{ t('subtitle') }}</span>
             <VnRow class="row q-gutter-md q-mb-md">
@@ -77,7 +81,7 @@ const onDataSaved = (data) => {
                 <div class="col">
                     <VnSelectFilter
                         :label="t('country')"
-                        v-model="formData.countryFk"
+                        v-model="data.countryFk"
                         :options="countriesOptions"
                         option-value="id"
                         option-label="country"
@@ -86,7 +90,7 @@ const onDataSaved = (data) => {
                     />
                 </div>
                 <div class="col">
-                    <QInput :label="t('id')" v-model="formData.id" />
+                    <QInput :label="t('id')" v-model="data.id" />
                 </div>
             </VnRow>
             <div class="q-mt-lg row justify-end">
@@ -113,6 +117,12 @@ const onDataSaved = (data) => {
 </template>
 
 <style lang="scss" scoped>
+.close-icon {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    cursor: pointer;
+}
 .title {
     font-size: 17px;
     font-weight: bold;
diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index dc413942e..f415546ea 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -127,6 +127,7 @@ async function save() {
         } else {
             await axios.patch($props.urlUpdate || $props.url, formData.value);
         }
+        emit('onDataSaved', formData.value);
     } catch (err) {
         notify('errors.create', 'negative');
     }
diff --git a/src/components/common/VnSelectCreate.vue b/src/components/common/VnSelectCreate.vue
index 867c97135..b01bb365f 100644
--- a/src/components/common/VnSelectCreate.vue
+++ b/src/components/common/VnSelectCreate.vue
@@ -16,10 +16,6 @@ const $props = defineProps({
         type: Array,
         default: () => [],
     },
-    optionLabel: {
-        type: String,
-        default: '',
-    },
     rolesAllowedToCreate: {
         type: Array,
         default: () => ['developer'],
@@ -48,7 +44,7 @@ const toggleForm = () => {
 </script>
 
 <template>
-    <VnSelectFilter v-model="value" :options="options">
+    <VnSelectFilter v-model="value" :options="options" v-bind="$attrs">
         <template v-if="isAllowedToCreate" #append>
             <QIcon
                 @click.stop.prevent="toggleForm()"
@@ -57,7 +53,7 @@ const toggleForm = () => {
                 class="add-icon"
             />
             <QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
-                <slot name="form" @close-form="toggleForm()" />
+                <slot name="form" />
             </QDialog>
         </template>
         <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index 789622cb9..c362312d4 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, toRefs, watch, computed } from 'vue';
+import { ref, toRefs, computed } from 'vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
 
 const $props = defineProps({
@@ -20,16 +20,11 @@ const $props = defineProps({
         default: true,
     },
 });
-const { optionLabel, options } = toRefs($props);
-const myOptions = ref([]);
-const myOptionsOriginal = ref([]);
-const vnSelectRef = ref(null);
 
-function setOptions(data) {
-    myOptions.value = JSON.parse(JSON.stringify(data));
-    myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
-}
-setOptions(options.value);
+const { optionLabel } = toRefs($props);
+const myOptions = ref([]);
+const myOptionsOriginal = computed(() => $props.options);
+const vnSelectRef = ref(null);
 
 const filter = (val, options) => {
     const search = val.toLowerCase();
@@ -61,10 +56,6 @@ const filterHandler = (val, update) => {
     );
 };
 
-watch(options, (newValue) => {
-    setOptions(newValue);
-});
-
 const value = computed({
     get() {
         return $props.modelValue;
diff --git a/src/pages/Worker/WorkerCreate.vue b/src/pages/Worker/WorkerCreate.vue
index b047a6a93..1467b5977 100644
--- a/src/pages/Worker/WorkerCreate.vue
+++ b/src/pages/Worker/WorkerCreate.vue
@@ -46,23 +46,21 @@ const newWorkerForm = ref({
     bankEntityFk: null,
 });
 
-const filtersOptions = reactive({
-    provinces: [],
-    towns: [],
-    companies: [],
-    workers: [],
-    payMethods: [],
-    bankEntities: [],
-});
-
-const updateFilterOptions = (data, optionKey) => {
-    filtersOptions[optionKey] = [...data];
-};
+const provincesOptions = ref([]);
+const townsOptions = ref([]);
+const companiesOptions = ref([]);
+const workersOptions = ref([]);
+const payMethodsOptions = ref([]);
+const bankEntitiesOptions = ref([]);
 
 const onFetchWorkerConfig = (workerConfig) => {
     newWorkerForm.value.payMethodFk = workerConfig.payMethodFk;
 };
 
+const onDataSaved = (data) => {
+    bankEntitiesOptions.value.push(data);
+};
+
 onMounted(async () => {
     const userInfo = await useUserConfig().fetch();
     newWorkerForm.value = { companyFk: userInfo.companyFk };
@@ -78,34 +76,34 @@ onMounted(async () => {
     />
     <FetchData
         url="Provinces/location"
-        @on-fetch="(data) => updateFilterOptions(data, 'provinces')"
+        @on-fetch="(data) => (provincesOptions = data)"
         :filter="provincesFilter"
         auto-load
     />
     <FetchData
         url="Towns/location"
-        @on-fetch="(data) => updateFilterOptions(data, 'towns')"
+        @on-fetch="(data) => (townsOptions = data)"
         :filter="townsFilter"
         auto-load
     />
     <FetchData
         url="Companies"
-        @on-fetch="(data) => updateFilterOptions(data, 'companies')"
+        @on-fetch="(data) => (companiesOptions = data)"
         auto-load
     />
     <FetchData
         url="Workers/search"
-        @on-fetch="(data) => updateFilterOptions(data, 'workers')"
+        @on-fetch="(data) => (workersOptions = data)"
         auto-load
     />
     <FetchData
         url="Paymethods"
-        @on-fetch="(data) => updateFilterOptions(data, 'payMethods')"
+        @on-fetch="(data) => (payMethodsOptions = data)"
         auto-load
     />
     <FetchData
         url="BankEntities"
-        @on-fetch="(data) => updateFilterOptions(data, 'bankEntities')"
+        @on-fetch="(data) => (bankEntitiesOptions = data)"
         auto-load
     />
 
@@ -163,7 +161,7 @@ onMounted(async () => {
                         <VnSelectFilter
                             :label="t('worker.create.province')"
                             v-model="data.provinceFk"
-                            :options="filtersOptions.provinces"
+                            :options="provincesOptions"
                             option-value="id"
                             option-label="name"
                             hide-selected
@@ -175,7 +173,7 @@ onMounted(async () => {
                         <VnSelectFilter
                             :label="t('worker.create.city')"
                             v-model="data.city"
-                            :options="filtersOptions.towns"
+                            :options="townsOptions"
                             option-value="name"
                             option-label="name"
                             hide-selected
@@ -218,7 +216,7 @@ onMounted(async () => {
                         <VnSelectFilter
                             :label="t('worker.create.company')"
                             v-model="data.companyFk"
-                            :options="filtersOptions.companies"
+                            :options="companiesOptions"
                             option-value="id"
                             option-label="code"
                             hide-selected
@@ -228,7 +226,7 @@ onMounted(async () => {
                         <VnSelectFilter
                             :label="t('worker.create.boss')"
                             v-model="data.bossFk"
-                            :options="filtersOptions.workers"
+                            :options="workersOptions"
                             option-value="id"
                             option-label="name"
                             hide-selected
@@ -252,7 +250,7 @@ onMounted(async () => {
                         <VnSelectFilter
                             :label="t('worker.create.payMethods')"
                             v-model="data.payMethodFk"
-                            :options="filtersOptions.payMethods"
+                            :options="payMethodsOptions"
                             option-value="id"
                             option-label="name"
                             hide-selected
@@ -265,14 +263,14 @@ onMounted(async () => {
                     <VnSelectCreate
                         :label="t('worker.create.bankEntity')"
                         v-model="data.bankEntityFk"
-                        :options="filtersOptions.bankEntities"
+                        :options="bankEntitiesOptions"
                         option-label="name"
                         option-value="id"
                         hide-selected
                         :roles-allowed-to-create="['salesAssistant', 'hr']"
                     >
                         <template #form>
-                            <CreateBankEntityForm />
+                            <CreateBankEntityForm @on-data-saved="onDataSaved($event)" />
                         </template>
                         <template #option="scope">
                             <QItem v-bind="scope.itemProps">