feat(date.component): adding suggestions to frontend

src-ui/src/app/components/common/input/date/date.component.html

@@ -12,4 +12,10 @@
   </div>
   <div class="invalid-feedback" i18n>Invalid date.</div>
   <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
+  <small *ngIf="getSuggestions().length > 0">
+    <span i18n>Suggestions:</span>&nbsp;
+    <ng-container *ngFor="let s of getSuggestions()">
+      <a (click)="onSuggestionClick(s)" [routerLink]="[]">{{s}}</a>&nbsp;
+    </ng-container>
+  </small>
 </div>

src-ui/src/app/components/common/input/date/date.component.ts

@@ -1,8 +1,10 @@
-import { Component, forwardRef, OnInit } from '@angular/core'
+import { Component, forwardRef, Input, OnInit } from '@angular/core'
 import { NG_VALUE_ACCESSOR } from '@angular/forms'
-import { NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap'
+import {
+  NgbDateParserFormatter,
+  NgbDateStruct,
+} from '@ng-bootstrap/ng-bootstrap'
 import { SettingsService } from 'src/app/services/settings.service'
-import { LocalizedDateParserFormatter } from 'src/app/utils/ngb-date-parser-formatter'
 import { AbstractInputComponent } from '../abstract-input'
 
 @Component({
@@ -28,6 +30,40 @@ export class DateComponent
     super()
   }
 
+  @Input()
+  suggestions: Date[]
+
+  getSuggestions() {
+    if (this.suggestions == null) return []
+
+    return this.suggestions
+      .map((s) => new Date(s)) // required to call the date functions below
+      .filter(
+        (d) =>
+          this.value === null || // if value is not set, take all suggestions
+          d.toISOString().slice(0, 10) != this.value // otherwise filter out the current value
+      )
+      .map((s) =>
+        this.ngbDateParserFormatter.format({
+          year: s.getFullYear(),
+          month: s.getMonth() + 1, // month of Date is zero based
+          day: s.getDate(),
+        })
+      )
+  }
+
+  onSuggestionClick(dateString: string) {
+    const parsedNgDate = this.ngbDateParserFormatter.parse(dateString)
+    this.writeValue(this.formatDateAsYYYYMMDD(parsedNgDate))
+    this.onChange(this.value)
+  }
+
+  formatDateAsYYYYMMDD(date: NgbDateStruct) {
+    const monthPrefix = date.month > 9 ? '' : '0'
+    const dayPrefix = date.day > 9 ? '' : '0'
+    return `${date.year}-${monthPrefix}${date.month}-${dayPrefix}${date.day}`
+  }
+
   ngOnInit(): void {
     super.ngOnInit()
     this.placeholder = this.settings.getLocalizedDateInputFormat()