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">
<!--            <v-autocomplete-->
<!--              chips-->
<!--              return-object-->
<!--              multiple-->
<!--              v-model="day.worker"-->
<!--              item-text="fullName"-->
<!--              label="Dienste"-->
<!--              filled-->
<!--              color="green"-->
<!--              @input="searchInput = null"-->
<!--              :search-input.sync="searchInput"-->
<!--              @blur="focused = false"-->
<!--              @focus="focused = true"-->
<!--              disabled-->
<!--            >-->
<!--              <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>-->
<!--                  {{ 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>-->
            <v-chip style="margin: 3px;" v-for="worker in day.worker" :key="day.worker.indexOf(worker)">{{ worker.firstname }} {{ worker.lastname }}</v-chip>
          </div>
        </v-expand-transition>
      </v-card-text>
    </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
    }
  },
  created() {
    this.setLoading(this.day.date)
    this.getUser({
      date: this.day.date.getTime() / 1000,
      startdatetime: this.day.date
    })
  },
  methods: {
    ...mapActions({
      getUser: 'jobs/getUser',
      setLoading: 'jobs/setDayLoading',
      setNotLoading: 'jobs/setDayNotLoading'
    }),
    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'
      }
    }
  },
  computed: {
    ...mapGetters({
      disabled: 'jobs/disabled'
    })
  },
  watch: {
    day() {
      this.getUser({
        date: this.day.date.getTime() / 1000,
        startdatetime: this.day.date
      })
    },
    worker() {
      return this.day.worker
    }
  }
}
</script>

<style scoped></style>