From 77d5825ea239b7942332c5937b99367c5450d3cf Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 7 Jun 2022 11:19:31 +0200
Subject: [PATCH] rename from AutomaticCobtribution to ContributionLink, add
 locales

---
 .../src/components/AutomaticCreationForm.vue  | 213 ------------------
 ...maticCreation.vue => ContributionLink.vue} |  28 +--
 admin/src/components/ContributionLinkForm.vue | 206 +++++++++++++++++
 ...ationList.vue => ContributionLinkList.vue} |  25 +-
 ...cCreation.js => createContributionLink.js} |   4 +-
 admin/src/graphql/deleteAutomaticCreation.js  |   7 -
 admin/src/graphql/deleteContributionLink.js   |   7 +
 ...cCreations.js => listContributionLinks.js} |   4 +-
 ...ticCreation.js => showContributionLink.js} |   4 +-
 admin/src/locales/de.json                     |  32 +++
 admin/src/locales/en.json                     |  28 +++
 admin/src/pages/Overview.vue                  |  22 +-
 12 files changed, 314 insertions(+), 266 deletions(-)
 delete mode 100644 admin/src/components/AutomaticCreationForm.vue
 rename admin/src/components/{AutomaticCreation.vue => ContributionLink.vue} (59%)
 create mode 100644 admin/src/components/ContributionLinkForm.vue
 rename admin/src/components/{AutomaticCreationList.vue => ContributionLinkList.vue} (80%)
 rename admin/src/graphql/{createAutomaticCreation.js => createContributionLink.js} (85%)
 delete mode 100644 admin/src/graphql/deleteAutomaticCreation.js
 create mode 100644 admin/src/graphql/deleteContributionLink.js
 rename admin/src/graphql/{listAutomaticCreations.js => listContributionLinks.js} (71%)
 rename admin/src/graphql/{showAutomaticCreation.js => showContributionLink.js} (73%)

diff --git a/admin/src/components/AutomaticCreationForm.vue b/admin/src/components/AutomaticCreationForm.vue
deleted file mode 100644
index 23ec651d9..000000000
--- a/admin/src/components/AutomaticCreationForm.vue
+++ /dev/null
@@ -1,213 +0,0 @@
-<template>
-  <div>
-    <div v-if="updateData" class="text-light bg-info p-3">
-      {{ updateData }}
-    </div>
-    <b-form class="m-5" @submit="onSubmit" @reset="onReset">
-      <!-- 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"
-          required
-        ></b-form-input>
-      </b-form-group>
-      <!-- Desc -->
-      <b-form-group id="input-group-2" label="Nachricht:">
-        <b-form-textarea
-          v-model="form.memo"
-          size="lg"
-          placeholder="Memo"
-          required
-        ></b-form-textarea>
-      </b-form-group>
-      <!-- Amount -->
-      <b-form-group id="input-group-3" label="Betrag:">
-        <b-form-input
-          v-model="form.amount"
-          size="lg"
-          type="number"
-          placeholder="0"
-          required
-        ></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"
-          ></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>
-      </div>
-    </b-form>
-  </div>
-</template>
-<script>
-import { createAutomaticCreation } from '@/graphql/createAutomaticCreation.js'
-export default {
-  name: 'AutomaticCreationForm',
-  props: {
-    automaticContributionData: {
-      type: Object,
-      default() {
-        return {}
-      },
-    },
-  },
-  data() {
-    return {
-      form: {
-        name: null,
-        memo: null,
-        amount: null,
-        startDate: null,
-        endDate: null,
-        cycle: null,
-        repetition: null,
-        maxAmount: null,
-      },
-      min: new Date(),
-      cycle: [
-        { value: 'none', text: 'no cycle' },
-        { value: 'hourly', text: 'stündlich' },
-        { value: 'daily', text: 'täglich' },
-        { value: 'weekly', text: 'wöchentlich' },
-        { value: 'monthly', text: 'monatlich' },
-        { value: 'yearly', 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.startDate === null) return this.toastError('No start Date')
-      if (this.form.endDate === null) return this.toastError('No end Date')
-      alert(JSON.stringify(this.form))
-      this.$apollo
-        .mutate({
-          mutation: createAutomaticCreation,
-          variables: {
-            startDate: this.form.startDate,
-            endDate: this.form.endDate,
-            name: this.form.name,
-            amount: this.form.amount,
-            memo: this.form.memo,
-            cycle: this.form.cycle,
-            repetition: this.form.repetition,
-            maxAmount: this.form.maxAmount,
-          },
-        })
-        .then((result) => {
-          this.link = result.data.createAutomaticCreation.link
-          this.toastSuccess(this.link)
-        })
-        .catch((error) => {
-          this.toastError(error.message)
-        })
-    },
-    onReset(event) {
-      event.preventDefault()
-      this.form.name = null
-      this.form.memo = 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
-    },
-  },
-  watch: {
-    automaticContributionData() {
-      alert('change automaticContributionData')
-      this.form.name = this.automaticContributionData.name
-      this.form.memo = this.automaticContributionData.memo
-      this.form.amount = this.automaticContributionData.amount
-      this.form.startDate = this.automaticContributionData.startDate
-      this.form.endDate = this.automaticContributionData.endDate
-      this.form.cycle = this.automaticContributionData.cycle
-      this.form.repetition = this.automaticContributionData.repetition
-      this.form.maxAmount = this.automaticContributionData.maxAmount
-    },
-  },
-}
-</script>
diff --git a/admin/src/components/AutomaticCreation.vue b/admin/src/components/ContributionLink.vue
similarity index 59%
rename from admin/src/components/AutomaticCreation.vue
rename to admin/src/components/ContributionLink.vue
index 04ec752c6..935f7d44c 100644
--- a/admin/src/components/AutomaticCreation.vue
+++ b/admin/src/components/ContributionLink.vue
@@ -2,28 +2,28 @@
   <div>
     <b-card
       border-variant="success"
-      header="Automatic Creations"
+      header="Contribution Link"
       header-bg-variant="success"
       header-text-variant="white"
       header-class="text-center"
       class="mt-5"
     >
       <b-button v-b-toggle.newContribution class="my-3 d-flex justify-content-left">
-        + New Automatic Creations
+        + New Contribution Link
       </b-button>
 
       <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" />
+          <p class="h2 ml-5">Contribution Links</p>
+          <contribution-link-form :contributionLinkData="contributionLinkData" />
         </b-card>
       </b-collapse>
 
       <b-card-text>
-        <automatic-creation-list
+        <contribution-link-list
           v-if="items.length > 1"
           :items="items"
-          @editAutomaticContributionData="editAutomaticContributionData"
+          @editContributionLinkData="editContributionLinkData"
         />
         <div v-else>Es sind keine automatischen Schöpfungen angelegt.</div>
       </b-card-text>
@@ -31,14 +31,14 @@
   </div>
 </template>
 <script>
-import AutomaticCreationForm from './AutomaticCreationForm.vue'
-import AutomaticCreationList from './AutomaticCreationList.vue'
+import ContributionLinkForm from './ContributionLinkForm.vue'
+import ContributionLinkList from './ContributionLinkList.vue'
 
 export default {
-  name: 'AutomaticCreation',
+  name: 'ContributionLink',
   components: {
-    AutomaticCreationForm,
-    AutomaticCreationList,
+    ContributionLinkForm,
+    ContributionLinkList,
   },
   props: {
     items: {
@@ -49,13 +49,13 @@ export default {
   data: function () {
     return {
       visible: false,
-      automaticContributionData: {},
+      contributionLinkData: {},
     }
   },
   methods: {
-    editAutomaticContributionData(data) {
+    editContributionLinkData(data) {
       if (!this.visible) this.$root.$emit('bv::toggle::collapse', 'newContribution')
-      this.automaticContributionData = data
+      this.contributionLinkData = data
     },
   },
 }
diff --git a/admin/src/components/ContributionLinkForm.vue b/admin/src/components/ContributionLinkForm.vue
new file mode 100644
index 000000000..a388ab0d7
--- /dev/null
+++ b/admin/src/components/ContributionLinkForm.vue
@@ -0,0 +1,206 @@
+<template>
+  <div>
+    <div v-if="updateData" class="text-light bg-info p-3">
+      {{ updateData }}
+    </div>
+    <b-form class="m-5" @submit.prevent="onSubmit" ref="contributionLinkForm">
+      <!-- Date -->
+      <b-row>
+        <b-col>
+          <b-form-group id="input-group-4" :label="$t('contributionLink.startDate')">
+            <b-form-datepicker
+              v-model="form.startDate"
+              size="lg"
+              :min="min"
+              class="mb-4"
+              reset-value=""
+              required
+            ></b-form-datepicker>
+          </b-form-group>
+        </b-col>
+        <b-col>
+          <b-form-group id="input-group-4" :label="$t('contributionLink.endDate')">
+            <b-form-datepicker
+              v-model="form.endDate"
+              size="lg"
+              :min="form.startDate ? form.startDate : min"
+              class="mb-4"
+              reset-value=""
+              required
+            ></b-form-datepicker>
+          </b-form-group>
+        </b-col>
+      </b-row>
+
+      <!-- Name -->
+      <b-form-group id="input-group-1" :label="$t('contributionLink.name')">
+        <b-form-input
+          v-model="form.name"
+          size="lg"
+          type="text"
+          placeholder="Name"
+          required
+        ></b-form-input>
+      </b-form-group>
+      <!-- Desc -->
+      <b-form-group id="input-group-2" :label="$t('contributionLink.memo')">
+        <b-form-textarea
+          v-model="form.memo"
+          size="lg"
+          :placeholder="$t('contributionLink.memo')"
+          required
+        ></b-form-textarea>
+      </b-form-group>
+      <!-- Amount -->
+      <b-form-group id="input-group-3" :label="$t('contributionLink.amount')">
+        <b-form-input
+          v-model="form.amount"
+          size="lg"
+          type="number"
+          placeholder="0"
+          required
+        ></b-form-input>
+      </b-form-group>
+
+      <b-jumbotron>
+        <b-row class="mb-4">
+          <b-col>
+            <!-- Cycle -->
+            <label for="cycle-repetition">{{ $t('contributionLink.cycle') }}</label>
+            <b-form-select
+              v-model="form.cycle"
+              :options="cycle"
+              class="mb-3"
+              size="lg"
+            ></b-form-select>
+          </b-col>
+          <b-col>
+            <!-- Repetition -->
+            <label for="cycle-repetition">{{ $t('contributionLink.repetition') }}</label>
+            <b-form-select
+              v-model="form.repetition"
+              :options="repetition"
+              class="mb-3"
+              size="lg"
+            ></b-form-select>
+          </b-col>
+        </b-row>
+
+        <!-- Max amount -->
+        <b-form-group :label="$t('contributionLink.maximumAmount')">
+          <b-form-input
+            v-model="form.maxAmount"
+            size="lg"
+            type="number"
+            placeholder="0"
+          ></b-form-input>
+        </b-form-group>
+      </b-jumbotron>
+      <div class="mt-6">
+        <b-button type="submit" variant="primary">{{ $t('contributionLink.create') }}</b-button>
+        <b-button type="reset" variant="danger" @click.prevent="onReset">{{ $t('contributionLink.clear') }}</b-button>
+      </div>
+    </b-form>
+  </div>
+</template>
+<script>
+import { createContributionLink } from '@/graphql/createContributionLink.js'
+export default {
+  name: 'ContributionLinkForm',
+  props: {
+    contributionLinkData: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+  },
+  data() {
+    return {
+      form: {
+        name: null,
+        memo: null,
+        amount: null,
+        startDate: null,
+        endDate: null,
+        cycle: null,
+        repetition: null,
+        maxAmount: null,
+      },
+      min: new Date(),
+      cycle: [
+        { value: null, text: this.$t('contributionLink.options.cycle.null') },
+        { value: 'none', text: this.$t('contributionLink.options.cycle.none') },
+        { value: 'hourly', text: this.$t('contributionLink.options.cycle.hourly') },
+        { value: 'daily', text: this.$t('contributionLink.options.cycle.daily') },
+        { value: 'weekly', text: this.$t('contributionLink.options.cycle.weekly') },
+        { value: 'monthly', text: this.$t('contributionLink.options.cycle.monthly') },
+        { value: 'yearly', text: this.$t('contributionLink.options.cycle.yearly') },
+      ],
+      repetition: [
+        { value: null, text: 'Please select an repetition' },
+        { value: '1', text: '1 x' },
+        { value: '2', text: '2 x' },
+        { value: '3', text: '3 x' },
+        { value: '4', text: '4 x' },
+        { value: '5', text: '5 x' },
+      ],
+    }
+  },
+  methods: {
+    onSubmit() {
+      if (this.form.startDate === null)
+        return this.toastError(this.$t('contributionLink.noStartDate'))
+      if (this.form.endDate === null) return this.toastError(this.$t('contributionLink.noEndDate'))
+      alert(JSON.stringify(this.form))
+      this.$apollo
+        .mutate({
+          mutation: createContributionLink,
+          variables: {
+            startDate: this.form.startDate,
+            endDate: this.form.endDate,
+            name: this.form.name,
+            amount: this.form.amount,
+            memo: this.form.memo,
+            cycle: this.form.cycle,
+            repetition: this.form.repetition,
+            maxAmount: this.form.maxAmount,
+          },
+        })
+        .then((result) => {
+          this.link = result.data.createContributionLink.link
+          this.toastSuccess(this.link)
+        })
+        .catch((error) => {
+          this.toastError(error.message)
+        })
+    },
+    onReset() {
+      this.$refs.contributionLinkForm.reset()
+      this.form.startDate = null
+      this.form.endDate = null
+    },
+    updateForm() {
+      alert('updateForm')
+    },
+  },
+  computed: {
+    updateData() {
+      return this.contributionLinkData
+    },
+  },
+  watch: {
+    contributionLinkData() {
+      alert('change contributionLinkData')
+      this.form.name = this.contributionLinkData.name
+      this.form.memo = this.contributionLinkData.memo
+      this.form.amount = this.contributionLinkData.amount
+      this.form.startDate = this.contributionLinkData.startDate
+      this.form.endDate = this.contributionLinkData.endDate
+      this.form.cycle = this.contributionLinkData.cycle
+      this.form.repetition = this.contributionLinkData.repetition
+      this.form.maxAmount = this.contributionLinkData.maxAmount
+    },
+  },
+}
+</script>
diff --git a/admin/src/components/AutomaticCreationList.vue b/admin/src/components/ContributionLinkList.vue
similarity index 80%
rename from admin/src/components/AutomaticCreationList.vue
rename to admin/src/components/ContributionLinkList.vue
index 1d83beb17..200968e4e 100644
--- a/admin/src/components/AutomaticCreationList.vue
+++ b/admin/src/components/ContributionLinkList.vue
@@ -2,22 +2,17 @@
   <div>
     <b-table striped hover :items="items" :fields="fields">
       <template #cell(delete)>
-        <b-button variant="danger" size="md" class="mr-2" @click="deleteAutomaticCreations">
+        <b-button variant="danger" size="md" class="mr-2" @click="deleteContributionLink">
           <b-icon icon="trash" variant="light"></b-icon>
         </b-button>
       </template>
       <template #cell(edit)="data">
-        <b-button
-          variant="success"
-          size="md"
-          class="mr-2"
-          @click="editAutomaticCreations(data.item)"
-        >
+        <b-button variant="success" size="md" class="mr-2" @click="editContributionLink(data.item)">
           <b-icon icon="pencil" variant="light"></b-icon>
         </b-button>
       </template>
       <template #cell(show)="data">
-        <b-button variant="info" size="md" class="mr-2" @click="showAutomaticCreations(data.item)">
+        <b-button variant="info" size="md" class="mr-2" @click="showContributionLink(data.item)">
           <b-icon icon="eye" variant="light"></b-icon>
         </b-button>
       </template>
@@ -40,11 +35,11 @@
   </div>
 </template>
 <script>
-import { deleteAutomaticCreation } from '@/graphql/deleteAutomaticCreation.js'
+import { deleteContributionLink } from '@/graphql/deleteContributionLink.js'
 import FigureQrCode from './FigureQrCode.vue'
 
 export default {
-  name: 'AutomaticCreationList',
+  name: 'ContributionLinkList',
   components: {
     FigureQrCode,
   },
@@ -70,14 +65,14 @@ export default {
     }
   },
   methods: {
-    deleteAutomaticCreations() {
+    deleteContributionLink() {
       this.$bvModal
         .msgBoxConfirm('Automatische Creations wirklich löschen?')
         .then(async (value) => {
           if (value)
             await this.$apollo
               .mutate({
-                mutation: deleteAutomaticCreation,
+                mutation: deleteContributionLink,
                 variables: {
                   id: this.id,
                 },
@@ -90,11 +85,11 @@ export default {
               })
         })
     },
-    editAutomaticCreations(row) {
-      this.$emit('editAutomaticContributionData', row)
+    editContributionLink(row) {
+      this.$emit('editContributionLinkData', row)
     },
 
-    showAutomaticCreations(row) {
+    showContributionLink(row) {
       this.modalData = row
       this.$refs['my-modal'].show()
     },
diff --git a/admin/src/graphql/createAutomaticCreation.js b/admin/src/graphql/createContributionLink.js
similarity index 85%
rename from admin/src/graphql/createAutomaticCreation.js
rename to admin/src/graphql/createContributionLink.js
index 5f4378f16..aaccf29b0 100644
--- a/admin/src/graphql/createAutomaticCreation.js
+++ b/admin/src/graphql/createContributionLink.js
@@ -1,6 +1,6 @@
 import gql from 'graphql-tag'
 
-export const createAutomaticCreation = gql`
+export const createContributionLink = gql`
   mutation (
     $startDate: String!
     $endDate: String!
@@ -11,7 +11,7 @@ export const createAutomaticCreation = gql`
     $repetition: String
     $maxAmount: Decimal
   ) {
-    createAutomaticCreation(
+    createContributionLink(
       startDate: $startDate
       endDate: $endDate
       name: $name
diff --git a/admin/src/graphql/deleteAutomaticCreation.js b/admin/src/graphql/deleteAutomaticCreation.js
deleted file mode 100644
index bb8737db2..000000000
--- a/admin/src/graphql/deleteAutomaticCreation.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import gql from 'graphql-tag'
-
-export const deleteAutomaticCreation = gql`
-  mutation ($id: Int!) {
-    deleteAutomaticCreation(id: $id)
-  }
-`
diff --git a/admin/src/graphql/deleteContributionLink.js b/admin/src/graphql/deleteContributionLink.js
new file mode 100644
index 000000000..d0a938627
--- /dev/null
+++ b/admin/src/graphql/deleteContributionLink.js
@@ -0,0 +1,7 @@
+import gql from 'graphql-tag'
+
+export const deleteContributionLink = gql`
+  mutation ($id: Int!) {
+    deleteContributionLink(id: $id)
+  }
+`
diff --git a/admin/src/graphql/listAutomaticCreations.js b/admin/src/graphql/listContributionLinks.js
similarity index 71%
rename from admin/src/graphql/listAutomaticCreations.js
rename to admin/src/graphql/listContributionLinks.js
index 86a8e0216..d46564942 100644
--- a/admin/src/graphql/listAutomaticCreations.js
+++ b/admin/src/graphql/listContributionLinks.js
@@ -1,8 +1,8 @@
 import gql from 'graphql-tag'
 
-export const listAutomaticCreations = gql`
+export const listContributionLinks = gql`
   query {
-    listAutomaticCreations {
+    listContributionLinks {
       id
       startDate
       endDate
diff --git a/admin/src/graphql/showAutomaticCreation.js b/admin/src/graphql/showContributionLink.js
similarity index 73%
rename from admin/src/graphql/showAutomaticCreation.js
rename to admin/src/graphql/showContributionLink.js
index 7c46fb260..99dd4faef 100644
--- a/admin/src/graphql/showAutomaticCreation.js
+++ b/admin/src/graphql/showContributionLink.js
@@ -1,8 +1,8 @@
 import gql from 'graphql-tag'
 
-export const showAutomaticCreation = gql`
+export const showContributionLink = gql`
   query ($id: Int!) {
-    showAutomaticCreation {
+    showContributionLink {
       id
       startDate
       endDate
diff --git a/admin/src/locales/de.json b/admin/src/locales/de.json
index b667a1ada..4e871f4a4 100644
--- a/admin/src/locales/de.json
+++ b/admin/src/locales/de.json
@@ -1,5 +1,34 @@
 {
   "all_emails": "Alle Nutzer",
+  "contributionLink": {
+    "repetition":"Wiederholung",
+    "cycle":"Zyclus",
+    "maximumAmount":"maximaler Betrag",
+    "create":"Anlegen",
+    "clear":"Löschen",
+    "startDate":"Start-Datum",
+    "endDate":"End-Datum",
+    "name":"Name",
+    "memo":"Nachricht",
+    "amount": "Betrag",
+    "options" :{
+      "cycle": {
+        "null": "Bitter wähle einen Zyclus",
+        "none": "kein Zyclus",
+        "hourly": "stündlich",
+        "daily": "täglich",
+        "weekly": "wöchentlich",
+        "monthly": "monatlich",
+        "yearly": "jährlich"
+      },
+      "repetition": {
+        "null": "Bitte wähle eine Wiederholung"
+      },
+      "noStartDate":"Kein Start-Datum gewählt.",
+      "noEndDate":"Kein End-Datum gewählt."
+
+    }
+  },
   "back": "zurück",
   "creation": "Schöpfung",
   "creationList": "Schöpfungsliste",
@@ -74,6 +103,9 @@
   "removeNotSelf": "Als Admin / Moderator kannst du dich nicht selber löschen.",
   "remove_all": "alle Nutzer entfernen",
   "save": "Speichern",
+  "selectOptions": {
+
+  },
   "status": "Status",
   "success": "Erfolg",
   "text": "Text",
diff --git a/admin/src/locales/en.json b/admin/src/locales/en.json
index 982c42d92..db86e277d 100644
--- a/admin/src/locales/en.json
+++ b/admin/src/locales/en.json
@@ -1,5 +1,33 @@
 {
   "all_emails": "All users",
+  "contributionLink": {
+    "repetition":"Repetition",
+    "cycle":"Cycle",
+    "maximumAmount":"Maximum amount",
+    "create":"Create",
+    "clear":"Clear",
+    "startDate":"Start-Date",
+    "endDate":"End-Date",
+    "name":"Name",
+    "memo":"Memo",
+    "amount": "Amount",
+    "options" :{
+      "cycle": {
+        "null": "Please select an cycle",
+        "none": "no cycle",
+        "hourly": "hourly",
+        "daily": "daily",
+        "weekly": "weekly",
+        "monthly": "monthly",
+        "yearly": "yearly"
+      },
+      "repetition": {
+        "null": "Please select an repetition"
+      },
+      "noStartDate":"No start Date",
+      "noEndDate":"No end Date"
+    }
+  },
   "back": "back",
   "creation": "Creation",
   "creationList": "Creation list",
diff --git a/admin/src/pages/Overview.vue b/admin/src/pages/Overview.vue
index e0d97ae0f..8cd1d559c 100644
--- a/admin/src/pages/Overview.vue
+++ b/admin/src/pages/Overview.vue
@@ -28,18 +28,18 @@
         </b-link>
       </b-card-text>
     </b-card>
-    <automatic-creation :items="items" />
+    <contribution-link :items="items" />
   </div>
 </template>
 <script>
 import { getPendingCreations } from '../graphql/getPendingCreations'
-import { listAutomaticCreations } from '@/graphql/listAutomaticCreations.js'
-import AutomaticCreation from '../components/AutomaticCreation.vue'
+import { listContributionLinks } from '@/graphql/listContributionLinks.js'
+import ContributionLink from '../components/ContributionLink.vue'
 
 export default {
   name: 'overview',
   components: {
-    AutomaticCreation,
+    ContributionLink,
   },
   data() {
     return {
@@ -57,17 +57,17 @@ export default {
           this.$store.commit('setOpenCreations', result.data.getPendingCreations.length)
         })
     },
-    async getAutomaticCreations() {
+    async getContributionLinks() {
       this.$apollo
         .query({
-          query: listAutomaticCreations,
+          query: listContributionLinks,
           fetchPolicy: 'network-only',
         })
         .then((result) => {
           this.toastSuccess('TODO! change this.items')
         })
         .catch(() => {
-          this.toastError('listAutomaticCreations has no result, use default data')
+          this.toastError('listContributionLinks has no result, use default data')
         })
 
       this.items = [
@@ -81,7 +81,7 @@ export default {
           cycle: 'täglich',
           repetition: '3',
           maxAmount: 0,
-          link: 'https://localhost/redeem/1a2345678',
+          link: 'https://localhost/redeem/CL-1a2345678',
         },
         {
           id: 2,
@@ -93,7 +93,7 @@ export default {
           cycle: 'monatlich',
           repetition: '2',
           maxAmount: 0,
-          link: 'https://localhost/redeem/1b2345678',
+          link: 'https://localhost/redeem/CL-1b2345678',
         },
         {
           id: 3,
@@ -105,14 +105,14 @@ export default {
           cycle: 'null',
           repetition: '1',
           maxAmount: 0,
-          link: 'https://localhost/redeem/1c2345678',
+          link: 'https://localhost/redeem/CL-1c2345678',
         },
       ]
     },
   },
   created() {
     this.getPendingCreations()
-    this.getAutomaticCreations()
+    this.getContributionLinks()
   },
 }
 </script>