add events and emits on list buttons,

admin/src/components/AutomaticCreation.vue

@@ -15,12 +15,16 @@
       <b-collapse id="newContribution" class="mt-2">
         <b-card>
           <p class="h2 ml-5">Automatic Creations</p>
-          <automatic-creation-form />
+          <automatic-creation-form :automaticContributionData="automaticContributionData" />
         </b-card>
       </b-collapse>
 
       <b-card-text>
-        <automatic-creation-list v-if="items.length > 1" :items="items" />
+        <automatic-creation-list
+          v-if="items.length > 1"
+          :items="items"
+          @editAutomaticContributionData="editAutomaticContributionData"
+        />
         <div v-else>Es sind keine automatischen Schöpfungen angelegt.</div>
       </b-card-text>
     </b-card>
@@ -38,9 +42,21 @@ export default {
       default: () => [],
     },
   },
+  data: function () {
+    return {
+      automaticContributionData: {},
+    }
+  },
   components: {
     AutomaticCreationForm,
     AutomaticCreationList,
   },
+  methods: {
+    editAutomaticContributionData(data) {
+      console.log('start methodes editAutomaticContributionData')
+      console.log(typeof(data))
+      this.automaticContributionData = data
+    },
+  },
 }
 </script>

admin/src/components/AutomaticCreationForm.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    {{ this.automaticContributionData }}
     <b-form class="m-5" @submit="onSubmit">
       <!-- Date -->
       <b-row>
@@ -92,7 +93,6 @@
             size="lg"
             type="number"
             placeholder="0"
-            required
           ></b-form-input>
         </b-form-group>
       </b-jumbotron>
@@ -106,10 +106,17 @@
 <script>
 export default {
   name: 'AutomaticCreationForm',
+  props: {
+    automaticContributionData: {
+      type: Object,
+      default: () => {},
+    },
+  },
   data() {
     return {
       form: {
-        name: null,
+        name:
+          this.automaticContributionData.Name === '' ? null : this.automaticContributionData.Name,
         text: null,
         amount: null,
         startDate: null,
@@ -120,6 +127,7 @@ export default {
       },
       min: new Date(),
       cycle: [
+        { value: 'no cycle', text: 'null' },
         { value: 'stündlich', text: 'stündlich' },
         { value: 'täglich', text: 'täglich' },
         { value: 'wöchentlich', text: 'wöchentlich' },

admin/src/components/AutomaticCreationList.vue

@@ -2,21 +2,36 @@
   <div>
     <b-table striped hover :items="items" :fields="fields">
       <template #cell(delete)>
-        <b-button variant="danger" size="md" class="mr-2">
+        <b-button variant="danger" size="md" class="mr-2" @click="deleteAutomaticCreations">
           <b-icon icon="trash" variant="light"></b-icon>
         </b-button>
       </template>
-      <template #cell(edit)>
-        <b-button variant="success" size="md" class="mr-2">
+      <template #cell(edit)="data">
+        <b-button variant="success" size="md" class="mr-2" @click="editAutomaticCreations(data)">
           <b-icon icon="pencil" variant="light"></b-icon>
         </b-button>
       </template>
-      <template #cell(show)>
-        <b-button variant="info" size="md" class="mr-2">
+      <template #cell(show)="data">
+        <b-button variant="info" size="md" class="mr-2" @click="showAutomaticCreations(data)">
           <b-icon icon="eye" variant="light"></b-icon>
         </b-button>
       </template>
     </b-table>
+
+    <b-modal ref="my-modal" ok-only hide-header-close>
+      <b-card header-tag="header" footer-tag="footer">
+        <template #header>
+          <h6 class="mb-0">xxx</h6>
+        </template>
+        <b-card-text>
+          daten + qrCode + link
+          {{ modalData }}
+        </b-card-text>
+        <template #footer>
+          <em>link</em>
+        </template>
+      </b-card>
+    </b-modal>
   </div>
 </template>
 <script>
@@ -27,8 +42,52 @@ export default {
   },
   data() {
     return {
-      fields: ['Name', 'Text', 'GDD', 'startDate', 'endDate', 'delete', 'edit', 'show'],
+      fields: [
+        'Name',
+        'Text',
+        'GDD',
+        'cycle',
+        'repetition',
+        { key: 'startDate', label: 'Start' },
+        { key: 'endDate', label: 'Ende' },
+        'delete',
+        'edit',
+        'show',
+      ],
+      modalData: null,
     }
   },
+  methods: {
+    deleteAutomaticCreations() {
+      this.$bvModal
+        .msgBoxConfirm('Automatische Creations wirklich löschen?')
+        .then(async (value) => {
+          // if (value)
+          // await this.$apollo
+          //   .mutate({
+          //     mutation: deleteTransactionLink,
+          //     variables: {
+          //       id: this.id,
+          //     },
+          //   })
+          //   .then(() => {
+          //     this.toastSuccess(this.$t('gdd_per_link.deleted'))
+          //     this.$emit('reset-transaction-link-list')
+          //   })
+          //   .catch((err) => {
+          //     this.toastError(err.message)
+          // })
+        })
+    },
+    editAutomaticCreations(row) {
+      this.$emit('editAutomaticContributionData', row.item)
+      this.$root.$emit('bv::toggle::collapse', 'newContribution')
+    },
+
+    showAutomaticCreations(row) {
+      this.modalData = row
+      this.$refs['my-modal'].show()
+    },
+  },
 }
 </script>

admin/src/pages/Overview.vue

@@ -67,9 +67,36 @@ export default {
       //
       //   })
       this.items = [
-        { Name: 'John1', Text: 'Doe1 ', GDD: '200', startDate: '', endDate: '' },
-        { Name: 'John2', Text: 'Doe2', GDD: '300', startDate: '', endDate: '' },
-        { Name: 'John3', Text: 'Doe3', GDD: '400', startDate: '', endDate: '' },
+        {
+          id: 1,
+          Name: 'Meditation',
+          Text: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut l',
+          GDD: '200',
+          startDate: '2022-04-01',
+          endDate: '2022-08-01',
+          cycle: 'täglich',
+          repetition: '3 mal',
+        },
+        {
+          id: 2,
+          Name: 'Teamarbeit',
+          Text: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt',
+          GDD: '300',
+          startDate: '2022-04-01',
+          endDate: '2022-12-01',
+          cycle: 'monatlich',
+          repetition: '1 mal',
+        },
+        {
+          id: 3,
+          Name: 'Documenta Kassel 2022',
+          Text: 'New Account Register by Documenta Kassel, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt',
+          GDD: '400',
+          startDate: '2022-06-18',
+          endDate: '2022-10-01',
+          cycle: 'null',
+          repetition: '1 mal',
+        },
       ]
     },
   },