From bcfab48a79c78e538406dc1710108bf844f2c37c Mon Sep 17 00:00:00 2001
From: kalytka <ykalytka@thingsboard.io>
Date: Fri, 31 Mar 2023 11:30:33 +0300
Subject: [PATCH 1/4] Added label parsing in select entity dialog

---
 .../select-entity-dialog.component.html       |  2 +-
 .../dialogs/select-entity-dialog.component.ts | 24 ++++++++++++++++++-
 .../components/widget/lib/maps/leaflet-map.ts | 22 ++++++++++++++++-
 3 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.html
index a2169cc129..fd0013236d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.html
@@ -31,7 +31,7 @@
       <mat-label translate>entity.entity</mat-label>
       <mat-select formControlName="entity">
         <mat-option *ngFor="let entity of data.entities" [value]="entity">
-          {{ entity.entityName }}
+          {{ parseName(entity) }}
         </mat-option>
       </mat-select>
     </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.ts
index 9822f6dca9..f7e94dd390 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.ts
@@ -22,9 +22,18 @@ import { Router } from '@angular/router';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { FormattedData } from '@shared/models/widget.models';
+import { GenericFunction } from '@home/components/widget/lib/maps/map-models';
+import { fillDataPattern, processDataPattern, safeExecute } from '@core/utils';
+import { parseWithTranslation } from '@home/components/widget/lib/maps/common-maps-utils';
 
 export interface SelectEntityDialogData {
   entities: FormattedData[];
+  labelSettings: {
+    showLabel: boolean;
+    useLabelFunction: boolean;
+    parsedLabelFunction: GenericFunction;
+    label: string;
+  };
 }
 
 @Component({
@@ -33,7 +42,6 @@ export interface SelectEntityDialogData {
   styleUrls: ['./select-entity-dialog.component.scss']
 })
 export class SelectEntityDialogComponent extends DialogComponent<SelectEntityDialogComponent, FormattedData> {
-
   selectEntityFormGroup: UntypedFormGroup;
 
   constructor(protected store: Store<AppState>,
@@ -50,6 +58,20 @@ export class SelectEntityDialogComponent extends DialogComponent<SelectEntityDia
     );
   }
 
+  public parseName(entity) {
+    let name;
+    if (this.data.labelSettings?.showLabel) {
+      const pattern = this.data.labelSettings.useLabelFunction ? safeExecute(this.data.labelSettings.parsedLabelFunction,
+        [entity, this.data.entities, entity.dsIndex]) : this.data.labelSettings.label;
+      const markerLabelText = parseWithTranslation.prepareProcessPattern(pattern, true);
+      const replaceInfoLabelMarker = processDataPattern(pattern, entity);
+      name = fillDataPattern(markerLabelText, replaceInfoLabelMarker, entity);
+    } else {
+      name = entity.entityName;
+    }
+    return name;
+  }
+
   save(): void {
     this.dialogRef.close(this.selectEntityFormGroup.value.entity);
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
index a78dd27431..614e494e36 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
@@ -182,16 +182,35 @@ export default abstract class LeafletMap {
 
     private selectEntityWithoutLocationDialog(shapes: L.PM.SUPPORTED_SHAPES): Observable<FormattedData> {
       let entities;
+      let labelSettings;
       switch (shapes) {
         case 'Polygon':
         case 'Rectangle':
           entities = this.datasources.filter(pData => !this.isValidPolygonPosition(pData));
+          labelSettings = {
+            showLabel: this.options.showPolygonLabel,
+            useLabelFunction:  this.options.usePolygonLabelFunction,
+            parsedLabelFunction: this.options.parsedPolygonLabelFunction,
+            label: this.options.polygonLabel
+          };
           break;
         case 'Marker':
           entities = this.datasources.filter(mData => !this.extractPosition(mData));
+          labelSettings = {
+            showLabel: this.options.showLabel,
+            useLabelFunction:  this.options.useLabelFunction,
+            parsedLabelFunction: this.options.parsedLabelFunction,
+            label: this.options.label
+          };
           break;
         case 'Circle':
           entities = this.datasources.filter(mData => !this.isValidCircle(mData));
+          labelSettings = {
+            showLabel: this.options.showCircleLabel,
+            useLabelFunction:  this.options.useCircleLabelFunction,
+            parsedLabelFunction: this.options.parsedCircleLabelFunction,
+            label: this.options.circleLabel
+          };
           break;
         default:
           return of(null);
@@ -205,7 +224,8 @@ export default abstract class LeafletMap {
           disableClose: true,
           panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
           data: {
-            entities
+            entities,
+            labelSettings
           }
         }).afterClosed();
     }

From e2114f49c06fdef137dfecc6672132b8b8653b48 Mon Sep 17 00:00:00 2001
From: kalytka <ykalytka@thingsboard.io>
Date: Fri, 31 Mar 2023 13:14:20 +0300
Subject: [PATCH 2/4] Added parsing to the point tooltip, Update parsing HTML
 forms

---
 .../dialogs/select-entity-dialog.component.ts    |  8 ++++++--
 .../components/widget/lib/maps/leaflet-map.ts    | 16 ++++++++--------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.ts
index f7e94dd390..9402da4c15 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.ts
@@ -65,7 +65,9 @@ export class SelectEntityDialogComponent extends DialogComponent<SelectEntityDia
         [entity, this.data.entities, entity.dsIndex]) : this.data.labelSettings.label;
       const markerLabelText = parseWithTranslation.prepareProcessPattern(pattern, true);
       const replaceInfoLabelMarker = processDataPattern(pattern, entity);
-      name = fillDataPattern(markerLabelText, replaceInfoLabelMarker, entity);
+      const div = document.createElement('div');
+      div.innerHTML = fillDataPattern(markerLabelText, replaceInfoLabelMarker, entity);
+      name = div.textContent || div.innerText || '';
     } else {
       name = entity.entityName;
     }
@@ -73,6 +75,8 @@ export class SelectEntityDialogComponent extends DialogComponent<SelectEntityDia
   }
 
   save(): void {
-    this.dialogRef.close(this.selectEntityFormGroup.value.entity);
+    const entity = this.selectEntityFormGroup.value.entity;
+    entity.parseName = this.parseName(this.selectEntityFormGroup.value.entity);
+    this.dialogRef.close(entity);
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
index 614e494e36..fe0762e6d9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
@@ -239,38 +239,38 @@ export default abstract class LeafletMap {
           let customTranslation;
           switch (type) {
             case 'tbMarker':
-              tooltipText = this.translateService.instant('widgets.maps.tooltips.placeMarker', {entityName: data.entityName});
+              tooltipText = this.translateService.instant('widgets.maps.tooltips.placeMarker', {entityName: data.parseName});
               // @ts-ignore
               this.map.pm.Draw.tbMarker._hintMarker.setTooltipContent(tooltipText);
               break;
             case 'tbCircle':
-              tooltipText = this.translateService.instant('widgets.maps.tooltips.startCircle', {entityName: data.entityName});
+              tooltipText = this.translateService.instant('widgets.maps.tooltips.startCircle', {entityName: data.parseName});
               // @ts-ignore
               this.map.pm.Draw.tbCircle._hintMarker.setTooltipContent(tooltipText);
               customTranslation = {
                 tooltips: {
-                  finishCircle: this.translateService.instant('widgets.maps.tooltips.finishCircle', {entityName: data.entityName})
+                  finishCircle: this.translateService.instant('widgets.maps.tooltips.finishCircle', {entityName: data.parseName})
                 }
               };
               break;
             case 'tbRectangle':
-              tooltipText = this.translateService.instant('widgets.maps.tooltips.firstVertex', {entityName: data.entityName});
+              tooltipText = this.translateService.instant('widgets.maps.tooltips.firstVertex', {entityName: data.parseName});
               // @ts-ignore
               this.map.pm.Draw.tbRectangle._hintMarker.setTooltipContent(tooltipText);
               customTranslation = {
                 tooltips: {
-                  finishRect: this.translateService.instant('widgets.maps.tooltips.finishRect', {entityName: data.entityName})
+                  finishRect: this.translateService.instant('widgets.maps.tooltips.finishRect', {entityName: data.parseName})
                 }
               };
               break;
             case 'tbPolygon':
-              tooltipText = this.translateService.instant('widgets.maps.tooltips.firstVertex', {entityName: data.entityName});
+              tooltipText = this.translateService.instant('widgets.maps.tooltips.firstVertex', {entityName: data.parseName});
               // @ts-ignore
               this.map.pm.Draw.tbPolygon._hintMarker.setTooltipContent(tooltipText);
               customTranslation = {
                 tooltips: {
-                  continueLine: this.translateService.instant('widgets.maps.tooltips.continueLine', {entityName: data.entityName}),
-                  finishPoly: this.translateService.instant('widgets.maps.tooltips.finishPoly', {entityName: data.entityName})
+                  continueLine: this.translateService.instant('widgets.maps.tooltips.continueLine', {entityName: data.parseName}),
+                  finishPoly: this.translateService.instant('widgets.maps.tooltips.finishPoly', {entityName: data.parseName})
                 }
               };
               break;

From 6202832d8c7a314d31bf76ecb110006f870f4f7d Mon Sep 17 00:00:00 2001
From: kalytka <ykalytka@thingsboard.io>
Date: Fri, 31 Mar 2023 14:57:10 +0300
Subject: [PATCH 3/4] Refactoring

---
 .../select-entity-dialog.component.html       |  2 +-
 .../dialogs/select-entity-dialog.component.ts | 35 +++----------------
 .../components/widget/lib/maps/leaflet-map.ts | 22 ++++++------
 .../components/widget/lib/maps/maps-utils.ts  | 29 ++++++++++++++-
 4 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.html
index fd0013236d..99740ac601 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.html
@@ -31,7 +31,7 @@
       <mat-label translate>entity.entity</mat-label>
       <mat-select formControlName="entity">
         <mat-option *ngFor="let entity of data.entities" [value]="entity">
-          {{ parseName(entity) }}
+          {{ entity.entityParseName }}
         </mat-option>
       </mat-select>
     </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.ts
index 9402da4c15..f2b3d09b5c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.ts
@@ -20,20 +20,11 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { Router } from '@angular/router';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { FormattedData } from '@shared/models/widget.models';
-import { GenericFunction } from '@home/components/widget/lib/maps/map-models';
-import { fillDataPattern, processDataPattern, safeExecute } from '@core/utils';
-import { parseWithTranslation } from '@home/components/widget/lib/maps/common-maps-utils';
 
 export interface SelectEntityDialogData {
   entities: FormattedData[];
-  labelSettings: {
-    showLabel: boolean;
-    useLabelFunction: boolean;
-    parsedLabelFunction: GenericFunction;
-    label: string;
-  };
 }
 
 @Component({
@@ -42,13 +33,13 @@ export interface SelectEntityDialogData {
   styleUrls: ['./select-entity-dialog.component.scss']
 })
 export class SelectEntityDialogComponent extends DialogComponent<SelectEntityDialogComponent, FormattedData> {
-  selectEntityFormGroup: UntypedFormGroup;
+  selectEntityFormGroup: FormGroup;
 
   constructor(protected store: Store<AppState>,
               protected router: Router,
               @Inject(MAT_DIALOG_DATA) public data: SelectEntityDialogData,
               public dialogRef: MatDialogRef<SelectEntityDialogComponent, FormattedData>,
-              public fb: UntypedFormBuilder) {
+              public fb: FormBuilder) {
     super(store, router, dialogRef);
 
     this.selectEntityFormGroup = this.fb.group(
@@ -58,25 +49,7 @@ export class SelectEntityDialogComponent extends DialogComponent<SelectEntityDia
     );
   }
 
-  public parseName(entity) {
-    let name;
-    if (this.data.labelSettings?.showLabel) {
-      const pattern = this.data.labelSettings.useLabelFunction ? safeExecute(this.data.labelSettings.parsedLabelFunction,
-        [entity, this.data.entities, entity.dsIndex]) : this.data.labelSettings.label;
-      const markerLabelText = parseWithTranslation.prepareProcessPattern(pattern, true);
-      const replaceInfoLabelMarker = processDataPattern(pattern, entity);
-      const div = document.createElement('div');
-      div.innerHTML = fillDataPattern(markerLabelText, replaceInfoLabelMarker, entity);
-      name = div.textContent || div.innerText || '';
-    } else {
-      name = entity.entityName;
-    }
-    return name;
-  }
-
   save(): void {
-    const entity = this.selectEntityFormGroup.value.entity;
-    entity.parseName = this.parseName(this.selectEntityFormGroup.value.entity);
-    this.dialogRef.close(entity);
+    this.dialogRef.close(this.selectEntityFormGroup.value.entity);
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
index fe0762e6d9..7b63176203 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
@@ -36,7 +36,7 @@ import { Observable, of } from 'rxjs';
 import { Polyline } from './polyline';
 import { Polygon } from './polygon';
 import { Circle } from './circle';
-import { createTooltip, isCutPolygon, isJSON } from '@home/components/widget/lib/maps/maps-utils';
+import { createTooltip, entitiesParseName, isCutPolygon, isJSON } from '@home/components/widget/lib/maps/maps-utils';
 import { checkLngLat, createLoadingDiv } from '@home/components/widget/lib/maps/common-maps-utils';
 import { WidgetContext } from '@home/models/widget-component.models';
 import {
@@ -215,6 +215,7 @@ export default abstract class LeafletMap {
         default:
           return of(null);
       }
+      entities = entitiesParseName(entities, labelSettings);
       if (entities.length === 1) {
         return of(entities[0]);
       }
@@ -224,8 +225,7 @@ export default abstract class LeafletMap {
           disableClose: true,
           panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
           data: {
-            entities,
-            labelSettings
+            entities
           }
         }).afterClosed();
     }
@@ -239,38 +239,38 @@ export default abstract class LeafletMap {
           let customTranslation;
           switch (type) {
             case 'tbMarker':
-              tooltipText = this.translateService.instant('widgets.maps.tooltips.placeMarker', {entityName: data.parseName});
+              tooltipText = this.translateService.instant('widgets.maps.tooltips.placeMarker', {entityName: data.entityParseName});
               // @ts-ignore
               this.map.pm.Draw.tbMarker._hintMarker.setTooltipContent(tooltipText);
               break;
             case 'tbCircle':
-              tooltipText = this.translateService.instant('widgets.maps.tooltips.startCircle', {entityName: data.parseName});
+              tooltipText = this.translateService.instant('widgets.maps.tooltips.startCircle', {entityName: data.entityParseName});
               // @ts-ignore
               this.map.pm.Draw.tbCircle._hintMarker.setTooltipContent(tooltipText);
               customTranslation = {
                 tooltips: {
-                  finishCircle: this.translateService.instant('widgets.maps.tooltips.finishCircle', {entityName: data.parseName})
+                  finishCircle: this.translateService.instant('widgets.maps.tooltips.finishCircle', {entityName: data.entityParseName})
                 }
               };
               break;
             case 'tbRectangle':
-              tooltipText = this.translateService.instant('widgets.maps.tooltips.firstVertex', {entityName: data.parseName});
+              tooltipText = this.translateService.instant('widgets.maps.tooltips.firstVertex', {entityName: data.entityParseName});
               // @ts-ignore
               this.map.pm.Draw.tbRectangle._hintMarker.setTooltipContent(tooltipText);
               customTranslation = {
                 tooltips: {
-                  finishRect: this.translateService.instant('widgets.maps.tooltips.finishRect', {entityName: data.parseName})
+                  finishRect: this.translateService.instant('widgets.maps.tooltips.finishRect', {entityName: data.entityParseName})
                 }
               };
               break;
             case 'tbPolygon':
-              tooltipText = this.translateService.instant('widgets.maps.tooltips.firstVertex', {entityName: data.parseName});
+              tooltipText = this.translateService.instant('widgets.maps.tooltips.firstVertex', {entityName: data.entityParseName});
               // @ts-ignore
               this.map.pm.Draw.tbPolygon._hintMarker.setTooltipContent(tooltipText);
               customTranslation = {
                 tooltips: {
-                  continueLine: this.translateService.instant('widgets.maps.tooltips.continueLine', {entityName: data.parseName}),
-                  finishPoly: this.translateService.instant('widgets.maps.tooltips.finishPoly', {entityName: data.parseName})
+                  continueLine: this.translateService.instant('widgets.maps.tooltips.continueLine', {entityName: data.entityParseName}),
+                  finishPoly: this.translateService.instant('widgets.maps.tooltips.finishPoly', {entityName: data.entityParseName})
                 }
               };
               break;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
index 4b4de38712..585f0cd54a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
@@ -16,9 +16,12 @@
 
 import L from 'leaflet';
 import {
+  GenericFunction,
   ShowTooltipAction, WidgetToolipSettings
 } from './map-models';
-import { Datasource } from '@app/shared/models/widget.models';
+import { Datasource, FormattedData } from '@app/shared/models/widget.models';
+import { fillDataPattern, processDataPattern, safeExecute } from '@core/utils';
+import { parseWithTranslation } from '@home/components/widget/lib/maps/common-maps-utils';
 
 export function createTooltip(target: L.Layer,
                               settings: Partial<WidgetToolipSettings>,
@@ -83,3 +86,27 @@ export function isJSON(data: string): boolean {
     return false;
   }
 }
+
+interface labelSettings {
+  showLabel: boolean;
+  useLabelFunction: boolean;
+  parsedLabelFunction: GenericFunction;
+  label: string;
+}
+
+export function entitiesParseName(entities: FormattedData[], labelSettings: labelSettings):  FormattedData[] {
+  for (const entity of entities) {
+    if (labelSettings?.showLabel) {
+      const pattern = labelSettings.useLabelFunction ? safeExecute(labelSettings.parsedLabelFunction,
+        [entity, entities, entity.dsIndex]) : labelSettings.label;
+      const markerLabelText = parseWithTranslation.prepareProcessPattern(pattern, true);
+      const replaceInfoLabelMarker = processDataPattern(pattern, entity);
+      const div = document.createElement('div');
+      div.innerHTML = fillDataPattern(markerLabelText, replaceInfoLabelMarker, entity);
+      entity.entityParseName = div.textContent || div.innerText || '';
+    } else {
+      entity.entityParseName = entity.entityName;
+    }
+  }
+  return entities;
+}

From 1d2368e98f0f6f299c9c233b8a8dcd911478916d Mon Sep 17 00:00:00 2001
From: kalytka <ykalytka@thingsboard.io>
Date: Mon, 3 Apr 2023 11:03:58 +0300
Subject: [PATCH 4/4] Refactoring

---
 .../app/modules/home/components/widget/lib/maps/maps-utils.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
index 585f0cd54a..4aad829eac 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
@@ -95,13 +95,13 @@ interface labelSettings {
 }
 
 export function entitiesParseName(entities: FormattedData[], labelSettings: labelSettings):  FormattedData[] {
+  const div = document.createElement('div');
   for (const entity of entities) {
     if (labelSettings?.showLabel) {
       const pattern = labelSettings.useLabelFunction ? safeExecute(labelSettings.parsedLabelFunction,
         [entity, entities, entity.dsIndex]) : labelSettings.label;
       const markerLabelText = parseWithTranslation.prepareProcessPattern(pattern, true);
       const replaceInfoLabelMarker = processDataPattern(pattern, entity);
-      const div = document.createElement('div');
       div.innerHTML = fillDataPattern(markerLabelText, replaceInfoLabelMarker, entity);
       entity.entityParseName = div.textContent || div.innerText || '';
     } else {