feat:User CRUD

src/components/MainNavigationDrawer.vue

@@ -111,13 +111,6 @@ export default {
               icon: mdiLoginVariant,
               title: 'Log in',
               to: '/login'
-            },
-            {
-              icon: mdiAccountGroup,
-              org: false,
-              title: 'Users',
-              to: '/users',
-              auth: true
             }
           ]
         },
@@ -198,6 +191,17 @@ export default {
             //   title: 'Teams'
             // }
           ]
+        },
+        {
+          header: 'Admin section',
+          items: [
+            {
+              can: ['read', 'users'],
+              icon: mdiAccountGroup,
+              title: 'Users',
+              to: '/users'
+            }
+          ]
         }
       ]
     }

src/components/UserDetail.vue

@@ -23,18 +23,27 @@
 
                   <ValidationProvider
                     v-slot="{ errors }"
-                    name="full_name"
+                    name="preferred name"
                     rules="required|min:1|max:100"
                   >
                     <v-text-field
-                      v-model.trim="value.full_name"
+                      v-model.trim="value.name"
                       :error-messages="errors"
                       :readonly="!editing"
-                      label="Full Name"
+                      label="Preferred name"
                       required
                     ></v-text-field>
                   </ValidationProvider>
 
+                  <ValidationProvider v-slot="{ errors }" name="full_name">
+                    <v-text-field
+                      v-model.trim="value.full_name"
+                      :error-messages="errors"
+                      :readonly="!editing"
+                      label="Full name"
+                    ></v-text-field>
+                  </ValidationProvider>
+
                   <ValidationProvider
                     v-if="create"
                     v-slot="{ errors }"
@@ -67,28 +76,15 @@
                     ></v-text-field>
                   </ValidationProvider>
 
-                  <ValidationProvider
-                    v-slot="{ errors }"
-                    name="preferred name"
-                    rules="required|min:1|max:100"
-                  >
-                    <v-text-field
-                      v-model.trim="value.name"
-                      :error-messages="errors"
-                      :readonly="!editing"
-                      label="Preferred Name"
-                      required
-                    ></v-text-field>
-                  </ValidationProvider>
-
                   <ValidationProvider
                     v-slot="{ errors }"
                     name="roles"
                     rules="required"
                   >
                     <v-select
                       v-model="value.roles"
-                      :items="['user', 'manager']"
+                      class="pt-3"
+                      :items="roles"
                       :error-messages="errors"
                       chips
                       deletable-chips
@@ -106,6 +102,7 @@
               <standard-options :editing="editing" :value="value" as="users" />
 
               <standard-audit v-if="!editing" :value="value" />
+
               <standard-identifier v-if="!editing" :value="value" />
             </v-container>
           </v-card>
@@ -133,6 +130,21 @@ export default {
     editing: { default: false, type: Boolean },
     value: { type: Object, required: true },
     create: { default: false, type: Boolean }
+  },
+
+  computed: {
+    roles() {
+      const roles = ['user', 'manager']
+      if (
+        this.$cannotPatch('users', {
+          _id: this.value._id
+        })
+      ) {
+        return roles.filter(role => role === this.value.roles)
+      }
+
+      return roles
+    }
   }
 }
 </script>

src/components/UsersSearch.vue

@@ -1,5 +1,38 @@
 <template>
   <v-container fluid>
+    <v-row>
+      <v-col cols="12" md="6">
+        <v-select
+          v-model="selectedRoles"
+          :items="rolesOption"
+          chips
+          deletable-chips
+          dense
+          label="Roles"
+          filled
+          flat
+          hide-details
+          multiple
+          small-chips
+        ></v-select>
+      </v-col>
+
+      <v-col cols="12" md="6">
+        <v-select
+          v-model="selectedOptions"
+          :items="optionItems"
+          chips
+          deletable-chips
+          dense
+          label="Options"
+          filled
+          flat
+          hide-details
+          small-chips
+        ></v-select>
+      </v-col>
+    </v-row>
+
     <v-row dense>
       <v-col>
         <v-text-field
@@ -33,17 +66,27 @@
             disable-sort
             item-key="_id"
           >
-            <template #item.full_name="{ item }">
+            <template #item.name="{ item }">
               <nuxt-link
-                v-if="showLink && item.full_name"
+                v-if="showLink && item.name"
                 :to="{
                   name: 'users-userId',
                   params: {
                     userId: item._id
                   }
                 }"
-                >{{ item.full_name }}</nuxt-link
-              ><span v-else>{{ item.full_name || '--' }}</span>
+                >{{ item.name }}</nuxt-link
+              ><span v-else>{{ item.name || '--' }}</span>
+            </template>
+
+            <template #item.roles="{ item }">
+              <span>{{
+                (item.roles && item.roles.length && item.roles[0]) || '--'
+              }}</span>
+            </template>
+
+            <template #item.indicators="{ item }">
+              <indicator-cell :value="item" />
             </template>
 
             <template #item.icons="{ item }">
@@ -60,9 +103,14 @@
 
 <script>
 import _debounce from 'lodash/debounce'
+import IndicatorCell from '@/components/IndicatorCell'
 import { escapeRegExp } from '@/lib/utils'
 
 export default {
+  components: {
+    IndicatorCell
+  },
+
   props: {
     showLink: { default: false, type: Boolean }
   },
@@ -76,8 +124,8 @@ export default {
       },
       {
         align: 'left',
-        text: 'Full name',
-        value: 'full_name'
+        text: 'Preferred name',
+        value: 'name'
       },
       {
         align: 'left',
@@ -86,21 +134,32 @@ export default {
       },
       {
         align: 'left',
-        text: 'Roles',
+        text: 'Role',
         value: 'roles'
       },
+      {
+        align: 'right',
+        value: 'indicators',
+        width: '5%'
+      },
       {
         align: 'right',
         value: 'icons',
         width: '5%'
       }
     ],
 
+    optionItems: ['Deactivated'],
+    rolesOption: ['manager', 'user'],
+
     queryUserIds: [],
 
     search: null,
     searchDebounce: null,
 
+    selectedOptions: null,
+    selectedRoles: null,
+
     tableOptions: {
       descending: false,
       page: 1,
@@ -111,37 +170,45 @@ export default {
 
   computed: {
     usersFetchQuery() {
-      const { search, tableOptions } = this
+      const { search, selectedOptions, selectedRoles, tableOptions } = this
       const { page, itemsPerPage } = tableOptions
 
       const query = {
         $limit: itemsPerPage,
         $skip: (page - 1) * itemsPerPage,
         $sort: { email: 1, _id: 1 },
-        $select: ['_id', 'full_name', 'email', 'name', 'roles']
+        $select: ['_id', 'email', 'full_name', 'is_enabled', 'name', 'roles']
       }
 
       const ands = []
 
+      if (selectedOptions && selectedOptions.includes('Deactivated')) {
+        ands.push({ is_enabled: false })
+      }
+
+      if (selectedRoles && selectedRoles.length) {
+        ands.push({ roles: { $in: selectedRoles } })
+      }
+
       if (search && search.length) {
         // TODO: Implement n-grams for partial full-text search! https://en.wikipedia.org/wiki/N-gram
         ands.push({
           $or: [
             {
               name: {
-                $regex: `${escapeRegExp(search)}`,
+                $regex: `^${escapeRegExp(search)}`,
                 $options: 'i'
               }
             },
             {
               full_name: {
-                $regex: `${escapeRegExp(search)}`,
+                $regex: `^${escapeRegExp(search)}`,
                 $options: 'i'
               }
             },
             {
               email: {
-                $regex: `${escapeRegExp(search)}`,
+                $regex: `^${escapeRegExp(search)}`,
                 $options: 'i'
               }
             }

src/pages/users/_userId/index.vue

@@ -34,6 +34,7 @@
 import { mapActions, mapGetters, mapState, mapMutations } from 'vuex'
 import { ValidationObserver } from 'vee-validate'
 import _merge from 'lodash/merge'
+import _omit from 'lodash/omit'
 import { defaultUser, patchData } from '@/lib/edit'
 import UserDetail from '@/components/UserDetail'
 export default {
@@ -124,24 +125,19 @@ export default {
     async onSave() {
       if (!(await this.$refs.observer.validate())) return
 
-      const {
-        // eslint-disable-next-line camelcase
-        instance: { _id, email, full_name, is_enabled, name, roles }
-      } = this
+      const { instance } = this
+      const value = _omit(instance, ['password'])
       const data = patchData({
-        email,
-        full_name,
-        is_enabled,
-        name,
-        roles: [roles]
+        ...value,
+        roles: [instance.roles]
       })
 
       try {
         // HACK: Ensure that we have a fresh model afterwards
-        this.$store.commit('users/removeItem', _id)
+        this.$store.commit('users/removeItem', instance._id)
 
-        await this.patch([_id, data, {}])
-        await this.fetchUsers({ query: { _id } })
+        await this.patch([instance._id, data, {}])
+        await this.fetchUsers({ query: { _id: instance._id } })
 
         this.setEditing(false)
         this.setEditorDirty(-1)
@@ -154,9 +150,9 @@ export default {
         this.$bus.$emit('edit-status', { type: 'error', message: err.message })
 
         // HACK: Ensure that we have a fresh model afterwards
-        this.$store.commit('users/removeItem', _id)
+        this.$store.commit('users/removeItem', instance._id)
 
-        await this.fetchUsers({ query: { _id } })
+        await this.fetchUsers({ query: { _id: instance._id } })
       }
     }
   }

src/pages/users/create.vue

@@ -12,6 +12,7 @@
 
 <script>
 import { mapActions, mapState, mapMutations } from 'vuex'
+import _pick from 'lodash/pick'
 import { ValidationObserver } from 'vee-validate'
 import { createData, defaultUser } from '@/lib/edit'
 import UserDetail from '@/components/UserDetail.vue'
@@ -92,11 +93,9 @@ export default {
     },
 
     async personCreate() {
-      const {
-        // eslint-disable-next-line camelcase
-        instance: { email, full_name, name }
-      } = this
-      const data = createData({ email, full_name, name })
+      const { instance } = this
+      const value = _pick(instance, ['email', 'full_name', 'name'])
+      const data = createData(value)
       return await this.createPerson([data, {}])
     },
 

src/pages/users/index.vue

@@ -17,12 +17,9 @@
 
               <users-search show-link>
                 <template #actions="{ item }">
-                  <v-icon
-                    v-if="item.full_name"
-                    color="tertiary"
-                    @click="open(item._id)"
-                    >{{ mdiOpenInNew }}</v-icon
-                  >
+                  <v-icon color="tertiary" @click="open(item._id)">{{
+                    mdiOpenInNew
+                  }}</v-icon>
                 </template>
               </users-search>
             </v-card>