Add max day range and customizable labels in time range selector

apache · Nov 4, 2024 · b9e9c53 · b9e9c53
1 parent 43e4eb7
commit b9e9c53
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 16 deletions.
diff --git a/...streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html b/...streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html
@@ -30,7 +30,7 @@
             color="accent"
             [matMenuTriggerFor]="menu"
             #menuTrigger="matMenuTrigger"
-            matTooltip="Modify time"
+            [matTooltip]="labels.timeRangeSelectorTooltip"
             data-cy="time-selector-menu"
             (menuClosed)="menuTrigger.closeMenu()"
         >
@@ -40,15 +40,17 @@
                         timeString.startDate
                     }}</span
                     >&nbsp;
-                    <span class="formatted-time">{{
+                    <span class="formatted-time" *ngIf="enableTimeChange">{{
                         timeString.startTime
                     }}</span>
                 </div>
                 -
                 <div class="formatted-datetime">
                     <span class="formatted-date">{{ timeString.endDate }}</span
                     >&nbsp;
-                    <span class="formatted-time">{{ timeString.endTime }}</span>
+                    <span class="formatted-time" *ngIf="enableTimeChange">{{
+                        timeString.endTime
+                    }}</span>
                 </div>
             </div>
             <div class="formatted-datetime" *ngIf="timeStringMode === 'simple'">
@@ -63,8 +65,10 @@
             <sp-time-selector-menu
                 #timeSelectorMenu
                 [timeSettings]="timeSettings"
+                [labels]="labels"
                 (timeSettingsEmitter)="applyCurrentDateRange($event)"
                 [quickSelections]="quickSelections"
+                [enableTimeChange]="enableTimeChange"
                 class="w-100"
             >
             </sp-time-selector-menu>

diff --git a/...s/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.ts b/...s/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.ts
@@ -36,6 +36,7 @@ import {
 import { MatMenuTrigger } from '@angular/material/menu';
 import { TimeSelectionService } from '../../services/time-selection.service';
 import { TimeRangeSelectorMenuComponent } from './time-selector-menu/time-selector-menu.component';
+import { TimeSelectorLabel } from './time-selector.model';
 
 @Component({
     selector: 'sp-time-range-selector',
@@ -56,9 +57,21 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges {
     @Input()
     showTimeSelector = true;
 
+    @Input()
+    enableTimeChange = true;
+
     @Input()
     quickSelections: QuickTimeSelection[] = [];
 
+    @Input()
+    labels: TimeSelectorLabel = {
+        quickSelectionLabel: 'Quick Selection',
+        customLabel: 'Custom',
+        maxDayRangeErrorLabel:
+            'Maximum of ${this.maxDayRange} days can be displayed. Please select a smaller range.',
+        timeRangeSelectorTooltip: 'Modify time range',
+    };
+
     simpleTimeString: string = '';
     timeString: TimeString;
     timeStringMode: 'simple' | 'advanced' = 'simple';
@@ -69,6 +82,7 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges {
         this.timeSelectionService.initializeQuickTimeSelection(
             this.quickSelections,
         );
+        this.quickSelections = this.timeSelectionService.quickTimeSelections;
         this.createDateString();
     }
 

diff --git a/...time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.html b/...time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.html
@@ -26,7 +26,7 @@
             </mat-calendar>
         </mat-card>
 
-        <div *ngIf="showTimeSelection" fxLayout="column" class="mt-10 mr-5">
+        <div *ngIf="enableTimeChange" fxLayout="column" class="mt-10 mr-5">
             <div fxLayout="row" fxLayoutGap="10px">
                 <div fxFlex="30">
                     <span
@@ -73,9 +73,21 @@
             </div>
         </div>
     </div>
-    <div *ngIf="!showTimeSelection" fxLayout="row" class="mt-10 date-preview">
+    <div *ngIf="!enableTimeChange" fxLayout="row" class="mt-10 date-preview">
         {{ dateRangeString }}
     </div>
+    <div
+        fxLayout="row"
+        class="mt-5 max-date-range-error"
+        *ngIf="maxDateRangeError"
+    >
+        {{
+            labels.maxDayRangeErrorLabel.replace(
+                '${this.maxDayRange}',
+                maxDayRange.toString()
+            )
+        }}
+    </div>
     <div fxLayout="row" fxLayoutAlign="end center" class="mt-10">
         <ng-content> </ng-content>
         <button
@@ -84,6 +96,7 @@
             data-cy="apply-custom-time"
             (click)="saveSelection()"
             [disabled]="!dateSelectionComplete"
+            *ngIf="enableTimeChange"
         >
             Apply
         </button>

diff --git a/...time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.scss b/...time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.scss
@@ -20,3 +20,8 @@
     font-family: inherit;
     font-size: 11pt;
 }
+
+.max-date-range-error {
+    font-size: 9pt;
+    color: var(--color-warn);
+}
diff --git a/...r/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts b/...r/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts
@@ -26,6 +26,8 @@ import {
     DefaultMatCalendarRangeStrategy,
     MatRangeDateSelectionModel,
 } from '@angular/material/datepicker';
+import { differenceInDays } from 'date-fns';
+import { TimeSelectorLabel } from '../../time-selector.model';
 
 @Component({
     selector: 'sp-custom-time-range-selection',
@@ -35,8 +37,16 @@ import {
 export class CustomTimeRangeSelectionComponent implements OnInit {
     @Input() timeSettings: TimeSettings;
 
+    @Input() labels: TimeSelectorLabel;
+
+    @Input()
+    enableTimeChange = true;
+
     @Input()
-    showTimeSelection: boolean = false;
+    enableMaxDayRange: boolean = true;
+
+    @Input()
+    maxDayRange = 0;
 
     @Output() timeSettingsEmitter = new EventEmitter<TimeSettings>();
 
@@ -48,6 +58,8 @@ export class CustomTimeRangeSelectionComponent implements OnInit {
     dateSelectionComplete = false;
     dateRangeString: string;
 
+    maxDateRangeError = false;
+
     constructor(
         private readonly selectionModel: MatRangeDateSelectionModel<Date>,
         private readonly selectionStrategy: DefaultMatCalendarRangeStrategy<Date>,
@@ -87,14 +99,15 @@ export class CustomTimeRangeSelectionComponent implements OnInit {
     }
 
     formatDate(date: Date): string {
-        if (this.showTimeSelection === true) {
+        if (this.enableTimeChange === true) {
             return date?.toLocaleDateString() || '-';
         } else {
             return date?.toLocaleDateString() || ' ';
         }
     }
 
     onDateChange(selectedDate: Date): void {
+        this.maxDateRangeError = false;
         const newSelection = this.selectionStrategy.selectionFinished(
             selectedDate,
             this.selectionModel.selection,
@@ -104,12 +117,23 @@ export class CustomTimeRangeSelectionComponent implements OnInit {
             newSelection.start,
             newSelection.end,
         );
-        this.dateSelectionComplete = this.selectionModel.isComplete();
         this.updateDateStrings();
+        const daysDiff = differenceInDays(newSelection.end, newSelection.start);
+        if (this.selectionModel.isComplete()) {
+            if (this.maxDayRange === 0 || daysDiff + 1 <= this.maxDayRange) {
+                this.dateSelectionComplete = true;
+                if (!this.enableTimeChange) {
+                    this.saveSelection();
+                }
+            } else {
+                this.maxDateRangeError = true;
+                this.dateSelectionComplete = false;
+            }
+        }
     }
 
     saveSelection(): void {
-        if (this.showTimeSelection === true) {
+        if (this.enableTimeChange === true) {
             this.updateDateTime(
                 this.currentDateRange.start,
                 this.currentStartTime,

diff --git a/...-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.html b/...-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.html
@@ -16,11 +16,13 @@
   ~
   -->
 
-<div class="menu-content" (click)="$event.stopPropagation()">
+<div class="menu-content" (click)="$event.stopPropagation()" *ngIf="labels">
     <div fxLayout="column" fxLayoutGap="10px">
         <div fxLayout="row" fxFlex="100" fxLayoutGap="10px">
             <div fxLayout="column" fxFlex="50" fxLayoutGap="10px">
-                <div class="filter-header">Quick selection</div>
+                <div class="filter-header">
+                    {{ labels.quickSelectionLabel }}
+                </div>
                 <div fxLayout="column" fxLayoutGap="10px" fxFlex="100">
                     <div *ngFor="let quickSelection of quickSelections">
                         <span
@@ -39,11 +41,13 @@
                 </div>
             </div>
             <div fxLayout="column" fxFlex="50">
-                <div class="filter-header">Custom</div>
+                <div class="filter-header">{{ labels.customLabel }}</div>
                 <sp-custom-time-range-selection
                     #timeRangeSelection
                     [timeSettings]="timeSettings"
+                    [labels]="labels"
                     (timeSettingsEmitter)="timeSettingsEmitter.emit($event)"
+                    [enableTimeChange]="enableTimeChange"
                     class="w-100"
                 >
                     <ng-content> </ng-content>

diff --git a/...ed-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.ts b/...ed-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.ts
@@ -30,6 +30,7 @@ import {
 } from '@streampipes/platform-services';
 import { TimeSelectionService } from '../../../services/time-selection.service';
 import { CustomTimeRangeSelectionComponent } from './custom-time-range-selection/custom-time-range-selection.component';
+import { TimeSelectorLabel } from '../time-selector.model';
 
 @Component({
     selector: 'sp-time-selector-menu',
@@ -40,21 +41,25 @@ export class TimeRangeSelectorMenuComponent implements OnInit {
     @Input()
     timeSettings: TimeSettings;
 
+    @Input()
+    labels: TimeSelectorLabel;
+
+    @Input()
+    enableTimeChange = true;
+
     @Output()
     timeSettingsEmitter: EventEmitter<TimeSettings> =
         new EventEmitter<TimeSettings>();
 
     @Input()
-    quickSelections: QuickTimeSelection[] = [];
+    quickSelections: QuickTimeSelection[];
 
     @ViewChild('timeRangeSelection')
     timeRangeSelection: CustomTimeRangeSelectionComponent;
 
     constructor(private timeSelectionService: TimeSelectionService) {}
 
-    ngOnInit(): void {
-        this.quickSelections = this.timeSelectionService.quickTimeSelections;
-    }
+    ngOnInit(): void {}
 
     applyQuickSelection(quickSelection: QuickTimeSelection): void {
         const selectedDateRange =

diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector.model.ts b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector.model.ts
@@ -0,0 +1,6 @@
+export interface TimeSelectorLabel {
+    quickSelectionLabel: string;
+    customLabel: string;
+    maxDayRangeErrorLabel: string;
+    timeRangeSelectorTooltip: string;
+}