From bf54423e70c23c0c0e7e82395beaf2104e3cb34c Mon Sep 17 00:00:00 2001
From: Bohdan-Horodyskyi-ew <bohdan.horodyskyi@extrawest.com>
Date: Mon, 4 Mar 2024 15:43:22 +0200
Subject: [PATCH] Made it possible to select whether date-time-input should
 include time or just date

---
 .../date-time-group.component.html            |  2 ++
 .../date-time-group.component.ts              |  3 ++
 .../date-time-input.component.html            |  2 +-
 .../date-time-input.component.ts              | 31 ++++++++++++++-----
 .../time-range-filter.component.html          |  1 +
 .../time-range-filter.component.ts            |  4 +++
 .../time-range-filter-toggle.component.html   |  1 +
 .../src/time-range-filter-toggle.component.ts |  3 ++
 8 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/projects/extra-clarity/datagrid-filters/src/time-range-filter/components/date-time-group/date-time-group.component.html b/projects/extra-clarity/datagrid-filters/src/time-range-filter/components/date-time-group/date-time-group.component.html
index bcfb658..58c4733 100644
--- a/projects/extra-clarity/datagrid-filters/src/time-range-filter/components/date-time-group/date-time-group.component.html
+++ b/projects/extra-clarity/datagrid-filters/src/time-range-filter/components/date-time-group/date-time-group.component.html
@@ -2,6 +2,7 @@
   #inputStart
   label="From"
   [disabled]="disabled"
+  [withTime]="withTime"
   [(value)]="visualRange.start"
 />
 
@@ -9,6 +10,7 @@
   #inputEnd
   label="To"
   [disabled]="disabled"
+  [withTime]="withTime"
   [(value)]="visualRange.end"
 />
 
diff --git a/projects/extra-clarity/datagrid-filters/src/time-range-filter/components/date-time-group/date-time-group.component.ts b/projects/extra-clarity/datagrid-filters/src/time-range-filter/components/date-time-group/date-time-group.component.ts
index 4f4ea5d..c73dfec 100644
--- a/projects/extra-clarity/datagrid-filters/src/time-range-filter/components/date-time-group/date-time-group.component.ts
+++ b/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();
 
diff --git a/projects/extra-clarity/datagrid-filters/src/time-range-filter/components/date-time-input/date-time-input.component.html b/projects/extra-clarity/datagrid-filters/src/time-range-filter/components/date-time-input/date-time-input.component.html
index 6fe1123..92b5941 100644
--- a/projects/extra-clarity/datagrid-filters/src/time-range-filter/components/date-time-input/date-time-input.component.html
+++ b/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"
diff --git a/projects/extra-clarity/datagrid-filters/src/time-range-filter/components/date-time-input/date-time-input.component.ts b/projects/extra-clarity/datagrid-filters/src/time-range-filter/components/date-time-input/date-time-input.component.ts
index f19f962..0038a90 100644
--- a/projects/extra-clarity/datagrid-filters/src/time-range-filter/components/date-time-input/date-time-input.component.ts
+++ b/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 {
diff --git a/projects/extra-clarity/datagrid-filters/src/time-range-filter/time-range-filter.component.html b/projects/extra-clarity/datagrid-filters/src/time-range-filter/time-range-filter.component.html
index 02b96bd..0984b9f 100644
--- a/projects/extra-clarity/datagrid-filters/src/time-range-filter/time-range-filter.component.html
+++ b/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()"
     />
diff --git a/projects/extra-clarity/datagrid-filters/src/time-range-filter/time-range-filter.component.ts b/projects/extra-clarity/datagrid-filters/src/time-range-filter/time-range-filter.component.ts
index 3b8a081..b102c7e 100644
--- a/projects/extra-clarity/datagrid-filters/src/time-range-filter/time-range-filter.component.ts
+++ b/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,
diff --git a/projects/extra-clarity/time-range-filter-toggle/src/time-range-filter-toggle.component.html b/projects/extra-clarity/time-range-filter-toggle/src/time-range-filter-toggle.component.html
index 1bd4201..9049fe6 100644
--- a/projects/extra-clarity/time-range-filter-toggle/src/time-range-filter-toggle.component.html
+++ b/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>
diff --git a/projects/extra-clarity/time-range-filter-toggle/src/time-range-filter-toggle.component.ts b/projects/extra-clarity/time-range-filter-toggle/src/time-range-filter-toggle.component.ts
index deb2042..e98fc8a 100644
--- a/projects/extra-clarity/time-range-filter-toggle/src/time-range-filter-toggle.component.ts
+++ b/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;