From 686f9bfd4e6aeaaad9be451ddcdcf04f54e3cbe5 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 19 Nov 2021 11:14:16 +0100
Subject: [PATCH] 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.
---
 admin/package.json                            |   3 +-
 admin/src/App.vue                             |   3 +
 admin/src/components/CreationFormular.spec.js |   8 +-
 admin/src/components/CreationFormular.vue     | 201 +++++++++++++----
 admin/src/components/Footer.vue               |  10 +
 admin/src/components/NavBar.spec.js           |   4 +-
 admin/src/components/NavBar.vue               |  18 +-
 admin/src/components/UserTable.spec.js        |   4 +-
 admin/src/components/UserTable.vue            | 208 ++++++++++++++----
 admin/src/store/store.js                      |  22 ++
 admin/src/views/Creation.vue                  | 109 ++++-----
 admin/src/views/CreationConfirm.vue           |  48 ++--
 admin/src/views/Overview.vue                  |  31 ++-
 admin/yarn.lock                               |  13 ++
 14 files changed, 497 insertions(+), 185 deletions(-)
 create mode 100644 admin/src/components/Footer.vue

diff --git a/admin/package.json b/admin/package.json
index 5dff9145e..f3ba786bc 100644
--- 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",
diff --git a/admin/src/App.vue b/admin/src/App.vue
index 1a15d5d7c..70bc2978a 100644
--- 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>
diff --git a/admin/src/components/CreationFormular.spec.js b/admin/src/components/CreationFormular.spec.js
index c2098768c..9f4fc3f1b 100644
--- 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()
     })
   })
 })
diff --git a/admin/src/components/CreationFormular.vue b/admin/src/components/CreationFormular.vue
index dbc40c13c..995640c72 100644
--- 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
     },
   },
 }
diff --git a/admin/src/components/Footer.vue b/admin/src/components/Footer.vue
new file mode 100644
index 000000000..398f2e180
--- /dev/null
+++ 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>
diff --git a/admin/src/components/NavBar.spec.js b/admin/src/components/NavBar.spec.js
index ab9be26e5..b82a7e46f 100644
--- 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()
     })
   })
 })
diff --git a/admin/src/components/NavBar.vue b/admin/src/components/NavBar.vue
index 1efdffc04..a9db9cfeb 100644
--- 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>
diff --git a/admin/src/components/UserTable.spec.js b/admin/src/components/UserTable.spec.js
index 935bd177c..d74abf0b3 100644
--- 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()
     })
   })
 })
diff --git a/admin/src/components/UserTable.vue b/admin/src/components/UserTable.vue
index a376e0f67..fc5315cc7 100644
--- 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>
diff --git a/admin/src/store/store.js b/admin/src/store/store.js
index 0b1a6350e..1dba6b9e3 100644
--- 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
diff --git a/admin/src/views/Creation.vue b/admin/src/views/Creation.vue
index 02a060f74..0f88199f8 100644
--- 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>
diff --git a/admin/src/views/CreationConfirm.vue b/admin/src/views/CreationConfirm.vue
index 2d416e08f..c0b970d12 100644
--- 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>
diff --git a/admin/src/views/Overview.vue b/admin/src/views/Overview.vue
index d529701e2..056bb14a6 100644
--- 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>
diff --git a/admin/yarn.lock b/admin/yarn.lock
index 0fdef5450..9e979784f 100644
--- 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"