flaschengeist-frontend/src/components/user/Jobs/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">
            <div v-for="worker in day.worker" :key="day.worker.indexOf(worker)">
              <v-chip
                style="margin: 3px;"
                :close="user(worker) && !day.locked || canDelete && user(worker)"
                @click:close="
                  deleteJob({
                    year: day.date.getFullYear(),
                    month: day.date.getMonth() + 1,
                    day: day.date.getDate()
                  })
                "
                >{{ worker.firstname }} {{ worker.lastname }}
              </v-chip>
            </div>
          </div>
        </v-expand-transition>
      </v-card-text>
      <div v-if="userInWorker">
        <v-card-actions class="text--secondary">
          <v-autocomplete
            return-object
            v-model="requestUser"
            :items="specifiedUsers"
            item-text="fullName"
            label="Dienstanfrage"
            filled
            color="green"
            @input="searchInput = null"
            :search-input.sync="searchInput"
          >
            <template v-slot:prepend-inner>
              <v-icon>{{ account_add }}</v-icon>
            </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>
        </v-card-actions>
        <v-card-actions>
          <v-btn text block @click="send">senden</v-btn>
        </v-card-actions>
      </div>
      <v-card-actions class="text--secondary">
        <div v-if="!userInWorker">
          <div v-if="day.locked">
            Du kannst dich nicht zum Bardienst eintragen, da der Tag gesperrt
            ist.
          </div>
          <div v-else-if="day.worker.length >= 2">
            Du kannst dich nicht Bardienst eintragen, da mehr als 2 Personen
            schon eingetragen sind.
          </div>
          <div v-else>Hier kannst du dich zum Bardienst eintragen.</div>
        </div>
        <v-spacer />
        <v-btn
          v-if="!day.locked &&
              !day.loading &&
              day.worker.length < 2 &&
              !userInWorker"
          @click="
            addJob({
              year: day.date.getFullYear(),
              month: day.date.getMonth() + 1,
              day: day.date.getDate()
            })
          "
          >Eintragen
        </v-btn>
      </v-card-actions>
    </v-card>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { mdiAccountPlus } from '@mdi/js'
export default {
  name: 'Day',
  props: {
    day: Object
  },
  data() {
    return {
      account_add: mdiAccountPlus,
      searchInput: null,
      requestUser: null
    }
  },
  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({
      getUser: 'jobs/getUser',
      setLoading: 'jobs/setDayLoading',
      setNotLoading: 'jobs/setDayNotLoading',
      addJob: 'jobs/addJob',
      deleteJob: 'jobs/deleteJob',
      transactJob: 'jobs/transactJob'
    }),
    test(event) {
      console.log('blur', event)
    },
    send() {
      this.transactJob({
        user: this.requestUser.username,
        year: this.day.date.getFullYear(),
        month: this.day.date.getMonth() + 1,
        day: this.day.date.getDate()
      })
      this.requestUser = null
      this.searchInput = null
    },
    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'
      }
    },
    user(worker) {
      return worker.username === this.activeUser.username
    }
  },
  computed: {
    ...mapGetters({
      disabled: 'jobs/disabled',
      activeUser: 'user',
      allUsers: 'jobs/allUsers',
      transactJobs: 'requestJobs/transactJobs'
    }),
    userInWorker() {
      return this.day.worker.find(a => {
        return a.username === this.activeUser.username
      })
    },
    specifiedUsers() {
      var users = [...this.allUsers]
      for (var i in this.day.worker) {
        var worker = users.find(a => {
          return a.username === this.day.worker[i].username
        })
        var index = users.indexOf(worker)
        if (worker) users.splice(index, 1)
      }
      return users
    },
    canDelete() {
      console.log(this.day.date)
      console.log(this.transactJobs)
      var transactJob = this.transactJobs.filter(a => {
        return a.date - this.day.date === 0
      })
      console.log('filter', transactJob)
      var test = transactJob.find(a => {
        return a.accepted && a.answerd
      })
      console.log('find', test)
      return test
    }
  },
  watch: {
    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()
      })
    },
    worker() {
      return this.day.worker
    }
  }
}
</script>

<style scoped></style>