From 1c3c048ed494f8a8574f17c8740131789c867d8b Mon Sep 17 00:00:00 2001
From: ergjustin <justin.joseph.erg.com>
Date: Tue, 7 Mar 2023 09:33:29 -0600
Subject: [PATCH 1/9] feat:User CRUD

---
 src/components/MainNavigationDrawer.vue |  10 +-
 src/components/UserDetail.vue           | 169 ++++++++++++++++++++
 src/components/UsersSearch.vue          | 199 ++++++++++++++++++++++++
 src/lib/edit.js                         |  17 +-
 src/middleware/check-user.js            |  26 ++++
 src/pages/users/_userId/index.vue       | 156 +++++++++++++++++++
 src/pages/users/create.vue              | 165 ++++++++++++++++++++
 src/pages/users/index.vue               |  82 ++++++++++
 src/plugins/ability.js                  |   6 +-
 src/plugins/global-mixin.js             |   4 +-
 src/store/index.js                      |   6 +
 11 files changed, 835 insertions(+), 5 deletions(-)
 create mode 100644 src/components/UserDetail.vue
 create mode 100644 src/components/UsersSearch.vue
 create mode 100644 src/middleware/check-user.js
 create mode 100644 src/pages/users/_userId/index.vue
 create mode 100644 src/pages/users/create.vue
 create mode 100644 src/pages/users/index.vue

diff --git a/src/components/MainNavigationDrawer.vue b/src/components/MainNavigationDrawer.vue
index 175f8d2..e0a5525 100644
--- a/src/components/MainNavigationDrawer.vue
+++ b/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
             }
           ]
         },
diff --git a/src/components/UserDetail.vue b/src/components/UserDetail.vue
new file mode 100644
index 0000000..72d45f3
--- /dev/null
+++ b/src/components/UserDetail.vue
@@ -0,0 +1,169 @@
+<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:1|max:100"
+                  >
+                    <v-text-field
+                      v-model.trim="value.password"
+                      :error-messages="errors"
+                      :readonly="!editing"
+                      label="Password"
+                      required
+                    ></v-text-field>
+                  </ValidationProvider>
+
+                  <ValidationProvider
+                    v-slot="{ errors }"
+                    name="name"
+                    rules="required|min:1|max:100"
+                  >
+                    <v-text-field
+                      v-model.trim="value.name"
+                      :error-messages="errors"
+                      :readonly="!editing"
+                      label="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-audit v-if="!editing" :value="value" />
+              <standard-identifier v-if="!editing" :value="value" />
+
+              <v-card-actions v-if="!editing && $canRemove('user')">
+                <v-btn color="red" dark @click="isRemoveOpen = true"
+                  ><v-icon left>{{ mdiDelete }}</v-icon
+                  >Remove user</v-btn
+                >
+              </v-card-actions>
+            </v-container>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-col>
+
+    <v-dialog v-model="isRemoveOpen" dark max-width="500" persistent>
+      <v-card>
+        <v-card-title class="headline"> Remove User </v-card-title>
+
+        <v-card-text>
+          Are you Sure to delete &#x22;{{ value.full_name }}&#x22;
+        </v-card-text>
+
+        <v-card-actions>
+          <v-btn color="primary" @click="isRemoveOpen = false">cancel</v-btn>
+          <v-btn @click="removeUser(true)">Continue</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-row>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+import { ValidationProvider } from 'vee-validate'
+import StandardAudit from '@/components/StandardAudit'
+import StandardIdentifier from '@/components/StandardIdentifier'
+
+export default {
+  components: {
+    ValidationProvider,
+    StandardAudit,
+    StandardIdentifier
+  },
+
+  props: {
+    editing: { default: false, type: Boolean },
+    value: { type: Object, required: true },
+    create: { default: false, type: Boolean }
+  },
+
+  data() {
+    return {
+      isRemoveOpen: false
+    }
+  },
+
+  methods: {
+    ...mapActions({ remove: 'users/remove' }),
+
+    async removeUser() {
+      try {
+        await this.remove([this.value._id, {}])
+        this.$router.push(
+          {
+            name: 'users'
+          },
+          () => {
+            this.$bus.$emit('edit-status', {
+              type: 'success',
+              message: 'User deleted.' // TODO: Localize
+            })
+          }
+        )
+      } catch (err) {
+        this.$bus.$emit('edit-status', { type: 'error', message: err.message })
+      }
+    }
+  }
+}
+</script>
diff --git a/src/components/UsersSearch.vue b/src/components/UsersSearch.vue
new file mode 100644
index 0000000..70968ca
--- /dev/null
+++ b/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>
diff --git a/src/lib/edit.js b/src/lib/edit.js
index e4c0f11..5b38a7b 100644
--- a/src/lib/edit.js
+++ b/src/lib/edit.js
@@ -9,7 +9,8 @@ const arrays = [
   'external_links',
   'intervals',
   'involved_parties',
-  'station_ids'
+  'station_ids',
+  'roles'
 ]
 const booleans = [
   'is_active',
@@ -35,7 +36,10 @@ const fields = [
   'thing_type_id',
   'time_zone',
   'title',
-  'url'
+  'url',
+  'email',
+  'password',
+  'person_id'
 ]
 const objects = [
   'access_levels',
@@ -133,6 +137,15 @@ export function defaultThingType() {
   }
 }
 
+export function defaultUser() {
+  return {
+    email: '',
+    full_name: '',
+    name: '',
+    roles: []
+  }
+}
+
 export function setData(instance) {
   const data = _pickBy(instance, (value, key) => {
     return (
diff --git a/src/middleware/check-user.js b/src/middleware/check-user.js
new file mode 100644
index 0000000..4109fa2
--- /dev/null
+++ b/src/middleware/check-user.js
@@ -0,0 +1,26 @@
+export default async function ({ error, params, store }) {
+  const { userId } = params
+
+  try {
+    const res = await store.dispatch('users/find', {
+      query: {
+        _id: userId,
+        $limit: 1
+      }
+    })
+
+    if (!(res && res.data && res.data.length)) {
+      return error({
+        statusCode: 404,
+        message: 'User not found.'
+      })
+    }
+
+    store.commit('setUser', res.data[0])
+  } catch (err) {
+    error({
+      statusCode: err.statusCode || 500,
+      message: err.message
+    })
+  }
+}
diff --git a/src/pages/users/_userId/index.vue b/src/pages/users/_userId/index.vue
new file mode 100644
index 0000000..a67956d
--- /dev/null
+++ b/src/pages/users/_userId/index.vue
@@ -0,0 +1,156 @@
+<template>
+  <v-container v-if="instance">
+    <v-row v-if="!editing">
+      <v-col>
+        <h2 class="display-1 font-weight-regular">User details</h2>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <ValidationObserver ref="observer">
+          <User-detail v-model="instance" :editing="editing" />
+        </ValidationObserver>
+      </v-col>
+    </v-row>
+
+    <v-btn
+      v-show="!editing && $canPatch('users', instance)"
+      color="primary"
+      dark
+      fab
+      fixed
+      right
+      style="top: 80px"
+      top
+      @click="edit"
+    >
+      <v-icon>{{ mdiPencil }}</v-icon>
+    </v-btn>
+  </v-container>
+</template>
+
+<script>
+import { mapActions, mapGetters, mapState, mapMutations } from 'vuex'
+import { ValidationObserver } from 'vee-validate'
+import _merge from 'lodash/merge'
+import { defaultUser, patchData } from '@/lib/edit'
+import UserDetail from '@/components/UserDetail'
+export default {
+  components: {
+    UserDetail,
+    ValidationObserver
+  },
+
+  layout: 'editor',
+
+  middleware: [
+    'no-org',
+    'no-auth-redirect-home',
+    'check-user',
+    'reset-editing'
+  ],
+
+  data: () => ({
+    instance: null
+  }),
+
+  computed: {
+    ...mapGetters(['user']),
+
+    ...mapState('ux', ['editing'])
+  },
+
+  watch: {
+    instance: {
+      handler() {
+        if (this.editing) this.incEditorDirty()
+      },
+      deep: true
+    }
+  },
+
+  mounted() {
+    this.$bus.$on('editor-cancel', this.onCancel)
+    this.$bus.$on('editor-save', this.onSave)
+
+    this.setEditorColor('primary')
+    this.setEditorDirty(-1)
+    this.initInstance()
+  },
+
+  beforeDestroy() {
+    this.$bus.$off('editor-cancel', this.onCancel)
+    this.$bus.$off('editor-save', this.onSave)
+  },
+
+  beforeRouteLeave(_to, _from, next) {
+    this.$bus.$emit('edit-leave', { next })
+  },
+
+  methods: {
+    ...mapActions({
+      fetchUsers: 'users/find',
+      patch: 'users/patch'
+    }),
+
+    ...mapMutations({
+      setEditing: 'ux/setEditing',
+      incEditorDirty: 'ux/incEditorDirty',
+      setEditorColor: 'ux/setEditorColor',
+      setEditorDirty: 'ux/setEditorDirty',
+      setEditorTitle: 'ux/setEditorTitle'
+    }),
+
+    edit() {
+      this.setEditorDirty(0)
+      this.setEditorTitle('Edit user')
+      this.setEditing(true)
+    },
+
+    initInstance() {
+      this.instance = _merge(defaultUser(), {
+        ...this.user,
+        roles: this.user.roles[0] // for view user role
+      })
+    },
+
+    onCancel() {
+      this.setEditing(false)
+      this.setEditorDirty(-1)
+      this.initInstance()
+    },
+
+    async onSave() {
+      if (!(await this.$refs.observer.validate())) return
+
+      const { instance } = this
+      const data = patchData({ ...instance, roles: [instance.roles] })
+
+      try {
+        // HACK: Ensure that we have a fresh model afterwards
+        this.$store.commit('users/removeItem', instance._id)
+
+        await this.patch([instance._id, data, {}])
+        await this.fetchUsers({ query: { _id: instance._id } })
+
+        this.setEditing(false)
+        this.setEditorDirty(-1)
+        this.initInstance()
+        this.$bus.$emit('edit-status', {
+          type: 'success',
+          message: 'User saved.' // TODO: Localize
+        })
+      } catch (err) {
+        console.log('error', err)
+        this.$bus.$emit('edit-status', { type: 'error', message: err.message })
+
+        // HACK: Ensure that we have a fresh model afterwards
+        this.$store.commit('users/removeItem', instance._id)
+
+        await this.fetchUsers({ query: { _id: instance._id } })
+      }
+    }
+  }
+}
+</script>
diff --git a/src/pages/users/create.vue b/src/pages/users/create.vue
new file mode 100644
index 0000000..df0f928
--- /dev/null
+++ b/src/pages/users/create.vue
@@ -0,0 +1,165 @@
+<template>
+  <v-container v-if="instance">
+    <v-row>
+      <v-col>
+        <ValidationObserver ref="observer">
+          <user-detail v-model="instance" :editing="editing" :create="true" />
+        </ValidationObserver>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import { mapActions, mapGetters, mapState, mapMutations } from 'vuex'
+import { ValidationObserver } from 'vee-validate'
+import { createData, defaultUser } from '@/lib/edit'
+import UserDetail from '@/components/UserDetail.vue'
+
+export default {
+  components: {
+    ValidationObserver,
+    UserDetail
+  },
+
+  layout: 'editor',
+
+  middleware: ['no-org', 'no-auth-redirect-home', 'reset-editing'],
+
+  data: () => ({
+    instance: null
+  }),
+
+  computed: {
+    ...mapGetters(['user']),
+
+    ...mapState(['auth']),
+    ...mapState('ux', ['editing'])
+  },
+
+  watch: {
+    instance: {
+      handler() {
+        if (this.editing) this.incEditorDirty()
+      },
+      deep: true
+    }
+  },
+
+  mounted() {
+    this.$bus.$on('editor-cancel', this.cancel)
+    this.$bus.$on('editor-save', this.save)
+
+    this.setEditorColor('secondary')
+    this.setEditorDirty(-1)
+    this.setEditorTitle('New user')
+    this.setEditing(true)
+    this.initInstance()
+  },
+
+  beforeDestroy() {
+    this.$bus.$off('editor-cancel', this.cancel)
+    this.$bus.$off('editor-save', this.save)
+  },
+
+  beforeRouteLeave(to, from, next) {
+    this.$bus.$emit('edit-leave', { next })
+  },
+
+  methods: {
+    ...mapActions({
+      create: 'users/create',
+      createPerson: 'persons/create',
+      fetchPersons: 'persons/find'
+    }),
+
+    ...mapMutations({
+      setEditing: 'ux/setEditing',
+      incEditorDirty: 'ux/incEditorDirty',
+      setEditorColor: 'ux/setEditorColor',
+      setEditorDirty: 'ux/setEditorDirty',
+      setEditorTitle: 'ux/setEditorTitle'
+    }),
+
+    cancel() {
+      this.setEditing(false)
+      this.setEditorDirty(-1)
+      this.$router.push({
+        name: 'users'
+      })
+    },
+
+    initInstance() {
+      this.instance = defaultUser()
+    },
+
+    async personCreate() {
+      const {
+        // eslint-disable-next-line camelcase
+        instance: { email, full_name, name }
+      } = this
+      const data = createData({ email, full_name, name })
+      return await this.createPerson([data, {}])
+    },
+
+    async userCreate(personId) {
+      try {
+        const { instance } = this
+        const data = createData({
+          ...instance,
+          person_id: personId,
+          roles: [instance.roles]
+        })
+        const res = await this.create([data, {}])
+
+        this.setEditing(false)
+        this.setEditorDirty(-1)
+        this.$router.push(
+          {
+            name: 'users-userId',
+            params: { userId: res._id }
+          },
+          () => {
+            this.$bus.$emit('edit-status', {
+              type: 'success',
+              message: 'User created.' // TODO: Localize
+            })
+          }
+        )
+      } catch (err) {
+        this.$bus.$emit('edit-status', {
+          type: 'error',
+          message: err.message
+        })
+      }
+    },
+
+    async save() {
+      if (!(await this.$refs.observer.validate())) return
+
+      const { instance } = this
+
+      try {
+        const person = await this.fetchPersons({
+          query: {
+            email: instance.email,
+            $limit: 1,
+            $select: ['_id']
+          }
+        })
+
+        if (person && person.data && person.data.length) {
+          const personId = person.data[0]._id
+          this.userCreate(personId)
+        } else {
+          const response = await this.personCreate()
+          const personId = response._id
+          this.userCreate(personId)
+        }
+      } catch (err) {
+        console.log('err', err)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/pages/users/index.vue b/src/pages/users/index.vue
new file mode 100644
index 0000000..d1ecc1a
--- /dev/null
+++ b/src/pages/users/index.vue
@@ -0,0 +1,82 @@
+<template>
+  <v-container>
+    <v-row dense>
+      <v-col>
+        <v-tabs v-model="tabIndex" grow>
+          <v-tab> View </v-tab>
+
+          <v-tab-item>
+            <v-card outlined tile>
+              <v-container fluid>
+                <v-row dense>
+                  <v-col>
+                    <h2 class="headline">Users</h2>
+                  </v-col>
+                </v-row>
+              </v-container>
+
+              <users-search show-link>
+                <template #actions="{ item }">
+                  <v-icon
+                    v-if="item.full_name"
+                    color="tertiary"
+                    @click="open(item._id)"
+                    >{{ mdiOpenInNew }}</v-icon
+                  >
+                </template>
+              </users-search>
+            </v-card>
+          </v-tab-item>
+        </v-tabs>
+      </v-col>
+    </v-row>
+
+    <v-btn
+      v-show="$canCreate('users')"
+      :to="{
+        name: 'users-create'
+      }"
+      color="secondary"
+      dark
+      exact
+      fab
+      fixed
+      nuxt
+      right
+      style="top: 80px"
+      top
+    >
+      <v-icon>{{ mdiPlus }}</v-icon>
+    </v-btn>
+  </v-container>
+</template>
+
+<script>
+import UsersSearch from '@/components/UsersSearch'
+
+export default {
+  components: {
+    UsersSearch
+  },
+
+  middleware: ['no-org', 'no-auth-redirect-home'],
+
+  data: () => ({
+    tabIndex: 0
+  }),
+
+  methods: {
+    open(userId) {
+      window.open(
+        this.$router.resolve({
+          name: 'users-userId',
+          params: {
+            userId
+          }
+        }).href,
+        '_blank'
+      )
+    }
+  }
+}
+</script>
diff --git a/src/plugins/ability.js b/src/plugins/ability.js
index 9811901..96aaf06 100644
--- a/src/plugins/ability.js
+++ b/src/plugins/ability.js
@@ -55,7 +55,11 @@ export default ({ store }, inject) => {
   inject('canPatch', (name, obj) =>
     store.getters.isAbilityUpdated ? ability.can('patch', as(name, obj)) : false
   )
-
+  inject('canRemove', (name, obj) =>
+    store.getters.isAbilityUpdated
+      ? ability.can('remove', as(name, obj))
+      : false
+  )
   inject('cannot', (...args) =>
     store.getters.isAbilityUpdated ? ability.cannot(...args) : true
   )
diff --git a/src/plugins/global-mixin.js b/src/plugins/global-mixin.js
index 3db756b..b95c1c5 100644
--- a/src/plugins/global-mixin.js
+++ b/src/plugins/global-mixin.js
@@ -64,7 +64,8 @@ import {
   mdiTwitter,
   mdiViewAgenda,
   mdiViewDashboard,
-  mdiViewList
+  mdiViewList,
+  mdiDelete
 } from '@mdi/js'
 
 Vue.mixin({
@@ -134,6 +135,7 @@ Vue.mixin({
     mdiViewAgenda,
     mdiViewDashboard,
     mdiViewList,
+    mdiDelete,
 
     githubURL: process.env.githubURL,
     infoEmail: process.env.infoEmail,
diff --git a/src/store/index.js b/src/store/index.js
index 90d325d..510fa99 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -141,6 +141,9 @@ export const getters = {
   },
   annotationId(state) {
     return state.annotationId
+  },
+  user(state, { 'users/get': get }) {
+    return state.userId && get(state.userId)
   }
 }
 
@@ -188,5 +191,8 @@ export const mutations = {
   },
   setAnnotation(state, value) {
     state.annotationId = value && value._id
+  },
+  setUser(state, value) {
+    state.userId = value && value._id
   }
 }

From d82ba1a9030b73384043b7c12e5b46f4ced86ac1 Mon Sep 17 00:00:00 2001
From: ergjustin <justin.joseph.erg.com>
Date: Wed, 8 Mar 2023 14:16:53 -0600
Subject: [PATCH 2/9] fix:review suggession implemented

---
 src/lib/edit.js                   |  4 +++-
 src/pages/users/_userId/index.vue | 26 ++++++++++++++------------
 src/pages/users/create.vue        | 17 +++++++++--------
 3 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/src/lib/edit.js b/src/lib/edit.js
index 5b38a7b..00e335f 100644
--- a/src/lib/edit.js
+++ b/src/lib/edit.js
@@ -142,7 +142,9 @@ export function defaultUser() {
     email: '',
     full_name: '',
     name: '',
-    roles: []
+    roles: [],
+    is_enabled: true,
+    password: ''
   }
 }
 
diff --git a/src/pages/users/_userId/index.vue b/src/pages/users/_userId/index.vue
index a67956d..38194d1 100644
--- a/src/pages/users/_userId/index.vue
+++ b/src/pages/users/_userId/index.vue
@@ -42,6 +42,10 @@ export default {
     ValidationObserver
   },
 
+  beforeRouteLeave(_to, _from, next) {
+    this.$bus.$emit('edit-leave', { next })
+  },
+
   layout: 'editor',
 
   middleware: [
@@ -84,10 +88,6 @@ export default {
     this.$bus.$off('editor-save', this.onSave)
   },
 
-  beforeRouteLeave(_to, _from, next) {
-    this.$bus.$emit('edit-leave', { next })
-  },
-
   methods: {
     ...mapActions({
       fetchUsers: 'users/find',
@@ -124,15 +124,18 @@ export default {
     async onSave() {
       if (!(await this.$refs.observer.validate())) return
 
-      const { instance } = this
-      const data = patchData({ ...instance, roles: [instance.roles] })
+      const {
+        // eslint-disable-next-line camelcase
+        instance: { _id, email, full_name, name, roles }
+      } = this
+      const data = patchData({ email, full_name, name, roles: [roles] })
 
       try {
         // HACK: Ensure that we have a fresh model afterwards
-        this.$store.commit('users/removeItem', instance._id)
+        this.$store.commit('users/removeItem', _id)
 
-        await this.patch([instance._id, data, {}])
-        await this.fetchUsers({ query: { _id: instance._id } })
+        await this.patch([_id, data, {}])
+        await this.fetchUsers({ query: { _id } })
 
         this.setEditing(false)
         this.setEditorDirty(-1)
@@ -142,13 +145,12 @@ export default {
           message: 'User saved.' // TODO: Localize
         })
       } catch (err) {
-        console.log('error', err)
         this.$bus.$emit('edit-status', { type: 'error', message: err.message })
 
         // HACK: Ensure that we have a fresh model afterwards
-        this.$store.commit('users/removeItem', instance._id)
+        this.$store.commit('users/removeItem', _id)
 
-        await this.fetchUsers({ query: { _id: instance._id } })
+        await this.fetchUsers({ query: { _id } })
       }
     }
   }
diff --git a/src/pages/users/create.vue b/src/pages/users/create.vue
index df0f928..1deb6c8 100644
--- a/src/pages/users/create.vue
+++ b/src/pages/users/create.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { mapActions, mapGetters, mapState, mapMutations } from 'vuex'
+import { mapActions, mapState, mapMutations } from 'vuex'
 import { ValidationObserver } from 'vee-validate'
 import { createData, defaultUser } from '@/lib/edit'
 import UserDetail from '@/components/UserDetail.vue'
@@ -22,6 +22,10 @@ export default {
     UserDetail
   },
 
+  beforeRouteLeave(_to, _from, next) {
+    this.$bus.$emit('edit-leave', { next })
+  },
+
   layout: 'editor',
 
   middleware: ['no-org', 'no-auth-redirect-home', 'reset-editing'],
@@ -31,8 +35,6 @@ export default {
   }),
 
   computed: {
-    ...mapGetters(['user']),
-
     ...mapState(['auth']),
     ...mapState('ux', ['editing'])
   },
@@ -62,10 +64,6 @@ export default {
     this.$bus.$off('editor-save', this.save)
   },
 
-  beforeRouteLeave(to, from, next) {
-    this.$bus.$emit('edit-leave', { next })
-  },
-
   methods: {
     ...mapActions({
       create: 'users/create',
@@ -157,7 +155,10 @@ export default {
           this.userCreate(personId)
         }
       } catch (err) {
-        console.log('err', err)
+        this.$bus.$emit('edit-status', {
+          type: 'error',
+          message: err.message
+        })
       }
     }
   }

From 05e1ffae5ba74b1c157a5088405b1734060fa9eb Mon Sep 17 00:00:00 2001
From: ergjustin <justin.joseph.erg.com>
Date: Wed, 8 Mar 2023 15:11:39 -0600
Subject: [PATCH 3/9] fix:name change to preferred name in the UI

---
 src/components/UserAccountEdit.vue | 4 ++--
 src/components/UserDetail.vue      | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/UserAccountEdit.vue b/src/components/UserAccountEdit.vue
index e88d835..a31838b 100644
--- a/src/components/UserAccountEdit.vue
+++ b/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>
diff --git a/src/components/UserDetail.vue b/src/components/UserDetail.vue
index 72d45f3..2fd18b2 100644
--- a/src/components/UserDetail.vue
+++ b/src/components/UserDetail.vue
@@ -52,14 +52,14 @@
 
                   <ValidationProvider
                     v-slot="{ errors }"
-                    name="name"
+                    name="preferred name"
                     rules="required|min:1|max:100"
                   >
                     <v-text-field
                       v-model.trim="value.name"
                       :error-messages="errors"
                       :readonly="!editing"
-                      label="Name"
+                      label="Preferred Name"
                       required
                     ></v-text-field>
                   </ValidationProvider>

From 89769340617e470b92e2ba688511e3aecfa43fe8 Mon Sep 17 00:00:00 2001
From: ergjustin <justin.joseph.erg.com>
Date: Wed, 15 Mar 2023 15:33:29 -0500
Subject: [PATCH 4/9] fix:remove delete option and add is_enable and password
 length

---
 src/components/UserDetail.vue       | 79 +++++++++--------------------
 src/components/UserPasswordEdit.vue |  4 +-
 src/lib/edit.js                     |  8 +--
 src/pages/users/_userId/index.vue   | 10 +++-
 src/plugins/ability.js              |  5 --
 src/plugins/global-mixin.js         |  4 +-
 6 files changed, 39 insertions(+), 71 deletions(-)

diff --git a/src/components/UserDetail.vue b/src/components/UserDetail.vue
index 2fd18b2..e6908c0 100644
--- a/src/components/UserDetail.vue
+++ b/src/components/UserDetail.vue
@@ -39,7 +39,8 @@
                     v-if="create"
                     v-slot="{ errors }"
                     name="password"
-                    rules="required|min:1|max:100"
+                    rules="required|min:10|max:100"
+                    vid="password"
                   >
                     <v-text-field
                       v-model.trim="value.password"
@@ -47,6 +48,22 @@
                       :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>
 
@@ -86,84 +103,36 @@
                 </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-card-actions v-if="!editing && $canRemove('user')">
-                <v-btn color="red" dark @click="isRemoveOpen = true"
-                  ><v-icon left>{{ mdiDelete }}</v-icon
-                  >Remove user</v-btn
-                >
-              </v-card-actions>
             </v-container>
           </v-card>
         </v-col>
       </v-row>
     </v-col>
-
-    <v-dialog v-model="isRemoveOpen" dark max-width="500" persistent>
-      <v-card>
-        <v-card-title class="headline"> Remove User </v-card-title>
-
-        <v-card-text>
-          Are you Sure to delete &#x22;{{ value.full_name }}&#x22;
-        </v-card-text>
-
-        <v-card-actions>
-          <v-btn color="primary" @click="isRemoveOpen = false">cancel</v-btn>
-          <v-btn @click="removeUser(true)">Continue</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
   </v-row>
 </template>
 
 <script>
-import { mapActions } from 'vuex'
 import { ValidationProvider } from 'vee-validate'
 import StandardAudit from '@/components/StandardAudit'
 import StandardIdentifier from '@/components/StandardIdentifier'
+import StandardOptions from '@/components/StandardOptions'
 
 export default {
   components: {
-    ValidationProvider,
     StandardAudit,
-    StandardIdentifier
+    StandardIdentifier,
+    StandardOptions,
+    ValidationProvider
   },
 
   props: {
     editing: { default: false, type: Boolean },
     value: { type: Object, required: true },
     create: { default: false, type: Boolean }
-  },
-
-  data() {
-    return {
-      isRemoveOpen: false
-    }
-  },
-
-  methods: {
-    ...mapActions({ remove: 'users/remove' }),
-
-    async removeUser() {
-      try {
-        await this.remove([this.value._id, {}])
-        this.$router.push(
-          {
-            name: 'users'
-          },
-          () => {
-            this.$bus.$emit('edit-status', {
-              type: 'success',
-              message: 'User deleted.' // TODO: Localize
-            })
-          }
-        )
-      } catch (err) {
-        this.$bus.$emit('edit-status', { type: 'error', message: err.message })
-      }
-    }
   }
 }
 </script>
diff --git a/src/components/UserPasswordEdit.vue b/src/components/UserPasswordEdit.vue
index 67f2937..a191e4a 100644
--- a/src/components/UserPasswordEdit.vue
+++ b/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
diff --git a/src/lib/edit.js b/src/lib/edit.js
index 00e335f..d4a0a61 100644
--- a/src/lib/edit.js
+++ b/src/lib/edit.js
@@ -24,10 +24,13 @@ const fields = [
   'derivation_description',
   'derivation_method',
   'description',
+  'email',
   'full_name',
   'model',
   'name',
   'oem_company_id',
+  'password',
+  'person_id',
   'reseller_company_id',
   'slug',
   'source_type',
@@ -36,10 +39,7 @@ const fields = [
   'thing_type_id',
   'time_zone',
   'title',
-  'url',
-  'email',
-  'password',
-  'person_id'
+  'url'
 ]
 const objects = [
   'access_levels',
diff --git a/src/pages/users/_userId/index.vue b/src/pages/users/_userId/index.vue
index 38194d1..d42e290 100644
--- a/src/pages/users/_userId/index.vue
+++ b/src/pages/users/_userId/index.vue
@@ -126,9 +126,15 @@ export default {
 
       const {
         // eslint-disable-next-line camelcase
-        instance: { _id, email, full_name, name, roles }
+        instance: { _id, email, full_name, is_enabled, name, roles }
       } = this
-      const data = patchData({ email, full_name, name, roles: [roles] })
+      const data = patchData({
+        email,
+        full_name,
+        is_enabled,
+        name,
+        roles: [roles]
+      })
 
       try {
         // HACK: Ensure that we have a fresh model afterwards
diff --git a/src/plugins/ability.js b/src/plugins/ability.js
index 96aaf06..40073f0 100644
--- a/src/plugins/ability.js
+++ b/src/plugins/ability.js
@@ -55,11 +55,6 @@ export default ({ store }, inject) => {
   inject('canPatch', (name, obj) =>
     store.getters.isAbilityUpdated ? ability.can('patch', as(name, obj)) : false
   )
-  inject('canRemove', (name, obj) =>
-    store.getters.isAbilityUpdated
-      ? ability.can('remove', as(name, obj))
-      : false
-  )
   inject('cannot', (...args) =>
     store.getters.isAbilityUpdated ? ability.cannot(...args) : true
   )
diff --git a/src/plugins/global-mixin.js b/src/plugins/global-mixin.js
index b95c1c5..3db756b 100644
--- a/src/plugins/global-mixin.js
+++ b/src/plugins/global-mixin.js
@@ -64,8 +64,7 @@ import {
   mdiTwitter,
   mdiViewAgenda,
   mdiViewDashboard,
-  mdiViewList,
-  mdiDelete
+  mdiViewList
 } from '@mdi/js'
 
 Vue.mixin({
@@ -135,7 +134,6 @@ Vue.mixin({
     mdiViewAgenda,
     mdiViewDashboard,
     mdiViewList,
-    mdiDelete,
 
     githubURL: process.env.githubURL,
     infoEmail: process.env.infoEmail,

From c2eaabe24baceea6c975204dc11e308e743c31dc Mon Sep 17 00:00:00 2001
From: ergjustin <justin.joseph.erg.com>
Date: Mon, 20 Mar 2023 15:18:11 -0500
Subject: [PATCH 5/9] fix:user CRUD updated

---
 src/components/MainNavigationDrawer.vue | 18 +++--
 src/components/UserDetail.vue           | 48 ++++++++-----
 src/components/UsersSearch.vue          | 91 +++++++++++++++++++++----
 src/pages/users/_userId/index.vue       | 24 +++----
 src/pages/users/create.vue              |  9 ++-
 src/pages/users/index.vue               |  9 +--
 src/plugins/ability.js                  |  5 ++
 7 files changed, 142 insertions(+), 62 deletions(-)

diff --git a/src/components/MainNavigationDrawer.vue b/src/components/MainNavigationDrawer.vue
index e0a5525..312c2a2 100644
--- a/src/components/MainNavigationDrawer.vue
+++ b/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'
+            }
+          ]
         }
       ]
     }
diff --git a/src/components/UserDetail.vue b/src/components/UserDetail.vue
index e6908c0..f8cbe71 100644
--- a/src/components/UserDetail.vue
+++ b/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,20 +76,6 @@
                     ></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"
@@ -88,7 +83,8 @@
                   >
                     <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>
diff --git a/src/components/UsersSearch.vue b/src/components/UsersSearch.vue
index 70968ca..889efb8 100644
--- a/src/components/UsersSearch.vue
+++ b/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,9 +134,14 @@ export default {
       },
       {
         align: 'left',
-        text: 'Roles',
+        text: 'Role',
         value: 'roles'
       },
+      {
+        align: 'right',
+        value: 'indicators',
+        width: '5%'
+      },
       {
         align: 'right',
         value: 'icons',
@@ -96,11 +149,17 @@ export default {
       }
     ],
 
+    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'
               }
             }
diff --git a/src/pages/users/_userId/index.vue b/src/pages/users/_userId/index.vue
index d42e290..25ff7c2 100644
--- a/src/pages/users/_userId/index.vue
+++ b/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 } })
       }
     }
   }
diff --git a/src/pages/users/create.vue b/src/pages/users/create.vue
index 1deb6c8..f29a102 100644
--- a/src/pages/users/create.vue
+++ b/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, {}])
     },
 
diff --git a/src/pages/users/index.vue b/src/pages/users/index.vue
index d1ecc1a..5ba221e 100644
--- a/src/pages/users/index.vue
+++ b/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>
diff --git a/src/plugins/ability.js b/src/plugins/ability.js
index 40073f0..133fc63 100644
--- a/src/plugins/ability.js
+++ b/src/plugins/ability.js
@@ -73,4 +73,9 @@ export default ({ store }, inject) => {
       ? ability.cannot('graph', as(name, obj))
       : true
   )
+  inject('cannotPatch', (name, obj) =>
+    store.getters.isAbilityUpdated
+      ? ability.cannot('patch', as(name, obj))
+      : true
+  )
 }

From aeea5dc0cae1b8916adcbaf06ebaa59f7cc34884 Mon Sep 17 00:00:00 2001
From: ergjustin <justin.joseph.erg.com>
Date: Fri, 24 Mar 2023 10:52:59 -0500
Subject: [PATCH 6/9] feat:Add loading button and User password chamge

---
 src/components/IndicatorCell.vue        |  3 +-
 src/components/MainNavigationDrawer.vue |  5 ++--
 src/components/UserDetail.vue           |  6 ++--
 src/components/UserPasswordEdit.vue     | 37 +++++++++++++++----------
 src/components/UsersSearch.vue          | 17 +++++++++---
 src/layouts/editor.vue                  | 11 ++++++--
 src/pages/users/_userId/index.vue       | 21 +++++++++++++-
 src/pages/users/create.vue              |  8 +++++-
 src/store/ux.js                         |  6 +++-
 9 files changed, 84 insertions(+), 30 deletions(-)

diff --git a/src/components/IndicatorCell.vue b/src/components/IndicatorCell.vue
index 3e4a723..73f664a 100644
--- a/src/components/IndicatorCell.vue
+++ b/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 }
   }
diff --git a/src/components/MainNavigationDrawer.vue b/src/components/MainNavigationDrawer.vue
index 312c2a2..4c46aed 100644
--- a/src/components/MainNavigationDrawer.vue
+++ b/src/components/MainNavigationDrawer.vue
@@ -193,13 +193,14 @@ export default {
           ]
         },
         {
-          header: 'Admin section',
+          header: 'Admin',
           items: [
             {
               can: ['read', 'users'],
               icon: mdiAccountGroup,
               title: 'Users',
-              to: '/users'
+              to: '/users',
+              org: false
             }
           ]
         }
diff --git a/src/components/UserDetail.vue b/src/components/UserDetail.vue
index f8cbe71..deefab1 100644
--- a/src/components/UserDetail.vue
+++ b/src/components/UserDetail.vue
@@ -89,7 +89,7 @@
                       chips
                       deletable-chips
                       dense
-                      label="Roles"
+                      label="Role"
                       hide-details
                       small-chips
                       variant="solo"
@@ -127,9 +127,9 @@ export default {
   },
 
   props: {
+    create: { default: false, type: Boolean },
     editing: { default: false, type: Boolean },
-    value: { type: Object, required: true },
-    create: { default: false, type: Boolean }
+    value: { type: Object, required: true }
   },
 
   computed: {
diff --git a/src/components/UserPasswordEdit.vue b/src/components/UserPasswordEdit.vue
index a191e4a..88cf02a 100644
--- a/src/components/UserPasswordEdit.vue
+++ b/src/components/UserPasswordEdit.vue
@@ -5,19 +5,21 @@
         <v-card-title class="headline"> Change password </v-card-title>
 
         <v-card-text>
-          <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 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 }"
@@ -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
+          })
         )
     }
   }
diff --git a/src/components/UsersSearch.vue b/src/components/UsersSearch.vue
index 889efb8..65b40b1 100644
--- a/src/components/UsersSearch.vue
+++ b/src/components/UsersSearch.vue
@@ -28,6 +28,7 @@
           filled
           flat
           hide-details
+          multiple
           small-chips
         ></v-select>
       </v-col>
@@ -86,7 +87,7 @@
             </template>
 
             <template #item.indicators="{ item }">
-              <indicator-cell :value="item" />
+              <indicator-cell disable-label="Deactivated" :value="item" />
             </template>
 
             <template #item.icons="{ item }">
@@ -149,7 +150,7 @@ export default {
       }
     ],
 
-    optionItems: ['Deactivated'],
+    optionItems: ['Active', 'Deactivated'],
     rolesOption: ['manager', 'user'],
 
     queryUserIds: [],
@@ -182,8 +183,16 @@ export default {
 
       const ands = []
 
-      if (selectedOptions && selectedOptions.includes('Deactivated')) {
-        ands.push({ is_enabled: false })
+      if (
+        selectedOptions &&
+        selectedOptions.length &&
+        this.optionItems.length !== selectedOptions.length
+      ) {
+        ands.push({
+          is_enabled:
+            selectedOptions.includes('Active') &&
+            !selectedOptions.includes('Deactivated')
+        })
       }
 
       if (selectedRoles && selectedRoles.length) {
diff --git a/src/layouts/editor.vue b/src/layouts/editor.vue
index de387e4..377f389 100644
--- a/src/layouts/editor.vue
+++ b/src/layouts/editor.vue
@@ -19,8 +19,9 @@
 
       <v-toolbar-items>
         <v-btn
-          :disabled="editorDirty < 1"
+          :disabled="editorDirty < 1 || isLoading"
           text
+          :loading="isLoading"
           @click="$bus.$emit('editor-save')"
           >Save</v-btn
         >
@@ -98,7 +99,13 @@ export default {
   }),
 
   computed: {
-    ...mapState('ux', ['editing', 'editorColor', 'editorDirty', 'editorTitle'])
+    ...mapState('ux', [
+      'editing',
+      'editorColor',
+      'editorDirty',
+      'editorTitle',
+      'isLoading'
+    ])
   },
 
   watch: {
diff --git a/src/pages/users/_userId/index.vue b/src/pages/users/_userId/index.vue
index 25ff7c2..3fc3ead 100644
--- a/src/pages/users/_userId/index.vue
+++ b/src/pages/users/_userId/index.vue
@@ -14,6 +14,18 @@
       </v-col>
     </v-row>
 
+    <v-row v-if="!editing">
+      <v-col>
+        <user-password-edit
+          :current-password-required="
+            $cannotPatch('users', { _id: instance._id })
+          "
+          :edit-status="!editing"
+          :user="instance"
+        />
+      </v-col>
+    </v-row>
+
     <v-btn
       v-show="!editing && $canPatch('users', instance)"
       color="primary"
@@ -37,9 +49,11 @@ import _merge from 'lodash/merge'
 import _omit from 'lodash/omit'
 import { defaultUser, patchData } from '@/lib/edit'
 import UserDetail from '@/components/UserDetail'
+import UserPasswordEdit from '@/components/UserPasswordEdit'
 export default {
   components: {
     UserDetail,
+    UserPasswordEdit,
     ValidationObserver
   },
 
@@ -100,7 +114,8 @@ export default {
       incEditorDirty: 'ux/incEditorDirty',
       setEditorColor: 'ux/setEditorColor',
       setEditorDirty: 'ux/setEditorDirty',
-      setEditorTitle: 'ux/setEditorTitle'
+      setEditorTitle: 'ux/setEditorTitle',
+      setIsLoading: 'ux/setIsLoading'
     }),
 
     edit() {
@@ -132,6 +147,8 @@ export default {
         roles: [instance.roles]
       })
 
+      this.setIsLoading(true)
+
       try {
         // HACK: Ensure that we have a fresh model afterwards
         this.$store.commit('users/removeItem', instance._id)
@@ -153,6 +170,8 @@ export default {
         this.$store.commit('users/removeItem', instance._id)
 
         await this.fetchUsers({ query: { _id: instance._id } })
+      } finally {
+        this.setIsLoading(false)
       }
     }
   }
diff --git a/src/pages/users/create.vue b/src/pages/users/create.vue
index f29a102..02a9e72 100644
--- a/src/pages/users/create.vue
+++ b/src/pages/users/create.vue
@@ -77,7 +77,8 @@ export default {
       incEditorDirty: 'ux/incEditorDirty',
       setEditorColor: 'ux/setEditorColor',
       setEditorDirty: 'ux/setEditorDirty',
-      setEditorTitle: 'ux/setEditorTitle'
+      setEditorTitle: 'ux/setEditorTitle',
+      setIsLoading: 'ux/setIsLoading'
     }),
 
     cancel() {
@@ -128,6 +129,8 @@ export default {
           type: 'error',
           message: err.message
         })
+      } finally {
+        this.setIsLoading(false)
       }
     },
 
@@ -136,6 +139,8 @@ export default {
 
       const { instance } = this
 
+      this.setIsLoading(true)
+
       try {
         const person = await this.fetchPersons({
           query: {
@@ -158,6 +163,7 @@ export default {
           type: 'error',
           message: err.message
         })
+        this.setIsLoading(false)
       }
     }
   }
diff --git a/src/store/ux.js b/src/store/ux.js
index d956db7..4fb4d6e 100644
--- a/src/store/ux.js
+++ b/src/store/ux.js
@@ -6,7 +6,8 @@ export const state = () => ({
   editing: false,
   editorColor: 'primary',
   editorDirty: 0,
-  editorTitle: ''
+  editorTitle: '',
+  isLoading: false
 })
 
 export const actions = {}
@@ -43,5 +44,8 @@ export const mutations = {
   },
   setEditorTitle(state, value) {
     state.editorTitle = value
+  },
+  setIsLoading(state, value) {
+    state.isLoading = value
   }
 }

From 8d221f937e1dcf188cd795a10b07b7354641b022 Mon Sep 17 00:00:00 2001
From: ergjustin <justin.joseph.erg.com>
Date: Fri, 24 Mar 2023 11:13:25 -0500
Subject: [PATCH 7/9] fix:password editing permission

---
 src/pages/users/_userId/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/users/_userId/index.vue b/src/pages/users/_userId/index.vue
index 3fc3ead..cc10186 100644
--- a/src/pages/users/_userId/index.vue
+++ b/src/pages/users/_userId/index.vue
@@ -14,7 +14,7 @@
       </v-col>
     </v-row>
 
-    <v-row v-if="!editing">
+    <v-row v-if="!editing && $canPatch('users', instance)">
       <v-col>
         <user-password-edit
           :current-password-required="

From bd2cd58266fa4a97d8cf47b83d9ae2b8a284821a Mon Sep 17 00:00:00 2001
From: ergjustin <justin.joseph.erg.com>
Date: Mon, 27 Mar 2023 13:14:09 -0500
Subject: [PATCH 8/9] fix:cancel button disable when isLoading

---
 src/layouts/editor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/editor.vue b/src/layouts/editor.vue
index 377f389..7098fc7 100644
--- a/src/layouts/editor.vue
+++ b/src/layouts/editor.vue
@@ -25,7 +25,7 @@
           @click="$bus.$emit('editor-save')"
           >Save</v-btn
         >
-        <v-btn text @click="cancel">Cancel</v-btn>
+        <v-btn text :disabled="isLoading" @click="cancel">Cancel</v-btn>
       </v-toolbar-items>
     </v-app-bar>
 

From aa2ecd69546e94ba8fc63723e5fc733c12edec94 Mon Sep 17 00:00:00 2001
From: ergjustin <justin.joseph.erg.com>
Date: Tue, 4 Apr 2023 17:51:01 -0500
Subject: [PATCH 9/9] fix:users list limited

---
 src/components/MainNavigationDrawer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MainNavigationDrawer.vue b/src/components/MainNavigationDrawer.vue
index 4c46aed..c773c17 100644
--- a/src/components/MainNavigationDrawer.vue
+++ b/src/components/MainNavigationDrawer.vue
@@ -196,7 +196,7 @@ export default {
           header: 'Admin',
           items: [
             {
-              can: ['read', 'users'],
+              can: ['create', 'users'],
               icon: mdiAccountGroup,
               title: 'Users',
               to: '/users',