From 7cc4d8e5e2ebb01a1e01afc5683f1ee81c00acb6 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 17 Nov 2021 16:21:23 +0100
Subject: [PATCH] =?UTF-8?q?adminbereich,=20=C3=BCbersicht,=20usersuche,=20?=
 =?UTF-8?q?sch=C3=B6pfen,=20sch=C3=B6pfung=20best=C3=A4tigen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/components/CreateFormular.vue       |  66 -------
 admin/src/components/CreationFormular.spec.js |  22 +++
 admin/src/components/CreationFormular.vue     | 114 ++++++++++++
 admin/src/components/NavBar.spec.js           |  22 +++
 admin/src/components/NavBar.vue               |  27 ++-
 admin/src/components/UserTable.spec.js        |  22 +++
 admin/src/components/UserTable.vue            | 133 ++++++++------
 admin/src/locales/en.json                     |  17 +-
 admin/src/main.js                             |   6 +-
 admin/src/main.test.js                        |  25 +++
 admin/src/router/routes.js                    |   7 +
 admin/src/views/Creation.vue                  | 171 +++++++++++++++++-
 admin/src/views/CreationConfirm.vue           | 108 +++++++++++
 admin/src/views/Overview.vue                  |  73 ++++++--
 admin/src/views/UserSearch.vue                |  74 +++++++-
 15 files changed, 710 insertions(+), 177 deletions(-)
 delete mode 100644 admin/src/components/CreateFormular.vue
 create mode 100644 admin/src/components/CreationFormular.spec.js
 create mode 100644 admin/src/components/CreationFormular.vue
 create mode 100644 admin/src/components/NavBar.spec.js
 create mode 100644 admin/src/components/UserTable.spec.js
 create mode 100644 admin/src/views/CreationConfirm.vue

diff --git a/admin/src/components/CreateFormular.vue b/admin/src/components/CreateFormular.vue
deleted file mode 100644
index 5dd07a4c1..000000000
--- a/admin/src/components/CreateFormular.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-  <div>
-    <b-form>
-      <b-row class="m-4">
-        <b-col>
-          <b-form-radio name="radio-size" size="lg">{{ MonatBevorLast }}</b-form-radio>
-        </b-col>
-        <b-col>
-          <b-form-radio name="radio-size" size="lg">{{ MonatLast }}</b-form-radio>
-        </b-col>
-        <b-col>
-          <b-form-radio name="radio-size" size="lg">{{ MonatAktuell }}</b-form-radio>
-        </b-col>
-      </b-row>
-      <b-row class="m-4">
-        <div>
-          <b-form-textarea
-            id="textarea-state"
-            v-model="text"
-            :state="text.length >= 10"
-            placeholder="Enter at least 10 characters"
-            rows="3"
-          ></b-form-textarea>
-        </div>
-      </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>
-        <b-input
-          id="range-2"
-          v-model="value"
-          type="range"
-          min="0"
-          max="1000"
-          step="10"
-          class="mr-4 ml-4"
-        ></b-input>
-      </b-row>
-      <b-row class="m-4">
-        <b-col class="text-center"><b-button type="reset" variant="danger">Reset</b-button></b-col>
-        <b-col class="text-center">
-          <div class="text-right">
-            <b-button type="submit" variant="primary">Submit</b-button>
-          </div>
-        </b-col>
-      </b-row>
-    </b-form>
-  </div>
-</template>
-<script>
-export default {
-  name: 'CreateFormular',
-  data() {
-    return {
-      text: 'datatext',
-      value: 0,
-      MonatAktuell: this.$moment().format('MMMM'),
-      MonatLast: this.$moment().subtract(1, 'month').format('MMMM'),
-      MonatBevorLast: this.$moment().subtract(2, 'month').format('MMMM'),
-    }
-  },
-  created() {},
-}
-</script>
diff --git a/admin/src/components/CreationFormular.spec.js b/admin/src/components/CreationFormular.spec.js
new file mode 100644
index 000000000..c2098768c
--- /dev/null
+++ b/admin/src/components/CreationFormular.spec.js
@@ -0,0 +1,22 @@
+import { mount } from '@vue/test-utils'
+import CreationFormular from './CreationFormular.vue'
+
+const localVue = global.localVue
+
+describe('CreationFormular', () => {
+  let wrapper
+
+  const Wrapper = () => {
+    return mount(CreationFormular, { localVue })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('have a DIV element with the class.componente-creation-formular', () => {
+      expect(wrapper.find('.componente-creation-formular').exists()).toBeTruthy()
+    })
+  })
+})
diff --git a/admin/src/components/CreationFormular.vue b/admin/src/components/CreationFormular.vue
new file mode 100644
index 000000000..dbc40c13c
--- /dev/null
+++ b/admin/src/components/CreationFormular.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="componente-creation-formular">
+    <div class="shadow p-3 mb-5 bg-white rounded">
+      <b-form>
+        <b-row class="">
+          <b-col>
+            <b-form-radio
+              v-model="radioSelected"
+              :value="MonatBevorLast"
+              size="lg"
+              @change="updateRadioSelected(MonatBevorLast, 0, creation[0])"
+            >
+              {{ MonatBevorLast }} {{ creation[0] != null ? creation[0] + ' GDD' : '' }}
+            </b-form-radio>
+          </b-col>
+          <b-col>
+            <b-form-radio
+              v-model="radioSelected"
+              :value="MonatLast"
+              size="lg"
+              @change="updateRadioSelected(MonatLast, 1, creation[1])"
+            >
+              {{ MonatLast }} {{ creation[1] != null ? creation[1] + ' GDD' : '' }}
+            </b-form-radio>
+          </b-col>
+          <b-col>
+            <b-form-radio
+              v-model="radioSelected"
+              :value="MonatAktuell"
+              size="lg"
+              @change="updateRadioSelected(MonatAktuell, 2, creation[2])"
+            >
+              {{ MonatAktuell }} {{ 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>
+          <b-input
+            id="range-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">
+          <div>
+            <b-form-textarea
+              id="textarea-state"
+              v-model="text"
+              :state="text.length >= 10"
+              placeholder="Enter at least 10 characters"
+              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-col>
+          <b-col class="text-center">
+            <div class="text-right">
+              <b-button type="submit" variant="primary">Submit ({{ type }})</b-button>
+            </div>
+          </b-col>
+        </b-row>
+      </b-form>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'CreationFormular',
+  props: ['type', 'creation'],
+  data() {
+    return {
+      radioSelected: '',
+      text: 'datatext',
+      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'),
+    }
+  },
+  created() {},
+  methods: {
+    updateRadioSelected(name, index, openCreation) {
+      // console.log(
+      //  'CreationFormular.vue updateRadioSelected(' + name + ',' + index + ', ' + openCreation + ')',
+      // )
+      if (this.type === 'massCreation') {
+        // console.log("updateRadioSelected type=> '", this.type)
+
+        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)
+      }
+    },
+  },
+}
+</script>
diff --git a/admin/src/components/NavBar.spec.js b/admin/src/components/NavBar.spec.js
new file mode 100644
index 000000000..ab9be26e5
--- /dev/null
+++ b/admin/src/components/NavBar.spec.js
@@ -0,0 +1,22 @@
+import { mount } from '@vue/test-utils'
+import NavBar from './NavBar.vue'
+
+const localVue = global.localVue
+
+describe('NavBar', () => {
+  let wrapper
+
+  const Wrapper = () => {
+    return mount(NavBar, { localVue })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('have a DIV element with the class.componente-nabvar', () => {
+      expect(wrapper.find('.componente-nabvar').exists()).toBeTruthy()
+    })
+  })
+})
diff --git a/admin/src/components/NavBar.vue b/admin/src/components/NavBar.vue
index 42bc2161c..1efdffc04 100644
--- a/admin/src/components/NavBar.vue
+++ b/admin/src/components/NavBar.vue
@@ -1,19 +1,18 @@
 <template>
-  <div>
-    <div>
-      <b-navbar toggleable="sm" type="dark" variant="info">
-        <b-navbar-brand to="/">Adminbereich</b-navbar-brand>
+  <div class="componente-nabvar">
+    <b-navbar toggleable="sm" type="dark" variant="success">
+      <b-navbar-brand to="/">Adminbereich</b-navbar-brand>
 
-        <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
 
-        <b-collapse id="nav-collapse" is-nav>
-          <b-navbar-nav>
-            <b-nav-item to="/user">User</b-nav-item>
-            <b-nav-item to="/creation">Schöpfen</b-nav-item>
-          </b-navbar-nav>
-        </b-collapse>
-        <b-navbar-brand href="http://localhost:3000/vue/login">Profilbereich</b-navbar-brand>
-      </b-navbar>
-    </div>
+      <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-navbar-nav>
+      </b-collapse>
+      <b-navbar-brand href="http://localhost:3000/vue/login">Profilbereich</b-navbar-brand>
+    </b-navbar>
   </div>
 </template>
diff --git a/admin/src/components/UserTable.spec.js b/admin/src/components/UserTable.spec.js
new file mode 100644
index 000000000..935bd177c
--- /dev/null
+++ b/admin/src/components/UserTable.spec.js
@@ -0,0 +1,22 @@
+import { mount } from '@vue/test-utils'
+import UserTable from './UserTable.vue'
+
+const localVue = global.localVue
+
+describe('UserTable', () => {
+  let wrapper
+
+  const Wrapper = () => {
+    return mount(UserTable, { localVue })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('have a DIV element with the class.componente-user-table', () => {
+      expect(wrapper.find('.componente-user-table').exists()).toBeTruthy()
+    })
+  })
+})
diff --git a/admin/src/components/UserTable.vue b/admin/src/components/UserTable.vue
index 2e92c9a7f..a376e0f67 100644
--- a/admin/src/components/UserTable.vue
+++ b/admin/src/components/UserTable.vue
@@ -1,24 +1,8 @@
 <template>
-  <div>
-    <b-table :items="items" :fields="fields" :filter="criteria" caption-top striped hover>
-      <template #cell(checkbox)="row">
-        <!-- As `row.showDetails` is one-way, we call the toggleDetails function on @change -->
-        <b-form-checkbox v-model="row.detailsShowing" @change="row.toggleDetails">
-          Details via check
-        </b-form-checkbox>
-      </template>
-      <template #table-caption>
-        <div>
-          <b-form-input
-            v-model="criteria"
-            placeholder="User suche"
-            class="bg-color-gray"
-          ></b-form-input>
-        </div>
-      </template>
-
+  <div class="componente-user-table">
+    <b-table :items="itemsUser" :fields="fieldsTable" :filter="criteria" caption-top striped hover>
       <template #cell(show_details)="row">
-        <b-button size="sm" @click="row.toggleDetails" class="mr-2">
+        <b-button variant="info" size="sm" @click="row.toggleDetails" class="mr-2">
           {{ row.detailsShowing ? 'Hide' : 'Show' }} Details
         </b-button>
       </template>
@@ -26,63 +10,94 @@
       <template #row-details="row">
         <b-card>
           <b-row class="mb-2">
-            <b-col sm="3" class="text-sm-right"><b>Age:</b></b-col>
-            <b-col>{{ row.item.age }}</b-col>
+            <b-col>
+              <h3>{{ row.item.first_name }} {{ row.item.last_name }}</h3>
+            </b-col>
           </b-row>
 
-          <b-row class="mb-2">
-            <b-col sm="3" class="text-sm-right"><b>Is Active:</b></b-col>
-            <b-col>{{ row.item.isActive }}</b-col>
-          </b-row>
-          <create-formular />
+          <creation-formular
+            type="singleCreation"
+            :creation="getCreationInMonths(row.item.creation)"
+          />
 
           <b-button size="sm" @click="row.toggleDetails">Hide Details</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)"
+          class="mr-2"
+        >
+          merken
+        </b-button>
+        <b-button
+          variant="danger"
+          v-show="type == 'UserListMassCreation' || type == 'PageCreationConfirm'"
+          size="sm"
+          @click="bookmarkRemove(row.item, row.index, $event.target)"
+          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-button>
+      </template>
     </b-table>
   </div>
 </template>
 
 <script>
-import CreateFormular from '../components/CreateFormular.vue'
+import CreationFormular from '../components/CreationFormular.vue'
 
 export default {
   name: 'UserTable',
-  props: ['count', 'area'],
+  props: ['type', 'itemsUser', 'fieldsTable', 'criteria', 'creation'],
   components: {
-    CreateFormular,
+    CreationFormular,
   },
   data() {
-    return {
-      criteria: '',
-      fields: ['checkbox', 'email', 'first_name', 'last_name', 'creation', 'show_details'],
-      items: [
-        {
-          email: 'dickerson@web.de',
-          first_name: 'Dickerson',
-          last_name: 'Macdonald',
-          creation: '0,200, 1000',
-        },
-        {
-          email: 'larsen@woob.de',
-          first_name: 'Larsen',
-          last_name: 'Shaw',
-          creation: '0,200, 1000',
-        },
-        {
-          email: 'geneva@tete.de',
-          first_name: 'Geneva',
-          last_name: 'Wilson',
-          creation: '0,200, 1000',
-        },
-        {
-          email: 'viewrter@asdfvb.com',
-          first_name: 'Soledare',
-          last_name: 'Takker',
-          creation: '100,400, 800',
-        },
-      ],
-    }
+    return {}
+  },
+  methods: {
+    bookmarkPush(item, index, button) {
+      // console.log('bookmarking item', item)
+      // console.log('bookmarking index', index)
+      // console.log('bookmarking button', button)
+
+      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)
+      if (this.type === 'UserListMassCreation') {
+        this.$emit('update-item', item, 'remove')
+      }
+
+      if (this.type === 'PageCreationConfirm') {
+        this.$emit('update-confirm-result', item, 'remove')
+      }
+    },
+    bookmarkConfirm(item, index, button) {
+      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>
diff --git a/admin/src/locales/en.json b/admin/src/locales/en.json
index ac7159ece..0967ef424 100644
--- a/admin/src/locales/en.json
+++ b/admin/src/locales/en.json
@@ -1,16 +1 @@
-{
-    "monthNames": { 
-        "January": "", 
-        "February": "", 
-        "March": "", 
-        "April": "", 
-        "May": "", 
-        "June": "",
-        "July": "", 
-        "August": "", 
-        "September": "", 
-        "October": "", 
-        "November": "", 
-        "December": ""
-    }
-}
+{}
diff --git a/admin/src/main.js b/admin/src/main.js
index 197b82888..b3925c9fe 100644
--- a/admin/src/main.js
+++ b/admin/src/main.js
@@ -13,9 +13,9 @@ import VueApollo from 'vue-apollo'
 
 import CONFIG from './config'
 
-import { BootstrapVue } from 'bootstrap-vue'
-import 'bootstrap-vue/dist/bootstrap-vue.css'
+import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
 import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
 
 import moment from 'vue-moment'
 
@@ -52,6 +52,8 @@ const apolloProvider = new VueApollo({
 })
 
 Vue.use(BootstrapVue)
+Vue.use(IconsPlugin)
+
 Vue.use(moment)
 
 addNavigationGuards(router, store)
diff --git a/admin/src/main.test.js b/admin/src/main.test.js
index 27c8898ab..b2d7fadc8 100644
--- a/admin/src/main.test.js
+++ b/admin/src/main.test.js
@@ -5,10 +5,13 @@ import CONFIG from './config'
 import Vue from 'vue'
 import Vuex from 'vuex'
 import VueI18n from 'vue-i18n'
+import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
+import moment from 'vue-moment'
 
 jest.mock('vue')
 jest.mock('vuex')
 jest.mock('vue-i18n')
+jest.mock('moment')
 
 const storeMock = jest.fn()
 Vuex.Store = storeMock
@@ -25,6 +28,16 @@ jest.mock('apollo-boost', () => {
   }
 })
 
+jest.mock('bootstrap-vue', () => {
+  return {
+    __esModule: true,
+    BootstrapVue: jest.fn(),
+    IconsPlugin: jest.fn(() => {
+      return { concat: jest.fn() }
+    }),
+  }
+})
+
 describe('main', () => {
   it('calls the HttpLink', () => {
     expect(HttpLink).toBeCalledWith({ uri: CONFIG.GRAPHQL_URI })
@@ -50,6 +63,18 @@ describe('main', () => {
     expect(VueI18n).toBeCalled()
   })
 
+  it('calls BootstrapVue', () => {
+    expect(BootstrapVue).toBeCalled()
+  })
+
+  it('calls IconsPlugin', () => {
+    expect(IconsPlugin).toBeCalled()
+  })
+
+  it('calls Moment', () => {
+    expect(moment).toBeCalled()
+  })
+
   it.skip('creates a store', () => {
     expect(storeMock).toBeCalled()
   })
diff --git a/admin/src/router/routes.js b/admin/src/router/routes.js
index 71500eece..a13463e08 100644
--- a/admin/src/router/routes.js
+++ b/admin/src/router/routes.js
@@ -27,6 +27,13 @@ const routes = [
       requiresAuth: true,
     },
   },
+  {
+    path: '/creation-confirm',
+    component: () => import('@/views/CreationConfirm.vue'),
+    meta: {
+      requiresAuth: true,
+    },
+  },
   {
     path: '*',
     component: () => import('@/components/NotFoundPage.vue'),
diff --git a/admin/src/views/Creation.vue b/admin/src/views/Creation.vue
index 794218163..02a060f74 100644
--- a/admin/src/views/Creation.vue
+++ b/admin/src/views/Creation.vue
@@ -1,9 +1,178 @@
 <template>
   <div>
+    <b-row>
+      <b-col>
+        <div>UserListe zum auswählen (itemsList)</div>
+        <label>Usersuche</label>
+        <b-input
+          type="text"
+          v-model="criteria"
+          class="shadow p-3 mb-5 bg-white rounded"
+          placeholder="User suche"
+        ></b-input>
+        <user-table
+          type="UserListSearch"
+          :itemsUser="itemsList"
+          :fieldsTable="Searchfields"
+          :criteria="criteria"
+          :creation="creation"
+          @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"
+        />
+        <user-table
+          class="shadow p-3 mb-5 bg-white rounded"
+          type="UserListMassCreation"
+          :itemsUser="massCreation"
+          :fieldsTable="fields"
+          :criteria="null"
+          :creation="creation"
+          @update-item="updateItem"
+        />
+      </b-col>
+    </b-row>
+    <hr />
     Schöpfen
     <ul>
-      <li>Input Usersuche</li>
+      <li>radioSelectedMass = {{ radioSelectedMass }}</li>
       <li>Tabelle Creationen</li>
     </ul>
   </div>
 </template>
+<script>
+import CreationFormular from '../components/CreationFormular.vue'
+import UserTable from '../components/UserTable.vue'
+
+export default {
+  name: 'overview',
+  components: {
+    CreationFormular,
+    UserTable,
+  },
+  data() {
+    return {
+      showArrays: false,
+      Searchfields: [
+        { key: 'email', label: 'Email' },
+        { key: 'first_name', label: 'Firstname' },
+        { key: 'last_name', label: 'Lastname' },
+        { key: 'creation', label: 'Creation' },
+        { key: 'bookmark', label: 'Bookmark' },
+      ],
+      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' },
+      ],
+      searchResult: [
+        {
+          id: 1,
+          email: 'dickerson@web.de',
+          first_name: 'Dickerson',
+          last_name: 'Macdonald',
+          creation: '450,200,700',
+        },
+        {
+          id: 2,
+          email: 'larsen@woob.de',
+          first_name: 'Larsen',
+          last_name: 'Shaw',
+          creation: '300,200,1000',
+        },
+        {
+          id: 3,
+          email: 'geneva@tete.de',
+          first_name: 'Geneva',
+          last_name: 'Wilson',
+          creation: '350,200,900',
+        },
+        {
+          id: 4,
+          email: 'viewrter@asdfvb.com',
+          first_name: 'Soledare',
+          last_name: 'Takker',
+          creation: '100,400,800',
+        },
+      ],
+      itemsList: this.searchResult,
+      massCreation: [],
+      radioSelectedMass: '',
+      criteria: '',
+      creation: [null, null, null],
+    }
+  },
+  created() {
+    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)
+      }
+      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]
+    },
+  },
+}
+</script>
diff --git a/admin/src/views/CreationConfirm.vue b/admin/src/views/CreationConfirm.vue
new file mode 100644
index 000000000..2d416e08f
--- /dev/null
+++ b/admin/src/views/CreationConfirm.vue
@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <user-table
+      type="PageCreationConfirm"
+      :itemsUser="confirmResult"
+      :fieldsTable="fields"
+      :criteria="criteria"
+      @update-confirm-result="updateConfirmResult"
+    />
+  </div>
+</template>
+<script>
+import UserTable from '../components/UserTable.vue'
+
+export default {
+  name: 'creation_confirm',
+  components: {
+    UserTable,
+  },
+  data() {
+    return {
+      showArrays: false,
+      fields: [
+        { key: 'email', label: 'Email' },
+        { key: 'first_name', label: 'Firstname' },
+        { key: 'last_name', label: 'Lastname' },
+        { key: 'creation_gdd', label: 'Creation GDD' },
+        { key: 'creation_date', label: 'Datum' },
+        { key: 'creation_moderator', label: 'Moderator' },
+        { key: 'show_details', label: 'Details' },
+        { key: 'bookmark', label: 'Bookmark' },
+      ],
+      confirmResult: [
+        {
+          id: 1,
+          email: 'dickerson@web.de',
+          first_name: 'Dickerson',
+          last_name: 'Macdonald',
+          creation_old: '450,200,700',
+          creation_gdd: '1000',
+          creation_date: '01/11/2021',
+          creation_moderator: 'Manuela Gast',
+        },
+        {
+          id: 2,
+          email: 'larsen@woob.de',
+          first_name: 'Larsen',
+          last_name: 'Shaw',
+          creation_old: '300,200,1000',
+          creation_gdd: '1000',
+          creation_date: '01/11/2021',
+          creation_moderator: 'Manuela Gast',
+        },
+        {
+          id: 3,
+          email: 'geneva@tete.de',
+          first_name: 'Geneva',
+          last_name: 'Wilson',
+          creation_old: '350,200,900',
+          creation_gdd: '1000',
+          creation_date: '01/11/2021',
+          creation_moderator: 'Manuela Gast',
+        },
+        {
+          id: 4,
+          email: 'viewrter@asdfvb.com',
+          first_name: 'Soledare',
+          last_name: 'Takker',
+          creation_gdd: '500',
+          creation_date: '01/10/2021',
+          creation_moderator: 'Evelyn Roller',
+        },
+        {
+          id: 5,
+          email: 'dickerson@web.de',
+          first_name: 'Dickerson',
+          last_name: 'Macdonald',
+          creation_old: '100,400,800',
+          creation_gdd: '200',
+          creation_date: '01/09/2021',
+          creation_moderator: 'Manuela Gast',
+        },
+      ],
+      massCreation: [],
+      criteria: '',
+    }
+  },
+
+  methods: {
+    updateConfirmResult(e, event) {
+      if (event === 'remove') {
+        let index = 0
+        let findArr = {}
+
+        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)
+      }
+    },
+  },
+}
+</script>
diff --git a/admin/src/views/Overview.vue b/admin/src/views/Overview.vue
index 55eca4aea..d529701e2 100644
--- a/admin/src/views/Overview.vue
+++ b/admin/src/views/Overview.vue
@@ -1,26 +1,71 @@
 <template>
   <div>
-    <create-formular />
+    <b-card
+      border-variant="primary"
+      header="offene Schöpfungen"
+      header-bg-variant="danger"
+      header-text-variant="white"
+      align="center"
+    >
+      <b-card-text>
+        <b-link to="creation-confirm"><h1>3</h1></b-link>
+      </b-card-text>
+    </b-card>
+    <br />
+    <b-row>
+      <b-col>
+        <b-card border-variant="info" header="offene Registrierung" align="center">
+          <b-card-text>Unbestätigte E-mail Registrierung</b-card-text>
+        </b-card>
+      </b-col>
+      <b-col>
+        <b-card border-variant="info" header="geschöpfte Stunden" align="center">
+          <b-card-text>Wievile Stunden können noch von Mitgliedern geschöpft werden?</b-card-text>
+        </b-card>
+      </b-col>
+      <b-col>
+        <b-card border-variant="info" header="Gemeinschafts Konto" align="center">
+          <b-card-text>
+            Für jedes Mitglied kann für das Gemeinschaftskonto geschöpft werden. Pro Monat 1000 x
+            Mitglieder
+          </b-card-text>
+        </b-card>
+      </b-col>
+    </b-row>
     <hr />
+    <br />
+    <b-list-group>
+      <b-list-group-item class="bg-secondary text-light" href="user">
+        zur Usersuche
+      </b-list-group-item>
+      <b-list-group-item class="d-flex justify-content-between align-items-center">
+        Mitglieder
+        <b-badge class="bg-success" pill>14</b-badge>
+      </b-list-group-item>
 
-    <user-table count="5" area="overview" />
+      <b-list-group-item class="d-flex justify-content-between align-items-center">
+        aktive Mitglieder
+        <b-badge class="bg-primary" pill>12</b-badge>
+      </b-list-group-item>
 
-    Startübersicht Adminbereich
-    <ul>
-      <li>Unbestätigte E-mail Registrierung</li>
-      <li>offene Schöpfungen</li>
-      <li>letzte 10 Schöpfungen</li>
-    </ul>
+      <b-list-group-item class="d-flex justify-content-between align-items-center">
+        nicht bestätigte Mitglieder
+        <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 />
   </div>
 </template>
 <script>
-import CreateFormular from '../components/CreateFormular.vue'
-import UserTable from '../components/UserTable.vue'
 export default {
   name: 'overview',
-  components: {
-    CreateFormular,
-    UserTable,
-  },
 }
 </script>
diff --git a/admin/src/views/UserSearch.vue b/admin/src/views/UserSearch.vue
index be6ce38c9..c7ed5ffef 100644
--- a/admin/src/views/UserSearch.vue
+++ b/admin/src/views/UserSearch.vue
@@ -1,9 +1,73 @@
 <template>
   <div>
-    Usersuche
-    <ul>
-      <li>Input Usersuche</li>
-      <li>Tabelle Ergenisse</li>
-    </ul>
+    <label>Usersuche</label>
+    <b-input
+      type="text"
+      v-model="criteria"
+      class="shadow p-3 mb-5 bg-white rounded"
+      placeholder="User suche"
+    ></b-input>
+    <user-table
+      type="PageUserSearch"
+      :itemsUser="searchResult"
+      :fieldsTable="fields"
+      :criteria="criteria"
+    />
   </div>
 </template>
+<script>
+import UserTable from '../components/UserTable.vue'
+
+export default {
+  name: 'overview',
+  components: {
+    UserTable,
+  },
+  data() {
+    return {
+      showArrays: false,
+      fields: [
+        { key: 'email', label: 'Email' },
+        { key: 'first_name', label: 'Firstname' },
+        { key: 'last_name', label: 'Lastname' },
+        { key: 'creation', label: 'Creation' },
+        { key: 'show_details', label: 'Details' },
+      ],
+      searchResult: [
+        {
+          id: 1,
+          email: 'dickerson@web.de',
+          first_name: 'Dickerson',
+          last_name: 'Macdonald',
+          creation: '450,200,700',
+        },
+        {
+          id: 2,
+          email: 'larsen@woob.de',
+          first_name: 'Larsen',
+          last_name: 'Shaw',
+          creation: '300,200,1000',
+        },
+        {
+          id: 3,
+          email: 'geneva@tete.de',
+          first_name: 'Geneva',
+          last_name: 'Wilson',
+          creation: '350,200,900',
+        },
+        {
+          id: 4,
+          email: 'viewrter@asdfvb.com',
+          first_name: 'Soledare',
+          last_name: 'Takker',
+          creation: '100,400,800',
+        },
+      ],
+      massCreation: [],
+      criteria: '',
+    }
+  },
+
+  methods: {},
+}
+</script>