flaschengeist-frontend/src/components/user/Jobs.vue

<template>
  <div>
    <v-toolbar>
      <v-toolbar-title>Dienstübersicht</v-toolbar-title>
      <v-spacer />
      <v-toolbar-items>
        <v-btn
          text
          icon
          :to="{
            name: 'userJobs',
            params: { year: date.getFullYear(), month: date.getMonth() }
          }"
        >
          <v-icon>{{ keyboard_arrow_left }}</v-icon>
        </v-btn>
        <v-list-item>
          <v-list-item-title class="title">
            {{ monthArray[date.getMonth()] }}
            {{ date.getFullYear() }}
          </v-list-item-title>
        </v-list-item>
        <v-btn
          text
          icon
          :to="{
            name: 'userJobs',
            params: { year: date.getFullYear(), month: date.getMonth() + 2 }
          }"
        >
          <v-icon>{{ keyboard_arrow_right }}</v-icon>
        </v-btn>
      </v-toolbar-items>
      <v-spacer />
    </v-toolbar>
    <v-card v-for="week in month" :key="month.indexOf(week)" flat tile>
      <v-card-title class="subtitle-1 font-weight-bold">
        Woche vom {{ week.startDate.getDate() }}.{{
          week.startDate.getMonth() + 1
        }}.{{ week.startDate.getFullYear() }} bis
        {{ week.endDate.getDate() }}.{{ week.endDate.getMonth() + 1 }}.{{
          week.endDate.getFullYear()
        }}
      </v-card-title>
      <v-card-text>
        <v-row justify="start" align="start">
          <div v-for="day in week.days" :key="day.id">
            <v-col cols="12">
              <Day
                :day="day"
                :long="false"
                @addingJob="addJob"
                @sendInvites="setJobInvites"
                @deletingJob="deleteJob"
                @sendRequests="setJobRequests"
                @deleteJobInvite="deleteInvite"
                @deleteJobRequest="deleteRequest"
              />
            </v-col>
          </div>
        </v-row>
      </v-card-text>
    </v-card>
  </div>
</template>

<script>
import { mdiChevronLeft, mdiChevronRight } from '@mdi/js'
import { mapGetters, mapActions } from 'vuex'
import Day from '@/components/user/Jobs/Day'
export default {
  name: 'Jobs',
  components: { Day },
  data() {
    return {
      keyboard_arrow_left: mdiChevronLeft,
      keyboard_arrow_right: mdiChevronRight,
      date: new Date(this.$route.params.year, this.$route.params.month - 1, 1),
      monthArray: [
        'Januar',
        'Februar',
        'März',
        'April',
        'Mai',
        'Juni',
        'Juli',
        'August',
        'September',
        'Oktober',
        'November',
        'Dezember'
      ]
    }
  },
  created() {
    this.getActiveUser()
    this.getAllJobKinds()
    this.createMonth(this.date)
    this.getDBUsers()
    this.getUsers({
      from_date: {
        year: this.startDate.getFullYear(),
        month: this.startDate.getMonth() + 1,
        day: this.startDate.getDate()
      },
      to_date: {
        year: this.endDate.getFullYear(),
        month: this.endDate.getMonth() + 1,
        day: this.endDate.getDate()
      }
    })
  },
  methods: {
    ...mapActions({
      getActiveUser: 'user/getUser',
      createMonth: 'jobs/createMonth',
      getUsers: 'jobs/getUsers',
      getDBUsers: 'usermanager/getUsers',
      getAllJobKinds: 'jkm/getAllJobKinds',
      addJob: 'jobs/addJob',
      deleteJob: 'jobs/deleteJob',
      setJobInvites: 'jobInvites/setJobInvites',
      getJobInvites: 'jobInvites/getJobInvites',
      getJobRequests: 'jobRequests/getJobRequests',
      setJobRequests: 'jobRequests/setJobRequests',
      deleteInvite: 'jobInvites/deleteJobInviteFromMe',
      deleteRequest: 'jobRequests/deleteJobRequestFromMe'
    }),
    changeMonth(value) {
      if (value === -1) {
        this.date = new Date(this.date.getFullYear(), this.date.getMonth() - 1)
      } else {
        this.date = new Date(this.date.getFullYear(), this.date.getMonth() + 1)
      }
      this.createMonth(this.date)
      this.getUsers({
        from_date: {
          year: this.startDate.getFullYear(),
          month: this.startDate.getMonth() + 1,
          day: this.startDate.getDate()
        },
        to_date: {
          year: this.endDate.getFullYear(),
          month: this.endDate.getMonth() + 1,
          day: this.endDate.getDate()
        }
      })
    }
  },
  computed: {
    ...mapGetters({
      month: 'jobs/month',
      startDate: 'jobs/getStartDate',
      endDate: 'jobs/getEndDate',
      loading: 'user/loading'
    })
  },
  watch: {
    $route() {
      this.getActiveUser()
      this.date = new Date(
        this.$route.params.year,
        this.$route.params.month - 1,
        1
      )
      this.getAllJobKinds()
      this.createMonth(this.date)
      this.getDBUsers()
      this.getUsers({
        from_date: {
          year: this.startDate.getFullYear(),
          month: this.startDate.getMonth() + 1,
          day: this.startDate.getDate()
        },
        to_date: {
          year: this.endDate.getFullYear(),
          month: this.endDate.getMonth() + 1,
          day: this.endDate.getDate()
        }
      })
    },
    loading(newValue) {
      if (!newValue) {
        this.getJobInvites()
        this.getJobRequests()
      }
    }
  }
}
</script>

<style scoped></style>