feat:User CRUD

src/components/MainNavigationDrawer.vue

@@ -66,7 +66,8 @@ import {
   mdiNoteOutline,
   mdiTag,
   mdiOfficeBuilding,
-  mdiViewGrid
+  mdiViewGrid,
+  mdiAccountGroup
 } from '@mdi/js'
 
 export default {
@@ -110,6 +111,13 @@ export default {
               icon: mdiLoginVariant,
               title: 'Log in',
               to: '/login'
+            },
+            {
+              icon: mdiAccountGroup,
+              org: false,
+              title: 'Users',
+              to: '/users',
+              auth: true
             }
           ]
         },

src/components/UserAccountEdit.vue

@@ -7,13 +7,13 @@
         <v-card-text>
           <ValidationProvider
             v-slot="{ errors }"
-            name="name"
+            name="preferred name"
             rules="required|max:100"
           >
             <v-text-field
               v-model="name"
               :error-messages="errors"
-              label="Name"
+              label="Preferred Name"
               required
             ></v-text-field>
           </ValidationProvider>

src/components/UserDetail.vue

@@ -0,0 +1,138 @@
+<template>
+  <v-row>
+    <v-col>
+      <v-row>
+        <v-col>
+          <v-card>
+            <v-container fluid>
+              <v-row>
+                <v-col>
+                  <ValidationProvider
+                    v-slot="{ errors }"
+                    name="email"
+                    rules="required|email"
+                  >
+                    <v-text-field
+                      v-model.trim="value.email"
+                      :error-messages="errors"
+                      :readonly="!editing"
+                      label="Email"
+                      required
+                    ></v-text-field>
+                  </ValidationProvider>
+
+                  <ValidationProvider
+                    v-slot="{ errors }"
+                    name="full_name"
+                    rules="required|min:1|max:100"
+                  >
+                    <v-text-field
+                      v-model.trim="value.full_name"
+                      :error-messages="errors"
+                      :readonly="!editing"
+                      label="Full Name"
+                      required
+                    ></v-text-field>
+                  </ValidationProvider>
+
+                  <ValidationProvider
+                    v-if="create"
+                    v-slot="{ errors }"
+                    name="password"
+                    rules="required|min:10|max:100"
+                    vid="password"
+                  >
+                    <v-text-field
+                      v-model.trim="value.password"
+                      :error-messages="errors"
+                      :readonly="!editing"
+                      label="Password"
+                      required
+                      type="password"
+                    ></v-text-field>
+                  </ValidationProvider>
+
+                  <ValidationProvider
+                    v-if="create"
+                    v-slot="{ errors }"
+                    name="confirmation"
+                    rules="required|confirmed:password"
+                  >
+                    <v-text-field
+                      v-model="value.password_confirm"
+                      :error-messages="errors"
+                      label="Password confirmation"
+                      required
+                      type="password"
+                    ></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']"
+                      :error-messages="errors"
+                      chips
+                      deletable-chips
+                      dense
+                      label="Roles"
+                      hide-details
+                      small-chips
+                      variant="solo"
+                      :readonly="!editing"
+                    ></v-select>
+                  </ValidationProvider>
+                </v-col>
+              </v-row>
+
+              <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>
+        </v-col>
+      </v-row>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import { ValidationProvider } from 'vee-validate'
+import StandardAudit from '@/components/StandardAudit'
+import StandardIdentifier from '@/components/StandardIdentifier'
+import StandardOptions from '@/components/StandardOptions'
+
+export default {
+  components: {
+    StandardAudit,
+    StandardIdentifier,
+    StandardOptions,
+    ValidationProvider
+  },
+
+  props: {
+    editing: { default: false, type: Boolean },
+    value: { type: Object, required: true },
+    create: { default: false, type: Boolean }
+  }
+}
+</script>

src/components/UserPasswordEdit.vue

@@ -8,7 +8,7 @@
           <ValidationProvider
             v-slot="{ errors }"
             name="current password"
-            rules="required|min:6|max:100"
+            rules="required|min:10|max:100"
           >
             <v-text-field
               v-model="current_password"
@@ -22,7 +22,7 @@
           <ValidationProvider
             v-slot="{ errors }"
             name="new password"
-            rules="required|min:6|max:100"
+            rules="required|min:10|max:100"
             vid="new_password"
           >
             <v-text-field

src/components/UsersSearch.vue

@@ -0,0 +1,199 @@
+<template>
+  <v-container fluid>
+    <v-row dense>
+      <v-col>
+        <v-text-field
+          v-model.trim="searchDebounce"
+          :append-icon="mdiMagnify"
+          filled
+          flat
+          label="Filter users"
+        ></v-text-field>
+      </v-col>
+    </v-row>
+
+    <v-row dense>
+      <v-col>
+        <feathers-vuex-find
+          v-slot="{ isFindPending: loading, items: users, pagination }"
+          :fetch-query="usersFetchQuery"
+          :query="usersQuery"
+          :watch="['fetchQuery.$and', 'fetchQuery.$limit', 'fetchQuery.$skip']"
+          qid="search"
+          service="users"
+        >
+          <v-data-table
+            :footer-props="{ itemsPerPageOptions: [10, 50, 100] }"
+            :headers="headers"
+            :hide-default-header="$vuetify.breakpoint.xsOnly"
+            :items="users"
+            :loading="loading"
+            :options.sync="tableOptions"
+            :server-items-length="pagination ? pagination.total : 0"
+            disable-sort
+            item-key="_id"
+          >
+            <template #item.full_name="{ item }">
+              <nuxt-link
+                v-if="showLink && item.full_name"
+                :to="{
+                  name: 'users-userId',
+                  params: {
+                    userId: item._id
+                  }
+                }"
+                >{{ item.full_name }}</nuxt-link
+              ><span v-else>{{ item.full_name || '--' }}</span>
+            </template>
+
+            <template #item.icons="{ item }">
+              <span v-if="$scopedSlots.actions" class="text-no-wrap">
+                <slot name="actions" :item="item" />
+              </span>
+            </template>
+          </v-data-table>
+        </feathers-vuex-find>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import _debounce from 'lodash/debounce'
+import { escapeRegExp } from '@/lib/utils'
+
+export default {
+  props: {
+    showLink: { default: false, type: Boolean }
+  },
+
+  data: () => ({
+    headers: [
+      {
+        align: 'center',
+        value: 'select',
+        width: '50px'
+      },
+      {
+        align: 'left',
+        text: 'Full name',
+        value: 'full_name'
+      },
+      {
+        align: 'left',
+        text: 'Email',
+        value: 'email'
+      },
+      {
+        align: 'left',
+        text: 'Roles',
+        value: 'roles'
+      },
+      {
+        align: 'right',
+        value: 'icons',
+        width: '5%'
+      }
+    ],
+
+    queryUserIds: [],
+
+    search: null,
+    searchDebounce: null,
+
+    tableOptions: {
+      descending: false,
+      page: 1,
+      itemsPerPage: 100,
+      totalItems: null
+    }
+  }),
+
+  computed: {
+    usersFetchQuery() {
+      const { search, 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']
+      }
+
+      const ands = []
+
+      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)}`,
+                $options: 'i'
+              }
+            },
+            {
+              full_name: {
+                $regex: `${escapeRegExp(search)}`,
+                $options: 'i'
+              }
+            },
+            {
+              email: {
+                $regex: `${escapeRegExp(search)}`,
+                $options: 'i'
+              }
+            }
+          ]
+        })
+      }
+
+      if (ands.length) query.$and = ands
+
+      return query
+    },
+
+    paginationSearch() {
+      return this.$store.state.users.pagination.search
+    },
+
+    usersQuery() {
+      return {
+        _id: { $in: this.queryUserIds },
+        $sort: { name: 1, _id: 1 }
+      }
+    }
+  },
+
+  watch: {
+    paginationSearch(newValue) {
+      this.queryUserIds = (newValue && newValue.ids) || []
+    },
+
+    searchDebounce(newValue) {
+      this.debouncedSearch(newValue)
+    }
+  },
+
+  created() {
+    this.debouncedSearch = _debounce(value => {
+      this.search = value
+    }, 400)
+  },
+
+  mounted() {
+    let { headers } = this
+
+    if (!this.$scopedSlots.select) headers = headers.slice(1)
+    if (!this.$scopedSlots.actions) headers = headers.slice(0, -1)
+
+    this.headers = headers
+  },
+
+  beforeDestroy() {
+    this.debouncedSearch.cancel()
+    this.debouncedSearch = null
+  }
+}
+</script>