add emit and props for update formular

admin/src/components/AutomaticCreation.vue

@@ -12,7 +12,7 @@
         + New Automatic Creations
       </b-button>
 
-      <b-collapse id="newContribution" class="mt-2">
+      <b-collapse v-model="visible" id="newContribution" class="mt-2">
         <b-card>
           <p class="h2 ml-5">Automatic Creations</p>
           <automatic-creation-form :automaticContributionData="automaticContributionData" />
@@ -31,11 +31,15 @@
   </div>
 </template>
 <script>
-import AutomaticCreationForm from './AutomaticCreationForm.vue'
+import AutomaticCreationForm, { updateForm } from './AutomaticCreationForm.vue'
 import AutomaticCreationList from './AutomaticCreationList.vue'
 
 export default {
   name: 'AutomaticCreation',
+  components: {
+    AutomaticCreationForm,
+    AutomaticCreationList,
+  },
   props: {
     items: {
       type: Array,
@@ -44,17 +48,16 @@ export default {
   },
   data: function () {
     return {
+      visible: false,
       automaticContributionData: {},
     }
   },
-  components: {
+ 
-    AutomaticCreationForm,
-    AutomaticCreationList,
-  },
   methods: {
     editAutomaticContributionData(data) {
       console.log('start methodes editAutomaticContributionData')
-      console.log(typeof(data))
+      console.log(typeof data)
+      if (!this.visible) this.$root.$emit('bv::toggle::collapse', 'newContribution')
       this.automaticContributionData = data
     },
   },

admin/src/components/AutomaticCreationForm.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
-    {{ this.automaticContributionData }}
+    <div v-if="updateData" class="text-light bg-info p-3">
-    <b-form class="m-5" @submit="onSubmit">
+      {{ updateData }}
+    </div>
+    <b-form class="m-5" @submit="onSubmit" @reset="onReset">
       <!-- Date -->
       <b-row>
         <b-col>
@@ -109,14 +111,15 @@ export default {
   props: {
     automaticContributionData: {
       type: Object,
-      default: () => {},
+      default() {
+        return {}
+      },
     },
   },
   data() {
     return {
       form: {
-        name:
+        name: null,
-          this.automaticContributionData.Name === '' ? null : this.automaticContributionData.Name,
         text: null,
         amount: null,
         startDate: null,
@@ -150,6 +153,26 @@ export default {
       if (this.form.endDate === null) return this.toastError('No end Date')
       alert(JSON.stringify(this.form))
     },
+    onReset(event) {
+      event.preventDefault()
+      this.form.name = null
+      this.form.text = null
+      this.form.amount = null
+      this.form.startDate = null
+      this.form.endDate = null
+      this.form.cycle = null
+      this.form.repetition = null
+      this.form.maxAmount = null
+      this.updateData = {}
+    },
+    updateForm() {
+      alert('updateForm')
+    },
+  },
+  computed: {
+    updateData() {
+      return this.automaticContributionData
+    },
   },
 }
 </script>

admin/src/components/AutomaticCreationList.vue

@@ -81,7 +81,7 @@ export default {
     },
     editAutomaticCreations(row) {
       this.$emit('editAutomaticContributionData', row.item)
-      this.$root.$emit('bv::toggle::collapse', 'newContribution')
+     
     },
 
     showAutomaticCreations(row) {