From 1eb2842f5ac4960d23ce475fe230a66d80b7a4fc Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 4 Mar 2025 19:45:26 -0800
Subject: [PATCH] Revert "Just save this"

This reverts commit 1ecfd44ee166ed6e63f2cb8488f1309370785481.
---
 .../dates-dropdown.component.html             |  70 +++++++-----
 .../dates-dropdown.component.scss             |   7 +-
 .../dates-dropdown.component.ts               | 100 +-----------------
 3 files changed, 44 insertions(+), 133 deletions(-)

diff --git a/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.html b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.html
index e80bedc1d..c3ff61ba8 100644
--- a/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.html
+++ b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.html
@@ -40,8 +40,17 @@
             </div>
             <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" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
-                maxlength="10" [(ngModel)]="createdDateFrom">
+              <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
+                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>
@@ -57,16 +66,20 @@
             </div>
             <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" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
-                maxlength="10" [(ngModel)]="createdDateTo">
+              <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
+                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>
-
-          <div class="list-group-item d-flex p-2" role="menuitem">
-            <ngb-datepicker #dp (dateSelect)="onCreatedChange()" class="w-100 border-0" [displayMonths]="1" [dayTemplate]="t" [(ngModel)]="createdDate" />
-          </div>
-
         </div>
       </div>
       <div class="col">
@@ -104,7 +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>
@@ -121,29 +143,21 @@
             <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>
         </div>
-
-        <div class="list-group-item d-flex p-2" role="menuitem">
-          <ngb-datepicker #dp (dateSelect)="onAddedChange()" class="w-100 border-0" [displayMonths]="1" [dayTemplate]="t" [(ngModel)]="addedDate" />
-        </div>
       </div>
     </div>
   </div>
 </div>
-
-<ng-template #t let-date let-focused="focused">
-  <span
-    class="day text-center px-2 d-inline-block"
-    [class.focused]="focused"
-    [class.bg-dark]="isRange(date)"
-    [class.text-primary.bg-light]="isHovered(date) || isInside(date)"
-    (mouseenter)="hoveredDate = date"
-    (mouseleave)="hoveredDate = null"
-  >
-    {{ date.day }}
-  </span>
-</ng-template>
diff --git a/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.scss b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.scss
index ba4180ba2..ebd34b29a 100644
--- a/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.scss
+++ b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.scss
@@ -2,7 +2,7 @@
   white-space: nowrap;
 
   @media(min-width: 768px) {
-    --bs-dropdown-min-width: 38rem;
+    --bs-dropdown-min-width: 40rem;
   }
 
   @media screen and (max-width: 767px) {
@@ -47,8 +47,3 @@
     border-radius: 0.15rem;
   }
 }
-
-::ng-deep .ngb-dp-day, .day {
-  height: 2.3rem !important;
-  width: 2.3rem !important;
-}
diff --git a/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.ts b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.ts
index 25fbeee83..e7d506d18 100644
--- a/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.ts
+++ b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.ts
@@ -9,7 +9,6 @@ import {
 } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import {
-  NgbDate,
   NgbDateAdapter,
   NgbDatepickerModule,
   NgbDropdownModule,
@@ -58,10 +57,7 @@ export enum RelativeDate {
 export class DatesDropdownComponent implements OnInit, OnDestroy {
   public popperOptions = popperOptionsReenablePreventOverflow
 
-  constructor(
-    settings: SettingsService,
-    private isoDateAdapter: NgbDateAdapter<string>
-  ) {
+  constructor(settings: SettingsService) {
     this.datePlaceHolder = settings.getLocalizedDateInputFormat()
   }
 
@@ -100,10 +96,6 @@ export class DatesDropdownComponent implements OnInit, OnDestroy {
   @Input()
   createdDateFrom: string
 
-  createdDate: string
-  addedDate: string
-  hoveredDate: NgbDate
-
   @Output()
   createdDateFromChange = new EventEmitter<string>()
 
@@ -194,52 +186,6 @@ export class DatesDropdownComponent implements OnInit, OnDestroy {
     this.onChange()
   }
 
-  isHovered(date: NgbDate) {
-    const createdDateFromNgbDate = this.createdDateFrom
-      ? NgbDate.from({
-          year: new Date(this.createdDateFrom).getFullYear(),
-          month: new Date(this.createdDateFrom).getMonth() + 1,
-          day: new Date(this.createdDateFrom).getDate(),
-        })
-      : null
-    return (
-      this.createdDateFrom &&
-      !this.createdDateTo &&
-      this.hoveredDate &&
-      date.after(createdDateFromNgbDate) &&
-      date.before(this.hoveredDate)
-    )
-  }
-
-  isInside(date: NgbDate) {
-    const createdDateFromNgbDate = this.createdDateFrom
-      ? NgbDate.from(this.isoDateAdapter.fromModel(this.createdDateFrom))
-      : null
-    const createdDateToNgbDate = this.createdDateTo
-      ? NgbDate.from(this.isoDateAdapter.fromModel(this.createdDateTo))
-      : null
-    return (
-      this.createdDateTo &&
-      date.after(createdDateFromNgbDate) &&
-      date.before(createdDateToNgbDate)
-    )
-  }
-
-  isRange(date: NgbDate) {
-    const createdDateFromNgbDate = this.createdDateFrom
-      ? NgbDate.from(this.isoDateAdapter.fromModel(this.createdDateFrom))
-      : null
-    const createdDateToNgbDate = this.createdDateTo
-      ? NgbDate.from(this.isoDateAdapter.fromModel(this.createdDateTo))
-      : null
-    return (
-      date.equals(createdDateFromNgbDate) ||
-      (this.createdDateTo && date.equals(createdDateToNgbDate)) ||
-      this.isInside(date) ||
-      this.isHovered(date)
-    )
-  }
-
   onChange() {
     this.createdDateToChange.emit(this.createdDateTo)
     this.createdDateFromChange.emit(this.createdDateFrom)
@@ -257,50 +203,6 @@ export class DatesDropdownComponent implements OnInit, OnDestroy {
     })
   }
 
-  onCreatedChange() {
-    const createdNgbDate = NgbDate.from(
-      this.isoDateAdapter.fromModel(this.createdDate)
-    )
-
-    if (!this.createdDateFrom && !this.createdDateTo) {
-      this.createdDateFrom = this.isoDateAdapter.toModel(createdNgbDate)
-    } else if (
-      this.createdDateFrom &&
-      !this.createdDateTo &&
-      createdNgbDate.after(
-        NgbDate.from(this.isoDateAdapter.fromModel(this.createdDateFrom))
-      )
-    ) {
-      this.createdDateTo = this.isoDateAdapter.toModel(createdNgbDate)
-    } else {
-      this.createdDateTo = null
-      this.createdDateFrom = this.isoDateAdapter.toModel(createdNgbDate)
-    }
-    this.onChangeDebounce()
-  }
-
-  onAddedChange() {
-    const addedNgbDate = NgbDate.from(
-      this.isoDateAdapter.fromModel(this.createdDate)
-    )
-
-    if (!this.addedDateFrom && !this.addedDateTo) {
-      this.addedDateFrom = this.isoDateAdapter.toModel(addedNgbDate)
-    } else if (
-      this.addedDateFrom &&
-      !this.addedDateTo &&
-      addedNgbDate.after(
-        NgbDate.from(this.isoDateAdapter.fromModel(this.addedDateFrom))
-      )
-    ) {
-      this.addedDateTo = this.isoDateAdapter.toModel(addedNgbDate)
-    } else {
-      this.addedDateTo = null
-      this.addedDateFrom = this.isoDateAdapter.toModel(addedNgbDate)
-    }
-    this.onChangeDebounce()
-  }
-
   onChangeDebounce() {
     this.createdRelativeDate = null
     this.addedRelativeDate = null