finish to use Vuex

This commit is contained in:
Tim Gröger 2020-01-14 19:57:45 +01:00
parent 9ba50a429c
commit 42996d8ad1
7 changed files with 125 additions and 174 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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