rework data store and add FETCH_ALL, also reflect changes to views

app/src/helpers/dataStore.js

@@ -17,12 +17,12 @@ export default {
       state.users = Object.keys(users).length === 0 ? null : users
     },
 
-    'ADD_USER' (state, user) {
+    'ADD_USERS' (state, user) {
       // FIXME will trigger an error if first created user
       Vue.set(state.users, user.username, user)
     },
 
-    'SET_USERS_PARAM' (state, [username, userData]) {
+    'SET_USERS_DETAILS' (state, [username, userData]) {
       Vue.set(state.users_details, username, userData)
       if (!state.users) return
       const user = state.users[username]
@@ -34,7 +34,7 @@ export default {
       Vue.set(user, 'fullname', `${userData.firstname} ${userData.lastname}`)
     },
 
-    'DEL_USERS_PARAM' (state, username) {
+    'DEL_USERS_DETAILS' (state, username) {
       Vue.delete(state.users_details, username)
       if (state.users) {
         Vue.delete(state.users, username)
@@ -49,39 +49,47 @@ export default {
       if (currentState !== undefined && !force) return currentState
 
       return api.get(param ? `${uri}/${param}` : uri).then(responseData => {
-        const data = responseData[uri] ? responseData[uri] : responseData
+        const data = responseData[storeKey] ? responseData[storeKey] : responseData
-        if (param) {
+        commit('SET_' + storeKey.toUpperCase(), param ? [param, data] : data)
-          commit(`SET_${uri.toUpperCase()}_PARAM`, [param, data])
+        return data
-        } else {
-          commit('SET_' + uri.toUpperCase(), data)
-        }
-        return param ? state[storeKey][param] : state[storeKey]
       })
     },
 
-    'POST' ({ state, commit }, { uri, data }) {
+    'FETCH_ALL' ({ state, commit }, queries) {
-      return api.post(uri, data)
+      // TODO do not get if data is already present
+      return Promise.all(queries.map(({ uri, param, storeKey = uri, force = false }) => {
+        return api.get(param ? `${uri}/${param}` : uri)
+      })).then(responsesData => {
+        return responsesData.map((responseData, i) => {
+          const storeKey = queries[i].storeKey || queries[i].uri
+          const param = queries[i].param
+          const data = responseData[storeKey] ? responseData[storeKey] : responseData
+          commit('SET_' + storeKey.toUpperCase(), param ? [param, data] : data)
+          return data
+        })
+      })
+    },
+
+    'POST' ({ state, commit }, { uri, data, storeKey = uri }) {
+      return api.post(uri, data).then(responseData => {
+        console.log(responseData)
+        const data = responseData[storeKey] ? responseData[storeKey] : responseData
+        commit('ADD_' + storeKey.toUpperCase(), data)
+        return data
+      })
     },
 
     'PUT' ({ state, commit }, { uri, param, data, storeKey = uri }) {
       return api.put(param ? `${uri}/${param}` : uri, data).then(responseData => {
-        const data = responseData[uri] ? responseData[uri] : responseData
+        const data = responseData[storeKey] ? responseData[storeKey] : responseData
-        if (param) {
+        commit('SET_' + storeKey.toUpperCase(), param ? [param, data] : data)
-          commit(`SET_${uri.toUpperCase()}_PARAM`, [param, data])
+        return data
-        } else {
-          commit('SET_' + uri.toUpperCase(), data)
-        }
-        return param ? state[storeKey][param] : state[storeKey]
       })
     },
 
-    'DELETE' ({ state, commit }, { uri, param, data }) {
+    'DELETE' ({ state, commit }, { uri, param, data, storeKey = uri }) {
       return api.delete(param ? `${uri}/${param}` : uri, data).then(() => {
-        if (param) {
+        commit('DEL_' + storeKey.toUpperCase(), param)
-          commit(`DEL_${uri.toUpperCase()}_PARAM`, param)
-        } else {
-          commit('DEL_' + uri.toUpperCase())
-        }
       })
     }
   },

app/src/scss/main.scss

@@ -34,7 +34,7 @@ body {
   .input-group-append ~ .input-group-append {
     min-width: 40%;
   }
-  
+
   select {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
@@ -63,8 +63,56 @@ body {
   }
 }
 
+.card-header h2 {
+  margin: 0;
+}
+
 
 // Fork-awesome overrides
 .fa-fw {
   width: 1.25em !important;
 }
+
+
+// custom css
+.actions {
+  margin-bottom: 1.5rem;
+  display: flex;
+  justify-content: space-between;
+
+  @include media-breakpoint-down(xs) {
+    .buttons {
+      flex-direction: column;
+      justify-content: space-between;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    flex-direction: column-reverse;
+    margin-bottom: 2rem;
+
+    .buttons {
+      display: flex;
+      justify-content: space-between;
+
+      .btn {
+        margin-bottom: .5rem;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    .btn-success {
+      margin-left: .5rem;
+    }
+  }
+
+  .input-group {
+    @include media-breakpoint-up(md) {
+      width: 25%;
+    }
+    @include media-breakpoint-up(lg) {
+      width: 35%;
+    }
+  }
+}

app/src/views/user/UserCreate.vue

@@ -173,9 +173,7 @@ export default {
 
       this.$store.dispatch(
         'POST', { uri: 'users', data }
-      ).then(responseData => {
+      ).then(() => {
-        // FIXME API doesn't return the same data as '/users'
-        this.$store.commit('ADD_USER', responseData)
         this.$router.push({ name: 'user-list' })
       }).catch(error => {
         this.server.error = error.message
@@ -217,8 +215,7 @@ export default {
   },
 
   created () {
-    this.$store.dispatch('FETCH', { uri: 'domains' })
+    this.$store.dispatch('FETCH_ALL', [{ uri: 'domains' }, { uri: 'users' }])
-    this.$store.dispatch('FETCH', { uri: 'users' })
   },
   components: {
     SplittedMailInput

app/src/views/user/UserEdit.vue

@@ -234,10 +234,10 @@ export default {
   },
 
   created () {
-    this.$store.dispatch('FETCH', { uri: 'domains' })
+    this.$store.dispatch('FETCH_ALL', [
-    this.$store.dispatch('FETCH',
+      { uri: 'domains' },
       { uri: 'users', param: this.name, storeKey: 'users_details' }
-    ).then(userData => {
+    ]).then(([domainsData, userData]) => {
       this.form.firstname = userData.firstname
       this.form.lastname = userData.lastname
       this.form.mail = userData.mail

app/src/views/user/UserInfo.vue

@@ -122,7 +122,7 @@ export default {
     deleteUser () {
       const data = this.purge ? { purge: '' } : {}
       this.$store.dispatch('DELETE',
-        { uri: 'users', data, param: this.name }
+        { uri: 'users', param: this.name, data, storeKey: 'users_details' }
       ).then(() => {
         this.$router.push({ name: 'user-list' })
       })
@@ -144,10 +144,6 @@ export default {
   }
 }
 
-h2 {
-  margin: 0;
-}
-
 .icon.fa-user {
   font-size: 10rem;
   padding-right: 3rem;

app/src/views/user/UserList.vue

@@ -83,48 +83,6 @@ p {
   margin: 0
 }
 
-.actions {
-  margin-bottom: 1.5rem;
-  display: flex;
-  justify-content: space-between;
-
-  @include media-breakpoint-down(xs) {
-    .buttons {
-      flex-direction: column;
-      justify-content: space-between;
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-    flex-direction: column-reverse;
-    margin-bottom: 2rem;
-
-    .buttons {
-      display: flex;
-      justify-content: space-between;
-
-      .btn {
-        margin-bottom: .5rem;
-      }
-    }
-  }
-
-  @include media-breakpoint-up(md) {
-    .btn-success {
-      margin-left: .5rem;
-    }
-  }
-
-  .input-group {
-    @include media-breakpoint-up(md) {
-      width: 25%;
-    }
-    @include media-breakpoint-up(lg) {
-      width: 35%;
-    }
-  }
-}
-
 .skeleton {
   @each $i, $opacity in 1 .75, 2 .5, 3 .25 {
     .list-group-item:nth-child(#{$i}) { opacity: $opacity; }