flaschengeist-frontend/src/components/vorstand/ServiceManagement.vue

<template>
  <div>
    <v-content>
      <v-toolbar>
        <v-toolbar-title>
          Dienstverwaltung
        </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>
    </v-content>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import Day from './ServiceManagementComponents/Day'
export default {
  name: 'ServiceManagement',
  components: { Day },
  data() {
    return {
      id: 0,
      date: new Date(),
      monthArray: [
        'Januar',
        'Februar',
        'März',
        'April',
        'Mai',
        'Juni',
        'Juli',
        'August',
        'September',
        'Oktober',
        'November',
        'Dezember'
      ]
    }
  },
  created() {
    this.createMonth(this.date)
    this.getAllUsers()
  },
  methods: {
    ...mapActions({
      createMonth: 'sm/createMonth',
      getAllUsers: 'sm/getAllUsers'
    }),
    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: 'sm/month',
    })
  }
}
</script>

<style scoped></style>