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>
        <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="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,
                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",
                        "Juli", "August", "September", "Oktober", "November", "Dezember"
                    ][new Date().getMonth()]}

            }
        },
        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})
            }
        },
        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})
            },
            add() {
                if (this.type.value === 'amount') {
                    this.$emit("add:amount", {user: this.user, 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.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()]}
            }
        },
        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>