flaschengeist-frontend/src/components/finanzer/User.vue

<template>
    <div>
        <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>
    </div>
</template>

<script>
    import Table from "./Table";
    import {mapGetters, mapActions} from 'vuex';
    export default {
        name: "User",
        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.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'
            },
            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) {
                this.limit = (newVal.limit / 100).toFixed(2)
                this.autoLock = {value: newVal.autoLock, text: newVal.autoLock? "Aktiviert" : "Deaktiviert"}
            }
        }
    }
</script>

<style scoped>

</style>