Add today and close button

src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html

@@ -29,10 +29,17 @@
     <input class="form-control" placeholder="yyyy-mm-dd"
       [(ngModel)]="atom.value"
       ngbDatepicker
-      #d="ngbDatepicker" />
+      #d="ngbDatepicker"
+      [footerTemplate]="datePickerFooterTemplate" />
     <button class="btn btn-sm btn-outline-secondary rounded-end" (click)="d.toggle()" type="button">
       <i-bs name="calendar-event"></i-bs>
     </button>
+    <ng-template #datePickerFooterTemplate>
+      <div class="btn-group-xs border-top p-2 d-flex">
+        <button type="button" class="btn btn-primary" (click)="atom.value = today; d.close()" i18n>Today</button>
+        <button type="button" class="btn btn-secondary ms-auto" (click)="d.close()" i18n>Close</button>
+      </div>
+    </ng-template>
   } @else if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Float || getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Integer) {
     <input class="w-25 form-control rounded-end" type="number" [(ngModel)]="atom.value" [disabled]="disabled">
   } @else if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Boolean) {

src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss

@@ -41,3 +41,9 @@
     min-width: 140px;
   }
 }
+
+.btn-group-xs {
+  > .btn {
+    border-radius: 0.15rem;
+  }
+}

src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts

@@ -241,6 +241,8 @@ export class CustomFieldsQueryDropdownComponent extends LoadingComponentWithPerm
 
   customFields: CustomField[] = []
 
+  public readonly today: string = new Date().toISOString().split('T')[0]
+
   constructor(protected customFieldsService: CustomFieldsService) {
     super()
     this.selectionModel = new CustomFieldQueriesModel()

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

@@ -41,10 +41,16 @@
             <div class="input-group input-group-sm small ps-1 pe-2">
               <span class="input-group-text w-25 small text-muted" i18n>From</span>
               <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
-                maxlength="10" [(ngModel)]="createdDateFrom" ngbDatepicker #createdDateFromPicker="ngbDatepicker">
+                maxlength="10" [(ngModel)]="createdDateFrom" ngbDatepicker #createdDateFromPicker="ngbDatepicker" [footerTemplate]="createdFromFooterTemplate">
               <button class="btn btn-outline-secondary" (click)="createdDateFromPicker.toggle()" type="button">
                 <i-bs width="1em" height="1em" name="calendar"></i-bs>
               </button>
+              <ng-template #createdFromFooterTemplate>
+                <div class="btn-group-xs border-top p-2 d-flex">
+                  <button class="btn btn-primary" (click)="createdDateFrom = today; onChangeDebounce()" i18n>Today</button>
+                  <button class="btn btn-secondary ms-auto" (click)="createdDateFromPicker.close()" i18n>Close</button>
+                </div>
+              </ng-template>
             </div>
 
           </div>
@@ -61,10 +67,16 @@
             <div class="input-group input-group-sm small ps-1 pe-2">
               <span class="input-group-text w-25 small text-muted" i18n>To</span>
               <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
-                maxlength="10" [(ngModel)]="createdDateTo" ngbDatepicker #createdDateToPicker="ngbDatepicker">
+                maxlength="10" [(ngModel)]="createdDateTo" ngbDatepicker #createdDateToPicker="ngbDatepicker" [footerTemplate]="createdToFooterTemplate">
               <button class="btn btn-outline-secondary" (click)="createdDateToPicker.toggle()" type="button">
                 <i-bs width="1em" height="1em" name="calendar"></i-bs>
               </button>
+              <ng-template #createdToFooterTemplate>
+                <div class="btn-group-xs border-top p-2 d-flex">
+                  <button class="btn btn-primary" (click)="createdDateTo = today; onChangeDebounce()" i18n>Today</button>
+                  <button class="btn btn-secondary ms-auto" (click)="createdDateToPicker.close()" i18n>Close</button>
+                </div>
+              </ng-template>
             </div>
 
           </div>
@@ -105,10 +117,16 @@
             <div class="input-group input-group-sm small ps-1 pe-2">
               <span class="input-group-text w-25 small text-muted" i18n>From</span>
               <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
-                maxlength="10" [(ngModel)]="addedDateFrom" ngbDatepicker #addedDateFromPicker="ngbDatepicker">
+                maxlength="10" [(ngModel)]="addedDateFrom" ngbDatepicker #addedDateFromPicker="ngbDatepicker" [footerTemplate]="addedFromFooterTemplate">
               <button class="btn btn-outline-secondary" (click)="addedDateFromPicker.toggle()" type="button">
                 <i-bs width="1em" height="1em" name="calendar"></i-bs>
               </button>
+              <ng-template #addedFromFooterTemplate>
+                <div class="btn-group-xs border-top p-2 d-flex">
+                  <button class="btn btn-primary" (click)="addedDateFrom = today; onChangeDebounce()" i18n>Today</button>
+                  <button class="btn btn-secondary ms-auto" (click)="addedDateFromPicker.close()" i18n>Close</button>
+                </div>
+              </ng-template>
             </div>
 
           </div>
@@ -125,10 +143,16 @@
             <div class="input-group input-group-sm small ps-1 pe-2">
               <span class="input-group-text w-25 small text-muted" i18n>To</span>
               <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
-                maxlength="10" [(ngModel)]="addedDateTo" ngbDatepicker #addedDateToPicker="ngbDatepicker">
+                maxlength="10" [(ngModel)]="addedDateTo" ngbDatepicker #addedDateToPicker="ngbDatepicker" [footerTemplate]="addedToFooterTemplate">
               <button class="btn btn-outline-secondary" (click)="addedDateToPicker.toggle()" type="button">
                 <i-bs width="1em" height="1em" name="calendar"></i-bs>
               </button>
+              <ng-template #addedToFooterTemplate>
+                <div class="btn-group-xs border-top p-2 d-flex">
+                  <button class="btn btn-primary" (click)="addedDateTo = today; onChangeDebounce()" i18n>Today</button>
+                  <button class="btn btn-secondary ms-auto" (click)="addedDateToPicker.close()" i18n>Close</button>
+                </div>
+              </ng-template>
             </div>
 
           </div>

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

@@ -41,3 +41,9 @@
     }
   }
 }
+
+.btn-group-xs {
+  > .btn {
+    border-radius: 0.15rem;
+  }
+}

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

@@ -133,6 +133,8 @@ export class DatesDropdownComponent implements OnInit, OnDestroy {
   @Input()
   disabled: boolean = false
 
+  public readonly today: string = new Date().toISOString().split('T')[0]
+
   get isActive(): boolean {
     return (
       this.createdRelativeDate !== null ||

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

@@ -12,10 +12,16 @@
         <div class="input-group" [class.is-invalid]="error">
           <input #inputField class="form-control" [class.is-invalid]="error" [placeholder]="placeholder" [id]="inputId" maxlength="10"
             (dateSelect)="onChange(value)" (change)="onChange(value)" (keypress)="onKeyPress($event)" (paste)="onPaste($event)"
-            name="dp" [(ngModel)]="value" ngbDatepicker #datePicker="ngbDatepicker" #datePickerContent="ngModel" [disabled]="disabled">
+            name="dp" [(ngModel)]="value" ngbDatepicker #datePicker="ngbDatepicker" #datePickerContent="ngModel" [disabled]="disabled" [footerTemplate]="datePickerFooterTemplate">
           <button class="btn btn-outline-secondary calendar" (click)="datePicker.toggle()" type="button" [disabled]="disabled">
             <i-bs width="1.2em" height="1.2em" name="calendar"></i-bs>
           </button>
+          <ng-template #datePickerFooterTemplate>
+            <div class="btn-group-xs border-top p-2 d-flex">
+              <button type="button" class="btn btn-primary" (click)="value = today; onChange(value); datePicker.close()" i18n>Today</button>
+              <button type="button" class="btn btn-secondary ms-auto" (click)="datePicker.close()" i18n>Close</button>
+            </div>
+          </ng-template>
           @if (showFilter) {
             <button class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="this.value === null" title="{{ filterButtonTitle }}">
               <i-bs width="1.2em" height="1.2em" name="filter"></i-bs>

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

@@ -0,0 +1,5 @@
+.btn-group-xs {
+    > .btn {
+      border-radius: 0.15rem;
+    }
+  }

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

@@ -62,6 +62,8 @@ export class DateComponent
   @Output()
   filterDocuments = new EventEmitter<NgbDateStruct[]>()
 
+  public readonly today: string = new Date().toISOString().split('T')[0]
+
   getSuggestions() {
     return this.suggestions == null
       ? []