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

sync

Browse Source
This commit is contained in:
Chen Lily
2024-07-10 12:19:52 +08:00
parent 5baf00de64
commit adbf4750cc
16 changed files with 1176 additions and 722 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
lib/element/assetSelector.js
View File

@ -1,43 +1,12 @@
import { Dropdown, Grid, Popup, createCheckbox, createElement, createIcon } from "../ui";
import { r as lang } from "../utility";
import { Dropdown, Grid, OptionBase, createCheckbox, createElement, createIcon } from "../ui";
let r = lang;
export default class AssetSelector {
export default class AssetSelector extends OptionBase {
_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
@ -74,24 +43,60 @@ export default class AssetSelector {
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;
constructor(opt = {
assetFullcontrol: false,
ignoreHidden: false,
/**
* @private
* @type {(flag: boolean) => void}
*/
loading: null,
/**
* @private
* @type {() => void}
*/
close: 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<{AssetGroups: any[], Codes: any[], Jobsites: any[]}>}
*/
requestAssetParams: null,
dataSource: {
AssetGroups: [],
Codes: [],
Jobsites: []
}
}) {
super(opt);
}
get title() { return this.r('P_MA_SELECTASSET', 'Select Asset') }
get currentAsset() { return this._var.el.grid.currentItem }
loading(flag) {
if (typeof this._option.loading === 'function') {
this._option.loading(flag);
}
}
refresh() {
const requestAssets = this._var.option.requestAssets;
const requestAssets = this._option.requestAssets;
if (typeof requestAssets !== 'function') {
return;
}
const el = this._var.el;
this._var.popup.loading = true;
this.loading(true);
requestAssets(
el.checkHidden.querySelector('input[type="checkbox"]')?.checked,
el.inputSearch.value,
@ -100,23 +105,28 @@ export default class AssetSelector {
el.dropJobsiteCode.selected?.value
).then(data => {
el.grid.source = data;
}).finally(() => this._var.popup.loading = false);
}).finally(() => this.loading(false));
}
select(item) {
if (typeof this.onSelected !== 'function') {
return false;
}
if (item == null) {
item = this._var.el.grid.currentItem;
}
if (item == null) {
return false;
}
this.onSelected(item);
}
async create() {
const option = this._var.option;
const title = r('P_MA_SELECTASSET', 'Select Asset');
create() {
const option = this._option;
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.placeholder = this.r('P_SELECTASSETS_SEARCH', 'Search');
input.tabIndex = tabIndex + 2;
input.className = 'ui-input';
input.addEventListener('keypress', e => {
@ -127,9 +137,12 @@ export default class AssetSelector {
});
const checkHidden = createCheckbox({
tabIndex: tabIndex + 3,
label: r('P_SELECTASSETS_SHOWHIDDEN', 'Show Hidden'),
label: this.r('P_SELECTASSETS_SHOWHIDDEN', 'Show Hidden'),
onchange: () => this.refresh()
});
if (option.ignoreHidden) {
checkHidden.style.display = 'none';
}
const dropAssetGroup = new Dropdown({
tabIndex: tabIndex + 4,
search: true,
@ -153,21 +166,23 @@ export default class AssetSelector {
div.className = 'popup-selector-content';
div.style.height = '400px';
});
const grid = new Grid(gridContent, r);
const grid = new Grid(gridContent, this.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) }
{ key: 'VIN', caption: this.r('P_SELECTASSETS_VIN', 'VIN'), width: 170 },
{ key: 'DisplayName', caption: this.r('P_SELECTASSETS_NAME', 'Name'), width: 190 },
{ key: 'MakeName', caption: this.r('P_SELECTASSETS_MAKE', 'Make'), width: 110, allowFilter: true },
{ key: 'ModelName', caption: this.r('P_SELECTASSETS_MODEL', 'Model'), width: 110, allowFilter: true },
{ key: 'TypeName', caption: this.r('P_SELECTASSETS_TYPE', 'Type'), width: 110, allowFilter: true },
{ key: 'AcquisitionType', caption: this.r('P_MA_ACQUISITIONTYPE', 'Acquisition Type'), width: 130, allowFilter: true },
{ key: 'AssetGroups', caption: this.r('P_MA_ASSETGROUP', 'Asset Group'), width: 150 },
{ key: 'Jobsites', caption: this.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();
if (typeof this._option.close === 'function') {
this._option.close();
}
};
grid.init();
grid.element.tabIndex = tabIndex + 7;
@ -183,19 +198,21 @@ export default class AssetSelector {
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),
createElement('h3', h3 => h3.innerText = this.title),
option.assetFullcontrol ? createElement('button', button => {
button.className = 'ui-popup-button';
button.tabIndex = tabIndex + 1;
button.innerText = r('P_MA_ADDASSET', 'Add Asset');
button.innerText = this.r('P_MA_ADDASSET', 'Add Asset');
button.addEventListener('click', async () => {
if (typeof option.requestAddAsset === 'function') {
this._var.popup.loading = true;
this.loading(true);
const asset = await option.requestAddAsset();
this._var.popup.loading = false;
this.loading(false);
if (asset != null) {
this.select(asset);
this._var.popup.close();
if (typeof this._option.close === 'function') {
this._option.close();
}
}
}
});
@ -211,59 +228,33 @@ export default class AssetSelector {
)
),
checkHidden,
createElement('span', span => span.innerText = r('P_WO_ASSETGROUP', 'Asset Group')),
createElement('span', span => span.innerText = this.r('P_WO_ASSETGROUP', 'Asset Group')),
dropAssetGroup.create(),
createElement('span', span => span.innerText = r('P_WO_JOBSITE', 'Jobsite')),
createElement('span', span => span.innerText = this.r('P_WO_JOBSITE', 'Jobsite')),
dropJobsite.create(),
createElement('span', span => span.innerText = r('P_SELECTASSETS_JOBSITECODE', 'Jobsite Code')),
createElement('span', span => span.innerText = this.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();
return container;
}
async init() {
const option = this._option;
if (option.dataSource == null) {
if (typeof option.requestAssetParams === 'function') {
popup.loading = true;
this.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._var.el.dropAssetGroup.source = [{ Key: '-1', Value: '' }, ...option.dataSource.AssetGroups];
this._var.el.dropJobsite.source = [{ ID: '-1', Name: '' }, ...option.dataSource.Jobsites];
this._var.el.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();
}
}