admin area extended according to concept and functions added and improved.

workflow stands for the mass creation and for the confirmation of creations. all changes made which were indicated by moritz. all translations will be done in one step at a later date.
2025-12-13 07:45:54 +00:00 · 2021-11-19 11:14:16 +01:00 · 2021-11-19 11:14:16 +01:00 · 686f9bfd4e
commit 686f9bfd4e
parent 72c17d349d
14 changed files with 497 additions and 185 deletions
--- a/admin/package.json
+++ b/admin/package.json
@ -41,7 +41,8 @@
    "vue-jest": "^3.0.7",
    "vue-moment": "^4.1.0",
    "vue-router": "^3.5.3",
-    "vuex": "^3.6.2"
+    "vuex": "^3.6.2",
+    "vuex-persistedstate": "^4.1.0"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.15.8",
--- a/admin/src/App.vue
+++ b/admin/src/App.vue
@ -2,15 +2,18 @@
  <div id="app">
    <nav-bar class="wrapper-nav" />
    <router-view class="wrapper p-3"></router-view>
+    <foo-ter />
  </div>
 </template>

 <script>
 import NavBar from '@/components/NavBar.vue'
+import FooTer from '@/components/Footer.vue'
 export default {
  name: 'App',
  components: {
    NavBar,
+    FooTer,
  },
 }
 </script>
--- a/admin/src/components/CreationFormular.spec.js
+++ b/admin/src/components/CreationFormular.spec.js
@ -3,11 +3,13 @@ import CreationFormular from './CreationFormular.vue'

 const localVue = global.localVue

+const mocks = { $moment: jest.fn() }
+
 describe('CreationFormular', () => {
  let wrapper

  const Wrapper = () => {
-    return mount(CreationFormular, { localVue })
+    return mount(CreationFormular, { localVue, mocks })
  }

  describe('mount', () => {
@ -15,8 +17,8 @@ describe('CreationFormular', () => {
      wrapper = Wrapper()
    })

-    it('have a DIV element with the class.componente-creation-formular', () => {
-      expect(wrapper.find('.componente-creation-formular').exists()).toBeTruthy()
+    it('has a DIV element with the class.component-creation-formular', () => {
+      expect(wrapper.find('.component-creation-formular').exists()).toBeTruthy()
    })
  })
 })
--- a/admin/src/components/CreationFormular.vue
+++ b/admin/src/components/CreationFormular.vue
@ -1,72 +1,108 @@
 <template>
-  <div class="componente-creation-formular">
-    <div class="shadow p-3 mb-5 bg-white rounded">
-      <b-form>
-        <b-row class="">
-          <b-col>
+  <div class="component-creation-formular">
+    <div>
+      <h3>
+        {{
+          this.type === 'singleCreation'
+            ? 'Einzelschöpfung für ' + item.first_name + ' ' + item.last_name + ''
+            : 'Massenschöpfung für ' + Object.keys(this.itemsMassCreation).length + ' Mitglieder'
+        }}
+      </h3>
+      <div v-show="this.type === 'massCreation' && Object.keys(this.itemsMassCreation).length <= 0">
+        Bitte wähle ein oder Mehrere Mitglieder aus für die du Schöpfen möchtest
+      </div>
+    </div>
+    <div
+      v-show="this.type === 'singleCreation' || Object.keys(this.itemsMassCreation).length > 0"
+      class="shadow p-3 mb-5 bg-white rounded"
+    >
+      <b-form ref="creationForm">
+        <b-row class="m-4">
+          <label>Monat Auswählen</label>
+          <b-col class="text-left">
            <b-form-radio
              v-model="radioSelected"
-              :value="MonatBevorLast"
+              :value="beforeLastMonth"
              size="lg"
-              @change="updateRadioSelected(MonatBevorLast, 0, creation[0])"
+              @change="updateRadioSelected(beforeLastMonth, 0, creation[0])"
            >
-              {{ MonatBevorLast }} {{ creation[0] != null ? creation[0] + ' GDD' : '' }}
+              {{ beforeLastMonth }} {{ creation[0] != null ? creation[0] + ' GDD' : '' }}
            </b-form-radio>
          </b-col>
          <b-col>
            <b-form-radio
              v-model="radioSelected"
-              :value="MonatLast"
+              :value="lastMonth"
              size="lg"
-              @change="updateRadioSelected(MonatLast, 1, creation[1])"
+              @change="updateRadioSelected(lastMonth, 1, creation[1])"
            >
-              {{ MonatLast }} {{ creation[1] != null ? creation[1] + ' GDD' : '' }}
+              {{ lastMonth }} {{ creation[1] != null ? creation[1] + ' GDD' : '' }}
            </b-form-radio>
          </b-col>
-          <b-col>
+          <b-col class="text-right">
            <b-form-radio
              v-model="radioSelected"
-              :value="MonatAktuell"
+              :value="currentMonth"
              size="lg"
-              @change="updateRadioSelected(MonatAktuell, 2, creation[2])"
+              @change="updateRadioSelected(currentMonth, 2, creation[2])"
            >
-              {{ MonatAktuell }} {{ creation[2] != null ? creation[2] + ' GDD' : '' }}
+              {{ currentMonth }} {{ creation[2] != null ? creation[2] + ' GDD' : '' }}
            </b-form-radio>
          </b-col>
        </b-row>
+
        <b-row class="m-4">
-          <label for="range-2 h4">
-            Betrag Auswählen
-            <span class="mt-2 h3" v-if="value > 0">{{ value }} GDD</span>
-          </label>
+          <label>Betrag Auswählen</label>
+          <b-input-group>
+            <template #append>
+              <b-input-group-text><strong class="text-danger">GDD</strong></b-input-group-text>
+            </template>
+            <b-form-input
+              type="number"
+              v-model="value"
+              :min="rangeMin"
+              :max="rangeMax"
+            ></b-form-input>
+          </b-input-group>
+
          <b-input
            id="range-2"
+            class="mt-2"
            v-model="value"
            type="range"
            :min="rangeMin"
            :max="rangeMax"
            step="10"
-            class="mr-4 ml-4"
          ></b-input>
        </b-row>
        <b-row class="m-4">
+          <label>Text eintragen</label>
          <div>
            <b-form-textarea
              id="textarea-state"
              v-model="text"
              :state="text.length >= 10"
-              placeholder="Enter at least 10 characters"
+              placeholder="Mindestens 10 Zeichen eingeben"
              rows="3"
            ></b-form-textarea>
          </div>
        </b-row>
        <b-row class="m-4">
          <b-col class="text-center">
-            <b-button type="reset" variant="danger">Reset</b-button>
+            <b-button type="reset" variant="danger" @click="$refs.creationForm.reset()">
+              zurücksetzen
+            </b-button>
          </b-col>
          <b-col class="text-center">
            <div class="text-right">
-              <b-button type="submit" variant="primary">Submit ({{ type }})</b-button>
+              <b-button
+                type="button"
+                variant="success"
+                @click="submitCreation"
+                :disabled="radioSelected === '' || value <= 0 || text.length < 10"
+              >
+                Schöpfung einreichen ({{ type }})
+              </b-button>
            </div>
          </b-col>
        </b-row>
@ -77,37 +113,120 @@
 <script>
 export default {
  name: 'CreationFormular',
-  props: ['type', 'creation'],
+  props: {
+    type: {
+      type: String,
+      required: true,
+    },
+    item: {
+      type: Object,
+      required: false,
+    },
+    creation: {
+      type: Object,
+      required: true,
+    },
+    itemsMassCreation: {
+      type: Object,
+      required: false,
+    },
+  },
  data() {
    return {
      radioSelected: '',
-      text: 'datatext',
+      text: '',
      value: 0,
      rangeMin: 0,
      rangeMax: 1000,
-      MonatAktuell: this.$moment().format('MMMM'),
-      MonatLast: this.$moment().subtract(1, 'month').format('MMMM'),
-      MonatBevorLast: this.$moment().subtract(2, 'month').format('MMMM'),
+      currentMonth: this.$moment().format('MMMM'),
+      lastMonth: this.$moment().subtract(1, 'month').format('MMMM'),
+      beforeLastMonth: this.$moment().subtract(2, 'month').format('MMMM'),
+      submitObj: null,
+      isdisabled: true,
    }
  },
-  created() {},
  methods: {
+    // Auswählen eines Zeitraumes
    updateRadioSelected(name, index, openCreation) {
-      // console.log(
-      //  'CreationFormular.vue updateRadioSelected(' + name + ',' + index + ', ' + openCreation + ')',
-      // )
+      // Wenn Massenschöpfung
      if (this.type === 'massCreation') {
-        // console.log("updateRadioSelected type=> '", this.type)
-
+        // An Creation.vue emitten und radioSelectedMass aktualisieren
        this.$emit('update-radio-selected', [name, index])
-      } else {
-        // console.log("updateRadioSelected type=> '", this.type)
-
-        this.rangeMin = 0
-        this.rangeMax = openCreation
-
-        // console.log("this.rangeMax => '", this.rangeMax)
      }
+      // Wenn Einzelschöpfung
+      if (this.type === 'singleCreation') {
+        this.rangeMin = 0
+        // Der maximale offene Betrag an GDD die für ein User noch geschöpft werden kann
+        this.rangeMax = openCreation
+      }
+    },
+    submitCreation() {
+      // Formular Prüfen ob ein Zeitraum ausgewählt wurde. Ansonsten abbrechen und Hinweis anzeigen
+      if (this.radioSelected === '') {
+        return alert('Bitte wähle einen Zeitraum!')
+      }
+      // Formular Prüfen ob der GDD Betrag grösser 0 ist. Ansonsten abbrechen und Hinweis anzeigen
+      if (this.value === 0) {
+        return alert('Bitte gib einen GDD Betrag an!')
+      }
+      // Formular Prüfen ob der Text vorhanden ist. Ansonsten abbrechen und Hinweis anzeigen
+      if (this.text === '') {
+        return alert('Bitte gib einen Text ein!')
+      }
+      // Formular Prüfen ob der Text länger als 10 Zeichen hat. Ansonsten abbrechen und Hinweis anzeigen
+      if (this.text.length < 10) {
+        return alert('Bitte gib einen Text ein der länger als 10 Zeichen ist!')
+      }
+      if (this.type === 'massCreation') {
+        // Die anzahl der Mitglieder aus der Massenschöpfung
+        const i = Object.keys(this.itemsMassCreation).length
+        // hinweis das eine Massenschöpfung ausgeführt wird an (Anzahl der MItgleider an die geschöpft wird)
+        alert('SUBMIT CREATION => ' + this.type + ' >> für VIELE ' + i + ' Mitglieder')
+        this.submitObj = [
+          {
+            item: this.itemsMassCreation,
+            datum: this.radioSelected,
+            amount: this.value,
+            text: this.text,
+            moderator: this.$store.state.moderator,
+          },
+        ]
+        alert('MassenSCHÖPFUNG ABSENDEN FÜR >> ' + i + ' Mitglieder')
+
+        // $store - offene Schöpfungen hochzählen
+        this.$store.commit('openCreationsPlus', i)
+
+        // lösche alle Mitglieder aus der MassenSchöpfungsListe nach dem alle Massenschpfungen zum bestätigen gesendet wurden.
+        this.$emit('remove-all-bookmark')
+      }
+
+      if (this.type === 'singleCreation') {
+        // hinweis das eine einzelne schöpfung ausgeführt wird an (Vorname)
+        alert('SUBMIT CREATION => ' + this.type + ' >> für ' + this.item.first_name + '')
+        // erstellen eines Arrays (submitObj) mit allen Daten
+        this.submitObj = [
+          {
+            item: this.item,
+            datum: this.radioSelected,
+            amount: this.value,
+            text: this.text,
+            moderator: this.$store.state.moderator,
+          },
+        ]
+        // hinweis das eine ein einzelne Schöpfung abgesendet wird an (email)
+        alert('EINZEL SCHÖPFUNG ABSENDEN FÜR >> ' + this.item.first_name + '')
+        // $store - offene Schöpfungen hochzählen
+        this.$store.commit('openCreationsPlus', 1)
+      }
+
+      // das absendeergebniss im string ansehen
+      alert(JSON.stringify(this.submitObj))
+      // das submitObj zurücksetzen
+      this.submitObj = null
+      // das creation Formular reseten
+      this.$refs.creationForm.reset()
+      // Den geschöpften Wert auf o setzen
+      this.value = 0
    },
  },
 }
--- a/admin/src/components/Footer.vue
+++ b/admin/src/components/Footer.vue
@ -0,0 +1,10 @@
+<template>
+  <div class="">
+    <hr />
+    <br />
+    <div class="text-center">
+      Gradido Akademie Adminkonsole
+      <div><small>Version: 0.0.1</small></div>
+    </div>
+  </div>
+</template>
--- a/admin/src/components/NavBar.spec.js
+++ b/admin/src/components/NavBar.spec.js
@ -15,8 +15,8 @@ describe('NavBar', () => {
      wrapper = Wrapper()
    })

-    it('have a DIV element with the class.componente-nabvar', () => {
-      expect(wrapper.find('.componente-nabvar').exists()).toBeTruthy()
+    it('has a DIV element with the class.component-nabvar', () => {
+      expect(wrapper.find('.component-nabvar').exists()).toBeTruthy()
    })
  })
 })
--- a/admin/src/components/NavBar.vue
+++ b/admin/src/components/NavBar.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="componente-nabvar">
+  <div class="component-nabvar">
    <b-navbar toggleable="sm" type="dark" variant="success">
      <b-navbar-brand to="/">Adminbereich</b-navbar-brand>

@ -8,11 +8,23 @@
      <b-collapse id="nav-collapse" is-nav>
        <b-navbar-nav>
          <b-nav-item to="/user">Usersuche |</b-nav-item>
-          <b-nav-item to="/creation">Schöpfen |</b-nav-item>
-          <b-nav-item to="/creation-confirm">offene Schöpfungen</b-nav-item>
+          <b-nav-item to="/creation">Massenschöpfung</b-nav-item>
+          <b-nav-item
+            v-show="$store.state.openCreations > 0"
+            class="h5 bg-danger"
+            to="/creation-confirm"
+          >
+            | {{ $store.state.openCreations }} offene Schöpfungen
+          </b-nav-item>
+          <!-- <b-nav-item v-show="open < 1" to="/creation-confirm">| keine offene Schöpfungen</b-nav-item> -->
        </b-navbar-nav>
      </b-collapse>
      <b-navbar-brand href="http://localhost:3000/vue/login">Profilbereich</b-navbar-brand>
    </b-navbar>
  </div>
 </template>
+<script>
+export default {
+  name: 'navbar',
+}
+</script>
--- a/admin/src/components/UserTable.spec.js
+++ b/admin/src/components/UserTable.spec.js
@ -15,8 +15,8 @@ describe('UserTable', () => {
      wrapper = Wrapper()
    })

-    it('have a DIV element with the class.componente-user-table', () => {
-      expect(wrapper.find('.componente-user-table').exists()).toBeTruthy()
+    it('has a DIV element with the class.component-user-table', () => {
+      expect(wrapper.find('.component-user-table').exists()).toBeTruthy()
    })
  })
 })
--- a/admin/src/components/UserTable.vue
+++ b/admin/src/components/UserTable.vue
@ -1,59 +1,110 @@
 <template>
-  <div class="componente-user-table">
-    <b-table :items="itemsUser" :fields="fieldsTable" :filter="criteria" caption-top striped hover>
+  <div class="component-user-table">
+    <div v-show="overlay" id="overlay" class="">
+      <b-jumbotron class="bg-light p-4">
+        <template #header>{{ overlayText.header }}</template>
+
+        <template #lead>
+          {{ overlayText.text1 }}
+        </template>
+
+        <hr class="my-4" />
+
+        <p>
+          {{ overlayText.text2 }}
+        </p>
+
+        <b-button size="lg" variant="danger" class="m-3" @click="overlayCancel">
+          {{ overlayText.button_cancel }}
+        </b-button>
+        <b-button
+          size="lg"
+          variant="success"
+          class="m-3 text-right"
+          @click="overlayOK(overlayBookmarkType, overlayItem)"
+        >
+          {{ overlayText.button_ok }}
+        </b-button>
+      </b-jumbotron>
+    </div>
+    <b-table-lite
+      :items="itemsUser"
+      :fields="fieldsTable"
+      :filter="criteria"
+      caption-top
+      striped
+      hover
+      stacked="md"
+    >
+      <template #cell(edit_creation)="row">
+        <b-button variant="info" size="lg" @click="row.toggleDetails" class="mr-2">
+          <b-icon v-if="row.detailsShowing" icon="x" aria-label="Help"></b-icon>
+          <b-icon v-else icon="pencil-square" aria-label="Help"></b-icon>
+        </b-button>
+      </template>
+
      <template #cell(show_details)="row">
-        <b-button variant="info" size="sm" @click="row.toggleDetails" class="mr-2">
-          {{ row.detailsShowing ? 'Hide' : 'Show' }} Details
+        <b-button variant="info" size="lg" @click="row.toggleDetails" class="mr-2">
+          <b-icon v-if="row.detailsShowing" icon="eye-slash-fill" aria-label="Help"></b-icon>
+          <b-icon v-else icon="eye-slash-fill" aria-label="Help"></b-icon>
        </b-button>
      </template>

      <template #row-details="row">
-        <b-card>
+        <b-card class="shadow-lg p-3 mb-5 bg-white rounded">
          <b-row class="mb-2">
-            <b-col>
-              <h3>{{ row.item.first_name }} {{ row.item.last_name }}</h3>
-            </b-col>
+            <b-col></b-col>
          </b-row>

          <creation-formular
            type="singleCreation"
            :creation="getCreationInMonths(row.item.creation)"
+            :item="row.item"
          />

-          <b-button size="sm" @click="row.toggleDetails">Hide Details</b-button>
+          <b-button size="sm" @click="row.toggleDetails">
+            <b-icon
+              :icon="type === 'PageCreationConfirm' ? 'x' : 'eye-slash-fill'"
+              aria-label="Help"
+            ></b-icon>
+            Details verbergen von {{ row.item.first_name }} {{ row.item.last_name }}
+          </b-button>
        </b-card>
      </template>

      <template #cell(bookmark)="row">
        <b-button
          variant="warning"
-          v-show="type == 'UserListSearch'"
-          size="sm"
-          @click="bookmarkPush(row.item, row.index, $event.target)"
+          v-show="type === 'UserListSearch'"
+          size="md"
+          @click="bookmarkPush(row.item)"
          class="mr-2"
        >
-          merken
+          <b-icon icon="plus" variant="success"></b-icon>
        </b-button>
        <b-button
          variant="danger"
-          v-show="type == 'UserListMassCreation' || type == 'PageCreationConfirm'"
-          size="sm"
-          @click="bookmarkRemove(row.item, row.index, $event.target)"
+          v-show="type === 'UserListMassCreation' || type === 'PageCreationConfirm'"
+          size="lg"
+          @click="overlayShow('remove', row.item)"
          class="mr-2"
        >
-          löschen
-        </b-button>
-        <b-button
-          variant="success"
-          v-show="type == 'PageCreationConfirm'"
-          size="sm"
-          @click="bookmarkConfirm(row.item, row.index, $event.target)"
-          class="mr-2"
-        >
-          bestätigen
+          <b-icon icon="x" variant="light"></b-icon>
        </b-button>
      </template>
-    </b-table>
+
+      <template #cell(confirm)="row">
+        <b-button
+          variant="success"
+          v-show="type === 'PageCreationConfirm'"
+          size="lg"
+          @click="overlayShow('confirm', row.item)"
+          class="mr-2"
+        >
+          <b-icon icon="check" scale="2" variant=""></b-icon>
+        </b-button>
+      </template>
+    </b-table-lite>
  </div>
 </template>

@ -62,25 +113,88 @@ import CreationFormular from '../components/CreationFormular.vue'

 export default {
  name: 'UserTable',
-  props: ['type', 'itemsUser', 'fieldsTable', 'criteria', 'creation'],
+  props: {
+    type: {
+      type: String,
+      required: true,
+    },
+    itemsUser: {
+      type: Object,
+      required: true,
+    },
+    fieldsTable: {
+      type: Object,
+      required: true,
+    },
+    criteria: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    creation: {
+      type: Object,
+      required: false,
+    },
+  },
  components: {
    CreationFormular,
  },
  data() {
-    return {}
+    return {
+      overlay: false,
+      overlayBookmarkType: '',
+      overlayItem: [],
+      overlayText: [
+        {
+          header: '-',
+          text1: '--',
+          text2: '---',
+          button_ok: 'OK',
+          button_cancel: 'Cancel',
+        },
+      ],
+    }
  },
  methods: {
-    bookmarkPush(item, index, button) {
-      // console.log('bookmarking item', item)
-      // console.log('bookmarking index', index)
-      // console.log('bookmarking button', button)
+    overlayShow(bookmarkType, item) {
+      this.overlay = true
+      this.overlayBookmarkType = bookmarkType
+      this.overlayItem = item

+      if (bookmarkType === 'remove') {
+        this.overlayText.header = 'Achtung! Schöpfung löschen!'
+        this.overlayText.text1 =
+          'Nach dem Löschen gibt es keine Möglichkeit mehr diesen Datensatz wiederherzustellen. Es wird aber der gesamte Vorgang in der Logdatei als Übersicht gespeichert.'
+        this.overlayText.text2 = 'Willst du die vorgespeicherte Schöpfung wirklich löschen? '
+        this.overlayText.button_ok = 'Ja, Schöpfung löschen!'
+        this.overlayText.button_cancel = 'Nein, nicht löschen.'
+      }
+      if (bookmarkType === 'confirm') {
+        this.overlayText.header = 'Schöpfung bestätigen!'
+        this.overlayText.text1 =
+          'Nach dem Speichern ist der Datensatz nicht mehr änderbar und kann auch nicht mehr gelöscht werden. Bitte überprüfe genau, dass alles stimmt.'
+        this.overlayText.text2 =
+          'Willst du diese vorgespeicherte Schöpfung wirklich vollziehen und entgültig speichern?'
+        this.overlayText.button_ok = 'Ja, Schöpfung speichern und bestätigen!'
+        this.overlayText.button_cancel = 'Nein, nicht speichern.'
+      }
+    },
+    overlayOK(bookmarkType, item) {
+      if (bookmarkType === 'remove') {
+        this.bookmarkRemove(item)
+      }
+      if (bookmarkType === 'confirm') {
+        this.bookmarkConfirm(item)
+      }
+      this.overlay = false
+    },
+    overlayCancel() {
+      this.overlay = false
+    },
+    bookmarkPush(item) {
      this.$emit('update-item', item, 'push')
    },
-    bookmarkRemove(item, index, button) {
-      // console.log('bookmarking item', item)
-      // console.log('bookmarking index', index)
-      // console.log('bookmarking button', button)
+    bookmarkRemove(item) {
      if (this.type === 'UserListMassCreation') {
        this.$emit('update-item', item, 'remove')
      }
@ -89,15 +203,31 @@ export default {
        this.$emit('update-confirm-result', item, 'remove')
      }
    },
-    bookmarkConfirm(item, index, button) {
+    bookmarkConfirm(item) {
      alert('die schöpfung bestätigen und abschließen')
      alert(JSON.stringify(item))
      this.$emit('update-confirm-result', item, 'remove')
    },
    getCreationInMonths(creation) {
-      // console.log('getCreationInMonths', creation)
      return creation.split(',')
    },
  },
 }
 </script>
+<style>
+#overlay {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding-left: 5%;
+  background-color: rgba(12, 11, 11, 0.781);
+  z-index: 1000000;
+  cursor: pointer;
+}
+</style>
--- a/admin/src/store/store.js
+++ b/admin/src/store/store.js
@ -1,12 +1,34 @@
 import Vuex from 'vuex'
 import Vue from 'vue'
+import createPersistedState from 'vuex-persistedstate'

 Vue.use(Vuex)

+export const mutations = {
+  openCreationsPlus: (state, i) => {
+    state.openCreations = state.openCreations + i
+  },
+  openCreationsMinus: (state, i) => {
+    state.openCreations = state.openCreations - i
+  },
+  resetOpenCreations: (state) => {
+    state.openCreations = 0
+  },
+}
+
 const store = new Vuex.Store({
+  plugins: [
+    createPersistedState({
+      storage: window.localStorage,
+    }),
+  ],
  state: {
    token: 'some-valid-token',
+    moderator: 'Dertest Moderator',
+    openCreations: 0,
  },
+  // Syncronous mutation of the state
+  mutations,
 })

 export default store
--- a/admin/src/views/Creation.vue
+++ b/admin/src/views/Creation.vue
@ -1,8 +1,7 @@
 <template>
  <div>
    <b-row>
-      <b-col>
-        <div>UserListe zum auswählen (itemsList)</div>
+      <b-col cols="12" lg="5">
        <label>Usersuche</label>
        <b-input
          type="text"
@ -19,14 +18,9 @@
          @update-item="updateItem"
        />
      </b-col>
-      <b-col class="shadow p-3 mb-5 rounded bg-info">
-        <div>UserListe zum schöpfen (massCreation)</div>
-        <creation-formular
-          type="massCreation"
-          :creation="creation"
-          @update-radio-selected="updateRadioSelected"
-        />
+      <b-col cols="12" lg="7" class="shadow p-3 mb-5 rounded bg-info">
        <user-table
+          v-show="Object.keys(this.massCreation).length > 0"
          class="shadow p-3 mb-5 bg-white rounded"
          type="UserListMassCreation"
          :itemsUser="massCreation"
@ -35,14 +29,16 @@
          :creation="creation"
          @update-item="updateItem"
        />
+
+        <creation-formular
+          type="massCreation"
+          :creation="creation"
+          :itemsMassCreation="massCreation"
+          @update-radio-selected="updateRadioSelected"
+          @remove-all-bookmark="removeAllBookmark"
+        />
      </b-col>
    </b-row>
-    <hr />
-    Schöpfen
-    <ul>
-      <li>radioSelectedMass = {{ radioSelectedMass }}</li>
-      <li>Tabelle Creationen</li>
-    </ul>
  </div>
 </template>
 <script>
@ -59,19 +55,19 @@ export default {
    return {
      showArrays: false,
      Searchfields: [
-        { key: 'email', label: 'Email' },
+        { key: 'bookmark', label: 'merken' },
+
        { key: 'first_name', label: 'Firstname' },
        { key: 'last_name', label: 'Lastname' },
        { key: 'creation', label: 'Creation' },
-        { key: 'bookmark', label: 'Bookmark' },
+        { key: 'email', label: 'Email' },
      ],
      fields: [
        { key: 'email', label: 'Email' },
        { key: 'first_name', label: 'Firstname' },
        { key: 'last_name', label: 'Lastname' },
        { key: 'creation', label: 'Creation' },
-        { key: 'show_details', label: 'Details' },
-        { key: 'bookmark', label: 'Bookmark' },
+        { key: 'bookmark', label: 'löschen' },
      ],
      searchResult: [
        {
@ -114,65 +110,42 @@ export default {
    this.itemsList = this.searchResult
  },
  methods: {
-    // updateMassCreation(newMassCreationItem, even) {
-    //  console.log('even', even)
-    //  console.log('>>>>>>>>>>>>>>>>  newMassCreationItem overview: ', newMassCreationItem)
-    //  this.massCreation.push(newMassCreationItem)
-    // },
-    // getSearchResult() {
-    //  console.log('setSearchResult')
-    //  this.itemsList = this.searchResult
-    // },
-
    updateItem(e, event) {
-      // console.log('even', even)
-      // console.log('>>>>>>>>>>>>>>>> updateItem e: ', e)
-
      let index = 0
      let findArr = {}

-      // console.log("array1.find((arr) => arr.id === 2).text ", array1.find((arr) => arr.id === 2))
-
-      // console.log('this.massCreation bevor: ', this.massCreation)
-      if (event === 'push') {
-        findArr = this.itemsList.find((arr) => arr.id === e.id)
-
-        // console.log('findArr ', findArr)
-
-        index = this.itemsList.indexOf(findArr)
-
-        // console.log('index ', index)
-
-        this.itemsList.splice(index, 1)
-
-        // console.log(this.itemsList)
-
-        this.massCreation.push(e)
+      switch (event) {
+        case 'push':
+          findArr = this.itemsList.find((arr) => arr.id === e.id)
+          index = this.itemsList.indexOf(findArr)
+          this.itemsList.splice(index, 1)
+          this.massCreation.push(e)
+          break
+        case 'remove':
+          findArr = this.massCreation.find((arr) => arr.id === e.id)
+          index = this.massCreation.indexOf(findArr)
+          this.massCreation.splice(index, 1)
+          this.itemsList.push(e)
+          break
+        default:
+          throw new Error(event)
      }
-      if (event === 'remove') {
-        findArr = this.massCreation.find((arr) => arr.id === e.id)
-
-        // console.log('findArr ', findArr)
-
-        index = this.massCreation.indexOf(findArr)
-
-        // console.log('index ', index)
-
-        this.massCreation.splice(index, 1)
-
-        // console.log(this.massCreation)
-
-        this.itemsList.push(e)
-      }
-      // console.log('this.massCreation after: ', this.massCreation)
-
-      // console.log('this items after', this.items)
    },

    updateRadioSelected(obj) {
-      // console.log('Creation.vue updateRadioSelected', obj)
      this.radioSelectedMass = obj[0]
    },
+
+    removeAllBookmark() {
+      alert('remove all bookmarks')
+      const index = 0
+      let i = 0
+
+      for (i; i < this.massCreation.length; i++) {
+        this.itemsList.push(this.massCreation[i])
+      }
+      this.massCreation.splice(index, this.massCreation.length)
+    },
  },
 }
 </script>
--- a/admin/src/views/CreationConfirm.vue
+++ b/admin/src/views/CreationConfirm.vue
@ -1,10 +1,15 @@
 <template>
  <div>
+    <small class="bg-danger text-light p-1">
+      Die anzahl der offene Schöpfungen stimmen nicht! Diese wird bei absenden im $store
+      hochgezählt. Die Liste die hier angezeigt wird ist SIMULIERT!
+    </small>
    <user-table
+      class="mt-4"
      type="PageCreationConfirm"
      :itemsUser="confirmResult"
+      :creation="creation"
      :fieldsTable="fields"
-      :criteria="criteria"
      @update-confirm-result="updateConfirmResult"
    />
  </div>
@ -21,14 +26,16 @@ export default {
    return {
      showArrays: false,
      fields: [
+        { key: 'bookmark', label: 'löschen' },
        { key: 'email', label: 'Email' },
-        { key: 'first_name', label: 'Firstname' },
-        { key: 'last_name', label: 'Lastname' },
-        { key: 'creation_gdd', label: 'Creation GDD' },
+        { key: 'first_name', label: 'Vorname' },
+        { key: 'last_name', label: 'Nachname' },
+        { key: 'creation_gdd', label: 'GDD' },
+        { key: 'text', label: 'Text' },
        { key: 'creation_date', label: 'Datum' },
        { key: 'creation_moderator', label: 'Moderator' },
-        { key: 'show_details', label: 'Details' },
-        { key: 'bookmark', label: 'Bookmark' },
+        { key: 'edit_creation', label: 'ändern' },
+        { key: 'confirm', label: 'speichern' },
      ],
      confirmResult: [
        {
@ -36,8 +43,10 @@ export default {
          email: 'dickerson@web.de',
          first_name: 'Dickerson',
          last_name: 'Macdonald',
-          creation_old: '450,200,700',
+          creation: '450,200,700',
          creation_gdd: '1000',
+          text: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam ',
+
          creation_date: '01/11/2021',
          creation_moderator: 'Manuela Gast',
        },
@ -46,8 +55,10 @@ export default {
          email: 'larsen@woob.de',
          first_name: 'Larsen',
          last_name: 'Shaw',
-          creation_old: '300,200,1000',
+          creation: '300,200,1000',
          creation_gdd: '1000',
+          text: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam ',
+
          creation_date: '01/11/2021',
          creation_moderator: 'Manuela Gast',
        },
@ -56,8 +67,9 @@ export default {
          email: 'geneva@tete.de',
          first_name: 'Geneva',
          last_name: 'Wilson',
-          creation_old: '350,200,900',
+          creation: '350,200,900',
          creation_gdd: '1000',
+          text: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam',
          creation_date: '01/11/2021',
          creation_moderator: 'Manuela Gast',
        },
@ -67,6 +79,8 @@ export default {
          first_name: 'Soledare',
          last_name: 'Takker',
          creation_gdd: '500',
+          text: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo ',
+
          creation_date: '01/10/2021',
          creation_moderator: 'Evelyn Roller',
        },
@ -75,14 +89,14 @@ export default {
          email: 'dickerson@web.de',
          first_name: 'Dickerson',
          last_name: 'Macdonald',
-          creation_old: '100,400,800',
+          creation: '100,400,800',
          creation_gdd: '200',
+          text: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At',
          creation_date: '01/09/2021',
          creation_moderator: 'Manuela Gast',
        },
      ],
-      massCreation: [],
-      criteria: '',
+      creation: [null, null, null],
    }
  },

@ -94,15 +108,17 @@ export default {

        findArr = this.confirmResult.find((arr) => arr.id === e.id)

-        // console.log('findArr ', findArr)
-
        index = this.confirmResult.indexOf(findArr)

-        // console.log('index ', index)
-
        this.confirmResult.splice(index, 1)
+
+        this.$store.commit('openCreationsMinus', 1)
      }
    },
  },
+  created() {
+    this.$store.commit('resetOpenCreations')
+    this.$store.commit('openCreationsPlus', Object.keys(this.confirmResult).length)
+  },
 }
 </script>
--- a/admin/src/views/Overview.vue
+++ b/admin/src/views/Overview.vue
@ -1,6 +1,7 @@
 <template>
  <div>
    <b-card
+      v-show="$store.state.openCreations > 0"
      border-variant="primary"
      header="offene Schöpfungen"
      header-bg-variant="danger"
@ -8,7 +9,23 @@
      align="center"
    >
      <b-card-text>
-        <b-link to="creation-confirm"><h1>3</h1></b-link>
+        <b-link to="creation-confirm">
+          <h1>{{ $store.state.openCreations }}</h1>
+        </b-link>
+      </b-card-text>
+    </b-card>
+    <b-card
+      v-show="$store.state.openCreations < 1"
+      border-variant="success"
+      header="keine offene Schöpfungen"
+      header-bg-variant="success"
+      header-text-variant="white"
+      align="center"
+    >
+      <b-card-text>
+        <b-link to="creation-confirm">
+          <h1>{{ $store.state.openCreations }}</h1>
+        </b-link>
      </b-card-text>
    </b-card>
    <br />
@ -53,15 +70,9 @@
        <b-badge class="bg-warning text-dark" pill>2</b-badge>
      </b-list-group-item>
    </b-list-group>
-    <hr />
-    <br />
-    <div class="text-center">
-      Gradido Akademie Adminkonsole
-      <div><small>Version: 0.0.1</small></div>
-    </div>
-    <br />
-    <br />
-    <hr />
+    <b-button @click="$store.commit('resetOpenCreations')">
+      lösche alle offenen Test Schöpfungen
+    </b-button>
  </div>
 </template>
 <script>
--- a/admin/yarn.lock
+++ b/admin/yarn.lock
@ -11168,6 +11168,11 @@ shellwords@^0.1.1:
  resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
  integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==

+shvl@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/shvl/-/shvl-2.0.3.tgz#eb4bd37644f5684bba1fc52c3010c96fb5e6afd1"
+  integrity sha512-V7C6S9Hlol6SzOJPnQ7qzOVEWUQImt3BNmmzh40wObhla3XOYMe4gGiYzLrJd5TFa+cI2f9LKIRJTTKZSTbWgw==
+
 side-channel@^1.0.4:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
@ -12512,6 +12517,14 @@ vue@^2.6.11:
  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
  integrity sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==

+vuex-persistedstate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/vuex-persistedstate/-/vuex-persistedstate-4.1.0.tgz#127165f85f5b4534fb3170a5d3a8be9811bd2a53"
+  integrity sha512-3SkEj4NqwM69ikJdFVw6gObeB0NHyspRYMYkR/EbhR0hbvAKyR5gksVhtAfY1UYuWUOCCA0QNGwv9pOwdj+XUQ==
+  dependencies:
+    deepmerge "^4.2.2"
+    shvl "^2.0.3"
+
 vuex@^3.6.2:
  version "3.6.2"
  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"