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

set namespaced in module finanzerUsers.js 

todos: barview
This commit is contained in:
Tim Gröger 2020-01-14 18:20:05 +01:00
parent 398c7d7def
commit 9ba50a429c
6 changed files with 166 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

78
src/components/finanzer/User.vue
View File

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

7
src/store/index.js
View File

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

32
src/store/modules/barUsers.js Normal file
View File

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

59
src/store/modules/users.js → src/store/modules/finanzerUsers.js
View File

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

17
src/views/FinanzerView.vue
View File

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