add: getText compatibility.
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:
269
lib/element/assetSelector.js
Normal file
269
lib/element/assetSelector.js
Normal 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();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user