From 03636cfb057e6e358f96880dafdc51192e46890c Mon Sep 17 00:00:00 2001
From: Ekaterina Chantsova <chantsova.ekaterina@gmail.com>
Date: Fri, 29 Nov 2024 18:01:01 +0200
Subject: [PATCH] Timewindow: added ability to enable/disable all interval
 options at once

---
 ...gation-options-config-panel.component.html |  2 +-
 .../grouping-interval-options.component.html  |  3 +++
 ...terval-options-config-panel.component.html | 12 +++++++++--
 ...terval-options-config-panel.component.scss |  3 +++
 ...interval-options-config-panel.component.ts | 20 +++++++++++++++++++
 .../assets/locale/locale.constant-en_US.json  |  2 +-
 6 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/ui-ngx/src/app/shared/components/time/aggregation/aggregation-options-config-panel.component.html b/ui-ngx/src/app/shared/components/time/aggregation/aggregation-options-config-panel.component.html
index ce7494b856..c626c8d615 100644
--- a/ui-ngx/src/app/shared/components/time/aggregation/aggregation-options-config-panel.component.html
+++ b/ui-ngx/src/app/shared/components/time/aggregation/aggregation-options-config-panel.component.html
@@ -24,7 +24,7 @@
     </div>
     <div class="tb-form-table-body">
       <mat-selection-list formControlName="allowedAggregationTypes">
-        <mat-list-option *ngFor="let type of allAggregationTypes" [value]="type" togglePosition="before">
+        <mat-list-option *ngFor="let type of allAggregationTypes" [value]="type" togglePosition="before" color="primary">
           {{ aggregationTypesTranslations.get(aggregationTypes[type]) | translate }}
         </mat-list-option>
       </mat-selection-list>
diff --git a/ui-ngx/src/app/shared/components/time/aggregation/grouping-interval-options.component.html b/ui-ngx/src/app/shared/components/time/aggregation/grouping-interval-options.component.html
index 6693faefd6..b93cd2cc96 100644
--- a/ui-ngx/src/app/shared/components/time/aggregation/grouping-interval-options.component.html
+++ b/ui-ngx/src/app/shared/components/time/aggregation/grouping-interval-options.component.html
@@ -20,6 +20,9 @@
                   [subscriptSizing]="subscriptSizing" [appearance]="appearance">
     <mat-select formControlName="aggIntervals" multiple
                 placeholder="{{ 'timewindow.all' | translate }}">
+      <mat-select-trigger *ngIf="timeintervalFormGroup.get('aggIntervals').value?.length === allIntervals.length">
+        {{ 'timewindow.all' | translate }}
+      </mat-select-trigger>
       <mat-option *ngFor="let interval of allIntervals" [value]="interval.value">
         {{ interval.name | translate:interval.translateParams }}
       </mat-option>
diff --git a/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.html b/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.html
index 416602d0f6..ef16bf181a 100644
--- a/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.html
+++ b/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.html
@@ -23,7 +23,15 @@
   </div>
   <div class="tb-form-table">
     <div class="tb-form-table-header">
-      <div class="tb-form-table-header-cell tb-interval">{{"timewindow.interval" | translate }}</div>
+      <div class="tb-form-table-header-cell tb-interval">
+        <mat-checkbox color="warn"
+                      (click)="$event.stopPropagation()"
+                      [indeterminate]="getIndeterminate()"
+                      (change)="enableDisableIntervals($event.checked)"
+                      [checked]="getChecked()">
+        </mat-checkbox>
+        {{ "timewindow.interval" | translate }}
+      </div>
       <ng-container *ngIf="aggregation">
         <div class="tb-form-table-header-cell tb-agg-interval-header">{{"timewindow.allowed-agg-intervals" | translate }}</div>
         <div class="tb-form-table-header-cell tb-agg-interval-header">{{"timewindow.default-agg-interval" | translate }}</div>
@@ -33,7 +41,7 @@
       <ng-container *ngFor="let interval of intervalsFormArray.controls; let i = index; trackBy: trackByElement">
         <div [formGroupName]="i" class="tb-form-table-row">
           <div class="tb-form-table-row-cell tb-interval">
-            <mat-checkbox formControlName="enabled">
+            <mat-checkbox formControlName="enabled" color="primary">
               <mat-label>{{ interval.get('name').value }}</mat-label>
             </mat-checkbox>
           </div>
diff --git a/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.scss b/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.scss
index bc0c5c4803..e5613d55fa 100644
--- a/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.scss
+++ b/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.scss
@@ -28,14 +28,17 @@
     .tb-form-table-header-cell, .tb-form-table-row-cell {
       &.tb-interval {
         flex: 1 1 30%;
+        width: 30%;
       }
       &.tb-agg-interval {
         flex: 1 1 70%;
+        width: 70%;
       }
     }
 
     .tb-form-table-header-cell.tb-agg-interval-header {
       flex: 1 1 35%;
+      width: 35%;
     }
 
     .tb-form-hint {
diff --git a/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.ts b/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.ts
index 507f04bd16..38e96d3f87 100644
--- a/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.ts
+++ b/ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.ts
@@ -208,4 +208,24 @@ export class IntervalOptionsConfigPanelComponent implements OnInit {
     return allQuickIntervals;
   }
 
+  getIndeterminate(): boolean {
+    const enabledIntervals = this.intervalsFormArray.value.filter(interval => interval.enabled);
+    return enabledIntervals.length !== 0 && enabledIntervals.length !== this.allIntervals.length;
+  }
+
+  enableDisableIntervals(allEnabled: boolean) {
+    const intervalControls = this.intervalsFormArray.controls;
+    for (const interval of intervalControls) {
+      interval.patchValue({
+        enabled: allEnabled
+      });
+    }
+    this.intervalOptionsConfigForm.markAsDirty();
+  }
+
+  getChecked(): boolean {
+    const intervals = this.intervalsFormArray.value;
+    return intervals.every(interval => interval.enabled);
+  }
+
 }
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index c68fe15c35..321841e5b8 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -4710,7 +4710,7 @@
         "edit-aggregation-functions-list-hint": "List of available options can be specified.",
         "allowed-aggregation-functions": "Allowed aggregation functions",
         "edit-intervals-list": "Edit intervals list",
-        "allowed-agg-intervals": "Allowed grouping intervals",
+        "allowed-agg-intervals": "Grouping intervals",
         "default-agg-interval": "Default grouping interval",
         "edit-intervals-list-hint": "List of available interval options can be specified.",
         "edit-grouping-intervals-list-hint": "It is possible to configure the grouping intervals list and default grouping interval.",