formular structur, add props and apollo methods example

admin/src/components/AutomaticCreation.vue

@@ -1,24 +1,27 @@
 <template>
   <div>
     <b-card
-      v-show="items.length > 1"
       border-variant="success"
-      header="open Contribution"
+      header="Automatic Creations"
       header-bg-variant="success"
       header-text-variant="white"
+      header-class="text-center"
       class="mt-5"
     >
-      <b-button v-b-toggle.newContribution class="my-3">+ New Contribution</b-button>
+      <b-button v-b-toggle.newContribution class="my-3 d-flex justify-content-left">
+        + New Automatic Creations
+      </b-button>
 
       <b-collapse id="newContribution" class="mt-2">
         <b-card>
-          <p class="h2 ml-5">New Contribution</p>
+          <p class="h2 ml-5">Automatic Creations</p>
           <automatic-creation-form />
         </b-card>
       </b-collapse>
 
       <b-card-text>
-        <automatic-creation-list :items="items" />
+        <automatic-creation-list v-if="items.length > 1" :items="items" />
+        <div v-else>Es sind keine automatischen Schöpfungen angelegt.</div>
       </b-card-text>
     </b-card>
   </div>
@@ -30,7 +33,10 @@ import AutomaticCreationList from './AutomaticCreationList.vue'
 export default {
   name: 'AutomaticCreation',
   props: {
-    items: { type: Array },
+    items: {
+      type: Array,
+      default: () => [],
+    },
   },
   components: {
     AutomaticCreationForm,

admin/src/components/AutomaticCreationForm.vue

@@ -1,42 +1,101 @@
 <template>
   <div>
     <b-form class="m-5" @submit="onSubmit">
+      <!-- Date -->
+      <b-row>
+        <b-col>
+          <b-form-group id="input-group-4" label="Start-Datum:">
+            <b-form-datepicker
+              v-model="form.startDate"
+              size="lg"
+              :min="min"
+              class="mb-4"
+              required
+            ></b-form-datepicker>
+          </b-form-group>
+        </b-col>
+        <b-col>
+          <b-form-group id="input-group-4" label="End-Datum:">
+            <b-form-datepicker
+              v-model="form.endDate"
+              size="lg"
+              :min="form.startDate ? form.startDate : min"
+              class="mb-4"
+              required
+            ></b-form-datepicker>
+          </b-form-group>
+        </b-col>
+      </b-row>
+
+      <!-- Name -->
       <b-form-group id="input-group-1" label="Name:">
         <b-form-input
           v-model="form.name"
+          size="lg"
           type="text"
           placeholder="Name Contribution"
           required
         ></b-form-input>
       </b-form-group>
+      <!-- Desc -->
       <b-form-group id="input-group-2" label="Beschreibung:">
         <b-form-textarea
           v-model="form.text"
+          size="lg"
           placeholder="Text Contribution"
           required
         ></b-form-textarea>
       </b-form-group>
+      <!-- Amount -->
       <b-form-group id="input-group-3" label="Betrag:">
-        <b-form-input v-model="form.amount" type="number" placeholder="0" required></b-form-input>
-      </b-form-group>
-      <div>
-        <b-form-group id="input-group-4" label="Start-Datum:">
-          <b-form-datepicker
-            v-model="form.startDate"
-            :min="min"
-            class="mb-4"
-            required
-          ></b-form-datepicker>
-        </b-form-group>
-
-        <label for="datepicker-invalid">End-Datum</label>
-        <b-form-datepicker
-          v-model="form.endDate"
-          :min="form.startDate ? form.startDate : min"
-          class="mb-4"
+        <b-form-input
+          v-model="form.amount"
+          size="lg"
+          type="number"
+          placeholder="0"
           required
-        ></b-form-datepicker>
-      </div>
+        ></b-form-input>
+      </b-form-group>
+
+      <b-jumbotron>
+        <b-row class="mb-4">
+          <b-col>
+            <!-- Cycle -->
+            <label for="cycle-repetition">Zyclus</label>
+            <b-form-select v-model="form.cycle" :options="cycle" class="mb-3" size="lg">
+              <!-- This slot appears above the options from 'options' prop -->
+              <template #first>
+                <b-form-select-option :value="null" disabled>
+                  -- Please select an cycle --
+                </b-form-select-option>
+              </template>
+            </b-form-select>
+          </b-col>
+          <b-col>
+            <!-- Repetition -->
+            <label for="cycle-repetition">Wiederholung</label>
+            <b-form-select v-model="form.repetition" :options="repetition" class="mb-3" size="lg">
+              <!-- This slot appears above the options from 'options' prop -->
+              <template #first>
+                <b-form-select-option :value="null" disabled>
+                  -- Please select an repetition --
+                </b-form-select-option>
+              </template>
+            </b-form-select>
+          </b-col>
+        </b-row>
+
+        <!-- Max amount -->
+        <b-form-group label="maximaler Betrag:">
+          <b-form-input
+            v-model="form.maxAmount"
+            size="lg"
+            type="number"
+            placeholder="0"
+            required
+          ></b-form-input>
+        </b-form-group>
+      </b-jumbotron>
       <div class="mt-6">
         <b-button type="submit" variant="primary">Anlegen</b-button>
         <b-button type="reset" variant="danger">Reset</b-button>
@@ -55,14 +114,32 @@ export default {
         amount: null,
         startDate: null,
         endDate: null,
+        cycle: null,
+        repetition: null,
+        maxAmount: null,
       },
       min: new Date(),
+      cycle: [
+        { value: 'stündlich', text: 'stündlich' },
+        { value: 'täglich', text: 'täglich' },
+        { value: 'wöchentlich', text: 'wöchentlich' },
+        { value: 'monatlich', text: 'monatlich' },
+        { value: 'jährlich', text: 'jährlich' },
+      ],
+      repetition: [
+        { value: '1', text: '1 mal' },
+        { value: '2', text: '2 mal' },
+        { value: '3', text: '3 mal' },
+        { value: '4', text: '4 mal' },
+        { value: '5', text: '5 mal' },
+      ],
     }
   },
   methods: {
     onSubmit(event) {
       event.preventDefault()
-      if (this.form.name === null || this.form.text === null) return
+      if (this.form.startDate === null) return this.toastError('No start Date')
+      if (this.form.endDate === null) return this.toastError('No end Date')
       alert(JSON.stringify(this.form))
     },
   },

admin/src/pages/Overview.vue

@@ -42,11 +42,7 @@ export default {
   },
   data() {
     return {
-      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: '' },
-      ],
+      items: [],
     }
   },
   methods: {
@@ -60,9 +56,26 @@ export default {
           this.$store.commit('setOpenCreations', result.data.getPendingCreations.length)
         })
     },
+    async getAutomaticCreations() {
+      // TODO
+      // this.$apollo
+      //   .query({
+      //     query: getAutomaticCreations,
+      //     fetchPolicy: 'network-only',
+      //   })
+      //   .then((result) => {
+      //
+      //   })
+      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: '' },
+      ]
+    },
   },
   created() {
     this.getPendingCreations()
+    // this.getAutomaticCreations()
   },
 }
 </script>