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

117
lib/element/templateSelector.js
View File

@ -1,27 +1,18 @@
import { Grid, Popup, createElement, createIcon } from "../ui";
import { r as lang, nullOrEmpty } from "../utility";
import { Grid, OptionBase, createElement, createIcon } from "../ui";
import { nullOrEmpty } from "../utility";
let r = lang;
export default class TemplateSelector {
export default class TemplateSelector extends OptionBase {
_var = {
option: {
/**
* @private
* @type {(search: string) => Promise<any[]>}
*/
requestTemplates: null
},
/**
* @private
* @type {number}
*/
assetId: -1,
/**
* @private
* @type {HTMLElement}
*/
container: null,
/**
* @private
* @type {Popup}
*/
popup: null,
el: {
/**
* @private
@ -38,30 +29,47 @@ export default class TemplateSelector {
/**
* @event
* @type {(this: TemplateSelector, template: string) => void}
* @type {(this: TemplateSelector, template: any) => 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;
constructor(opt = {
/** @type {(flag: boolean) => void} */
loading: null,
/** @type {() => void} */
close: null,
/** @type {(assetId: number, search: string) => Promise<any[]>} */
requestTemplates: null
}) {
super(opt);
}
get assetId() { return this._var.assetId }
set assetId(id) {
this._var.assetId = id;
this.refresh();
}
get title() { return this.r('P_MODULE_INSPECTIONTEMPLATES', 'Inspection Templates') }
get currentTemplate() { return this._var.el.grid.currentItem }
loading(flag) {
if (typeof this._option.loading === 'function') {
this._option.loading(flag);
}
}
refresh() {
const requestTemplates = this._var.option.requestTemplates;
const requestTemplates = this._option.requestTemplates;
if (typeof requestTemplates !== 'function') {
return;
}
const el = this._var.el;
this._var.popup.loading = true;
requestTemplates(el.inputSearch.value)
this.loading(true);
requestTemplates(this._var.assetId, el.inputSearch.value)
.then(data => el.grid.source = data)
.finally(() => this._var.popup.loading = false);
.finally(() => this.loading(false));
}
select(item) {
@ -71,13 +79,11 @@ export default class TemplateSelector {
this.onSelected(item);
}
async create() {
const option = this._var.option;
const title = r('P_MODULE_INSPECTIONTEMPLATES', 'Inspection Templates');
create() {
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 + 1;
input.className = 'ui-input';
input.addEventListener('keypress', e => e.key === 'Enter' && this.refresh());
@ -86,22 +92,25 @@ export default class TemplateSelector {
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: 'IssueId',
type: Grid.ColumnTypes.Icon,
width: 30,
enabled: false,
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 }
{ key: 'Name', caption: this.r('P_IPT_NAME', 'Name'), width: 390 },
{ key: 'Notes', caption: this.r('P_IPT_NOTES', 'Notes'), width: 630 }
];
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 + 2;
@ -113,7 +122,7 @@ export default class TemplateSelector {
// 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('h3', h3 => h3.innerText = this.r('P_WO_PLEASESELECTATEMPLATE', 'Please select a template.'))
),
createElement('div', 'popup-selector-function',
createElement('div', 'search-box',
@ -128,36 +137,6 @@ export default class TemplateSelector {
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();
return container;
}
}