finished ##168

src/components/user/Jobs.vue

@@ -11,12 +11,8 @@
         </v-btn>
         <v-list-item>
           <v-list-item-title class="title"
-            >{{ date.getDate() }}.{{ date.getMonth() + 1 }}.{{
-              date.getFullYear()
-            }}
-            bis {{ toDate.getDate() }}.{{ toDate.getMonth() + 1 }}.{{
-              toDate.getFullYear()
-            }}
+            >{{ monthArray[date.getMonth()] }}
+            {{ date.getFullYear() }}
           </v-list-item-title>
         </v-list-item>
         <v-btn text icon @click="changeMonth(1)">
@@ -25,10 +21,25 @@
       </v-toolbar-items>
       <v-spacer />
     </v-toolbar>
-    <v-progress-linear indeterminate v-if="loading" />
-    <div v-for="day in days" :key="days.indexOf(day)">
-      <Day v-bind:day="day" style="margin-top: 3px"></Day>
+    <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>
 
@@ -43,46 +54,43 @@ export default {
     return {
       keyboard_arrow_left: mdiChevronLeft,
       keyboard_arrow_right: mdiChevronRight,
-      date: new Date()
+      date: new Date(),
+      monthArray: [
+        'Januar',
+        'Februar',
+        'März',
+        'April',
+        'Mai',
+        'Juni',
+        'Juli',
+        'August',
+        'September',
+        'Oktober',
+        'November',
+        'Dezember'
+      ]
     }
   },
   created() {
-    this.createDays(this.date)
+    this.createMonth(this.date)
   },
   methods: {
     ...mapActions({
-      createDays: 'user/createDays'
+      createMonth: 'jobs/createMonth'
     }),
     changeMonth(value) {
       if (value === -1) {
-        this.date = new Date(
-          this.date.getFullYear(),
-          this.date.getMonth(),
-          this.date.getDate() - 1
-        )
+        this.date = new Date(this.date.getFullYear(), this.date.getMonth() - 1)
       } else {
-        this.date = new Date(
-          this.date.getFullYear(),
-          this.date.getMonth(),
-          this.date.getDate() + 1
-        )
+        this.date = new Date(this.date.getFullYear(), this.date.getMonth() + 1)
       }
-      this.createDays(this.date)
-    },
-    test(day) {
-      let index = this.days.indexOf(day)
-      console.log(index, index % 3)
-      return true
+      this.createMonth(this.date)
     }
   },
   computed: {
     ...mapGetters({
-      days: 'user/days',
-      loading: 'user/loading'
-    }),
-    toDate() {
-      return new Date(new Date().setDate(this.date.getDate() + 10))
-    }
+      month: 'jobs/month'
+    })
   }
 }
 </script>

src/components/user/Jobs/Day.vue

@@ -1,28 +1,61 @@
 <template>
-  <v-card v-if="day.job">
-    <v-card-title
-      >{{ daysArray[day.date.getDay()] }} den {{ day.date.getDate() }}
-      {{ monthArray[day.date.getMonth()] }}
-      {{ day.date.getFullYear() }}
+  <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-if="day.workers.length !== 0">
-      Du hast Dienst mit:
-      <v-chip
-        style="margin: 3px"
-        v-for="person in day.workers"
-        :key="day.workers.indexOf(person)"
-        >{{ person.user.firstname }}
-        {{ person.user.lastname }}
-      </v-chip>
-    </v-card-text>
-    <v-card-text v-else>
-      Du hast alleine Dienst!
+      <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 } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
+import { mdiAccountPlus } from '@mdi/js'
 export default {
   name: 'Day',
   props: {
@@ -30,42 +63,56 @@ export default {
   },
   data() {
     return {
-      monthArray: [
-        'Januar',
-        'Februar',
-        'März',
-        'April',
-        'Mai',
-        'Juni',
-        'Juli',
-        'August',
-        'September',
-        'Oktober',
-        'November',
-        'Dezember'
-      ],
-      daysArray: [
-        'Sonntag',
-        'Montag',
-        'Dienstag',
-        'Mittwoch',
-        'Donnerstag',
-        'Freitag',
-        'Samstag'
-      ]
+      account_add: mdiAccountPlus,
+      searchInput: null
     }
   },
   created() {
-    this.updateDay({ date: this.day.date })
+    this.setLoading(this.day.date)
+    this.getUser({
+      date: this.day.date.getTime() / 1000,
+      startdatetime: this.day.date
+    })
   },
   methods: {
     ...mapActions({
-      updateDay: 'user/updateDay'
+      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.updateDay({ date: this.day.date })
+      this.getUser({
+        date: this.day.date.getTime() / 1000,
+        startdatetime: this.day.date
+      })
+    },
+    worker() {
+      return this.day.worker
     }
   }
 }

src/components/vorstand/ServiceManagement.vue

@@ -8,7 +8,7 @@
         <v-spacer />
         <v-toolbar-items>
           <v-btn text icon @click="changeMonth(-1)">
-            <v-icon>{{keyboard_arrow_left}}</v-icon>
+            <v-icon>{{ keyboard_arrow_left }}</v-icon>
           </v-btn>
           <v-list-item>
             <v-list-item-title class="title"
@@ -17,7 +17,7 @@
             >
           </v-list-item>
           <v-btn text icon @click="changeMonth(1)">
-            <v-icon>{{keyboard_arrow_right}}</v-icon>
+            <v-icon>{{ keyboard_arrow_right }}</v-icon>
           </v-btn>
         </v-toolbar-items>
         <v-spacer />
@@ -35,7 +35,7 @@
           <v-row justify="start" align="start">
             <div v-for="day in week.days" :key="day.id">
               <v-col>
-                <Day v-bind:day="day"/>
+                <Day v-bind:day="day" />
               </v-col>
             </div>
           </v-row>
@@ -47,7 +47,7 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
-import {mdiChevronLeft, mdiChevronRight} from '@mdi/js'
+import { mdiChevronLeft, mdiChevronRight } from '@mdi/js'
 import Day from './ServiceManagementComponents/Day'
 export default {
   name: 'ServiceManagement',
@@ -94,7 +94,7 @@ export default {
   },
   computed: {
     ...mapGetters({
-      month: 'sm/month',
+      month: 'sm/month'
     })
   }
 }

src/store/index.js

@@ -5,6 +5,7 @@ import finanzerUsers from './modules/finanzerUsers'
 import barUsers from '@/store/modules/barUsers'
 import user from '@/store/modules/user'
 import sm from '@/store/modules/serviceManagement'
+import jobs from '@/store/modules/jobs'
 
 Vue.use(Vuex)
 
@@ -14,6 +15,7 @@ export default new Vuex.Store({
     finanzerUsers,
     barUsers,
     user,
-    sm
+    sm,
+    jobs
   }
 })

src/store/modules/jobs.js

@@ -0,0 +1,230 @@
+import axios from 'axios'
+import url from '@/plugins/routes'
+
+const state = {
+  month: [],
+  disabled: false
+}
+
+const mutations = {
+  createMonth: (state, date) => {
+    let month = []
+    let id = 0
+    const year = date.getFullYear()
+    const mon = date.getMonth()
+    let a = new Date(year, mon + 1, 0)
+    let days = a.getDate()
+    let startDate = 1
+    for (let intDay = 1; intDay <= days; intDay++) {
+      if (new Date(year, mon, intDay).getDay() === 3) {
+        startDate = intDay
+        break
+      }
+    }
+    let end = false
+    let week = { id: id, days: {} }
+    for (let intDay = startDate; intDay <= days + 7; intDay++) {
+      if (end) break
+      let currentDate = new Date(year, mon, intDay, 12)
+
+      switch (currentDate.getDay()) {
+        case 1:
+          mutations.setStartEndDate(week)
+          month.push(week)
+          id++
+          week = { id: id, days: {} }
+          week.days.monday = {
+            id: currentDate.getDay(),
+            date: currentDate,
+            name: 'Montag',
+            worker: [],
+            loading: false
+          }
+          break
+        case 2:
+          week.days.tuesday = {
+            id: currentDate.getDay(),
+            date: currentDate,
+            name: 'Dienstag',
+            worker: [],
+            loading: false
+          }
+          break
+        case 3:
+          if (currentDate.getMonth() === mon + 1) {
+            end = true
+            mutations.setStartEndDate(week)
+            month.push(week)
+          } else {
+            week.days.wednesday = {
+              id: currentDate.getDay(),
+              date: currentDate,
+              name: 'Mittwoch',
+              worker: [],
+              loading: false
+            }
+          }
+          break
+        case 4:
+          week.days.thursday = {
+            id: currentDate.getDay(),
+            date: currentDate,
+            name: 'Donnerstag',
+            worker: [],
+            loading: false
+          }
+          break
+        case 5:
+          week.days.friday = {
+            id: currentDate.getDay(),
+            date: currentDate,
+            name: 'Freitag',
+            worker: [],
+            loading: false
+          }
+          break
+        case 6:
+          week.days.satturday = {
+            id: currentDate.getDay(),
+            date: currentDate,
+            name: 'Samstag',
+            worker: [],
+            loading: false
+          }
+          break
+        case 0:
+          week.days.sunday = {
+            id: currentDate.getDay(),
+            date: currentDate,
+            name: 'Sontag',
+            worker: [],
+            loading: false
+          }
+          break
+      }
+    }
+    state.month = month
+  },
+  updateMonth: (state, data) => {
+    const date = new Date(data.startdatetime)
+    const user = data.user
+    for (let week = 0; week < state.month.length; week++) {
+      for (let day in state.month[week].days) {
+        if (state.month[week].days[day].date - date === 0) {
+          let worker = state.month[week].days[day].worker.find(a => {
+            return a.username === user.username
+          })
+          if (!worker && data.com === 'add') {
+            state.month[week].days[day].worker.push({
+              firstname: user.firstname,
+              lastname: user.lastname,
+              username: user.username,
+              fullName: user.firstname + ' ' + user.lastname
+            })
+          }
+        }
+      }
+    }
+  },
+  setDayLoading: (state, { date, getters }) => {
+    let day = getters.getDay(date)
+    day.loading = true
+  },
+  setDayNotLoading: (state, { date, getters }) => {
+    let day = getters.getDay(date)
+    day.loading = false
+  },
+  setDisabled: (state, data) => {
+    state.disabled = data
+  },
+  setStartEndDate: week => {
+    if (week.days.monday) {
+      week.startDate = week.days.monday.date
+    } else if (week.days.tuesday) {
+      week.startDate = week.days.tuesday.date
+    } else if (week.days.wednesday) {
+      week.startDate = week.days.wednesday.date
+    } else if (week.days.thursday) {
+      week.startDate = week.days.thursday.date
+    } else if (week.days.friday) {
+      week.startDate = week.days.friday.date
+    } else if (week.days.satturday) {
+      week.startDate = week.days.satturday.date
+    } else if (week.days.sunday) {
+      week.startDate = week.days.sunday.date
+    }
+
+    if (week.days.sunday) {
+      week.endDate = week.days.sunday.date
+    } else if (week.days.satturday) {
+      week.endDate = week.days.satturday.date
+    } else if (week.days.friday) {
+      week.endDate = week.days.friday.date
+    } else if (week.days.thursday) {
+      week.endDate = week.days.thursday.date
+    } else if (week.days.wednesday) {
+      week.endDate = week.days.wednesday.date
+    } else if (week.days.tuesday) {
+      week.endDate = week.days.tuesday.date
+    } else if (week.days.monday) {
+      week.endDate = week.days.monday.date
+    }
+  }
+}
+
+const actions = {
+  createMonth({ commit }, date) {
+    commit('setDisabled', true)
+    commit('createMonth', date)
+    commit('setDisabled', false)
+  },
+  setDayLoading({ commit, getters }, date) {
+    commit('setDayLoading', { date, getters })
+  },
+  setDayNotLoading({ commit, getters }, date) {
+    commit('setDayNotLoading', { date, getters })
+  },
+  async getUser({ commit, rootState, dispatch, getters }, data) {
+    commit('setDayLoading', { date: data.startdatetime, getters })
+    try {
+      const response = await axios.post(
+        url.user.job,
+        { ...data },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
+      for (let item = 0; item < response.data.length; item++) {
+        commit('updateMonth', { ...response.data[item], com: 'add' })
+      }
+      commit('setDayNotLoading', { date: data.startdatetime, getters })
+    } catch (e) {
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+    }
+  }
+}
+
+const getters = {
+  month: state => {
+    return state.month
+  },
+  getDay: state => date => {
+    for (let week = 0; week < state.month.length; week++) {
+      for (let day in state.month[week].days) {
+        if (state.month[week].days[day].date - date === 0) {
+          return state.month[week].days[day]
+        }
+      }
+    }
+  },
+  disabled: state => {
+    return state.disabled
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters
+}