add FETCH args for custom keyStore and param, separate users and precise user data storing

app/src/helpers/dataStore.js

@@ -1,26 +1,36 @@
+import Vue from 'vue'
 import api from './api'
 
 export default {
   state: () => ({
-    domains: undefined,
+    domains: undefined, // Array
-    users: undefined
+    users: undefined, // basic user data: Object {username: {data}}
+    users_details: {} // precise user data: Object {username: {data}}
   }),
   mutations: {
     'SET_DOMAINS' (state, domains) {
       state.domains = domains
     },
     'SET_USERS' (state, users) {
-      console.log(users)
+      state.users = Object.keys(users).length === 0 ? null : users
-      state.users = Object.keys(users).length === 0 ? null : Object.values(users)
+    },
+    'SET_USERS_PARAM' (state, [username, userData]) {
+      Vue.set(state.users_details, username, userData)
     }
   },
   actions: {
-    async 'FETCH' ({ state, commit }, { uri, force = false }) {
+    'FETCH' ({ state, commit, dispatch }, { uri, param, storeKey = uri, force = false }) {
+      const currentState = param ? state[storeKey][param] : state[storeKey]
       // if data has already been queried, simply return
-      if (state[uri] !== undefined && !force) return
+      if (currentState !== undefined && !force) return
-      return api.get(uri).then(responseData => {
+      console.log(`will query: "/${param ? `${uri}/${param}` : uri}" and will store in "${storeKey || uri}"`)
+      return api.get(param ? `${uri}/${param}` : uri).then(responseData => {
         const data = responseData[uri] ? responseData[uri] : responseData
-        commit('SET_' + uri.toUpperCase(), data)
+        if (param) {
+          commit(`SET_${uri.toUpperCase()}_PARAM`, [param, data])
+        } else {
+          commit('SET_' + uri.toUpperCase(), data)
+        }
       })
     }
   },

app/src/views/user/User.vue

@@ -1,52 +1,63 @@
 <template>
   <div class="user">
     <breadcrumb />
+
     <b-card :class="{skeleton: !user}">
       <template v-slot:header>
         <h2>{{ user ? user.fullname : '' }}</h2>
       </template>
+
       <div class="d-flex align-items-center">
         <icon iname="user" class="fa-fw" />
+
         <div class="w-100">
           <template v-if="user">
             <b-row>
               <b-col><strong>{{ $t('user_username') }}</strong></b-col>
               <b-col>{{ user.username }}</b-col>
             </b-row>
+
             <b-row>
               <b-col><strong>{{ $t('user_email') }}</strong></b-col>
               <b-col class="font-italic">
                 {{ user.mail }}
               </b-col>
             </b-row>
+
             <b-row>
               <b-col><strong>{{ $t('user_mailbox_quota') }}</strong></b-col>
               <b-col>{{ user['mailbox-quota'].limit }}</b-col>
             </b-row>
+
             <b-row>
               <b-col><strong>{{ $t('user_mailbox_use') }}</strong></b-col>
               <b-col>{{ user['mailbox-quota'].use }}</b-col>
             </b-row>
+
             <b-row v-for="(trad, mailType) in {'mail-aliases': 'user_emailaliases', 'mail-forward': 'user_emailforward'}" :key="mailType">
               <b-col><strong>{{ $t(trad) }}</strong></b-col>
-              <b-col>
+
-                <ul v-if="user[mailType] && user[mailType].length > 1">
+              <b-col v-if="user[mailType]">
+                <ul v-if="user[mailType].length > 1">
                   <li v-for="(alias, index) in user[mailType]" :key="index">
                     {{ alias }}
                   </li>
                 </ul>
+
                 <template v-else-if="user[mailType][0]">
                   {{ user[mailType][0] }}
                 </template>
               </b-col>
             </b-row>
           </template>
+
           <!-- skeleton -->
           <template v-else>
             <b-row v-for="(n, index) in 6" :key="index">
               <b-col>
                 <strong class="rounded" />
               </b-col>
+
               <b-col>
                 <span v-if="n <= 4" class="rounded" />
               </b-col>
@@ -61,6 +72,7 @@
           >
             {{ user ? $t('user_username_edit', {name: user.username}) : '' }}
           </b-button>
+
           <b-button :variant="user ? 'danger' : 'dark'" class="ml-2">
             {{ user ? $t('delete') : '' }}
           </b-button>
@@ -71,8 +83,6 @@
 </template>
 
 <script>
-import api from '@/helpers/api'
-
 export default {
   name: 'User',
   props: {
@@ -81,15 +91,15 @@ export default {
       required: true
     }
   },
-  data: function () {
+  computed: {
-    return {
+    user () {
-      user: undefined
+      return this.$store.state.data.users_details[this.name]
     }
   },
-  async created () {
+  created () {
-    const data = await api.get('users/' + this.name)
+    this.$store.dispatch('FETCH',
-    if (!data) return
+      { uri: 'users', param: this.name, storeKey: 'users_details' }
-    this.user = data
+    )
   }
 }
 </script>

app/src/views/user/UserCreate.vue

@@ -152,13 +152,11 @@ export default {
     onSubmit () {
       const data = this.form
       for (const key in this.validation) {
-        console.log(this.validation[key] === false, this.validation[key])
         if (this.validation[key] === false) return
       }
       const quota = data.mailbox_quota
       data.mailbox_quota = parseInt(quota) ? quota + 'M' : 0
       data.mail = `${data.email}@${data.domain}`
-      console.log('go')
       // TODO post data
     },
     validatePassword () {

app/src/views/user/UserList.vue

@@ -15,6 +15,7 @@
           <icon iname="key-modern" />
           {{ $t('groups_and_permissions_manage') }}
         </b-button>
+
         <b-button variant="success" :to="{name: 'user-create'}">
           <icon iname="plus" />
           {{ $t('users_new') }}
@@ -63,7 +64,8 @@ export default {
   },
   computed: {
     users () {
-      return this.$store.state.data.users
+      const users = this.$store.state.data.users
+      return users ? Object.values(users) : users
     },
     filteredUser () {
       const search = this.search.toLowerCase()
@@ -72,7 +74,7 @@ export default {
       })
     }
   },
-  async created () {
+  created () {
     this.$store.dispatch('FETCH', { uri: 'users' })
   }
 }