Flaschengeist/flaschengeist-frontend
Flaschengeist
/
flaschengeist-frontend
7
0
Fork 1
Code Issues Pull Requests Projects Releases Activity

add search for baruser 

TODO: maybe we can change the filter in finanzerview too
This commit is contained in:
Tim Gröger 2020-01-14 23:10:09 +01:00
parent 1bd0d87034
commit 708f40938a
5 changed files with 206 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

211
src/components/baruser/CreditLists.vue
View File

@ -1,90 +1,116 @@
<template> <template>
<div> <div>
<div v-for="user in users" :key="users.indexOf(user)"> <div v-for="user in users" :key="users.indexOf(user)">
<v-container> <div v-if="isFiltered(user)">
<v-card> <v-container>
<v-list-item> <v-card>
<v-list-item-title class="title">{{user.firstname}} {{user.lastname}}</v-list-item-title> <v-list-item>
</v-list-item> <v-list-item-title class="title"
<v-card-text> >{{ user.firstname }} {{ user.lastname }}</v-list-item-title
<v-row> >
<v-col cols="10"> </v-list-item>
<v-row> <v-card-text>
<v-col> <v-row>
<v-btn <v-col cols="10">
class="creditBtn" <v-row>
block <v-col>
@click="addAmount({username: user.username, amount: 200})" <v-btn
:color="color" class="creditBtn"
:disabled="user.locked" block
>2 €</v-btn> @click="
</v-col> addAmount({ username: user.username, amount: 200 })
<v-col> "
<v-btn :color="color"
class="creditBtn" :disabled="user.locked"
block >2 €</v-btn
@click="addAmount({username: user.username, amount: 100})" >
:color="color" </v-col>
:disabled="user.locked" <v-col>
>1 €</v-btn> <v-btn
</v-col> class="creditBtn"
<v-col> block
<v-btn @click="
class="creditBtn" addAmount({ username: user.username, amount: 100 })
block "
@click="addAmount({username: user.username, amount: 50})" :color="color"
:color="color" :disabled="user.locked"
:disabled="user.locked" >1 €</v-btn
>0,50 €</v-btn> >
</v-col> </v-col>
</v-row> <v-col>
<v-row> <v-btn
<v-col> class="creditBtn"
<v-btn block
class="creditBtn" @click="
block addAmount({ username: user.username, amount: 50 })
@click="addAmount({username:user.username, amount: 40})" "
:color="color" :color="color"
:disabled="user.locked" :disabled="user.locked"
>0,40 €</v-btn> >0,50 €</v-btn
</v-col> >
<v-col> </v-col>
<v-btn </v-row>
class="creditBtn" <v-row>
block <v-col>
@click="addAmount({username: user.username, amount: 20})" <v-btn
:color="color" class="creditBtn"
:disabled="user.locked" block
>0,20 €</v-btn> @click="
</v-col> addAmount({ username: user.username, amount: 40 })
<v-col> "
<v-btn :color="color"
class="creditBtn" :disabled="user.locked"
block >0,40 €</v-btn
@click="addAmount({username: user.username, amount: 10})" >
:color="color" </v-col>
:disabled="user.locked" <v-col>
>0,10 €</v-btn> <v-btn
</v-col> class="creditBtn"
</v-row> block
</v-col> @click="
<v-col align-self="center"> addAmount({ username: user.username, amount: 20 })
<v-row> "
<v-list-item> :color="color"
<v-list-item-action-text :disabled="user.locked"
:class="getColor(user.type)" >0,20 €</v-btn
>{{(user.amount/100).toFixed(2)}} €</v-list-item-action-text> >
</v-list-item> </v-col>
</v-row> <v-col>
</v-col> <v-btn
</v-row> class="creditBtn"
<v-alert block
v-if="user.locked" @click="
type="error" addAmount({ username: user.username, amount: 10 })
>{{user.firstname}} darf nicht mehr anschreiben. {{user.firstname}} sollte sich lieber mal beim Finanzer melden.</v-alert> "
</v-card-text> :color="color"
</v-card> :disabled="user.locked"
</v-container> >0,10 €</v-btn
>
</v-col>
</v-row>
</v-col>
<v-col align-self="center">
<v-row>
<v-list-item>
<v-list-item-action-text :class="getColor(user.type)"
>{{
(user.amount / 100).toFixed(2)
}}
€</v-list-item-action-text
>
</v-list-item>
</v-row>
</v-col>
</v-row>
<v-alert v-if="user.locked" type="error"
>{{ user.firstname }} darf nicht mehr anschreiben.
{{ user.firstname }} sollte sich lieber mal beim Finanzer
melden.</v-alert
>
</v-card-text>
</v-card>
</v-container>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -102,8 +128,6 @@ export default {
}, },
created() { created() {
this.getUsers() this.getUsers()
// eslint-disable-next-line no-console
console.log(this.users)
}, },
methods: { methods: {
...mapActions({ ...mapActions({
@ -112,10 +136,23 @@ export default {
}), }),
getColor(type) { getColor(type) {
return type === 'credit' ? 'title green--text' : 'title red--text' return type === 'credit' ? 'title green--text' : 'title red--text'
},
isFiltered(user) {
try {
return (
user.firstname.toLowerCase().includes(this.filter.toLowerCase()) ||
user.lastname.toLowerCase().includes(this.filter.toLowerCase())
)
} catch (e) {
return true
}
} }
}, },
computed: { computed: {
...mapGetters({ users: 'barUsers/users' }) ...mapGetters({
users: 'barUsers/users',
filter: 'barUsers/filter'
})
} }
} }
</script> </script>

15
src/components/baruser/SearchBar.vue
View File

@ -13,6 +13,7 @@
item-text="fullName" item-text="fullName"
prepend-inner-icon="search" prepend-inner-icon="search"
full-width full-width
:search-input.sync="filter"
/> />
<v-btn text @click="addUser">Hinzufügen</v-btn> <v-btn text @click="addUser">Hinzufügen</v-btn>
</v-toolbar-items> </v-toolbar-items>
@ -28,7 +29,8 @@ export default {
props: {}, props: {},
data() { data() {
return { return {
user: null user: null,
filter: ''
} }
}, },
created() { created() {
@ -37,7 +39,8 @@ export default {
methods: { methods: {
...mapActions({ ...mapActions({
getAllUsers: 'barUsers/getAllUsers', getAllUsers: 'barUsers/getAllUsers',
addCreditList: 'barUsers/addCreditList' addCreditList: 'barUsers/addCreditList',
setFilter: 'barUsers/setFilter'
}), }),
addUser() { addUser() {
this.addCreditList(this.user) this.addCreditList(this.user)
@ -46,9 +49,13 @@ export default {
}, },
computed: { computed: {
...mapGetters({ allUsers: 'barUsers/allUsers' }) ...mapGetters({ allUsers: 'barUsers/allUsers' })
},
watch: {
filter(val) {
this.setFilter(val)
}
} }
} }
</script> </script>
<style scoped> <style scoped></style>
</style>

83
src/components/finanzer/Overview.vue
View File

@ -8,7 +8,7 @@
<v-icon>keyboard_arrow_left</v-icon> <v-icon>keyboard_arrow_left</v-icon>
</v-btn> </v-btn>
<v-list-item> <v-list-item>
<v-list-item-title class="title">{{year}}</v-list-item-title> <v-list-item-title class="title">{{ year }}</v-list-item-title>
</v-list-item> </v-list-item>
<v-btn text icon @click="countYear(true)" :disabled="isActualYear"> <v-btn text icon @click="countYear(true)" :disabled="isActualYear">
<v-icon>keyboard_arrow_right</v-icon> <v-icon>keyboard_arrow_right</v-icon>
@ -17,7 +17,12 @@
<v-spacer /> <v-spacer />
<v-toolbar-items> <v-toolbar-items>
<v-btn text @click="sendMails">Emails senden</v-btn> <v-btn text @click="sendMails">Emails senden</v-btn>
<v-text-field v-model="filter" 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-items>
</v-toolbar> </v-toolbar>
<v-expand-transition> <v-expand-transition>
@ -28,7 +33,7 @@
text text
icon icon
style="margin-right: 5px" style="margin-right: 5px"
@click="errorExpand ? errorExpand = false : errorExpand = true" @click="errorExpand ? (errorExpand = false) : (errorExpand = true)"
> >
<v-icon :class="isExpand(errorExpand)" dense>$expand</v-icon> <v-icon :class="isExpand(errorExpand)" dense>$expand</v-icon>
</v-btn> </v-btn>
@ -40,14 +45,18 @@
:key="errorMails.indexOf(error)" :key="errorMails.indexOf(error)"
dense dense
:type="computeError(error.error)" :type="computeError(error.error)"
>{{errorMessage(error)}}</v-alert> >{{ errorMessage(error) }}</v-alert
>
</div> </div>
</v-expand-transition> </v-expand-transition>
</v-card> </v-card>
</v-expand-transition> </v-expand-transition>
<div v-for="user in users" :key="users.indexOf(user)"> <div v-for="user in users" :key="users.indexOf(user)">
<v-card v-if="user.creditList[year] && isFiltered(user)" style="margin-top: 3px"> <v-card
<v-card-title>{{user.lastname}}, {{user.firstname}}</v-card-title> 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" /> <Table v-bind:user="user" v-bind:year="year" />
<v-container fluid> <v-container fluid>
<v-row align="start" align-content="start"> <v-row align="start" align-content="start">
@ -60,7 +69,10 @@
<v-chip <v-chip
outlined outlined
:text-color="getLastColor(user.creditList[year][1].last)" :text-color="getLastColor(user.creditList[year][1].last)"
>{{(user.creditList[year][1].last / 100).toFixed(2)}}</v-chip> >{{
(user.creditList[year][1].last / 100).toFixed(2)
}}</v-chip
>
</v-col> </v-col>
</v-row> </v-row>
<v-row> <v-row>
@ -71,10 +83,23 @@
<v-chip <v-chip
outlined outlined
x-large x-large
:text-color="getLastColor(getAllSum(user.creditList[year][2].sum ,user.creditList[year][1].last))" :text-color="
getLastColor(
getAllSum(
user.creditList[year][2].sum,
user.creditList[year][1].last
)
)
"
> >
{{(getAllSum(user.creditList[year][2].sum ,user.creditList[year][1].last) / {{
100).toFixed(2)}} (
getAllSum(
user.creditList[year][2].sum,
user.creditList[year][1].last
) / 100
).toFixed(2)
}}
</v-chip> </v-chip>
</v-col> </v-col>
</v-row> </v-row>
@ -85,18 +110,26 @@
<v-label>Status:</v-label> <v-label>Status:</v-label>
</v-col> </v-col>
<v-col> <v-col>
<v-chip <v-chip outlined :text-color="getLockedColor(user.locked)">{{
outlined user.locked ? 'Gesperrt' : 'nicht Gesperrt'
:text-color="getLockedColor(user.locked)" }}</v-chip>
>{{user.locked ? 'Gesperrt': 'nicht Gesperrt'}}</v-chip>
</v-col> </v-col>
</v-row> </v-row>
<v-card outlined> <v-card outlined>
<v-row> <v-row>
<v-card-title class="subtitle-2">Geld transferieren</v-card-title> <v-card-title class="subtitle-2"
>Geld transferieren</v-card-title
>
<v-spacer /> <v-spacer />
<v-btn text icon style="margin-right: 5px" @click="setExpand(user)"> <v-btn
<v-icon :class="isExpand(user.expand)" dense>$expand</v-icon> text
icon
style="margin-right: 5px"
@click="setExpand(user)"
>
<v-icon :class="isExpand(user.expand)" dense
>$expand</v-icon
>
</v-btn> </v-btn>
</v-row> </v-row>
<v-expand-transition> <v-expand-transition>
@ -104,14 +137,21 @@
<v-form style="margin-left: 15px; margin-right: 15px"> <v-form style="margin-left: 15px; margin-right: 15px">
<v-row> <v-row>
<v-col> <v-col>
<v-text-field :rules="[isNumber]" label="Betrag" v-model="amount"></v-text-field> <v-text-field
:rules="[isNumber]"
label="Betrag"
v-model="amount"
></v-text-field>
</v-col> </v-col>
<v-col> <v-col>
<v-select <v-select
return-object return-object
v-model="type" v-model="type"
label="Typ" label="Typ"
:items="[{value: 'amount', text: 'Schulden'}, {value: 'credit', text: 'Guthaben'}]" :items="[
{ value: 'amount', text: 'Schulden' },
{ value: 'credit', text: 'Guthaben' }
]"
item-text="text" item-text="text"
item-value="value" item-value="value"
></v-select> ></v-select>
@ -191,10 +231,7 @@ export default {
} }
} }
}, },
created() { created() {},
// eslint-disable-next-line no-console
console.log(this.getData(this.createYears()))
},
methods: { methods: {
...mapActions({ ...mapActions({
createYears: 'finanzerUsers/createYears', createYears: 'finanzerUsers/createYears',

26
src/store/modules/barUsers.js
View File

@ -3,7 +3,8 @@ import url from '@/plugins/routes'
const state = { const state = {
users: [], users: [],
allUsers: [] allUsers: [],
filter: ''
} }
const mutations = { const mutations = {
@ -16,11 +17,7 @@ const mutations = {
} }
}, },
setUsers: (state, users) => { setUsers: (state, users) => {
// eslint-disable-next-line no-console
console.log(users)
for (let user in users) { for (let user in users) {
// eslint-disable-next-line no-console
console.log(user)
let existuser = state.users.find(a => { let existuser = state.users.find(a => {
return user === a.username return user === a.username
}) })
@ -43,8 +40,6 @@ const mutations = {
}) })
} }
} }
// eslint-disable-next-line no-console
console.log(state.users)
mutations.sortUsers(state) mutations.sortUsers(state)
}, },
sortUsers: state => { sortUsers: state => {
@ -55,6 +50,9 @@ const mutations = {
if (a.firstname < b.firstname) return -1 if (a.firstname < b.firstname) return -1
return 0 return 0
}) })
},
setFilter: (state, filter) => {
state.filter = filter
} }
} }
@ -65,8 +63,6 @@ const actions = {
const response = await axios.get(url.bar, { const response = await axios.get(url.bar, {
headers: { Token: rootState.login.user.accessToken } headers: { Token: rootState.login.user.accessToken }
}) })
// eslint-disable-next-line no-console
console.log(response.data)
commit('setUsers', response.data) commit('setUsers', response.data)
} catch (e) { } catch (e) {
if (e.response) if (e.response)
@ -100,23 +96,20 @@ const actions = {
} }
}, },
async getAllUsers({ commit, rootState, dispatch }) { async getAllUsers({ commit, rootState, dispatch }) {
// eslint-disable-next-line no-console
console.log('hier bin ich')
try { try {
const response = await axios.post( const response = await axios.post(
url.searchUser, url.searchUser,
{ searchString: '' }, { searchString: '' },
{ headers: { Token: rootState.login.user.accessToken } } { headers: { Token: rootState.login.user.accessToken } }
) )
// eslint-disable-next-line no-console
console.log(response)
commit('setAllUsers', response.data) commit('setAllUsers', response.data)
} catch (e) { } catch (e) {
// eslint-disable-next-line no-console
console.log(e)
if (e.response) if (e.response)
if (e.response.data === 401) dispatch('logout', null, { root: true }) if (e.response.data === 401) dispatch('logout', null, { root: true })
} }
},
setFilter({ commit }, data) {
commit('setFilter', data)
} }
} }
@ -126,6 +119,9 @@ const getters = {
}, },
allUsers: state => { allUsers: state => {
return state.allUsers return state.allUsers
},
filter: state => {
return state.filter
} }
} }

16
src/store/modules/finanzerUsers.js
View File

@ -47,11 +47,7 @@ const mutations = {
state.errorMail = null state.errorMail = null
}, },
setUsers: (state, users) => { setUsers: (state, users) => {
// eslint-disable-next-line no-console
console.log('users', users)
for (let user in users) { for (let user in users) {
// eslint-disable-next-line no-console
console.log('user', user)
let list = {} let list = {}
for (let creditList in users[user]['creditList']) { for (let creditList in users[user]['creditList']) {
let amount = mutations.createAmount( let amount = mutations.createAmount(
@ -67,9 +63,6 @@ const mutations = {
let existUser = state.users.find(a => { let existUser = state.users.find(a => {
return a.username === user return a.username === user
}) })
// eslint-disable-next-line no-console
console.log(existUser)
if (existUser) { if (existUser) {
existUser.username = users[user].username existUser.username = users[user].username
existUser.firstname = users[user].firstname existUser.firstname = users[user].firstname
@ -92,9 +85,6 @@ const mutations = {
} }
} }
mutations.sortUsers(state) mutations.sortUsers(state)
// eslint-disable-next-line no-console
console.log(state.users)
}, },
createAmount(creditList) { createAmount(creditList) {
let amount = { let amount = {
@ -240,8 +230,6 @@ const mutations = {
const actions = { const actions = {
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
async getAllUsers({ commit, rootState, dispatch }) { async getAllUsers({ commit, rootState, dispatch }) {
// eslint-disable-next-line no-console
console.log(rootState)
try { try {
const response = await axios.post( const response = await axios.post(
url.searchUser, url.searchUser,
@ -261,12 +249,8 @@ const actions = {
const response = await axios.get(url.getFinanzerMain, { const response = await axios.get(url.getFinanzerMain, {
headers: { Token: rootState.login.user.accessToken } headers: { Token: rootState.login.user.accessToken }
}) })
// eslint-disable-next-line no-console
console.log('response', response.data)
commit('setUsers', response.data) commit('setUsers', response.data)
} catch (err) { } catch (err) {
// eslint-disable-next-line no-console
console.log(err)
if (err.response) if (err.response)
if (err.response.status === 401) if (err.response.status === 401)
dispatch('logout', null, { root: true }) dispatch('logout', null, { root: true })