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