Use ng select

src-ui/messages.xlf

@@ -1732,7 +1732,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">11</context>
+          <context context-type="linenumber">10</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.ts</context>
@@ -3344,19 +3344,19 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">50</context>
+          <context context-type="linenumber">56</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">76</context>
+          <context context-type="linenumber">82</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">126</context>
+          <context context-type="linenumber">137</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">152</context>
+          <context context-type="linenumber">163</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/input/date/date.component.html</context>
@@ -3371,19 +3371,19 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">51</context>
+          <context context-type="linenumber">57</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">77</context>
+          <context context-type="linenumber">83</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">127</context>
+          <context context-type="linenumber">138</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">153</context>
+          <context context-type="linenumber">164</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/input/date/date.component.html</context>
@@ -3502,44 +3502,55 @@
           <context context-type="linenumber">168</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="6312759212949884929" datatype="html">
+        <source>Relative dates</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
+          <context context-type="linenumber">27</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
+          <context context-type="linenumber">110</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="6052766076365105714" datatype="html">
         <source>now</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">25</context>
+          <context context-type="linenumber">32</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">101</context>
+          <context context-type="linenumber">114</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5203279511751768967" datatype="html">
         <source>From</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">42</context>
+          <context context-type="linenumber">48</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">118</context>
+          <context context-type="linenumber">129</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1640609344969975994" datatype="html">
         <source>To</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">68</context>
+          <context context-type="linenumber">74</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">144</context>
+          <context context-type="linenumber">155</context>
         </context-group>
       </trans-unit>
       <trans-unit id="231679111972850796" datatype="html">
         <source>Added</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
-          <context context-type="linenumber">86</context>
+          <context context-type="linenumber">92</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.ts</context>
@@ -3562,28 +3573,28 @@
         <source>Within 1 week</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.ts</context>
-          <context context-type="linenumber">67</context>
+          <context context-type="linenumber">70</context>
         </context-group>
       </trans-unit>
       <trans-unit id="123064370501514576" datatype="html">
         <source>Within 1 month</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.ts</context>
-          <context context-type="linenumber">72</context>
+          <context context-type="linenumber">75</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1027161426440526546" datatype="html">
         <source>Within 3 months</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.ts</context>
-          <context context-type="linenumber">77</context>
+          <context context-type="linenumber">80</context>
         </context-group>
       </trans-unit>
       <trans-unit id="226779700214642230" datatype="html">
         <source>Within 1 year</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.ts</context>
-          <context context-type="linenumber">82</context>
+          <context context-type="linenumber">85</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8743659855412792665" datatype="html">

src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.html

@@ -7,27 +7,33 @@
   <div class="dropdown-menu date-dropdown shadow p-2" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
     <div class="row d-flex">
       <div class="col border-end">
+        <h6 class="dropdown-header border-bottom" i18n>Created</h6>
         <div class="list-group list-group-flush">
-          <h6 class="dropdown-header border-bottom" i18n>Created</h6>
+
-          @for (rd of relativeDates; track rd) {
+          <div class="list-group-item d-flex p-2" role="menuitem">
-            <button class="list-group-item small list-goup list-group-item-action d-flex p-2" role="menuitem" (click)="setCreatedRelativeDate(rd.id)">
+            <div class="selected-icon">
-              <div class="selected-icon">
+              @if (createdRelativeDate) {
-                @if (createdRelativeDate === rd.id) {
+                <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearCreatedRelativeDate()">
-                  <i-bs width="1em" height="1em" name="check"></i-bs>
+                  <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
-                }
+                  <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
-              </div>
+                </a>
-              <div class="d-flex justify-content-between w-100 align-items-center ps-2">
+              }
-                <div class="pe-4">
+            </div>
-                  {{rd.name}}
+            <div class="input-group input-group-sm small ps-1 pe-2">
-                </div>
+              <ng-select class="w-100" name="createdRelativeDate"
-                <div class="text-muted small pe-2">
+              [items]="relativeDates" [(ngModel)]="createdRelativeDate"
-                  <span class="small">
+              bindValue="id"
-                    {{ rd.date | customDate:'mediumDate' }} &ndash; <ng-container i18n>now</ng-container>
+              bindLabel="name"
-                  </span>
+              placeholder="Relative dates"
-                </div>
+              i18n-placeholder
-              </div>
+              (change)="onSetCreatedRelativeDate($event)">
-            </button>
+              <ng-template ng-option-tmp let-item="item">
-          }
+                {{ item.name }} <span class="ms-2 text-muted small">{{ item.date | customDate:'mediumDate' }} &ndash; <ng-container i18n>now</ng-container></span>
+              </ng-template>
+              </ng-select>
+            </div>
+          </div>
+
           <div class="list-group-item d-flex p-2" role="menuitem">
 
             <div class="selected-icon">
@@ -85,27 +91,32 @@
       <div class="col">
         <h6 class="dropdown-header border-bottom" i18n>Added</h6>
         <div class="list-group list-group-flush">
-          @for (rd of relativeDates; track rd) {
-            <button class="list-group-item small list-goup list-group-item-action d-flex p-2" role="menuitem" (click)="setAddedRelativeDate(rd.id)">
-              <div class="selected-icon">
-                @if (addedRelativeDate === rd.id) {
-                  <i-bs width="1em" height="1em" name="check"></i-bs>
-                }
-              </div>
-              <div class="d-flex justify-content-between w-100 align-items-center ps-2">
-                <div class="pe-4">
-                  {{rd.name}}
-                </div>
-                <div class="text-muted small pe-2">
-                  <span class="small">
-                    {{ rd.date | customDate:'mediumDate' }} &ndash; <ng-container i18n>now</ng-container>
-                  </span>
-                </div>
-              </div>
-            </button>
-          }
           <div class="list-group-item d-flex p-2" role="menuitem">
 
+            <div class="selected-icon">
+              @if (addedRelativeDate) {
+                <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearAddedRelativeDate()">
+                  <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
+                  <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
+                </a>
+              }
+            </div>
+
+            <div class="input-group input-group-sm small ps-1 pe-2">
+              <ng-select class="w-100" name="addedRelativeDate"
+                [items]="relativeDates" [(ngModel)]="addedRelativeDate"
+                bindValue="id"
+                bindLabel="name"
+                placeholder="Relative dates"
+                i18n-placeholder
+                (change)="onSetAddedRelativeDate($event)">
+                <ng-template ng-option-tmp let-item="item">
+                  {{ item.name }} <span class="ms-2 text-muted small">{{ item.date | customDate:'mediumDate' }} &ndash; <ng-container i18n>now</ng-container></span>
+                </ng-template>
+              </ng-select>
+            </div>
+          </div>
+          <div class="list-group-item d-flex p-2" role="menuitem">
             <div class="selected-icon">
               @if (addedDateFrom) {
                 <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearAddedFrom()">

src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.spec.ts

@@ -82,10 +82,12 @@ describe('DatesDropdownComponent', () => {
   it('should support relative dates', fakeAsync(() => {
     let result: DateSelection
     component.datesSet.subscribe((date) => (result = date))
-    component.setCreatedRelativeDate(null)
+    component.createdRelativeDate = RelativeDate.WITHIN_1_WEEK // normally set by ngModel binding in dropdown
-    component.setCreatedRelativeDate(RelativeDate.WITHIN_1_WEEK)
+    component.onSetCreatedRelativeDate({
-    component.setAddedRelativeDate(null)
+      id: RelativeDate.WITHIN_1_WEEK,
-    component.setAddedRelativeDate(RelativeDate.WITHIN_1_WEEK)
+    } as any)
+    component.addedRelativeDate = RelativeDate.WITHIN_1_WEEK // normally set by ngModel binding in dropdown
+    component.onSetAddedRelativeDate({ id: RelativeDate.WITHIN_1_WEEK } as any)
     tick(500)
     expect(result).toEqual({
       createdFrom: null,
@@ -147,8 +149,19 @@ describe('DatesDropdownComponent', () => {
     expect(component.addedDateTo).toBeNull()
   })
 
+  it('should support clearRelativeDate', () => {
+    component.createdRelativeDate = RelativeDate.WITHIN_1_WEEK
+    component.clearCreatedRelativeDate()
+    expect(component.createdRelativeDate).toBeNull()
+
+    component.addedRelativeDate = RelativeDate.WITHIN_1_WEEK
+    component.clearAddedRelativeDate()
+    expect(component.addedRelativeDate).toBeNull()
+  })
+
   it('should limit keyboard events', () => {
-    const input: HTMLInputElement = fixture.nativeElement.querySelector('input')
+    const input: HTMLInputElement =
+      fixture.nativeElement.querySelector('input.form-control')
     let event: KeyboardEvent = new KeyboardEvent('keypress', {
       key: '9',
     })
@@ -163,4 +176,19 @@ describe('DatesDropdownComponent', () => {
     input.dispatchEvent(event)
     expect(eventSpy).toHaveBeenCalled()
   })
+
+  it('should support debounce', fakeAsync(() => {
+    let result: DateSelection
+    component.datesSet.subscribe((date) => (result = date))
+    component.onChangeDebounce()
+    tick(500)
+    expect(result).toEqual({
+      createdFrom: null,
+      createdTo: null,
+      createdRelativeDateID: null,
+      addedFrom: null,
+      addedTo: null,
+      addedRelativeDateID: null,
+    })
+  }))
 })

src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.ts

@@ -1,4 +1,4 @@
-import { NgClass } from '@angular/common'
+import { NgClass, NgTemplateOutlet } from '@angular/common'
 import {
   Component,
   EventEmitter,
@@ -13,6 +13,7 @@ import {
   NgbDatepickerModule,
   NgbDropdownModule,
 } from '@ng-bootstrap/ng-bootstrap'
+import { NgSelectModule } from '@ng-select/ng-select'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Subject, Subscription } from 'rxjs'
 import { debounceTime } from 'rxjs/operators'
@@ -32,10 +33,10 @@ export interface DateSelection {
 }
 
 export enum RelativeDate {
-  WITHIN_1_WEEK = 0,
+  WITHIN_1_WEEK = 1,
-  WITHIN_1_MONTH = 1,
+  WITHIN_1_MONTH = 2,
-  WITHIN_3_MONTHS = 2,
+  WITHIN_3_MONTHS = 3,
-  WITHIN_1_YEAR = 3,
+  WITHIN_1_YEAR = 4,
 }
 
 @Component({
@@ -49,9 +50,11 @@ export enum RelativeDate {
     NgxBootstrapIconsModule,
     NgbDatepickerModule,
     NgbDropdownModule,
+    NgSelectModule,
     FormsModule,
     ReactiveFormsModule,
     NgClass,
+    NgTemplateOutlet,
   ],
 })
 export class DatesDropdownComponent implements OnInit, OnDestroy {
@@ -88,38 +91,38 @@ export class DatesDropdownComponent implements OnInit, OnDestroy {
 
   // created
   @Input()
-  createdDateTo: string
+  createdDateTo: string = null
 
   @Output()
   createdDateToChange = new EventEmitter<string>()
 
   @Input()
-  createdDateFrom: string
+  createdDateFrom: string = null
 
   @Output()
   createdDateFromChange = new EventEmitter<string>()
 
   @Input()
-  createdRelativeDate: RelativeDate
+  createdRelativeDate: RelativeDate = null
 
   @Output()
   createdRelativeDateChange = new EventEmitter<number>()
 
   // added
   @Input()
-  addedDateTo: string
+  addedDateTo: string = null
 
   @Output()
   addedDateToChange = new EventEmitter<string>()
 
   @Input()
-  addedDateFrom: string
+  addedDateFrom: string = null
 
   @Output()
   addedDateFromChange = new EventEmitter<string>()
 
   @Input()
-  addedRelativeDate: RelativeDate
+  addedRelativeDate: RelativeDate = null
 
   @Output()
   addedRelativeDateChange = new EventEmitter<number>()
@@ -172,17 +175,17 @@ export class DatesDropdownComponent implements OnInit, OnDestroy {
     this.onChange()
   }
 
-  setCreatedRelativeDate(rd: RelativeDate) {
+  onSetCreatedRelativeDate(rd: { id: number; name: string; date: number }) {
+    // createdRelativeDate is set by ngModel
     this.createdDateTo = null
     this.createdDateFrom = null
-    this.createdRelativeDate = this.createdRelativeDate == rd ? null : rd
     this.onChange()
   }
 
-  setAddedRelativeDate(rd: RelativeDate) {
+  onSetAddedRelativeDate(rd: { id: number; name: string; date: number }) {
+    // addedRelativeDate is set by ngModel
     this.addedDateTo = null
     this.addedDateFrom = null
-    this.addedRelativeDate = this.addedRelativeDate == rd ? null : rd
     this.onChange()
   }
 
@@ -224,6 +227,11 @@ export class DatesDropdownComponent implements OnInit, OnDestroy {
     this.onChange()
   }
 
+  clearCreatedRelativeDate() {
+    this.createdRelativeDate = null
+    this.onChange()
+  }
+
   clearAddedTo() {
     this.addedDateTo = null
     this.onChange()
@@ -234,6 +242,11 @@ export class DatesDropdownComponent implements OnInit, OnDestroy {
     this.onChange()
   }
 
+  clearAddedRelativeDate() {
+    this.addedRelativeDate = null
+    this.onChange()
+  }
+
   // prevent chars other than numbers and separators
   onKeyPress(event: KeyboardEvent) {
     if ('Enter' !== event.key && !/[0-9,\.\/-]+/.test(event.key)) {