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

2020-01-23 11:11:26 +01:00 · 2020-01-23 11:11:26 +01:00 · db524355b5
parent d6896d29b2
commit db524355b5
4 changed files with 148 additions and 55 deletions
--- a/src/components/vorstand/ServiceManagement.vue
+++ b/src/components/vorstand/ServiceManagement.vue
@ -91,7 +91,7 @@ export default {
  },
  computed: {
    ...mapGetters({
-      month: 'sm/month'
+      month: 'sm/month',
    })
  }
 }
--- a/src/components/vorstand/ServiceManagementComponents/Day.vue
+++ b/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
-          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)"
+        <v-expand-transition>
+          <v-row align="center" justify="center" v-if="day.loading">
+            <v-progress-circular indeterminate color="black" />
+          </v-row>
+        </v-expand-transition>
+        <v-expand-transition>
+          <div v-show="!day.loading">
+            <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"
+              @input="searchInput=null"
+              :search-input.sync="searchInput"
+              @blur="focused=false"
+              @focus="focused=true"
+
            >
-              {{ 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>
+              <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>
+          </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)
    }
  }
 }
--- a/src/plugins/routes.js
+++ b/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 = {
--- a/src/store/modules/serviceManagement.js
+++ b/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
  }
 }