From 2c287d654abaf3c8692e96d92930edf727c8bb06 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 4 Sep 2024 23:06:42 -0700
Subject: [PATCH] Nice date picking

---
 ...ustom-fields-query-dropdown.component.html | 26 +++++++++++++++++++
 .../custom-fields-query-dropdown.component.ts | 17 ++++++++++--
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
index 404f094ab..cc69e912a 100644
--- a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
+++ b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
@@ -49,6 +49,32 @@
           <option value="false" i18n>False</option>
         </select>
       }
+      @case (CustomFieldQueryOperator.GreaterThanOrEqual) {
+        @if (getCustomFieldByID(query.field)?.data_type === CustomFieldDataType.Date) {
+          <input class="form-control" placeholder="yyyy-mm-dd"
+            [(ngModel)]="query.value"
+            ngbDatepicker
+            #d="ngbDatepicker" />
+          <button class="btn btn-sm btn-outline-secondary rounded-end" (click)="d.toggle()" type="button">
+            <i-bs name="calendar-event"></i-bs>
+          </button>
+        } @else {
+          <input class="w-25 form-control rounded-end" type="text" [(ngModel)]="query.value" [disabled]="disabled">
+        }
+      }
+      @case (CustomFieldQueryOperator.LessThanOrEqual) {
+        @if (getCustomFieldByID(query.field)?.data_type === CustomFieldDataType.Date) {
+          <input class="form-control" placeholder="yyyy-mm-dd"
+            [(ngModel)]="query.value"
+            ngbDatepicker
+            #d="ngbDatepicker" />
+          <button class="btn btn-sm btn-outline-secondary rounded-end" (click)="d.toggle()" type="button">
+            <i-bs name="calendar-event"></i-bs>
+          </button>
+        } @else {
+          <input class="w-25 form-control rounded-end" type="text" [(ngModel)]="query.value" [disabled]="disabled">
+        }
+      }
       @default {
         <input class="w-25 form-control rounded-end" type="text" [(ngModel)]="query.value" [disabled]="disabled">
       }
diff --git a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts
index f556ec339..855c8fce6 100644
--- a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts
+++ b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts
@@ -1,6 +1,13 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  Injectable,
+  Input,
+  Output,
+} from '@angular/core'
+import { NgbDateAdapter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap'
 import { Subject, first, takeUntil } from 'rxjs'
-import { CustomField } from 'src/app/data/custom-field'
+import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
 import {
   CustomFieldQueryAtom,
   CustomFieldQueryExpression,
@@ -13,6 +20,7 @@ import {
   CustomFieldQueryElement,
 } from 'src/app/data/custom-field-query'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
+import { ISODateAdapter } from 'src/app/utils/ngb-iso-date-adapter'
 
 export class CustomFieldQueriesModel {
   public queries: CustomFieldQueryElement[] = []
@@ -122,6 +130,7 @@ export class CustomFieldQueriesModel {
 export class CustomFieldsQueryDropdownComponent {
   public CustomFieldQueryComponentType = CustomFieldQueryElementType
   public CustomFieldQueryOperator = CustomFieldQueryOperator
+  public CustomFieldDataType = CustomFieldDataType
 
   @Input()
   title: string
@@ -211,6 +220,10 @@ export class CustomFieldsQueryDropdownComponent {
       })
   }
 
+  public getCustomFieldByID(id: number): CustomField {
+    return this.customFields.find((field) => field.id === id)
+  }
+
   public addAtom(expression: CustomFieldQueryExpression) {
     expression.addAtom()
   }