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:
Chen Lily
2024-06-21 17:28:11 +08:00
parent 1a7aa1ab66
commit 5baf00de64
34 changed files with 1772 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

712
lib/element/addworkorder.js
View File

File diff suppressed because one or more lines are too long

269
lib/element/assetSelector.js Normal file
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();
}
}

2
lib/element/schedule.js
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;
}
}

199
lib/element/style.scss
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;
}
}

163
lib/element/templateSelector.js Normal file
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();
}
}