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>