354 lines
9.5 KiB
Vue
354 lines
9.5 KiB
Vue
<template>
|
|
<v-content v-if="activeUser">
|
|
<v-toolbar tile>
|
|
<v-toolbar-title>{{ activeUser.lastname }}, {{ activeUser.firstname }}</v-toolbar-title>
|
|
<v-spacer />
|
|
<v-toolbar-items>
|
|
<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="errorMail">
|
|
<v-alert dense :type="computeError(errorMail)">
|
|
{{
|
|
errorMessage(errorMail)
|
|
}}
|
|
</v-alert>
|
|
</v-card>
|
|
</v-expand-transition>
|
|
<v-card style="margin-top: 3px;">
|
|
<v-card-title>Konfiguration</v-card-title>
|
|
<v-card-text>
|
|
<v-form style="margin-left: 15px; margin-right: 15px">
|
|
<v-row>
|
|
<v-col>
|
|
<v-label>Status:</v-label>
|
|
</v-col>
|
|
<v-col>
|
|
<v-chip
|
|
outlined
|
|
:text-color="getLockedColor(activeUser.locked)"
|
|
>{{ activeUser.locked ? 'Gesperrt' : 'nicht Gesperrt' }}</v-chip>
|
|
</v-col>
|
|
<v-col>
|
|
<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;" />
|
|
<v-row>
|
|
<v-col>
|
|
<v-text-field
|
|
:rules="[isNumber]"
|
|
label="Betrag des Sperrlimits in € (EURO)"
|
|
v-model="limit"
|
|
></v-text-field>
|
|
</v-col>
|
|
<v-col>
|
|
<v-select
|
|
return-object
|
|
v-model="autoLock"
|
|
label="Automatische Sperre"
|
|
:items="[
|
|
{ value: true, text: 'Aktiviert' },
|
|
{ value: false, text: 'Deaktiviert' }
|
|
]"
|
|
item-text="text"
|
|
item-value="value"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-btn
|
|
block
|
|
@click="
|
|
saveConfig({
|
|
user: activeUser,
|
|
limit: limit,
|
|
autoLock: autoLock.value
|
|
})
|
|
"
|
|
>Speichern</v-btn>
|
|
</v-row>
|
|
</v-form>
|
|
</v-card-text>
|
|
</v-card>
|
|
<v-card style="margin-top: 3px;">
|
|
<v-card-title>Geld transferieren</v-card-title>
|
|
<v-card-text>
|
|
<v-form style="margin-left: 15px; margin-right: 15px">
|
|
<v-row>
|
|
<v-col>
|
|
<v-text-field :rules="[isNumber]" label="Betrag" v-model="amount"></v-text-field>
|
|
</v-col>
|
|
<v-col>
|
|
<v-select
|
|
return-object
|
|
v-model="type"
|
|
label="Typ"
|
|
:items="[
|
|
{ value: 'amount', text: 'Schulden' },
|
|
{ value: 'credit', text: 'Guthaben' }
|
|
]"
|
|
item-text="text"
|
|
item-value="value"
|
|
></v-select>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col>
|
|
<v-select
|
|
return-object
|
|
v-model="selectedYear"
|
|
label="Jahr"
|
|
:items="selectYears"
|
|
item-text="text"
|
|
item-value="value"
|
|
></v-select>
|
|
</v-col>
|
|
<v-col>
|
|
<v-select
|
|
return-object
|
|
v-model="selectedMonth"
|
|
label="Monat"
|
|
:items="months"
|
|
item-text="text"
|
|
item-value="value"
|
|
></v-select>
|
|
</v-col>
|
|
</v-row>
|
|
</v-form>
|
|
<v-btn block @click="add">Hinzufügen</v-btn>
|
|
</v-card-text>
|
|
</v-card>
|
|
<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="activeUser" v-bind:year="year" />
|
|
<v-container fluid>
|
|
<v-col>
|
|
<v-row>
|
|
<v-col>
|
|
<v-label>Vorjahr:</v-label>
|
|
</v-col>
|
|
<v-col>
|
|
<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>
|
|
<v-label>Gesamt:</v-label>
|
|
</v-col>
|
|
<v-col>
|
|
<v-chip
|
|
outlined
|
|
x-large
|
|
: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>
|
|
</v-row>
|
|
</v-col>
|
|
</v-container>
|
|
</v-card>
|
|
</div>
|
|
</v-content>
|
|
</template>
|
|
|
|
<script>
|
|
import Table from './Table'
|
|
import { mapGetters, mapActions } from 'vuex'
|
|
export default {
|
|
name: 'User',
|
|
props: {
|
|
id: String
|
|
},
|
|
components: { Table },
|
|
data() {
|
|
return {
|
|
isNumber: value => !isNaN(value) || 'Betrag muss eine Zahl sein.',
|
|
limit: null,
|
|
autoLock: null,
|
|
amount: null,
|
|
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',
|
|
'Juli',
|
|
'August',
|
|
'September',
|
|
'Oktober',
|
|
'November',
|
|
'Dezember'
|
|
][new Date().getMonth()]
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.setActiveUser(this.$route.params.id)
|
|
},
|
|
methods: {
|
|
...mapActions({
|
|
addAmount: 'finanzerUsers/addAmount',
|
|
addCredit: 'finanzerUsers/addCredit',
|
|
sendMail: 'finanzerUsers/sendMail',
|
|
doLock: 'finanzerUsers/doLock',
|
|
saveConfig: 'finanzerUsers/saveConfig',
|
|
setActiveUser: 'finanzerUsers/setActiveUser'
|
|
}),
|
|
getLastColor(value) {
|
|
return value < 0 ? 'red' : 'green'
|
|
},
|
|
getAllSum(sum, lastYear) {
|
|
return lastYear + sum
|
|
},
|
|
getLockedColor(value) {
|
|
return value ? 'red' : 'green'
|
|
},
|
|
add() {
|
|
if (this.type.value === 'amount') {
|
|
this.addAmount({
|
|
user: this.activeUser,
|
|
amount: this.amount,
|
|
year: this.selectedYear.value,
|
|
month: this.selectedMonth.value
|
|
})
|
|
}
|
|
if (this.type.value === 'credit') {
|
|
this.addCredit({
|
|
user: this.activeUser,
|
|
credit: this.amount,
|
|
year: this.selectedYear.value,
|
|
month: this.selectedMonth.value
|
|
})
|
|
}
|
|
|
|
this.createDefault()
|
|
},
|
|
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()
|
|
}
|
|
this.selectedMonth = {
|
|
value: new Date().getMonth() + 1,
|
|
text: [
|
|
'Januar',
|
|
'Februar',
|
|
'März',
|
|
'April',
|
|
'Mai',
|
|
'Juni',
|
|
'Juli',
|
|
'August',
|
|
'September',
|
|
'Oktober',
|
|
'November',
|
|
'Dezember'
|
|
][new Date().getMonth()]
|
|
}
|
|
},
|
|
computeError(error) {
|
|
if (error) {
|
|
if (error.error) return 'error'
|
|
else return 'success'
|
|
}
|
|
},
|
|
errorMessage(error) {
|
|
if (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: {
|
|
years() {
|
|
let years = []
|
|
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: {
|
|
activeUser(newVal) {
|
|
// eslint-disable-next-line no-console
|
|
console.log(newVal)
|
|
this.limit = (newVal.limit / 100).toFixed(2)
|
|
this.autoLock = {
|
|
value: newVal.autoLock,
|
|
text: newVal.autoLock ? 'Aktiviert' : 'Deaktiviert'
|
|
}
|
|
},
|
|
id(newVal) {
|
|
// eslint-disable-next-line no-console
|
|
console.log(newVal)
|
|
this.setActiveUser(newVal)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style>
|