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

<template>
    <div>
        <v-toolbar tile>
            <v-toolbar-title>Gesamtübersicht</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-toolbar-items>
                <v-btn text icon @click="year--"><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-toolbar-items>
            <v-spacer></v-spacer>
            <v-toolbar-items>
                <v-text-field  v-model="filter" @input="filterUser" style="margin-top: 3px" append-icon="search" outlined></v-text-field>
            </v-toolbar-items>
        </v-toolbar>
        <div v-for="user in filteredUsers" :key="filteredUsers.indexOf(user)">
            <v-card v-if="user.creditList[year]"
                    style="margin-top: 3px">
                <v-card-title>{{user.lastname}}, {{user.firstname}}</v-card-title>
                <Table v-bind:user="user" v-bind:year="year"/>
                <v-container fluid>
                    <v-row align="start" align-content="start">
                        <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-row>
                            <v-row>
                                <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-col align-self="center">
                            <v-card outlined>
                                <v-row>
                                    <v-card-title class="subtitle-2">Geld transferieren</v-card-title>
                                    <v-spacer/>
                                    <v-btn text icon style="margin-right: 5px" @click="setExpand(user)">
                                        <v-icon :class="isExpand(user.expand)" dense>$expand</v-icon>
                                    </v-btn>
                                </v-row>
                                <v-expand-transition>
                                    <v-card-text v-show="user.expand">
                                        <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="years" 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(user)">Hinzufügen</v-btn>
                                    </v-card-text>
                                </v-expand-transition>
                            </v-card>
                        </v-col>
                    </v-row>
                </v-container>
            </v-card>
        </div>
    </div>
</template>

<script>
    import Table from "./Table";
    export default {
        name: "Overview",
        components: {Table},
        props: {
            users: Array,
        },
        data () {
            return {

                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",
                        "Juli", "August", "September", "Oktober", "November", "Dezember"
                    ][new Date().getMonth()]}
            }
        },
        created() {
            this.createYears();
            this.filteredUsers = this.users

        },
        methods: {
            getLastColor (value) {
                return value < 0 ? 'red' : 'green'
            },
            getAllSum(sum, lastYear) {
                // eslint-disable-next-line no-console
                console.log(sum, lastYear)
                return lastYear + sum
            },
            createYears() {
                for (let year = 2000; year <= new Date().getFullYear(); year++) {
                    this.years.push({value: year, text: year})
                }
            },
            setExpand(user) {
                user.expand ? user.expand=false : user.expand=true
            },
            isExpand(value) {
                return value ? 'rotate' : ''
            },
            // eslint-disable-next-line no-unused-vars
            add(user) {
                // eslint-disable-next-line no-console
                console.log(this.selectedYear.value, this.type.value, this.selectedMonth.value)
                if (this.type.value === 'amount') {
                    this.$emit("add:amount", {user: user, amount: this.amount, year: this.selectedYear, month: this.selectedMonth})
                }
                if (this.type.value === 'credit') {
                    this.$emit("add:credit", {user: 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()]}
            },
            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())
                })]
            }
        },
        computed: {
            isActualYear() {
                return this.year === new Date().getFullYear()
            }
        }

    }
</script>

<style scoped>
    .rotate {
        transform: rotate(180deg);
    }
</style>