added loading and fix bug thät sm delete user when switch months

src/components/vorstand/ServiceManagement.vue

@@ -91,7 +91,7 @@ export default {
   },
   computed: {
     ...mapGetters({
-      month: 'sm/month'
+      month: 'sm/month',
     })
   }
 }

src/components/vorstand/ServiceManagementComponents/Day.vue

@@ -1,43 +1,57 @@
 <template>
   <div v-if="day">
-    <v-card :color="color(day)" max-width="300px" min-width="300px">
+    <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-autocomplete
+        <v-expand-transition>
-          chips
+          <v-row align="center" justify="center" v-if="day.loading">
-          return-object
+            <v-progress-circular indeterminate color="black" />
-          multiple
+          </v-row>
-          v-model="day.worker"
+        </v-expand-transition>
-          :items="allUsers"
+        <v-expand-transition>
-          item-text="fullName"
+          <div v-show="!day.loading">
-          label="Dienste"
+            <v-autocomplete
-          prepend-inner-icon="group_add"
+              chips
-          filled
+              return-object
-          color="green"
+              multiple
-        >
+              v-model="day.worker"
-          <template v-slot:selection="data">
+              :items="allUsers"
-            <v-chip
+              item-text="fullName"
-              v-bind="data.attrs"
+              label="Dienste"
-              :input-value="data.selected"
+              prepend-inner-icon="group_add"
-              close
+              filled
-              @click="data.select"
+              color="green"
-              @click:close="remove(data.item)"
+              @input="searchInput=null"
+              :search-input.sync="searchInput"
+              @blur="focused=false"
+              @focus="focused=true"
+
             >
-              {{ data.item.firstname }} {{ data.item.lastname }}
+              <template v-slot:selection="data">
-            </v-chip>
+                <v-chip
-          </template>
+                  v-bind="data.attrs"
-          <template v-slot:item="data">
+                  :input-value="data.selected"
-            <v-list-item-content>
+                  close
-              <v-list-item-title>
+                  @click="data.select"
-                {{ data.item.firstname }} {{ data.item.lastname }}
+                  @click:close="remove(data.item)"
-              </v-list-item-title>
+                >
-            </v-list-item-content>
+                  {{ data.item.firstname }} {{ data.item.lastname }}
-          </template>
+                </v-chip>
-        </v-autocomplete>
+              </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>
+          </div>
+        </v-expand-transition>
       </v-card-text>
     </v-card>
   </div>
@@ -51,16 +65,25 @@ export default {
     day: Object
   },
   data() {
-    return {}
+    return {
+      searchInput: null,
+      focused: false
+    }
   },
   created() {
-    this.getUser({date: this.day.date.getTime()/1000})
+    this.setLoading(this.day.date)
+    this.getUser({
+      date: this.day.date.getTime() / 1000,
+      startdatetime: this.day.date
+    })
   },
   methods: {
     ...mapActions({
       addUser: 'sm/addUser',
       getUser: 'sm/getUser',
-      deleteUser: 'sm/deleteUser'
+      deleteUser: 'sm/deleteUser',
+      setLoading: 'sm/setDayLoading',
+      setNotLoading: 'sm/setDayNotLoading'
     }),
     // eslint-disable-next-line no-unused-vars
     remove(deletedUser) {
@@ -69,7 +92,14 @@ export default {
       })
       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})
+      this.deleteUser({
+        startdatetime: this.day.date,
+        date: this.day.date.getTime() / 1000,
+        user: deletedUser
+      })
+    },
+    test(event) {
+      console.log('blur', event)
     },
     color: day => {
       if (day) {
@@ -85,11 +115,12 @@ export default {
       } else {
         return 'grey lighten-4'
       }
-    }
+    },
   },
   computed: {
     ...mapGetters({
-      allUsers: 'sm/allUsers'
+      allUsers: 'sm/allUsers',
+      disabled: 'sm/disabled'
     }),
     worker() {
       return this.day.worker
@@ -97,22 +128,39 @@ export default {
   },
   watch: {
     worker(newValue, oldValue) {
-      if (oldValue !== newValue) {
+      if (oldValue !== newValue && this.focused) {
         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})
+            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})
+            console.log("deleteUser", deletedUser, this.day.date)
+            this.deleteUser({
+              startdatetime: this.day.date,
+              date: this.day.date.getTime() / 1000,
+              user: deletedUser
+            })
           }
         }
       }
+    },
+    day() {
+      this.getUser({
+        date: this.day.date.getTime() / 1000,
+        startdatetime: this.day.date
+      })
+    },
+    focused(newVal, oldValue) {
+      console.log(newVal, oldValue)
     }
   }
 }

src/plugins/routes.js

@@ -1,5 +1,6 @@
 //const main = 'https://192.168.5.128:5000/'
-const main = 'https://localhost:5000/'
+//const main = 'https://localhost:5000/'
+const main = 'http://192.168.5.118:5000/'
 //const main = 'https://groeger-clan.duckdns.org:5000/'
 
 const url = {

src/store/modules/serviceManagement.js

@@ -3,7 +3,8 @@ import url from '@/plugins/routes'
 
 const state = {
   month: [],
-  allUsers: []
+  allUsers: [],
+  disabled: false
 }
 
 const mutations = {
@@ -45,7 +46,8 @@ const mutations = {
             id: currentDate.getDay(),
             date: currentDate,
             name: 'Montag',
-            worker: []
+            worker: [],
+            loading: false
           }
           break
         case 2:
@@ -53,7 +55,8 @@ const mutations = {
             id: currentDate.getDay(),
             date: currentDate,
             name: 'Dienstag',
-            worker: []
+            worker: [],
+            loading: false
           }
           break
         case 3:
@@ -66,7 +69,8 @@ const mutations = {
               id: currentDate.getDay(),
               date: currentDate,
               name: 'Mittwoch',
-              worker: []
+              worker: [],
+              loading: false
             }
           }
           break
@@ -75,7 +79,8 @@ const mutations = {
             id: currentDate.getDay(),
             date: currentDate,
             name: 'Donnerstag',
-            worker: []
+            worker: [],
+            loading: false
           }
           break
         case 5:
@@ -83,7 +88,8 @@ const mutations = {
             id: currentDate.getDay(),
             date: currentDate,
             name: 'Freitag',
-            worker: []
+            worker: [],
+            loading: false
           }
           break
         case 6:
@@ -91,7 +97,8 @@ const mutations = {
             id: currentDate.getDay(),
             date: currentDate,
             name: 'Samstag',
-            worker: []
+            worker: [],
+            loading: false
           }
           break
         case 0:
@@ -99,7 +106,8 @@ const mutations = {
             id: currentDate.getDay(),
             date: currentDate,
             name: 'Sontag',
-            worker: []
+            worker: [],
+            loading: false
           }
           break
       }
@@ -146,7 +154,7 @@ const mutations = {
       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
+            return a.username === user.username
           })
           if (!worker && data.com === 'add') {
             state.month[week].days[day].worker.push({
@@ -159,11 +167,24 @@ const mutations = {
         }
       }
     }
+  },
+  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
   }
 }
 const actions = {
   createMonth({ commit }, date) {
+    commit('setDisabled', true)
     commit('createMonth', date)
+    commit('setDisabled', false)
   },
   async getAllUsers({ commit, rootState, dispatch }) {
     try {
@@ -188,14 +209,14 @@ const actions = {
           headers: { Token: rootState.login.user.accessToken }
         }
       )
-      console.log(response.data)
+      commit('updateMonth', { ...response.data[0], com: 'add' })
-      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) {
+  async getUser({ commit, rootState, dispatch, getters }, data) {
+    commit('setDayLoading', { date: data.startdatetime, getters })
     try {
       const response = await axios.post(
         url.vorstand.sm.getUser,
@@ -205,6 +226,7 @@ const actions = {
       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 })
@@ -219,11 +241,17 @@ const actions = {
         { ...data },
         { headers: { Token: rootState.login.user.accessToken } }
       )
-      commit('updateMonth', {...data, com: 'delete'})
+      commit('updateMonth', { ...data, com: 'delete' })
     } catch (e) {
       if (e.response)
         if (e.response.status === 401) dispatch('logout', null, { root: true })
     }
+  },
+  setDayLoading({ commit, getters }, date) {
+    commit('setDayLoading', {date, getters})
+  },
+  setDayNotLoading({commit, getters}, date) {
+    commit('setDayNotLoading', {date, getters})
   }
 }
 const getters = {
@@ -232,6 +260,22 @@ const getters = {
   },
   allUsers: state => {
     return state.allUsers
+  },
+  getDayLoading: (state, getters) => date => {
+    let day = getters.getDay(date)
+    return day.loading
+  },
+  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
   }
 }