Merge pull request #13057 from vvlladd28/bug/map/switch-datasource-type-disable

Fix datasource is disabled if key is empty in map settings

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/additional-map-data-source-row.component.ts

@@ -33,7 +33,7 @@ import {
   Validators
 } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { AdditionalMapDataSourceSettings } from '@shared/models/widget/maps/map.models';
+import { AdditionalMapDataSourceSettings, updateDataKeyToNewDsType } from '@shared/models/widget/maps/map.models';
 import { DataKey, DatasourceType, datasourceTypeTranslationMap, widgetType } from '@shared/models/widget.models';
 import { EntityType } from '@shared/models/entity-type.models';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@@ -156,7 +156,7 @@ export class AdditionalMapDataSourceRowComponent implements ControlValueAccessor
     const dataKeys: DataKey[] = this.dataSourceFormGroup.get('dataKeys').value;
     if (dataKeys?.length) {
       for (const key of dataKeys) {
-        updateModel = this.updateDataKeyToNewDsType(key, newDsType) || updateModel;
+        updateModel = updateDataKeyToNewDsType(key, newDsType) || updateModel;
       }
       if (updateModel) {
         this.dataSourceFormGroup.get('dataKeys').patchValue(dataKeys, {emitEvent: false});
@@ -168,21 +168,6 @@ export class AdditionalMapDataSourceRowComponent implements ControlValueAccessor
     }
   }
 
-  private updateDataKeyToNewDsType(dataKey: DataKey, newDsType: DatasourceType): boolean {
-    if (newDsType === DatasourceType.function) {
-      if (dataKey.type !== DataKeyType.function) {
-        dataKey.type = DataKeyType.function;
-        return true;
-      }
-    } else {
-      if (dataKey.type === DataKeyType.function) {
-        dataKey.type = DataKeyType.attribute;
-        return true;
-      }
-    }
-    return false;
-  }
-
   private updateValidators() {
     const dsType: DatasourceType = this.dataSourceFormGroup.get('dsType').value;
     if (dsType === DatasourceType.function) {

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.ts

@@ -31,7 +31,8 @@ import {
   pathDecoratorSymbolTranslationMap,
   PolygonsDataLayerSettings,
   ShapeDataLayerSettings,
-  TripsDataLayerSettings
+  TripsDataLayerSettings,
+  updateDataKeyToNewDsType
 } from '@shared/models/widget/maps/map.models';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -294,23 +295,23 @@ export class MapDataLayerDialogComponent extends DialogComponent<MapDataLayerDia
       case 'trips':
       case 'markers':
         const xKey: DataKey = this.dataLayerFormGroup.get('xKey').value;
-        if (this.updateDataKeyToNewDsType(xKey, newDsType, this.dataLayerType === 'trips')) {
+        if (updateDataKeyToNewDsType(xKey, newDsType, this.dataLayerType === 'trips')) {
           this.dataLayerFormGroup.get('xKey').patchValue(xKey, {emitEvent: false});
         }
         const yKey: DataKey = this.dataLayerFormGroup.get('yKey').value;
-        if (this.updateDataKeyToNewDsType(yKey, newDsType, this.dataLayerType === 'trips')) {
+        if (updateDataKeyToNewDsType(yKey, newDsType, this.dataLayerType === 'trips')) {
           this.dataLayerFormGroup.get('yKey').patchValue(yKey, {emitEvent: false});
         }
         break;
       case 'polygons':
         const polygonKey: DataKey = this.dataLayerFormGroup.get('polygonKey').value;
-        if (this.updateDataKeyToNewDsType(polygonKey, newDsType)) {
+        if (updateDataKeyToNewDsType(polygonKey, newDsType)) {
           this.dataLayerFormGroup.get('polygonKey').patchValue(polygonKey, {emitEvent: false});
         }
         break;
       case 'circles':
         const circleKey: DataKey = this.dataLayerFormGroup.get('circleKey').value;
-        if (this.updateDataKeyToNewDsType(circleKey, newDsType)) {
+        if (updateDataKeyToNewDsType(circleKey, newDsType)) {
           this.dataLayerFormGroup.get('circleKey').patchValue(circleKey, {emitEvent: false});
         }
         break;
@@ -319,7 +320,7 @@ export class MapDataLayerDialogComponent extends DialogComponent<MapDataLayerDia
     if (additionalDataKeys?.length) {
       let updated = false;
       for (const key of additionalDataKeys) {
-        updated = this.updateDataKeyToNewDsType(key, newDsType) || updated;
+        updated = updateDataKeyToNewDsType(key, newDsType) || updated;
       }
       if (updated) {
         this.dataLayerFormGroup.get('additionalDataKeys').patchValue(additionalDataKeys, {emitEvent: false});
@@ -328,21 +329,6 @@ export class MapDataLayerDialogComponent extends DialogComponent<MapDataLayerDia
     this.updateValidators();
   }
 
-  private updateDataKeyToNewDsType(dataKey: DataKey, newDsType: DatasourceType, timeSeries = false): boolean {
-    if (newDsType === DatasourceType.function) {
-      if (dataKey.type !== DataKeyType.function) {
-        dataKey.type = DataKeyType.function;
-        return true;
-      }
-    } else {
-      if (dataKey.type === DataKeyType.function) {
-        dataKey.type = timeSeries ? DataKeyType.timeseries : DataKeyType.attribute;
-        return true;
-      }
-    }
-    return false;
-  }
-
   private updateValidators() {
     const dsType: DatasourceType = this.dataLayerFormGroup.get('dsType').value;
     if (dsType === DatasourceType.function) {

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-row.component.ts

@@ -41,7 +41,8 @@ import {
   MapType,
   MarkersDataLayerSettings,
   PolygonsDataLayerSettings,
-  TripsDataLayerSettings
+  TripsDataLayerSettings,
+  updateDataKeyToNewDsType
 } from '@shared/models/widget/maps/map.models';
 import { DataKey, DatasourceType, datasourceTypeTranslationMap, widgetType } from '@shared/models/widget.models';
 import { EntityType } from '@shared/models/entity-type.models';
@@ -271,26 +272,26 @@ export class MapDataLayerRowComponent implements ControlValueAccessor, OnInit {
       case 'trips':
       case 'markers':
         const xKey: DataKey = this.dataLayerFormGroup.get('xKey').value;
-        if (this.updateDataKeyToNewDsType(xKey, newDsType, this.dataLayerType === 'trips')) {
+        if (updateDataKeyToNewDsType(xKey, newDsType, this.dataLayerType === 'trips')) {
           this.dataLayerFormGroup.get('xKey').patchValue(xKey, {emitEvent: false});
           updateModel = true;
         }
         const yKey: DataKey = this.dataLayerFormGroup.get('yKey').value;
-        if (this.updateDataKeyToNewDsType(yKey, newDsType, this.dataLayerType === 'trips')) {
+        if (updateDataKeyToNewDsType(yKey, newDsType, this.dataLayerType === 'trips')) {
           this.dataLayerFormGroup.get('yKey').patchValue(yKey, {emitEvent: false});
           updateModel = true;
         }
         break;
       case 'polygons':
         const polygonKey: DataKey = this.dataLayerFormGroup.get('polygonKey').value;
-        if (this.updateDataKeyToNewDsType(polygonKey, newDsType)) {
+        if (updateDataKeyToNewDsType(polygonKey, newDsType)) {
           this.dataLayerFormGroup.get('polygonKey').patchValue(polygonKey, {emitEvent: false});
           updateModel = true;
         }
         break;
       case 'circles':
         const circleKey: DataKey = this.dataLayerFormGroup.get('circleKey').value;
-        if (this.updateDataKeyToNewDsType(circleKey, newDsType)) {
+        if (updateDataKeyToNewDsType(circleKey, newDsType)) {
           this.dataLayerFormGroup.get('circleKey').patchValue(circleKey, {emitEvent: false});
           updateModel = true;
         }
@@ -302,21 +303,6 @@ export class MapDataLayerRowComponent implements ControlValueAccessor, OnInit {
     }
   }
 
-  private updateDataKeyToNewDsType(dataKey: DataKey, newDsType: DatasourceType, timeSeries = false): boolean {
-    if (newDsType === DatasourceType.function) {
-      if (dataKey.type !== DataKeyType.function) {
-        dataKey.type = DataKeyType.function;
-        return true;
-      }
-    } else {
-      if (dataKey.type === DataKeyType.function) {
-        dataKey.type = timeSeries ? DataKeyType.timeseries : DataKeyType.attribute;
-        return true;
-      }
-    }
-    return false;
-  }
-
   private updateValidators() {
     const dsType: DatasourceType = this.dataLayerFormGroup.get('dsType').value;
     if (dsType === DatasourceType.function) {

ui-ngx/src/app/shared/models/widget/maps/map.models.ts

@@ -1182,6 +1182,21 @@ export const parseCenterPosition = (position: string | [number, number]): [numbe
   return [0, 0];
 }
 
+export const updateDataKeyToNewDsType = (dataKey: DataKey | null, newDsType: DatasourceType, timeSeries = false): boolean => {
+  if (newDsType === DatasourceType.function) {
+    if (dataKey && dataKey.type !== DataKeyType.function) {
+      dataKey.type = DataKeyType.function;
+      return true;
+    }
+  } else {
+    if (dataKey?.type === DataKeyType.function) {
+      dataKey.type = timeSeries ? DataKeyType.timeseries : DataKeyType.attribute;
+      return true;
+    }
+  }
+  return false;
+}
+
 export const mergeMapDatasources = (target: TbMapDatasource[], source: TbMapDatasource[]): TbMapDatasource[] => {
   const appendDatasources: TbMapDatasource[] = [];
   for (const sourceDs of source) {