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

<template>
    <div>
        <v-toolbar tile>
            <v-toolbar-title>Gesamtübersicht</v-toolbar-title>
            <v-spacer/>
            <v-toolbar-items>
                <v-btn text icon @click="countYear(false)"><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="countYear(true)" :disabled="isActualYear"><v-icon>keyboard_arrow_right</v-icon></v-btn>
            </v-toolbar-items>
            <v-spacer/>
            <v-toolbar-items>
                <v-btn text @click="sendMails">Emails senden</v-btn>
                <v-text-field  v-model="filter" style="margin-top: 3px" append-icon="search" outlined></v-text-field>
            </v-toolbar-items>
        </v-toolbar>
        <v-expand-transition>
        <v-card style="margin-top: 3px" v-show="errorMails">
            <v-row>
                <v-spacer/>
                <v-btn text icon style="margin-right: 5px"
                       @click="errorExpand ? errorExpand = false : errorExpand = true">
                    <v-icon :class="isExpand(errorExpand)" dense>$expand</v-icon>
                </v-btn>
            </v-row>
            <v-expand-transition>
                <div v-show="errorExpand">
                    <v-alert v-for="error in errorMails" :key="errorMails.indexOf(error)"
                             dense
                             :type="computeError(error.error)"
                             >{{errorMessage(error)}}
                    </v-alert>
                </div>
            </v-expand-transition>
        </v-card>
        </v-expand-transition>
        <div v-for="user in users" :key="users.indexOf(user)">
            <v-card v-if="user.creditList[year] && isFiltered(user)"
                    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-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-row>
                            <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";
    import { mapGetters, mapActions } from 'vuex'
    export default {
        name: "Overview",
        components: {Table},
        props: {
        },
        data () {
            return {

                errorExpand: false,

                filter: "",

                amount: null,
                isNumber: value => !isNaN(value) || 'Betrag muss eine Zahl sein.',
                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() {
            // eslint-disable-next-line no-console
            console.log(this.getData(this.createYears()))

        },
        methods: {
            ...mapActions({createYears: 'finanzerUsers/createYears',
                addAmount: 'finanzerUsers/addAmount',
                addCredit: 'finanzerUsers/addCredit',
                countYear: 'finanzerUsers/countYear',
                sendMails: 'finanzerUsers/sendMails'}),
            async getData(promise) {
                return await promise
            },
            getLastColor (value) {
                return value < 0 ? 'red' : 'green'
            },
            getAllSum(sum, lastYear) {
                return lastYear + sum
            },
            getLockedColor (value) {
                return value ? 'red' : 'green'
            },
            computeError(error) {
                if (error) return 'error'
                else return 'success'
            },
            errorMessage(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.'
            },
            setExpand(user) {
                user.expand ? user.expand=false : user.expand=true
            },
            isExpand(value) {
                return value ? 'rotate' : ''
            },
            // eslint-disable-next-line no-unused-vars
            add(user) {
                if (this.type.value === 'amount') {
                    this.addAmount({user: user, amount: this.amount, year: this.selectedYear.value, month: this.selectedMonth.value})
                }
                if (this.type.value === 'credit') {
                    this.addCredit( {user: user, credit: this.amount, year: this.selectedYear.value, month: this.selectedMonth.value})
                }

                this.createDefault(this.amount, this.type, this.selectedYear, this.selectedMonth)

            },
            isFiltered(user) {
              return user.firstname.toLowerCase().includes(this.filter.toLowerCase()) || user.lastname.toLowerCase().includes(this.filter.toLowerCase())
            },
            createDefault() {
                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: {
            isActualYear() {
                return this.year === new Date().getFullYear()
            },
            ...mapGetters({users: 'finanzerUsers/users',
                errorMails: 'finanzerUsers/errorMails',
                year: 'finanzerUsers/year',
                years: 'finanzerUsers/years',
                months: 'finanzerUsers/months'})
        }

    }
</script>

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