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="(jobkinddateitem, index) in day.jobkinddate"
              :key="index"
            >
              <div class="title black--text text-sm-center">
                {{ jobkinddateitem.job_kind.name }}
              </div>
              <v-combobox
                multiple
                filled
                disabled
                readonly
                :counter="jobkinddateitem.maxpersons"
                v-model="jobkinddateitem.worker"
                :item-text="item => item.firstname + ' ' + item.lastname"
                item-value="username"
                chips
                append-icon=""
              >
                <template v-slot:selection="data">
                  <v-chip
                    >{{ data.item.firstname }} {{ data.item.lastname }}</v-chip
                  >
                </template>
              </v-combobox>
            </div>
          </div>
        </v-expand-transition>
      </v-card-text>
      <div v-if="userInWorker() && day.locked">
        <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" v-if="!day.loading">
        <div v-show="filterAddJob.length > 0 && !userInWorker()">
          <div>Hier kannst du dich zum Bardienst eintragen.</div>
          <v-spacer />
          <div class="text-right">
            <v-menu
                    v-model="menu"
                    open-on-hover
                    close-on-click
                    close-on-content-click
                    offset-y
            >
              <template v-slot:activator="{ on }">
                <v-spacer/>
                <v-btn
                        text
                        v-on="on"
                        v-show="filterAddJob.length > 0 && !userInWorker()"
                >
                  Eintragen
                </v-btn>
              </template>
              <v-list>
                <v-list-item
                        v-for="(jobkinddateitem, index) in filterAddJob"
                        :key="index"
                        @click="addingJob(jobkinddateitem)"
                >
                  <v-list-item-title>
                    {{ jobkinddateitem.job_kind.name }}
                  </v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>
          </div>
        </div>

        <v-spacer/>
        <div v-show="userInWorker()">
          <v-btn v-show="jobkindWithSpace.length !== 0" text>Einladen</v-btn>
          <v-btn v-show="day.locked" text>Abgeben</v-btn>
        </div>
      </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,
      menu: false,
      update: 0
    }
  },
  created() {
    this.setLoading(this.day.date)
  },
  methods: {
    ...mapActions({
      setLoading: 'jobs/setDayLoading',
      setNotLoading: 'jobs/setDayNotLoading',
      addJob: 'jobs/addJob',
      deleteJob: 'jobs/deleteJob',
      transactJob: 'jobs/transactJob'
    }),
    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 {
          var retVal = 'yellow'
          retVal = 'light-green'
          for (var jobkind in day.jobkinddate) {
            if (
              day.jobkinddate[jobkind].worker.length >=
              day.jobkinddate[jobkind].maxpersons
            )
              retVal = 'light-green'
            else return 'yellow'
          }
          return retVal
        }
      } else {
        return 'grey lighten-4'
      }
    },
    user(worker) {
      return worker.username === this.activeUser.username
    },
    addingJob(jobkinddateitem) {
      this.addJob({
        year: this.day.date.getFullYear(),
        month: this.day.date.getMonth() + 1,
        day: this.day.date.getDate(),
        job_kind: jobkinddateitem.job_kind
      })
      this.menu = false
      setTimeout(() => {
        this.update += 1
      }, 200)
    },
    userInWorker() {
      var jobkinddate = this.day.jobkinddate.find(item => {
        return item.worker.find(workeritem => {
          return workeritem.id === this.activeUser.id
        })
      })
      return !!jobkinddate
    }
  },
  computed: {
    ...mapGetters({
      disabled: 'jobs/disabled',
      activeUser: 'user/user',
      allUsers: 'jobs/allUsers',
      transactJobs: 'requestJobs/transactJobs'
    }),
    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() {
      var transactJob = this.transactJobs.filter(a => {
        return a.date - this.day.date === 0
      })
      var test = transactJob.find(a => {
        return a.accepted && a.answerd
      })
      return test
    },
    jobkindWithSpace() {
      var retVal = this.day.jobkinddate.filter(item => {
        if (item.maxpersons <= item.worker.length)
          return false
        else
          return true
      })
      return retVal
    }
    ,
    filterAddJob() {
      var retVal = this.day.jobkinddate.filter(item => {
        if (item.maxpersons <= item.worker.length) {
          return false
        }
        if (!item.job_kind.workgroup) {
          return true
        } else {
          if (this.activeUser.workgroups) {
            return this.activeUser.workgroups.find(workgroup => {
              return workgroup.id === item.job_kind.workgroup.id
            })
          }
        }
      })
      return retVal
    }
  }
}
</script>

<style scoped></style>