flaschengeist-frontend/src/components/vorstand/ServiceManagementComponents/Day.vue

<template>
  <div v-if="day">
    <v-card :color="color(day)" max-width="250px" min-width="250px">
      <v-card-title v-if="day.date" class="subtitle-1 font-weight-bold">
        {{ day.name }} den {{ day.date.getDate() }}.{{
          day.date.getMonth() + 1
        }}.{{ day.date.getFullYear() }}
      </v-card-title>
      <v-card-text>
        <v-expand-transition>
          <v-row align="center" justify="center" v-if="day.loading">
            <v-progress-circular indeterminate color="grey" />
          </v-row>
        </v-expand-transition>
        <v-expand-transition>
          <div v-show="!day.loading">
            <v-autocomplete
              chips
              return-object
              multiple
              v-model="day.worker"
              :items="allUsers"
              item-text="fullName"
              label="Dienste"
              filled
              color="green"
              @input="searchInput = null"
              :search-input.sync="searchInput"
              @blur="focused = false"
              @focus="focused = true"
            >
              <template v-slot:prepend-inner>
                <v-icon>{{ account_add }}</v-icon>
              </template>
              <template v-slot:selection="data">
                <v-chip
                  v-bind="data.attrs"
                  :input-value="data.selected"
                  close
                  @click="data.select"
                  @click:close="remove(data.item)"
                >
                  {{ data.item.firstname }} {{ data.item.lastname }}
                </v-chip>
              </template>
              <template v-slot:item="data">
                <v-list-item-content>
                  <v-list-item-title>
                    {{ data.item.firstname }} {{ data.item.lastname }}
                  </v-list-item-title>
                </v-list-item-content>
              </template>
            </v-autocomplete>
          </div>
        </v-expand-transition>
      </v-card-text>
      <v-card-actions v-if="!day.loading">
        <v-chip class="text-uppercase" :color="lockedColor">{{ lockedText }}</v-chip>
        <v-spacer />
        <v-btn @click="lock">{{lockedTextBtn}}</v-btn>
      </v-card-actions>
    </v-card>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { mdiAccountPlus } from '@mdi/js'
export default {
  name: 'Day',
  props: {
    day: Object
  },
  data() {
    return {
      account_add: mdiAccountPlus,
      searchInput: null,
      focused: false
    }
  },
  created() {
    this.setLoading(this.day.date)
    this.getUser({
      date: this.day.date.getTime() / 1000,
      startdatetime: this.day.date,
      year: this.day.date.getFullYear(),
      month: this.day.date.getMonth() + 1,
      day: this.day.date.getDate()
    })
  },
  methods: {
    ...mapActions({
      addUser: 'sm/addUser',
      getUser: 'sm/getUser',
      deleteUser: 'sm/deleteUser',
      setLoading: 'sm/setDayLoading',
      setNotLoading: 'sm/setDayNotLoading',
      lockDay: 'sm/lockDay'
    }),
    // eslint-disable-next-line no-unused-vars
    remove(deletedUser) {
      const obj = this.day.worker.find(a => {
        return a.username === deletedUser.username
      })
      const index = this.day.worker.indexOf(obj)
      if (index >= 0) this.day.worker.splice(index, 1)
      this.deleteUser({
        startdatetime: this.day.date,
        date: this.day.date.getTime() / 1000,
        user: deletedUser,
        year: this.day.date.getFullYear(),
        month: this.day.date.getMonth() + 1,
        day: this.day.date.getDate()
      })
    },
    test(event) {
      console.log('blur', event)
    },
    color: day => {
      if (day) {
        if (day.date.getDay() === 0 || day.date.getDay() === 1) {
          return 'grey lighten-4'
        } else {
          if (day.worker.length < 2) {
            return 'yellow'
          } else {
            return 'light-green'
          }
        }
      } else {
        return 'grey lighten-4'
      }
    },
    lock() {
      this.lockDay({year: this.day.date.getFullYear(), month: this.day.date.getMonth() + 1, day: this.day.date.getDate(), locked: !this.day.locked})
    }
  },
  computed: {
    ...mapGetters({
      allUsers: 'sm/allUsers',
      disabled: 'sm/disabled'
    }),
    worker() {
      return this.day.worker
    },
    lockedColor() {
      return this.day.locked ? 'red' : 'green'
    },
    lockedText() {
      return this.day.locked ? 'gesperrt' : 'frei'
    },
    lockedTextBtn() {
      return this.day.locked ? 'freigeben' : 'sperren'
    }
  },
  watch: {
    worker(newValue, oldValue) {
      if (oldValue !== newValue && this.focused) {
        let addedUser = null
        for (let user in newValue) {
          if (!oldValue.includes(newValue[user])) {
            addedUser = newValue[user]
            this.addUser({
              date: this.day.date.getTime() / 1000,
              user: addedUser,
              year: this.day.date.getFullYear(),
              month: this.day.date.getMonth() + 1,
              day: this.day.date.getDate()
            })
          }
        }
        let deletedUser = null
        for (let user in oldValue) {
          if (!newValue.includes(oldValue[user])) {
            deletedUser = oldValue[user]
            console.log('deleteUser', deletedUser, this.day.date)
            this.deleteUser({
              startdatetime: this.day.date,
              date: this.day.date.getTime() / 1000,
              user: deletedUser,
              year: this.day.date.getFullYear(),
              month: this.day.date.getMonth() + 1,
              day: this.day.date.getDate()
            })
          }
        }
      }
    },
    day() {
      this.getUser({
        date: this.day.date.getTime() / 1000,
        startdatetime: this.day.date,
        year: this.day.date.getFullYear(),
        month: this.day.date.getMonth() + 1,
        day: this.day.date.getDate()
      })
    },
    focused(newVal, oldValue) {
      console.log(newVal, oldValue)
    }
  }
}
</script>

<style scoped></style>