From e542267295c2818eb87f5f17b40deb16097b4f66 Mon Sep 17 00:00:00 2001
From: mpetrov <mpetrov@thingsboard.io>
Date: Wed, 12 Feb 2025 15:57:12 +0200
Subject: [PATCH] Added calculated field responsive styles

---
 ...lated-field-arguments-table.component.html | 18 ++---
 ...lated-field-arguments-table.component.scss |  6 ++
 ...lculated-field-debug-dialog.component.html |  4 +-
 ...lculated-field-debug-dialog.component.scss | 10 ++-
 .../calculated-field-dialog.component.html    |  2 +-
 ...ulated-field-test-arguments.component.html |  4 +-
 ...ulated-field-test-arguments.component.scss | 29 ++++++++
 ...lculated-field-test-arguments.component.ts |  1 +
 ...ed-field-script-test-dialog.component.html |  6 +-
 ...ated-field-script-test-dialog.component.ts | 73 ++++++++++++++-----
 .../components/event/event-table-config.ts    |  8 +-
 11 files changed, 120 insertions(+), 41 deletions(-)
 create mode 100644 ui-ngx/src/app/modules/home/components/calculated-fields/components/test-arguments/calculated-field-test-arguments.component.scss

diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.html
index 5ca80b8214..796fe7c138 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.html
@@ -18,19 +18,19 @@
 <div class="flex flex-col gap-3">
     <div class="tb-form-table">
         <div class="tb-form-table-header">
-            <div class="tb-form-table-header-cell w-1/6">{{ 'calculated-fields.argument-name' | translate }}</div>
-            <div class="tb-form-table-header-cell w-1/3">{{ 'calculated-fields.datasource' | translate }}</div>
-            <div class="tb-form-table-header-cell w-1/6">{{ 'common.type' | translate }}</div>
-            <div class="tb-form-table-header-cell w-1/6">{{ 'entity.key' | translate }}</div>
+            <div class="tb-form-table-header-cell w-1/6 lt-sm:!w-1/3 lt-md:w-1/4" tbTruncateWithTooltip>{{ 'calculated-fields.argument-name' | translate }}</div>
+            <div class="tb-form-table-header-cell w-1/3 lt-sm:hidden">{{ 'calculated-fields.datasource' | translate }}</div>
+            <div class="tb-form-table-header-cell w-1/6 lt-md:hidden">{{ 'common.type' | translate }}</div>
+            <div class="tb-form-table-header-cell w-1/6 lt-sm:w-1/3">{{ 'entity.key' | translate }}</div>
             <div class="tb-form-table-header-cell w-24 min-w-24"></div>
         </div>
         <div class="tb-form-table-body">
             @for (group of argumentsFormArray.controls; track group) {
                 <div [formGroup]="group" class="tb-form-table-row">
-                    <mat-form-field appearance="outline" class="tb-inline-field w-1/6" subscriptSizing="dynamic">
+                    <mat-form-field appearance="outline" class="tb-inline-field w-1/6 lt-sm:!w-1/3 lt-md:w-1/4" subscriptSizing="dynamic">
                         <input matInput formControlName="argumentName" placeholder="{{ 'action.set' | translate }}">
                     </mat-form-field>
-                    <section class="flex w-1/3 gap-2">
+                    <section class="flex w-1/3 gap-2 lt-sm:hidden">
                         @if (group.get('refEntityId')?.get('id')?.value) {
                             <ng-container [formGroup]="group.get('refEntityId')">
                                 <mat-form-field appearance="outline" class="tb-inline-field flex-1" subscriptSizing="dynamic">
@@ -63,7 +63,7 @@
                         }
                     </section>
                     <ng-container [formGroup]="group.get('refEntityKey')">
-                        <mat-form-field appearance="outline" class="tb-inline-field w-1/6" subscriptSizing="dynamic">
+                        <mat-form-field appearance="outline" class="tb-inline-field w-1/6 lt-md:hidden" subscriptSizing="dynamic">
                             @if (group.get('refEntityKey').get('type').value; as type) {
                                 <mat-select [value]="type" formControlName="type">
                                     <mat-option [value]="type">
@@ -72,9 +72,9 @@
                                 </mat-select>
                             }
                         </mat-form-field>
-                        <mat-chip-listbox formControlName="key" class="tb-inline-field w-1/6">
+                        <mat-chip-listbox formControlName="key" class="tb-inline-field w-1/6 lt-sm:w-1/3">
                             <mat-chip>
-                                <div tbTruncateWithTooltip class="max-w-25">
+                                <div tbTruncateWithTooltip>
                                     {{ group.get('refEntityKey').get('key').value }}
                                 </div>
                             </mat-chip>
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.scss b/ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.scss
index a0c90bba32..e6a48dee58 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.scss
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.scss
@@ -27,4 +27,10 @@
       font-size: 14px;
     }
   }
+
+  .mat-mdc-standard-chip {
+    .mdc-evolution-chip__cell--primary, .mdc-evolution-chip__action--primary, .mdc-evolution-chip__text-label {
+      overflow: hidden;
+    }
+  }
 }
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/debug-dialog/calculated-field-debug-dialog.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/components/debug-dialog/calculated-field-debug-dialog.component.html
index 2397162b05..7da70e180e 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/debug-dialog/calculated-field-debug-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/debug-dialog/calculated-field-debug-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="w-screen max-w-5xl">
+<div class="debug-dialog-container flex max-w-5xl flex-col lt-sm:h-full lt-sm:!w-full">
   <mat-toolbar color="primary">
     <h2>{{ 'calculated-fields.debugging' | translate}}</h2>
     <span class="flex-1"></span>
@@ -25,7 +25,7 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <div mat-dialog-content class="tb-form-panel stroked debug-dialog-content">
+  <div mat-dialog-content class="tb-form-panel stroked debug-dialog-content lt-sm:flex-1">
     <tb-event-table
       [tenantId]="data.tenantId"
       [debugEventTypes]="[debugEventTypes.DEBUG_CALCULATED_FIELD]"
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/debug-dialog/calculated-field-debug-dialog.component.scss b/ui-ngx/src/app/modules/home/components/calculated-fields/components/debug-dialog/calculated-field-debug-dialog.component.scss
index 0646180811..6dd119ed03 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/debug-dialog/calculated-field-debug-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/debug-dialog/calculated-field-debug-dialog.component.scss
@@ -14,8 +14,12 @@
  * limitations under the License.
  */
 :host {
-  .debug-dialog-content {
-    height: 65vh;
-    border-radius: 0;
+  .debug-dialog-container {
+    width: 80vw;
+
+    .debug-dialog-content {
+      height: 65vh;
+      border-radius: 0;
+    }
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html
index f50c552ec0..74b335b4f0 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div [formGroup]="fieldFormGroup" class="h-full w-screen min-w-80 max-w-4xl">
+<div [formGroup]="fieldFormGroup" class="max-w-4xl">
   <mat-toolbar color="primary">
     <h2>{{ 'entity.type-calculated-field' | translate}}</h2>
     <span class="flex-1"></span>
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-arguments/calculated-field-test-arguments.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-arguments/calculated-field-test-arguments.component.html
index 37f6ba4d27..03781f1ded 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-arguments/calculated-field-test-arguments.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-arguments/calculated-field-test-arguments.component.html
@@ -19,7 +19,7 @@
   <div>{{ 'calculated-fields.arguments' | translate }}</div>
   <div class="tb-form-table">
     <div class="tb-form-table-header">
-      <div class="tb-form-table-header-cell w-1/4">{{ 'calculated-fields.argument-name' | translate }}</div>
+      <div class="tb-form-table-header-cell w-1/4" tbTruncateWithTooltip>{{ 'calculated-fields.argument-name' | translate }}</div>
       <div class="tb-form-table-header-cell flex-1">{{ 'common.value' | translate }}</div>
     </div>
     <div class="tb-form-table-body">
@@ -28,7 +28,7 @@
           <mat-form-field appearance="outline" class="tb-inline-field w-1/4" subscriptSizing="dynamic">
             <input matInput formControlName="argumentName" placeholder="{{ 'action.set' | translate }}">
           </mat-form-field>
-          <tb-value-input class="flex-1" [required]="false" formControlName="value"/>
+          <tb-value-input class="flex-1 argument-value" [required]="false" formControlName="value"/>
         </div>
       }
     </div>
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-arguments/calculated-field-test-arguments.component.scss b/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-arguments/calculated-field-test-arguments.component.scss
new file mode 100644
index 0000000000..1b2c8670c1
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-arguments/calculated-field-test-arguments.component.scss
@@ -0,0 +1,29 @@
+/**
+ * Copyright © 2016-2024 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@use '../../../../../../../scss/constants' as constants;
+
+:host::ng-deep {
+  .tb-form-table-row {
+    .argument-value {
+      .tb-value-type.row {
+        @media #{constants.$mat-lt-sm} {
+          width: 100px;
+          min-width: 100px;
+        }
+      }
+    }
+  }
+}
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-arguments/calculated-field-test-arguments.component.ts b/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-arguments/calculated-field-test-arguments.component.ts
index d7a33d1a89..c8c9f4e778 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-arguments/calculated-field-test-arguments.component.ts
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-arguments/calculated-field-test-arguments.component.ts
@@ -30,6 +30,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 @Component({
   selector: 'tb-calculated-field-test-arguments',
   templateUrl: './calculated-field-test-arguments.component.html',
+  styleUrls: ['./calculated-field-test-arguments.component.scss'],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.html
index 03582b3066..3d3fe79e4b 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form class="test-dialog-container size-full" [formGroup]="calculatedFieldScriptTestFormGroup">
+<form #testScriptContainer class="test-dialog-container size-full" [formGroup]="calculatedFieldScriptTestFormGroup">
   <mat-toolbar class="flex justify-between" color="primary">
     <h2>{{ 'calculated-fields.test-script-function' | translate }} ({{ 'api-usage.tbel' | translate }})</h2>
     <button mat-icon-button
@@ -26,7 +26,7 @@
   </mat-toolbar>
   <div mat-dialog-content class="relative">
     <div class="tb-absolute-fill">
-      <div class="tb-fullscreen-panel flex size-full flex-row">
+      <div class="tb-fullscreen-panel flex size-full flex-row lt-md:flex-col">
         <div #leftPanel class="test-block-content overflow-hidden">
           <div class="relative size-full min-w-64">
             <div class="block-label-container left">
@@ -47,7 +47,7 @@
         </div>
         <div #rightPanel>
           <div #topRightPanel class="test-block-content">
-            <div class="relative flex size-full min-w-96 gap-2">
+            <div class="relative flex size-full min-w-80 gap-2">
               <div class="block-label-container right-top">
                 <span class="block-label">{{ 'calculated-fields.arguments' | translate }}</span>
               </div>
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.ts b/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.ts
index 94ffeeea52..a37c0fdd47 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.ts
@@ -51,6 +51,7 @@ export class CalculatedFieldScriptTestDialogComponent extends DialogComponent<Ca
   @ViewChild('rightPanel', {static: true}) rightPanelElmRef: ElementRef<HTMLElement>;
   @ViewChild('topRightPanel', {static: true}) topRightPanelElmRef: ElementRef<HTMLElement>;
   @ViewChild('bottomRightPanel', {static: true}) bottomRightPanelElmRef: ElementRef<HTMLElement>;
+  @ViewChild('testScriptContainer', {static: true}) testScriptContainer: ElementRef<HTMLElement>;
 
   @ViewChild('expressionContent', {static: true}) expressionContent: JsonContentComponent;
 
@@ -64,6 +65,9 @@ export class CalculatedFieldScriptTestDialogComponent extends DialogComponent<Ca
   readonly ScriptLanguage = ScriptLanguage;
   readonly functionArgs = Object.keys(this.data.arguments);
 
+  private testScriptResize: ResizeObserver;
+  private splitObjects: SplitObject[] = [];
+
   constructor(protected store: Store<AppState>,
               protected router: Router,
               @Inject(MAT_DIALOG_DATA) public data: CalculatedFieldTestScriptDialogData,
@@ -80,12 +84,7 @@ export class CalculatedFieldScriptTestDialogComponent extends DialogComponent<Ca
   }
 
   ngAfterViewInit(): void {
-    this.initSplitLayout(
-      this.leftPanelElmRef.nativeElement,
-      this.rightPanelElmRef.nativeElement,
-      this.topRightPanelElmRef.nativeElement,
-      this.bottomRightPanelElmRef.nativeElement
-    );
+    this.observeResize();
   }
 
   cancel(): void {
@@ -140,18 +139,58 @@ export class CalculatedFieldScriptTestDialogComponent extends DialogComponent<Ca
     return !this.calculatedFieldScriptTestFormGroup.get('expression').invalid;
   }
 
-  private initSplitLayout(leftPanel, rightPanel, topRightPanel, bottomRightPanel): void {
-    Split([leftPanel, rightPanel], {
-      sizes: [50, 50],
-      gutterSize: 8,
-      cursor: 'col-resize'
+  private observeResize(): void {
+    this.testScriptResize = new ResizeObserver(() => {
+      this.updateSizes();
     });
 
-    Split([topRightPanel, bottomRightPanel], {
-      sizes: [50, 50],
-      gutterSize: 8,
-      cursor: 'row-resize',
-      direction: 'vertical'
-    });
+    this.testScriptResize.observe(this.testScriptContainer.nativeElement);
+  }
+
+  private updateSizes(): void {
+    this.initSplitLayout(this.testScriptContainer.nativeElement.clientWidth <= 960);
+  }
+
+  private initSplitLayout(smallMode = false): void {
+    const [leftPanel, rightPanel, topRightPanel, bottomRightPanel] = [
+      this.leftPanelElmRef.nativeElement,
+      this.rightPanelElmRef.nativeElement,
+      this.topRightPanelElmRef.nativeElement,
+      this.bottomRightPanelElmRef.nativeElement
+    ] as unknown as string[];
+
+    this.splitObjects.forEach(obj => obj.destroy());
+    this.splitObjects = [];
+
+    if (smallMode) {
+      this.splitObjects.push(
+        Split([leftPanel, rightPanel], {
+          sizes: [33, 67],
+          gutterSize: 8,
+          cursor: 'row-resize',
+          direction: 'vertical'
+        }),
+        Split([topRightPanel, bottomRightPanel], {
+          sizes: [50, 50],
+          gutterSize: 8,
+          cursor: 'row-resize',
+          direction: 'vertical'
+        }),
+      );
+    } else {
+      this.splitObjects.push(
+        Split([leftPanel, rightPanel], {
+          sizes: [50, 50],
+          gutterSize: 8,
+          cursor: 'col-resize'
+        }),
+        Split([topRightPanel, bottomRightPanel], {
+          sizes: [50, 50],
+          gutterSize: 8,
+          cursor: 'row-resize',
+          direction: 'vertical'
+        })
+      );
+    }
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/event/event-table-config.ts b/ui-ngx/src/app/modules/home/components/event/event-table-config.ts
index 64917b23c0..d1aaf4e43c 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-table-config.ts
+++ b/ui-ngx/src/app/modules/home/components/event/event-table-config.ts
@@ -380,7 +380,7 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
             }
           ),
           new EntityTableColumn<Event>('messageId', 'event.message-id', '85px',
-            (entity) => `<span style="display: inline-block; width: 9ch">${entity.body.msgId?.substring(0, 8)}…</span>`,
+            (entity) => entity.body.msgId ? `<span style="display: inline-block; width: 9ch">${entity.body.msgId?.substring(0, 8)}…</span>` : '-',
             () => ({padding: '0 12px 0 0'}),
             false,
             () => ({padding: '0 12px 0 0'}),
@@ -394,13 +394,13 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
                 'font-size': '16px',
                 color: 'rgba(0,0,0,.87)'
               },
-              isEnabled: () => true,
-              onAction: ($event, entity) => entity.body.msgId,
+              isEnabled: (entity) => !!entity.body.msgId,
+              onAction: (_, entity) => entity.body.msgId,
               type: CellActionDescriptorType.COPY_BUTTON
             }
           ),
           new EntityTableColumn<Event>('messageType', 'event.message-type', '100px',
-            (entity) => entity.body.msgType,
+            (entity) => entity.body.msgType ?? '-',
             () => ({padding: '0 12px 0 0'}),
             false
           ),