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

<template>
  <div>
    <v-toolbar tile>
      <v-toolbar-title>{{activeUser.lastname}}, {{activeUser.firstname}}</v-toolbar-title>
      <v-spacer />
      <v-toolbar-items>
        <v-btn @click="sendMail({username: activeUser.username})" text>Email senden</v-btn>
      </v-toolbar-items>
    </v-toolbar>
    <v-expand-transition>
      <v-card style="margin-top: 3px" v-show="errorMail">
        <v-alert dense :type="computeError(errorMail)">{{errorMessage(errorMail)}}</v-alert>
      </v-card>
    </v-expand-transition>
    <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(activeUser.locked)"
              >{{activeUser.locked ? 'Gesperrt': 'nicht Gesperrt'}}</v-chip>
            </v-col>
            <v-col>
              <v-btn
                @click="doLock({user: activeUser, locked: !activeUser.locked})"
              >{{activeUser.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({user: activeUser, limit: limit, autoLock: autoLock.value})"
            >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="activeUser" 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(activeUser.creditList[year][1].last)"
                >{{(activeUser.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(activeUser.creditList[year][2].sum ,activeUser.creditList[year][1].last))"
                >
                  {{(getAllSum(activeUser.creditList[year][2].sum ,activeUser.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'
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'User',
  components: { Table },
  data() {
    return {
      isNumber: value => !isNaN(value) || 'Betrag muss eine Zahl sein.',
      limit: null,
      autoLock: null,
      amount: null,
      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.activeUser.limit / 100).toFixed(2)
    this.autoLock = {
      value: this.activeUser.autoLock,
      text: this.activeUser.autoLock ? 'Aktiviert' : 'Deaktiviert'
    }
  },
  methods: {
    ...mapActions({
      addAmount: 'finanzerUsers/addAmount',
      addCredit: 'finanzerUsers/addCredit',
      sendMail: 'finanzerUsers/sendMail',
      doLock: 'finanzerUsers/doLock',
      saveConfig: 'finanzerUsers/saveConfig'
    }),
    getLastColor(value) {
      return value < 0 ? 'red' : 'green'
    },
    getAllSum(sum, lastYear) {
      return lastYear + sum
    },
    getLockedColor(value) {
      return value ? 'red' : 'green'
    },
    add() {
      if (this.type.value === 'amount') {
        this.addAmount({
          user: this.activeUser,
          amount: this.amount,
          year: this.selectedYear.value,
          month: this.selectedMonth.value
        })
      }
      if (this.type.value === 'credit') {
        this.addCredit({
          user: this.activeUser,
          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()]
      }
    },
    computeError(error) {
      if (error) {
        if (error.error) return 'error'
        else return 'success'
      }
    },
    errorMessage(error) {
      if (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.'
          )
      }
    }
  },
  computed: {
    years() {
      let years = []
      for (let year in this.activeUser.creditList) {
        years.unshift(parseInt(year))
      }
      return years
    },
    ...mapGetters({
      activeUser: 'finanzerUsers/activeUser',
      errorMail: 'finanzerUsers/errorMail',
      months: 'finanzerUsers/months',
      selectYears: 'finanzerUsers/selectYears'
    })
  },
  watch: {
    activeUser(newVal) {
      this.limit = (newVal.limit / 100).toFixed(2)
      this.autoLock = {
        value: newVal.autoLock,
        text: newVal.autoLock ? 'Aktiviert' : 'Deaktiviert'
      }
    }
  }
}
</script>

<style scoped>
</style>