inviton-powerduck 0.0.128 → 0.0.130

package/app/powerduck-system-resources.ts

@@ -83,4 +83,9 @@ export interface IPowerduckSystemResources {
 	signInX: string;
 	signInFigma: string;
 	signInDribble: string;
+	gpsBoundingBoxLabel: string;
+	gpsBoundingBoxX1: string;
+	gpsBoundingBoxX2: string;
+	gpsBoundingBoxY1: string;
+	gpsBoundingBoxY2: string;
 }

package/common/localized-value-helper.ts

@@ -38,7 +38,10 @@ export default class LocalizedValueHelper {
 		}
 
 		for (const propKey in value) {
-			return value[propKey];
+			const val = value[propKey];
+			if (val?.length > 0) {
+				return val;
+			}
 		}
 
 		return null as any;

package/components/datatable/datatable.tsx

@@ -891,7 +891,7 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
 		}
 	}
 
-	markSelection(): void {
+	markSelection (): void {
 		const mySelf = this;
 		const escapeRegExp = function (string) {
 			return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
@@ -909,26 +909,55 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
 		};
 
 		let regexBuilder = '';
-		const markArr: string[] = [];
+		const markArr = [];
 		if (this.filterArr != null) {
 			this.filterArr.forEach((filterItem) => {
 				if (regexBuilder.length > 0) {
 					regexBuilder += '|';
 				}
 
+				const columnId = filterItem.PropertyName?.toLowerCase();
+				const tds = Array.from($(mySelf.$el).find(`td.dt-col-${columnId}`));
+				if (tds == null || tds.length == 0) {
+					return;
+				}
+
 				(getValueArr(filterItem) || []).forEach((filterValue) => {
-					markArr.push(escapeRegExp(filterValue));
+					markArr.push({
+						value: escapeRegExp(filterValue),
+						elements: tds,
+					});
 				});
 			});
 		}
 
 		if (!isNullOrEmpty(this.fullTextQuery)) {
-			regexBuilder += escapeRegExp(this.fullTextQuery);
+			const value = escapeRegExp(this.fullTextQuery);
+			const tds = Array.from($(mySelf.$el).find(`td`));
+			regexBuilder += value;
+
+			markArr.push({
+				value,
+				elements: tds,
+			});
 		}
 
 		if (DataTableConfig.filterMarking) {
 			this.unmarkSelection(() => {
-				mySelf.markInstance.mark(markArr);
+				for (const item of markArr) {
+					this.markInstance.mark(item.value, {
+						filter: (node) => {
+							const parentTd = $(node).closest('td')[0];
+							if (!parentTd) {
+								return false;
+							}
+
+							const matchesColumn = item.elements?.some(el => parentTd?.isEqualNode(el));
+							const matchesText = parentTd?.textContent?.toLowerCase().includes(item.value.toLowerCase());
+							return matchesColumn && matchesText;
+						}
+					});
+				}
 			});
 		}
 	}

package/components/input/gps-bounding-box.tsx

@@ -0,0 +1,113 @@
+import { Component, Prop, toNative } from 'vue-facing-decorator';
+import TsxComponent from '../../app/vuetsx';
+import { ValidationState } from '../../common/static-wrappers/interfaces/validation-interface';
+import BoundingBox from '../../data/bounding-box';
+import FlexContainer from '../form/flex-container';
+import FlexFormItem from '../form/form-item-flex';
+import FormItemWrapper from '../form/form-item-wrapper';
+import OpenStreetMap from '../open-street-map/open-street-map';
+import NumericInput, { NumericInputMode } from './numeric-input';
+import PowerduckState from '../../app/powerduck-state';
+
+interface GpsBoundingBoxInputArgs {
+	bBoxModel: BoundingBox;
+	mandatory?: boolean;
+}
+
+@Component
+class GpsBoundingBoxInputComponent extends TsxComponent<GpsBoundingBoxInputArgs> implements GpsBoundingBoxInputArgs {
+	@Prop() bBoxModel: BoundingBox;
+	@Prop() mandatory?: boolean;
+
+	onChange (field: keyof BoundingBox, value: number) {
+		if (value) {
+			this.bBoxModel[field] = parseFloat(value.toFixed(7));
+		} else {
+			this.bBoxModel[field] = null;
+		}
+	}
+
+	renderInput (
+		h: any,
+		label: string,
+		value: number,
+		onChanged?: (value: number) => void,
+		showClearValueButton?: boolean,
+		validationState?: ValidationState,
+	) {
+		return (
+			<FlexFormItem flexFill={true}>
+				<NumericInput
+					mandatory={this.mandatory}
+					label={label}
+					value={value}
+					step={0.000001}
+					mode={NumericInputMode.Clasic}
+					showClearValueButton={showClearValueButton}
+					validationState={validationState}
+					changed={(e) => {
+						if (onChanged != null) {
+							onChanged(e);
+						}
+					}}
+				/>
+			</FlexFormItem>
+		);
+	}
+
+	render (h) {
+		if (!this.bBoxModel) {
+			return null;
+		}
+
+		return (
+			<div>
+				<FormItemWrapper label={PowerduckState.getResourceValue('gpsBoundingBoxLabel')} mandatory={this.mandatory}>
+					<FlexContainer fullWidthOnMobile={true}>
+						<FlexFormItem>
+							{this.renderInput(
+								h,
+								PowerduckState.getResourceValue('gpsBoundingBoxX1'),
+								this.bBoxModel.x1,
+								e => this.onChange('x1', e),
+							)}
+							{this.renderInput(
+								h,
+								PowerduckState.getResourceValue('gpsBoundingBoxX2'),
+								this.bBoxModel.x2,
+								e => this.onChange('x2', e),
+							)}
+						</FlexFormItem>
+						<FlexFormItem>
+							{this.renderInput(
+								h,
+								PowerduckState.getResourceValue('gpsBoundingBoxY1'),
+								this.bBoxModel.y1,
+								e => this.onChange('y1', e),
+							)}
+							{this.renderInput(
+								h,
+								PowerduckState.getResourceValue('gpsBoundingBoxY2'),
+								this.bBoxModel.y2,
+								e => this.onChange('y2', e),
+							)}
+						</FlexFormItem>
+					</FlexContainer>
+				</FormItemWrapper>
+
+				<FormItemWrapper label={null} mandatory={false}>
+					<div class="rounded">
+						<OpenStreetMap
+							ref="openStreetMap"
+							isCenterHidden={true}
+							bBox={this.bBoxModel}
+						/>
+					</div>
+				</FormItemWrapper>
+			</div>
+		);
+	}
+}
+
+const GpsBoundingBoxInput = toNative(GpsBoundingBoxInputComponent);
+export default GpsBoundingBoxInput;

package/components/input/localized-string-wysiwyg.tsx

@@ -40,6 +40,7 @@ class LocalizedStringWysiwigComponent extends TsxComponent<LocalizedStringInputA
 	@Prop() appendClicked: () => void;
 	@Prop() prependClicked: () => void;
 	currentValue: ILocalizedText = null;
+	editorHeight: number = null;
 
 	raiseChangeEvent(newValue: ILocalizedText): void {
 		this.populateValidationDeclaration();
@@ -59,6 +60,10 @@ class LocalizedStringWysiwigComponent extends TsxComponent<LocalizedStringInputA
 		this.raiseChangeEvent(value);
 	}
 
+	onEditorResized (height: number): void {
+		this.editorHeight = height;
+	}
+
 	getActualValue(lang: Language, value: ILocalizedText): string {
 		if (value == null) {
 			return null;
@@ -104,6 +109,8 @@ class LocalizedStringWysiwigComponent extends TsxComponent<LocalizedStringInputA
 								key={lang.id}
 								wrap={false}
 								resizable={this.resizable}
+								initialHeight={this.editorHeight}
+								onResized={this.onEditorResized}
 								label={null}
 								value={this.getActualValue(lang.id, this.value)}
 								changed={(e) => {

package/components/input/wysiwig.tsx

@@ -32,6 +32,8 @@ interface WysiwigEditorArgs extends FormItemWrapperArgs {
 	useCommonUpload?: boolean;
 	uploadPluginArgs?: () => any | any;
 	resizable?: boolean;
+	initialHeight?: number;
+	onResized?: (height: number) => void;
 	changed: (newValue: string) => void;
 }
 
@@ -56,6 +58,8 @@ class WysiwigEditorComponent extends TsxComponent<WysiwigEditorArgs> implements
 	@Prop() appendClicked: () => void;
 	@Prop() prependClicked: () => void;
 	@Prop() changed: (newValue: string) => void;
+	@Prop() initialHeight: number = null;
+	@Prop() onResized?: (height: number) => void;
 	@Prop({ default: true }) resizable: boolean;
 	skipTrigger: boolean = false;
 
@@ -160,6 +164,25 @@ class WysiwigEditorComponent extends TsxComponent<WysiwigEditorArgs> implements
 			innerEditor.addClass('vertical-resize');
 		}
 
+		if (this.initialHeight) {
+			innerEditor.css('height', `${this.initialHeight}px`);
+		}
+
+		let lastNotifiedHeight = this.initialHeight || null;
+		if (this.onResized != null && this.resizable) {
+			const resizeObserver = new ResizeObserver((entries) => {
+				for (const entry of entries) {
+					const height = entry?.contentRect?.height;
+					if (height > 0 && (lastNotifiedHeight == null || Math.abs(height - lastNotifiedHeight) > 2)) { // To keep height stable
+						lastNotifiedHeight = height;
+						this.onResized(height);
+					}
+				}
+			});
+
+			resizeObserver.observe(innerEditor[0]);
+		}
+
 		innerEditor.on('click', (e) => {
 			const clickTarget = e.target;
 			if (clickTarget != null && clickTarget.nodeName == 'IMG') {

package/components/open-street-map/open-street-map.tsx

@@ -1,10 +1,11 @@
-import { LGeoJson, LLayerGroup, LMap, LMarker, LTileLayer } from '@vue-leaflet/vue-leaflet';
+import { LGeoJson, LLayerGroup, LMap, LMarker, LPolygon, LTileLayer } from '@vue-leaflet/vue-leaflet';
 import L from 'leaflet';
 import * as LCluster from 'leaflet.markercluster';
 import { Prop, toNative, Watch } from 'vue-facing-decorator';
 import TsxComponent, { Component } from '../../app/vuetsx';
 import { isNullOrEmpty } from '../../common/utils/is-null-or-empty';
 import { ModalUtils } from '../modal/modal-utils';
+import BoundingBox from '../../data/bounding-box';
 import iconUrl from './img/marker-icon.png';
 import GestureHandling from './ts/gesture-handling/gesture-handling';
 import 'leaflet/dist/leaflet.css';
@@ -57,6 +58,7 @@ interface OpenStreetMapClusterOptions {
 interface OpenStreetMapArgs {
 	latitude?: string;
 	longitude?: string;
+	bBox?: BoundingBox;
 	name?: string;
 	address?: string;
 	is16by9?: boolean;
@@ -75,7 +77,7 @@ interface OpenStreetMapArgs {
 }
 
 export class OpenStreetMapHelper {
-	static getMarkerIcon(): L.Icon<L.IconOptions> {
+	static getMarkerIcon (): L.Icon<L.IconOptions> {
 		return L.icon({
 			iconUrl,
 			iconAnchor: [
@@ -109,11 +111,13 @@ export interface GoogleMapRefreshArgs {
 		'l-marker': LMarker,
 		'l-geo-json': LGeoJson,
 		'l-layer-group': LLayerGroup,
+		'l-polygon': LPolygon,
 	},
 })
 export class OpenStreetMapComponent extends TsxComponent<OpenStreetMapArgs> implements OpenStreetMapArgs {
 	@Prop() latitude!: string;
 	@Prop() longitude!: string;
+	@Prop() bBox?: BoundingBox;
 	@Prop() name!: string;
 	@Prop() address!: string;
 	@Prop() is16by9!: boolean;
@@ -132,12 +136,14 @@ export class OpenStreetMapComponent extends TsxComponent<OpenStreetMapArgs> impl
 	leafletIcon: any = null;
 	markerClusters: LCluster.MarkerClusterGroup = null;
 
-	mounted() {
+	mounted () {
 		this.initIcon();
 		this.waitForLeaflet().then(() => {
 			ModalUtils.handleModalMountDelay(this, () => {
 				this.initGestureHandling();
 				this.invalidateSize();
+				this.onBoundingBoxChanged();
+
 				if (this.initComplete != null) {
 					this.$nextTick(() => {
 						this.initComplete(this.getLeaflet(), this.getMap());
@@ -147,7 +153,15 @@ export class OpenStreetMapComponent extends TsxComponent<OpenStreetMapArgs> impl
 		});
 	}
 
-	async waitForLeaflet(timeout = 15000, interval = 100) {
+	@Watch('bBox', { immediate: false, deep: true })
+	onBoundingBoxChanged () {
+		const bounds = this.getBoundingBoxLatLngBounds();
+		if (bounds) {
+			this.getLeaflet()?.fitBounds(bounds);
+		}
+	}
+
+	async waitForLeaflet (timeout = 15000, interval = 100) {
 		const startTime = Date.now();
 		while (!this.getLeaflet()) {
 			if (Date.now() - startTime > timeout) {
@@ -160,25 +174,25 @@ export class OpenStreetMapComponent extends TsxComponent<OpenStreetMapArgs> impl
 		return this.getLeaflet();
 	}
 
-	initIcon() {
+	initIcon () {
 		if (this.leafletIcon == null) {
 			this.leafletIcon = OpenStreetMapHelper.getMarkerIcon();
 		}
 	}
 
 	@Watch('geoJSON')
-	onGeoJsonChanged() {
+	onGeoJsonChanged () {
 		if (this.geoJSONClustering) {
 			this.initCluster();
 		}
 	}
 
 	@Watch('mapUrl')
-	onMapUrlChanged() {
+	onMapUrlChanged () {
 		this.invalidateSize();
 	}
 
-	initGestureHandling() {
+	initGestureHandling () {
 		if (this.gestureHandling == true) {
 			const leaflet = this.getLeaflet();
 			if ((leaflet as any)._gesturesBinder != true) {
@@ -188,10 +202,10 @@ export class OpenStreetMapComponent extends TsxComponent<OpenStreetMapArgs> impl
 		}
 	}
 
-	initCluster() {
+	initCluster () {
 		this.markerClusters?.clearLayers();
 		this.markerClusters = new LCluster.MarkerClusterGroup(this.clusterOptions || {
-			iconCreateFunction(cluster) {
+			iconCreateFunction (cluster) {
 				const html = `<div class="cluster-marker ">${cluster.getChildCount()}<div class="pulse-animation"></div></div>`;
 				return L.divIcon({ html, className: 'cluster-icon' });
 			},
@@ -209,7 +223,7 @@ export class OpenStreetMapComponent extends TsxComponent<OpenStreetMapArgs> impl
 		}
 	}
 
-	invalidateSize() {
+	invalidateSize () {
 		const leaflet = this.getLeaflet();
 		if (leaflet != null) {
 			this.$nextTick(() => {
@@ -218,41 +232,88 @@ export class OpenStreetMapComponent extends TsxComponent<OpenStreetMapArgs> impl
 		}
 	}
 
-	getNumeric(val: string): number {
+	getNumeric (val: string): number {
 		return Number((val || '').toString().split(',').join(''));
 	}
 
-	getZoomValue(): number {
+	getZoomValue (): number {
 		if (this.defaultZoom != null) {
 			return this.defaultZoom;
+		} else if (this.bBox != null) {
+			return undefined;
 		} else {
 			return 16;
 		}
 	}
 
-	getLocPoint() {
+	getCenter () {
+		if (this.bBox != null) {
+			const { x1, x2, y1, y2 } = this.bBox;
+			const lat = (y1 + y2) / 2;
+			const lng = (x1 + x2) / 2;
+			return [lat, lng];
+		}
+
+		const locArr = this.getLocArr();
+		return locArr;
+	}
+
+	getLocPoint () {
 		return {
 			lat: this.getNumeric(this.latitude),
 			lng: this.getNumeric(this.longitude),
 		};
 	}
 
-	getLocArr() {
+	getLocArr () {
 		return [
 			this.getNumeric(this.latitude),
 			this.getNumeric(this.longitude),
 		];
 	}
 
-	getMap() {
+	getMap () {
 		return this.$refs.mainMap;
 	}
 
-	getLeaflet() {
+	getLeaflet () {
 		return (this.getMap() as any)?.leafletObject;
 	}
 
-	render(h) {
+	getBoundingBoxCorners () {
+		if (!this.bBox) {
+			return [];
+		}
+
+		const { x1, x2, y1, y2 } = this.bBox;
+		if ([x1, x2, y1, y2].some(p => p == null)) {
+			return [];
+		}
+
+		const minLat = Math.min(y1, y2);
+		const maxLat = Math.max(y1, y2);
+		const minLng = Math.min(x1, x2);
+		const maxLng = Math.max(x1, x2);
+
+		return [
+			[maxLat, minLng],
+			[maxLat, maxLng],
+			[minLat, maxLng],
+			[minLat, minLng],
+			[maxLat, minLng],
+		];
+	}
+
+	getBoundingBoxLatLngBounds (): L.LatLngBounds {
+		const corners = this.getBoundingBoxCorners();
+		if (corners.length < 2) {
+			return null;
+		}
+
+		return L.latLngBounds(corners);
+	}
+
+	render (h) {
 		if (this.is16by9 == false) {
 			return this.renderLeaflet(h, { height: '100%' });
 		}
@@ -270,17 +331,26 @@ export class OpenStreetMapComponent extends TsxComponent<OpenStreetMapArgs> impl
 		);
 	}
 
-	private renderLeaflet(h, style: object) {
+	private renderLeaflet (h, style: object) {
 		const locArr = this.getLocArr();
 
 		return (
-			<l-map style={style} zoom={this.getZoomValue()} options={this.mapOptions} maxZoom={this.maxZoom} center={locArr} ref="mainMap">
+			<l-map style={style} zoom={this.getZoomValue()} options={this.mapOptions} maxZoom={this.maxZoom} center={this.getCenter()} ref="mainMap">
 				<l-tile-layer url={this.mapUrl} options={this.options} noWrap attribution={'&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors'}></l-tile-layer>
 				{!this.isCenterHidden
-				&& <l-marker lat-lng={locArr} icon={this.leafletIcon}></l-marker>}
+					&& <l-marker lat-lng={locArr} icon={this.leafletIcon}></l-marker>}
 
 				{!isNullOrEmpty(this.geoJSON)
-				&& <l-geo-json ref="geoJson" options={this.geoJSONConfig != null && this.geoJSONConfig} geojson={this.geoJSONClustering ? [] : this.geoJSON}></l-geo-json>}
+					&& <l-geo-json ref="geoJson" options={this.geoJSONConfig != null && this.geoJSONConfig} geojson={this.geoJSONClustering ? [] : this.geoJSON}></l-geo-json>}
+
+				{this.bBox && (
+					<l-polygon
+						lat-lngs={this.getBoundingBoxCorners()}
+						color="blue"
+						weight={2}
+						fillOpacity={0.1}
+					/>
+				)}
 
 				{this.$slots.default?.()}
 			</l-map>

package/data/bounding-box.ts

@@ -0,0 +1,6 @@
+export default class BoundingBox {
+	x1: number = null;
+	x2: number = null;
+	y1: number = null;
+	y2: number = null;
+}

package/package.json

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