finish to use Vuex

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) {
+            ...mapActions({
-                this.$emit("add:amount", username, amount)
+                addAmount: 'barUsers/addAmount',
-            },
+                getUsers: 'barUsers/getUsers'
+            }),
             getColor(type) {
                 return type === 'credit' ? 'title green--text' : 'title red--text'
             }
 
         },
         computed: {
-
+            ...mapGetters({users: 'barUsers/users'})
         }
     }
 </script>

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 () {
+            ...mapActions({
-            },
+                getAllUsers: 'barUsers/getAllUsers',
-            hasFocus () {
+                addCreditList: 'barUsers/addCreditList'
-                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
-                        }
-                    })
-            },
             addUser() {
-                this.$emit("add:creditList", this.user)
+                this.addCreditList(this.user)
                 this.user = null
             }
         },
         computed: {
+            ...mapGetters({ allUsers: 'barUsers/allUsers'}),
         }
     }
 </script>

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'
             },

src/plugins/restService.js

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

src/store/modules/barUsers.js

@@ -1,26 +1,109 @@
-//import axios from 'axios';
+import axios from 'axios';
-//import url from '@/plugins/routes';
+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 {
+        try {
-        //     const response = await axios.get(url)
+            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 {

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

src/views/BarView.vue

@@ -2,8 +2,8 @@
     <div>
         <TitleBar/>
         <v-content>
-            <SearchBar @add:creditList="addCreditList"/>
+            <SearchBar/>
-            <CreditLists v-bind:users="users" @add:amount="addAmount"></CreditLists>
+            <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>