Files
raven-client/ayanova/src/views/adm-user.vue
John Cardinal 223a9e4060 Removed clearable from most forms, it's too "busy" and fucks up the look of the form for not much benefit
maybe in future can look at only showing on mobile or something or when the field is active?
2020-11-11 20:03:53 +00:00

783 lines
23 KiB
Vue

<template>
<v-container fluid>
<gz-report-selector ref="reportSelector"></gz-report-selector>
<h2 class="red--text" v-if="$ay.dev">
todo: revisit after add vendor to support usertype contractor TEST SAVE
when have vendor and make sure wont' allow without vendor chosen and make
sure if not error is clear
</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"
:label="$ay.t('Name')"
:rules="[form().required(this, 'name')]"
:error-messages="form().serverErrors(this, 'name')"
ref="name"
data-cy="name"
@input="fieldValueChanged('name')"
></v-text-field>
</v-col>
<v-col
v-if="form().showMe(this, 'subVendorId') && obj.userType == 5"
cols="12"
sm="6"
lg="4"
xl="3"
>
<gz-pick-list
:ayaType="ayaTypes().Vendor"
:showEditIcon="true"
v-model="obj.subVendorId"
:readonly="formState.readOnly"
:disabled="formState.readOnly"
:label="$ay.t('Vendor')"
ref="subVendorId"
data-cy="subVendorId"
:error-messages="form().serverErrors(this, 'subVendorId')"
@input="fieldValueChanged('subVendorId')"
></gz-pick-list>
</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"
:label="$ay.t('UserEmployeeNumber')"
:error-messages="form().serverErrors(this, 'employeeNumber')"
ref="employeeNumber"
data-cy="employeeNumber"
@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')"
limitSelectionTo="inside"
></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="active"
: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="usertype"
: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="$ayiUser"
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 ? '$ayiEye' : '$ayiEyeSlash'"
prepend-icon="$ayiKey"
: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="notes"
@input="fieldValueChanged('notes')"
auto-grow
></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="tags"
: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="customFields"
: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"; //<-- Should always be CoreBizObject AyaType name here where possible
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: 2,
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 new Error(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") {
window.$gz.form.handleObjectNotFound(vm);
}
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: "$ayiUser",
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: "$ayiSave",
surface: true,
key: FORM_KEY + ":save",
vm: vm
});
}
if (vm.rights.delete && vm.$route.params.recordid != 0) {
menuOptions.menuItems.push({
title: "Delete",
icon: "$ayiTrashAlt",
surface: false,
key: FORM_KEY + ":delete",
vm: vm
});
}
//STUB REPORTS
//Report not Print, print is a further option
menuOptions.menuItems.push({
title: "Report",
icon: "$ayiFileAlt",
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: "$ayiFileAlt",
key: FORM_KEY + ":report:" + lastReport.id,
vm: vm
});
}
if (vm.rights.change) {
menuOptions.menuItems.push({
title: "New",
icon: "$ayiPlus",
key: FORM_KEY + ":new",
vm: vm
});
}
if (vm.rights.change && vm.$route.params.recordid != 0) {
menuOptions.menuItems.push({
title: "Duplicate",
icon: "$ayiClone",
key: FORM_KEY + ":duplicate",
vm: vm
});
}
menuOptions.menuItems.push({
title: "DirectNotification",
icon: "$ayiCommentAlt",
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([
"Vendor",
"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>