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] 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>