UI: Fix process header widget action - place map item

ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.ts

@@ -64,7 +64,7 @@ export class MapWidgetComponent implements OnInit, OnDestroy {
   overlayStyle: ComponentStyle = {};
   padding: string;
 
-  private map: TbMap<MapSetting>;
+  map: TbMap<MapSetting>;
 
   constructor(public widgetComponent: WidgetComponent,
               private imagePipe: ImagePipe,

ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts

@@ -33,7 +33,8 @@ import {
   formattedDataArrayFromDatasourceData,
   formattedDataFormDatasourceData,
   isDefined,
-  isDefinedAndNotNull, isUndefined,
+  isDefinedAndNotNull,
+  isUndefined,
   mergeDeepIgnoreArray
 } from '@core/utils';
 import { DeepPartial } from '@shared/models/common';
@@ -48,7 +49,7 @@ import {
   UnplacedMapDataItem,
 } from '@home/components/widget/lib/maps/data-layer/map-data-layer';
 import { IWidgetSubscription, WidgetSubscriptionOptions } from '@core/api/widget-api.models';
-import { FormattedData, MapItemType, WidgetAction, WidgetActionType, widgetType } from '@shared/models/widget.models';
+import { FormattedData, MapItemType, WidgetAction, widgetType } from '@shared/models/widget.models';
 import { EntityDataPageLink } from '@shared/models/query/query.models';
 import { CustomTranslatePipe } from '@shared/pipe/custom-translate.pipe';
 import { TbMarkersDataLayer } from '@home/components/widget/lib/maps/data-layer/markers-data-layer';
@@ -545,66 +546,67 @@ export abstract class TbMap<S extends BaseMapSettings> {
           title: customTranslate.transform(actionButton.label)
         };
         const toolbarButton = this.customActionsToolbar.toolbarButton(actionButtonConfig);
-        if (actionButton.action.type !== WidgetActionType.placeMapItem) {
+        toolbarButton.onClick((e, button) => this.ctx.actionsApi.handleWidgetAction(e, actionButton.action, null, null, {button}));
-          toolbarButton.onClick((e) => this.ctx.actionsApi.handleWidgetAction(e, actionButton.action));
-        } else {
-          switch (actionButton.action.mapItemType) {
-            case MapItemType.marker:
-              toolbarButton.onClick((e, button) => this.createMarker(e, {button, action: actionButton.action}));
-              break;
-            case MapItemType.polygon:
-              toolbarButton.onClick((e, button) => this.createPolygon(e, {button, action: actionButton.action}));
-              break;
-            case MapItemType.rectangle:
-              toolbarButton.onClick((e, button) => this.createRectangle(e, {button, action: actionButton.action}));
-              break;
-            case MapItemType.circle:
-              toolbarButton.onClick((e, button) => this.createCircle(e, {button, action: actionButton.action}));
-              break;
-          }
-        }
       });
     }
   }
 
-  private createMarker(e: MouseEvent, actionData: CustomActionData) {
+  public placeMapItem(actionData: CustomActionData): void {
-    this.createItem(e, actionData, () => this.prepareDrawMode('Marker', {
+    switch (actionData.action.mapItemType) {
+      case MapItemType.marker:
+        this.createMarker(actionData);
+        break;
+      case MapItemType.polygon:
+        this.createPolygon(actionData);
+        break;
+      case MapItemType.rectangle:
+        this.createRectangle(actionData);
+        break;
+      case MapItemType.circle:
+        this.createCircle(actionData);
+        break;
+    }
+  }
+
+  private createMarker(actionData: CustomActionData) {
+    this.createItem(actionData, () => this.prepareDrawMode('Marker', {
       placeMarker: this.ctx.translate.instant('widgets.maps.data-layer.marker.place-marker-hint')
     }));
   }
 
-  private createRectangle(e: MouseEvent, actionData: CustomActionData): void {
+  private createRectangle(actionData: CustomActionData): void {
-    this.createItem(e, actionData, () => this.prepareDrawMode('Rectangle', {
+    this.createItem(actionData, () => this.prepareDrawMode('Rectangle', {
       firstVertex: this.ctx.translate.instant('widgets.maps.data-layer.polygon.rectangle-place-first-point-hint'),
       finishRect: this.ctx.translate.instant('widgets.maps.data-layer.polygon.finish-rectangle-hint')
     }));
   }
 
-  private createPolygon(e: MouseEvent, actionData: CustomActionData): void {
+  private createPolygon(actionData: CustomActionData): void {
-    this.createItem(e, actionData, () => this.prepareDrawMode('Polygon', {
+    this.createItem(actionData, () => this.prepareDrawMode('Polygon', {
       firstVertex: this.ctx.translate.instant('widgets.maps.data-layer.polygon.polygon-place-first-point-hint'),
       continueLine: this.ctx.translate.instant('widgets.maps.data-layer.polygon.continue-polygon-hint'),
       finishPoly: this.ctx.translate.instant('widgets.maps.data-layer.polygon.finish-polygon-hint')
     }));
   }
 
-  private createCircle(e: MouseEvent, actionData: CustomActionData): void {
+  private createCircle(actionData: CustomActionData): void {
-    this.createItem(e, actionData, () => this.prepareDrawMode('Circle', {
+    this.createItem(actionData, () => this.prepareDrawMode('Circle', {
       startCircle: this.ctx.translate.instant('widgets.maps.data-layer.circle.place-circle-center-hint'),
       finishCircle: this.ctx.translate.instant('widgets.maps.data-layer.circle.finish-circle-hint')
     }));
   }
 
-  private createItem(e: MouseEvent, actionData: CustomActionData, prepareDrawMode: () => void) {
+  private createItem(actionData: CustomActionData, prepareDrawMode: () => void) {
     if (this.isPlacingItem) {
       return;
     }
-    this.updatePlaceItemState(actionData.button);
+    this.updatePlaceItemState(actionData.button, true);
 
     this.map.once('pm:create', (e) => {
-      this.ctx.actionsApi.handleWidgetAction(e as any, actionData.action, null, null, {
+      actionData.afterPlaceItemCallback(e as any, actionData.action, null, null, {
         coordinates: convertLayerToCoordinates(actionData.action.mapItemType, e.layer),
-        layer: e.layer
+        layer: e.layer,
+        button: actionData.button
       });
 
       // @ts-ignore
@@ -673,7 +675,7 @@ export abstract class TbMap<S extends BaseMapSettings> {
     L.DomUtil.addClass(this.map.pm.Draw[shape]._hintMarker.getTooltip()._container, 'tb-place-item-label');
   }
 
-  private updatePlaceItemState(addButton?: L.TB.ToolbarButton): void {
+  private updatePlaceItemState(addButton?: L.TB.ToolbarButton, disabled = false): void {
     if (addButton) {
       this.deselectItem(false, true);
       addButton.setActive(true);
@@ -681,7 +683,7 @@ export abstract class TbMap<S extends BaseMapSettings> {
       this.currentAddButton.setActive(false);
     }
     this.currentAddButton = addButton;
-    this.updateAddButtonsStates();
+    this.updateAddButtonsStates(disabled);
   }
 
   private createdControlButtonTooltip(root: HTMLElement, side: TooltipPositioningSide) {
@@ -856,8 +858,8 @@ export abstract class TbMap<S extends BaseMapSettings> {
     }
   }
 
-  private updateAddButtonsStates() {
+  private updateAddButtonsStates(disabled = false) {
-    if (this.currentAddButton) {
+    if (this.currentAddButton || disabled) {
       if (this.addMarkerButton && this.addMarkerButton !== this.currentAddButton) {
         this.addMarkerButton.setDisabled(true);
       }

ui-ngx/src/app/modules/home/components/widget/lib/maps/models/map.models.ts

@@ -34,6 +34,7 @@ import { ImagePipe } from '@shared/pipe/image.pipe';
 import { MarkerShape } from '@home/components/widget/lib/maps/models/marker-shape.models';
 import { UnplacedMapDataItem } from '@home/components/widget/lib/maps/data-layer/map-data-layer';
 import { DateFormatSettings, simpleDateFormat } from '@shared/models/widget-settings.models';
+import { EntityId } from '@shared/models/id/entity-id';
 
 export enum MapType {
   geoMap = 'geoMap',
@@ -1033,8 +1034,10 @@ export interface MarkerIconInfo {
 }
 
 export interface CustomActionData {
-  button: L.TB.TopToolbarButton;
+  button?: L.TB.TopToolbarButton;
   action: WidgetAction;
+  afterPlaceItemCallback: ($event: Event, descriptor: WidgetAction, entityId?: EntityId, entityName?: string,
+                           additionalParams?: any, entityLabel?: string) => void
 }
 
 export type MapStringFunction = (data: FormattedData<TbMapDatasource>,

ui-ngx/src/app/modules/home/components/widget/widget.component.ts

@@ -125,6 +125,7 @@ import { IModulesMap } from '@modules/common/modules-map.models';
 import { DashboardUtilsService } from '@core/services/dashboard-utils.service';
 import { CompiledTbFunction, compileTbFunction, isNotEmptyTbFunction } from '@shared/models/js-function.models';
 import { HttpClient } from '@angular/common/http';
+import type { MapWidgetComponent } from '@home/components/widget/lib/maps/map-widget.component';
 
 @Component({
   selector: 'tb-widget',
@@ -1150,44 +1151,17 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
         }
         break;
       case WidgetActionType.placeMapItem:
-      case WidgetActionType.customPretty:
+        const mapWidget: MapWidgetComponent = this.widgetContext.$scope.mapWidget
-        const customPrettyFunction = descriptor.customFunction;
+        if (mapWidget) {
-        const customHtml = descriptor.customHtml;
+          mapWidget.map.placeMapItem({
-        const customCss = descriptor.customCss;
+            action: descriptor,
-        const customResources = descriptor.customResources;
+            afterPlaceItemCallback: this.executeCustomPrettyAction.bind(this),
-        const actionNamespace = `custom-action-pretty-${guid()}`;
+            button: additionalParams?.button
-        let htmlTemplate = '';
+          });
-        if (isDefined(customHtml) && customHtml.length > 0) {
-          htmlTemplate = customHtml;
         }
-        this.loadCustomActionResources(actionNamespace, customCss, customResources, descriptor).subscribe({
+        break;
-          next: () => {
+      case WidgetActionType.customPretty:
-            if (isNotEmptyTbFunction(customPrettyFunction)) {
+        this.executeCustomPrettyAction($event, descriptor, entityId, entityName, additionalParams, entityLabel);
-              compileTbFunction(this.http, customPrettyFunction, '$event', 'widgetContext', 'entityId',
-                'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel').subscribe(
-                {
-                  next: (compiled) => {
-                    try {
-                      if (!additionalParams) {
-                        additionalParams = {};
-                      }
-                      this.widgetContext.customDialog.setAdditionalImports(descriptor.customImports);
-                      compiled.execute($event, this.widgetContext, entityId, entityName, htmlTemplate, additionalParams, entityLabel);
-                    } catch (e) {
-                      console.error(e);
-                    }
-                  },
-                  error: (err) => {
-                    console.error(err);
-                  }
-                }
-              )
-            }
-          },
-          error: (errorMessages: string[]) => {
-            this.processResourcesLoadErrors(errorMessages);
-          }
-        });
         break;
       case WidgetActionType.mobileAction:
         const mobileAction = descriptor.mobileAction;
@@ -1559,6 +1533,45 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
     this.handleWidgetAction($event, action, entityId, entityName, null, entityLabel);
   }
 
+  private executeCustomPrettyAction($event: Event, descriptor: WidgetAction, entityId?: EntityId,
+                                    entityName?: string, additionalParams?: any, entityLabel?: string) {
+    const customPrettyFunction = descriptor.customFunction;
+    const customHtml = descriptor.customHtml;
+    const customCss = descriptor.customCss;
+    const customResources = descriptor.customResources;
+    const actionNamespace = `custom-action-pretty-${guid()}`;
+    let htmlTemplate = '';
+    if (isDefined(customHtml) && customHtml.length > 0) {
+      htmlTemplate = customHtml;
+    }
+    this.loadCustomActionResources(actionNamespace, customCss, customResources, descriptor).subscribe({
+      next: () => {
+        if (isNotEmptyTbFunction(customPrettyFunction)) {
+          compileTbFunction(this.http, customPrettyFunction, '$event', 'widgetContext', 'entityId',
+            'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel').subscribe({
+            next: (compiled) => {
+              try {
+                if (!additionalParams) {
+                  additionalParams = {};
+                }
+                this.widgetContext.customDialog.setAdditionalImports(descriptor.customImports);
+                compiled.execute($event, this.widgetContext, entityId, entityName, htmlTemplate, additionalParams, entityLabel);
+              } catch (e) {
+                console.error(e);
+              }
+            },
+            error: (err) => {
+              console.error(err);
+            }
+          });
+        }
+      },
+      error: (errorMessages: string[]) => {
+        this.processResourcesLoadErrors(errorMessages);
+      }
+    });
+  }
+
   private loadCustomActionResources(actionNamespace: string, customCss: string, customResources: Array<WidgetResource>,
                                     actionDescriptor: WidgetAction): Observable<any> {
     const resourceTasks: Observable<string>[] = [];