set namespaced in module finanzerUsers.js

todos: barview

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)"
+            <v-expand-transition>
-                        dense
+                <div v-show="errorExpand">
-                        :type="computeError(error.error)"
+                    <v-alert v-for="error in errorMails" :key="errorMails.indexOf(error)"
-                        v-show="errorExpand">{{errorMessage(error)}}
+                             dense
-                </v-alert>
+                             :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)">
+        <div v-for="user in users" :key="users.indexOf(user)">
-            <v-card v-if="user.creditList[year]"
+            <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();
+            // eslint-disable-next-line no-console
-            this.filteredUsers = this.users
+            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() {
+            getLockedColor (value) {
-                for (let year = new Date().getFullYear(); year >= 2000; year--) {
+                return value ? 'red' : 'green'
-                    this.years.push({value: year, text: year})
+            },
-                }
+            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'})
         }
 
     }

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-card style="margin-top: 3px" v-show="errorMail">
-                <v-alert dense :type="computeError(emailError)">
+                <v-alert dense :type="computeError(errorMail)">
-                    {{errorMessage(emailError)}}
+                    {{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)">
+                                <v-chip outlined :text-color="getLastColor(activeUser.creditList[year][1].last)">
-                                    {{(user.creditList[year][1].last / 100).toFixed(2)}}
+                                    {{(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))">
+                                        :text-color="getLastColor(getAllSum(activeUser.creditList[year][2].sum ,activeUser.creditList[year][1].last))">
-                                    {{(getAllSum(user.creditList[year][2].sum ,user.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.limit = (this.activeUser.limit / 100).toFixed(2)
-            this.autoLock = {value: this.user.autoLock, text: this.user.autoLock? "Aktiviert" : "Deaktiviert"}
+            this.autoLock = {value: this.activeUser.autoLock, text: this.activeUser.autoLock? "Aktiviert" : "Deaktiviert"}
-            for (let year = new Date().getFullYear(); year >= 2000; year--) {
-                this.selectYears.push({value: year, text: year})
-            }
         },
         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"}
             }

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
   }
 })

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
+}

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,

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"
+                <User/>
-                      v-bind:emailError="errorMail"
-                      @send:mail="sendMail"
-                      @add:amount="addAmount" @add:credit="addCredit"
-                      @do:lock="doLock" @save:config="saveConfig"/>
             </v-content>
         </div>
 </template>
@@ -71,8 +67,13 @@
                 user: null,
             }
         },
-        methods: mapActions(['getAllUsers', 'setActiveUser', 'getUsers', 'addAmount', 'addCredit', 'doLock', 'saveConfig', 'addUser', 'sendMails', 'sendMail']),
+        methods: mapActions({ getAllUsers: 'finanzerUsers/getAllUsers',
-        computed: mapGetters(['allUsers', 'activeUser', 'users', 'errorMails', 'errorMail'])
+            setActiveUser: 'finanzerUsers/setActiveUser',
+            getUsers: 'finanzerUsers/getUsers',
+            finanzerUsers: 'finanzerUsers/addUser'}),
+        computed: mapGetters({users: 'finanzerUsers/users',
+        activeUser: 'finanzerUsers/activeUser',
+        allUsers: 'finanzerUsers/allUsers'})
     }
 </script>