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

<template>
  <v-content>
    <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-autocomplete
          outlined
          return-object
          v-model="user"
          style="margin-top: 3px"
          placeholder="Suche Person"
          :items="allUsers"
          item-text="fullName"
          full-width
          :loading="allUsersLoading"
          :search-input.sync="filter"
        >
          <template v-slot:prepend-inner>
            <v-icon>{{search_person}}</v-icon>
          </template>
        </v-autocomplete>
        <v-btn
          text
          @click="addToUser(user)"
          >Hinzufügen</v-btn
        >
      </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>
    <v-progress-linear v-if="loading && users.length !== 0" indeterminate />
    <TableSkeleton v-if="loading && users.length === 0" />
    <div v-for="user in users" :key="users.indexOf(user)">
      <v-card
        v-if="user.creditList[year] && isFiltered(user)"
        style="margin-top: 3px"
        :loading="user.loading"
      >
        <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>
  </v-content>
</template>

<script>
import Table from './Table'
import { mapGetters, mapActions } from 'vuex'
import TableSkeleton from './Skeleton/TableSkeleton'
import {mdiChevronLeft, mdiChevronRight, mdiAccountSearch} from '@mdi/js'
export default {
  name: 'Overview',
  components: { TableSkeleton, Table },
  props: {},
  data() {
    return {
      keyboard_arrow_left: mdiChevronLeft,
      keyboard_arrow_right: mdiChevronRight,
      search_person: mdiAccountSearch,
      errorExpand: false,

      filter: '',
      user: null,

      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() {},
  methods: {
    ...mapActions({
      createYears: 'finanzerUsers/createYears',
      addAmount: 'finanzerUsers/addAmount',
      addCredit: 'finanzerUsers/addCredit',
      countYear: 'finanzerUsers/countYear',
      sendMails: 'finanzerUsers/sendMails',
      addUser: 'finanzerUsers/addUser'
    }),
    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) {
      try {
        return (
          user.firstname.toLowerCase().includes(this.filter.toLowerCase()) ||
          user.lastname.toLowerCase().includes(this.filter.toLowerCase())
        )
      } catch (e) {
        return true
      }
    },
    addToUser(user) {
      this.addUser(user)
      this.$router.push({name: 'activeUser', params: {id: user.username}})
    },
    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',
      allUsers: 'finanzerUsers/allUsers',
      errorMails: 'finanzerUsers/errorMails',
      year: 'finanzerUsers/year',
      years: 'finanzerUsers/years',
      months: 'finanzerUsers/months',
      loading: 'finanzerUsers/usersLoading',
      allUsersLoading: 'finanzerUsers/allUsersLoading'
    })
  }
}
</script>

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