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

<template>
    <div>
        <v-toolbar tile>
            <v-toolbar-title>{{user.lastname}}, {{user.firstname}}</v-toolbar-title>
        </v-toolbar>
        <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(user.locked)">{{user.locked ? 'Gesperrt': 'nicht Gesperrt'}}</v-chip>
                        </v-col>
                        <v-col>
                            <v-btn @click="lock">{{user.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">Speichern</v-btn>
                    </v-row>
                </v-form>
            </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="user" 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(user.creditList[year][1].last)">
                                    {{(user.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(user.creditList[year][2].sum ,user.creditList[year][1].last))">
                                    {{(getAllSum(user.creditList[year][2].sum ,user.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";
    export default {
        name: "User",
        components: {Table},
        props: {
            user: Object,
        },
        data () {
            return {
                isNumber: value => !isNaN(value) || 'Betrag muss eine Zahl sein.',
                limit: null,
                autoLock: null,

            }
        },
        created() {
            this.limit = (this.user.limit / 100).toFixed(2)
            this.autoLock = {value: this.user.autoLock, text: this.user.autoLock? "Aktiviert" : "Deaktiviert"}
        },
        methods: {
            getLastColor (value) {
                return value < 0 ? 'red' : 'green'
            },
            getAllSum(sum, lastYear) {
                return lastYear + sum
            },
            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})
            }
        },
        computed: {
            years() {
                let years = []
                for (let year in this.user.creditList) {
                    years.unshift(parseInt(year))
                }
                return years
            }
        },
        watch: {
            user(newVal) {
                this.limit = (newVal.limit / 100).toFixed(2)
                this.autoLock = {value: newVal.autoLock, text: newVal.autoLock? "Aktiviert" : "Deaktiviert"}
            }
        }
    }
</script>

<style scoped>

</style>