Nice date picking

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">
       }

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()
   }