From ecc931dfc0854e20d53c84d7d432351ee4e60b4a Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Fri, 31 Jul 2020 21:27:28 +0000
Subject: [PATCH]

---
 ayanova/src/api/initialize.js    |   8 +
 ayanova/src/router.js            |  15 +-
 ayanova/src/views/adm-user.vue   |   9 +-
 ayanova/src/views/adm-users.vue  |   6 +-
 ayanova/src/views/cust-user.vue  | 773 +++++++++++++++++++++++++++++++
 ayanova/src/views/cust-users.vue | 290 ++++++++++++
 6 files changed, 1092 insertions(+), 9 deletions(-)
 create mode 100644 ayanova/src/views/cust-user.vue
 create mode 100644 ayanova/src/views/cust-users.vue

diff --git a/ayanova/src/api/initialize.js b/ayanova/src/api/initialize.js
index 74a862ed..e100bf38 100644
--- a/ayanova/src/api/initialize.js
+++ b/ayanova/src/api/initialize.js
@@ -226,6 +226,14 @@ function initNavPanel() {
       key: key++
     });
 
+    //Customer / Headoffice Users subitem
+    sub.push({
+      title: "UserList",
+      icon: "fa-users",
+      route: "/cust-users",
+      key: key++
+    });
+
     // ** CUSTOMER (TOP)
     addNavItem(
       "CustomerList",
diff --git a/ayanova/src/router.js b/ayanova/src/router.js
index a38725b4..ab0c1dad 100644
--- a/ayanova/src/router.js
+++ b/ayanova/src/router.js
@@ -157,7 +157,6 @@ export default new Router({
           /* webpackChunkName: "ay-common" */ "./views/home-notify-subscription.vue"
         )
     },
-
     {
       path: "/cust-customers",
       name: "cust-customers",
@@ -170,6 +169,18 @@ export default new Router({
       component: () =>
         import(/* webpackChunkName: "cust" */ "./views/cust-headoffices.vue")
     },
+    {
+      path: "/cust-users",
+      name: "cust-users",
+      component: () =>
+        import(/* webpackChunkName: "cust" */ "./views/cust-users.vue")
+    },
+    {
+      path: "/cust-users/:recordid",
+      name: "cust-user",
+      component: () =>
+        import(/* webpackChunkName: "cust" */ "./views/cust-user.vue")
+    },
     {
       path: "/svc-schedule",
       name: "svc-schedule",
@@ -321,7 +332,6 @@ export default new Router({
       component: () =>
         import(/* webpackChunkName: "adm" */ "./views/adm-license.vue")
     },
-
     {
       path: "/adm-users",
       name: "adm-users",
@@ -440,6 +450,7 @@ export default new Router({
           /* webpackChunkName: "customer" */ "./views/customer-csr-list.vue"
         )
     },
+
     //**********************************GENERAL   */
     {
       path: "/open/:ayatype/:recordid",
diff --git a/ayanova/src/views/adm-user.vue b/ayanova/src/views/adm-user.vue
index 192d2aa8..9a6847f1 100644
--- a/ayanova/src/views/adm-user.vue
+++ b/ayanova/src/views/adm-user.vue
@@ -2,8 +2,7 @@
   <v-container fluid>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <h2 class="red--text">
-      todo: revisit after add customer, ho, vendor to support usertypes
-      customer,headoffice,contractor
+      todo: revisit after add vendor to support usertype contractor
     </h2>
     <v-row v-if="formState.ready">
       <v-col>
@@ -765,7 +764,9 @@ async function fetchTranslatedText(vm) {
 //
 async function populateSelectionLists(vm) {
   //ensure the pick lists required are pre-fetched
-  await window.$gz.enums.fetchEnumList("usertype");
-  vm.selectLists.usertypes = window.$gz.enums.getSelectionList("usertype");
+  await window.$gz.enums.fetchEnumList("insideusertype");
+  vm.selectLists.usertypes = window.$gz.enums.getSelectionList(
+    "insideusertype"
+  );
 }
 </script>
diff --git a/ayanova/src/views/adm-users.vue b/ayanova/src/views/adm-users.vue
index cbd3e4e8..9b9d97d0 100644
--- a/ayanova/src/views/adm-users.vue
+++ b/ayanova/src/views/adm-users.vue
@@ -167,9 +167,9 @@ async function clickHandler(menuItem) {
           params: { recordid: 0 }
         });
         break;
-      case "extensions":
-        let res = await m.vm.$refs.extensions.open();
-        break;
+      // case "extensions":
+      //   let res = await m.vm.$refs.extensions.open();
+      //   break;
       case "directnotify":
         //nav to direct notify with list of users appended to route
         if (m.vm.selected.length == 0) {
diff --git a/ayanova/src/views/cust-user.vue b/ayanova/src/views/cust-user.vue
new file mode 100644
index 00000000..711f8d31
--- /dev/null
+++ b/ayanova/src/views/cust-user.vue
@@ -0,0 +1,773 @@
+<template>
+  <v-container fluid>
+    <gz-report-selector ref="reportSelector"></gz-report-selector>
+    <h2 class="red--text">
+      todo: revisit after add customer, ho, to support usertypes
+      customer,headoffice
+    </h2>
+    <v-row v-if="formState.ready">
+      <v-col>
+        <v-form ref="form">
+          <v-row>
+            <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
+
+            <v-col cols="12" sm="6" lg="4" xl="3">
+              <v-text-field
+                v-model="obj.name"
+                :readonly="formState.readOnly"
+                :disabled="formState.readOnly"
+                :clearable="!formState.readOnly"
+                @click:clear="fieldValueChanged('name')"
+                :counter="255"
+                :label="$ay.t('Name')"
+                :rules="[
+                  form().max255(this, 'name'),
+                  form().required(this, 'name')
+                ]"
+                :error-messages="form().serverErrors(this, 'name')"
+                ref="name"
+                :data-cy="!!$ay.dev ? 'name' : false"
+                @input="fieldValueChanged('name')"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" sm="6" lg="4" xl="3">
+              <v-text-field
+                v-model="obj.employeeNumber"
+                :readonly="formState.readOnly"
+                :disabled="formState.readOnly"
+                :clearable="!formState.readOnly"
+                @click:clear="fieldValueChanged('employeeNumber')"
+                :counter="255"
+                :label="$ay.t('UserEmployeeNumber')"
+                :rules="[form().max255(this, 'employeeNumber')]"
+                :error-messages="form().serverErrors(this, 'employeeNumber')"
+                ref="employeeNumber"
+                :data-cy="!!$ay.dev ? 'employeeNumber' : false"
+                @input="fieldValueChanged('employeeNumber')"
+              ></v-text-field>
+            </v-col>
+
+            <v-col cols="12" sm="6" lg="4" xl="3">
+              <gz-role-picker
+                :label="$ay.t('AuthorizationRoles')"
+                v-model="obj.roles"
+                :readonly="formState.readOnly"
+                :disabled="formState.readOnly"
+                ref="roles"
+                testId="roles"
+                :error-messages="form().serverErrors(this, 'roles')"
+                @input="fieldValueChanged('roles')"
+              ></gz-role-picker>
+            </v-col>
+
+            <v-col
+              v-if="form().showMe(this, 'Active')"
+              cols="12"
+              sm="6"
+              lg="4"
+              xl="3"
+            >
+              <v-checkbox
+                v-model="obj.active"
+                :readonly="formState.readOnly"
+                :disabled="formState.readOnly"
+                :label="$ay.t('Active')"
+                ref="active"
+                :data-cy="!!$ay.dev ? 'active' : false"
+                :error-messages="form().serverErrors(this, 'active')"
+                @change="fieldValueChanged('active')"
+              ></v-checkbox>
+            </v-col>
+
+            <v-col
+              v-if="form().showMe(this, 'UserType')"
+              cols="12"
+              sm="6"
+              lg="4"
+              xl="3"
+            >
+              <v-select
+                v-model="obj.userType"
+                :items="selectLists.usertypes"
+                item-text="name"
+                item-value="id"
+                :readonly="formState.readOnly"
+                :disabled="formState.readOnly"
+                :label="$ay.t('UserType')"
+                ref="usertype"
+                :data-cy="!!$ay.dev ? 'usertype' : false"
+                :rules="[form().integerValid(this, 'usertype')]"
+                :error-messages="form().serverErrors(this, 'usertype')"
+                @input="fieldValueChanged('usertype')"
+              ></v-select>
+            </v-col>
+
+            <v-col cols="12" sm="6" lg="4" xl="3">
+              <v-text-field
+                name="username"
+                id="username"
+                v-model="login"
+                :readonly="formState.readOnly"
+                prepend-icon="fa-user"
+                autocomplete="off"
+                autocorrect="off"
+                autocapitalize="off"
+                spellcheck="false"
+                :label="$ay.t('NewLogin')"
+                :error-messages="form().serverErrors(this, 'login')"
+                ref="login"
+                @input="fieldValueChanged('login')"
+              ></v-text-field>
+            </v-col>
+
+            <v-col cols="12" sm="6" lg="4" xl="3">
+              <v-text-field
+                name="password"
+                id="password"
+                v-model="password"
+                :readonly="formState.readOnly"
+                :append-outer-icon="reveal ? 'fa-eye' : 'fa-eye-slash'"
+                prepend-icon="fa-key"
+                :label="$ay.t('NewPassword')"
+                :type="reveal ? 'text' : 'password'"
+                :error-messages="form().serverErrors(this, 'password')"
+                ref="password"
+                @input="fieldValueChanged('password')"
+                @click:append-outer="reveal = !reveal"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" sm="6" lg="4" xl="3">
+              <gz-date-time-picker
+                :label="$ay.t('LastLogin')"
+                v-model="obj.lastLogin"
+                readonly
+                disabled
+                ref="lastLogin"
+                testId="lastLogin"
+              ></gz-date-time-picker>
+            </v-col>
+            <v-col v-if="form().showMe(this, 'Notes')" cols="12">
+              <v-textarea
+                v-model="obj.notes"
+                :readonly="formState.readOnly"
+                :disabled="formState.readOnly"
+                :label="$ay.t('UserNotes')"
+                :error-messages="form().serverErrors(this, 'notes')"
+                ref="notes"
+                :data-cy="!!$ay.dev ? 'notes' : false"
+                @input="fieldValueChanged('notes')"
+                auto-grow
+                :clearable="!formState.readOnly"
+              ></v-textarea>
+            </v-col>
+
+            <v-col v-if="form().showMe(this, 'Tags')" cols="12">
+              <gz-tag-picker
+                v-model="obj.tags"
+                :readonly="formState.readOnly"
+                :disabled="formState.readOnly"
+                ref="tags"
+                :data-cy="!!$ay.dev ? 'tags' : false"
+                :error-messages="form().serverErrors(this, 'tags')"
+                @input="fieldValueChanged('tags')"
+              ></gz-tag-picker>
+            </v-col>
+
+            <v-col cols="12">
+              <gz-custom-fields
+                v-model="obj.customFields"
+                :formKey="formCustomTemplateKey"
+                :readonly="formState.readOnly"
+                :disabled="formState.readOnly"
+                :parentVM="this"
+                ref="customFields"
+                :data-cy="!!$ay.dev ? 'customFields' : false"
+                :error-messages="form().serverErrors(this, 'customFields')"
+                @input="fieldValueChanged('customFields')"
+              ></gz-custom-fields>
+            </v-col>
+
+            <v-col v-if="form().showMe(this, 'Wiki')" cols="12">
+              <gz-wiki
+                :ayaType="ayaType"
+                :ayaId="obj.id"
+                ref="wiki"
+                v-model="obj.wiki"
+                :readonly="formState.readOnly"
+                :disabled="formState.readOnly"
+                @input="fieldValueChanged('wiki')"
+              ></gz-wiki
+            ></v-col>
+
+            <v-col
+              v-if="form().showMe(this, 'Attachments') && obj.id"
+              cols="12"
+            >
+              <gz-attachments
+                :readonly="formState.readOnly"
+                :disabled="formState.readOnly"
+                :ayaType="ayaType"
+                :ayaId="obj.id"
+              ></gz-attachments
+            ></v-col>
+          </v-row>
+        </v-form>
+      </v-col>
+    </v-row>
+    <template v-if="!formState.ready">
+      <v-progress-circular
+        indeterminate
+        color="primary"
+        :size="60"
+      ></v-progress-circular>
+    </template>
+  </v-container>
+</template>
+
+<script>
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  Xeslint-disable    */
+//
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+//
+const FORM_KEY = "user-edit";
+const API_BASE_URL = "user/";
+const FORM_CUSTOM_TEMPLATE_KEY = "User";
+
+export default {
+  async created() {
+    //created is called when the route is updated to show a new record even though we don't need to re-init again
+    let vm = this;
+    try {
+      await initForm(vm);
+
+      vm.rights = window.$gz.role.getRights(window.$gz.type.User);
+      vm.formState.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+
+      //id 0 means create a new record don't load one
+      if (vm.$route.params.recordid != 0) {
+        //is there already an obj from a prior operation?
+        if (this.$route.params.obj) {
+          //yes, no need to fetch it
+          this.obj = this.$route.params.obj;
+          vm.formState.loading = false; //here we handle it immediately
+        } else {
+          await vm.getDataFromApi(vm.$route.params.recordid); //let getdata handle loading
+        }
+      } else {
+        vm.formState.loading = false; //here we handle it immediately
+      }
+      //set initial form status
+      window.$gz.form.setFormState({
+        vm: vm,
+        dirty: false,
+        valid: true
+      });
+
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty || JUST_DELETED) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
+  data() {
+    return {
+      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
+      selectLists: {
+        usertypes: []
+      },
+      obj: {
+        id: 0,
+        concurrency: 0,
+        active: false,
+        name: null,
+        roles: null,
+        userType: 3,
+        employeeNumber: null,
+        notes: null,
+        customerId: null,
+        headOfficeId: null,
+        subVendorId: null,
+        wiki: null,
+        customFields: "{}",
+        tags: [],
+        lastLogin: null
+      },
+      login: null,
+      password: null,
+      reveal: true,
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.defaultRightsObject(),
+      ayaType: window.$gz.type.User
+    };
+  },
+  //WATCHERS
+  watch: {
+    formState: {
+      handler: function(val) {
+        if (this.formState.loading) {
+          return;
+        }
+
+        //enable / disable save button
+        if (val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+        }
+
+        //enable / disable duplicate / new button
+        if (!val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit(
+            "menu-enable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
+        } else {
+          window.$gz.eventBus.$emit(
+            "menu-disable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
+        }
+      },
+      deep: true
+    }
+  },
+
+  methods: {
+    canSave: function() {
+      return this.formState.valid && this.formState.dirty;
+    },
+    canDuplicate: function() {
+      return this.formState.valid && !this.formState.dirty;
+    },
+    ayaTypes: function() {
+      return window.$gz.type;
+    },
+    form() {
+      return window.$gz.form;
+    },
+    fieldValueChanged(ref) {
+      if (
+        this.formState.ready &&
+        !this.formState.loading &&
+        !this.formState.readOnly
+      ) {
+        window.$gz.form.fieldValueChanged(this, ref);
+      }
+    },
+    async getDataFromApi(recordId) {
+      let vm = this;
+      vm.formState.loading = true;
+
+      if (!recordId) {
+        throw FORM_KEY + "::getDataFromApi -> Missing recordID!";
+      }
+      let url = API_BASE_URL + recordId;
+      try {
+        window.$gz.form.deleteAllErrorBoxErrors(vm);
+        let res = await window.$gz.api.get(url);
+
+        if (res.error) {
+          //Not found?
+          if (res.error.code == "2010") {
+            //notify not found error then navigate backwards
+            window.$gz.eventBus.$emit("notify-error", vm.$ay.t("ErrorAPI2010"));
+            // navigate backwards
+            window.$gz._.delay(function() {
+              vm.$router.go(-1);
+            }, 2000);
+          }
+          vm.formState.serverError = res.error;
+          window.$gz.form.setErrorBoxErrors(vm);
+          vm.formState.loading = false;
+        } else {
+          vm.obj = res.data;
+          //modify the menu as necessary
+          generateMenu(vm);
+
+          //Update the form status
+          window.$gz.form.setFormState({
+            vm: vm,
+            dirty: false,
+            valid: true,
+            loading: false
+          });
+        }
+      } catch (error) {
+        window.$gz.errorHandler.handleFormError(error, vm);
+        vm.formState.loading = false;
+      }
+    },
+    async submit() {
+      let vm = this;
+      if (vm.canSave == false) {
+        return;
+      }
+
+      try {
+        vm.formState.loading = true;
+        let url = API_BASE_URL;
+        //clear any errors vm might be around from previous submit
+        window.$gz.form.deleteAllErrorBoxErrors(vm);
+
+        //add in password and login if changed
+        let submitObject = vm.obj;
+        if (vm.password != null && vm.password != "") {
+          submitObject.password = vm.password;
+        }
+        if (vm.login != null && vm.login != "") {
+          submitObject.login = vm.login;
+        }
+        if (submitObject.roles == null) {
+          submitObject.roles = 0;
+        }
+        let res = await window.$gz.api.upsert(url, submitObject);
+        if (res.error) {
+          vm.formState.serverError = res.error;
+          window.$gz.form.setErrorBoxErrors(vm);
+        } else {
+          //Logic for detecting if a post or put: if id then it was a post, if no id then it was a put
+          if (res.data.id) {
+            //POST - whole new object returned
+            vm.obj = res.data;
+            //Change URL to new record
+            //NOTE: will not cause a page re-render, almost nothing does unless forced with a KEY property or using router.GO()
+
+            this.$router.push({
+              name: "adm-user",
+              params: {
+                recordid: res.data.id,
+                obj: res.data //Pass data object to new form
+              }
+            });
+          } else {
+            //PUT - only concurrency token is returned (**warning, if server changes object other fields then this needs to act more like POST above but is more efficient this way**)
+            //Handle "put" of an existing record (UPDATE)
+            vm.obj.concurrency = res.data.concurrency;
+          }
+
+          //Update the form status
+          window.$gz.form.setFormState({
+            vm: vm,
+            dirty: false,
+            valid: true
+          });
+        }
+      } catch (ex) {
+        window.$gz.errorHandler.handleFormError(ex, vm);
+      } finally {
+        vm.formState.loading = false;
+      }
+    },
+    async remove() {
+      let vm = this;
+      try {
+        let dialogResult = await window.$gz.dialog.confirmDelete();
+        if (dialogResult != true) {
+          return;
+        }
+
+        //do the delete
+        vm.formState.loading = true;
+        //No need to delete a new record, just abandon it...
+        if (vm.$route.params.recordid == 0) {
+          //this should not get offered for delete but to be safe and clear just in case:
+          JUST_DELETED = true;
+          // navigate backwards
+          vm.$router.go(-1);
+        } else {
+          let url = API_BASE_URL + vm.$route.params.recordid;
+
+          window.$gz.form.deleteAllErrorBoxErrors(vm);
+          let res = await window.$gz.api.remove(url);
+          if (res.error) {
+            vm.formState.serverError = res.error;
+            window.$gz.form.setErrorBoxErrors(vm);
+          } else {
+            //workaround to prevent warning about leaving dirty record
+            //For some reason I couldn't just reset isdirty in formstate
+            JUST_DELETED = true;
+            // navigate backwards
+            vm.$router.go(-1);
+          }
+        }
+      } catch (ex) {
+        window.$gz.errorHandler.handleFormError(ex, vm);
+      } finally {
+        vm.formState.loading = false;
+      }
+    },
+    async duplicate() {
+      let vm = this;
+      if (!vm.canDuplicate || vm.$route.params.recordid == 0) {
+        return;
+      }
+      vm.formState.loading = true;
+      let url = API_BASE_URL + "duplicate/" + vm.$route.params.recordid;
+
+      try {
+        window.$gz.form.deleteAllErrorBoxErrors(vm);
+        let res = await window.$gz.api.upsert(url);
+        if (res.error) {
+          vm.formState.serverError = res.error;
+          window.$gz.form.setErrorBoxErrors(vm);
+        } else {
+          //Navigate to new record
+          this.$router.push({
+            name: "adm-user",
+            params: {
+              recordid: res.data.id,
+              obj: res.data // pass data object to new form
+            }
+          });
+        }
+      } catch (ex) {
+        window.$gz.errorHandler.handleFormError(ex, vm);
+      } finally {
+        vm.formState.loading = false;
+      }
+    }
+  }
+};
+
+/////////////////////////////
+//
+//
+async function clickHandler(menuItem) {
+  if (!menuItem) {
+    return;
+  }
+  let m = window.$gz.menu.parseMenuItem(menuItem);
+  if (m.owner == FORM_KEY && !m.disabled) {
+    switch (m.key) {
+      case "save":
+        m.vm.submit();
+        break;
+      case "delete":
+        m.vm.remove();
+        break;
+      case "new":
+        m.vm.$router.push({
+          name: "adm-user",
+          params: { recordid: 0, new: true }
+        });
+        break;
+      case "duplicate":
+        m.vm.duplicate();
+        break;
+      case "report":
+        if (m.id != null) {
+          //last report selected
+          m.vm.$router.push({
+            name: "ay-report",
+            params: { recordid: m.id, ayatype: window.$gz.type.User }
+          });
+        } else {
+          //general report selector chosen
+          let res = await m.vm.$refs.reportSelector.open();
+
+          //if null for no selection
+          //just bail out
+          if (res == null) {
+            return;
+          }
+          //persist last report selected
+          window.$gz.form.setLastReport(FORM_KEY, res);
+
+          //Now open the report viewer...
+          m.vm.$router.push({
+            name: "ay-report",
+            params: { recordid: res.id, ayatype: window.$gz.type.User }
+          });
+        }
+        break;
+      case "directnotify":
+        //nav to direct notify with list of users appended to route
+        if (m.vm.obj.id == 0) {
+          m.vm.$router.push({
+            name: "home-notify-direct"
+          });
+        } else {
+          m.vm.$router.push({
+            name: "home-notify-direct",
+            params: { userIdList: m.vm.obj.id }
+          });
+        }
+        break;
+      default:
+        window.$gz.eventBus.$emit(
+          "notify-warning",
+          FORM_KEY + "::context click: [" + m.key + "]"
+        );
+    }
+  }
+}
+
+//////////////////////
+//
+//
+function generateMenu(vm) {
+  let menuOptions = {
+    isMain: false,
+    icon: "fa-splotch",
+    title: "User",
+    helpUrl: "form-adm-user",
+    formData: {
+      ayaType: window.$gz.type.User,
+      recordId: vm.$route.params.recordid,
+      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY
+    },
+    menuItems: []
+  };
+
+  if (vm.rights.change) {
+    menuOptions.menuItems.push({
+      title: "Save",
+      icon: "fa-save",
+      surface: true,
+      key: FORM_KEY + ":save",
+      vm: vm
+    });
+  }
+
+  if (vm.rights.delete && vm.$route.params.recordid != 0) {
+    menuOptions.menuItems.push({
+      title: "Delete",
+      icon: "fa-trash-alt",
+      surface: true,
+      key: FORM_KEY + ":delete",
+      vm: vm
+    });
+  }
+
+  //STUB REPORTS
+  //Report not Print, print is a further option
+  menuOptions.menuItems.push({
+    title: "Report",
+    icon: "fa-file-alt",
+    key: FORM_KEY + ":report",
+    vm: vm
+  });
+
+  //get last report selected
+  let lastReport = window.$gz.form.getLastReport(FORM_KEY);
+  if (lastReport != null) {
+    menuOptions.menuItems.push({
+      title: lastReport.name,
+      icon: "fa-file-alt",
+      key: FORM_KEY + ":report:" + lastReport.id,
+      vm: vm
+    });
+  }
+
+  if (vm.rights.change) {
+    menuOptions.menuItems.push({
+      title: "New",
+      icon: "fa-plus",
+      key: FORM_KEY + ":new",
+      vm: vm
+    });
+  }
+
+  if (vm.rights.change && vm.$route.params.recordid != 0) {
+    menuOptions.menuItems.push({
+      title: "Duplicate",
+      icon: "fa-clone",
+      key: FORM_KEY + ":duplicate",
+      vm: vm
+    });
+  }
+
+  menuOptions.menuItems.push({
+    title: "DirectNotification",
+    icon: "fa-comment-alt",
+    key: FORM_KEY + ":directnotify",
+    vm: vm
+  });
+
+  window.$gz.eventBus.$emit("menu-change", menuOptions);
+}
+
+let JUST_DELETED = false;
+
+/////////////////////////////////
+//
+//
+async function initForm(vm) {
+  await fetchTranslatedText(vm);
+  await window.$gz.formCustomTemplate.get(FORM_CUSTOM_TEMPLATE_KEY);
+  await populateSelectionLists(vm);
+}
+
+//////////////////////////////////////////////////////////
+//
+// Ensures UI translated text is available
+//
+async function fetchTranslatedText(vm) {
+  await window.$gz.translation.cacheTranslations([
+    "User",
+    "Name",
+    "UserEmployeeNumber",
+    "NewLogin",
+    "NewPassword",
+    "AuthorizationRoles",
+    "UserNotes",
+    "UserType",
+    "Active",
+    "UserCustom1",
+    "UserCustom2",
+    "UserCustom3",
+    "UserCustom4",
+    "UserCustom5",
+    "UserCustom6",
+    "UserCustom7",
+    "UserCustom8",
+    "UserCustom9",
+    "UserCustom10",
+    "UserCustom11",
+    "UserCustom12",
+    "UserCustom13",
+    "UserCustom14",
+    "UserCustom15",
+    "UserCustom16"
+  ]);
+}
+
+//////////////////////
+//
+//
+async function populateSelectionLists(vm) {
+  //ensure the pick lists required are pre-fetched
+  await window.$gz.enums.fetchEnumList("insideusertype");
+  vm.selectLists.usertypes = window.$gz.enums.getSelectionList(
+    "insideusertype"
+  );
+}
+</script>
diff --git a/ayanova/src/views/cust-users.vue b/ayanova/src/views/cust-users.vue
new file mode 100644
index 00000000..02e95d74
--- /dev/null
+++ b/ayanova/src/views/cust-users.vue
@@ -0,0 +1,290 @@
+<template>
+  <div>
+    <v-data-table
+      v-model="selected"
+      :headers="headers"
+      :items="obj"
+      class="elevation-1"
+      :disable-pagination="true"
+      :disable-filtering="true"
+      hide-default-footer
+      @click:row="rowClick"
+      :sort-by="['name']"
+      show-select
+    >
+      <template v-slot:item.active="{ item }">
+        <v-simple-checkbox v-model="item.active" disabled></v-simple-checkbox>
+      </template>
+    </v-data-table>
+  </div>
+</template>
+
+<script>
+const FORM_KEY = "adm-users";
+export default {
+  async created() {
+    let vm = this;
+    try {
+      await initForm(vm);
+
+      vm.rights = window.$gz.role.getRights(window.$gz.type.User);
+      vm.formState.readOnly = !vm.rights.change;
+      vm.formState.ready = true;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      await vm.getDataFromApi();
+      vm.formState.loading = false;
+    } catch (err) {
+      vm.formState.ready = true;
+      window.$gz.errorHandler.handleFormError(err, vm);
+    }
+  },
+
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
+  data() {
+    return {
+      obj: [],
+      headers: [],
+      selected: [],
+      formState: {
+        ready: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.defaultRightsObject(),
+      availableRoles: [],
+      timeZoneName: window.$gz.locale.getBrowserTimeZoneName(),
+      languageName: window.$gz.locale.getBrowserLanguages(),
+      hour12: window.$gz.locale.getHour12()
+    };
+  },
+  methods: {
+    rowClick(item) {
+      window.$gz.eventBus.$emit("openobject", {
+        type: window.$gz.type.User,
+        id: item.id,
+        inside: true
+      });
+    },
+    rolesDisplayFromRoles(roles) {
+      let roleNames = [];
+      if (roles != null && roles != 0) {
+        for (let i = 0; i < this.availableRoles.length; i++) {
+          let role = this.availableRoles[i];
+          if (!!(roles & role.id)) {
+            roleNames.push(role.name);
+          }
+        }
+      }
+      return roleNames.join(", ");
+    },
+    async getDataFromApi() {
+      let vm = this;
+      vm.formState.loading = true;
+
+      window.$gz.form.deleteAllErrorBoxErrors(vm);
+      try {
+        let res = await window.$gz.api.get("user/outlist");
+
+        if (res.error) {
+          if (res.error.code == "2010") {
+            window.$gz.eventBus.$emit("notify-error", vm.$ay.t("ErrorAPI2010"));
+            window.$gz._.delay(function() {
+              vm.$router.go(-1);
+            }, 2000);
+          }
+          vm.formState.serverError = res.error;
+          window.$gz.form.setErrorBoxErrors(vm);
+        } else {
+          if (res.data) {
+            /*   Id = z.Id,
+                Active = z.Active,
+                Name = z.Name,
+                UserType = z.UserType,
+                LastLogin = z.LastLogin */
+            let ret = [];
+            for (let i = 0; i < res.data.length; i++) {
+              let o = res.data[i];
+              ret.push({
+                id: o.id,
+                name: o.name,
+                active: o.active,
+                userType: window.$gz.enums.get("insideusertype", o.userType),
+                lastLogin: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+                  o.lastLogin,
+                  this.timeZoneName,
+                  this.languageName,
+                  this.hour12
+                ),
+                roles: this.rolesDisplayFromRoles(o.roles)
+              });
+            }
+
+            vm.obj = ret;
+          } else {
+            vm.rawObj = [];
+            vm.obj = [];
+          }
+
+          window.$gz.form.setFormState({
+            vm: vm,
+            dirty: false,
+            valid: true,
+            loading: false
+          });
+          generateMenu(vm);
+        }
+      } catch (error) {
+        window.$gz.form.setFormState({
+          vm: vm,
+          loading: false
+        });
+        window.$gz.errorHandler.handleFormError(error, vm);
+      }
+    }
+  }
+};
+
+/////////////////////////////
+//
+//
+async function clickHandler(menuItem) {
+  if (!menuItem) {
+    return;
+  }
+  let m = window.$gz.menu.parseMenuItem(menuItem);
+  if (m.owner == FORM_KEY && !m.disabled) {
+    switch (m.key) {
+      case "new":
+        m.vm.$router.push({
+          name: "cust-user",
+          params: { recordid: 0 }
+        });
+        break;
+      // case "extensions":
+      //   let res = await m.vm.$refs.extensions.open();
+      //   break;
+      case "directnotify":
+        //nav to direct notify with list of users appended to route
+        if (m.vm.selected.length == 0) {
+          m.vm.$router.push({
+            name: "home-notify-direct"
+          });
+        } else {
+          m.vm.$router.push({
+            name: "home-notify-direct",
+            params: { userIdList: m.vm.selected.map(z => z.id).toString() }
+          });
+        }
+        break;
+      default:
+        window.$gz.eventBus.$emit(
+          "notify-warning",
+          FORM_KEY + "::context click: [" + m.key + "]"
+        );
+    }
+  }
+}
+
+//////////////////////
+//
+//
+function generateMenu(vm) {
+  let menuOptions = {
+    isMain: true,
+    icon: "fa-users",
+    title: "UserList",
+    helpUrl: "form-cust-users",
+    menuItems: []
+  };
+
+  if (vm.rights.change) {
+    menuOptions.menuItems.push({
+      title: "New",
+      icon: "fa-plus",
+      surface: true,
+      key: FORM_KEY + ":new",
+      vm: vm
+    });
+  }
+
+  //STUB REPORTS
+  //Report not Print, print is a further option
+  menuOptions.menuItems.push({
+    title: "Report",
+    icon: "fa-file-alt",
+    key: FORM_KEY + ":report",
+    vm: vm
+  });
+
+  menuOptions.menuItems.push({
+    title: "stub: Last report used",
+    icon: "fa-file-alt",
+    key: FORM_KEY + ":report:STUBlastusedreportid",
+    vm: vm
+  });
+
+  // menuOptions.menuItems.push({
+  //   title: "Extensions",
+  //   icon: "fa-puzzle-piece",
+  //   key: FORM_KEY + ":extensions",
+  //   vm: vm
+  // });
+
+  menuOptions.menuItems.push({
+    title: "DirectNotification",
+    icon: "fa-comment-alt",
+    key: FORM_KEY + ":directnotify",
+    vm: vm
+  });
+
+  window.$gz.eventBus.$emit("menu-change", menuOptions);
+}
+
+/////////////////////////////////
+//
+//
+async function initForm(vm) {
+  await fetchTranslatedText(vm);
+  await cacheEnums(vm);
+  await createTableHeaders(vm);
+}
+
+//////////////////////////////////////////////////////////
+//
+// Ensures UI translated text is available
+//
+async function fetchTranslatedText(vm) {
+  await window.$gz.translation.cacheTranslations([
+    "User",
+    "Active",
+    "UserType",
+    "LastLogin"
+  ]);
+}
+
+//////////////////////
+//
+//
+async function cacheEnums(vm) {
+  //ensure the enum values required are pre-fetched
+  await window.$gz.enums.fetchEnumList("outsideusertype");
+  await window.$gz.enums.fetchEnumList("AuthorizationRoles");
+  vm.availableRoles = window.$gz.enums.getSelectionList("AuthorizationRoles");
+}
+
+//////////////////////
+//
+//
+async function createTableHeaders(vm) {
+  vm.headers = [
+    { text: vm.$ay.t("User"), value: "name" },
+    { text: vm.$ay.t("Active"), value: "active" },
+    { text: vm.$ay.t("UserType"), value: "userType" },
+    { text: vm.$ay.t("LastLogin"), value: "lastLogin" }
+  ];
+}
+</script>