finished serviceManagement

src/components/vorstand/ServiceManagement.vue

@@ -11,7 +11,10 @@
             <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-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>
@@ -20,17 +23,22 @@
         <v-spacer />
       </v-toolbar>
       <v-card v-for="week in month" :key="month.indexOf(week)">
-        <v-card-title>
+        <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()}}
+            week.startDate.getMonth() + 1
+          }}.{{ week.startDate.getFullYear() }} bis
+          {{ week.endDate.getDate() }}.{{ week.endDate.getMonth() + 1 }}.{{
+            week.endDate.getFullYear()
+          }}
         </v-card-title>
         <v-card-text>
-          <div v-for="day in week.days" :key="day.id">
-            <Day v-bind:day="day" />
-          </div>
+          <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>
@@ -48,18 +56,18 @@ export default {
       id: 0,
       date: new Date(),
       monthArray: [
-              'Januar',
-              'Februar',
-              'März',
-              'April',
-              'Mai',
-              'Juni',
-              'Juli',
-              'August',
-              'September',
-              'Oktober',
-              'November',
-              'Dezember'
+        'Januar',
+        'Februar',
+        'März',
+        'April',
+        'Mai',
+        'Juni',
+        'Juli',
+        'August',
+        'September',
+        'Oktober',
+        'November',
+        'Dezember'
       ]
     }
   },
@@ -74,9 +82,9 @@ export default {
     }),
     changeMonth(value) {
       if (value === -1) {
-        this.date = new Date(this.date.getFullYear(), this.date.getMonth(), 0, 1)
+        this.date = new Date(this.date.getFullYear(), this.date.getMonth() - 1)
       } else {
-        this.date = new Date(this.date.getFullYear(), this.date.getMonth() + 2, 0, 1)
+        this.date = new Date(this.date.getFullYear(), this.date.getMonth() + 1)
       }
       this.createMonth(this.date)
     }

src/components/vorstand/ServiceManagementComponents/Day.vue

@@ -1,28 +1,46 @@
 <template>
-  <v-card v-if="day">
-    <v-card-title v-if="day.date">
-      {{ day.name }} den {{ day.date.getDate() }}.{{
-        day.date.getMonth() + 1
-      }}.{{ day.date.getFullYear() }}
-    </v-card-title>
-    <v-card-text>
-      <v-chip v-for="worker in day.worker" :key="day.worker.indexOf(worker)">
-        {{ worker.firstname }} {{ worker.lastname }}
-      </v-chip>
-      <v-autocomplete
-        chips
-        outlined
-        return-object
-        v-model="user"
-        placeholder="Suche Person"
-        :items="allUsers"
-        item-text="fullName"
-        prepend-inner-icon="search"
-        full-width
-      />
-      <v-btn @click="test({ worker: user, day: day })">Hinzufügen</v-btn>
-    </v-card-text>
-  </v-card>
+  <div v-if="day">
+    <v-card :color="color(day)" max-width="300px" min-width="300px">
+      <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-autocomplete
+          chips
+          return-object
+          multiple
+          v-model="day.worker"
+          :items="allUsers"
+          item-text="fullName"
+          label="Dienste"
+          prepend-inner-icon="group_add"
+          filled
+          color="green"
+        >
+          <template v-slot:selection="data">
+            <v-chip
+              v-bind="data.attrs"
+              :input-value="data.selected"
+              close
+              @click="data.select"
+              @click:close="remove(data.item)"
+            >
+              {{ 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-card-text>
+    </v-card>
+  </div>
 </template>
 
 <script>
@@ -33,24 +51,69 @@ export default {
     day: Object
   },
   data() {
-    return {
-      user: null
-    }
+    return {}
+  },
+  created() {
+    this.getUser({date: this.day.date.getTime()/1000})
   },
-  created() {},
   methods: {
     ...mapActions({
-      setWorker: 'sm/setWorker'
+      addUser: 'sm/addUser',
+      getUser: 'sm/getUser',
+      deleteUser: 'sm/deleteUser'
     }),
-    test(data) {
-      this.setWorker(data)
-      console.log('user', this.day)
+    // eslint-disable-next-line no-unused-vars
+    remove(deletedUser) {
+      const obj = this.day.worker.find(a => {
+        return a.username === deletedUser.username
+      })
+      const index = this.day.worker.indexOf(obj)
+      if (index >= 0) this.day.worker.splice(index, 1)
+      this.deleteUser({startdatetime: this.day.date, date: this.day.date.getTime()/1000, user: deletedUser})
+    },
+    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({
       allUsers: 'sm/allUsers'
-    })
+    }),
+    worker() {
+      return this.day.worker
+    }
+  },
+  watch: {
+    worker(newValue, oldValue) {
+      if (oldValue !== newValue) {
+        let addedUser = null
+        for (let user in newValue) {
+          if (!oldValue.includes(newValue[user])) {
+            addedUser = newValue[user]
+            this.addUser({date: this.day.date.getTime()/1000, user: addedUser})
+          }
+        }
+        let deletedUser = null
+        for (let user in oldValue) {
+          if (!newValue.includes(oldValue[user])) {
+            deletedUser = oldValue[user]
+            this.deleteUser({startdatetime: this.day.date, date: this.day.date.getTime()/1000, user: deletedUser})
+          }
+        }
+      }
+    }
   }
 }
 </script>

src/plugins/routes.js

@@ -18,7 +18,14 @@ const url = {
   finanzerSendAllMail: main + 'finanzerSendAllMail',
   finanzerSendOneMail: main + 'finanzerSendOneMail',
   userMain: main + 'user/main',
-  userAddAmount: main + 'user/addAmount'
+  userAddAmount: main + 'user/addAmount',
+  vorstand: {
+    sm: {
+      addUser: main + 'sm/addUser',
+      deleteUser: main + 'sm/deleteUser',
+      getUser: main + 'sm/getUser'
+    }
+  }
 }
 
 export default url

src/store/modules/serviceManagement.js

@@ -20,8 +20,7 @@ const mutations = {
     let id = 0
     const year = date.getFullYear()
     const mon = date.getMonth()
-    let a = new Date(year, mon, 0, 13, 1)
-    console.log('createMonth', a)
+    let a = new Date(year, mon + 1, 0)
     let days = a.getDate()
     let startDate = 1
     for (let intDay = 1; intDay <= days; intDay++) {
@@ -30,45 +29,15 @@ const mutations = {
         break
       }
     }
+    let end = false
     let week = { id: id, days: {} }
-    for (let intDay = startDate; intDay <= days; intDay++) {
-      let currentDate = new Date(year, mon, intDay, 13, 1)
-      console.log('currentDate', currentDate)
+    for (let intDay = startDate; intDay <= days + 7; intDay++) {
+      if (end) break
+      let currentDate = new Date(year, mon, intDay, 12)
 
       switch (currentDate.getDay()) {
         case 1:
-          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
-          }
-
+          mutations.setStartEndDate(week)
           month.push(week)
           id++
           week = { id: id, days: {} }
@@ -88,11 +57,17 @@ const mutations = {
           }
           break
         case 3:
-          week.days.wednesday = {
-            id: currentDate.getDay(),
-            date: currentDate,
-            name: 'Mittwoch',
-            worker: []
+          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: []
+            }
           }
           break
         case 4:
@@ -129,6 +104,9 @@ const mutations = {
           break
       }
     }
+    state.month = month
+  },
+  setStartEndDate: week => {
     if (week.days.monday) {
       week.startDate = week.days.monday.date
     } else if (week.days.tuesday) {
@@ -160,20 +138,24 @@ const mutations = {
     } else if (week.days.monday) {
       week.endDate = week.days.monday.date
     }
-    month.push(week)
-    state.month = month
-    console.log(state.month)
   },
-  setWorker: (state, data) => {
-    console.log('hier ist die mutation', data)
-    for (let week in state.month) {
-      console.log('week', week)
+  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) {
-        console.log(state.month[week].days[day], data.day)
-        if (state.month[week].days[day].date - data.day.date === 0) {
-          state.month[week].days[day].worker.push(data.worker)
-          console.log('sm', state.month)
-          return
+        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
+            })
+          }
         }
       }
     }
@@ -196,9 +178,52 @@ const actions = {
         if (e.response.data === 401) dispatch('logout', null, { root: true })
     }
   },
-  setWorker({ commit }, data) {
-    console.log('hier bin ich', data)
-    commit('setWorker', data)
+  // eslint-disable-next-line no-unused-vars
+  async addUser({ commit, rootState, dispatch }, data) {
+    try {
+      const response = await axios.post(
+        url.vorstand.sm.addUser,
+        { ...data },
+        {
+          headers: { Token: rootState.login.user.accessToken }
+        }
+      )
+      console.log(response.data)
+      commit('updateMonth', {...response.data[0], com: 'add'})
+    } catch (e) {
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+    }
+  },
+  async getUser({ commit, rootState, dispatch }, data) {
+    try {
+      const response = await axios.post(
+        url.vorstand.sm.getUser,
+        { ...data },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
+      for (let item = 0; item < response.data.length; item++) {
+        commit('updateMonth', { ...response.data[item], com: 'add' })
+      }
+    } catch (e) {
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+    }
+  },
+  // eslint-disable-next-line no-unused-vars
+  async deleteUser({ commit, rootState, dispatch }, data) {
+    try {
+      // eslint-disable-next-line no-unused-vars
+      const response = await axios.post(
+        url.vorstand.sm.deleteUser,
+        { ...data },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
+      commit('updateMonth', {...data, com: 'delete'})
+    } catch (e) {
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+    }
   }
 }
 const getters = {