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

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

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>

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', () => {
+    it('has a DIV element with the class.component-creation-formular', () => {
-      expect(wrapper.find('.componente-creation-formular').exists()).toBeTruthy()
+      expect(wrapper.find('.component-creation-formular').exists()).toBeTruthy()
     })
   })
 })

admin/src/components/CreationFormular.vue

@@ -1,72 +1,108 @@
 <template>
-  <div class="componente-creation-formular">
+  <div class="component-creation-formular">
-    <div class="shadow p-3 mb-5 bg-white rounded">
+    <div>
-      <b-form>
+      <h3>
-        <b-row class="">
+        {{
-          <b-col>
+          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">
+          <label>Betrag Auswählen</label>
-            Betrag Auswählen
+          <b-input-group>
-            <span class="mt-2 h3" v-if="value > 0">{{ value }} GDD</span>
+            <template #append>
-          </label>
+              <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'),
+      currentMonth: this.$moment().format('MMMM'),
-      MonatLast: this.$moment().subtract(1, 'month').format('MMMM'),
+      lastMonth: this.$moment().subtract(1, 'month').format('MMMM'),
-      MonatBevorLast: this.$moment().subtract(2, '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(
+      // Wenn Massenschöpfung
-      //  'CreationFormular.vue updateRadioSelected(' + name + ',' + index + ', ' + openCreation + ')',
-      // )
       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
     },
   },
 }

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>

admin/src/components/NavBar.spec.js

@@ -15,8 +15,8 @@ describe('NavBar', () => {
       wrapper = Wrapper()
     })
 
-    it('have a DIV element with the class.componente-nabvar', () => {
+    it('has a DIV element with the class.component-nabvar', () => {
-      expect(wrapper.find('.componente-nabvar').exists()).toBeTruthy()
+      expect(wrapper.find('.component-nabvar').exists()).toBeTruthy()
     })
   })
 })

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">Massenschöpfung</b-nav-item>
-          <b-nav-item to="/creation-confirm">offene Schöpfungen</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>

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', () => {
+    it('has a DIV element with the class.component-user-table', () => {
-      expect(wrapper.find('.componente-user-table').exists()).toBeTruthy()
+      expect(wrapper.find('.component-user-table').exists()).toBeTruthy()
     })
   })
 })

admin/src/components/UserTable.vue

@@ -1,59 +1,110 @@
 <template>
-  <div class="componente-user-table">
+  <div class="component-user-table">
-    <b-table :items="itemsUser" :fields="fieldsTable" :filter="criteria" caption-top striped hover>
+    <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">
+        <b-button variant="info" size="lg" @click="row.toggleDetails" class="mr-2">
-          {{ row.detailsShowing ? 'Hide' : 'Show' }} Details
+          <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>
+            <b-col></b-col>
-              <h3>{{ row.item.first_name }} {{ row.item.last_name }}</h3>
-            </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'"
+          v-show="type === 'UserListSearch'"
-          size="sm"
+          size="md"
-          @click="bookmarkPush(row.item, row.index, $event.target)"
+          @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'"
+          v-show="type === 'UserListMassCreation' || type === 'PageCreationConfirm'"
-          size="sm"
+          size="lg"
-          @click="bookmarkRemove(row.item, row.index, $event.target)"
+          @click="overlayShow('remove', row.item)"
           class="mr-2"
         >
-          löschen
+          <b-icon icon="x" variant="light"></b-icon>
-        </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-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) {
+    overlayShow(bookmarkType, item) {
-      // console.log('bookmarking item', item)
+      this.overlay = true
-      // console.log('bookmarking index', index)
+      this.overlayBookmarkType = bookmarkType
-      // console.log('bookmarking button', button)
+      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) {
+    bookmarkRemove(item) {
-      // console.log('bookmarking item', item)
-      // console.log('bookmarking index', index)
-      // console.log('bookmarking button', button)
       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>

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

admin/src/views/Creation.vue

@@ -1,8 +1,7 @@
 <template>
   <div>
     <b-row>
-      <b-col>
+      <b-col cols="12" lg="5">
-        <div>UserListe zum auswählen (itemsList)</div>
         <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">
+      <b-col cols="12" lg="7" 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"
-        />
         <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: 'löschen' },
-        { key: 'bookmark', label: 'Bookmark' },
       ],
       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))
+      switch (event) {
-
+        case 'push':
-      // console.log('this.massCreation bevor: ', this.massCreation)
+          findArr = this.itemsList.find((arr) => arr.id === e.id)
-      if (event === 'push') {
+          index = this.itemsList.indexOf(findArr)
-        findArr = this.itemsList.find((arr) => arr.id === e.id)
+          this.itemsList.splice(index, 1)
-
+          this.massCreation.push(e)
-        // console.log('findArr ', findArr)
+          break
-
+        case 'remove':
-        index = this.itemsList.indexOf(findArr)
+          findArr = this.massCreation.find((arr) => arr.id === e.id)
-
+          index = this.massCreation.indexOf(findArr)
-        // console.log('index ', index)
+          this.massCreation.splice(index, 1)
-
+          this.itemsList.push(e)
-        this.itemsList.splice(index, 1)
+          break
-
+        default:
-        // console.log(this.itemsList)
+          throw new Error(event)
-
-        this.massCreation.push(e)
       }
-      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>

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: 'first_name', label: 'Vorname' },
-        { key: 'last_name', label: 'Lastname' },
+        { key: 'last_name', label: 'Nachname' },
-        { key: 'creation_gdd', label: 'Creation GDD' },
+        { 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: 'edit_creation', label: 'ändern' },
-        { key: 'bookmark', label: 'Bookmark' },
+        { 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: [],
+      creation: [null, null, null],
-      criteria: '',
     }
   },
 
@@ -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>

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 />
+    <b-button @click="$store.commit('resetOpenCreations')">
-    <br />
+      lösche alle offenen Test Schöpfungen
-    <div class="text-center">
+    </b-button>
-      Gradido Akademie Adminkonsole
-      <div><small>Version: 0.0.1</small></div>
-    </div>
-    <br />
-    <br />
-    <hr />
   </div>
 </template>
 <script>

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"