tsanie/ui-lib
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add: getText compatibility.

Browse Source 
add: `AssetSelector` and `TemplateSelector`.
add: `popup-selector` style class.
add: `ui.resolvePopup` function.
add: `switch` in checkbox.
add: `GridColumn.filterTemplate` supports.
add: add `action` callback in `createIcon`.
change: replace `setTimeout(..., 0)` with `requestAnimationFrame`.
change: Popup result structure adjustment ({ result: any, popup: Popup }).
change: complete add work order flow.
change: reduce Popup title height.
fix: Grid column sort in number.
This commit is contained in:
lchen committed 2024-06-21 17:28:11 +08:00
1 parent 1a7aa1ab66
commit 5baf00de64
34 files changed
+1772 -365
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/element/addworkorder.js
+640 -72
View File
@@ -1,124 +1,582 @@
import { createElement, Dropdown, Popup, validation, toDateValue, showAlert } from "../ui";
import { createElement, Dropdown, Popup, showAlert, createIcon, DateSelector, showConfirm, Grid } from "../ui";
import { r as lang, nullOrEmpty } from "../utility";
import AssetSelector from "./assetSelector";
let r = lang;
const iconWorkOrder = 'data:image/png;base64,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 Line truncated
/**
* @private
* @param {HTMLElement} element
* @param {boolean?} display
* @returns {HTMLElement}
*/
function displayElement(element, display) {
element.style.display = display === false ? 'none' : '';
return element;
}
/**
* @private
* @param {HTMLInputElement} element
* @param {string} pattern
* @returns {HTMLInputElement}
*/
function patternValidation(element, pattern) {
element.pattern = pattern;
return element;
}
/**
* @private
* @param {"mile" | "mi" | "m" | "kilometre" | "km" | "kilometres"} uom
* @returns {"Mile" | "Kilometre"}
*/
function getOdometerUnit(uom) {
if (nullOrEmpty(uom)) {
return 'Mile';
}
switch (uom.toLowerCase()) {
case 'mile':
case 'mi':
case 'm':
return 'Mile';
case 'kilometre':
case 'km':
case 'kilometres':
return 'Kilometre';
default:
return 'Mile';
}
}
export default class AddWorkOrder {
_var = {
option: {
isCustomerRecord: true
allowCustomer: false,
assetFullcontrol: false,
/**
* @private
* @type {(assetId: number) => Promise<{Id: number, VIN: string, DisplayName: string, OnRoad: boolean, Hide: boolean, EngineHours?: number, Odometer?: number, OdometerUOM?: string}>}
*/
requestAssetInfo: null,
/**
* @private
* @type {() => Promise<{Statuses: any[], Jobsites: any[], Codes: any[], Advisors: any[], Locations: any[], Departments: any[], OrderTypes: any[], AssetId: null}>}
*/
requestWorkOrderParams: null,
/**
* @private
* @type {(hidden: boolean, search?: string, groups?: string[], jobsites?: number[], codes?: string[]) => Promise<any[]>}
*/
requestAssets: null,
/**
* @private
* @type {() => Promise<any>}
*/
requestAddAsset: null,
/**
* @private
* @type {() => Promise<{Customer: any, Contacts: any[], Followers: any[]}>}
*/
requestCustomers: null,
/**
* @private
* @type {(assetId: number, locationId: number, departmentId: number) => Promise<any[]>}
*/
requestAssignedTo: null,
/**
* @private
* @type {(assetId: number) => Promise}
*/
requestHideAsset: null,
/**
* @private
* @type {(assetId: number) => Promise<any[]>}
*/
requestOpenedWorkorder: null,
zIndex: 999
},
/**
* @private
* @type {HTMLElement}
*/
container: null
container: null,
/**
* @private
* @property {number} Id
* @property {string} VIN
* @property {string} DisplayName
* @property {boolean} OnRoad
* @property {boolean} Hide
* @property {number} [EngineHours]
* @property {number} [Odometer]
* @property {string} [OdometerUOM]
*/
asset: null,
/**
* @private
* @property {string} Id
* @property {string} Name
* @property {string} Code
*/
customer: null,
contacts: [],
followers: [],
params: {
Locations: [],
Departments: [],
Advisors: [],
OrderTypes: [],
Statuses: [],
Jobsites: [],
Codes: []
},
el: {
/**
* @private
* @type {HTMLTextAreaElement}
*/
textComplaint: null,
/**
* @private
* @type {Dropdown}
*/
dropWorkOrderType: null,
/**
* @private
* @type {Dropdown}
*/
dropStatus: null,
/**
* @private
* @type {DateSelector}
*/
dateCompleted: null,
/**
* @private
* @type {HTMLInputElement}
*/
inputHours: null,
/**
* @private
* @type {HTMLInputElement}
*/
inputOdometer: null,
/**
* @private
* @type {Dropdown}
*/
dropOdometerUnit: null,
/**
* @private
* @type {Dropdown}
*/
dropAssignedTo: null,
/**
* @private
* @type {Dropdown}
*/
dropAdvisor: null,
/**
* @private
* @type {Dropdown}
*/
dropLocation: null,
/**
* @private
* @type {Dropdown}
*/
dropDepartment: null
}
};
onAssetAdded;
onAssetSelected;
onSave;
constructor(opt) {
opt ??= {};
this._var.option = opt;
const getText = opt.getText;
if (typeof getText === 'function') {
r = getText;
} else if (typeof GetTextByKey === 'function') {
r = GetTextByKey;
}
}
get complaint() {
return this._var.container.querySelector('.wo-complaint')?.value;
async getItem() {
const title = r('P_WO_OPENWORKORDER', 'Open Work Order');
const el = this._var.el;
let status = el.dropStatus.selected;
if (status != null) {
status = {
Status: status.Id,
StatusType: status.StatusType,
StatusName: status.Name,
StatusAutoText: status.AutoText,
StatusMessage: status.Message
};
} else {
status = {
Status: -1
};
}
let machine = this._var.asset;
if (machine == null) {
showAlert(title, r('P_WO_ASSETNOTEMPTY', 'Asset cannot be empty.')).then(() => this._var.container.querySelector('.wo-asset>svg')?.focus());
return null;
}
const item = {
Id: -1,
Description: el.textComplaint.value,
WorkOrderType: el.dropWorkOrderType.selected?.Key ?? '',
CompleteDate: el.dateCompleted.element.value,
// MeterType:
HourMeter: el.inputHours.value || -1,
Odometer: el.inputOdometer.value || -1,
OdometerUnits: el.dropOdometerUnit.selected?.value ?? 'Mile',
AssignedTo: el.dropAssignedTo.selected?.IID ?? '',
AdvisorId: el.dropAdvisor.selected?.Key ?? '',
LocationId: el.dropLocation.selected?.ID || -1,
DepartmentId: el.dropDepartment.selected?.Id || -1,
AssetID: machine.Id,
VIN: machine.VIN,
AssetName: machine.DisplayName,
WorkOrderTotalCost: -1,
HoursToComplete: -1,
OtherCost: -1,
PartsCost: -1,
TravelTimeCost: -1,
LaborCost: -1,
HourlyRate: -1,
InspectionTemplateId: -1,
...status
};
item.CustomerId = this._var.customer?.Id ?? -1;
item.Contacts = this._var.contacts ?? [];
item.Followers = this._var.followers ?? [];
if (nullOrEmpty(el.textComplaint?.value)) {
showAlert(title, r('P_WO_COMPLAINTREQUIRED', 'Complaint is required.')).then(() => el.textComplaint.focus());
return null;
}
if (el.dropStatus.selected?.Completed) {
if (!el.dateCompleted.element.validity.valid) {
showAlert(title, r('P_WO_COMPLETEDDATECANNOTBEEMPTY', 'Completed Date cannot be empty.')).then(() => el.dateCompleted.element.focus());
return null;
}
if (machine.OnRoad) {
item.MeterType = 'Odometer';
if (nullOrEmpty(item.Odometer) || isNaN(item.Odometer) || item.Odometer < 0) {
showAlert(title, r('P_WO_ODOMETERFORMATERROR', 'Odometer format error.')).then(() => el.inputOdometer.focus());
return null;
}
} else {
item.MeterType = 'HourMeter';
if (nullOrEmpty(item.HourMeter) || isNaN(item.HourMeter) || item.HourMeter < 0) {
showAlert(title, r('P_WO_HOURMETERFORMATERROR', 'Hour Meter format error.')).then(() => el.inputHours.focus());
return null;
}
}
}
return item;
}
show() {
async show() {
const option = this._var.option;
var title = r('P_WO_OPENWORKORDER', 'Open Work Order');
const allowCustomer = option.allowCustomer === true;
const title = r('P_WO_OPENWORKORDER', 'Open Work Order');
const tabIndex = Math.max.apply(null, [...document.querySelectorAll('[tabindex]')].map(e => e.tabIndex ?? 0)) + 3;
const textComplaint = createElement('textarea', textarea => {
textarea.tabIndex = tabIndex + 2;
textarea.className = 'ui-text wo-complaint';
textarea.placeholder = r('P_WO_ENTERCOMPLAINT', 'Enter Complaint');
});
const baseOption = {
search: true,
textKey: 'Value',
valueKey: 'Key'
};
const dropWorkOrderType = new Dropdown({
tabIndex: tabIndex + 3,
input: true,
...baseOption
});
const dropStatus = new Dropdown({
tabIndex: tabIndex + 5,
htmlTemplate: it => createElement('span', 'wo-color-line',
createElement('em', em => em.style.backgroundColor = it.Color),
createElement('label', label => label.innerText = it.Name)
),
search: true,
textKey: 'Name',
valueKey: 'Id'
});
const dateCompleted = new DateSelector({
tabIndex: tabIndex + 6,
className: 'wo-status-closed'
});
const inputHours = createElement('input', input => {
input.type = 'text';
input.tabIndex = tabIndex + 7;
input.className = 'ui-input wo-hours input-hours';
});
const inputOdometer = createElement('input', input => {
input.type = 'text';
input.tabIndex = tabIndex + 8;
input.className = 'ui-input wo-odometer input-odometer';
});
const dropOdometerUnit = new Dropdown({
tabIndex: tabIndex + 9,
selected: 'Mile'
});
dropOdometerUnit.source = [
{ value: 'Mile', text: GetTextByKey('P_WO_MILE', 'Mile') },
{ value: 'Kilometre', text: GetTextByKey('P_WO_KILOMETER', 'Kilometer') }
]
const dropAssignedTo = new Dropdown({
tabIndex: tabIndex + 10,
selected: '',
search: true,
valueKey: 'IID',
textKey: 'DisplayName'
});
dropAssignedTo.source = [{ IID: '', DisplayName: '' }];
const dropAdvisor = new Dropdown({
tabIndex: tabIndex + 11,
selected: '',
...baseOption
});
const dropLocation = new Dropdown({
tabIndex: tabIndex + 12,
selected: -1,
search: true,
valueKey: 'ID',
textKey: 'Name'
});
const dropDepartment = new Dropdown({
tabIndex: tabIndex + 13,
selected: -1,
search: true,
valueKey: 'Id',
textKey: 'Name'
});
// save variables
this._var.el = {
textComplaint,
dropWorkOrderType,
dropStatus,
dateCompleted,
inputHours,
inputOdometer,
dropOdometerUnit,
dropAssignedTo,
dropAdvisor,
dropLocation,
dropDepartment
}
const container = createElement('div', 'open-wo-container',
createElement('div', 'open-wo-header',
createElement('img', img => img.src = iconWorkOrder),
createElement('h3', h3 => h3.innerText = title)
),
createElement('div', 'open-wo-content',
createElement('div', 'wo-line',
createElement('div', 'wo-combined wo-asset',
createElement('span', span => {
span.className = 'wo-title wo-title-required';
span.innerText = r('P_WO_ASSET_COLON', 'Asset:');
}),
createIcon('fa-light', 'search', svg => {
svg.tabIndex = tabIndex + 1;
svg.addEventListener('click', () => {
const selector = new AssetSelector({
assetFullcontrol: option.assetFullcontrol,
requestAssets: option.requestAssets,
requestAddAsset: option.requestAddAsset,
dataSource: this._var.params
});
selector.onSelected = async it => {
const el = this._var.el;
if (typeof option.requestAssetInfo === 'function') {
const a = await option.requestAssetInfo(it.Id);
if (a != null) {
it = a;
if (it.OnRoad) {
el.inputHours.value = '';
el.inputOdometer.value = it.Odometer;
el.dropOdometerUnit.select(getOdometerUnit(it.OdometerUOM));
} else {
el.inputHours.value = it.EngineHours;
el.inputOdometer.value = '';
el.dropOdometerUnit.select('Mile');
}
}
}
this._var.asset = it;
if (typeof this.onAssetSelected === 'function') {
this.onAssetSelected(it);
}
this._var.container.querySelector('.wo-asset-name').innerText = it.DisplayName;
// get assigned to
if (typeof option.requestAssignedTo === 'function') {
const data = await option.requestAssignedTo(it.Id, el.dropLocation.selected?.ID ?? -1, el.dropDepartment.selected?.Id ?? -1)
el.dropAssignedTo.source = [{ IID: '', DisplayName: '' }, ...data];
el.dropStatus.onSelected(el.dropStatus.selected);
}
};
selector.show().then(mask => mask.style.zIndex = option.zIndex ?? 999);
});
})
),
createElement('div', 'wo-line',
createElement('span', 'wo-asset-name'),
createElement('div', 'wo-line wo-combined',
createElement('span', span => {
span.className = 'wo-title wo-title-required';
span.innerText = r('P_WO_COMPLAINTCOLON', 'Complaint:');
})
),
createElement('div', 'wo-line wo-sub-line',
createElement('textarea', textarea => {
textarea.className = 'ui-text wo-complaint';
textarea.placeholder = r('P_WO_ENTERCOMPLAINT', 'Enter Complaint');
})
createElement('div', div => {
div.className = 'wo-line wo-combined wo-sub-line';
div.style.marginBottom = '2px';
div.style.width = 'calc(100% - 10px)';
},
textComplaint
),
createElement('div', 'wo-line',
createElement('span', span => {
span.className = 'wo-title';
span.innerText = r('P_WO_WORKORDERTYPE_COLON', 'Work Order Type:');
})
),
createElement('div', 'wo-line wo-customer-record',
createElement('span', span => {
span.className = 'wo-title';
span.innerText = r('P_WO_WORKORDERTYPE_COLON', 'Work Order Type:');
}),
dropWorkOrderType.create(),
createElement('div', div => {
div.className = 'wo-combined wo-customer-record';
if (!allowCustomer) {
displayElement(div, false);
}
},
createElement('span', span => {
span.className = 'wo-title';
span.innerText = r('P_WO_COMPANYNAME_COLON', 'Company Name:');
}),
createIcon('fa-light', 'search', svg => {
svg.tabIndex = tabIndex + 4;
svg.addEventListener('click', async () => {
if (typeof option.requestCustomers === 'function') {
popup.loading = true;
const data = await option.requestCustomers();
popup.loading = false;
if (data != null) {
this._var.customer = data.Customer;
this._var.contacts = data.Contacts;
this._var.followers = data.Followers;
let name = data.Customer.Name;
if (!nullOrEmpty(data.Customer.Code)) {
name += ' / ' + data.Customer.Code;
}
this._var.container.querySelector('.wo-company-name').innerText = name;
}
}
});
})
),
createElement('div', 'wo-line',
createElement('span', span => {
span.className = 'wo-title';
span.innerText = r('P_WO_STATUS_COLON', 'Status:');
})
displayElement(createElement('span', 'wo-company-name'), allowCustomer),
createElement('span', span => {
span.className = 'wo-title';
span.innerText = r('P_WO_STATUS_COLON', 'Status:');
}),
dropStatus.create(),
createElement('span', span => {
span.className = 'wo-title wo-title-required wo-sub-line wo-status-closed';
span.innerText = r('P_WO_COMPLETEDDATE_COLON', 'Completed Date:');
displayElement(span, false);
}),
displayElement(dateCompleted.create(), false),
createElement('span', span => {
span.className = 'wo-title wo-title-required wo-sub-line wo-hours';
span.innerText = r('P_WO_HOURS_COLON', 'Hours:');
displayElement(span, false);
}),
displayElement(
patternValidation(inputHours, '\\d+\\.?\\d*'),
false
),
createElement('div', 'wo-line wo-sub-line wo-status-closed',
createElement('span', span => {
span.className = 'wo-title';
span.innerText = r('P_WO_COMPLETEDDATE_COLON', 'Completed Date:');
})
createElement('span', span => {
span.className = 'wo-title wo-title-required wo-sub-line wo-odometer';
span.innerText = r('P_WO_ODOMETER_COLON', 'Odometer:');
displayElement(span, false);
}),
createElement('div', div => {
div.className = 'wo-combined wo-odometer';
displayElement(div, false);
},
patternValidation(inputOdometer, '\\d+\\.?\\d*'),
dropOdometerUnit.create()
),
createElement('div', 'wo-line wo-sub-line wo-status-closed',
createElement('span', span => {
span.className = 'wo-title';
span.innerText = r('P_WO_HOURS_COLON', 'Hours:');
})
),
createElement('div', 'wo-line wo-sub-line wo-status-closed',
createElement('span', span => {
span.className = 'wo-title';
span.innerText = r('P_WO_ODOMETER_COLON', 'Odometer:');
})
),
createElement('div', 'wo-line',
createElement('span', span => {
span.className = 'wo-title';
span.innerText = r('P_WO_ASSIGNEDTO_COLON', 'Assigned To:');
})
),
createElement('div', 'wo-line wo-customer-record',
createElement('span', span => {
span.className = 'wo-title';
span.innerText = r('P_WO_ADVISOR_COLON', 'Advisor:');
})
),
createElement('div', 'wo-line wo-customer-record',
createElement('span', span => {
span.className = 'wo-title';
span.innerText = r('P_WO_LOCATION_COLON', 'Location:');
})
),
createElement('div', 'wo-line wo-customer-record',
createElement('span', span => {
span.className = 'wo-title';
span.innerText = r('P_WO_DEPARTMENT_COLON', 'Department:');
})
)
createElement('span', span => {
span.className = 'wo-title';
span.innerText = r('P_WO_ASSIGNEDTO_COLON', 'Assigned Tech:');
}),
dropAssignedTo.create(),
createElement('span', span => {
span.className = 'wo-title wo-customer-record';
span.innerText = r('P_WO_ADVISOR_COLON', 'Advisor:');
if (!allowCustomer) {
displayElement(span, false);
}
}),
displayElement(dropAdvisor.create(), allowCustomer),
createElement('span', span => {
span.className = 'wo-title wo-customer-record';
span.innerText = r('P_WO_LOCATION_COLON', 'Location:');
if (!allowCustomer) {
displayElement(span, false);
}
}),
displayElement(dropLocation.create(), allowCustomer),
createElement('span', span => {
span.className = 'wo-title wo-customer-record';
span.innerText = r('P_WO_DEPARTMENT_COLON', 'Department:');
if (!allowCustomer) {
displayElement(span, false);
}
}),
displayElement(dropDepartment.create(), allowCustomer)
)
);
dropStatus.onSelected = item => {
if (item == null) {
return;
}
container.querySelectorAll('.wo-status-closed').forEach(it => it.style.display = item.Completed ? '' : 'none');
if (item.Completed) {
const onRoad = this._var.asset?.OnRoad;
container.querySelectorAll('.wo-hours').forEach(it => it.style.display = onRoad ? 'none' : '');
container.querySelectorAll('.wo-odometer').forEach(it => it.style.display = onRoad ? '' : 'none');
} else {
container.querySelectorAll('.wo-hours').forEach(it => it.style.display = 'none');
container.querySelectorAll('.wo-odometer').forEach(it => it.style.display = 'none');
}
};
dropLocation.onSelected = async loc => {
// get assigned to
const asset = this._var.asset;
if (asset != null && typeof option.requestAssignedTo === 'function') {
const data = await option.requestAssignedTo(asset.Id, loc?.ID ?? -1, this._var.el.dropDepartment.selected?.Id ?? -1)
this._var.el.dropAssignedTo.source = [{ IID: '', DisplayName: '' }, ...data];
}
};
dropDepartment.onSelected = async dep => {
// get assigned to
const asset = this._var.asset;
if (asset != null && typeof option.requestAssignedTo === 'function') {
const data = await option.requestAssignedTo(asset.Id, this._var.el.dropLocation.selected?.ID ?? -1, dep?.Id ?? -1)
this._var.el.dropAssignedTo.source = [{ IID: '', DisplayName: '' }, ...data];
}
}
dateCompleted.value = new Date();
this._var.container = container;
const popup = new Popup({
title,
@@ -127,10 +585,78 @@ export default class AddWorkOrder {
{
key: 'open',
text: title,
trigger: () => {
if (nullOrEmpty(this.complaint)) {
showAlert(title, r('P_WO_COMPLAINTREQUIRED', 'Complaint is required.')).then(() => container.querySelector('.wo-complaint')?.focus());
return false;
trigger: async () => {
popup.loading = true;
try {
const item = await this.getItem();
if (item == null) {
return false;
}
if (this._var.asset.Hide) {
if (!option.assetFullcontrol) {
await showAlert(title, r('P_WO_HIDDENCANNOTCREATE', 'The selected asset is hidden and a work order cannot be created.') + '\n\n' + r('P_WO_CONTACTTOUNHIDE', 'Please contact your Fleet Manager to Unhide the asset if you require a work order.'));
return false;
}
const next = await showConfirm(title, r('P_WO_HIDDENCANNOTCREATE', 'The selected asset is hidden and a work order cannot be created.') + '\n\n' + r('P_WO_PROMPTUNHIDE', 'Do you wish to "Un-Hide" the asset?'), [
{ key: 'unhide', text: r('P_WO_UNHIDE', 'Unhide') },
{ key: 'cancel', text: r('P_WO_CANCELWO', 'Cancel Work Order') }
]);
if (next.result !== 'unhide') {
return false;
}
// hide
if (typeof option.requestHideAsset === 'function') {
await option.requestHideAsset(this._var.asset.Id);
this._var.asset.Hide = false;
}
}
if (typeof option.requestOpenedWorkorder === 'function') {
const wos = await option.requestOpenedWorkorder(this._var.asset.Id);
if (wos == null) {
return false;
}
if (wos.length > 0) {
const next = await new Promise(resolve => {
const popWorkorders = new Popup({
title,
content: createElement('div', 'wo-opened-workorder',
createElement('header', header => header.innerText = r('P_WO_ASSETOPENEDWORKORDER', 'The selected asset has the following open work orders:')),
createElement('div', 'wo-grid-opened')
),
resolve,
buttons: [
{ key: 'create', text: r('P_WO_CREATEWO', 'Create Work Order'), trigger: () => resolve('create') },
{ key: 'cancel', text: r('P_WO_CANCELWO', 'Cancel Work Order'), trigger: () => resolve('cancel') }
]
});
popWorkorders.show().then(mask => {
const grid = new Grid(mask.querySelector('.wo-grid-opened'), r);
grid.columns = [
{ key: 'WorkOrderNumber', caption: 'WO #', width: 100 },
{ key: 'CreateDateStr', caption: r('P_WO_CREATEDDATE', 'Created Date'), width: 120 },
{ key: 'Description', caption: r('P_WO_COMPLAINT', 'Complaint'), width: 360 }
];
grid.init();
grid.source = wos.map(w => ({
WorkOrderNumber: w.WorkOrderNumber,
CreateDateStr: { DisplayValue: w.CreateDateStr, Value: w.CreateDate },
Description: w.Description
}));
// default focus
const button = mask.querySelector('.ui-popup-container .ui-popup-footer .ui-popup-button:last-child');
button?.focus();
});
});
if (next !== 'create') {
return false;
}
}
}
if (typeof this.onSave === 'function') {
this.onSave(item, this._var.el.dropStatus.selected);
}
} finally {
popup.loading = false;
}
}
},
@@ -139,6 +665,48 @@ export default class AddWorkOrder {
});
popup.create();
popup.rect = { width: 600 };
return popup.show();
const mask = await popup.show();
mask.style.zIndex = option.zIndex ?? 999;
if (typeof option.requestWorkOrderParams === 'function') {
popup.loading = true;
const data = await option.requestWorkOrderParams()
if (!isNaN(data.AssetId) && data.AssetId > 0 && typeof option.requestAssetInfo === 'function') {
const it = await option.requestAssetInfo(data.AssetId);
if (it != null) {
if (it.OnRoad) {
inputOdometer.value = it.Odometer;
dropOdometerUnit.select(getOdometerUnit(it.OdometerUOM));
} else {
inputHours.value = it.EngineHours;
}
this._var.asset = it;
// if (typeof this.onAssetSelected === 'function') {
// this.onAssetSelected(it);
// }
this._var.container.querySelector('.wo-asset-name').innerText = it.DisplayName;
// get assigned to
if (typeof option.requestAssignedTo === 'function') {
const data = await option.requestAssignedTo(it.Id, dropLocation.selected?.ID ?? -1, dropDepartment.selected?.Id ?? -1)
dropAssignedTo.source = [{ IID: '', DisplayName: '' }, ...data];
// dropStatus.onSelected(dropStatus.selected);
}
}
}
popup.loading = false;
dropWorkOrderType.source = data.OrderTypes;
dropAdvisor.source = [{ Key: '', Value: '' }, ...data.Advisors];
dropLocation.source = [{ ID: -1, Name: '' }, ...data.Locations];
dropDepartment.source = [{ Id: -1, Name: '' }, ...data.Departments];
this._var.params = data;
dropStatus.source = data.Statuses;
const defaultStatus = data.Statuses.find(s => s.DefaultOnOpen);
if (defaultStatus != null) {
dropStatus.select(defaultStatus.Id);
}
}
textComplaint.focus();
return mask;
}
}
lib/element/assetSelector.js
+269
View File
@@ -0,0 +1,269 @@
import { Dropdown, Grid, Popup, createCheckbox, createElement, createIcon } from "../ui";
import { r as lang } from "../utility";
let r = lang;
export default class AssetSelector {
_var = {
option: {
assetFullcontrol: false,
/**
* @private
* @type {(hidden: boolean, search?: string, groups?: string[], jobsites?: number[], codes?: string[]) => Promise<any[]>}
*/
requestAssets: null,
/**
* @private
* @type {() => Promise<any>}
*/
requestAddAsset: null,
/**
* @private
* @type {() => Promise<{AssetGroups: any[], Codes: any[], Jobsites: any[]}>}
*/
requestAssetParams: null,
dataSource: {
AssetGroups: [],
Codes: [],
Jobsites: []
}
},
/**
* @private
* @type {HTMLElement}
*/
container: null,
/**
* @private
* @type {Popup}
*/
popup: null,
el: {
/**
* @private
* @type {HTMLInputElement}
*/
inputSearch: null,
/**
* @private
* @type {HTMLLabelElement}
*/
checkHidden: null,
/**
* @private
* @type {Dropdown}
*/
dropAssetGroup: null,
/**
* @private
* @type {Dropdown}
*/
dropJobsite: null,
/**
* @private
* @type {Dropdown}
*/
dropJobsiteCode: null,
/**
* @private
* @type {Grid}
*/
grid: null
}
}
onSelected;
constructor(opt) {
opt ??= {};
this._var.option = opt;
const getText = opt.getText;
if (typeof getText === 'function') {
r = getText;
} else if (typeof GetTextByKey === 'function') {
r = GetTextByKey;
}
}
refresh() {
const requestAssets = this._var.option.requestAssets;
if (typeof requestAssets !== 'function') {
return;
}
const el = this._var.el;
this._var.popup.loading = true;
requestAssets(
el.checkHidden.querySelector('input[type="checkbox"]')?.checked,
el.inputSearch.value,
el.dropAssetGroup.selected?.Key,
el.dropJobsite.selected?.ID,
el.dropJobsiteCode.selected?.value
).then(data => {
el.grid.source = data;
}).finally(() => this._var.popup.loading = false);
}
select(item) {
if (typeof this.onSelected !== 'function') {
return false;
}
this.onSelected(item);
}
async create() {
const option = this._var.option;
const title = r('P_MA_SELECTASSET', 'Select Asset');
const tabIndex = Math.max.apply(null, [...document.querySelectorAll('[tabindex]')].map(e => e.tabIndex ?? 0)) + 3;
const inputSearch = createElement('input', input => {
input.type = 'text';
input.placeholder = r('P_SELECTASSETS_SEARCH', 'Search');
input.tabIndex = tabIndex + 2;
input.className = 'ui-input';
input.addEventListener('keypress', e => {
if (e.key === 'Enter') {
this.refresh();
}
})
});
const checkHidden = createCheckbox({
tabIndex: tabIndex + 3,
label: r('P_SELECTASSETS_SHOWHIDDEN', 'Show Hidden'),
onchange: () => this.refresh()
});
const dropAssetGroup = new Dropdown({
tabIndex: tabIndex + 4,
search: true,
valueKey: 'Key',
textKey: 'Value'
});
dropAssetGroup.onSelected = () => this.refresh();
const dropJobsite = new Dropdown({
tabIndex: tabIndex + 5,
search: true,
valueKey: 'ID',
textKey: 'Name'
});
dropJobsite.onSelected = () => this.refresh();
const dropJobsiteCode = new Dropdown({
tabIndex: tabIndex + 6,
search: true
});
dropJobsiteCode.onSelected = () => this.refresh();
const gridContent = createElement('div', div => {
div.className = 'popup-selector-content';
div.style.height = '400px';
});
const grid = new Grid(gridContent, r);
grid.columns = [
{ key: 'VIN', caption: r('P_SELECTASSETS_VIN', 'VIN'), width: 170 },
{ key: 'DisplayName', caption: r('P_SELECTASSETS_NAME', 'Name'), width: 190 },
{ key: 'MakeName', caption: r('P_SELECTASSETS_MAKE', 'Make'), width: 110, allowFilter: true },
{ key: 'ModelName', caption: r('P_SELECTASSETS_MODEL', 'Model'), width: 110, allowFilter: true },
{ key: 'TypeName', caption: r('P_SELECTASSETS_TYPE', 'Type'), width: 110, allowFilter: true },
{ key: 'AcquisitionType', caption: r('P_MA_ACQUISITIONTYPE', 'Acquisition Type'), width: 130, allowFilter: true },
{ key: 'AssetGroups', caption: r('P_MA_ASSETGROUP', 'Asset Group'), width: 150 },
{ key: 'Jobsites', caption: r('P_SELECTASSETS_JOBSITE', 'Jobsite'), width: 180, filter: it => it.Jobsites?.map(s => s.Key) }
];
grid.onRowDblClicked = index => {
const item = grid.source[index];
this.select(item);
this._var.popup.close();
};
grid.init();
grid.element.tabIndex = tabIndex + 7;
this._var.el = {
inputSearch,
checkHidden,
dropAssetGroup,
dropJobsite,
dropJobsiteCode,
grid
}
const container = createElement('div', 'popup-selector',
createElement('div', 'popup-selector-header',
createElement('img', img => img.src = '../img/modules/devices.png'),
createElement('h3', h3 => h3.innerText = title),
option.assetFullcontrol ? createElement('button', button => {
button.className = 'ui-popup-button';
button.tabIndex = tabIndex + 1;
button.innerText = r('P_MA_ADDASSET', 'Add Asset');
button.addEventListener('click', async () => {
if (typeof option.requestAddAsset === 'function') {
this._var.popup.loading = true;
const asset = await option.requestAddAsset();
this._var.popup.loading = false;
if (asset != null) {
this.select(asset);
this._var.popup.close();
}
}
});
}) : ''
),
createElement('div', 'popup-selector-function',
createElement('div', 'search-box',
inputSearch,
createElement('span', span => {
span.addEventListener('click', () => this.refresh());
},
createIcon('fa-light', 'search')
)
),
checkHidden,
createElement('span', span => span.innerText = r('P_WO_ASSETGROUP', 'Asset Group')),
dropAssetGroup.create(),
createElement('span', span => span.innerText = r('P_WO_JOBSITE', 'Jobsite')),
dropJobsite.create(),
createElement('span', span => span.innerText = r('P_SELECTASSETS_JOBSITECODE', 'Jobsite Code')),
dropJobsiteCode.create()
),
gridContent
);
this._var.container = container;
const popup = new Popup({
title,
content: container,
persistent: true,
buttons: [
{
key: 'ok',
text: r('P_GRID_OK', 'OK'),
trigger: () => {
const item = grid.source[grid.selectedIndex];
if (item == null) {
return false;
}
this.select(item);
}
},
{ text: r('P_WO_CANCEL', 'Cancel') }
]
});
this._var.popup = popup;
popup.create();
popup.rect = { width: 1220 };
const mask = await popup.show();
if (option.dataSource == null) {
if (typeof option.requestAssetParams === 'function') {
popup.loading = true;
const data = await option.requestAssetParams();
option.dataSource = data;
} else {
option.dataSource = { AssetGroups: [], Jobsites: [], Codes: [] };
}
}
dropAssetGroup.source = [{ Key: '-1', Value: '' }, ...option.dataSource.AssetGroups];
dropJobsite.source = [{ ID: '-1', Name: '' }, ...option.dataSource.Jobsites];
dropJobsiteCode.source = [{ value: '-1', text: '' }, ...option.dataSource.Codes.map(c => ({ value: c, text: c }))];
this.refresh();
return mask;
}
show() {
if (this._var.popup == null) {
return this.create();
}
return this._var.popup.show();
}
}
lib/element/schedule.js
+2
View File
@@ -11,6 +11,8 @@ export default class ScheduleItem {
const getText = opt?.getText;
if (typeof getText === 'function') {
r = getText;
} else if (typeof GetTextByKey === 'function') {
r = GetTextByKey;
}
}
lib/element/style.scss
+187 -12
View File
@@ -1,3 +1,5 @@
@import "../ui/css/functions/func.scss";
.schedule-item-container {
fieldset {
@@ -96,6 +98,25 @@
}
}
.open-wo-container,
.popup-selector {
.ui-icon {
width: 14px;
height: 14px;
fill: rgb(123, 28, 33);
cursor: pointer;
transition: opacity .12s ease;
&:focus,
&:active,
&:hover {
outline: none;
opacity: .4;
}
}
}
.open-wo-container {
display: flex;
flex-direction: column;
@@ -115,28 +136,182 @@
>.open-wo-content {
flex: 1 1 auto;
margin: 10px;
display: grid;
grid-template-columns: minmax(130px,auto) 1fr;
grid-auto-rows: minmax(32px, auto);
align-items: center;
justify-items: start;
>.wo-line {
grid-column: 1 / 3;
}
.wo-combined {
line-height: var(--settings-line-height);
display: flex;
align-items: center;
&.wo-sub-line {
margin-left: 10px;
>.ui-icon {
margin-left: 4px;
}
}
>.wo-title {
&.wo-title-required {
&::after {
content: '*';
color: var(--red-color);
}
.wo-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&.wo-title-required {
&::after {
content: '*';
color: var(--red-color);
}
}
>.ui-text {
width: 100%;
height: 80px;
box-sizing: border-box;
}
.wo-sub-line {
margin-left: 10px;
}
.wo-asset-name,
.wo-company-name {
margin-left: 6px;
max-width: 400px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ui-input,
.ui-date-cell,
.ui-drop-wrapper {
margin-left: 4px;
}
.ui-input {
height: 28px;
line-height: 28px;
box-sizing: border-box;
}
.ui-input,
.ui-drop-wrapper {
min-width: 180px;
max-width: 300px;
}
.input-odometer+.ui-drop-wrapper {
min-width: 50px;
}
.ui-date-cell {
height: 26px;
padding: 0 4px;
@include outborder();
&:invalid {
color: rgba(0, 0, 0, .3);
}
}
.ui-text {
width: 100%;
height: 80px;
box-sizing: border-box;
}
.wo-color-line {
display: flex;
align-items: center;
>em {
flex: 0 0 auto;
width: 14px;
height: 14px;
border-radius: 7px;
}
>label {
flex: 1 1 auto;
padding-left: 8px;
cursor: pointer;
}
}
}
}
.popup-selector {
display: flex;
flex-direction: column;
>.popup-selector-header {
flex: 0 0 auto;
display: flex;
align-items: flex-start;
>img {
width: 100px;
}
>h3 {
font-size: var(--font-header-size);
font-family: var(--header-font-family);
margin: 10px;
flex: 1 1 auto;
}
}
>.popup-selector-function {
flex: 0 0 auto;
margin: 10px;
display: flex;
align-items: center;
>.search-box {
position: relative;
>span {
position: absolute;
display: flex;
right: 4px;
top: calc(50% - 7px);
cursor: pointer;
}
}
.ui-input {
width: 200px;
box-sizing: border-box;
height: 28px;
}
.ui-drop-wrapper {
margin: 0 8px 0 4px;
width: 180px;
}
}
>.popup-selector-content {
flex: 1 1 auto;
margin: 10px;
}
}
.wo-opened-workorder {
display: flex;
flex-direction: column;
width: 650px;
>header {
flex: 0 0 auto;
margin: 10px;
}
>.wo-grid-opened {
flex: 1 1 auto;
margin: 0 10px;
height: 400px;
}
}
lib/element/templateSelector.js
+163
View File
@@ -0,0 +1,163 @@
import { Grid, Popup, createElement, createIcon } from "../ui";
import { r as lang, nullOrEmpty } from "../utility";
let r = lang;
export default class TemplateSelector {
_var = {
option: {
/**
* @private
* @type {(search: string) => Promise<any[]>}
*/
requestTemplates: null
},
/**
* @private
* @type {HTMLElement}
*/
container: null,
/**
* @private
* @type {Popup}
*/
popup: null,
el: {
/**
* @private
* @type {HTMLInputElement}
*/
inputSearch: null,
/**
* @private
* @type {Grid}
*/
grid: null
}
};
/**
* @event
* @type {(this: TemplateSelector, template: string) => void}
*/
onSelected;
constructor(opt = {}) {
this._var.option = opt;
const getText = opt.getText;
if (typeof getText === 'function') {
r = getText;
} else if (typeof GetTextByKey === 'function') {
r = GetTextByKey;
}
}
refresh() {
const requestTemplates = this._var.option.requestTemplates;
if (typeof requestTemplates !== 'function') {
return;
}
const el = this._var.el;
this._var.popup.loading = true;
requestTemplates(el.inputSearch.value)
.then(data => el.grid.source = data)
.finally(() => this._var.popup.loading = false);
}
select(item) {
if (typeof this.onSelected !== 'function') {
return false;
}
this.onSelected(item);
}
async create() {
const option = this._var.option;
const title = r('P_MODULE_INSPECTIONTEMPLATES', 'Inspection Templates');
const tabIndex = Math.max.apply(null, [...document.querySelectorAll('[tabindex]')].map(e => e.tabIndex ?? 0)) + 3;
const inputSearch = createElement('input', input => {
input.type = 'text';
input.placeholder = r('P_SELECTASSETS_SEARCH', 'Search');
input.tabIndex = tabIndex + 1;
input.className = 'ui-input';
input.addEventListener('keypress', e => e.key === 'Enter' && this.refresh());
});
const gridContent = createElement('div', div => {
div.className = 'popup-selector-content';
div.style.height = '400px';
});
const grid = new Grid(gridContent, r);
grid.columns = [
{
key: 'IssueId',
type: Grid.ColumnTypes.Icon,
width: 30,
resizable: false,
filter: it => nullOrEmpty(it.IssueId) ? '' : 'cubes'
},
{ key: 'Name', caption: r('P_IPT_NAME', 'Name'), width: 390 },
{ key: 'Notes', caption: r('P_IPT_NOTES', 'Notes'), width: 630 }
];
grid.onRowDblClicked = index => {
const item = grid.source[index];
this.select(item);
this._var.popup.close();
};
grid.init();
grid.element.tabIndex = tabIndex + 2;
this._var.el = {
inputSearch,
grid
};
// content
const container = createElement('div', 'popup-selector',
createElement('div', 'popup-selector-header',
createElement('h3', h3 => h3.innerText = r('P_WO_PLEASESELECTATEMPLATE', 'Please select a template.'))
),
createElement('div', 'popup-selector-function',
createElement('div', 'search-box',
inputSearch,
createElement('span', span => {
span.addEventListener('click', () => this.refresh());
},
createIcon('fa-light', 'search')
)
)
),
gridContent
);
this._var.container = container;
const popup = new Popup({
title,
content: container,
persistent: true,
buttons: [
{
text: r('P_GRID_OK', 'OK'),
trigger: () => {
const item = grid.source[grid.selectedIndex];
if (item == null) {
return false;
}
this.select(item);
}
},
{ text: r('P_WO_CANCEL', 'Cancel') }
]
});
this._var.popup = popup;
popup.create();
popup.rect = { width: 1200 };
const mask = await popup.show();
this.refresh();
return mask;
}
show() {
if (this._var.popup == null) {
return this.create();
}
return this._var.popup.show();
}
}