Just save this

[ci skip]
2025-04-02 13:45:10 -05:00 · 2025-02-06 23:46:55 -08:00 · 2025-02-06 23:46:55 -08:00 · 62fe4ebe98
commit 62fe4ebe98
parent 89e5c08a1f
3 changed files with 133 additions and 44 deletions
--- 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,17 +40,8 @@
            </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" (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>
+              <input class="form-control small" [placeholder]="datePlaceHolder" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
+                maxlength="10" [(ngModel)]="createdDateFrom">
            </div>

          </div>
@ -66,20 +57,16 @@
            </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" (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>
+              <input class="form-control small" [placeholder]="datePlaceHolder" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
+                maxlength="10" [(ngModel)]="createdDateTo">
            </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">
@ -117,16 +104,7 @@
            <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" [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>
+                maxlength="10" [(ngModel)]="addedDateFrom" ngbDatepicker #addedDateFromPicker="ngbDatepicker">
            </div>

          </div>
@ -143,21 +121,29 @@
            <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" [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>
+                maxlength="10" [(ngModel)]="addedDateTo" ngbDatepicker #addedDateToPicker="ngbDatepicker">
            </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>
--- 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: 40rem;
+    --bs-dropdown-min-width: 38rem;
  }

  @media screen and (max-width: 767px) {
@ -47,3 +47,8 @@
    border-radius: 0.15rem;
  }
 }
+
+::ng-deep .ngb-dp-day, .day {
+  height: 2.3rem !important;
+  width: 2.3rem !important;
+}
--- 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,6 +9,7 @@ import {
 } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import {
+  NgbDate,
  NgbDateAdapter,
  NgbDatepickerModule,
  NgbDropdownModule,
@ -57,7 +58,10 @@ export enum RelativeDate {
 export class DatesDropdownComponent implements OnInit, OnDestroy {
  public popperOptions = popperOptionsReenablePreventOverflow

-  constructor(settings: SettingsService) {
+  constructor(
+    settings: SettingsService,
+    private isoDateAdapter: NgbDateAdapter<string>
+  ) {
    this.datePlaceHolder = settings.getLocalizedDateInputFormat()
  }

@ -96,6 +100,10 @@ export class DatesDropdownComponent implements OnInit, OnDestroy {
  @Input()
  createdDateFrom: string

+  createdDate: string
+  addedDate: string
+  hoveredDate: NgbDate
+
  @Output()
  createdDateFromChange = new EventEmitter<string>()

@ -186,6 +194,52 @@ 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)
@ -203,6 +257,50 @@ 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