From bb400f29d05842f0fb587182beea10570e71f6b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Sun, 5 Jan 2020 14:17:06 +0100
Subject: [PATCH 1/4] added actions for finanzer to send automaticly emails

some bugfixes
---
 src/components/finanzer/Overview.vue | 31 ++++++++++++++++++++++++++++
 src/components/finanzer/User.vue     | 27 ++++++++++++++++++++++++
 src/plugins/restService.js           | 11 ++++++++--
 src/views/BarView.vue                |  4 ++--
 src/views/FinanzerView.vue           | 22 ++++++++++++++++++--
 5 files changed, 89 insertions(+), 6 deletions(-)

diff --git a/src/components/finanzer/Overview.vue b/src/components/finanzer/Overview.vue
index 3521d18..8c9168f 100644
--- a/src/components/finanzer/Overview.vue
+++ b/src/components/finanzer/Overview.vue
@@ -10,9 +10,26 @@
             </v-toolbar-items>
             <v-spacer></v-spacer>
             <v-toolbar-items>
+                <v-btn text @click="sendMails">Emails senden</v-btn>
                 <v-text-field  v-model="filter" @input="filterUser" style="margin-top: 3px" append-icon="search" outlined></v-text-field>
             </v-toolbar-items>
         </v-toolbar>
+        <v-expand-transition>
+        <v-card style="margin-top: 3px" v-show="emailErrors">
+            <v-row>
+                <v-spacer/>
+                <v-btn text icon style="margin-right: 5px"
+                       @click="errorExpand ? errorExpand = false : errorExpand = true">
+                    <v-icon :class="isExpand(errorExpand)" dense>$expand</v-icon>
+                </v-btn>
+            </v-row>
+                <v-alert v-for="error in emailErrors" :key="emailErrors.indexOf(error)"
+                        dense
+                        :type="computeError(error.error)"
+                        v-show="errorExpand">{{errorMessage(error)}}
+                </v-alert>
+        </v-card>
+        </v-expand-transition>
         <div v-for="user in filteredUsers" :key="filteredUsers.indexOf(user)">
             <v-card v-if="user.creditList[year]"
                     style="margin-top: 3px">
@@ -107,10 +124,13 @@
         components: {Table},
         props: {
             users: Array,
+            emailErrors: Array,
         },
         data () {
             return {
 
+                errorExpand: false,
+
                 year:  new Date().getFullYear(),
                 filter: "",
                 filteredUsers: [],
@@ -196,6 +216,17 @@
             },
             getLockedColor (value) {
                 return value ? 'red' : 'green'
+            },
+            sendMails() {
+                this.$emit("send:mails")
+            },
+            computeError(error) {
+                if (error) return 'error'
+                else return 'success'
+            },
+            errorMessage(error) {
+                if (error.error) return 'Konnte Email an ' + error.user.firstname + ' ' + error.user.lastname + ' nicht senden!'
+                else return 'Email wurde an ' + error.user.firstname + ' ' + error.user.lastname + ' versandt.'
             }
         },
         computed: {
diff --git a/src/components/finanzer/User.vue b/src/components/finanzer/User.vue
index 3b7de68..3330ed2 100644
--- a/src/components/finanzer/User.vue
+++ b/src/components/finanzer/User.vue
@@ -2,7 +2,18 @@
     <div>
         <v-toolbar tile>
             <v-toolbar-title>{{user.lastname}}, {{user.firstname}}</v-toolbar-title>
+            <v-spacer/>
+            <v-toolbar-items>
+                <v-btn @click="sendEmail" text>Email senden</v-btn>
+            </v-toolbar-items>
         </v-toolbar>
+        <v-expand-transition>
+            <v-card style="margin-top: 3px" v-show="emailError">
+                <v-alert dense :type="computeError(emailError)">
+                    {{errorMessage(emailError)}}
+                </v-alert>
+            </v-card>
+        </v-expand-transition>
         <v-card style="margin-top: 3px;">
             <v-card-title>Konfiguration</v-card-title>
             <v-card-text>
@@ -105,6 +116,7 @@
         components: {Table},
         props: {
             user: Object,
+            emailError: null,
         },
         data () {
             return {
@@ -181,6 +193,21 @@
                 this.selectedMonth = {value: new Date().getMonth() + 1, text: ["Januar", "Februar", "März", "April", "Mai", "Juni",
                         "Juli", "August", "September", "Oktober", "November", "Dezember"
                     ][new Date().getMonth()]}
+            },
+            sendEmail() {
+                this.$emit("send:mail", {username: this.user.username})
+            },
+            computeError(error) {
+                if (error) {
+                    if (error.error) return 'error'
+                    else return 'success'
+                }
+            },
+            errorMessage(error) {
+                if (error) {
+                    if (error.error) return 'Konnte Email an ' + error.user.firstname + ' ' + error.user.lastname + ' nicht senden!'
+                    else return 'Email wurde an ' + error.user.firstname + ' ' + error.user.lastname + ' versandt.'
+                }
             }
         },
         computed: {
diff --git a/src/plugins/restService.js b/src/plugins/restService.js
index ebb646f..6ad61c6 100644
--- a/src/plugins/restService.js
+++ b/src/plugins/restService.js
@@ -41,10 +41,17 @@ class Service {
     finanzerAddUser(token, data) {
         return axios.post(this.url+'finanzerAddUser', {...data}, {headers: {Token: token}})
     }
+    finanzerSendAllMail(token) {
+        return axios.get(this.url+"finanzerSendAllMail", {headers: {Token: token}})
+    }
+    finanzerSendOneMail(token, data) {
+        return axios.post(this.url+"finanzerSendOneMail", {...data}, {headers: {Token: token}})
+    }
 }
 
-const httpClient = new Service("http://localhost:5000/")
+//const httpClient = new Service("http://localhost:5000/")
 //const httpClient = new Service("http://192.168.5.118:5000/")
-//const httpClient = new Service("http://groeger-clan.duckdns.org:5000/")
+//const httpClient = new Service("http://192.168.5.128:5000/")
+const httpClient = new Service("http://groeger-clan.duckdns.org:5000/")
 
 export default httpClient
diff --git a/src/views/BarView.vue b/src/views/BarView.vue
index 8d15574..0cfadd3 100644
--- a/src/views/BarView.vue
+++ b/src/views/BarView.vue
@@ -91,8 +91,8 @@
                             firstname: response.data.firstname,
                             lastname: response.data.lastname,
                             locked: response.data.locked,
-                            amount: 0,
-                            type: null
+                            amount: response.data.amount,
+                            type: response.data.type
                         })
                     })
 
diff --git a/src/views/FinanzerView.vue b/src/views/FinanzerView.vue
index 262b6da..5c6d143 100644
--- a/src/views/FinanzerView.vue
+++ b/src/views/FinanzerView.vue
@@ -39,10 +39,12 @@
                 </template>
             </v-navigation-drawer>
             <v-content v-if="!activeUser.username">
-                <Overview v-bind:users="users" @add:amount="addAmount" @add:credit="addCredit"/>
+                <Overview v-bind:users="users" v-bind:emailErrors="errorMails" @add:amount="addAmount" @add:credit="addCredit" @send:mails="sendMails"/>
             </v-content>
             <v-content v-else>
                 <User v-bind:user="activeUser"
+                      v-bind:emailError="errorMail"
+                      @send:mail="sendMail"
                       @add:amount="addAmount" @add:credit="addCredit"
                       @do:lock="doLock" @save:config="saveConfig"/>
             </v-content>
@@ -76,15 +78,19 @@
                     username: null,
                 },
                 allUsers: [],
-                user: null
+                user: null,
+                errorMails: null,
+                errorMail: null,
             }
         },
         methods: {
             test (e) {
                 if (this.activeUser.username === e.username) {
                     this.activeUser = {username: null}
+                    this.errorMail = null
                 } else {
                     this.activeUser = e
+                    this.errorMail = null
                 }
             },
             createAmount(creditList) {
@@ -319,6 +325,18 @@
                         }
                     }
                 })
+            },
+            sendMails() {
+                httpClient.finanzerSendAllMail(this.$store.getters.getToken)
+                .then(response => {
+                    this.errorMails = response.data
+                })
+            },
+            sendMail(data) {
+                httpClient.finanzerSendOneMail(this.$store.getters.getToken, {userId: data.username})
+                .then(response => {
+                    this.errorMail = response.data
+                })
             }
 
         }

From 398c7d7defd1c3a5104666b2a91804e1e68432b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Sun, 5 Jan 2020 23:39:30 +0100
Subject: [PATCH 2/4] start change commandlayout for vuex, FinanzerView.vue is
 ready

next steps: overview, table, user ...
---
 src/components/finanzer/Overview.vue |   9 +-
 src/plugins/restService.js           |   4 +-
 src/plugins/routes.js                |  20 ++
 src/router/index.js                  |  12 +-
 src/store/index.js                   |  86 +-------
 src/store/modules/login.js           |  98 +++++++++
 src/store/modules/users.js           | 274 +++++++++++++++++++++++++
 src/views/FinanzerView.vue           | 287 +--------------------------
 src/views/Login.vue                  |  31 +--
 9 files changed, 433 insertions(+), 388 deletions(-)
 create mode 100644 src/plugins/routes.js
 create mode 100644 src/store/modules/login.js
 create mode 100644 src/store/modules/users.js

diff --git a/src/components/finanzer/Overview.vue b/src/components/finanzer/Overview.vue
index 8c9168f..824c189 100644
--- a/src/components/finanzer/Overview.vue
+++ b/src/components/finanzer/Overview.vue
@@ -2,13 +2,13 @@
     <div>
         <v-toolbar tile>
             <v-toolbar-title>Gesamtübersicht</v-toolbar-title>
-            <v-spacer></v-spacer>
+            <v-spacer/>
             <v-toolbar-items>
                 <v-btn text icon @click="year--"><v-icon>keyboard_arrow_left</v-icon></v-btn>
                 <v-list-item><v-list-item-title class="title">{{year}}</v-list-item-title></v-list-item>
                 <v-btn text icon @click="year++" :disabled="isActualYear"><v-icon>keyboard_arrow_right</v-icon></v-btn>
             </v-toolbar-items>
-            <v-spacer></v-spacer>
+            <v-spacer/>
             <v-toolbar-items>
                 <v-btn text @click="sendMails">Emails senden</v-btn>
                 <v-text-field  v-model="filter" @input="filterUser" style="margin-top: 3px" append-icon="search" outlined></v-text-field>
@@ -119,11 +119,11 @@
 
 <script>
     import Table from "./Table";
+    import { mapGetters } from 'vuex'
     export default {
         name: "Overview",
         components: {Table},
         props: {
-            users: Array,
             emailErrors: Array,
         },
         data () {
@@ -232,7 +232,8 @@
         computed: {
             isActualYear() {
                 return this.year === new Date().getFullYear()
-            }
+            },
+            ...mapGetters(['users'])
         }
 
     }
diff --git a/src/plugins/restService.js b/src/plugins/restService.js
index 6ad61c6..01a694f 100644
--- a/src/plugins/restService.js
+++ b/src/plugins/restService.js
@@ -50,8 +50,8 @@ class Service {
 }
 
 //const httpClient = new Service("http://localhost:5000/")
-//const httpClient = new Service("http://192.168.5.118:5000/")
+const httpClient = new Service("http://192.168.5.118:5000/")
 //const httpClient = new Service("http://192.168.5.128:5000/")
-const httpClient = new Service("http://groeger-clan.duckdns.org:5000/")
+//const httpClient = new Service("http://groeger-clan.duckdns.org:5000/")
 
 export default httpClient
diff --git a/src/plugins/routes.js b/src/plugins/routes.js
new file mode 100644
index 0000000..47ed526
--- /dev/null
+++ b/src/plugins/routes.js
@@ -0,0 +1,20 @@
+const main = 'http://192.168.5.118:5000/';
+
+const url = {
+    login: main + 'login',
+    getFinanzerMain: main + 'getFinanzerMain',
+    bar: main + 'bar',
+    barGetUser: main + 'barGetUser',
+    barAddAmount: main + 'baradd',
+    finanzerAddAmount: main + 'finanzerAddAmount',
+    finanzerAddCredit: main + 'finanzerAddCredit',
+    searchUser: main + 'search',
+    getAllUser: main + 'barGetUsers',
+    lockUser: main + 'finanzerLock',
+    finanzerSetConfig: main + 'finanzerSetConfig',
+    finanzerAddUser: main + 'finanzerAddUser',
+    finanzerSendAllMail: main + 'finanzerSendAllMail',
+    finanzerSendOneMail: main + 'finanzerSendOneMail'
+};
+
+export default url;
diff --git a/src/router/index.js b/src/router/index.js
index 7bea60f..efe673b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -44,24 +44,24 @@ router.beforeEach((to, from, next) => {
   let sites = ['/finanzer', '/bar']
   if (sites.includes(to.fullPath)) {
     if (to.fullPath === '/finanzer') {
-      if (!store.state.user.group.includes('moneymaster')) {
+      if (!store.state.login.user.group.includes('moneymaster')) {
         next('/login')
       }
     }
     if (to.fullPath === '/bar') {
-      if (!store.state.user.group.includes('bar')) {
+      if (!store.state.login.user.group.includes('bar')) {
         next('/login')
       }
     }
-    if (!store.state.user.accessToken) {
+    if (!store.state.login.user.accessToken) {
       next('/login')
     }
   }
   if (to.fullPath === '/login') {
-    if (store.state.user.accessToken) {
-      if (store.state.user.group.includes('moneymaster')) {
+    if (store.state.login.user.accessToken) {
+      if (store.state.login.user.group.includes('moneymaster')) {
         next('/finanzer')
-      } else if (store.state.user.group.includes('bar')) {
+      } else if (store.state.login.user.group.includes('bar')) {
         next('/bar')
       }
 
diff --git a/src/store/index.js b/src/store/index.js
index c62f69d..7cd35ca 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,86 +1,14 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-import router from "@/router";
-import httpClient from "../plugins/restService";
+import Vue from 'vue';
+import Vuex from 'vuex';
+import login from './modules/login';
+import users from './modules/users'
+
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-  state: {
-    user: {
-      username: null,
-      accessToken: null,
-      group: null
-    },
-    loggingIn: false,
-    loginError: null
-  },
-  mutations: {
-    loginStart: state => state.loggingIn = true,
-    loginStop (state, errorMessage){
-      state.loggingIn = false;
-      state.loginError = errorMessage;
-    },
-    updateAccessToken (state, data) {
-      if (typeof(data) === typeof("")) {
-        data = JSON.parse(data)
-      }
-      if (data === null || data === undefined) {
-        state.user.username = null;
-        state.user.accessToken = null;
-        state.user.group = null;
-      } else {
-        this.state.user.username = data.username;
-        state.user.accessToken = data.accessToken;
-        state.user.group = data.group;
-      }
-    },
-    logout (state) {
-      state.user.accessToken = null;
-      state.user.username = null;
-      state.user.group = null;
-    }
-  },
-  actions: {
-    doLogin({ commit }, loginData) {
-      commit('loginStart');
-      httpClient.login(loginData)
-          .then(response => {
-            localStorage.setItem('user', JSON.stringify({ username: response.data.username, accessToken: response.data.token, group: response.data.group}));
-            commit('loginStop', null);
-            commit('updateAccessToken', response.data)
-            if (this.state.user.group.includes('moneymaster')) {
-              router.push('/finanzer');
-            }
-            else if (this.state.user.group.includes('bar')) {
-              router.push('/bar')
-            }
-          })
-          .catch(error => {
-            commit('loginStop', error.response.data.error)
-            commit('updateAccessToken', {username: null, accessToken: null, group: null})
-          })
-    },
-    fetchAccessToken({ commit }) {
-      commit('updateAccessToken', localStorage.getItem('user'))
-    },
-    logout({ commit }) {
-      localStorage.removeItem('user');
-      commit('logout');
-      router.push('/login');
-    },
-    resetLoginError({ commit }) {
-      commit("loginStop")
-    }
-  },
   modules: {
-  },
-  getters: {
-    getGroup: state => {
-      return state.user.group
-    },
-    getToken: state => {
-      return state.user.accessToken
-    }
+    login,
+    users
   }
 })
diff --git a/src/store/modules/login.js b/src/store/modules/login.js
new file mode 100644
index 0000000..fa0eae0
--- /dev/null
+++ b/src/store/modules/login.js
@@ -0,0 +1,98 @@
+import axios from 'axios';
+import router from "@/router";
+import url from '@/plugins/routes'
+
+const state = {
+    user: {
+        username: null,
+        accessToken: null,
+        group: null
+    },
+    loggingIn: false,
+    loginError: null
+};
+
+const mutations = {
+    loginStart: state => state.loggingIn = true,
+    loginStop (state, errorMessage){
+        state.loggingIn = false;
+        state.loginError = errorMessage;
+    },
+    updateAccessToken (state, data) {
+        if (typeof(data) === typeof("")) {
+            data = JSON.parse(data)
+        }
+        if (data === null || data === undefined) {
+            state.user.username = null;
+            state.user.accessToken = null;
+            state.user.group = null;
+        } else {
+            state.user.username = data.username;
+            state.user.accessToken = data.accessToken;
+            state.user.group = data.group;
+        }
+    },
+    logout (state) {
+        state.user.accessToken = null;
+        state.user.username = null;
+        state.user.group = null;
+    }
+};
+
+const actions = {
+    async doLogin({ commit }, loginData) {
+        commit('loginStart');
+        try {
+            const response = await axios.post(url.login, {...loginData})
+            localStorage.setItem('user', JSON.stringify({ username: response.data.username, accessToken: response.data.token, group: response.data.group}));
+            commit('loginStop', null);
+            commit('updateAccessToken', response.data)
+            if (state.user.group.includes('moneymaster')) {
+                router.push('/finanzer');
+            }
+            else if (state.user.group.includes('bar')) {
+                router.push('/bar')
+            }
+
+        } catch (err) {
+            commit('loginStop', err.response.data.error)
+            commit('updateAccessToken', {username: null, accessToken: null, group: null})
+        }
+    },
+    fetchAccessToken({ commit }) {
+        commit('updateAccessToken', localStorage.getItem('user'))
+    },
+    logout({ commit }) {
+        localStorage.removeItem('user');
+        commit('logout');
+        router.push('/login');
+    },
+    resetLoginError({ commit }) {
+        commit("loginStop")
+    }
+};
+
+const getters = {
+    getGroup: state => {
+        return state.user.group
+    },
+    group: state => {
+        return state.user.group
+    },
+    getToken: state => {
+        return state.user.accessToken
+    },
+    token: state => {
+        return state.user.accessToken
+    },
+    loginError: state => {
+        return state.loginError
+    }
+};
+
+export default {
+    state,
+    mutations,
+    actions,
+    getters
+};
diff --git a/src/store/modules/users.js b/src/store/modules/users.js
new file mode 100644
index 0000000..4445785
--- /dev/null
+++ b/src/store/modules/users.js
@@ -0,0 +1,274 @@
+import axios from 'axios';
+// eslint-disable-next-line no-unused-vars
+import url from '@/plugins/routes'
+
+const state = {
+    users: [],
+    activeUser: {
+        username: null,
+    },
+    allUsers: [],
+    user: null,
+    errorMails: null,
+    errorMail: null,
+};
+
+const mutations = {
+    setAllUsers: (state, users) => {
+        state.allUsers = []
+        state.allUsers = users
+        for (let i = 0; i < state.allUsers.length; i++) {
+            state.allUsers[i].fullName = state.allUsers[i].firstname + " " + state.allUsers[i].lastname
+        }
+    },
+    setActiveUser: (state, user) => {
+        if (state.activeUser.username === user.username) {
+            state.activeUser = {username: null}
+        } else {
+            state.activeUser = user
+        }
+        state.errorMail = null
+    },
+    setUsers: (state, users) => {
+        // eslint-disable-next-line no-console
+        console.log('users', users)
+        for (let user in users) {
+            // eslint-disable-next-line no-console
+            console.log('user', user)
+            let list = {}
+            for (let creditList in users[user]['creditList']) {
+                let amount = mutations.createAmount(users[user]['creditList'][creditList])
+                let credit = mutations.createCredit(users[user]['creditList'][creditList])
+                let sum = mutations.createSum(credit, amount)
+                list[creditList] = [{...credit}, {...amount}, {...sum}]
+            }
+
+            let existUser = state.users.find(a => {return a.username === user})
+
+            // eslint-disable-next-line no-console
+            console.log(existUser)
+            if (existUser) {
+                existUser.username = users[user].username
+                existUser.firstname = users[user].firstname
+                existUser.lastname =  users[user].lastname
+                existUser.limit = users[user].limit
+                existUser.locked = users[user].locked
+                existUser.autoLock =  users[user].autoLock
+                existUser.creditList = list
+            } else {
+                state.users.push({
+                    username: users[user].username,
+                    firstname: users[user].firstname,
+                    lastname: users[user].lastname,
+                    limit: users[user].limit,
+                    locked: users[user].locked,
+                    autoLock: users[user].autoLock,
+                    creditList: list,
+                    expand: false
+                })
+            }
+        }
+        mutations.sortUsers(state)
+
+        // eslint-disable-next-line no-console
+        console.log(state.users)
+    },
+    createAmount(creditList) {
+        let amount = {
+            type:'Schulden',
+            jan_amount: 0 - creditList.jan.depts,
+            feb_amount: 0 - creditList.feb.depts,
+            maer_amount: 0 - creditList.maer.depts,
+            apr_amount:0 - creditList.apr.depts,
+            mai_amount: 0 - creditList.mai.depts,
+            jun_amount: 0 - creditList.jun.depts,
+            jul_amount: 0 - creditList.jul.depts,
+            aug_amount: 0 - creditList.aug.depts,
+            sep_amount: 0 - creditList.sep.depts,
+            okt_amount: 0 - creditList.okt.depts,
+            nov_amount: 0 - creditList.nov.depts,
+            dez_amount: 0 - creditList.dez.depts,
+            last: 0 - creditList['last']
+        }
+
+        amount.sum = amount.jan_amount + amount.feb_amount + amount.maer_amount + amount.apr_amount + amount.mai_amount + amount.jun_amount + amount.jul_amount + amount.aug_amount + amount.sep_amount + amount.okt_amount + amount.nov_amount + amount.dez_amount
+        return amount
+    },
+    createCredit(creditList) {
+        let credit = {
+            type:'Guthaben',
+            jan_amount: creditList.jan.credit,
+            feb_amount: creditList.feb.credit,
+            maer_amount: creditList.maer.credit,
+            apr_amount: creditList.apr.credit,
+            mai_amount: creditList.mai.credit,
+            jun_amount: creditList.jun.credit,
+            jul_amount: creditList.jul.credit,
+            aug_amount: creditList.aug.credit,
+            sep_amount: creditList.sep.credit,
+            okt_amount: creditList.okt.credit,
+            nov_amount: creditList.nov.credit,
+            dez_amount: creditList.dez.credit
+        }
+        credit.sum = credit.jan_amount + credit.feb_amount + credit.maer_amount + credit.apr_amount + credit.mai_amount + credit.jun_amount + credit.jul_amount + credit.aug_amount + credit.sep_amount + credit.okt_amount + credit.nov_amount + credit.dez_amount
+        return credit
+    },
+    createSum(credit, amount) {
+        let sum = {
+            type:'Summe',
+            jan_amount: credit.jan_amount + amount.jan_amount,
+            feb_amount: credit.feb_amount + amount.feb_amount,
+            maer_amount: credit.maer_amount + amount.maer_amount,
+            apr_amount: credit.apr_amount + amount.apr_amount,
+            mai_amount: credit.mai_amount + amount.mai_amount,
+            jun_amount: credit.jun_amount + amount.jun_amount,
+            jul_amount: credit.jul_amount + amount.jul_amount,
+            aug_amount: credit.aug_amount + amount.aug_amount,
+            sep_amount: credit.sep_amount + amount.sep_amount,
+            okt_amount: credit.okt_amount + amount.okt_amount,
+            nov_amount: credit.nov_amount + amount.nov_amount,
+            dez_amount: credit.dez_amount + amount.dez_amount,
+        }
+        sum.sum = sum.jan_amount + sum.feb_amount + sum.maer_amount + sum.apr_amount + sum.mai_amount + sum.jun_amount + sum.jul_amount + sum.aug_amount + sum.sep_amount + sum.okt_amount + sum.nov_amount + sum.dez_amount
+        return sum
+    },
+    sortUsers: (state) => {
+        state.users = state.users.sort((a,b) => {
+            if (a.lastname > b.lastname) return 1
+            if (a.lastname < b.lastname) return -1
+            if (a.firstname > b.firstname) return 1
+            if (a.firstname < b.firstname) return -1
+            return 0
+        })
+    },
+    updateUsers: (state, data) => {
+        let index = state.users.indexOf(state.users.find(a => {return a.username === data.username}))
+        if (data.creditLists !== undefined) {
+            let list = {}
+            for (let creditList in data.creditLists) {
+                let amount = mutations.createAmount(data.creditLists[creditList])
+                let credit = mutations.createCredit(data.creditLists[creditList])
+                let sum = mutations.createSum(credit, amount)
+                list[creditList] = [{...credit}, {...amount}, {...sum}]
+            }
+            state.users[index].creditList = list
+        }
+        if (data.locked !== undefined) state.users[index].locked = data.locked
+        if (data.limit !== undefined) state.users[index].limit = data.limit
+        if (data.autoLock !== undefined) state.users[index].autoLock = data.autoLock
+    },
+    setMails: (state, data) => {
+        state.errorMails = data
+    },
+    setMail: (state, data) => {
+        state.errorMail = data
+    }
+
+};
+
+const actions = {
+    // eslint-disable-next-line no-unused-vars
+    async getAllUsers({commit, rootState, dispatch}) {
+        // eslint-disable-next-line no-console
+        console.log(rootState)
+        try {
+            const response = await axios.post(url.searchUser, {searchString: ""}, {headers: {Token: rootState.login.user.accessToken}})
+            commit('setAllUsers', response.data)
+        } catch (err) {
+            // eslint-disable-next-line no-console
+            if (err.response.status === 401) dispatch('logout')
+        }
+    },
+    async getUsers({commit, rootState, dispatch}) {
+        try {
+            const response = await axios.get(url.getFinanzerMain, {headers: {Token: rootState.login.user.accessToken}})
+            // eslint-disable-next-line no-console
+            console.log('response', response.data)
+            commit('setUsers', response.data)
+        } catch (err) {
+            // eslint-disable-next-line no-console
+            console.log(err)
+            if (err.response) if (err.response.status === 401) dispatch('logout')
+        }
+    },
+    setActiveUser({ commit }, user) {
+        commit('setActiveUser', user)
+    },
+    async addAmount({commit, rootState, dispatch}, data) {
+        try {
+            const response = await axios.post(url.finanzerAddAmount, {userId: data.user.username, amount: data.amount * 100, year: data.year, month: data.month}, {headers: {Token: rootState.login.user.accessToken}})
+            const creditLists = {...response.data}
+            delete creditLists.locked
+            commit('updateUsers', {creditLists: creditLists, locked: response.data.locked, username: data.user.username})
+        } catch (err) {
+            if (err.response) if (err.response.status === 401) dispatch('logout')
+        }
+    },
+    async addCredit({commit, rootState, dispatch}, data) {
+        try {
+            const response = await axios.post(url.finanzerAddCredit, {userId: data.user.username, credit: data.credit * 100, year: data.year, month: data.month}, {headers: {Token: rootState.login.user.accessToken}})
+            const creditLists = {...response.data}
+            delete creditLists.locked
+            commit('updateUsers', {creditLists: creditLists, locked: response.data.locked, username: data.user.username})
+        } catch (err) {
+            if (err.response) if (err.response.status === 401) dispatch('logout')
+        }
+    },
+    async doLock({commit, rootState, dispatch}, data) {
+        try {
+            const response = await axios.post(url.lockUser, {userId: data.user.username, locked: data.locked}, {headers: {Token: rootState.login.user.accessToken}})
+            commit('updateUsers', response.data)
+        } catch (e) {
+            if (e.response) if(e.response.status === 401) dispatch('logout')
+        }
+    },
+    async saveConfig({commit, rootState, dispatch}, data) {
+        try {
+            const response = await axios.post(url.finanzerSetConfig, {userId: data.user.username, limit: data.limit * 100, autoLock: data.autoLock}, {headers: {Token: rootState.login.user.accessToken}})
+            commit('updateUsers', response.data)
+        } catch (e) {
+            if (e.response) if(e.response.status === 401) dispatch('logout')
+        }
+    },
+    async addUser({commit, rootState, dispatch}, data) {
+        try {
+            const response = await  axios.post(url.finanzerAddUser, {userId: data.username}, {headers: {Token: rootState.login.user.accessToken}})
+            commit('setUsers', response.data)
+        } catch (e) {
+            if (e.response) if (e.response.status === 401) dispatch('logout')
+        }
+    },
+    async sendMails({commit, rootState, dispatch}) {
+        try {
+            const response = await axios.get(url.finanzerSendAllMail, {headers: {Token: rootState.login.user.accessToken}})
+            commit('setMails', response.data)
+        } catch (e) {
+            if (e.response) if (e.response.status === 401) dispatch('logout')
+        }
+    },
+    async sendMail({commit, rootState, dispatch}, data) {
+        try {
+            const response = await axios.post(url.finanzerSendOneMail, {userId: data.username}, {headers: {Token: rootState.login.user.accessToken}})
+            commit('setMail', response.data)
+        } catch (e) {
+            if (e.response) if (e.response.status === 401) dispatch('logout')
+        }
+    }
+};
+
+const getters = {
+    users: state => { return state.users },
+    activeUser: state => { return state.activeUser },
+    allUsers: state => { return state.allUsers },
+    user: state => { return state.user },
+    errorMails: state => { return state.errorMails },
+    errorMail: state => { return state.errorMail }
+
+};
+
+export default {
+    state,
+    mutations,
+    actions,
+    getters
+}
diff --git a/src/views/FinanzerView.vue b/src/views/FinanzerView.vue
index 5c6d143..4942ae1 100644
--- a/src/views/FinanzerView.vue
+++ b/src/views/FinanzerView.vue
@@ -3,7 +3,7 @@
             <TitleBar/>
             <v-navigation-drawer mini-variant expand-on-hover app clipped permanent overflow>
                 <v-list>
-                    <v-list-item class="title" link @click="test(activeUser)">
+                    <v-list-item class="title" link @click="setActiveUser(activeUser)">
                         <v-list-item-icon>
                             <v-icon>home</v-icon>
                         </v-list-item-icon>
@@ -15,7 +15,7 @@
                 </v-list>
                 <v-divider/>
                 <v-list>
-                    <v-list-item v-for="user in users" v-bind:key="users.indexOf(user)" :class="user.username === activeUser.username ? 'v-list-item--highlighted' : ''" link @click="test(user)">
+                    <v-list-item v-for="user in users" v-bind:key="users.indexOf(user)" :class="user.username === activeUser.username ? 'v-list-item--highlighted' : ''" link @click="setActiveUser(user)">
                         <v-list-item-title>{{user.lastname}}, {{user.firstname}}</v-list-item-title>
                     </v-list-item>
                 </v-list>
@@ -32,7 +32,7 @@
                         <v-list-item>
                             <v-list-item-icon><v-icon>person_add</v-icon></v-list-item-icon>
                             <v-list-item-title>
-                                <v-btn text block @click="addUser">Hinzufügen</v-btn>
+                                <v-btn text block @click="addUser(user)">Hinzufügen</v-btn>
                             </v-list-item-title>
                         </v-list-item>
                     </v-list>
@@ -53,293 +53,26 @@
 
 <script>
     import TitleBar from "@/components/TitleBar";
-    import httpClient from "../plugins/restService";
     import Overview from "../components/finanzer/Overview";
     import User from "../components/finanzer/User";
+    // eslint-disable-next-line no-unused-vars
+    import { mapGetters } from 'vuex';
+    import { mapActions } from 'vuex';
 
     export default {
         name: "FinanzerView",
         components: {User, Overview, TitleBar},
         created() {
-          this.getUser()
-            httpClient.searchUser(this.$store.getters.getToken, {searchString: ""})
-                .then(response => {
-                    this.allUsers = response.data
-
-                    for (let i = 0; i < this.allUsers.length; i++) {
-                        this.allUsers[i].fullName = this.allUsers[i].firstname + " " + this.allUsers[i].lastname
-                    }
-                })
+            this.getAllUsers()
+            this.getUsers()
         },
         data () {
             return {
-                users: [],
-                activeUser: {
-                    username: null,
-                },
-                allUsers: [],
                 user: null,
-                errorMails: null,
-                errorMail: null,
             }
         },
-        methods: {
-            test (e) {
-                if (this.activeUser.username === e.username) {
-                    this.activeUser = {username: null}
-                    this.errorMail = null
-                } else {
-                    this.activeUser = e
-                    this.errorMail = null
-                }
-            },
-            createAmount(creditList) {
-                let amount = {
-                    type:'Schulden',
-                    jan_amount: 0 - creditList.jan.depts,
-                    feb_amount: 0 - creditList.feb.depts,
-                    maer_amount: 0 - creditList.maer.depts,
-                    apr_amount:0 - creditList.apr.depts,
-                    mai_amount: 0 - creditList.mai.depts,
-                    jun_amount: 0 - creditList.jun.depts,
-                    jul_amount: 0 - creditList.jul.depts,
-                    aug_amount: 0 - creditList.aug.depts,
-                    sep_amount: 0 - creditList.sep.depts,
-                    okt_amount: 0 - creditList.okt.depts,
-                    nov_amount: 0 - creditList.nov.depts,
-                    dez_amount: 0 - creditList.dez.depts,
-                    last: 0 - creditList['last']
-                }
-
-                amount.sum = amount.jan_amount + amount.feb_amount + amount.maer_amount + amount.apr_amount + amount.mai_amount + amount.jun_amount + amount.jul_amount + amount.aug_amount + amount.sep_amount + amount.okt_amount + amount.nov_amount + amount.dez_amount
-                return amount
-            },
-            createCredit(creditList) {
-                let credit = {
-                    type:'Guthaben',
-                    jan_amount: creditList.jan.credit,
-                    feb_amount: creditList.feb.credit,
-                    maer_amount: creditList.maer.credit,
-                    apr_amount: creditList.apr.credit,
-                    mai_amount: creditList.mai.credit,
-                    jun_amount: creditList.jun.credit,
-                    jul_amount: creditList.jul.credit,
-                    aug_amount: creditList.aug.credit,
-                    sep_amount: creditList.sep.credit,
-                    okt_amount: creditList.okt.credit,
-                    nov_amount: creditList.nov.credit,
-                    dez_amount: creditList.dez.credit
-                }
-                credit.sum = credit.jan_amount + credit.feb_amount + credit.maer_amount + credit.apr_amount + credit.mai_amount + credit.jun_amount + credit.jul_amount + credit.aug_amount + credit.sep_amount + credit.okt_amount + credit.nov_amount + credit.dez_amount
-                return credit
-            },
-            createSum(credit, amount) {
-                let sum = {
-                    type:'Summe',
-                    jan_amount: credit.jan_amount + amount.jan_amount,
-                    feb_amount: credit.feb_amount + amount.feb_amount,
-                    maer_amount: credit.maer_amount + amount.maer_amount,
-                    apr_amount: credit.apr_amount + amount.apr_amount,
-                    mai_amount: credit.mai_amount + amount.mai_amount,
-                    jun_amount: credit.jun_amount + amount.jun_amount,
-                    jul_amount: credit.jul_amount + amount.jul_amount,
-                    aug_amount: credit.aug_amount + amount.aug_amount,
-                    sep_amount: credit.sep_amount + amount.sep_amount,
-                    okt_amount: credit.okt_amount + amount.okt_amount,
-                    nov_amount: credit.nov_amount + amount.nov_amount,
-                    dez_amount: credit.dez_amount + amount.dez_amount,
-                }
-                sum.sum = sum.jan_amount + sum.feb_amount + sum.maer_amount + sum.apr_amount + sum.mai_amount + sum.jun_amount + sum.jul_amount + sum.aug_amount + sum.sep_amount + sum.okt_amount + sum.nov_amount + sum.dez_amount
-                return sum
-            },
-            getUser() {
-                httpClient.getFinanzerMain(this.$store.getters.getToken)
-                .then(response => {
-                    for (let user in response.data) {
-                        const lastId = this.users.length > 0 ? this.users[this.users.length - 1].id : 0
-                        // eslint-disable-next-line no-unused-vars
-                        let list = {}
-                        for (let creditList in response.data[user]['creditList']) {
-
-                            let amount = this.createAmount(response.data[user]['creditList'][creditList])
-                            let credit = this.createCredit(response.data[user]['creditList'][creditList])
-                            let sum = this.createSum(credit, amount)
-                            list[creditList] = [{...credit}, {...amount}, {...sum}]
-                        }
-                        this.users.push({
-                            id: lastId + 1,
-                            username: response.data[user].username,
-                            firstname: response.data[user].firstname,
-                            lastname: response.data[user].lastname,
-                            limit: response.data[user].limit,
-                            locked: response.data[user].locked,
-                            autoLock: response.data[user].autoLock,
-                            creditList: list,
-                            expand: false,
-                            active: false
-                        })
-                    }})
-                    .catch(error => {
-                        if (error.response) {
-                            if (error.response.status === 401) {
-                                this.$store.dispatch('logout')
-                            }
-                        }
-                        this.users = []
-                    })
-
-                this.users = this.users.sort((a, b) => {
-                    if (a.lastname > b.lastname) return 1
-                    if (a.lastname < b.lastname) return -1
-                    if (a.firstname > b.firstname) return 1
-                    if (a.firstname < b.firstname) return -1
-                    return 0
-                })
-            },
-            addAmount(data) {
-                httpClient.addAmountFinanzer(this.$store.getters.getToken, {userId: data.user.username, amount: data.amount * 100, year: data.year, month: data.month})
-                .then(response => {
-
-                    let user = this.users.find(user => {return user.username === data.user.username})
-                    let index = this.users.indexOf(user)
-                    let list = {}
-                    for (let creditList in response.data) {
-                        if (creditList !== 'locked') {
-                            let amount = this.createAmount(response.data[creditList])
-                            let credit = this.createCredit(response.data[creditList])
-                            let sum = this.createSum(credit, amount)
-                            list[creditList] = [{...credit}, {...amount}, {...sum}]
-                        }
-                    }
-                    this.users[index].creditList = list
-                    this.users[index].locked = response.data.locked
-                })
-                .catch(error => {
-                    if (error.response) {
-                        if (error.response.status === 401) {
-                            this.$store.dispatch('logout')
-                        }
-                    }
-                    this.users = []
-                })
-                this.users.find(a => {return a.username === this.activeUser.username})
-            },
-            addCredit(data) {
-
-                httpClient.addCreditFinanzer(this.$store.getters.getToken, {userId: data.user.username, credit: data.credit * 100, year: data.year, month: data.month})
-                .then(response => {
-
-                    let user = this.users.find(user => {return user.username === data.user.username})
-                    let index = this.users.indexOf(user)
-                    let list = {}
-                    for (let creditList in response.data) {
-                        if (creditList !== 'locked') {
-                            let amount = this.createAmount(response.data[creditList])
-                            let credit = this.createCredit(response.data[creditList])
-                            let sum = this.createSum(credit, amount)
-                            list[creditList] = [{...credit}, {...amount}, {...sum}]
-                        }
-                    }
-                    this.users[index].creditList = list
-                    this.users[index].locked = response.data.locked
-                })
-                .catch(error => {
-                    if (error.response) {
-                        if (error.response.status === 401) {
-                            this.$store.dispatch('logout')
-                        }
-                    }
-                    this.users = []
-                })
-                this.users.find(a => {return a.username === this.activeUser.username})
-            },
-            deactivateAllUser() {
-                for (let user in this.users) {
-                    user.active = false
-                }
-            },
-            doLock(data) {
-                httpClient.lockUser(this.$store.getters.getToken, {userId: data.user.username, locked: data.locked})
-                .then(response => {
-                    let user = this.users.find(user => {return user.username === data.user.username})
-                    let index = this.users.indexOf(user)
-                    this.users[index].locked = response.data.locked
-                })
-                .catch(error => {
-                    if (error.response) {
-                        if (error.response.status === 401) {
-                            this.$store.dispatch('logout')
-                        }
-                    }
-                })
-            },
-            saveConfig(data) {
-                httpClient.finanzerSetConfig(this.$store.getters.getToken, {userId: data.user.username, limit: data.limit * 100, autoLock: data.autoLock})
-                .then(response => {
-                    let user = this.users.find(user => {return user.username === data.user.username})
-                    let index = this.users.indexOf(user)
-                    this.users[index].limit = response.data.limit
-                    this.users[index].autoLock = response.data.autoLock
-                })
-                .catch(error => {
-                    if (error.response) {
-                        if (error.response.status === 401) {
-                            this.$store.dispatch('logout')
-                        }
-                    }
-                })
-            },
-            addUser() {
-                httpClient.finanzerAddUser(this.$store.getters.getToken, {userId: this.user.username})
-                .then(response => {
-                    for (let username in response.data) {
-                        let existUser = this.users.find(a => {return a.username === username})
-                        let list = {}
-                        for (let creditList in response.data[username]['creditList']) {
-                            let amount = this.createAmount(response.data[username]['creditList'][creditList])
-                            let credit = this.createCredit(response.data[username]['creditList'][creditList])
-                            let sum    = this.createSum(credit, amount)
-                            list[creditList] = [{...credit}, {...amount}, {...sum}]
-                        }
-                        if (existUser) {
-                            existUser.firstname = response.data[username].firstname
-                            existUser.lastname = response.data[username].lastname
-                            existUser.limit = response.data[username].limit
-                            existUser.locked = response.data[username].locked
-                            existUser.autoLock = response.data[username].autoLock
-                            existUser.creditList = list
-                        } else {
-                            const lastId = this.users.length > 0 ? this.users[this.users.length - 1].id : 0
-                            this.users.push({
-                                id: lastId + 1,
-                                username: response.data[username].username,
-                                firstname: response.data[username].firstname,
-                                lastname: response.data[username].lastname,
-                                limit: response.data[username].limit,
-                                locked: response.data[username].locked,
-                                autoLock: response.data[username].autoLock,
-                                creditList: list,
-                                expand: false,
-                                active: false
-                            })
-                        }
-                    }
-                })
-            },
-            sendMails() {
-                httpClient.finanzerSendAllMail(this.$store.getters.getToken)
-                .then(response => {
-                    this.errorMails = response.data
-                })
-            },
-            sendMail(data) {
-                httpClient.finanzerSendOneMail(this.$store.getters.getToken, {userId: data.username})
-                .then(response => {
-                    this.errorMail = response.data
-                })
-            }
-
-        }
+        methods: mapActions(['getAllUsers', 'setActiveUser', 'getUsers', 'addAmount', 'addCredit', 'doLock', 'saveConfig', 'addUser', 'sendMails', 'sendMail']),
+        computed: mapGetters(['allUsers', 'activeUser', 'users', 'errorMails', 'errorMail'])
     }
 </script>
 
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 8d68a0e..35bbf8a 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -33,8 +33,8 @@
                                         type="text"
                                         v-model="username"
                                         ref="first"
-                                        @keyup.enter="login"
-                                        @change="resetError"
+                                        @keyup.enter="doLogin({username: username, password: password})"
+                                        @input="resetLoginError"
                                 />
 
                                 <v-text-field
@@ -44,15 +44,15 @@
                                         prepend-icon="lock"
                                         type="password"
                                         v-model="password"
-                                        @keyup.enter="login"
-                                        @change="resetError"
+                                        @keyup.enter="doLogin({username: username, password: password})"
+                                        @input="resetLoginError"
                                 />
                             </v-form>
                         </v-card-text>
-                        <v-alert v-if="loginFail" dense type="error">{{ loginFail }}</v-alert>
+                        <v-alert v-if="loginError" dense type="error">{{ loginError }}</v-alert>
                         <v-card-actions>
                             <v-spacer />
-                            <v-btn @click="login" @submit.prevent="login" color="primary">Login</v-btn>
+                            <v-btn @click="doLogin({username: username, password: password})" @submit.prevent="doLogin({username: username, password: password})" color="primary">Login</v-btn>
                         </v-card-actions>
                     </v-card>
                 </v-col>
@@ -64,6 +64,9 @@
 
 <script>
     import TitleBar from "@/components/TitleBar";
+    // eslint-disable-next-line no-unused-vars
+    import { mapActions } from 'vuex';
+    import { mapGetters } from 'vuex';
     export default {
         name: "Login",
         components: {TitleBar},
@@ -73,20 +76,8 @@
                 password: null
             }
         },
-        methods: {
-            login() {
-                let o = {username: this.username, password: this.password}
-                this.$store.dispatch("doLogin", o)
-                },
-            resetError() {
-                this.$store.dispatch("resetLoginError")
-            }
-        },
-        computed: {
-            loginFail() {
-                return this.$store.state.loginError
-            }
-        }
+        methods: mapActions(['doLogin', 'resetLoginError']),
+        computed: mapGetters(['loginError'])
     }
 </script>
 

From 9ba50a429ca47bd21d0da07963e60ccf4dd81673 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Tue, 14 Jan 2020 18:20:05 +0100
Subject: [PATCH 3/4] set namespaced in module finanzerUsers.js

todos: barview
---
 src/components/finanzer/Overview.vue          | 113 ++++++++----------
 src/components/finanzer/User.vue              |  78 ++++--------
 src/store/index.js                            |   7 +-
 src/store/modules/barUsers.js                 |  32 +++++
 .../modules/{users.js => finanzerUsers.js}    |  59 +++++++--
 src/views/FinanzerView.vue                    |  17 +--
 6 files changed, 166 insertions(+), 140 deletions(-)
 create mode 100644 src/store/modules/barUsers.js
 rename src/store/modules/{users.js => finanzerUsers.js} (88%)

diff --git a/src/components/finanzer/Overview.vue b/src/components/finanzer/Overview.vue
index 824c189..cee5221 100644
--- a/src/components/finanzer/Overview.vue
+++ b/src/components/finanzer/Overview.vue
@@ -4,18 +4,18 @@
             <v-toolbar-title>Gesamtübersicht</v-toolbar-title>
             <v-spacer/>
             <v-toolbar-items>
-                <v-btn text icon @click="year--"><v-icon>keyboard_arrow_left</v-icon></v-btn>
+                <v-btn text icon @click="countYear(false)"><v-icon>keyboard_arrow_left</v-icon></v-btn>
                 <v-list-item><v-list-item-title class="title">{{year}}</v-list-item-title></v-list-item>
-                <v-btn text icon @click="year++" :disabled="isActualYear"><v-icon>keyboard_arrow_right</v-icon></v-btn>
+                <v-btn text icon @click="countYear(true)" :disabled="isActualYear"><v-icon>keyboard_arrow_right</v-icon></v-btn>
             </v-toolbar-items>
             <v-spacer/>
             <v-toolbar-items>
                 <v-btn text @click="sendMails">Emails senden</v-btn>
-                <v-text-field  v-model="filter" @input="filterUser" style="margin-top: 3px" append-icon="search" outlined></v-text-field>
+                <v-text-field  v-model="filter" style="margin-top: 3px" append-icon="search" outlined></v-text-field>
             </v-toolbar-items>
         </v-toolbar>
         <v-expand-transition>
-        <v-card style="margin-top: 3px" v-show="emailErrors">
+        <v-card style="margin-top: 3px" v-show="errorMails">
             <v-row>
                 <v-spacer/>
                 <v-btn text icon style="margin-right: 5px"
@@ -23,15 +23,19 @@
                     <v-icon :class="isExpand(errorExpand)" dense>$expand</v-icon>
                 </v-btn>
             </v-row>
-                <v-alert v-for="error in emailErrors" :key="emailErrors.indexOf(error)"
-                        dense
-                        :type="computeError(error.error)"
-                        v-show="errorExpand">{{errorMessage(error)}}
-                </v-alert>
+            <v-expand-transition>
+                <div v-show="errorExpand">
+                    <v-alert v-for="error in errorMails" :key="errorMails.indexOf(error)"
+                             dense
+                             :type="computeError(error.error)"
+                             >{{errorMessage(error)}}
+                    </v-alert>
+                </div>
+            </v-expand-transition>
         </v-card>
         </v-expand-transition>
-        <div v-for="user in filteredUsers" :key="filteredUsers.indexOf(user)">
-            <v-card v-if="user.creditList[year]"
+        <div v-for="user in users" :key="users.indexOf(user)">
+            <v-card v-if="user.creditList[year] && isFiltered(user)"
                     style="margin-top: 3px">
                 <v-card-title>{{user.lastname}}, {{user.firstname}}</v-card-title>
                 <Table v-bind:user="user" v-bind:year="year"/>
@@ -119,39 +123,21 @@
 
 <script>
     import Table from "./Table";
-    import { mapGetters } from 'vuex'
+    import { mapGetters, mapActions } from 'vuex'
     export default {
         name: "Overview",
         components: {Table},
         props: {
-            emailErrors: Array,
         },
         data () {
             return {
 
                 errorExpand: false,
 
-                year:  new Date().getFullYear(),
                 filter: "",
-                filteredUsers: [],
 
                 amount: null,
                 isNumber: value => !isNaN(value) || 'Betrag muss eine Zahl sein.',
-                years: [],
-                months: [
-                        {value: 1, text: 'Januar'},
-                        {value: 2, text: 'Februar'},
-                        {value: 3, text: 'März'},
-                        {value: 4, text:'April'},
-                        {value: 5, text: 'Mai'},
-                        {value: 6, text: 'Juni'},
-                        {value: 7, text: 'Juli'},
-                        {value: 8, text: 'August'},
-                        {value: 9, text: 'September'},
-                        {value: 10, text: 'Oktober'},
-                        {value: 11, text: 'November'},
-                        {value: 12, text: 'Dezember'}
-                    ],
                 type: {value: 'credit', text: 'Guthaben'},
                 selectedYear: {value: new Date().getFullYear(), text: new Date().getFullYear()},
                 selectedMonth: {value: new Date().getMonth() + 1, text: ["Januar", "Februar", "März", "April", "Mai", "Juni",
@@ -160,21 +146,35 @@
             }
         },
         created() {
-            this.createYears();
-            this.filteredUsers = this.users
+            // eslint-disable-next-line no-console
+            console.log(this.getData(this.createYears()))
 
         },
         methods: {
+            ...mapActions({createYears: 'finanzerUsers/createYears',
+                addAmount: 'finanzerUsers/addAmount',
+                addCredit: 'finanzerUsers/addCredit',
+                countYear: 'finanzerUsers/countYear',
+                sendMails: 'finanzerUsers/sendMails'}),
+            async getData(promise) {
+                return await promise
+            },
             getLastColor (value) {
                 return value < 0 ? 'red' : 'green'
             },
             getAllSum(sum, lastYear) {
                 return lastYear + sum
             },
-            createYears() {
-                for (let year = new Date().getFullYear(); year >= 2000; year--) {
-                    this.years.push({value: year, text: year})
-                }
+            getLockedColor (value) {
+                return value ? 'red' : 'green'
+            },
+            computeError(error) {
+                if (error) return 'error'
+                else return 'success'
+            },
+            errorMessage(error) {
+                if (error.error) return 'Konnte Email an ' + error.user.firstname + ' ' + error.user.lastname + ' nicht senden!'
+                else return 'Email wurde an ' + error.user.firstname + ' ' + error.user.lastname + ' versandt.'
             },
             setExpand(user) {
                 user.expand ? user.expand=false : user.expand=true
@@ -185,20 +185,19 @@
             // eslint-disable-next-line no-unused-vars
             add(user) {
                 if (this.type.value === 'amount') {
-                    this.$emit("add:amount", {user: user, amount: this.amount, year: this.selectedYear.value, month: this.selectedMonth.value})
+                    this.addAmount({user: user, amount: this.amount, year: this.selectedYear.value, month: this.selectedMonth.value})
                 }
                 if (this.type.value === 'credit') {
-                    this.$emit("add:credit", {user: user, credit: this.amount, year: this.selectedYear.value, month: this.selectedMonth.value})
+                    this.addCredit( {user: user, credit: this.amount, year: this.selectedYear.value, month: this.selectedMonth.value})
                 }
 
-                this.createDefault()
+                this.createDefault(this.amount, this.type, this.selectedYear, this.selectedMonth)
 
             },
+            isFiltered(user) {
+              return user.firstname.toLowerCase().includes(this.filter.toLowerCase()) || user.lastname.toLowerCase().includes(this.filter.toLowerCase())
+            },
             createDefault() {
-                // eslint-disable-next-line no-unused-vars
-                let year = new Date().getFullYear()
-                // eslint-disable-next-line no-unused-vars
-                let month = new Date().getMonth()
                 this.amount = null
                 this.type = {value: 'credit', text: 'Guthaben'}
                 this.selectedYear = {value: new Date().getFullYear(), text: new Date().getFullYear()}
@@ -206,34 +205,16 @@
                         "Juli", "August", "September", "Oktober", "November", "Dezember"
                     ][new Date().getMonth()]}
             },
-            filterUser() {
-                if (this.filter === "") {
-                    this.filteredUsers = this.users
-                }
-                this.filteredUsers = [...this.filteredUsers.filter(user => {
-                    return user.firstname.toLowerCase().includes(this.filter.toLowerCase()) || user.lastname.toLowerCase().includes(this.filter.toLowerCase())
-                })]
-            },
-            getLockedColor (value) {
-                return value ? 'red' : 'green'
-            },
-            sendMails() {
-                this.$emit("send:mails")
-            },
-            computeError(error) {
-                if (error) return 'error'
-                else return 'success'
-            },
-            errorMessage(error) {
-                if (error.error) return 'Konnte Email an ' + error.user.firstname + ' ' + error.user.lastname + ' nicht senden!'
-                else return 'Email wurde an ' + error.user.firstname + ' ' + error.user.lastname + ' versandt.'
-            }
         },
         computed: {
             isActualYear() {
                 return this.year === new Date().getFullYear()
             },
-            ...mapGetters(['users'])
+            ...mapGetters({users: 'finanzerUsers/users',
+                errorMails: 'finanzerUsers/errorMails',
+                year: 'finanzerUsers/year',
+                years: 'finanzerUsers/years',
+                months: 'finanzerUsers/months'})
         }
 
     }
diff --git a/src/components/finanzer/User.vue b/src/components/finanzer/User.vue
index 3330ed2..3e0d11a 100644
--- a/src/components/finanzer/User.vue
+++ b/src/components/finanzer/User.vue
@@ -1,16 +1,16 @@
 <template>
     <div>
         <v-toolbar tile>
-            <v-toolbar-title>{{user.lastname}}, {{user.firstname}}</v-toolbar-title>
+            <v-toolbar-title>{{activeUser.lastname}}, {{activeUser.firstname}}</v-toolbar-title>
             <v-spacer/>
             <v-toolbar-items>
-                <v-btn @click="sendEmail" text>Email senden</v-btn>
+                <v-btn @click="sendMail({username: activeUser.username})" text>Email senden</v-btn>
             </v-toolbar-items>
         </v-toolbar>
         <v-expand-transition>
-            <v-card style="margin-top: 3px" v-show="emailError">
-                <v-alert dense :type="computeError(emailError)">
-                    {{errorMessage(emailError)}}
+            <v-card style="margin-top: 3px" v-show="errorMail">
+                <v-alert dense :type="computeError(errorMail)">
+                    {{errorMessage(errorMail)}}
                 </v-alert>
             </v-card>
         </v-expand-transition>
@@ -23,10 +23,10 @@
                             <v-label>Status: </v-label>
                         </v-col>
                         <v-col>
-                            <v-chip outlined :text-color="getLockedColor(user.locked)">{{user.locked ? 'Gesperrt': 'nicht Gesperrt'}}</v-chip>
+                            <v-chip outlined :text-color="getLockedColor(activeUser.locked)">{{activeUser.locked ? 'Gesperrt': 'nicht Gesperrt'}}</v-chip>
                         </v-col>
                         <v-col>
-                            <v-btn @click="lock">{{user.locked ? 'Entperren' : 'Sperren'}}</v-btn>
+                            <v-btn @click="doLock({user: activeUser, locked: !activeUser.locked})">{{activeUser.locked ? 'Entperren' : 'Sperren'}}</v-btn>
                         </v-col>
                     </v-row>
                     <v-divider style="margin-bottom: 15px;"/>
@@ -40,7 +40,7 @@
                         </v-col>
                     </v-row>
                     <v-row>
-                        <v-btn block @click="saveConfig">Speichern</v-btn>
+                        <v-btn block @click="saveConfig({user: activeUser, limit: limit, autoLock: autoLock.value})">Speichern</v-btn>
                     </v-row>
                 </v-form>
             </v-card-text>
@@ -79,7 +79,7 @@
         <div v-for="year in years" :key="years.indexOf(year)">
             <v-card style="margin-top: 3px;">
                 <v-card-title>{{year}}</v-card-title>
-                <Table v-bind:user="user" v-bind:year="year"/>
+                <Table v-bind:user="activeUser" v-bind:year="year"/>
                 <v-container fluid>
                     <v-col>
                         <v-row>
@@ -87,8 +87,8 @@
                                 <v-label>Vorjahr:</v-label>
                             </v-col>
                             <v-col>
-                                <v-chip outlined :text-color="getLastColor(user.creditList[year][1].last)">
-                                    {{(user.creditList[year][1].last / 100).toFixed(2)}}
+                                <v-chip outlined :text-color="getLastColor(activeUser.creditList[year][1].last)">
+                                    {{(activeUser.creditList[year][1].last / 100).toFixed(2)}}
                                 </v-chip>
                             </v-col>
                             <v-col>
@@ -96,8 +96,8 @@
                             </v-col>
                             <v-col>
                                 <v-chip outlined x-large
-                                        :text-color="getLastColor(getAllSum(user.creditList[year][2].sum ,user.creditList[year][1].last))">
-                                    {{(getAllSum(user.creditList[year][2].sum ,user.creditList[year][1].last) /
+                                        :text-color="getLastColor(getAllSum(activeUser.creditList[year][2].sum ,activeUser.creditList[year][1].last))">
+                                    {{(getAllSum(activeUser.creditList[year][2].sum ,activeUser.creditList[year][1].last) /
                                     100).toFixed(2)}}
                                 </v-chip>
                             </v-col>
@@ -111,34 +111,16 @@
 
 <script>
     import Table from "./Table";
+    import {mapGetters, mapActions} from 'vuex';
     export default {
         name: "User",
         components: {Table},
-        props: {
-            user: Object,
-            emailError: null,
-        },
         data () {
             return {
                 isNumber: value => !isNaN(value) || 'Betrag muss eine Zahl sein.',
                 limit: null,
                 autoLock: null,
                 amount: null,
-                selectYears: [],
-                months: [
-                    {value: 1, text: 'Januar'},
-                    {value: 2, text: 'Februar'},
-                    {value: 3, text: 'März'},
-                    {value: 4, text:'April'},
-                    {value: 5, text: 'Mai'},
-                    {value: 6, text: 'Juni'},
-                    {value: 7, text: 'Juli'},
-                    {value: 8, text: 'August'},
-                    {value: 9, text: 'September'},
-                    {value: 10, text: 'Oktober'},
-                    {value: 11, text: 'November'},
-                    {value: 12, text: 'Dezember'}
-                ],
                 type: {value: 'credit', text: 'Guthaben'},
                 selectedYear: {value: new Date().getFullYear(), text: new Date().getFullYear()},
                 selectedMonth: {value: new Date().getMonth() + 1, text: ["Januar", "Februar", "März", "April", "Mai", "Juni",
@@ -148,13 +130,11 @@
             }
         },
         created() {
-            this.limit = (this.user.limit / 100).toFixed(2)
-            this.autoLock = {value: this.user.autoLock, text: this.user.autoLock? "Aktiviert" : "Deaktiviert"}
-            for (let year = new Date().getFullYear(); year >= 2000; year--) {
-                this.selectYears.push({value: year, text: year})
-            }
+            this.limit = (this.activeUser.limit / 100).toFixed(2)
+            this.autoLock = {value: this.activeUser.autoLock, text: this.activeUser.autoLock? "Aktiviert" : "Deaktiviert"}
         },
         methods: {
+            ...mapActions(['finanzerUsers/addAmount', 'finanzerUsers/addCredit', 'finanzerUsers/sendMail', 'finanzerUsers/doLock', 'finanzerUsers/saveConfig']),
             getLastColor (value) {
                 return value < 0 ? 'red' : 'green'
             },
@@ -164,19 +144,12 @@
             getLockedColor (value) {
                 return value ? 'red' : 'green'
             },
-            lock() {
-                this.user.locked = !this.user.locked
-                this.$emit("do:lock", {user: this.user, locked: this.user.locked})
-            },
-            saveConfig() {
-                this.$emit("save:config", {user: this.user, limit: this.limit, autoLock: this.autoLock.value})
-            },
             add() {
                 if (this.type.value === 'amount') {
-                    this.$emit("add:amount", {user: this.user, amount: this.amount, year: this.selectedYear.value, month: this.selectedMonth.value})
+                    this.addAmount( {user: this.activeUser, amount: this.amount, year: this.selectedYear.value, month: this.selectedMonth.value})
                 }
                 if (this.type.value === 'credit') {
-                    this.$emit("add:credit", {user: this.user, credit: this.amount, year: this.selectedYear.value, month: this.selectedMonth.value})
+                    this.addCredit({user: this.activeUser, credit: this.amount, year: this.selectedYear.value, month: this.selectedMonth.value})
                 }
 
                 this.createDefault()
@@ -194,9 +167,6 @@
                         "Juli", "August", "September", "Oktober", "November", "Dezember"
                     ][new Date().getMonth()]}
             },
-            sendEmail() {
-                this.$emit("send:mail", {username: this.user.username})
-            },
             computeError(error) {
                 if (error) {
                     if (error.error) return 'error'
@@ -213,14 +183,18 @@
         computed: {
             years() {
                 let years = []
-                for (let year in this.user.creditList) {
+                for (let year in this.activeUser.creditList) {
                     years.unshift(parseInt(year))
                 }
                 return years
-            }
+            },
+            ...mapGetters({activeUser: 'finanzerUsers/activeUser',
+                errorMail: 'finanzerUsers/errorMail',
+                months: 'finanzerUsers/months',
+                selectYears: 'finanzerUsers/selectYears'})
         },
         watch: {
-            user(newVal) {
+            activeUser(newVal) {
                 this.limit = (newVal.limit / 100).toFixed(2)
                 this.autoLock = {value: newVal.autoLock, text: newVal.autoLock? "Aktiviert" : "Deaktiviert"}
             }
diff --git a/src/store/index.js b/src/store/index.js
index 7cd35ca..d4aa58f 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,14 +1,15 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 import login from './modules/login';
-import users from './modules/users'
-
+import finanzerUsers from './modules/finanzerUsers'
+import barUsers from "@/store/modules/barUsers";
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   modules: {
     login,
-    users
+    finanzerUsers,
+    barUsers
   }
 })
diff --git a/src/store/modules/barUsers.js b/src/store/modules/barUsers.js
new file mode 100644
index 0000000..21485f7
--- /dev/null
+++ b/src/store/modules/barUsers.js
@@ -0,0 +1,32 @@
+//import axios from 'axios';
+//import url from '@/plugins/routes';
+
+const state = {
+    users: null
+};
+
+const mutations = {
+
+};
+
+const actions = {
+    // eslint-disable-next-line no-unused-vars
+    async getUsers({commit, rootState, dispatch}) {
+        // try {
+        //     const response = await axios.get(url)
+        // }
+    }
+
+};
+
+const getters = {
+
+};
+
+export default {
+    namespaced: true,
+    state,
+    mutations,
+    actions,
+    getters
+}
diff --git a/src/store/modules/users.js b/src/store/modules/finanzerUsers.js
similarity index 88%
rename from src/store/modules/users.js
rename to src/store/modules/finanzerUsers.js
index 4445785..9a5de7c 100644
--- a/src/store/modules/users.js
+++ b/src/store/modules/finanzerUsers.js
@@ -11,6 +11,22 @@ const state = {
     user: null,
     errorMails: null,
     errorMail: null,
+    year: new Date().getFullYear(),
+    years: [],
+    months: [
+        {value: 1, text: 'Januar'},
+        {value: 2, text: 'Februar'},
+        {value: 3, text: 'März'},
+        {value: 4, text:'April'},
+        {value: 5, text: 'Mai'},
+        {value: 6, text: 'Juni'},
+        {value: 7, text: 'Juli'},
+        {value: 8, text: 'August'},
+        {value: 9, text: 'September'},
+        {value: 10, text: 'Oktober'},
+        {value: 11, text: 'November'},
+        {value: 12, text: 'Dezember'}
+    ],
 };
 
 const mutations = {
@@ -162,8 +178,16 @@ const mutations = {
     },
     setMail: (state, data) => {
         state.errorMail = data
+    },
+    setYears: (state) => {
+        for (let year = new Date().getFullYear(); year >= 2000; year--) {
+            state.years.push({value: year, text: year})
+        }
+    },
+    setYear: (state, value) => {
+        if(value) state.year++
+        else state.year--
     }
-
 };
 
 const actions = {
@@ -176,7 +200,7 @@ const actions = {
             commit('setAllUsers', response.data)
         } catch (err) {
             // eslint-disable-next-line no-console
-            if (err.response.status === 401) dispatch('logout')
+            if (err.response.status === 401) dispatch('logout', null, {root: true})
         }
     },
     async getUsers({commit, rootState, dispatch}) {
@@ -188,7 +212,7 @@ const actions = {
         } catch (err) {
             // eslint-disable-next-line no-console
             console.log(err)
-            if (err.response) if (err.response.status === 401) dispatch('logout')
+            if (err.response) if (err.response.status === 401) dispatch('logout', null, {root: true})
         }
     },
     setActiveUser({ commit }, user) {
@@ -201,7 +225,7 @@ const actions = {
             delete creditLists.locked
             commit('updateUsers', {creditLists: creditLists, locked: response.data.locked, username: data.user.username})
         } catch (err) {
-            if (err.response) if (err.response.status === 401) dispatch('logout')
+            if (err.response) if (err.response.status === 401) dispatch('logout', null, {root: true})
         }
     },
     async addCredit({commit, rootState, dispatch}, data) {
@@ -211,7 +235,7 @@ const actions = {
             delete creditLists.locked
             commit('updateUsers', {creditLists: creditLists, locked: response.data.locked, username: data.user.username})
         } catch (err) {
-            if (err.response) if (err.response.status === 401) dispatch('logout')
+            if (err.response) if (err.response.status === 401) dispatch('logout', null, {root: true})
         }
     },
     async doLock({commit, rootState, dispatch}, data) {
@@ -219,7 +243,7 @@ const actions = {
             const response = await axios.post(url.lockUser, {userId: data.user.username, locked: data.locked}, {headers: {Token: rootState.login.user.accessToken}})
             commit('updateUsers', response.data)
         } catch (e) {
-            if (e.response) if(e.response.status === 401) dispatch('logout')
+            if (e.response) if(e.response.status === 401) dispatch('logout', null, {root: true})
         }
     },
     async saveConfig({commit, rootState, dispatch}, data) {
@@ -227,7 +251,7 @@ const actions = {
             const response = await axios.post(url.finanzerSetConfig, {userId: data.user.username, limit: data.limit * 100, autoLock: data.autoLock}, {headers: {Token: rootState.login.user.accessToken}})
             commit('updateUsers', response.data)
         } catch (e) {
-            if (e.response) if(e.response.status === 401) dispatch('logout')
+            if (e.response) if(e.response.status === 401) dispatch('logout', null, {root: true})
         }
     },
     async addUser({commit, rootState, dispatch}, data) {
@@ -235,7 +259,7 @@ const actions = {
             const response = await  axios.post(url.finanzerAddUser, {userId: data.username}, {headers: {Token: rootState.login.user.accessToken}})
             commit('setUsers', response.data)
         } catch (e) {
-            if (e.response) if (e.response.status === 401) dispatch('logout')
+            if (e.response) if (e.response.status === 401) dispatch('logout', null, {root: true})
         }
     },
     async sendMails({commit, rootState, dispatch}) {
@@ -243,7 +267,7 @@ const actions = {
             const response = await axios.get(url.finanzerSendAllMail, {headers: {Token: rootState.login.user.accessToken}})
             commit('setMails', response.data)
         } catch (e) {
-            if (e.response) if (e.response.status === 401) dispatch('logout')
+            if (e.response) if (e.response.status === 401) dispatch('logout', null, {root: true})
         }
     },
     async sendMail({commit, rootState, dispatch}, data) {
@@ -251,8 +275,15 @@ const actions = {
             const response = await axios.post(url.finanzerSendOneMail, {userId: data.username}, {headers: {Token: rootState.login.user.accessToken}})
             commit('setMail', response.data)
         } catch (e) {
-            if (e.response) if (e.response.status === 401) dispatch('logout')
+            if (e.response) if (e.response.status === 401) dispatch('logout', null, {root: true})
         }
+    },
+    createYears({commit}) {
+        commit('setYears')
+        return 'hallo'
+    },
+    countYear({commit}, value) {
+        commit('setYear', value)
     }
 };
 
@@ -262,11 +293,17 @@ const getters = {
     allUsers: state => { return state.allUsers },
     user: state => { return state.user },
     errorMails: state => { return state.errorMails },
-    errorMail: state => { return state.errorMail }
+    errorMail: state => { return state.errorMail },
+    years: state => { return state.years },
+    selectYears: state => {return state.years},
+    year: state => { return state.year },
+    months: state => { return state.months},
+
 
 };
 
 export default {
+    namespaced: true,
     state,
     mutations,
     actions,
diff --git a/src/views/FinanzerView.vue b/src/views/FinanzerView.vue
index 4942ae1..34c64c4 100644
--- a/src/views/FinanzerView.vue
+++ b/src/views/FinanzerView.vue
@@ -39,14 +39,10 @@
                 </template>
             </v-navigation-drawer>
             <v-content v-if="!activeUser.username">
-                <Overview v-bind:users="users" v-bind:emailErrors="errorMails" @add:amount="addAmount" @add:credit="addCredit" @send:mails="sendMails"/>
+                <Overview/>
             </v-content>
             <v-content v-else>
-                <User v-bind:user="activeUser"
-                      v-bind:emailError="errorMail"
-                      @send:mail="sendMail"
-                      @add:amount="addAmount" @add:credit="addCredit"
-                      @do:lock="doLock" @save:config="saveConfig"/>
+                <User/>
             </v-content>
         </div>
 </template>
@@ -71,8 +67,13 @@
                 user: null,
             }
         },
-        methods: mapActions(['getAllUsers', 'setActiveUser', 'getUsers', 'addAmount', 'addCredit', 'doLock', 'saveConfig', 'addUser', 'sendMails', 'sendMail']),
-        computed: mapGetters(['allUsers', 'activeUser', 'users', 'errorMails', 'errorMail'])
+        methods: mapActions({ getAllUsers: 'finanzerUsers/getAllUsers',
+            setActiveUser: 'finanzerUsers/setActiveUser',
+            getUsers: 'finanzerUsers/getUsers',
+            finanzerUsers: 'finanzerUsers/addUser'}),
+        computed: mapGetters({users: 'finanzerUsers/users',
+        activeUser: 'finanzerUsers/activeUser',
+        allUsers: 'finanzerUsers/allUsers'})
     }
 </script>
 

From 42996d8ad121a9adbd7fcd1daf278af003a07bcd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Tue, 14 Jan 2020 19:57:45 +0100
Subject: [PATCH 4/4] finish to use Vuex

---
 src/components/baruser/CreditLists.vue | 29 ++++----
 src/components/baruser/SearchBar.vue   | 30 +++-----
 src/components/finanzer/User.vue       |  7 +-
 src/plugins/restService.js             | 57 ---------------
 src/store/modules/barUsers.js          | 97 ++++++++++++++++++++++++--
 src/store/modules/finanzerUsers.js     |  2 +-
 src/views/BarView.vue                  | 77 +-------------------
 7 files changed, 125 insertions(+), 174 deletions(-)
 delete mode 100644 src/plugins/restService.js

diff --git a/src/components/baruser/CreditLists.vue b/src/components/baruser/CreditLists.vue
index d521dfa..4a0fc08 100644
--- a/src/components/baruser/CreditLists.vue
+++ b/src/components/baruser/CreditLists.vue
@@ -11,17 +11,17 @@
                             <v-col cols="10">
                                 <v-row>
                                     <v-col>
-                                        <v-btn class="creditBtn" block @click="addAmount(user.username, 200)"
+                                        <v-btn class="creditBtn" block @click="addAmount({username: user.username, amount: 200})"
                                                :color="color" :disabled="user.locked">2 €
                                         </v-btn>
                                     </v-col>
                                     <v-col>
-                                        <v-btn class="creditBtn" block @click="addAmount(user.username, 100)"
+                                        <v-btn class="creditBtn" block @click="addAmount({username: user.username, amount: 100})"
                                                :color="color" :disabled="user.locked">1 €
                                         </v-btn>
                                     </v-col>
                                     <v-col>
-                                        <v-btn class="creditBtn" block @click="addAmount(user.username, 50)"
+                                        <v-btn class="creditBtn" block @click="addAmount({username: user.username, amount: 50})"
                                                :color="color" :disabled="user.locked">
                                             0,50 €
                                         </v-btn>
@@ -29,19 +29,19 @@
                                 </v-row>
                                 <v-row>
                                     <v-col>
-                                        <v-btn class="creditBtn" block @click="addAmount(user.username, 40)"
+                                        <v-btn class="creditBtn" block @click="addAmount({username:user.username, amount: 40})"
                                                :color="color" :disabled="user.locked">
                                             0,40 €
                                         </v-btn>
                                     </v-col>
                                     <v-col>
-                                        <v-btn class="creditBtn" block @click="addAmount(user.username, 20)"
+                                        <v-btn class="creditBtn" block @click="addAmount({username: user.username, amount: 20})"
                                                :color="color" :disabled="user.locked">
                                             0,20 €
                                         </v-btn>
                                     </v-col>
                                     <v-col>
-                                        <v-btn class="creditBtn" block @click="addAmount(user.username, 10)"
+                                        <v-btn class="creditBtn" block @click="addAmount({username: user.username, amount: 10})"
                                                :color="color" :disabled="user.locked">
                                             0,10 €
                                         </v-btn>
@@ -67,30 +67,35 @@
 </template>
 
 <script>
+    import { mapGetters, mapActions } from 'vuex';
 
     export default {
         name: "CreditLists",
         props: {
-            users: Array
         },
         data () {
             return {
-                color: 'green accent-4'
+                color: 'green accent-4',
+
             }
         },
         created() {
+            this.getUsers()
+            // eslint-disable-next-line no-console
+            console.log(this.users)
         },
         methods: {
-            addAmount(username, amount) {
-                this.$emit("add:amount", username, amount)
-            },
+            ...mapActions({
+                addAmount: 'barUsers/addAmount',
+                getUsers: 'barUsers/getUsers'
+            }),
             getColor(type) {
                 return type === 'credit' ? 'title green--text' : 'title red--text'
             }
 
         },
         computed: {
-
+            ...mapGetters({users: 'barUsers/users'})
         }
     }
 </script>
diff --git a/src/components/baruser/SearchBar.vue b/src/components/baruser/SearchBar.vue
index 1735cbe..14d75e6 100644
--- a/src/components/baruser/SearchBar.vue
+++ b/src/components/baruser/SearchBar.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-    import httpClient from "../../plugins/restService";
+    import { mapGetters, mapActions } from 'vuex';
 
     export default {
         name: "SearchBar",
@@ -22,37 +22,25 @@
         },
         data () {
             return {
-                hover: false,
-                focus: false,
-                item_size: 32,
-                searchString: '',
-                test: [],
-                allUsers: [],
+
                 user: null,
             }
         },
         created() {
-            this.hasFocus()
+            this.getAllUsers()
         },
         methods : {
-            mop () {
-            },
-            hasFocus () {
-                httpClient.searchUser(this.$store.getters.getToken, {searchString: this.searchString})
-                    .then(response => {
-                        this.allUsers = response.data
-
-                        for (let i = 0; i < this.allUsers.length; i++) {
-                            this.allUsers[i].fullName = this.allUsers[i].firstname + " " + this.allUsers[i].lastname
-                        }
-                    })
-            },
+            ...mapActions({
+                getAllUsers: 'barUsers/getAllUsers',
+                addCreditList: 'barUsers/addCreditList'
+            }),
             addUser() {
-                this.$emit("add:creditList", this.user)
+                this.addCreditList(this.user)
                 this.user = null
             }
         },
         computed: {
+            ...mapGetters({ allUsers: 'barUsers/allUsers'}),
         }
     }
 </script>
diff --git a/src/components/finanzer/User.vue b/src/components/finanzer/User.vue
index 3e0d11a..452484a 100644
--- a/src/components/finanzer/User.vue
+++ b/src/components/finanzer/User.vue
@@ -134,7 +134,12 @@
             this.autoLock = {value: this.activeUser.autoLock, text: this.activeUser.autoLock? "Aktiviert" : "Deaktiviert"}
         },
         methods: {
-            ...mapActions(['finanzerUsers/addAmount', 'finanzerUsers/addCredit', 'finanzerUsers/sendMail', 'finanzerUsers/doLock', 'finanzerUsers/saveConfig']),
+            ...mapActions({
+                addAmount: 'finanzerUsers/addAmount',
+                addCredit: 'finanzerUsers/addCredit',
+                sendMail: 'finanzerUsers/sendMail',
+                doLock: 'finanzerUsers/doLock',
+                saveConfig: 'finanzerUsers/saveConfig'}),
             getLastColor (value) {
                 return value < 0 ? 'red' : 'green'
             },
diff --git a/src/plugins/restService.js b/src/plugins/restService.js
deleted file mode 100644
index 01a694f..0000000
--- a/src/plugins/restService.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import axios from 'axios'
-
-class Service {
-    constructor(url) {
-        this.url = url
-    }
-    getFinanzerMain(token) {
-        return axios.get(this.url + "getFinanzerMain", {headers: {Token: token}})
-
-    }
-    login(loginData) {
-        return axios.post(this.url+'login', {...loginData})
-    }
-    getUserBar(token) {
-        return axios.get(this.url+'bar', {headers: {Token: token}})
-    }
-    getOneUserBar(token, data) {
-        return axios.post(this.url+'barGetUser', {...data}, {headers: {Token: token}})
-    }
-    addAmountBar(token, data) {
-        return axios.post(this.url+'baradd', {...data}, {headers: {Token: token}})
-    }
-    addAmountFinanzer(token, data) {
-        return axios.post(this.url+'finanzerAddAmount', {...data}, {headers: {Token: token}})
-    }
-    addCreditFinanzer(token, data) {
-        return axios.post(this.url+'finanzerAddCredit', {...data}, {headers: {Token: token}})
-    }
-    searchUser(token, data) {
-        return axios.post(this.url+'search', {...data}, {headers: {Token: token}})
-    }
-    getAllUser(token) {
-        return axios.get(this.url+'barGetUsers', {headers: {Token: token}})
-    }
-    lockUser(token, data) {
-        return axios.post(this.url+'finanzerLock', {...data}, {headers: {Token: token}})
-    }
-    finanzerSetConfig(token, data) {
-        return axios.post(this.url+'finanzerSetConfig', {...data}, {headers: {Token: token}})
-    }
-    finanzerAddUser(token, data) {
-        return axios.post(this.url+'finanzerAddUser', {...data}, {headers: {Token: token}})
-    }
-    finanzerSendAllMail(token) {
-        return axios.get(this.url+"finanzerSendAllMail", {headers: {Token: token}})
-    }
-    finanzerSendOneMail(token, data) {
-        return axios.post(this.url+"finanzerSendOneMail", {...data}, {headers: {Token: token}})
-    }
-}
-
-//const httpClient = new Service("http://localhost:5000/")
-const httpClient = new Service("http://192.168.5.118:5000/")
-//const httpClient = new Service("http://192.168.5.128:5000/")
-//const httpClient = new Service("http://groeger-clan.duckdns.org:5000/")
-
-export default httpClient
diff --git a/src/store/modules/barUsers.js b/src/store/modules/barUsers.js
index 21485f7..e6b7d1e 100644
--- a/src/store/modules/barUsers.js
+++ b/src/store/modules/barUsers.js
@@ -1,26 +1,109 @@
-//import axios from 'axios';
-//import url from '@/plugins/routes';
+import axios from 'axios';
+import url from '@/plugins/routes';
 
 const state = {
-    users: null
+    users: [],
+    allUsers: []
 };
 
 const mutations = {
+    setAllUsers: (state, users) => {
+        state.allUsers = []
+        state.allUsers = users
+        for (let i = 0; i < state.allUsers.length; i++) {
+            state.allUsers[i].fullName = state.allUsers[i].firstname + " " + state.allUsers[i].lastname
+        }
+    },
+    setUsers: (state, users) => {
+        // eslint-disable-next-line no-console
+        console.log(users)
+        for (let user in users) {
+            // eslint-disable-next-line no-console
+            console.log(user)
+            let existuser = state.users.find(a => {return user === a.username})
+
+            if (existuser) {
+                existuser.sername = users[user].username
+                existuser.firstname = users[user].firstname
+                existuser.lastname = users[user].lastname
+                existuser.locked = users[user].locked
+                existuser.amount = users[user].amount
+                existuser.type = users[user].type
+            } else {
+                state.users.push({
+                    username: users[user].username,
+                    firstname: users[user].firstname,
+                    lastname: users[user].lastname,
+                    locked: users[user].locked,
+                    amount: users[user].amount,
+                    type: users[user].type
+                })
+            }
+        }
+        // eslint-disable-next-line no-console
+        console.log(state.users)
+        mutations.sortUsers(state)
+    },
+    sortUsers: (state) => {
+        state.users = state.users.sort((a,b) => {
+            if (a.lastname > b.lastname) return 1
+            if (a.lastname < b.lastname) return -1
+            if (a.firstname > b.firstname) return 1
+            if (a.firstname < b.firstname) return -1
+            return 0
+        })
+    },
 
 };
 
 const actions = {
     // eslint-disable-next-line no-unused-vars
     async getUsers({commit, rootState, dispatch}) {
-        // try {
-        //     const response = await axios.get(url)
-        // }
+        try {
+            const response = await axios.get(url.bar, {headers: {Token: rootState.login.user.accessToken}})
+            // eslint-disable-next-line no-console
+            console.log(response.data)
+            commit('setUsers', response.data)
+        } catch (e) {
+            if (e.response) if (e.response.status === 401) dispatch('logout', null, {root: true})
+        }
+    },
+    async addAmount({commit, rootState, dispatch}, data) {
+        try {
+            const response = await axios.post(url.barAddAmount, {userId: data.username, amount: data.amount}, {headers: {Token: rootState.login.user.accessToken}})
+            commit('setUsers', {[response.data.username]: response.data})
+        } catch (e) {
+            if (e.response) if (e.response.status === 401) dispatch('logout', null, {root: true})
+        }
+    },
+    async addCreditList({commit, rootState, dispatch}, data) {
+        try {
+            const response = await axios.post(url.barGetUser, {userId: data.username}, {headers: {Token: rootState.login.user.accessToken}})
+            commit('setUsers', {[response.data.username]: response.data})
+        } catch (e) {
+            if (e.response) if (e.response.status === 401) dispatch('logout', null, {root: true})
+        }
+    },
+    async getAllUsers({commit, rootState, dispatch}) {
+        // eslint-disable-next-line no-console
+        console.log('hier bin ich')
+        try {
+            const response = await axios.post(url.searchUser, {searchString: ""}, {headers: {Token: rootState.login.user.accessToken}})
+            // eslint-disable-next-line no-console
+            console.log(response)
+            commit('setAllUsers', response.data)
+        } catch (e) {
+            // eslint-disable-next-line no-console
+            console.log(e)
+            if (e.response) if (e.response.data === 401) dispatch('logout', null, {root: true})
+        }
     }
 
 };
 
 const getters = {
-
+    users: (state) => { return state.users },
+    allUsers: (state) => { return state.allUsers }
 };
 
 export default {
diff --git a/src/store/modules/finanzerUsers.js b/src/store/modules/finanzerUsers.js
index 9a5de7c..f3b50fb 100644
--- a/src/store/modules/finanzerUsers.js
+++ b/src/store/modules/finanzerUsers.js
@@ -200,7 +200,7 @@ const actions = {
             commit('setAllUsers', response.data)
         } catch (err) {
             // eslint-disable-next-line no-console
-            if (err.response.status === 401) dispatch('logout', null, {root: true})
+            if (err.response) if (err.response.status === 401) dispatch('logout', null, {root: true})
         }
     },
     async getUsers({commit, rootState, dispatch}) {
diff --git a/src/views/BarView.vue b/src/views/BarView.vue
index 0cfadd3..8ce1bba 100644
--- a/src/views/BarView.vue
+++ b/src/views/BarView.vue
@@ -2,8 +2,8 @@
     <div>
         <TitleBar/>
         <v-content>
-            <SearchBar @add:creditList="addCreditList"/>
-            <CreditLists v-bind:users="users" @add:amount="addAmount"></CreditLists>
+            <SearchBar/>
+            <CreditLists></CreditLists>
         </v-content>
     </div>
 </template>
@@ -11,7 +11,6 @@
 <script>
     import TitleBar from "@/components/TitleBar";
     import CreditLists from "@/components/baruser/CreditLists";
-    import httpClient from "../plugins/restService";
     // eslint-disable-next-line no-unused-vars
     import axios from "axios";
     import SearchBar from "../components/baruser/SearchBar";
@@ -19,85 +18,13 @@
         name: "BarView",
         components: {SearchBar, CreditLists, TitleBar},
         created() {
-            this.getUser()
         },
         data () {
             return {
-                users: []
             }
         },
         methods: {
-            getUser() {
-                this. users = []
-                httpClient.getUserBar(this.$store.getters.getToken)
-                .then(response => {
-                    for (let user in response.data) {
-                        const lastId = this.users.length > 0 ? this.users[this.users.length - 1].id : 0
-                        this.users.push({
-                            id: lastId + 1,
-                            username: response.data[user].username,
-                            firstname: response.data[user].firstname,
-                            lastname: response.data[user].lastname,
-                            locked: response.data[user].locked,
-                            amount: response.data[user].amount,
-                            type: response.data[user].type
-                        })
-                    }
-                })
-                .catch(error => {
-                    if (error.response) {
-                        if (error.response.status === 401) {
-                            this.$store.dispatch('logout')
-                        }
-                    }
-                    this.users = []
-                })
-                this.users = this.users.sort((a,b) => {
-                    if (a.username > b.username) return 1
-                    if (a.username < b.username) return -1
-                    return 0
-                })
-            },
-            // eslint-disable-next-line no-unused-vars
-            addAmount(username, amount) {
-                httpClient.addAmountBar(this.$store.getters.getToken, {userId: username, amount: amount})
-                .then((response) => {
-                    let user = this.users.find(user => {
-                        return user.username === username ? user : false
-                    })
-                    user.amount = response.data.amount
-                    user.locked = response.data.locked
-                    user.type = response.data.type
-                })
-                .catch(error => {
-                    if (error.response) {
-                        if (error.response.status === 401) {
-                            this.$store.dispatch('logout')
-                        }
-                    }
-                    this.users = []
-                })
-            },
-            addCreditList(user) {
-                if (!this.users.find(user1 => {
-                    return user1.username === user.username
-                })) {
-                    httpClient.getOneUserBar(this.$store.getters.getToken, {userId: user.username})
-                    .then(response => {
-                        const lastId = this.users.length > 0 ? this.users[this.users.length - 1].id : 0
-                        this.users.push({
-                            id: lastId + 1,
-                            username: response.data.username,
-                            firstname: response.data.firstname,
-                            lastname: response.data.lastname,
-                            locked: response.data.locked,
-                            amount: response.data.amount,
-                            type: response.data.type
-                        })
-                    })
 
-                }
-            }
         }
     }
 </script>