feat:User CRUD

src/components/IndicatorCell.vue

@@ -5,7 +5,7 @@
         <v-icon class="mx-1" color="red" v-on="on">{{  mdiEngineOff,
         }}</v-icon>
       </template>
-      <span>Disabled</span>
+      <span>{{ disableLabel }}</span>
     </v-tooltip>
 
     <v-tooltip v-if="value.is_hidden === true" bottom>
@@ -27,6 +27,7 @@
 <script>
 export default {
   props: {
+    disableLabel: { default: 'Disabled', type: String },
     hideDescription: { default: false, type: Boolean },
     value: { type: Object, required: true }
   }

src/components/MainNavigationDrawer.vue

@@ -66,7 +66,8 @@ import {
   mdiNoteOutline,
   mdiTag,
   mdiOfficeBuilding,
-  mdiViewGrid
+  mdiViewGrid,
+  mdiAccountGroup
 } from '@mdi/js'
 
 export default {
@@ -190,6 +191,18 @@ export default {
             //   title: 'Teams'
             // }
           ]
+        },
+        {
+          header: 'Admin',
+          items: [
+            {
+              can: ['create', 'users'],
+              icon: mdiAccountGroup,
+              title: 'Users',
+              to: '/users',
+              org: false
+            }
+          ]
         }
       ]
     }

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,150 @@
+<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="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="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 }"
+                    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="roles"
+                    rules="required"
+                  >
+                    <v-select
+                      v-model="value.roles"
+                      class="pt-3"
+                      :items="roles"
+                      :error-messages="errors"
+                      chips
+                      deletable-chips
+                      dense
+                      label="Role"
+                      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: {
+    create: { default: false, type: Boolean },
+    editing: { default: false, type: Boolean },
+    value: { type: Object, required: true }
+  },
+
+  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/UserPasswordEdit.vue

@@ -5,24 +5,26 @@
         <v-card-title class="headline"> Change password </v-card-title>
 
         <v-card-text>
-          <ValidationProvider
-            v-slot="{ errors }"
-            name="current password"
-            rules="required|min:6|max:100"
-          >
-            <v-text-field
-              v-model="current_password"
-              :error-messages="errors"
-              label="Current password"
-              required
-              type="password"
-            ></v-text-field>
-          </ValidationProvider>
+          <template v-if="currentPasswordRequired">
+            <ValidationProvider
+              v-slot="{ errors }"
+              name="current password"
+              rules="required|min:10|max:100"
+            >
+              <v-text-field
+                v-model="current_password"
+                :error-messages="errors"
+                label="Current password"
+                required
+                type="password"
+              ></v-text-field>
+            </ValidationProvider>
+          </template>
 
           <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
@@ -75,6 +77,8 @@ export default {
   },
 
   props: {
+    currentPasswordRequired: { default: true, type: Boolean },
+    editStatus: { default: false, type: Boolean },
     user: { default: null, type: Object }
   },
 
@@ -105,13 +109,16 @@ export default {
 
       return this.patch([this.id, { $set }, {}])
         .then(() =>
-          this.$bus.$emit('status', {
+          this.$bus.$emit(this.editStatus ? 'edit-status' : 'status', {
             type: 'success',
             message: 'Password changed.' // TODO: Localize
           })
         )
         .catch(({ message }) =>
-          this.$bus.$emit('status', { type: 'error', message })
+          this.$bus.$emit(this.editStatus ? 'edit-status' : 'status', {
+            type: 'error',
+            message
+          })
         )
     }
   }