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

<div class="btn-group w-100" ngbDropdown role="group" [popperOptions]="popperOptions">
  <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="createdDateTo || createdDateFrom ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled">
    <i-bs width="1em" height="1em" name="calendar-event-fill"></i-bs>
    <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
    <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
  </button>
  <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">
        <div class="list-group list-group-flush">
          <h6 class="dropdown-header border-bottom" i18n>Created</h6>
          @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)="setCreatedRelativeDate(rd.id)">
              <div class="selected-icon">
                @if (createdRelativeDate === 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 (createdDateFrom) {
                <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearCreatedFrom()">
                  <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">
              <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">
            </div>

          </div>
          <div class="list-group-item d-flex p-2" role="menuitem">

            <div class="selected-icon">
              @if (createdDateTo) {
                <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearCreatedTo()">
                  <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">
              <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">
            </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">
        <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 (addedDateFrom) {
                <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearAddedFrom()">
                  <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">
              <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">
            </div>

          </div>
          <div class="list-group-item d-flex p-2" role="menuitem">

            <div class="selected-icon">
              @if (addedDateTo) {
                <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearAddedTo()">
                  <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">
              <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">
            </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>