Merge pull request #7 from extrawest/fix/time-range-filter-toggle

Made it possible to select whether date-time-input should include time

projects/extra-clarity/datagrid-filters/src/time-range-filter/components/date-time-group/date-time-group.component.html

@@ -2,13 +2,15 @@
   #inputStart
   label="From"
   [disabled]="disabled"
+  [withTime]="withTime"
   [(value)]="visualRange.start"
 />
 
 <ec-date-time-input
   #inputEnd
   label="To"
   [disabled]="disabled"
+  [withTime]="withTime"
   [(value)]="visualRange.end"
 />
 

projects/extra-clarity/datagrid-filters/src/time-range-filter/components/date-time-group/date-time-group.component.ts

@@ -35,6 +35,9 @@ export class EcDateTimeGroupComponent implements OnChanges {
   @Input()
   public value?: EcCustomTimeRange;
 
+  @Input()
+  public withTime: boolean = true;
+
   @Output()
   public apply: EventEmitter<EcCustomTimeRange> = new EventEmitter();
 

projects/extra-clarity/datagrid-filters/src/time-range-filter/components/date-time-input/date-time-input.component.html

@@ -17,7 +17,7 @@
   </label>
 
   <input
-    type="datetime-local"
+    [type]="inputType"
     clrInput
     #datetimeInput
     class="timestamp-input"

projects/extra-clarity/datagrid-filters/src/time-range-filter/components/date-time-input/date-time-input.component.ts

@@ -25,13 +25,11 @@ import { datetimeInputValidator } from './date-time-input.validators';
   styleUrls: ['./date-time-input.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [
-    CommonModule,
-    ReactiveFormsModule,
-    ClrInputModule,
-  ],
+  imports: [CommonModule, ReactiveFormsModule, ClrInputModule],
 })
-export class EcDateTimeInputComponent implements AfterViewInit, OnChanges, OnDestroy {
+export class EcDateTimeInputComponent
+  implements AfterViewInit, OnChanges, OnDestroy
+{
   @Input()
   public disabled: boolean = false;
 
@@ -41,6 +39,9 @@ export class EcDateTimeInputComponent implements AfterViewInit, OnChanges, OnDes
   @Input()
   public value: number | null = null;
 
+  @Input()
+  public withTime: boolean = true;
+
   @Output()
   public valueChange: EventEmitter<number | null> = new EventEmitter();
 
@@ -50,10 +51,18 @@ export class EcDateTimeInputComponent implements AfterViewInit, OnChanges, OnDes
   @ViewChild(ClrInput, { static: true })
   protected clrInputRef?: ClrInput;
 
-  public readonly formControl = new FormControl<string>('', { nonNullable: true });
+  public inputType = this.inputDateType;
+
+  public readonly formControl = new FormControl<string>('', {
+    nonNullable: true,
+  });
 
   private readonly destroy$ = new Subject<void>();
 
+  get inputDateType(): string {
+    return this.withTime ? 'datetime-local' : 'date';
+  }
+
   constructor(private changeDetectorRef: ChangeDetectorRef) {}
 
   ngAfterViewInit(): void {
@@ -79,6 +88,10 @@ export class EcDateTimeInputComponent implements AfterViewInit, OnChanges, OnDes
     if (changes['value'] && this.value !== undefined) {
       this.updateFormValue(this.value);
     }
+
+    if (changes['withTime']) {
+      this.inputType = this.withTime ? 'datetime-local' : 'date';
+    }
   }
 
   ngOnDestroy(): void {
@@ -125,7 +138,9 @@ export class EcDateTimeInputComponent implements AfterViewInit, OnChanges, OnDes
     const hh = date.getHours().toString().padStart(2, '0');
     const mm = date.getMinutes().toString().padStart(2, '0');
 
-    return `${YYYY}-${MM}-${DD}T${hh}:${mm}`;
+    return this.withTime
+      ? `${YYYY}-${MM}-${DD}T${hh}:${mm}`
+      : `${YYYY}-${MM}-${DD}`;
   }
 
   private convertFromFormValue(timestampAsString: string): number | null {

projects/extra-clarity/datagrid-filters/src/time-range-filter/time-range-filter.component.html

@@ -34,6 +34,7 @@
       [value]="visualCustomRange"
       [disabled]="radioControl.value !== null"
       [forceEnabledButtons]="radioControl.value !== filterValue.preset"
+      [withTime]="withTime"
       (apply)="onCustomRangeApply($event)"
       (discard)="onCustomRangeDiscard()"
     />

projects/extra-clarity/datagrid-filters/src/time-range-filter/time-range-filter.component.ts

@@ -132,6 +132,10 @@ export class EcTimeRangeFilterComponent<T extends object = {}>
   @Input()
   public withCustomRange: boolean = false;
 
+  /** Whether the input field should allow selecting a date-time range. */
+  @Input()
+  public withTime: boolean = true;
+
   /**
    * Emits the filter's state object on every change of the internal filter value.
    * The state object contains the name of a `property` to filter by, defined by the `[propertyKey]` input,

projects/extra-clarity/time-range-filter-toggle/src/time-range-filter-toggle.component.html

@@ -23,6 +23,7 @@
     [closeOnChange]="closeOnChange"
     [widthPx]="widthPx"
     [value]="value"
+    [withTime]="withTime"
     (filterValueChanged)="onTimeRangeChange($event)"
   />
 </ec-popover-toggle>

projects/extra-clarity/time-range-filter-toggle/src/time-range-filter-toggle.component.ts

@@ -65,6 +65,9 @@ export class EcTimeRangeFilterToggleComponent implements EcResettableFilter {
   @Input()
   public withCustomRange: boolean = false;
 
+  @Input()
+  public withTime: boolean = true;
+
   @Input()
   public closeOnChange: boolean = false;