From 671b9335c9445f8050bdbc0dd91570719b83aece Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Sat, 16 May 2020 23:24:14 +0200
Subject: [PATCH] finished ##255

---
 src/components/pricelist/PriceList.vue        |  11 +-
 .../vorstand/ManagementNavigation.vue         |  13 +-
 .../vorstand/WorkgroupManagement.vue          | 190 ++++++++++++++++++
 src/plugins/routes.js                         |  12 +-
 src/router/index.js                           |   5 +
 src/store/index.js                            |   4 +-
 src/store/modules/workgroupManagement.js      | 120 +++++++++++
 7 files changed, 346 insertions(+), 9 deletions(-)
 create mode 100644 src/components/vorstand/WorkgroupManagement.vue
 create mode 100644 src/store/modules/workgroupManagement.js

diff --git a/src/components/pricelist/PriceList.vue b/src/components/pricelist/PriceList.vue
index 62c361d..299ce75 100644
--- a/src/components/pricelist/PriceList.vue
+++ b/src/components/pricelist/PriceList.vue
@@ -1,6 +1,11 @@
 <template>
   <div>
-    <v-data-table :headers="headers" :items="priceList" :search="search" :loading="priceListLoading || typesLoading">
+    <v-data-table
+      :headers="headers"
+      :items="priceList"
+      :search="search"
+      :loading="priceListLoading || typesLoading"
+    >
       <template v-slot:top>
         <v-toolbar flat color="white">
           <v-toolbar-title>Preisliste</v-toolbar-title>
@@ -363,7 +368,7 @@ export default {
       this.closeType()
     },
     deleteType(item) {
-      confirm('Bist du sicher, dass die diese Kategorie entfernen wills?') &&
+      confirm('Bist du sicher, dass du diese Kategorie entfernen willst?') &&
         this.deleteDrinkType({ id: item.id })
     },
     addType() {
@@ -459,7 +464,7 @@ export default {
     computeType() {
       return id => {
         const type = this.types.find(a => {
-           return a.id === id
+          return a.id === id
         })
         return type ? type.name : null
       }
diff --git a/src/components/vorstand/ManagementNavigation.vue b/src/components/vorstand/ManagementNavigation.vue
index e44743d..f2ec3ac 100644
--- a/src/components/vorstand/ManagementNavigation.vue
+++ b/src/components/vorstand/ManagementNavigation.vue
@@ -16,17 +16,26 @@
         Benutzerliste
       </v-list-item-title>
     </v-list-item>
+    <v-list-item link to="/main/management/workgroupmanagement">
+      <v-list-item-icon>
+        <v-icon>{{group}}</v-icon>
+      </v-list-item-icon>
+      <v-list-item-title>
+        Arbeitsgruppen
+      </v-list-item-title>
+    </v-list-item>
   </v-list>
 </template>
 
 <script>
-import { mdiBriefcase, mdiAccountMultiple } from '@mdi/js'
+import { mdiBriefcase, mdiAccountMultiple, mdiAccountGroup } from '@mdi/js'
 export default {
   name: 'ManagementNavigation',
   data() {
     return {
       work: mdiBriefcase,
-      list: mdiAccountMultiple
+      list: mdiAccountMultiple,
+      group: mdiAccountGroup
     }
   }
 }
diff --git a/src/components/vorstand/WorkgroupManagement.vue b/src/components/vorstand/WorkgroupManagement.vue
new file mode 100644
index 0000000..ddb5247
--- /dev/null
+++ b/src/components/vorstand/WorkgroupManagement.vue
@@ -0,0 +1,190 @@
+<template>
+  <div>
+    <v-data-table
+      :headers="header"
+      :items="workgroups"
+      :loading="workgroupLoading"
+      :search="search"
+    >
+      <template v-slot:top>
+        <v-toolbar flat color="white">
+          <v-toolbar-title>Arbeitsgruppen</v-toolbar-title>
+          <v-spacer> </v-spacer>
+          <v-text-field
+            v-model="search"
+            label="Suche Arbeitsgrupp"
+            single-line
+            hide-details
+          >
+            <template v-slot:append>
+              <v-icon>{{ searchIcon }}</v-icon>
+            </template>
+          </v-text-field>
+          <v-dialog v-model="dialog">
+            <template v-slot:activator="{ on }">
+              <v-btn
+                fab
+                x-small
+                color="primary"
+                class="mb-2"
+                v-on="on"
+                style="margin: 5px"
+              >
+                <v-icon>
+                  {{ plusIcon }}
+                </v-icon>
+              </v-btn>
+            </template>
+            <v-card>
+              <v-card-title>
+                <span class="headline">{{ formTitle }}</span>
+              </v-card-title>
+              <v-card-text>
+                <v-container>
+                  <v-text-field
+                    v-model="editedItem.name"
+                    label="Name"
+                    outlined
+                  ></v-text-field>
+                  <v-autocomplete
+                    v-model="editedItem.boss"
+                    label="AG-Leiter"
+                    :items="users"
+                    :item-text="item => item.firstname + ' ' + item.lastname"
+                    item-value="username"
+                    :loading="usersLoading"
+                    outlined
+                    return-object
+                  >
+                  </v-autocomplete>
+                </v-container>
+              </v-card-text>
+              <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="blue darken-1" text @click="close"
+                  >Abbreche</v-btn
+                >
+                <v-btn color="blue darken-1" text @click="save"
+                  >Speichern</v-btn
+                >
+              </v-card-actions>
+            </v-card>
+          </v-dialog>
+        </v-toolbar>
+      </template>
+      <template v-slot:item.boss="{ item }">
+        <div v-if="item.boss != null">
+          {{ item.boss.firstname }} {{ item.boss.lastname }}
+        </div>
+      </template>
+      <template v-slot:item.actions="{ item }">
+        <v-icon small class="mr-2" @click="editItem(item)">
+          {{ editIcon }}
+        </v-icon>
+        <v-icon small class="mr-2" @click="deleteItem(item)">
+          {{ deleteIcon }}
+        </v-icon>
+      </template>
+    </v-data-table>
+  </div>
+</template>
+
+<script>
+import { mdiPencil, mdiMagnify, mdiDelete, mdiPlus } from '@mdi/js'
+import { mapActions, mapGetters } from 'vuex'
+export default {
+  name: 'WorkgroupManagement',
+  data() {
+    return {
+      editIcon: mdiPencil,
+      searchIcon: mdiMagnify,
+      deleteIcon: mdiDelete,
+      plusIcon: mdiPlus,
+      search: null,
+      dialog: false,
+      header: [
+        { text: 'AG-Name', value: 'name' },
+        { text: 'AG-Leiter', value: 'boss' },
+        {
+          text: 'Aktionen',
+          value: 'actions',
+          sortable: false,
+          filterable: false
+        }
+      ],
+      editedItem: {
+        id: -1,
+        username: null,
+        boss: {
+          username: null,
+          firstname: null,
+          lastname: null
+        }
+      },
+      defaultItem: {
+        id: -1,
+        username: null,
+        boss: {
+          name: null,
+          firstname: null,
+          lastname: null
+        }
+      },
+      editedIndex: -1
+    }
+  },
+  methods: {
+    ...mapActions({
+      getAllWorkgroups: 'wm/getAllWorkgroups',
+      setWorkgroup: 'wm/setWorkgroup',
+      updateWorkgroup: 'wm/updateWorkgroup',
+      getAllUsers: 'usermanager/getUsers',
+      deleteWorkgroup: 'wm/deleteWorkgroup'
+    }),
+    editItem(item) {
+      this.editedIndex = item.id
+      this.editedItem = Object.assign({}, item)
+      this.dialog = true
+    },
+    save() {
+      this.editedItem.id === -1
+        ? this.setWorkgroup(this.editedItem)
+        : this.updateWorkgroup(this.editedItem)
+      this.editedItem = Object.assign({}, this.defaultItem)
+      this.close()
+    },
+    close() {
+      this.dialog = false
+      setTimeout(() => {
+        this.editedItem = Object.assign({}, this.defaultItem)
+        this.editedIndex = -1
+      }, 300)
+    },
+    deleteItem(item) {
+      confirm(
+        'Bist du sicher, dass du diese Arbeitsgruppe entfernen willst?'
+      ) && this.deleteWorkgroup(item)
+    }
+  },
+  computed: {
+    ...mapGetters({
+      workgroupLoading: 'wm/workgroupLoading',
+      workgroups: 'wm/workgroups',
+      users: 'usermanager/users',
+      usersLoading: 'usermanager/usersLoading'
+    }),
+    formTitle() {
+      return this.editedIndex === -1
+        ? 'Neue Arbeitsgruppe'
+        : 'Bearbeite Arbeitsgruppe'
+    }
+  },
+  created() {
+    this.getAllWorkgroups()
+    this.getAllUsers()
+    console.log(this.users)
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/plugins/routes.js b/src/plugins/routes.js
index 2ccbc5d..4c3994e 100644
--- a/src/plugins/routes.js
+++ b/src/plugins/routes.js
@@ -1,7 +1,7 @@
 //const main = 'https://192.168.5.128:5000/'
-//const main = 'http://localhost:5000/'
+const main = 'http://localhost:5000/'
 //const main = 'http://192.168.5.118:5000/'
-const main = 'https://groeger-clan.duckdns.org:5000/'
+//const main = 'https://groeger-clan.duckdns.org:5000/'
 
 const url = {
   login: main + 'login',
@@ -10,7 +10,7 @@ const url = {
   pricelist: main + 'pricelist',
   getTypes: main + 'drinkTypes',
   getFinanzerMain: main + 'getFinanzerMain',
-  bar: main + 'bar'
+  bar: main + 'bar',
   barGetUser: main + 'barGetUser',
   barAddAmount: main + 'baradd',
   finanzerAddAmount: main + 'finanzerAddAmount',
@@ -41,6 +41,12 @@ const url = {
       deleteStatus: main + 'um/deleteStatus',
       updateStatusUser: main + 'um/updateStatusUser',
       updateVoting: main + 'um/updateVoting'
+    },
+    wm: {
+      workgroup: main + 'wgm/workgroup',
+      getWorkgroup: main + 'wgm/getWorkgroup',
+      getAllWorkgroups: main + 'wgm/getAllWorkgroups',
+      deleteWorkgroup: main + 'wgm/deleteWorkgroup'
     }
   },
   user: {
diff --git a/src/router/index.js b/src/router/index.js
index fccf75b..fecd282 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -23,6 +23,7 @@ import ManagementNavigation from '@/components/vorstand/ManagementNavigation'
 import GastroNavigation from '@/components/gastro/GastroNavigation'
 import PriceListView from '@/views/contents/PriceListView'
 import UserManager from '@/components/vorstand/UserManager'
+import WorkgroupManagement from "@/components/vorstand/WorkgroupManagement";
 
 Vue.use(VueRouter)
 
@@ -58,6 +59,10 @@ const routes = [
           {
             path: 'usermanager',
             component: UserManager
+          },
+          {
+            path: 'workgroupmanagement',
+            component: WorkgroupManagement
           }
         ]
       },
diff --git a/src/store/index.js b/src/store/index.js
index 7af2bb4..5fc6616 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -9,6 +9,7 @@ import jobs from '@/store/modules/jobs'
 import requestJobs from '@/store/modules/jobRequests'
 import priceList from '@/store/modules/pricelist'
 import usermanager from '@/store/modules/userManager'
+import wm from '@/store/modules/workgroupManagement'
 
 Vue.use(Vuex)
 
@@ -22,6 +23,7 @@ export default new Vuex.Store({
     jobs,
     requestJobs,
     priceList,
-    usermanager
+    usermanager,
+    wm
   }
 })
diff --git a/src/store/modules/workgroupManagement.js b/src/store/modules/workgroupManagement.js
new file mode 100644
index 0000000..e999b00
--- /dev/null
+++ b/src/store/modules/workgroupManagement.js
@@ -0,0 +1,120 @@
+import url from '@/plugins/routes'
+import axios from 'axios'
+
+const state = {
+  workgroupsLoading: false,
+  workgroups: []
+}
+
+const mutations = {
+  setWorkgroups: (state, workgroups) => {
+    state.workgroups = workgroups
+  },
+  updateWorkgroup: (state, workgroup) => {
+    console.log('workgroup is', workgroup)
+    let exists = state.workgroups.find(a => {
+      return a.id === workgroup.id
+    })
+    console.log('exists is', exists)
+    if (exists) {
+      exists.name = workgroup.name
+      exists.boss = workgroup.boss
+    } else {
+      state.workgroups.push(workgroup)
+    }
+  },
+  deleteWorkgroup: (state, workergroup) => {
+    let index = state.workgroups.indexOf(
+      state.workgroups.find(a => {
+        return a.id === workergroup.id
+      })
+    )
+    state.workgroups.splice(index, 1)
+  },
+  setWorkgroupLoading: (state, value) => {
+    state.workgroupsLoading = value
+  }
+}
+
+const actions = {
+  async getAllWorkgroups({ commit, rootState, dispatch }) {
+    try {
+      commit('setWorkgroupLoading', true)
+      const response = await axios.get(url.vorstand.wm.getAllWorkgroups, {
+        headers: { Token: rootState.login.user.accessToken }
+      })
+      commit('setWorkgroups', response.data)
+      commit('setWorkgroupLoading', false)
+      dispatch('getLifeTime', null, { root: true })
+    } catch (e) {
+      commit('setWorkgroupLoading', false)
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+    }
+  },
+  async setWorkgroup({ commit, rootState, dispatch }, data) {
+    try {
+      commit('setWorkgroupLoading', true)
+      const response = await axios.put(
+        url.vorstand.wm.workgroup,
+        { ...data },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
+      commit('updateWorkgroup', response.data)
+      commit('setWorkgroupLoading', false)
+      dispatch('getLifeTime', null, { root: true })
+    } catch (e) {
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+    }
+  },
+  async updateWorkgroup({ commit, rootState, dispatch }, data) {
+    try {
+      commit('setWorkgroupLoading', true)
+      const repsonse = await axios.post(
+        url.vorstand.wm.workgroup,
+        { ...data },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
+      commit('updateWorkgroup', repsonse.data)
+      commit('setWorkgroupLoading', false)
+      dispatch('getLifeTime', null, { root: true })
+    } catch (e) {
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+    }
+  },
+  async deleteWorkgroup({ commit, rootState, dispatch }, data) {
+    try {
+      commit('setWorkgroupLoading', true)
+      await axios.post(
+        url.vorstand.wm.deleteWorkgroup,
+        { ...data },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
+      commit('deleteWorkgroup', data)
+      commit('setWorkgroupLoading', false)
+      dispatch('getLifeTime', null, { root: true })
+    } catch (e) {
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+    }
+  }
+}
+
+const getters = {
+  workgroups: state => {
+    return state.workgroups
+  },
+  workgroupLoading: state => {
+    return state.workgroupsLoading
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters
+}