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 @click="changeMonth(-1)">
          <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 @click="changeMonth(1)">
          <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)">
      <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>
              <Day v-bind:day="day" />
            </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(),
      monthArray: [
        'Januar',
        'Februar',
        'März',
        'April',
        'Mai',
        'Juni',
        'Juli',
        'August',
        'September',
        'Oktober',
        'November',
        'Dezember'
      ]
    }
  },
  created() {
    this.createMonth(this.date)
  },
  methods: {
    ...mapActions({
      createMonth: 'jobs/createMonth'
    }),
    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)
    }
  },
  computed: {
    ...mapGetters({
      month: 'jobs/month'
    })
  }
}
</script>

<style scoped></style>