From 65251f9b139f2f060c30dabbae26f01f30fcccf4 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 18 Dec 2023 12:06:07 -0300
Subject: [PATCH] modificaciones necesarias para aplicar a VnSelectCreate

---
 src/components/FormModel.vue             |  7 ++++---
 src/components/common/VnSelectCreate.vue |  8 ++------
 src/components/common/VnSelectFilter.vue | 19 +++++--------------
 3 files changed, 11 insertions(+), 23 deletions(-)

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 453b3ffe1..f415546ea 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -57,7 +57,7 @@ const $props = defineProps({
     },
 });
 
-const emit = defineEmits(['onFetch']);
+const emit = defineEmits(['onFetch', 'onDataSaved']);
 
 defineExpose({
     save,
@@ -84,7 +84,7 @@ onUnmounted(() => {
 const isLoading = ref(false);
 // Si elegimos observar los cambios del form significa que inicialmente las actions estaran deshabilitadas
 const hasChanges = ref(!$props.observeFormChanges);
-const originalData = ref({...$props.formInitialData});
+const originalData = ref({ ...$props.formInitialData });
 const formData = computed(() => state.get($props.model));
 const formUrl = computed(() => $props.url);
 
@@ -114,7 +114,7 @@ async function fetch() {
 }
 
 async function save() {
-    if (!hasChanges.value) {
+    if ($props.observeFormChanges && !hasChanges.value) {
         notify('globals.noChanges', 'negative');
         return;
     }
@@ -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 3c5b6f966..a0605bbae 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({
@@ -24,16 +24,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.toString().toLowerCase();
@@ -69,10 +64,6 @@ const filterHandler = (val, update) => {
     );
 };
 
-watch(options, (newValue) => {
-    setOptions(newValue);
-});
-
 const value = computed({
     get() {
         return $props.modelValue;