finished ##209
This commit is contained in:
		
							parent
							
								
									8c981c705e
								
							
						
					
					
						commit
						7ab0af4119
					
				|  | @ -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 | ||||
|     } | ||||
|   } | ||||
| } | ||||
|  |  | |||
|  | @ -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> | ||||
|  | @ -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' | ||||
|  |  | |||
|  | @ -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 | ||||
|           } | ||||
|         ] | ||||
|       }, | ||||
|  |  | |||
|  | @ -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 | ||||
|   } | ||||
| }) | ||||
|  |  | |||
|  | @ -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 }) | ||||
|     } | ||||
|   } | ||||
| } | ||||
| 
 | ||||
|  |  | |||
|  | @ -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 | ||||
| } | ||||
		Loading…
	
		Reference in New Issue