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/app/communications/comments.js

@@ -1,4 +1,4 @@
-import { createElement, setTooltip, createIcon } from "../../ui";
+import { createElement, setTooltip, createIcon, requestAnimationFrame } from "../../ui";
 import { r as lang, nullOrEmpty, escapeHtml, escapeEmoji } from "../../utility";
 import { createBox, appendMedia, createHideMessageTitleButton, createHideMessageCommentTail } from "./lib";
 
@@ -12,6 +12,8 @@ export default class CustomerRecordComment {
         const getText = opt?.getText;
         if (typeof getText === 'function') {
             r = getText;
+        } else if (typeof GetTextByKey === 'function') {
+            r = GetTextByKey;
         }
     }
 
@@ -179,6 +181,6 @@ export default class CustomerRecordComment {
             this._var.lastTop = this._var.message.scrollTop;
         }
         this._var.message.replaceChildren(...children);
-        setTimeout(() => this._var.message.scrollTop = keep ? this._var.lastTop : this._var.message.scrollHeight, 0);
+        requestAnimationFrame(() => this._var.message.scrollTop = keep ? this._var.lastTop : this._var.message.scrollHeight);
     }
 }

lib/app/communications/contact.js

@@ -1,4 +1,4 @@
-import { Grid, Dropdown, createElement, createCheckbox, Popup, showAlert } from "../../ui";
+import { Grid, Dropdown, createElement, createCheckbox, Popup, showAlert, requestAnimationFrame } from "../../ui";
 import { isEmail, nullOrEmpty, r as lang } from "../../utility";
 
 let r = lang;
@@ -11,6 +11,8 @@ export class Contact {
         const getText = option?.getText;
         if (typeof getText === 'function') {
             r = getText;
+        } else if (typeof GetTextByKey === 'function') {
+            r = GetTextByKey;
         }
     }
 
@@ -143,7 +145,7 @@ export class Contact {
             contactNotes
         };
         const result = await popup.show(parent);
-        setTimeout(() => contactName.focus());
+        requestAnimationFrame(() => contactName.focus());
         return result;
     }
 
@@ -204,6 +206,8 @@ export class CustomerRecordContact {
         const getText = option?.getText;
         if (typeof getText === 'function') {
             r = getText;
+        } else if (typeof GetTextByKey === 'function') {
+            r = GetTextByKey;
         }
     }
 

lib/app/communications/customer.js

@@ -1,4 +1,4 @@
-import { Grid, GridColumn, createElement, setTooltip, createIcon, createCheckbox, createRadiobox, showAlert, showConfirm, Popup } from "../../ui";
+import { Grid, GridColumn, createElement, setTooltip, createIcon, createCheckbox, createRadiobox, showAlert, showConfirm, Popup, requestAnimationFrame } from "../../ui";
 import { r as lang, nullOrEmpty, formatUrl, escapeEmoji, isEmail, isPhone } from "../../utility";
 import { createBox, appendMedia, fileSupported, insertFile, getMessageSendTo, getMessageStatus, updateCustomerName, createHideMessageTitleButton, createHideMessageCommentTail } from "./lib";
 import { Contact, CustomerRecordContact } from "./contact";
@@ -41,6 +41,8 @@ export default class CustomerCommunication {
         const getText = opt?.getText;
         if (typeof getText === 'function') {
             r = getText;
+        } else if (typeof GetTextByKey === 'function') {
+            r = GetTextByKey;
         }
     }
 
@@ -1015,11 +1017,11 @@ export default class CustomerCommunication {
                                                             { key: 'ok', text: r('P_WO_OK', 'OK') },
                                                             { key: 'cancel', text: r('P_WO_CANCEL', 'Cancel') }
                                                         ]
-                                                    ).then(result => {
-                                                        if (result?.key === 'ok') {
-                                                            const isRecord = result.popup.container.querySelector('.radio-customer-record>input').checked;
+                                                    ).then(r => {
+                                                        if (r.result === 'ok') {
+                                                            const isRecord = r.popup.container.querySelector('.radio-customer-record>input').checked;
                                                             if (typeof option.onDelete === 'function') {
-                                                                option.onDelete(result.key, this, isRecord);
+                                                                option.onDelete(r.result, this, isRecord);
                                                             }
                                                             const index = grid.source.indexOf(this);
                                                             if (index >= 0) {
@@ -1075,10 +1077,10 @@ export default class CustomerCommunication {
                                                     showConfirm(r('P_CU_REMOVECONTACT', 'Remove Contact'), r('P_CU_REMOVEFROMWORKORDER', 'You are removing {name} from work order.\n\nDo you want to Continue?').replace('{name}', this.Name), [
                                                         { key: 'continue', text: r('P_JS_CONTINUE', 'Continue') },
                                                         { key: 'cancel', text: r('P_WO_CANCEL', 'Cancel') }
-                                                    ]).then(result => {
-                                                        if (result?.key === 'continue') {
+                                                    ]).then(r => {
+                                                        if (r.result === 'continue') {
                                                             if (typeof option.onDelete === 'function') {
-                                                                option.onDelete(result.key, this);
+                                                                option.onDelete(r.result, this);
                                                             }
                                                             const index = gridWo.source.indexOf(this);
                                                             if (index >= 0) {
@@ -1122,14 +1124,11 @@ export default class CustomerCommunication {
                                         { key: 'skip', text: r('P_CUSTOMER_SKIPTHISSTEP', 'Skip This Step') }
                                     ]
                                 ).then(r => {
-                                    if (r == null) {
-                                        return;
-                                    }
-                                    if (r.key === 'add') {
+                                    if (r.result === 'add') {
                                         if (typeof option.onAddCompany === 'function') {
                                             option.onAddCompany.call(this);
                                         }
-                                    } else {
+                                    } else if (r.key === 'skip') {
                                         editContacts();
                                     }
                                 });
@@ -1328,6 +1327,6 @@ export default class CustomerCommunication {
             this._var.lastTop = this._var.message.scrollTop;
         }
         this._var.message.replaceChildren(...children);
-        setTimeout(() => this._var.message.scrollTop = keep ? this._var.lastTop : this._var.message.scrollHeight, 0);
+        requestAnimationFrame(() => this._var.message.scrollTop = keep ? this._var.lastTop : this._var.message.scrollHeight);
     }
 }

lib/app/communications/follower.js

@@ -11,6 +11,8 @@ export default class Follower {
         const getText = option?.getText;
         if (typeof getText === 'function') {
             r = getText;
+        } else if (typeof GetTextByKey === 'function') {
+            r = GetTextByKey;
         }
     }
 

lib/app/communications/internal.js

@@ -1,4 +1,4 @@
-import { createElement, setTooltip, createIcon } from "../../ui";
+import { createElement, setTooltip, createIcon, requestAnimationFrame } from "../../ui";
 import { r as lang, nullOrEmpty, escapeHtml, escapeEmoji } from "../../utility";
 import { createBox, appendMedia } from "./lib";
 import { fileSupported, insertFile, getMessageSendTo, getMessageStatus, updateCustomerName, createHideMessageTitleButton, createHideMessageCommentTail } from "./lib";
@@ -19,6 +19,8 @@ export default class InternalComment {
         const getText = opt?.getText;
         if (typeof getText === 'function') {
             r = getText;
+        } else if (typeof GetTextByKey === 'function') {
+            r = GetTextByKey;
         }
     }
 
@@ -336,6 +338,6 @@ export default class InternalComment {
             this._var.lastTop = this._var.message.scrollTop;
         }
         this._var.message.replaceChildren(...children);
-        setTimeout(() => this._var.message.scrollTop = keep ? this._var.lastTop : this._var.message.scrollHeight, 0);
+        requestAnimationFrame(() => this._var.message.scrollTop = keep ? this._var.lastTop : this._var.message.scrollHeight);
     }
 }

lib/app/communications/style.scss

@@ -122,7 +122,7 @@
         >.title-functions {
             flex: 0 0 auto;
             display: flex;
-            padding: 4px;
+            padding: 0 4px;
 
             >label {
                 margin: 0 4px;

lib/element.js

@@ -1,8 +1,12 @@
 import "./element/style.scss";
 import ScheduleItem from "./element/schedule";
-import AddWorkOrder from "./element/addworkorder";
+import AddWorkOrder from "./element/addWorkorder";
+import AssetSelector from "./element/assetSelector";
+import TemplateSelector from "./element/templateSelector";
 
 export {
     ScheduleItem,
-    AddWorkOrder
+    AddWorkOrder,
+    AssetSelector,
+    TemplateSelector
 }

lib/element/addworkorder.js

@@ -1,124 +1,582 @@
-import { createElement, Dropdown, Popup, validation, toDateValue, showAlert } from "../ui";
+import { createElement, Dropdown, Popup, showAlert, createIcon, DateSelector, showConfirm, Grid } from "../ui";
 import { r as lang, nullOrEmpty } from "../utility";
+import AssetSelector from "./assetSelector";
 
 let r = lang;
 
 const iconWorkOrder = 'data:image/png;base64,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
Line truncated
 
+/**
+ * @private
+ * @param {HTMLElement} element 
+ * @param {boolean?} display 
+ * @returns {HTMLElement}
+ */
+function displayElement(element, display) {
+    element.style.display = display === false ? 'none' : '';
+    return element;
+}
+
+/**
+ * @private
+ * @param {HTMLInputElement} element 
+ * @param {string} pattern
+ * @returns {HTMLInputElement}
+ */
+function patternValidation(element, pattern) {
+    element.pattern = pattern;
+    return element;
+}
+
+/**
+ * @private
+ * @param {"mile" | "mi" | "m" | "kilometre" | "km" | "kilometres"} uom 
+ * @returns {"Mile" | "Kilometre"}
+ */
+function getOdometerUnit(uom) {
+    if (nullOrEmpty(uom)) {
+        return 'Mile';
+    }
+    switch (uom.toLowerCase()) {
+        case 'mile':
+        case 'mi':
+        case 'm':
+            return 'Mile';
+        case 'kilometre':
+        case 'km':
+        case 'kilometres':
+            return 'Kilometre';
+        default:
+            return 'Mile';
+    }
+}
+
 export default class AddWorkOrder {
     _var = {
         option: {
-            isCustomerRecord: true
+            allowCustomer: false,
+            assetFullcontrol: false,
+            /**
+             * @private
+             * @type {(assetId: number) => Promise<{Id: number, VIN: string, DisplayName: string, OnRoad: boolean, Hide: boolean, EngineHours?: number, Odometer?: number, OdometerUOM?: string}>}
+             */
+            requestAssetInfo: null,
+            /**
+             * @private
+             * @type {() => Promise<{Statuses: any[], Jobsites: any[], Codes: any[], Advisors: any[], Locations: any[], Departments: any[], OrderTypes: any[], AssetId: null}>}
+             */
+            requestWorkOrderParams: 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<{Customer: any, Contacts: any[], Followers: any[]}>}
+             */
+            requestCustomers: null,
+            /**
+             * @private
+             * @type {(assetId: number, locationId: number, departmentId: number) => Promise<any[]>}
+             */
+            requestAssignedTo: null,
+            /**
+             * @private
+             * @type {(assetId: number) => Promise}
+             */
+            requestHideAsset: null,
+            /**
+             * @private
+             * @type {(assetId: number) => Promise<any[]>}
+             */
+            requestOpenedWorkorder: null,
+            zIndex: 999
         },
         /**
          * @private
          * @type {HTMLElement}
          */
-        container: null
+        container: null,
+        /**
+         * @private
+         * @property {number} Id 
+         * @property {string} VIN 
+         * @property {string} DisplayName 
+         * @property {boolean} OnRoad 
+         * @property {boolean} Hide 
+         * @property {number} [EngineHours] 
+         * @property {number} [Odometer] 
+         * @property {string} [OdometerUOM] 
+         */
+        asset: null,
+        /**
+         * @private
+         * @property {string} Id 
+         * @property {string} Name 
+         * @property {string} Code 
+         */
+        customer: null,
+        contacts: [],
+        followers: [],
+        params: {
+            Locations: [],
+            Departments: [],
+            Advisors: [],
+            OrderTypes: [],
+            Statuses: [],
+            Jobsites: [],
+            Codes: []
+        },
+        el: {
+            /**
+             * @private
+             * @type {HTMLTextAreaElement}
+             */
+            textComplaint: null,
+            /**
+             * @private
+             * @type {Dropdown}
+             */
+            dropWorkOrderType: null,
+            /**
+             * @private
+             * @type {Dropdown}
+             */
+            dropStatus: null,
+            /**
+             * @private
+             * @type {DateSelector}
+             */
+            dateCompleted: null,
+            /**
+             * @private
+             * @type {HTMLInputElement}
+             */
+            inputHours: null,
+            /**
+             * @private
+             * @type {HTMLInputElement}
+             */
+            inputOdometer: null,
+            /**
+             * @private
+             * @type {Dropdown}
+             */
+            dropOdometerUnit: null,
+            /**
+             * @private
+             * @type {Dropdown}
+             */
+            dropAssignedTo: null,
+            /**
+             * @private
+             * @type {Dropdown}
+             */
+            dropAdvisor: null,
+            /**
+             * @private
+             * @type {Dropdown}
+             */
+            dropLocation: null,
+            /**
+             * @private
+             * @type {Dropdown}
+             */
+            dropDepartment: null
+        }
     };
 
+    onAssetAdded;
+    onAssetSelected;
+    onSave;
+
     constructor(opt) {
         opt ??= {};
         this._var.option = opt;
         const getText = opt.getText;
         if (typeof getText === 'function') {
             r = getText;
+        } else if (typeof GetTextByKey === 'function') {
+            r = GetTextByKey;
         }
     }
 
-    get complaint() {
-        return this._var.container.querySelector('.wo-complaint')?.value;
+    async getItem() {
+        const title = r('P_WO_OPENWORKORDER', 'Open Work Order');
+        const el = this._var.el;
+        let status = el.dropStatus.selected;
+        if (status != null) {
+            status = {
+                Status: status.Id,
+                StatusType: status.StatusType,
+                StatusName: status.Name,
+                StatusAutoText: status.AutoText,
+                StatusMessage: status.Message
+            };
+        } else {
+            status = {
+                Status: -1
+            };
+        }
+        let machine = this._var.asset;
+        if (machine == null) {
+            showAlert(title, r('P_WO_ASSETNOTEMPTY', 'Asset cannot be empty.')).then(() => this._var.container.querySelector('.wo-asset>svg')?.focus());
+            return null;
+        }
+        const item = {
+            Id: -1,
+            Description: el.textComplaint.value,
+            WorkOrderType: el.dropWorkOrderType.selected?.Key ?? '',
+            CompleteDate: el.dateCompleted.element.value,
+            // MeterType: 
+            HourMeter: el.inputHours.value || -1,
+            Odometer: el.inputOdometer.value || -1,
+            OdometerUnits: el.dropOdometerUnit.selected?.value ?? 'Mile',
+            AssignedTo: el.dropAssignedTo.selected?.IID ?? '',
+            AdvisorId: el.dropAdvisor.selected?.Key ?? '',
+            LocationId: el.dropLocation.selected?.ID || -1,
+            DepartmentId: el.dropDepartment.selected?.Id || -1,
+            AssetID: machine.Id,
+            VIN: machine.VIN,
+            AssetName: machine.DisplayName,
+            WorkOrderTotalCost: -1,
+            HoursToComplete: -1,
+            OtherCost: -1,
+            PartsCost: -1,
+            TravelTimeCost: -1,
+            LaborCost: -1,
+            HourlyRate: -1,
+            InspectionTemplateId: -1,
+            ...status
+        };
+        item.CustomerId = this._var.customer?.Id ?? -1;
+        item.Contacts = this._var.contacts ?? [];
+        item.Followers = this._var.followers ?? [];
+        if (nullOrEmpty(el.textComplaint?.value)) {
+            showAlert(title, r('P_WO_COMPLAINTREQUIRED', 'Complaint is required.')).then(() => el.textComplaint.focus());
+            return null;
+        }
+        if (el.dropStatus.selected?.Completed) {
+            if (!el.dateCompleted.element.validity.valid) {
+                showAlert(title, r('P_WO_COMPLETEDDATECANNOTBEEMPTY', 'Completed Date cannot be empty.')).then(() => el.dateCompleted.element.focus());
+                return null;
+            }
+            if (machine.OnRoad) {
+                item.MeterType = 'Odometer';
+                if (nullOrEmpty(item.Odometer) || isNaN(item.Odometer) || item.Odometer < 0) {
+                    showAlert(title, r('P_WO_ODOMETERFORMATERROR', 'Odometer format error.')).then(() => el.inputOdometer.focus());
+                    return null;
+                }
+            } else {
+                item.MeterType = 'HourMeter';
+                if (nullOrEmpty(item.HourMeter) || isNaN(item.HourMeter) || item.HourMeter < 0) {
+                    showAlert(title, r('P_WO_HOURMETERFORMATERROR', 'Hour Meter format error.')).then(() => el.inputHours.focus());
+                    return null;
+                }
+            }
+        }
+        return item;
     }
 
-    show() {
+    async show() {
         const option = this._var.option;
-        var title = r('P_WO_OPENWORKORDER', 'Open Work Order');
+        const allowCustomer = option.allowCustomer === true;
+        const title = r('P_WO_OPENWORKORDER', 'Open Work Order');
+        const tabIndex = Math.max.apply(null, [...document.querySelectorAll('[tabindex]')].map(e => e.tabIndex ?? 0)) + 3;
+        const textComplaint = createElement('textarea', textarea => {
+            textarea.tabIndex = tabIndex + 2;
+            textarea.className = 'ui-text wo-complaint';
+            textarea.placeholder = r('P_WO_ENTERCOMPLAINT', 'Enter Complaint');
+        });
+        const baseOption = {
+            search: true,
+            textKey: 'Value',
+            valueKey: 'Key'
+        };
+        const dropWorkOrderType = new Dropdown({
+            tabIndex: tabIndex + 3,
+            input: true,
+            ...baseOption
+        });
+        const dropStatus = new Dropdown({
+            tabIndex: tabIndex + 5,
+            htmlTemplate: it => createElement('span', 'wo-color-line',
+                createElement('em', em => em.style.backgroundColor = it.Color),
+                createElement('label', label => label.innerText = it.Name)
+            ),
+            search: true,
+            textKey: 'Name',
+            valueKey: 'Id'
+        });
+        const dateCompleted = new DateSelector({
+            tabIndex: tabIndex + 6,
+            className: 'wo-status-closed'
+        });
+        const inputHours = createElement('input', input => {
+            input.type = 'text';
+            input.tabIndex = tabIndex + 7;
+            input.className = 'ui-input wo-hours input-hours';
+        });
+        const inputOdometer = createElement('input', input => {
+            input.type = 'text';
+            input.tabIndex = tabIndex + 8;
+            input.className = 'ui-input wo-odometer input-odometer';
+        });
+        const dropOdometerUnit = new Dropdown({
+            tabIndex: tabIndex + 9,
+            selected: 'Mile'
+        });
+        dropOdometerUnit.source = [
+            { value: 'Mile', text: GetTextByKey('P_WO_MILE', 'Mile') },
+            { value: 'Kilometre', text: GetTextByKey('P_WO_KILOMETER', 'Kilometer') }
+        ]
+        const dropAssignedTo = new Dropdown({
+            tabIndex: tabIndex + 10,
+            selected: '',
+            search: true,
+            valueKey: 'IID',
+            textKey: 'DisplayName'
+        });
+        dropAssignedTo.source = [{ IID: '', DisplayName: '' }];
+        const dropAdvisor = new Dropdown({
+            tabIndex: tabIndex + 11,
+            selected: '',
+            ...baseOption
+        });
+        const dropLocation = new Dropdown({
+            tabIndex: tabIndex + 12,
+            selected: -1,
+            search: true,
+            valueKey: 'ID',
+            textKey: 'Name'
+        });
+        const dropDepartment = new Dropdown({
+            tabIndex: tabIndex + 13,
+            selected: -1,
+            search: true,
+            valueKey: 'Id',
+            textKey: 'Name'
+        });
+
+        // save variables
+        this._var.el = {
+            textComplaint,
+            dropWorkOrderType,
+            dropStatus,
+            dateCompleted,
+            inputHours,
+            inputOdometer,
+            dropOdometerUnit,
+            dropAssignedTo,
+            dropAdvisor,
+            dropLocation,
+            dropDepartment
+        }
+
         const container = createElement('div', 'open-wo-container',
             createElement('div', 'open-wo-header',
                 createElement('img', img => img.src = iconWorkOrder),
                 createElement('h3', h3 => h3.innerText = title)
             ),
             createElement('div', 'open-wo-content',
-                createElement('div', 'wo-line',
+                createElement('div', 'wo-combined wo-asset',
                     createElement('span', span => {
                         span.className = 'wo-title wo-title-required';
                         span.innerText = r('P_WO_ASSET_COLON', 'Asset:');
+                    }),
+                    createIcon('fa-light', 'search', svg => {
+                        svg.tabIndex = tabIndex + 1;
+                        svg.addEventListener('click', () => {
+                            const selector = new AssetSelector({
+                                assetFullcontrol: option.assetFullcontrol,
+                                requestAssets: option.requestAssets,
+                                requestAddAsset: option.requestAddAsset,
+                                dataSource: this._var.params
+                            });
+                            selector.onSelected = async it => {
+                                const el = this._var.el;
+                                if (typeof option.requestAssetInfo === 'function') {
+                                    const a = await option.requestAssetInfo(it.Id);
+                                    if (a != null) {
+                                        it = a;
+                                        if (it.OnRoad) {
+                                            el.inputHours.value = '';
+                                            el.inputOdometer.value = it.Odometer;
+                                            el.dropOdometerUnit.select(getOdometerUnit(it.OdometerUOM));
+                                        } else {
+                                            el.inputHours.value = it.EngineHours;
+                                            el.inputOdometer.value = '';
+                                            el.dropOdometerUnit.select('Mile');
+                                        }
+                                    }
+                                }
+                                this._var.asset = it;
+                                if (typeof this.onAssetSelected === 'function') {
+                                    this.onAssetSelected(it);
+                                }
+                                this._var.container.querySelector('.wo-asset-name').innerText = it.DisplayName;
+                                // get assigned to
+                                if (typeof option.requestAssignedTo === 'function') {
+                                    const data = await option.requestAssignedTo(it.Id, el.dropLocation.selected?.ID ?? -1, el.dropDepartment.selected?.Id ?? -1)
+                                    el.dropAssignedTo.source = [{ IID: '', DisplayName: '' }, ...data];
+                                    el.dropStatus.onSelected(el.dropStatus.selected);
+                                }
+                            };
+                            selector.show().then(mask => mask.style.zIndex = option.zIndex ?? 999);
+                        });
                     })
                 ),
-                createElement('div', 'wo-line',
+                createElement('span', 'wo-asset-name'),
+                createElement('div', 'wo-line wo-combined',
                     createElement('span', span => {
                         span.className = 'wo-title wo-title-required';
                         span.innerText = r('P_WO_COMPLAINTCOLON', 'Complaint:');
                     })
                 ),
-                createElement('div', 'wo-line wo-sub-line',
-                    createElement('textarea', textarea => {
-                        textarea.className = 'ui-text wo-complaint';
-                        textarea.placeholder = r('P_WO_ENTERCOMPLAINT', 'Enter Complaint');
-                    })
+                createElement('div', div => {
+                    div.className = 'wo-line wo-combined wo-sub-line';
+                    div.style.marginBottom = '2px';
+                    div.style.width = 'calc(100% - 10px)';
+                },
+                    textComplaint
                 ),
-                createElement('div', 'wo-line',
-                    createElement('span', span => {
-                        span.className = 'wo-title';
-                        span.innerText = r('P_WO_WORKORDERTYPE_COLON', 'Work Order Type:');
-                    })
-                ),
-                createElement('div', 'wo-line wo-customer-record',
+                createElement('span', span => {
+                    span.className = 'wo-title';
+                    span.innerText = r('P_WO_WORKORDERTYPE_COLON', 'Work Order Type:');
+                }),
+                dropWorkOrderType.create(),
+                createElement('div', div => {
+                    div.className = 'wo-combined wo-customer-record';
+                    if (!allowCustomer) {
+                        displayElement(div, false);
+                    }
+                },
                     createElement('span', span => {
                         span.className = 'wo-title';
                         span.innerText = r('P_WO_COMPANYNAME_COLON', 'Company Name:');
+                    }),
+                    createIcon('fa-light', 'search', svg => {
+                        svg.tabIndex = tabIndex + 4;
+                        svg.addEventListener('click', async () => {
+                            if (typeof option.requestCustomers === 'function') {
+                                popup.loading = true;
+                                const data = await option.requestCustomers();
+                                popup.loading = false;
+                                if (data != null) {
+                                    this._var.customer = data.Customer;
+                                    this._var.contacts = data.Contacts;
+                                    this._var.followers = data.Followers;
+                                    let name = data.Customer.Name;
+                                    if (!nullOrEmpty(data.Customer.Code)) {
+                                        name += ' / ' + data.Customer.Code;
+                                    }
+                                    this._var.container.querySelector('.wo-company-name').innerText = name;
+                                }
+                            }
+                        });
                     })
                 ),
-                createElement('div', 'wo-line',
-                    createElement('span', span => {
-                        span.className = 'wo-title';
-                        span.innerText = r('P_WO_STATUS_COLON', 'Status:');
-                    })
+                displayElement(createElement('span', 'wo-company-name'), allowCustomer),
+                createElement('span', span => {
+                    span.className = 'wo-title';
+                    span.innerText = r('P_WO_STATUS_COLON', 'Status:');
+                }),
+                dropStatus.create(),
+                createElement('span', span => {
+                    span.className = 'wo-title wo-title-required wo-sub-line wo-status-closed';
+                    span.innerText = r('P_WO_COMPLETEDDATE_COLON', 'Completed Date:');
+                    displayElement(span, false);
+                }),
+                displayElement(dateCompleted.create(), false),
+                createElement('span', span => {
+                    span.className = 'wo-title wo-title-required wo-sub-line wo-hours';
+                    span.innerText = r('P_WO_HOURS_COLON', 'Hours:');
+                    displayElement(span, false);
+                }),
+                displayElement(
+                    patternValidation(inputHours, '\\d+\\.?\\d*'),
+                    false
                 ),
-                createElement('div', 'wo-line wo-sub-line wo-status-closed',
-                    createElement('span', span => {
-                        span.className = 'wo-title';
-                        span.innerText = r('P_WO_COMPLETEDDATE_COLON', 'Completed Date:');
-                    })
+                createElement('span', span => {
+                    span.className = 'wo-title wo-title-required wo-sub-line wo-odometer';
+                    span.innerText = r('P_WO_ODOMETER_COLON', 'Odometer:');
+                    displayElement(span, false);
+                }),
+                createElement('div', div => {
+                    div.className = 'wo-combined wo-odometer';
+                    displayElement(div, false);
+                },
+                    patternValidation(inputOdometer, '\\d+\\.?\\d*'),
+                    dropOdometerUnit.create()
                 ),
-                createElement('div', 'wo-line wo-sub-line wo-status-closed',
-                    createElement('span', span => {
-                        span.className = 'wo-title';
-                        span.innerText = r('P_WO_HOURS_COLON', 'Hours:');
-                    })
-                ),
-                createElement('div', 'wo-line wo-sub-line wo-status-closed',
-                    createElement('span', span => {
-                        span.className = 'wo-title';
-                        span.innerText = r('P_WO_ODOMETER_COLON', 'Odometer:');
-                    })
-                ),
-                createElement('div', 'wo-line',
-                    createElement('span', span => {
-                        span.className = 'wo-title';
-                        span.innerText = r('P_WO_ASSIGNEDTO_COLON', 'Assigned To:');
-                    })
-                ),
-                createElement('div', 'wo-line wo-customer-record',
-                    createElement('span', span => {
-                        span.className = 'wo-title';
-                        span.innerText = r('P_WO_ADVISOR_COLON', 'Advisor:');
-                    })
-                ),
-                createElement('div', 'wo-line wo-customer-record',
-                    createElement('span', span => {
-                        span.className = 'wo-title';
-                        span.innerText = r('P_WO_LOCATION_COLON', 'Location:');
-                    })
-                ),
-                createElement('div', 'wo-line wo-customer-record',
-                    createElement('span', span => {
-                        span.className = 'wo-title';
-                        span.innerText = r('P_WO_DEPARTMENT_COLON', 'Department:');
-                    })
-                )
+                createElement('span', span => {
+                    span.className = 'wo-title';
+                    span.innerText = r('P_WO_ASSIGNEDTO_COLON', 'Assigned Tech:');
+                }),
+                dropAssignedTo.create(),
+                createElement('span', span => {
+                    span.className = 'wo-title wo-customer-record';
+                    span.innerText = r('P_WO_ADVISOR_COLON', 'Advisor:');
+                    if (!allowCustomer) {
+                        displayElement(span, false);
+                    }
+                }),
+                displayElement(dropAdvisor.create(), allowCustomer),
+                createElement('span', span => {
+                    span.className = 'wo-title wo-customer-record';
+                    span.innerText = r('P_WO_LOCATION_COLON', 'Location:');
+                    if (!allowCustomer) {
+                        displayElement(span, false);
+                    }
+                }),
+                displayElement(dropLocation.create(), allowCustomer),
+                createElement('span', span => {
+                    span.className = 'wo-title wo-customer-record';
+                    span.innerText = r('P_WO_DEPARTMENT_COLON', 'Department:');
+                    if (!allowCustomer) {
+                        displayElement(span, false);
+                    }
+                }),
+                displayElement(dropDepartment.create(), allowCustomer)
             )
         );
+        dropStatus.onSelected = item => {
+            if (item == null) {
+                return;
+            }
+            container.querySelectorAll('.wo-status-closed').forEach(it => it.style.display = item.Completed ? '' : 'none');
+            if (item.Completed) {
+                const onRoad = this._var.asset?.OnRoad;
+                container.querySelectorAll('.wo-hours').forEach(it => it.style.display = onRoad ? 'none' : '');
+                container.querySelectorAll('.wo-odometer').forEach(it => it.style.display = onRoad ? '' : 'none');
+            } else {
+                container.querySelectorAll('.wo-hours').forEach(it => it.style.display = 'none');
+                container.querySelectorAll('.wo-odometer').forEach(it => it.style.display = 'none');
+            }
+        };
+        dropLocation.onSelected = async loc => {
+            // get assigned to
+            const asset = this._var.asset;
+            if (asset != null && typeof option.requestAssignedTo === 'function') {
+                const data = await option.requestAssignedTo(asset.Id, loc?.ID ?? -1, this._var.el.dropDepartment.selected?.Id ?? -1)
+                this._var.el.dropAssignedTo.source = [{ IID: '', DisplayName: '' }, ...data];
+            }
+        };
+        dropDepartment.onSelected = async dep => {
+            // get assigned to
+            const asset = this._var.asset;
+            if (asset != null && typeof option.requestAssignedTo === 'function') {
+                const data = await option.requestAssignedTo(asset.Id, this._var.el.dropLocation.selected?.ID ?? -1, dep?.Id ?? -1)
+                this._var.el.dropAssignedTo.source = [{ IID: '', DisplayName: '' }, ...data];
+            }
+        }
+        dateCompleted.value = new Date();
         this._var.container = container;
         const popup = new Popup({
             title,
@@ -127,10 +585,78 @@ export default class AddWorkOrder {
                 {
                     key: 'open',
                     text: title,
-                    trigger: () => {
-                        if (nullOrEmpty(this.complaint)) {
-                            showAlert(title, r('P_WO_COMPLAINTREQUIRED', 'Complaint is required.')).then(() => container.querySelector('.wo-complaint')?.focus());
-                            return false;
+                    trigger: async () => {
+                        popup.loading = true;
+                        try {
+                            const item = await this.getItem();
+                            if (item == null) {
+                                return false;
+                            }
+                            if (this._var.asset.Hide) {
+                                if (!option.assetFullcontrol) {
+                                    await showAlert(title, r('P_WO_HIDDENCANNOTCREATE', 'The selected asset is hidden and a work order cannot be created.') + '\n\n' + r('P_WO_CONTACTTOUNHIDE', 'Please contact your Fleet Manager to Unhide the asset if you require a work order.'));
+                                    return false;
+                                }
+                                const next = await showConfirm(title, r('P_WO_HIDDENCANNOTCREATE', 'The selected asset is hidden and a work order cannot be created.') + '\n\n' + r('P_WO_PROMPTUNHIDE', 'Do you wish to "Un-Hide" the asset?'), [
+                                    { key: 'unhide', text: r('P_WO_UNHIDE', 'Unhide') },
+                                    { key: 'cancel', text: r('P_WO_CANCELWO', 'Cancel Work Order') }
+                                ]);
+                                if (next.result !== 'unhide') {
+                                    return false;
+                                }
+                                // hide
+                                if (typeof option.requestHideAsset === 'function') {
+                                    await option.requestHideAsset(this._var.asset.Id);
+                                    this._var.asset.Hide = false;
+                                }
+                            }
+                            if (typeof option.requestOpenedWorkorder === 'function') {
+                                const wos = await option.requestOpenedWorkorder(this._var.asset.Id);
+                                if (wos == null) {
+                                    return false;
+                                }
+                                if (wos.length > 0) {
+                                    const next = await new Promise(resolve => {
+                                        const popWorkorders = new Popup({
+                                            title,
+                                            content: createElement('div', 'wo-opened-workorder',
+                                                createElement('header', header => header.innerText = r('P_WO_ASSETOPENEDWORKORDER', 'The selected asset has the following open work orders:')),
+                                                createElement('div', 'wo-grid-opened')
+                                            ),
+                                            resolve,
+                                            buttons: [
+                                                { key: 'create', text: r('P_WO_CREATEWO', 'Create Work Order'), trigger: () => resolve('create') },
+                                                { key: 'cancel', text: r('P_WO_CANCELWO', 'Cancel Work Order'), trigger: () => resolve('cancel') }
+                                            ]
+                                        });
+                                        popWorkorders.show().then(mask => {
+                                            const grid = new Grid(mask.querySelector('.wo-grid-opened'), r);
+                                            grid.columns = [
+                                                { key: 'WorkOrderNumber', caption: 'WO #', width: 100 },
+                                                { key: 'CreateDateStr', caption: r('P_WO_CREATEDDATE', 'Created Date'), width: 120 },
+                                                { key: 'Description', caption: r('P_WO_COMPLAINT', 'Complaint'), width: 360 }
+                                            ];
+                                            grid.init();
+                                            grid.source = wos.map(w => ({
+                                                WorkOrderNumber: w.WorkOrderNumber,
+                                                CreateDateStr: { DisplayValue: w.CreateDateStr, Value: w.CreateDate },
+                                                Description: w.Description
+                                            }));
+                                            // default focus
+                                            const button = mask.querySelector('.ui-popup-container .ui-popup-footer .ui-popup-button:last-child');
+                                            button?.focus();
+                                        });
+                                    });
+                                    if (next !== 'create') {
+                                        return false;
+                                    }
+                                }
+                            }
+                            if (typeof this.onSave === 'function') {
+                                this.onSave(item, this._var.el.dropStatus.selected);
+                            }
+                        } finally {
+                            popup.loading = false;
                         }
                     }
                 },
@@ -139,6 +665,48 @@ export default class AddWorkOrder {
         });
         popup.create();
         popup.rect = { width: 600 };
-        return popup.show();
+        const mask = await popup.show();
+        mask.style.zIndex = option.zIndex ?? 999;
+        if (typeof option.requestWorkOrderParams === 'function') {
+            popup.loading = true;
+            const data = await option.requestWorkOrderParams()
+            if (!isNaN(data.AssetId) && data.AssetId > 0 && typeof option.requestAssetInfo === 'function') {
+                const it = await option.requestAssetInfo(data.AssetId);
+                if (it != null) {
+                    if (it.OnRoad) {
+                        inputOdometer.value = it.Odometer;
+                        dropOdometerUnit.select(getOdometerUnit(it.OdometerUOM));
+                    } else {
+                        inputHours.value = it.EngineHours;
+                    }
+                    this._var.asset = it;
+                    // if (typeof this.onAssetSelected === 'function') {
+                    //     this.onAssetSelected(it);
+                    // }
+                    this._var.container.querySelector('.wo-asset-name').innerText = it.DisplayName;
+                    // get assigned to
+                    if (typeof option.requestAssignedTo === 'function') {
+                        const data = await option.requestAssignedTo(it.Id, dropLocation.selected?.ID ?? -1, dropDepartment.selected?.Id ?? -1)
+                        dropAssignedTo.source = [{ IID: '', DisplayName: '' }, ...data];
+                        // dropStatus.onSelected(dropStatus.selected);
+                    }
+                }
+            }
+            popup.loading = false;
+
+            dropWorkOrderType.source = data.OrderTypes;
+            dropAdvisor.source = [{ Key: '', Value: '' }, ...data.Advisors];
+            dropLocation.source = [{ ID: -1, Name: '' }, ...data.Locations];
+            dropDepartment.source = [{ Id: -1, Name: '' }, ...data.Departments];
+
+            this._var.params = data;
+            dropStatus.source = data.Statuses;
+            const defaultStatus = data.Statuses.find(s => s.DefaultOnOpen);
+            if (defaultStatus != null) {
+                dropStatus.select(defaultStatus.Id);
+            }
+        }
+        textComplaint.focus();
+        return mask;
     }
 }

lib/element/assetSelector.js

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

lib/element/schedule.js

@@ -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;
         }
     }
 

lib/element/style.scss

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

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

lib/ui.js

@@ -8,7 +8,7 @@ import { createTab } from "./ui/tab";
 import { Dropdown } from "./ui/dropdown";
 import { Grid } from "./ui/grid/grid";
 import { GridColumn, GridInputColumn, GridDropdownColumn, GridCheckboxColumn, GridIconColumn, GridTextColumn, GridDateColumn } from './ui/grid/column';
-import { Popup, createPopup, showAlert, showConfirm } from "./ui/popup";
+import { Popup, createPopup, resolvePopup, showAlert, showConfirm } from "./ui/popup";
 import { createPicture, createAudio, createVideo, createFile, createVideoList } from './ui/media';
 import { validation, convertCssStyle } from './ui/extension';
 import { createDateInput, toDateValue, getFormatter, formatDate, setDateValue, getDateValue, DateSelector } from './ui/date';
@@ -75,6 +75,7 @@ export {
   // popup
   Popup,
   createPopup,
+  resolvePopup,
   showAlert,
   showConfirm,
   // dateSelector

lib/ui/checkbox.d.ts

@@ -10,6 +10,8 @@ interface CheckboxOptions {
     name?: string;
     /** 焦点索引 */
     tabIndex?: Number;
+    /** 是否为 switch 样式 */
+    switch?: boolean;
     /** 样式分类，可以是 ['`fa-light`', '`fa-regular`', '`fa-solid`'] 其中之一 */
     type?: string;
     /** 标签 */

lib/ui/checkbox.js

@@ -62,7 +62,7 @@ export function createRadiobox(opts = {}) {
 }
 
 export function createCheckbox(opts = {}) {
-    const container = createElement('label', 'ui-check-wrapper',
+    const container = createElement('label', opts.switch ? 'ui-switch' : 'ui-check-wrapper',
         createElement('input', input => {
             input.setAttribute('type', 'checkbox');
             if (opts.checked === true) {
@@ -86,7 +86,23 @@ export function createCheckbox(opts = {}) {
     if (opts.enabled === false) {
         container.classList.add('disabled');
     }
-    if (opts.checkedNode != null && opts.uncheckedNode != null) {
+    if (opts.switch) {
+        const label = opts.label;
+        if (label instanceof Element) {
+            container.appendChild(label);
+        } else {
+            container.appendChild(
+                createElement('span', span => {
+                    if (label != null && String(label).length > 0) {
+                        span.innerText = label;
+                    }
+                    if (opts.title != null) {
+                        span.title = opts.title;
+                    }
+                })
+            );
+        }
+    } else if (opts.checkedNode != null && opts.uncheckedNode != null) {
         container.classList.add('ui-check-image-wrapper');
         let height = opts.imageHeight;
         if (isNaN(height) || height <= 0) {

lib/ui/css/checkbox.scss

@@ -55,6 +55,10 @@
     user-select: none;
     cursor: pointer;
 
+    &.disabled {
+        cursor: default;
+    }
+
     >span:first-of-type {
         display: inline-flex;
         align-items: center;
@@ -101,9 +105,10 @@
         }
 
         &:disabled+span:first-of-type {
+            cursor: default;
 
             &::before {
-                opacity: .5;
+                opacity: .3;
             }
         }
     }

lib/ui/css/common.scss

@@ -7,7 +7,8 @@
 
     @include outborder();
 
-    &.validation-error {
+    &.validation-error,
+    &:invalid {
         border-color: var(--red-color);
 
         &:focus,

lib/ui/css/dropdown.scss

@@ -30,7 +30,8 @@ $listMaxHeight: 210px;
             flex: 1 1 auto;
             cursor: pointer;
             font-size: var(--font-size);
-            // line-height: $headerHeight;
+            line-height: $headerHeight;
+            min-height: $headerHeight;
             padding: 0 6px;
             overflow: hidden;
             text-overflow: ellipsis;

lib/ui/css/grid.scss

@@ -45,6 +45,7 @@
         --header-filter-padding: 4px 26px 4px 8px;
         --spacing-s: 4px;
         --spacing-cell: 9px 4px 9px 8px;
+        --spacing-drop-cell: 5px 4px 5px 8px;
         --filter-line-height: 30px;
         --filter-item-padding: 0 4px;
     }
@@ -122,8 +123,10 @@
                                 }
                             }
 
-                            >.ui-check-wrapper {
+                            >.ui-check-wrapper,
+                            >.ui-switch {
                                 height: 20px;
+                                padding: 0 4px 0 0;
                             }
 
                             >svg {
@@ -398,10 +401,12 @@
                             @include scrollbar();
                         }
 
-                        .ui-check-wrapper {
+                        .ui-check-wrapper,
+                        .ui-switch {
                             display: inline-flex;
                             justify-content: center;
                             height: var(--row-height);
+                            padding: 0 8px;
 
                             .ui-check-inner {
 
@@ -410,6 +415,14 @@
                                     transition: none;
                                 }
                             }
+
+                            >span:first-of-type {
+
+                                &:before,
+                                &:after {
+                                    transition: none;
+                                }
+                            }
                         }
 
                         .ui-drop-span {
@@ -439,7 +452,7 @@
                                 height: 100%;
 
                                 >.ui-drop-text {
-                                    padding: var(--spacing-cell);
+                                    padding: var(--spacing-drop-cell);
                                 }
                             }
                         }
@@ -708,6 +721,7 @@
 .ui-popup-mask .ui-popup-container .ui-popup-footer {
     >.ui-sort-layout {
         flex: 1 1 auto;
+        margin-left: 8px;
     }
 }
 

lib/ui/css/popup.scss

@@ -62,7 +62,7 @@ $buttonHeight: 28px;
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
-                padding: 10px 0 6px 12px;
+                padding: 5px 0 3px 12px;
             }
 
             >.ui-popup-header-title,
@@ -76,7 +76,7 @@ $buttonHeight: 28px;
 
             >.ui-popup-header-icons {
                 flex: 0 0 auto;
-                padding: 10px 12px 6px 0;
+                padding: 5px 12px 3px 0;
                 display: flex;
 
                 >svg {
@@ -145,8 +145,9 @@ $buttonHeight: 28px;
                 margin: 10px;
 
                 >svg {
-                    width: 40px;
-                    height: 40px;
+                    width: 30px;
+                    height: 30px;
+                    fill: unset;
 
                     +span {
                         padding-left: 16px;
@@ -204,6 +205,10 @@ $buttonHeight: 28px;
             align-items: center;
             justify-content: flex-end;
             padding: 4px 10px 16px 2px;
+        }
+
+        .ui-popup-body,
+        .ui-popup-footer {
 
             .ui-popup-button {
                 margin-left: 12px;
@@ -212,7 +217,7 @@ $buttonHeight: 28px;
                 line-height: $buttonHeight;
                 color: var(--title-color);
                 border-radius: var(--corner-radius);
-                padding: 4px 16px;
+                padding: 1px 16px;
                 box-sizing: border-box;
                 min-width: 70px;
                 text-align: center;
@@ -227,6 +232,11 @@ $buttonHeight: 28px;
                 }
 
                 @include outline();
+
+                &:disabled {
+                    opacity: .4;
+                    cursor: default;
+                }
             }
         }
 

lib/ui/css/variables/definition.scss

@@ -38,7 +38,7 @@
     --border-radius: 2px;
     --text-indent: 4px;
     --line-height: 18px;
-    --settings-line-height: 28px;
+    --settings-line-height: 32px;
 
     --font-size: .8125rem; // 13px
     --font-smaller-size: .75rem; // 12px

lib/ui/date.d.ts

@@ -87,6 +87,10 @@ export class DateSelector {
         maxDate?: string,
         /** 是否启用 */
         enabled?: boolean,
+        /** 焦点索引 */
+        tabIndex?: number,
+        /** 类名 */
+        className?: string,
         /**
          * 自定义格式化函数，用于获取日期值时调用
          * @param date 日期值

lib/ui/date.js

@@ -1,4 +1,5 @@
 import { createElement } from "../functions";
+import { isPositive, nullOrEmpty } from "../utility";
 
 /**
  * 创建或转换日期选择框
@@ -344,6 +345,16 @@ export class DateSelector {
              * @private
              */
             maxDate: null,
+            /**
+             * @type {number?}
+             * @private
+             */
+            tabIndex: null,
+            /**
+             * @type {string?}
+             * @private
+             */
+            className: null,
             /**
              * @type {DateFormatterCallback?}
              * @private
@@ -399,6 +410,10 @@ export class DateSelector {
     create(element) {
         const opts = this._var.options;
         const el = createDateInput(opts.minDate, opts.maxDate, element);
+        isPositive(opts.tabIndex) && el.setAttribute('tabindex', opts.tabIndex);
+        if (!nullOrEmpty(opts.className)) {
+            el.classList.add(opts.className);
+        }
         if (element == null) {
             el.disabled = opts.enabled === false;
         }

lib/ui/dropdown.d.ts

@@ -16,6 +16,8 @@ export interface DropdownOptions {
     valueKey?: string;
     /** 源码显示的关键字，默认值 `html` */
     htmlKey?: string;
+    /** 源码显示的模板函数 */
+    htmlTemplate?: (item: DropdownItem) => HTMLElement;
     /** 最大输入长度，默认值 `500` */
     maxLength?: number;
     /** 是否允许多选 */

lib/ui/dropdown.js

@@ -130,7 +130,6 @@ export class Dropdown {
     onCollapsed;
 
     constructor(options = {}) {
-        options.searchPlaceholder ??= r('searchHolder', 'Search...');
         options.textKey ??= 'text';
         options.valueKey ??= 'value';
         options.htmlKey ??= 'html';
@@ -139,7 +138,10 @@ export class Dropdown {
         const getText = options.getText;
         if (typeof getText === 'function') {
             r = getText;
+        } else if (typeof GetTextByKey === 'function') {
+            r = GetTextByKey;
         }
+        options.searchPlaceholder ??= r('searchHolder', 'Search...');
     }
 
     create() {

lib/ui/grid/column.js

@@ -44,6 +44,14 @@ export class GridColumn {
      * @type {boolean}
      */
 
+    /**
+     * 标记该类型是否支持列头批量操作
+     * @member
+     * @name GridColumn.headerEditing
+     * @readonly
+     * @type {boolean}
+     */
+
     /**
      * 创建显示单元格时调用的方法
      * @param {GridColumnDefinition} col - 列定义对象
@@ -579,10 +587,12 @@ export class GridCheckboxColumn extends GridColumn {
     /**
      * @ignore
      * @param {Function} trigger 
+     * @param {GridColumnDefinition} col 
      * @returns {HTMLElement}
      */
-    static createEdit(trigger) {
+    static createEdit(trigger, col) {
         const check = createCheckbox({
+            switch: col.switch,
             onchange: trigger
         });
         return check;

lib/ui/grid/grid.js

@@ -9,11 +9,12 @@ import { setTooltip } from "../tooltip";
 import { Popup, showAlert, showConfirm } from "../popup";
 import { convertCssStyle } from "../extension";
 import { GridColumn, GridInputColumn, GridTextColumn, GridDropdownColumn, GridCheckboxColumn, GridRadioboxColumn, GridIconColumn, GridDateColumn } from "./column";
+import { requestAnimationFrame } from '../../ui';
 
 /**
  * @author Tsanie Lily <[email protected]>
  * @license MIT
- * @version 1.0.3
+ * @version 1.0.6
  */
 
 const ScriptPath = (self.document == null ? self.location.href : self.document.currentScript?.src ?? '').replace(/ui\.min\.js\?.+$/, '');
@@ -147,6 +148,14 @@ let r = lang;
  * @this GridColumnDefinition
  */
 
+/**
+ * 行数据过滤项模板回调函数
+ * @callback GridItemHtmlCallback
+ * @param {ValueItem} item - 行数据对象
+ * @returns {HTMLElement} 返回过滤项元素对象
+ * @this GridColumnDefinition
+ */
+
 /**
  * 行数据字符串回调函数
  * @callback GridItemStringCallback
@@ -250,13 +259,15 @@ let r = lang;
  * @property {GridItemObjectCallback} [styleFilter] - **已过时**<br/>_根据返回值填充单元格样式（填充行列数据时读取）_
  * @property {(string | GridItemStringCallback)} [background] - 设置单元格背景色（填充行列数据时读取），支持直接设置颜色字符串或调用函数返回（若赋值则忽略 [bgFilter]{@linkcode GridColumnDefinition#bgFilter}）
  * @property {GridItemStringCallback} [bgFilter] - **已过时**<br/>_根据返回值设置单元格背景色_
- * @property {KeyMap<Function>} [events] - 给单元格元素附加事件（事件函数上下文为数据行对象）
+ * @property {boolean} [switch=false] - 复选框为 `ui-switch` 样式 `@since 1.0.6`
  * @property {(any | GridItemObjectCallback)} [attrs] - 根据返回值设置单元格元素的附加属性，允许直接设置对象也支持调用函数返回对象
+ * @property {KeyMap<Function>} [events] - 给单元格元素附加事件（事件函数上下文为数据行对象）
  * @property {boolean} [allowFilter=false] - 是否允许进行列头过滤
  * @property {any[]} [filterValues] - 过滤值的数组
  * @property {boolean} [filterAllowNull=false] - 是否区分 `null` 与空字符串
  * @property {(ValueItem[] | GridColumnFilterSourceCallback)} [filterSource] - 自定义列过滤器的数据源，支持调用函数返回数据源
  * @property {boolean} [filterAsValue=false] - 列头过滤强制使用 `Value` 字段
+ * @property {GridItemHtmlCallback} [filterTemplate] - 列头过滤项的模板函数
  * @property {GridItemSortCallback} [sortFilter] - 自定义列排序函数
  * @property {boolean} [sortAsText=false] - 按照 `DisplayValue` 排序
  * @property {DropdownOptions} [dropOptions] - 列为下拉列表类型时以该值设置下拉框的参数
@@ -403,7 +414,7 @@ let r = lang;
 /**
  * 判断列是否始终编辑的回调函数
  * @callback ColumnTypesEnumIsAlwaysEditing
- * @param {number} type - 列类型
+ * @param {number | GridColumn} type - 列类型
  * @returns {boolean} 返回是否始终编辑
  */
 
@@ -432,7 +443,9 @@ const GridColumnTypeEnum = {
      * 判断列是否为复选框列
      * @type {ColumnTypesEnumIsAlwaysEditing}
      */
-    isAlwaysEditing(type) { return type === 3 || type === 7 }
+    isAlwaysEditing(type) {
+        return type?.headerEditing || type === 3 || type === 7;
+    }
 };
 
 /**
@@ -1111,7 +1124,7 @@ export class Grid {
      * @property {GridLanguages} [langs] - 多语言资源对象
      * @property {number} [virtualCount=100] - 行数大于等于该值则启用虚模式
      * @property {boolean} [autoResize=true] - 未设置宽度的列自动调整列宽
-     * @property {number} [rowHeight=36] - 表格行高
+     * @property {number} [rowHeight=36] - 表格行高，修改后同时需要在 `.ui-grid` 所在父容器重写 `--line-height` 的值以配合显示
      * @property {number} [lineHeight=18] - 文本行高（多行文本列计算高度时使用）
      * @property {string} [filterIcon=ellipsis-h] - 列头未过滤时的图标
      * @property {string} [filteredIcon=filter] - 列头已过滤时的图标
@@ -2030,13 +2043,15 @@ export class Grid {
             }
         }
         source ??= [{ column: '', order: 'asc' }];
+        pop.create();
+        pop.rect = { width: 600, height: 460 };
         pop.show(this._var.el).then(() => {
-            pop.container.style.cssText += 'width: 600px; height: 460px';
             if (layout) {
                 const footer = pop.container.querySelector('.ui-popup-footer');
                 footer.insertBefore(createCheckbox({
                     label: this.langs.updateLayout,
                     className: 'ui-sort-layout',
+                    switch: true,
                     enabled: false
                 }), footer.children[0]);
             }
@@ -2462,9 +2477,9 @@ export class Grid {
                 direction = 1;
             }
             const editing = col.sortAsText !== true;
-            return (a, b) => {
-                a = this._getItemSortProp(a.values, editing, col);
-                b = this._getItemSortProp(b.values, editing, col);
+            const comparer = (a, b) => {
+                a = this._getItemSortProp(a, editing, col);
+                b = this._getItemSortProp(b, editing, col);
                 if (editing) {
                     if (typeof a === 'boolean') {
                         a = a ? 2 : 1;
@@ -2473,26 +2488,30 @@ export class Grid {
                         b = b ? 2 : 1;
                     }
                     if (a == null && typeof b === 'number') {
-                        a = 0;
+                        return (b >= 0 ? -1 : 1);
                     } else if (typeof a === 'number' && b == null) {
-                        b = 0;
+                        return (a >= 0 ? 1 : -1);
+                    } else if (a == null && b != null) {
+                        return -1;
                     } else if (a != null && b == null) {
-                        return direction;
-                    } else {
-                        if (Array.isArray(a)) {
-                            a = a.join(', ');
-                        }
-                        if (Array.isArray(b)) {
-                            b = b.join(', ');
-                        }
-                        if (typeof a === 'string' && typeof b === 'string') {
-                            a = a.toLowerCase();
-                            b = b.toLowerCase();
-                        }
+                        return 1;
+                    }
+                    if (Array.isArray(a)) {
+                        a = a.join(', ');
+                    }
+                    if (Array.isArray(b)) {
+                        b = b.join(', ');
+                    }
+                    if (typeof a === 'string' && typeof b === 'string') {
+                        a = a.toLowerCase();
+                        b = b.toLowerCase();
                     }
                 } else {
+                    if (a == null && b != null) {
+                        return -1;
+                    }
                     if (a != null && b == null) {
-                        return direction;
+                        return 1;
                     }
                     if (Array.isArray(a)) {
                         a = a.join(', ');
@@ -2505,8 +2524,9 @@ export class Grid {
                         b = b.toLowerCase();
                     }
                 }
-                return a === b ? 0 : (a > b ? 1 : -1) * direction;
+                return a === b ? 0 : (a > b ? 1 : -1);
             };
+            return (a, b) => comparer(a.values, b.values) * direction;
         }
         return (a, b) => col.sortFilter(a.values, b.values) * direction;
     }
@@ -2670,6 +2690,7 @@ export class Grid {
             th.appendChild(wrapper);
             if (!readonly && col.enabled !== false && col.allcheck && alwaysEditing) {
                 const check = createCheckbox({
+                    switch: col.switch,
                     onchange: e => this._onColumnAllChecked(col, e.target.checked)
                 });
                 wrapper.appendChild(check);
@@ -3625,11 +3646,14 @@ export class Grid {
 
     /**
      * @private
-     * @param {string} tagName 
+     * @param {HTMLElement} e 
      * @returns {boolean}
      */
-    _notHeader(tagName) {
-        return /^(input|label|layer|svg|use)$/i.test(tagName);
+    _notHeader(e) {
+        if (e.parentElement.classList.contains('ui-switch')) {
+            return true;
+        }
+        return /^(input|label|layer|svg|use)$/i.test(e.tagName);
     }
 
     /**
@@ -3642,7 +3666,7 @@ export class Grid {
         if (!force && (this._get(col.key, 'resizing') || this._get(col.key, 'dragging'))) {
             return;
         }
-        if (!this._notHeader(e.target.tagName)) {
+        if (!this._notHeader(e.target)) {
             if (Array.isArray(this.sortArray) && this.sortArray.length > 0) {
                 showConfirm(this.langs.sort, this.langs.sortArrayExists, [
                     {
@@ -3652,8 +3676,8 @@ export class Grid {
                     {
                         text: this.langs.cancel
                     }
-                ]).then(result => {
-                    if (result?.key === 'yes') {
+                ]).then(r => {
+                    if (r.result === 'yes') {
                         const sortCol = this.sortArray.find(c => c.column === col.key);
                         this.sortDirection = sortCol?.order === 'asc' ? -1 : 1;
                         this._onDoHeaderSort(col);
@@ -3790,22 +3814,27 @@ export class Grid {
                         if (!Object.hasOwnProperty.call(dict, display)) {
                             dict[display] = {
                                 Value: vals[i],
-                                DisplayValue: display
+                                DisplayValue: display,
+                                RowItem: item.values
                             };
                         }
                     });
                 } else if (!Object.hasOwnProperty.call(dict, displayValue)) {
                     dict[displayValue] = {
                         Value: this._getItemProp(item.values, true, col),
-                        DisplayValue: displayValue
+                        DisplayValue: displayValue,
+                        RowItem: item.values
                     };
                 }
             }
-            const filterAsValue = col.filterAsValue;
-            const type = this._var.colTypes[col.key];
-            const isDateColumn = type === GridDateColumn || type instanceof GridDateColumn;
-            array = Object.values(dict)
-                .sort((itemA, itemB) => {
+            array = Object.values(dict);
+            if (typeof col.sortFilter === 'function') {
+                array.sort((a, b) => col.sortFilter(a.RowItem, b.RowItem));
+            } else {
+                const type = this._var.colTypes[col.key];
+                const isDateColumn = type === GridDateColumn || type instanceof GridDateColumn;
+                const filterAsValue = col.filterAsValue;
+                array.sort((itemA, itemB) => {
                     let a = itemA.Value;
                     let b = itemB.Value;
                     if (a instanceof Date || b instanceof Date) {
@@ -3828,6 +3857,7 @@ export class Grid {
                     }
                     return a > b ? 1 : (a < b ? -1 : 0);
                 });
+            }
         }
         array = array.map(i => {
             if (Object.prototype.hasOwnProperty.call(i, 'Value') &&
@@ -3907,7 +3937,7 @@ export class Grid {
         panel.appendChild(functions);
 
         this._var.el.appendChild(panel);
-        setTimeout(() => panel.classList.add('active'), 0);
+        requestAnimationFrame(() => panel.classList.add('active'));
         this._var.colAttrs.__filtering = filter;
         filter.classList.add('hover');
     }
@@ -3943,24 +3973,32 @@ export class Grid {
         if (array.length > 12) {
             array = array.slice(0, 12);
         }
-        this._doFillFilterList(content, array, all);
+        this._doFillFilterList(col, content, array, all);
         list.append(holder, content);
     }
 
     /**
      * @private
+     * @param {GridColumnDefinition} col 
      * @param {HTMLDivElement} content 
      * @param {ValueItem[]} array 
      * @param {HTMLDivElement} all 
      */
-    _doFillFilterList(content, array, all) {
+    _doFillFilterList(col, content, array, all) {
         for (let item of array) {
             const div = createElement('div', 'filter-item');
-            const display = Object.prototype.hasOwnProperty.call(item, 'DisplayValue') ? item.DisplayValue : item;
+            const title = Object.prototype.hasOwnProperty.call(item, 'DisplayValue') ? item.DisplayValue : item;
+            let display;
+            if (typeof col.filterTemplate === 'function') {
+                display = col.filterTemplate(item);
+            }
+            if (display == null) {
+                display = title && String(title).replace(/( |\r\n|\n|<br[ \t]*\/?>)/g, '\u00a0');
+            }
             div.appendChild(createCheckbox({
                 checked: item.__checked,
-                label: display && String(display).replace(/( |\r\n|\n|<br[ \t]*\/?>)/g, '\u00a0'),
-                title: display,
+                label: display,
+                title,
                 onchange: e => {
                     item.__checked = e.target.checked;
                     all.querySelector('input').checked = ![...content.querySelectorAll('input')].some(i => !i.checked);
@@ -4001,7 +4039,7 @@ export class Grid {
             }
             const content = list.querySelector('.filter-content');
             content.replaceChildren();
-            this._doFillFilterList(content, array, list.querySelector('.filter-all'));
+            this._doFillFilterList(col, content, array, list.querySelector('.filter-all'));
             content.style.top = `${top + rowHeight}px`;
         }
     }
@@ -4012,7 +4050,7 @@ export class Grid {
      * @param {GridColumnDefinition} col 
      */
     _onDragStart(e, col) {
-        if (this._notHeader(e.target.tagName)) {
+        if (this._notHeader(e.target)) {
             return;
         }
         if (e.currentTarget.classList.contains('sticky')) {
@@ -4066,7 +4104,7 @@ export class Grid {
             if (attr.offset == null) {
                 delete attr.dragging;
             } else {
-                setTimeout(() => {
+                requestAnimationFrame(() => {
                     delete attr.dragging;
                     delete attr.offset;
                 });
@@ -4116,7 +4154,7 @@ export class Grid {
             clearEvents(attr);
             const width = attr.resizing;
             if (width != null) {
-                setTimeout(() => delete attr.resizing);
+                requestAnimationFrame(() => delete attr.resizing);
                 if (attr.sizing) {
                     delete attr.sizing;
                     delete attr.autoResize;

lib/ui/icon.d.ts

@@ -3,8 +3,9 @@
  * @param type 样式分类，可以是 ['`fa-light`', '`fa-regular`', '`fa-solid`'] 其中之一
  * @param id 图标 id
  * @param style 样式表对象
+ * @param action 点击回调事件
  */
-export function createIcon(type: string, id: string, style?: { [key: string]: string }): SVGSVGElement
+export function createIcon(type: string, id: string, style?: { [key: string]: string } | ((icon: SVGSVGElement) => { [key: string]: string }), action?: (this: SVGSVGElement, ev: MouseEvent) => any): SVGSVGElement
 /**
  * 修改矢量图标
  * @param svg 矢量图标元素

lib/ui/icon.js

@@ -24,15 +24,20 @@ export function changeIcon(svg, type, id) {
     return svg;
 }
 
-export function createIcon(type, id, style) {
+export function createIcon(type, id, style, action) {
     const svg = document.createElementNS(svgns, 'svg');
     svg.classList.add('ui-icon');
     svg.appendChild(createUse(type, id));
-    if (style != null) {
+    if (typeof style === 'function') {
+        style(svg);
+    } else if (style != null) {
         for (let css of Object.entries(style)) {
             svg.style.setProperty(css[0], css[1]);
         }
     }
+    if (typeof action === 'function') {
+        svg.addEventListener('click', action);
+    }
     return svg;
 }
 

lib/ui/popup.d.ts

@@ -7,6 +7,8 @@ interface PopupOptions {
     /** 弹出框标题，可以是文本或者 html 元素 */
     title: string | HTMLElement;
 
+    /** 是否持久化显示 */
+    persistent?: boolean;
     /** 是否包含遮罩层，默认为 `true` */
     mask?: boolean;
     /** 遮罩层 z-index */
@@ -66,6 +68,21 @@ interface PopupOptions {
 
 export class Popup {
     constructor(opts?: PopupOptions);
+
+    get container(): HTMLElement;
+
+    get title(): string;
+    set title(title: string);
+
+    get loading(): boolean;
+    set loading(flag: boolean);
+
+    get rect(): { collapsed: boolean, left: number, top: number, width: number, height: number };
+    set rect(r: { collapsed?: boolean, left?: number, top?: number, width?: number, height?: number });
+
+    close(result?: any, animation?: boolean): void;
+    create(): HTMLDivElement;
+    show(parent?: HTMLElement, hidden?: boolean): Promise<HTMLElement> | undefined;
 }
 
 interface PopupButton {
@@ -86,12 +103,14 @@ interface PopupIconTypes {
 }
 
 interface PopupButtonResult {
-    key: string;
+    result: string;
     popup: Popup;
 }
 
 export function createPopup(title: string | HTMLElement, content: string | HTMLElement, ...buttons: PopupButton[]): Popup
 
+export function resolvePopup(wrapper: string | HTMLElement, callback?: Function, removable?: boolean, zIndex?: number): Popup
+
 export function showAlert(title: string | HTMLElement, message: string, iconType?: keyof PopupIconTypes, parent?: HTMLElement): Promise<void>
 
 export function showConfirm(title: string | HTMLElement, content: string | HTMLElement, buttons: PopupButton[], iconType?: keyof PopupIconTypes, parent?: HTMLElement): Promise<PopupButtonResult>

lib/ui/popup.js

@@ -1,9 +1,10 @@
 import "./css/popup.scss";
-import { r } from "../utility/lgres";
+import { r as lang } from "../utility/lgres";
 import { nullOrEmpty } from "../utility/strings";
 import { global } from "../utility";
 import { createElement } from "../functions";
 import { createIcon, changeIcon } from "./icon";
+import { requestAnimationFrame } from "../ui";
 
 const ResizeMods = {
     right: 1,
@@ -51,6 +52,30 @@ export class Popup {
 
     get container() { return this._var.mask.querySelector('.ui-popup-container') }
 
+    get title() { return this._var.option.title }
+    set title(title) {
+        const element = this._var.mask?.querySelector('.ui-popup-container .ui-popup-header .ui-popup-header-title');
+        if (element != null) {
+            element.innerText = title;
+        }
+        this._var.option.title = title;
+    }
+
+    get loading() { return this._var.mask?.querySelector('.ui-popup-body>.ui-popup-loading')?.style?.visibility === 'visible' }
+    set loading(flag) {
+        let loading = this._var.mask?.querySelector('.ui-popup-body>.ui-popup-loading');
+        if (loading == null) {
+            return;
+        }
+        if (flag === false) {
+            loading.style.visibility = 'hidden';
+            loading.style.opacity = 0;
+        } else {
+            loading.style.visibility = 'visible';
+            loading.style.opacity = 1;
+        }
+    }
+
     get rect() {
         const container = this.container;
         if (container == null) {
@@ -105,25 +130,41 @@ export class Popup {
         }
     }
 
-    close(animation = true) {
+    close(result = null, animation = true) {
+        const option = this._var.option;
         const mask = this._var.mask;
+        const doClose = () => {
+            if (option.persistent) {
+                mask.style.display = 'none';
+            } else {
+                mask.remove();
+                this._var.mask = null;
+            }
+        }
         if (animation) {
             mask.classList.add('ui-popup-active');
             mask.style.opacity = 0;
-            setTimeout(() => { mask.remove(); }, 120);
+            setTimeout(() => { doClose(); }, 120);
         } else {
-            mask.remove();
+            doClose();
         }
-        if (typeof this._var.option.onMasking === 'function') {
-            this._var.option.onMasking.call(this, false);
+        if (typeof option.onMasking === 'function') {
+            option.onMasking.call(this, false);
         }
-        if (typeof this._var.option.resolve === 'function') {
-            this._var.option.resolve();
+        if (typeof option.resolve === 'function') {
+            option.resolve.call(this, {
+                result,
+                popup: this
+            });
         }
     }
 
+    /**
+     * 创建 Popup 面板
+     * @returns {HTMLDivElement} 返回遮罩元素（顶层元素）
+     */
     create() {
-        const mask = createElement('div', 'ui-popup-mask');
+        const mask = createElement('div', 'ui-popup-mask ui-popup-active');
         const option = this._var.option;
         if (option.mask === false) {
             mask.classList.add('ui-popup-transparent');
@@ -286,14 +327,14 @@ export class Popup {
                             if (typeof result?.then === 'function') {
                                 result.then(r => {
                                     if (r !== false) {
-                                        this.close();
+                                        this.close(r);
                                     }
                                 }).catch(reason => console.warn(reason));
                             } else if (result !== false) {
-                                this.close();
+                                this.close(result);
                             }
                         } else {
-                            this.close();
+                            this.close(b.key ?? i);
                         }
                     });
                     return button;
@@ -357,24 +398,33 @@ export class Popup {
         return mask;
     }
 
-    show(parent = document.body) {
+    show(parent = document.body, hidden = false) {
         if (parent == null) {
             return;
         }
-        let mask = this._var.mask ?? this.create();
-        // const exists = [...parent.children].filter(e => e.classList.contains('ui-popup-mask'));
-        const exists = parent.querySelectorAll('.ui-popup-mask');
-        let zindex = 0;
-        for (let ex of exists) {
-            let z = parseInt(ex.style.zIndex);
-            if (!isNaN(z) && z > zindex) {
-                zindex = z;
+        let mask = this._var.mask;
+        if (mask == null) {
+            mask = this._var.mask = this.create();
+        }
+        if (mask.parentElement == null) {
+            // const exists = [...parent.children].filter(e => e.classList.contains('ui-popup-mask'));
+            const exists = parent.querySelectorAll('.ui-popup-mask');
+            let zindex = 0;
+            for (let ex of exists) {
+                let z = parseInt(global.getComputedStyle(ex).zIndex);
+                if (!isNaN(z) && z > zindex) {
+                    zindex = z;
+                }
+            }
+            if (zindex > 0) {
+                mask.style.zIndex = String(zindex + 1);
+            }
+            parent.appendChild(mask);
+            if (hidden === true) {
+                mask.style.display = 'none';
+                return Promise.resolve(mask);
             }
         }
-        if (zindex > 0) {
-            mask.style.zIndex = String(zindex + 1);
-        }
-        parent.appendChild(mask);
         if (this._var.option.mask === false) {
             // calculator position
             const container = this.container;
@@ -382,29 +432,16 @@ export class Popup {
             container.style.top = String((parent.offsetHeight - container.offsetHeight) / 2) + 'px';
         }
         return new Promise(resolve => {
-            setTimeout(() => {
+            mask.style.display = '';
+            requestAnimationFrame(() => {
+                mask.classList.remove('ui-popup-active');
                 mask.style.opacity = 1;
                 this.container.focus();
-                resolve(mask);
-            }, 0);
+                setTimeout(() => resolve(mask), 120);
+            });
         });
     }
 
-    get loading() { return this._var.mask?.querySelector('.ui-popup-body>.ui-popup-loading')?.style?.visibility === 'visible' }
-    set loading(flag) {
-        let loading = this._var.mask?.querySelector('.ui-popup-body>.ui-popup-loading');
-        if (loading == null) {
-            return;
-        }
-        if (flag === false) {
-            loading.style.visibility = 'hidden';
-            loading.style.opacity = 0;
-        } else {
-            loading.style.visibility = 'visible';
-            loading.style.opacity = 1;
-        }
-    }
-
     _resize(mod, e) {
         if (e.buttons !== 1) {
             return;
@@ -500,6 +537,43 @@ export function createPopup(title, content, ...buttons) {
     return popup;
 }
 
+/**
+ * 解析对话框元素
+ * @param {HTMLElement | string} wrapper - 解析该 `.dialog` 元素
+ * @param {Function} [callback] - 关闭对话框时的回调
+ * @param {boolean} [removable] - 是否可移除
+ * @param {number} [zIndex] - 对话框默认 `z-index`
+ * @returns {Popup} 返回弹出框字典
+ */
+export function resolvePopup(wrapper, callback, removable, zIndex) {
+    if (typeof wrapper === 'string') {
+        wrapper = document.querySelector(wrapper);
+    }
+    if (wrapper == null) {
+        return null;
+    }
+    if (!wrapper.classList.contains('dialog')) {
+        return null;
+    }
+    const title = wrapper.querySelector('.dialog-title>.title')?.innerText;
+    const content = wrapper.querySelector('.dialog-title+div');
+    const buttons = [...wrapper.querySelectorAll('.dialog-func>input[type="button"]')].reverse().map(b => ({
+        tabIndex: b.tabIndex,
+        text: b.value,
+        trigger: b.onclick == null ? null : (popup => (b.onclick.call(popup), false))
+    }));
+    const popup = new Popup({
+        title,
+        content,
+        persistent: !removable,
+        resolve: typeof callback === 'function' ? (result => callback(result)) : null,
+        zIndex: wrapper.zIndex ?? zIndex,
+        buttons
+    });
+    popup.show(document.body, true);
+    return popup;
+}
+
 const iconTypes = {
     'info': 'info-circle',
     'information': 'info-circle',
@@ -510,6 +584,7 @@ const iconTypes = {
 }
 
 export function showAlert(title, message, iconType = 'info', parent = document.body) {
+    const r = typeof GetTextByKey === 'function' ? GetTextByKey : lang;
     return new Promise(resolve => {
         const popup = new Popup({
             title,
@@ -519,7 +594,7 @@ export function showAlert(title, message, iconType = 'info', parent = document.b
             ),
             resolve,
             buttons: [
-                { text: r('ok', 'OK'), trigger: resolve }
+                { text: r('ok', 'OK') }
             ]
         });
         popup.show(parent).then(mask => {
@@ -530,6 +605,7 @@ export function showAlert(title, message, iconType = 'info', parent = document.b
 }
 
 export function showConfirm(title, content, buttons, iconType = 'question', parent = document.body) {
+    const r = typeof GetTextByKey === 'function' ? GetTextByKey : lang;
     return new Promise(resolve => {
         const wrapper = createElement('div', 'message-wrapper');
         if (!nullOrEmpty(iconType)) {
@@ -542,34 +618,23 @@ export function showConfirm(title, content, buttons, iconType = 'question', pare
             title,
             content: wrapper,
             resolve,
-            buttons: buttons?.map(b => {
+            buttons: buttons?.map((b, i) => {
                 return {
                     text: b.text,
                     trigger: p => {
                         let result;
                         if (typeof b.trigger === 'function') {
                             result = b.trigger(p, b);
-                            if (typeof result?.then === 'function') {
-                                return result.then(r => {
-                                    r !== false && resolve(r);
-                                    return r;
-                                });
-                            }
-                            result !== false && resolve(result);
                         } else {
-                            result = {
-                                key: b.key,
-                                popup: p
-                            };
-                            resolve(result);
+                            result = b.key ?? i;
                         }
                         return result;
                     }
                 };
             }) ??
                 [
-                    { text: r('yes', 'Yes'), trigger: p => resolve({ key: 'yes', popup: p }) },
-                    { text: r('no', 'No'), trigger: p => resolve({ key: 'no', popup: p }) }
+                    { key: 'yes', text: r('yes', 'Yes') },
+                    { key: 'no', text: r('no', 'No') }
                 ]
         });
         popup.show(parent).then(mask => {