UI: Preview for argument table

ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-argument-panel.component.html

@@ -188,13 +188,15 @@
             (click)="cancel()">
       {{ 'action.cancel' | translate }}
     </button>
-    <button mat-raised-button
-            color="primary"
-            type="button"
-            (click)="saveArgument()"
-            [disabled]="argumentFormGroup.invalid || !argumentFormGroup.dirty">
-      {{ buttonTitle | translate }}
-    </button>
+    @if (!readonly) {
+      <button mat-raised-button
+              color="primary"
+              type="button"
+              (click)="saveArgument()"
+              [disabled]="argumentFormGroup.invalid || !argumentFormGroup.dirty">
+        {{ buttonTitle | translate }}
+      </button>
+    }
   </div>
 </div>
 

ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-argument-panel.component.ts

@@ -88,6 +88,7 @@ export class CalculatedFieldArgumentPanelComponent implements OnInit, AfterViewI
     maxlength: 'calculated-fields.hint.argument-name-max-length',
     forbidden: 'calculated-fields.hint.argument-name-forbidden'
   };
+  @Input() readonly = false;
 
   @ViewChild('entityAutocomplete') entityAutocomplete: EntityAutocompleteComponent;
 
@@ -176,6 +177,11 @@ export class CalculatedFieldArgumentPanelComponent implements OnInit, AfterViewI
 
     this.argumentTypes = Object.values(ArgumentType)
       .filter(type => type !== ArgumentType.Rolling || this.isScript);
+
+    if (this.readonly) {
+      this.argumentType.disable({emitEvent: false});
+      this.argumentFormGroup.disable({emitEvent: false});
+    }
   }
 
   ngAfterViewInit(): void {

ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-arguments-table.component.html

@@ -93,22 +93,33 @@
         <mat-header-cell *matHeaderCellDef class="w-20 min-w-20"/>
         <mat-cell *matCellDef="let argument;">
           <div class="tb-form-table-row-cell-buttons min-w-20">
-            <button type="button"
-                    mat-icon-button
-                    #button
-                    [disabled]="disable"
-                    (click)="manageArgument($event, button, argument)"
-                    [matTooltip]="'action.edit' | translate"
-                    matTooltipPosition="above">
-              <mat-icon
-                [matBadgeHidden]="isEditButtonShowBadge(argument)"
-                matBadgeColor="warn"
-                matBadgeSize="small"
-                matBadge="*"
-              >
-                edit
-              </mat-icon>
-            </button>
+            @if (disable) {
+              <button type="button"
+                      mat-icon-button
+                      #previewButton
+                      (click)="manageArgument($event, previewButton, argument, true)"
+                      [matTooltip]="'calculated-fields.preview' | translate"
+                      matTooltipPosition="above">
+                <mat-icon>visibility</mat-icon>
+              </button>
+            } @else {
+              <button type="button"
+                      mat-icon-button
+                      #button
+                      [disabled]="disable"
+                      (click)="manageArgument($event, button, argument)"
+                      [matTooltip]="'action.edit' | translate"
+                      matTooltipPosition="above">
+                <mat-icon
+                  [matBadgeHidden]="isEditButtonShowBadge(argument)"
+                  matBadgeColor="warn"
+                  matBadgeSize="small"
+                  matBadge="*"
+                >
+                  edit
+                </mat-icon>
+              </button>
+            }
             <button type="button"
                     mat-icon-button
                     [disabled]="disable"

ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-arguments-table.component.ts

@@ -168,7 +168,7 @@ export class CalculatedFieldArgumentsTableComponent implements ControlValueAcces
     this.argumentsFormArray.markAsDirty();
   }
 
-  manageArgument($event: Event, matButton: MatButton, argument = {} as CalculatedFieldArgumentValue): void {
+  manageArgument($event: Event, matButton: MatButton, argument = {} as CalculatedFieldArgumentValue, readonly: boolean = false): void {
     $event?.stopPropagation();
     if (this.popoverComponent && !this.popoverComponent.tbHidden) {
       this.popoverComponent.hide();
@@ -190,6 +190,7 @@ export class CalculatedFieldArgumentsTableComponent implements ControlValueAcces
         ownerId: this.ownerId,
         watchKeyChange: this.watchKeyChange,
         usedArgumentNames: this.argumentsFormArray.value.map(({ argumentName }) => argumentName).filter(name => name !== argument.argumentName),
+        readonly
       };
       this.popoverComponent = this.popoverService.displayPopover({
         trigger,

ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-panel.component.html

@@ -260,12 +260,14 @@
             (click)="cancel()">
       {{ 'action.cancel' | translate }}
     </button>
-    <button mat-raised-button
-            color="primary"
-            type="button"
-            (click)="saveZone()"
-            [disabled]="geofencingFormGroup.invalid || !geofencingFormGroup.dirty">
-      {{ buttonTitle | translate }}
-    </button>
+    @if (!readonly) {
+      <button mat-raised-button
+              color="primary"
+              type="button"
+              (click)="saveZone()"
+              [disabled]="geofencingFormGroup.invalid || !geofencingFormGroup.dirty">
+        {{ buttonTitle | translate }}
+      </button>
+    }
   </div>
 </div>

ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-panel.component.ts

@@ -71,6 +71,7 @@ export class CalculatedFieldGeofencingZoneGroupsPanelComponent implements OnInit
   @Input() entityName: string;
   @Input() ownerId: EntityId;
   @Input() usedNames: string[];
+  @Input() readonly = false;
 
   @ViewChild('entityAutocomplete') entityAutocomplete: EntityAutocompleteComponent;
 
@@ -160,6 +161,10 @@ export class CalculatedFieldGeofencingZoneGroupsPanelComponent implements OnInit
 
     this.currentEntityFilter = getCalculatedFieldCurrentEntityFilter(this.entityName, this.entityId);
     this.updateEntityFilter(this.zone.refEntityId?.entityType);
+
+    if (this.readonly) {
+      this.geofencingFormGroup.disable({emitEvent: false});
+    }
   }
 
   fetchOptions(searchText: string): Observable<Array<string>> {

ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-table.component.html

@@ -96,20 +96,31 @@
         <mat-header-cell *matHeaderCellDef class="w-20 min-w-20"/>
         <mat-cell *matCellDef="let geofenceZone;">
           <div class="tb-form-table-row-cell-buttons min-w-20">
-            <button type="button"
-                    mat-icon-button
-                    #button
-                    (click)="manageZone($event, button, geofenceZone)"
-                    [matTooltip]="'action.edit' | translate"
-                    [disabled]="disable"
-                    matTooltipPosition="above">
-              <mat-icon [matBadgeHidden]="geofenceZone.refEntityId?.id !== NULL_UUID"
-                        matBadgeColor="warn"
-                        matBadgeSize="small"
-                        matBadge="*">
-                edit
-              </mat-icon>
-            </button>
+            @if (disable) {
+              <button type="button"
+                      mat-icon-button
+                      #previewButton
+                      (click)="manageZone($event, previewButton, geofenceZone, true)"
+                      [matTooltip]="'calculated-fields.preview' | translate"
+                      matTooltipPosition="above">
+                <mat-icon>visibility</mat-icon>
+              </button>
+            } @else {
+              <button type="button"
+                      mat-icon-button
+                      #button
+                      (click)="manageZone($event, button, geofenceZone)"
+                      [matTooltip]="'action.edit' | translate"
+                      [disabled]="disable"
+                      matTooltipPosition="above">
+                <mat-icon [matBadgeHidden]="geofenceZone.refEntityId?.id !== NULL_UUID"
+                          matBadgeColor="warn"
+                          matBadgeSize="small"
+                          matBadge="*">
+                  edit
+                </mat-icon>
+              </button>
+            }
             <button type="button"
                     mat-icon-button
                     (click)="onDelete($event, geofenceZone)"

ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-table.component.ts

@@ -147,7 +147,7 @@ export class CalculatedFieldGeofencingZoneGroupsTableComponent implements Contro
     this.zoneGroupsFormArray.markAsDirty();
   }
 
-  manageZone($event: Event, matButton: MatButton, zone = {} as CalculatedFieldGeofencingValue): void {
+  manageZone($event: Event, matButton: MatButton, zone = {} as CalculatedFieldGeofencingValue, readonly: boolean = false): void {
     $event?.stopPropagation();
     if (this.popoverComponent && !this.popoverComponent.tbHidden) {
       this.popoverComponent.hide();
@@ -167,6 +167,7 @@ export class CalculatedFieldGeofencingZoneGroupsTableComponent implements Contro
         entityName: this.entityName,
         ownerId: this.ownerId,
         usedNames: this.zoneGroupsFormArray.value.map(({ name }) => name).filter(name => name !== zone.name),
+        readonly
       };
       this.popoverComponent = this.popoverService.displayPopover({
         trigger,

ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-panel.component.html

@@ -110,7 +110,7 @@
                       matTooltip="{{ 'calculated-fields.test-script-function' | translate }}"
                       matTooltipPosition="above"
                       class="tb-mat-32"
-                      [disabled]="!arguments.length"
+                      [disabled]="!arguments.length || readonly"
                       (click)="onTestScript('filter')">
                 <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
               </button>
@@ -119,7 +119,7 @@
               <button mat-button mat-raised-button color="primary"
                       type="button"
                       (click)="onTestScript('filter')"
-                      [disabled]="!arguments.length">
+                      [disabled]="!arguments.length || readonly">
                 {{ 'calculated-fields.test-script-function' | translate }}
               </button>
             </div>
@@ -213,12 +213,14 @@
             (click)="cancel()">
       {{ 'action.cancel' | translate }}
     </button>
-    <button mat-raised-button
-            color="primary"
-            type="button"
-            (click)="saveMetric()"
-            [disabled]="metricForm.invalid || !metricForm.dirty">
-      {{ buttonTitle | translate }}
-    </button>
+    @if (!readonly) {
+      <button mat-raised-button
+              color="primary"
+              type="button"
+              (click)="saveMetric()"
+              [disabled]="metricForm.invalid || !metricForm.dirty">
+        {{ buttonTitle | translate }}
+      </button>
+    }
   </div>
 </div>

ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-panel.component.ts

@@ -42,7 +42,7 @@ interface CalculatedFieldAggMetricValuePanel extends CalculatedFieldAggMetricVal
 @Component({
   selector: 'tb-calculated-field-metrics-panel',
   templateUrl: './calculated-field-metrics-panel.component.html',
-  styleUrl: '../common/calculated-field-panel.scss',
+  styleUrls: ['../common/calculated-field-panel.scss', '../../calculated-field.component.scss'],
 })
 export class CalculatedFieldMetricsPanelComponent implements OnInit {
 
@@ -54,6 +54,7 @@ export class CalculatedFieldMetricsPanelComponent implements OnInit {
   @Input() editorCompleter: TbEditorCompleter;
   @Input() highlightRules: AceHighlightRules;
   @Input({required: true}) testScript: (expression?: string) => Observable<string>;
+  @Input() readonly = false;
 
   metricDataApplied = output<CalculatedFieldAggMetricValue>();
   filterExpanded = false;
@@ -107,6 +108,10 @@ export class CalculatedFieldMetricsPanelComponent implements OnInit {
     if (this.simpleMode) {
       this.AggFunctions = this.AggFunctions.filter(aggFunc => aggFunc !== AggFunction.COUNT_UNIQUE);
     }
+
+    if (this.readonly) {
+      this.metricForm.disable({emitEvent: false});
+    }
   }
 
   saveMetric(): void {

ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-table.component.html

@@ -93,15 +93,26 @@
         <mat-header-cell *matHeaderCellDef class="w-20 min-w-20"/>
         <mat-cell *matCellDef="let metric;">
           <div class="tb-form-table-row-cell-buttons min-w-20">
-            <button type="button"
-                    mat-icon-button
-                    #button
-                    (click)="manageMetrics($event, button, metric)"
-                    [disabled]="disable"
-                    [matTooltip]="'action.edit' | translate"
-                    matTooltipPosition="above">
-              <mat-icon>edit</mat-icon>
-            </button>
+            @if (disable) {
+              <button type="button"
+                      mat-icon-button
+                      #previewButton
+                      (click)="manageMetrics($event, previewButton, metric, true)"
+                      [matTooltip]="'calculated-fields.preview' | translate"
+                      matTooltipPosition="above">
+                <mat-icon>visibility</mat-icon>
+              </button>
+            } @else {
+              <button type="button"
+                      mat-icon-button
+                      #button
+                      (click)="manageMetrics($event, button, metric)"
+                      [disabled]="disable"
+                      [matTooltip]="'action.edit' | translate"
+                      matTooltipPosition="above">
+                <mat-icon>edit</mat-icon>
+              </button>
+            }
             <button type="button"
                     mat-icon-button
                     (click)="onDelete($event, metric)"

ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-table.component.ts

@@ -153,7 +153,7 @@ export class CalculatedFieldMetricsTableComponent implements OnInit, ControlValu
     this.metricsFormArray.markAsDirty();
   }
 
-  manageMetrics($event: Event, matButton: MatButton, metric = {} as CalculatedFieldAggMetricValue): void {
+  manageMetrics($event: Event, matButton: MatButton, metric = {} as CalculatedFieldAggMetricValue, readonly: boolean = false): void {
     $event?.stopPropagation();
     if (this.popoverComponent && !this.popoverComponent.tbHidden) {
       this.popoverComponent.hide();
@@ -173,7 +173,8 @@ export class CalculatedFieldMetricsTableComponent implements OnInit, ControlValu
         editorCompleter: this.editorCompleter,
         highlightRules: this.highlightRules,
         simpleMode: this.simpleMode,
-        testScript: this.testScript
+        testScript: this.testScript,
+        readonly
       };
       this.popoverComponent = this.popoverService.displayPopover({
         trigger,

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -1116,6 +1116,7 @@
             "time-series-data-aggregation": "Time series data aggregation",
             "time-series-data-aggregation-hint": "Aggregation of historical data from a current entity."
         },
+        "preview": "Preview",
         "arguments": "Arguments",
         "decimals-by-default": "Decimals by default",
         "debugging": "Calculated field debugging",