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.

lib/element/templateSelector.js

@@ -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();
+    }
+}