This commit is contained in:
2020-11-11 15:55:31 +00:00
parent 2a40dc754b
commit 72cd1d89ba
4 changed files with 964 additions and 13 deletions

View File

@@ -31,8 +31,8 @@ EACH OBJECT DEV CYCLE:
FRONT
AyaType / rights
front route
Edit form
List form
Edit form
Add to smoke test
DOCS (at back but with front links, maybe not fleshed out just placeholder ok for now)
IMPORT

View File

@@ -163,6 +163,12 @@ export default new Router({
component: () =>
import(/* webpackChunkName: "cust" */ "./views/cust-customers.vue")
},
{
path: "/cust-customers/:recordid",
name: "customer-edit",
component: () =>
import(/* webpackChunkName: "cust" */ "./views/cust-customer.vue")
},
{
path: "/cust-headoffices",
name: "cust-headoffices",

View File

@@ -0,0 +1,798 @@
<template>
<v-container fluid>
<gz-report-selector ref="reportSelector"></gz-report-selector>
<!-- {{ formState }} -->
<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('WidgetName')"
: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, 'Serial')"
cols="12"
sm="6"
lg="4"
xl="3"
>
<v-text-field
v-model="obj.serial"
:readonly="true"
:disabled="formState.readOnly"
:label="$ay.t('WidgetSerial')"
data-cy="serial"
></v-text-field>
</v-col>
<v-col
v-if="form().showMe(this, 'Count')"
cols="12"
sm="6"
lg="4"
xl="3"
>
<v-text-field
v-model="obj.count"
:readonly="formState.readOnly"
:disabled="formState.readOnly"
:clearable="!formState.readOnly"
@click:clear="fieldValueChanged('count')"
:counter="10"
:label="$ay.t('WidgetCount')"
ref="count"
data-cy="count"
:rules="[form().integerValid(this, 'count')]"
:error-messages="form().serverErrors(this, 'count')"
@input="fieldValueChanged('count')"
type="number"
></v-text-field>
</v-col>
<v-col
v-if="form().showMe(this, 'DollarAmount')"
cols="12"
sm="6"
lg="4"
xl="3"
>
<gz-currency
v-model="obj.dollarAmount"
:readonly="formState.readOnly"
:disabled="formState.readOnly"
:label="$ay.t('WidgetDollarAmount')"
ref="dollarAmount"
data-cy="dollarAmount"
:rules="[
form().decimalValid(this, 'dollarAmount'),
form().required(this, 'dollarAmount')
]"
:error-messages="form().serverErrors(this, 'dollarAmount')"
@input="fieldValueChanged('dollarAmount')"
></gz-currency>
</v-col>
<v-col cols="12" sm="6" lg="4" xl="3">
<gz-date-time-picker
:label="$ay.t('WidgetStartDate')"
v-model="obj.startDate"
:readonly="formState.readOnly"
:disabled="formState.readOnly"
ref="startDate"
testId="startDate"
:error-messages="form().serverErrors(this, 'startDate')"
@input="fieldValueChanged('startDate')"
></gz-date-time-picker>
</v-col>
<v-col cols="12" sm="6" lg="4" xl="3">
<gz-date-time-picker
:label="$ay.t('WidgetEndDate')"
:rules="[form().datePrecedence(this, 'startDate', 'endDate')]"
:error-messages="form().serverErrors(this, 'endDate')"
v-model="obj.endDate"
:readonly="formState.readOnly"
:disabled="formState.readOnly"
ref="endDate"
testId="endDate"
@input="fieldValueChanged('endDate')"
></gz-date-time-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, 'UserId')"
cols="12"
sm="6"
lg="4"
xl="3"
>
<gz-pick-list
:ayaType="ayaTypes().User"
:showEditIcon="true"
v-model="obj.userId"
:readonly="formState.readOnly"
:disabled="formState.readOnly"
:label="$ay.t('User')"
ref="userid"
data-cy="userid"
:error-messages="form().serverErrors(this, 'userid')"
@input="fieldValueChanged('userid')"
></gz-pick-list>
</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 v-if="form().showMe(this, 'Notes')" cols="12">
<v-textarea
v-model="obj.notes"
:readonly="formState.readOnly"
:disabled="formState.readOnly"
:label="$ay.t('WidgetNotes')"
:error-messages="form().serverErrors(this, 'notes')"
ref="notes"
data-cy="notes"
@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="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 = "customer-edit";
const API_BASE_URL = "customer/";
const FORM_CUSTOM_TEMPLATE_KEY = "Customer"; //<-- Should always be CoreBizObject AyaType name here where possible
export default {
async created() {
let vm = this;
try {
await initForm(vm);
vm.rights = window.$gz.role.getRights(window.$gz.type.Customer);
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;
window.$gz.form.setFormState({
vm: vm,
loading: false
});
} else {
await vm.getDataFromApi(vm.$route.params.recordid); //let getdata handle loading
}
} else {
window.$gz.form.setFormState({
vm: vm,
loading: false
});
}
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: {
//IMPORTANT NOTE: Fields that are NON NULLABLE in the schema for the table but *are* hideable **MUST** have a default value set here or else there will be no way to save the record
//I.E. Serial, usertype fields
//Also, if it's a non-nullable Enum backed field then it should have a valid selection i.e. not zero if there is no zero
id: 0,
concurrency: 0,
name: null,
serial: 0,
dollarAmount: null,
active: null,
userType: 2, //defaulted here to something valid
startDate: null,
endDate: null,
notes: null,
count: null,
wiki: null,
customFields: "{}",
tags: [],
userId: null
},
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.Customer
};
},
//WATCHERS
watch: {
formState: {
handler: function(val) {
//,oldval is available here too if necessary
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;
window.$gz.form.setFormState({
vm: vm,
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);
} 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);
} finally {
window.$gz.form.setFormState({
vm: vm,
loading: false
});
}
},
async submit() {
let vm = this;
if (vm.canSave == false) {
return;
}
try {
window.$gz.form.setFormState({
vm: vm,
loading: true
});
let url = API_BASE_URL; // + vm.$route.params.recordid;
//clear any errors vm might be around from previous submit
window.$gz.form.deleteAllErrorBoxErrors(vm);
let res = await window.$gz.api.upsert(url, vm.obj);
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: "customer-edit",
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 {
window.$gz.form.setFormState({
vm: vm,
loading: false
});
}
},
async remove() {
let vm = this;
try {
let dialogResult = await window.$gz.dialog.confirmDelete();
if (dialogResult != true) {
return;
}
//do the delete
window.$gz.form.setFormState({
vm: vm,
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 (error) {
//Update the form status
window.$gz.form.setFormState({
vm: vm,
loading: false
});
window.$gz.errorHandler.handleFormError(error, vm);
}
},
async duplicate() {
let vm = this;
if (!vm.canDuplicate || vm.$route.params.recordid == 0) {
return;
}
window.$gz.form.setFormState({
vm: vm,
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: "customer-edit",
params: {
recordid: res.data.id,
obj: res.data // Pass data object to new form
}
});
}
} catch (ex) {
window.$gz.errorHandler.handleFormError(ex, vm);
} finally {
window.$gz.form.setFormState({
vm: vm,
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: "customer-edit",
params: { recordid: 0, new: true }
});
break;
case "duplicate":
m.vm.duplicate();
break;
case "report":
if (m.id != null) {
//last report selected is in m.id
m.vm.$router.push({
name: "ay-report",
params: { recordid: m.id, ayatype: window.$gz.type.Customer }
});
} else {
//general report selector chosen
let res = await m.vm.$refs.reportSelector.open({
ObjectType: window.$gz.type.Customer,
selectedRowIds: [m.vm.obj.id]
});
//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.Customer }
});
}
break;
default:
window.$gz.eventBus.$emit(
"notify-warning",
FORM_KEY + "::context click: [" + m.key + "]"
);
}
}
}
//////////////////////
//
//
function generateMenu(vm) {
let menuOptions = {
isMain: false,
icon: "$ayiSplotch",
title: "Customer",
helpUrl: "form-customer",
formData: {
ayaType: window.$gz.type.Customer,
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
});
}
//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) {
menuOptions.menuItems.push({
title: "Duplicate",
icon: "$ayiClone",
key: FORM_KEY + ":duplicate",
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([
"Customer",
"WidgetName",
"WidgetSerial",
"WidgetDollarAmount",
"WidgetCount",
"User",
"UserType",
"WidgetStartDate",
"WidgetEndDate",
"WidgetNotes",
"WidgetCustom1",
"WidgetCustom2",
"WidgetCustom3",
"WidgetCustom4",
"WidgetCustom5",
"WidgetCustom6",
"WidgetCustom7",
"WidgetCustom8",
"WidgetCustom9",
"WidgetCustom10",
"WidgetCustom11",
"WidgetCustom12",
"WidgetCustom13",
"WidgetCustom14",
"WidgetCustom15",
"WidgetCustom16"
]);
}
//////////////////////
//
//
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");
}
</script>
<style></style>

View File

@@ -1,21 +1,168 @@
<template>
<UnderConstruction data-cy="underconstruction" />
<div>
<gz-report-selector ref="reportSelector"></gz-report-selector>
<gz-extensions
:ayaType="ayType"
:selectedItems="selectedItems"
ref="extensions"
>
</gz-extensions>
<gz-data-table
ref="gzdatatable"
formKey="customer-list"
:dataListKey="dataListKey"
:dataListFilter="dataListFilter"
:dataListSort="dataListSort"
:showSelect="rights.change"
v-on:selection-change="handleSelected"
data-cy="customersTable"
>
</gz-data-table>
</div>
</template>
<script>
import UnderConstruction from "../components/underconstruction.vue";
const FORM_KEY = "customer-list";
export default {
components: {
UnderConstruction
created() {
this.rights = window.$gz.role.getRights(window.$gz.type.Customer);
window.$gz.eventBus.$on("menu-click", clickHandler);
generateMenu(this);
},
beforeCreate() {
window.$gz.eventBus.$emit("menu-change", {
isMain: true,
icon: "$ayiAddressCard",
title: "CustomerList",
helpUrl: "form-cust-customers"
});
beforeDestroy() {
window.$gz.eventBus.$off("menu-click", clickHandler);
},
data() {
return {
currentListViewId: 1,
dataListKey: "CustomerDataList",
dataListFilter: "",
dataListSort: "",
rights: window.$gz.role.defaultRightsObject(),
ayType: window.$gz.type.Customer,
selectedItems: []
};
},
methods: {
handleSelected(selected) {
this.selectedItems = selected;
}
}
};
/////////////////////////////
//
//
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: "customer-edit",
params: { recordid: 0 }
});
break;
case "extensions":
let res = await m.vm.$refs.extensions.open(
m.vm.$refs.gzdatatable.getDataListSelection(window.$gz.type.Customer)
);
break;
case "report":
if (m.id != null) {
//last report selected is in m.id
m.vm.$router.push({
name: "ay-report",
params: { recordid: m.id, ayatype: window.$gz.type.Customer }
});
} else {
//general report selector chosen
let res = await m.vm.$refs.reportSelector.open(
m.vm.$refs.gzdatatable.getDataListSelection(
window.$gz.type.Customer
)
);
//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.Customer }
});
}
break;
default:
window.$gz.eventBus.$emit(
"notify-warning",
FORM_KEY + "::context click: [" + m.key + "]"
);
}
}
}
//////////////////////
//
//
function generateMenu(vm) {
let menuOptions = {
isMain: true,
icon: "$ayiAddressCard",
title: "CustomerList",
helpUrl: "form-cust-customers",
menuItems: [],
formData: {
ayaType: window.$gz.type.Customer
}
};
if (vm.rights.change) {
menuOptions.menuItems.push({
title: "New",
icon: "$ayiPlus",
surface: true,
key: FORM_KEY + ":new",
vm: vm
});
}
//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
});
}
menuOptions.menuItems.push({
title: "Extensions",
icon: "$ayiPuzzlePiece",
key: FORM_KEY + ":extensions",
vm: vm
});
window.$gz.eventBus.$emit("menu-change", menuOptions);
}
</script>