rename from AutomaticCobtribution to ContributionLink, add locales

admin/src/components/AutomaticCreationForm.vue

@@ -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>

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>
+          <p class="h2 ml-5">Contribution Links</p>
-          <automatic-creation-form :automaticContributionData="automaticContributionData" />
+          <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 ContributionLinkForm from './ContributionLinkForm.vue'
-import AutomaticCreationList from './AutomaticCreationList.vue'
+import ContributionLinkList from './ContributionLinkList.vue'
 
 export default {
-  name: 'AutomaticCreation',
+  name: 'ContributionLink',
   components: {
-    AutomaticCreationForm,
+    ContributionLinkForm,
-    AutomaticCreationList,
+    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
     },
   },
 }

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>

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
+        <b-button variant="success" size="md" class="mr-2" @click="editContributionLink(data.item)">
-          variant="success"
-          size="md"
-          class="mr-2"
-          @click="editAutomaticCreations(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) {
+    editContributionLink(row) {
-      this.$emit('editAutomaticContributionData', row)
+      this.$emit('editContributionLinkData', row)
     },
 
-    showAutomaticCreations(row) {
+    showContributionLink(row) {
       this.modalData = row
       this.$refs['my-modal'].show()
     },

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

admin/src/graphql/deleteAutomaticCreation.js

@@ -1,7 +0,0 @@
-import gql from 'graphql-tag'
-
-export const deleteAutomaticCreation = gql`
-  mutation ($id: Int!) {
-    deleteAutomaticCreation(id: $id)
-  }
-`

admin/src/graphql/deleteContributionLink.js

@@ -0,0 +1,7 @@
+import gql from 'graphql-tag'
+
+export const deleteContributionLink = gql`
+  mutation ($id: Int!) {
+    deleteContributionLink(id: $id)
+  }
+`

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

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

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",

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",

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 { listContributionLinks } from '@/graphql/listContributionLinks.js'
-import AutomaticCreation from '../components/AutomaticCreation.vue'
+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>