From 7ab0af4119cd3665405d0daf5f2aafe20afadfaa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Tue, 3 Mar 2020 22:29:32 +0100
Subject: [PATCH] finished ##209

---
 .../vorstand/ManagementNavigation.vue         |  13 +-
 src/components/vorstand/UserManager.vue       | 244 ++++++++++++++++++
 src/plugins/routes.js                         |  16 +-
 src/router/index.js                           |   5 +
 src/store/index.js                            |   4 +-
 src/store/modules/user.js                     |  17 +-
 src/store/modules/userManager.js              | 163 ++++++++++++
 7 files changed, 455 insertions(+), 7 deletions(-)
 create mode 100644 src/components/vorstand/UserManager.vue
 create mode 100644 src/store/modules/userManager.js

diff --git a/src/components/vorstand/ManagementNavigation.vue b/src/components/vorstand/ManagementNavigation.vue
index 8db8cf6..e44743d 100644
--- a/src/components/vorstand/ManagementNavigation.vue
+++ b/src/components/vorstand/ManagementNavigation.vue
@@ -8,16 +8,25 @@
         Dienstverwaltung
       </v-list-item-title>
     </v-list-item>
+    <v-list-item link to="/main/management/usermanager">
+      <v-list-item-icon>
+        <v-icon>{{list}}</v-icon>
+      </v-list-item-icon>
+      <v-list-item-title>
+        Benutzerliste
+      </v-list-item-title>
+    </v-list-item>
   </v-list>
 </template>
 
 <script>
-import { mdiBriefcase } from '@mdi/js'
+import { mdiBriefcase, mdiAccountMultiple } from '@mdi/js'
 export default {
   name: 'ManagementNavigation',
   data() {
     return {
-      work: mdiBriefcase
+      work: mdiBriefcase,
+      list: mdiAccountMultiple
     }
   }
 }
diff --git a/src/components/vorstand/UserManager.vue b/src/components/vorstand/UserManager.vue
new file mode 100644
index 0000000..26e5d27
--- /dev/null
+++ b/src/components/vorstand/UserManager.vue
@@ -0,0 +1,244 @@
+<template>
+  <div>
+    <v-dialog v-model="editUser">
+      <v-card>
+        <v-card-title>
+          {{
+            this.editedItem.firstname +
+              ' ' +
+              this.editedItem.lastname +
+              ' bearbeiten'
+          }}
+        </v-card-title>
+        <v-card-text>
+          <v-container>
+            <v-row>
+              <v-col>
+                <v-autocomplete
+                  v-model="editedItem.statusgroup"
+                  label="Status"
+                  outlined
+                  :items="status"
+                  item-value="id"
+                  item-text="name"
+                  return-object
+                  @change="clickItem(editedItem.statusgroup)"
+                >
+                </v-autocomplete>
+              </v-col>
+              <v-col>
+                <v-autocomplete
+                  v-model="editedItem.voting"
+                  label="Stimmrecht"
+                  outlined
+                  :items="[
+                    { value: true, text: 'ja' },
+                    { value: false, text: 'nein' }
+                  ]"
+                  item-text="text"
+                  item-value="value"
+                  :disabled="disableVoting"
+                  return-object
+                />
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn color="primary" text @click="close()">Abbrechen</v-btn>
+          <v-btn color="primary" text @click="save()">Speichern</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    <v-data-table :headers="header" :items="users" :search="search">
+      <template v-slot:top>
+        <v-toolbar flat color="white">
+          <v-toolbar-title>Mitgliederliste</v-toolbar-title>
+          <v-spacer></v-spacer>
+          <v-text-field
+            v-model="search"
+            label="Sucher Mitglied"
+            single-line
+            hide-details
+          >
+            <template v-slot:append>
+              <v-icon>{{ searchIcon }}</v-icon>
+            </template>
+          </v-text-field>
+        </v-toolbar>
+      </template>
+      <template v-slot:item.statusgroup="{ item }">
+        {{ computeStatus(item.statusgroup) }}
+      </template>
+      <template v-slot:item.voting="{ item }">
+        <v-chip small :color="item.voting ? 'green' : 'red'">
+          {{ item.voting ? 'ja' : 'nein' }}
+        </v-chip>
+      </template>
+      <template v-slot:item.actions="{ item }">
+        <v-icon small @click="editItem(item)">{{ editIcon }}</v-icon>
+      </template>
+    </v-data-table>
+    <v-divider />
+    <v-card>
+      <v-card-text>
+        <v-container>
+          <v-row>
+            <v-col>
+              <v-text-field
+                outlined
+                :value="users.length"
+                label="Anzahl aller Mitglieder"
+                readonly
+              />
+            </v-col>
+            <v-col>
+              <v-text-field
+                outlined
+                :value="allVotings"
+                label="Anzahl aller Stimmberechtigten"
+                readonly
+              />
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script>
+import { mdiPencil, mdiMagnify, } from '@mdi/js'
+import { mapActions, mapGetters } from 'vuex'
+export default {
+  name: 'UserManager',
+  data() {
+    return {
+      editIcon: mdiPencil,
+      searchIcon: mdiMagnify,
+      editUser: false,
+      disableVoting: null,
+      search: null,
+      header: [
+        { text: 'Nachname', value: 'lastname' },
+        { text: 'Vorname(n)', value: 'firstname' },
+        { text: 'Status', value: 'statusgroup' },
+        { text: 'Stimmrecht', value: 'voting' },
+        {
+          text: 'Aktionen',
+          value: 'actions',
+          sortable: false,
+          filterable: false
+        }
+      ],
+      editedItem: {
+        id: -1,
+        firstname: null,
+        lastname: null,
+        username: null,
+        statusgroup: {
+          id: -1,
+          name: null
+        },
+        voting: {
+          value: false,
+          text: 'nein'
+        }
+      },
+      defaultItem: {
+        id: -1,
+        username: null,
+        statusgroup: {
+          id: -1,
+          name: null
+        },
+        voting: {
+          value: false,
+          text: 'nein'
+        }
+      }
+    }
+  },
+  methods: {
+    ...mapActions({
+      getUsers: 'usermanager/getUsers',
+      getStatus: 'usermanager/getStatus',
+      updateStatusUser: 'usermanager/updateStatusUser',
+      updateVoting: 'usermanager/updateVoting'
+    }),
+    close() {
+      this.editUser = false
+      setTimeout(() => {
+        this.editedItem = Object.assign({}, this.defaultItem)
+      }, 300)
+    },
+    editItem(item) {
+      console.log('item', item)
+      this.editedItem = Object.assign({}, item)
+      console.log(this.editedItem)
+      this.editedItem.statusgroup = Object.assign(
+        {},
+        this.status.find(a => a.id == item.statusgroup)
+      )
+      this.editedItem.voting = Object.assign({},
+      item.voting ? {value: true, text: 'ja'} : {value: false, text: 'nein'})
+      this.clickItem(this.editedItem.statusgroup)
+      console.log(this.editedItem)
+      this.editUser = true
+    },
+    clickItem(item) {
+      switch (item.id) {
+        case 1:
+          this.editedItem.voting = { value: true, text: 'ja' }
+          this.disableVoting = true
+          break
+        case 2:
+          this.disableVoting = false
+          break
+        case 3:
+          this.disableVoting = true
+          this.editedItem.voting = { value: false, text: 'nein' }
+          break
+        case 4:
+          this.editedItem.voting = { value: false, text: 'nein' }
+          this.disableVoting = true
+          break
+        case 5:
+          this.editedItem.voting = { value: false, text: 'nein' }
+          this.disableVoting = true
+          break
+      }
+    },
+    save() {
+      this.updateStatusUser({username: this.editedItem.username, status: this.editedItem.statusgroup})
+      this.updateVoting({username: this.editedItem.username, voting: this.editedItem.voting.value})
+      this.close()
+    }
+  },
+  computed: {
+    ...mapGetters({
+      users: 'usermanager/users',
+      status: 'usermanager/status'
+    }),
+    computeStatus() {
+      return id => {
+        return this.status.find(a => {
+          return a.id === id
+        }).name
+      }
+    },
+    allVotings() {
+      return this.users.filter(a => {
+        return a.voting
+      }).length
+    }
+  },
+  created() {
+    this.getUsers()
+    this.getStatus()
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/plugins/routes.js b/src/plugins/routes.js
index dce9525..5353996 100644
--- a/src/plugins/routes.js
+++ b/src/plugins/routes.js
@@ -1,10 +1,11 @@
 //const main = 'https://192.168.5.128:5000/'
-const main = 'http://localhost:5000/'
-//const main = 'http://192.168.5.118:5000/'
+//const main = 'http://localhost:5000/'
+const main = 'http://192.168.5.118:5000/'
 //const main = 'https://groeger-clan.duckdns.org:5000/'
 
 const url = {
   login: main + 'login',
+  getUsers: main + 'getUsers',
   pricelist: main + 'pricelist',
   getTypes: main + 'drinkTypes',
   getFinanzerMain: main + 'getFinanzerMain',
@@ -28,6 +29,13 @@ const url = {
       deleteUser: main + 'sm/deleteUser',
       getUser: main + 'sm/getUser',
       lockDay: main + 'sm/lockDay'
+    },
+    um: {
+      setStatus: main + 'um/setStatus',
+      updateStatus: main + 'um/updateStatus',
+      deleteStatus: main + 'um/deleteStatus',
+      updateStatusUser: main + 'um/updateStatusUser',
+      updateVoting: main + 'um/updateVoting'
     }
   },
   user: {
@@ -40,7 +48,9 @@ const url = {
     jobRequests: main + 'user/jobRequests',
     getTransactJobs: main + 'user/getTransactJobs',
     deleteTransactJobs: main + 'user/deleteTransactJob',
-    storno: main + 'user/storno'
+    storno: main + 'user/storno',
+    getAllStatus: main + 'getAllStatus',
+    getStatus: main + 'getStatus'
   },
   barU: {
     storno: main + 'bar/storno'
diff --git a/src/router/index.js b/src/router/index.js
index 2a9774f..1f27c0e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -22,6 +22,7 @@ import PriceList from '@/components/pricelist/PriceList'
 import ManagementNavigation from "@/components/vorstand/ManagementNavigation";
 import GastroNavigation from "@/components/gastro/GastroNavigation";
 import PriceListView from "@/views/contents/PriceListView";
+import UserManager from "@/components/vorstand/UserManager";
 
 Vue.use(VueRouter)
 
@@ -49,6 +50,10 @@ const routes = [
           {
             path: 'servicemanagement',
             component: ServiceManagement
+          },
+          {
+            path: 'usermanager',
+            component: UserManager
           }
         ]
       },
diff --git a/src/store/index.js b/src/store/index.js
index 0398961..7af2bb4 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -8,6 +8,7 @@ import sm from '@/store/modules/serviceManagement'
 import jobs from '@/store/modules/jobs'
 import requestJobs from '@/store/modules/jobRequests'
 import priceList from '@/store/modules/pricelist'
+import usermanager from '@/store/modules/userManager'
 
 Vue.use(Vuex)
 
@@ -20,6 +21,7 @@ export default new Vuex.Store({
     sm,
     jobs,
     requestJobs,
-    priceList
+    priceList,
+    usermanager
   }
 })
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index eb682d9..4036091 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -8,10 +8,14 @@ const state = {
   addLoading: false,
   error: '',
   days: [],
-  message: []
+  message: [],
+  status: []
 }
 
 const mutations = {
+  setStatus: (state, status) => {
+    state.status = status
+  },
   setUser: (state, user) => {
     state.user = user
     let list = {}
@@ -311,6 +315,17 @@ const actions = {
         if (e.response.status === 401) dispatch('logout', null, { root: true })
     }
     commit('updateMessage', { date: data.date, loading: false })
+  },
+  async getStatus({commit, rootState, dispatch }) {
+    try {
+      const response = await axios.post(url.user.getAllStatus, {
+        headers: { Token: rootState.login.user.accessToken }
+      })
+      commit('setStatus', response.data)
+    } catch (e) {
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+    }
   }
 }
 
diff --git a/src/store/modules/userManager.js b/src/store/modules/userManager.js
new file mode 100644
index 0000000..094cf7a
--- /dev/null
+++ b/src/store/modules/userManager.js
@@ -0,0 +1,163 @@
+import url from '@/plugins/routes'
+import axios from 'axios'
+
+const state = {
+  users: [],
+  status: []
+}
+
+const mutations = {
+  setUsers: (state, users) => {
+    state.users = users
+  },
+  setStatus: (state, status) => {
+    state.status = status
+
+  },
+  updateUser: (state, user) => {
+    let exists = state.users.find(a => {
+      return a.username === user.username
+    })
+    if (exists) {
+      exists.firstname = user.firstname
+      exists.lastname = user.lastname
+      exists.mail = user.mail
+      exists.statusgroup = user.statusgroup
+      exists.voting = user.voting
+    } else {
+      state.users.push({
+        username: user.username,
+        firstname: user.firstname,
+        lastname: user.lastname,
+        mail: user.mail,
+        statusgroup: user.statusgroup,
+        voting: user.voting
+      })
+    }
+  },
+  updateStatus: (state, status) => {
+    let exists = state.status.find(a => {
+      return a.id === status.id
+    })
+    if (exists) {
+      exists.name = status.name
+    } else {
+      state.status.push(status)
+    }
+  },
+  deleteStatus: (state, status) => {
+    let index = state.status.indexOf(
+      state.status.find(a => {
+        return a.id === status.id
+      })
+    )
+    state.status.splice(index, 1)
+  }
+}
+
+const actions = {
+  async getUsers({ commit, rootState, dispatch }) {
+    try {
+      const response = await axios.get(url.getUsers, {
+        headers: { Token: rootState.login.user.accessToken }
+      })
+      commit('setUsers', response.data)
+    } catch (e) {
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+    }
+  },
+  async getStatus({ commit, rootState, dispatch }) {
+    try {
+      const response = await axios.get(url.user.getAllStatus, {
+        headers: { Token: rootState.login.user.accessToken }
+      })
+      commit('setStatus', response.data)
+    } catch (e) {
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+    }
+  },
+  async updateStatus({ commit, rootState, dispatch }, data) {
+    try {
+      const response = await axios.post(
+        url.vorstand.um.updateStatus,
+        { ...data },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
+      commit('updateStatus', response.data)
+    } catch (e) {
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+    }
+  },
+  async setStatus({ commit, rootState, dispatch }, data) {
+    try {
+      const response = await axios.post(
+        url.vorstand.um.setStatus,
+        { ...data },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
+      commit('updateStatus', response.data)
+    } catch (e) {
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+    }
+  },
+  async deleteStatus({ commit, rootState, dispatch }, data) {
+    try {
+      await axios.post(
+        url.vorstand.um.deleteStatus,
+        { ...data },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
+      commit('deleteStatus', data)
+    } catch (e) {
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+    }
+  },
+  async updateStatusUser({ commit, rootState, dispatch }, data) {
+    try {
+      const response = await axios.post(
+        url.vorstand.um.updateStatusUser,
+        { ...data },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
+      commit('updateUser', response.data)
+    } catch (e) {
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+    }
+  },
+  async updateVoting({ commit, rootState, dispatch }, data) {
+    try {
+      const response = await axios.post(
+        url.vorstand.um.updateVoting,
+        { ...data },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
+      commit('updateUser', response.data)
+    } catch (e) {
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+    }
+  }
+}
+
+const getters = {
+  users: state => {
+    return state.users
+  },
+  status: state => {
+    return state.status
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters
+}