inviton-powerduck 0.0.366 → 0.0.367

package/app/powerduck-system-resources.ts

@@ -19,6 +19,8 @@ export interface IPowerduckSystemResources {
 	save: string;
 	search: string;
 	searchedValue: string;
+	from?: string;
+	to?: string;
 	image: string;
 	noResultsFound: string;
 	colVisLabel: string;

package/common/dialog-utils.ts

@@ -124,22 +124,27 @@ class DialogBuilder {
 	hasIcon: boolean = false;
 	id: string = null;
 	labelId: string = null;
+	isBottomSheet: boolean = false;
 
 	build(args: AppDialogArgs): string {
 		this.args = args;
 		this.id = `dyn-modal-${PortalUtils.randomString(6)}`;
 		this.labelId = `${this.id}label`;
 		this.hasIcon = args.icon != null;
+		this.isBottomSheet = this._treatAsBottomSheet();
 		this.builder = '';
 
 		this.builder
 			+= `<div id="${this.id}" key="${this.id
 			}" tabindex="-1" role="dialog" aria-labelledby="${this.labelId
-			}" data-bs-backdrop="true" data-bs-keyboard="true" class="modal fade modal-bottom-sheet${args.cssClass ? ` ${args.cssClass}` : ''
+			}" data-bs-backdrop="true" data-bs-keyboard="true" class="modal fade${this._getMobileModeCss()}${args.cssClass ? ` ${args.cssClass}` : ''
 			}">`;
 		this.builder += `  <div role="document" class="modal-dialog${args.size != null ? ` ${args.size}` : ''}">`;
 		this.builder += '    <div class="modal-content">';
-		this.builder += '      <div class="drag-handle text-center"><div class="handle-bar"></div></div>';
+
+		if (this.isBottomSheet) {
+			this.builder += '      <div class="drag-handle text-center"><div class="handle-bar"></div></div>';
+		}
 
 		this.builder += this._getHeader();
 		this.builder += this._getBody();
@@ -151,6 +156,29 @@ class DialogBuilder {
 		return this.builder;
 	}
 
+	/**
+	 * Mirrors the `Modal` component's `treatMobileAsBottomSheet()`: a dialog only docks to the
+	 * bottom as a sheet on an actual mobile device. `mobileMode` defaults to the bottom-sheet
+	 * behavior (matching the pre-existing drag-handle binding); 'default'/'fullscreen' opt out.
+	 */
+	private _treatAsBottomSheet(): boolean {
+		if (!PortalUtils.treatAsMobileDevice()) {
+			return false;
+		}
+
+		return this.args.mobileMode == null || this.args.mobileMode == 'bottom-sheet';
+	}
+
+	private _getMobileModeCss(): string {
+		if (this.isBottomSheet) {
+			return ' modal-bottom-sheet';
+		} else if (this.args.mobileMode == 'fullscreen') {
+			return ' modal-mobile-fullscreen';
+		}
+
+		return '';
+	}
+
 	private _getHeader(): string {
 		let innerBuilder = '';
 		innerBuilder += `<div class="modal-header${this.hasIcon ? ' modal-has-headericon' : ''}">`;
@@ -262,7 +290,7 @@ export class DialogUtils {
 			}, 50);
 		});
 
-		if (args.mobileMode == null || args.mobileMode == 'bottom-sheet') {
+		if (builder.isBottomSheet) {
 			const modal = document.getElementById(builder.id);
 			ModalUtils.bindModalBottomSheetHandle(() => modal, () => ModalUtils.hideModal(modalContext));
 		}

package/components/datatable/datatable.tsx

@@ -757,7 +757,10 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
 					endTime: filterItem.DateTo,
 				};
 			} else if (filterItem.FilterType == DataTableFilterItemType.NumericRange) {
-				// TODO: Implement
+				this.currentAdvancedFilterState[filterItem.PropertyName] = {
+					from: filterItem.NumFrom,
+					to: filterItem.NumTo,
+				};
 			} else if (filterItem.FilterType == DataTableFilterItemType.Text) {
 				this.currentAdvancedFilterState[filterItem.PropertyName] = filterItem.ContainsValue;
 			}
@@ -1237,6 +1240,57 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
 		this.reloadData();
 	}
 
+	performNumericRangeFilter(dtColumn: TableColumn, data: { from: number | null; to: number | null } | null): void {
+		this.currentAdvancedFilterState[dtColumn.id] = data;
+
+		// A one-sided range (only from, or only to) is valid; empty means both bounds are missing.
+		const isEmpty = data == null || (data.from == null && data.to == null);
+		if (isEmpty) {
+			this.addFilterItem(dtColumn, {} as any);
+		}
+
+		const filterValue: DataTablePostBackFilterItem = {
+			PropertyName: dtColumn.id,
+			NumFrom: data?.from ?? undefined,
+			NumTo: data?.to ?? undefined,
+			FilterType: DataTableFilterItemType.NumericRange,
+		};
+
+		if (!this.filterDataHaveChanged(dtColumn, filterValue)) {
+			return;
+		}
+
+		if (isEmpty) {
+			this.addFilterItem(dtColumn, {} as any);
+		} else {
+			this.addFilterItem(dtColumn, filterValue);
+		}
+
+		if (this.preserveFilter == true) {
+			if (isEmpty) {
+				StorageHelper.storeFilter(this.id, null);
+			} else {
+				StorageHelper.storeFilter(this.id, filterValue);
+			}
+		}
+
+		if (this.handleClientsideFilter(false)) {
+			return;
+		}
+
+		// Immediate reload if changed, delay handled by the Dropdown component
+		this.reloadData();
+	}
+
+	private parseNumericFilterValue(raw: string): number | null {
+		if (isNullOrEmpty(raw)) {
+			return null;
+		}
+
+		const parsed = Number(raw);
+		return Number.isNaN(parsed) ? null : parsed;
+	}
+
 	performClientsideFilter(): void {
 		this.rows = this.getClientsideFilteredAndSortedRows(this.loadedRows);
 	}
@@ -1348,7 +1402,20 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
 						return false;
 					}
 
-					return filterData.NumFrom <= propVal && filterData.NumTo >= propVal;
+					const numVal = typeof propVal == 'number' ? propVal : Number(propVal);
+					if (Number.isNaN(numVal)) {
+						return false;
+					}
+
+					if (filterData.NumFrom != null && numVal < filterData.NumFrom) {
+						return false;
+					}
+
+					if (filterData.NumTo != null && numVal > filterData.NumTo) {
+						return false;
+					}
+
+					return true;
 				});
 			}
 		}
@@ -2038,7 +2105,10 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
 				endTime: filterItem.DateTo,
 			};
 		} else if (filterItem.FilterType == DataTableFilterItemType.NumericRange) {
-			console.warn('Numeric range filtering not implemented');
+			return {
+				from: filterItem.NumFrom,
+				to: filterItem.NumTo,
+			};
 		} else {
 			return null;
 		}
@@ -2402,7 +2472,7 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
 					null,
 				);
 			} else if (filterType == DataTableFilterItemType.NumericRange) {
-				console.warn('Numeric range filtering not implemented');
+				this.performNumericRangeFilter(dtColumn, null);
 			}
 		};
 
@@ -2442,6 +2512,20 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
 			return (<DaterangePicker label={null} cssClass="dt-filter-input" wrap={false} placeholder={`${PowerduckState.getResourceValue('search')[capitalize]()}...`} value={this.currentAdvancedFilterState[dtColumn.id]} changed={(e) => { this.performDateRangeFilter(dtColumn, e); }} appendIcon={closeIcon} appendIconClicked={appendIconClicked} />);
 		} else if (filterType == DataTableFilterItemType.DateRangeWithTime) {
 			return (<DaterangePicker label={null} cssClass="dt-filter-input" wrap={false} placeholder={`${PowerduckState.getResourceValue('search')[capitalize]()}...`} value={this.currentAdvancedFilterState[dtColumn.id]} changed={(e) => { this.performDateRangeFilter(dtColumn, e); }} appendIcon={closeIcon} appendIconClicked={appendIconClicked} enableTime={true} autoClose={false} />);
+		} else if (filterType == DataTableFilterItemType.NumericRange) {
+			const numRange = this.currentAdvancedFilterState[dtColumn.id];
+			const fromRes = PowerduckState.getResourceValue('from');
+			const toRes = PowerduckState.getResourceValue('to');
+			const searchPlaceholder = PowerduckState.getResourceValue('search')[capitalize]();
+			const fromPlaceholder = isNullOrEmpty(fromRes) || fromRes.startsWith('{{') ? searchPlaceholder : fromRes[capitalize]();
+			const toPlaceholder = isNullOrEmpty(toRes) || toRes.startsWith('{{') ? searchPlaceholder : toRes[capitalize]();
+
+			return (
+				<div class="dt-filter-input dt-filter-numrange">
+					<TextBox updateMode="change" cssClass="dt-filter-numrange-from" wrap={false} label={null} autoCompleteEnabled={false} placeholder={fromPlaceholder} value={numRange?.from != null ? String(numRange.from) : ''} changed={(e) => { this.performNumericRangeFilter(dtColumn, { from: this.parseNumericFilterValue(e), to: numRange?.to ?? null }); }} />
+					<TextBox updateMode="change" cssClass="dt-filter-numrange-to" wrap={false} label={null} autoCompleteEnabled={false} placeholder={toPlaceholder} value={numRange?.to != null ? String(numRange.to) : ''} changed={(e) => { this.performNumericRangeFilter(dtColumn, { from: numRange?.from ?? null, to: this.parseNumericFilterValue(e) }); }} appendIcon={closeIcon} appendIconClicked={appendIconClicked} />
+				</div>
+			);
 		}
 	}
 

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "inviton-powerduck",
 	"type": "module",
-	"version": "0.0.366",
+	"version": "0.0.367",
 	"files": [
 		"app/",
 		"common/",