finish to use Vuex
This commit is contained in:
parent
9ba50a429c
commit
42996d8ad1
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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}) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue