fixed the date selection dropdowns.

- They still contain that ugly hack.
This commit is contained in:
jonaswinkler 2020-12-15 00:48:06 +01:00
parent 533be7e96e
commit 67d03c11b9
4 changed files with 29 additions and 48 deletions

View File

@ -4,23 +4,16 @@
</button>
<div class="dropdown-menu date-filter shadow pt-0" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
<div class="list-group list-group-flush">
<button class="list-group-item small list-goup list-group-item-action d-flex p-2 pl-3" (click)="clear()">Clear</button>
<button *ngFor="let range of [7, 30, 'month', 'year']" class="list-group-item small list-goup list-group-item-action d-flex p-2 pl-3" role="menuitem" (click)="setDateQuickFilter(range)">
<ng-container *ngIf="isStringRange(range)">This </ng-container>
{{ range }}
<ng-container *ngIf="!isStringRange(range)"> days</ng-container>
</button>
<div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
<div class="mb-2 d-flex flex-row w-100 justify-content-between small">
<div>Before</div>
<a *ngIf="dateBefore" class="btn btn-link p-0 m-0" (click)="clearBefore()">
<svg width="0.8em" height="0.8em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
</svg>
<small>Clear</small>
</a>
</div>
<div>Before</div>
<div class="input-group input-group-sm">
<input class="form-control" type="text" placeholder="yyyy-mm-dd" name="before" [(ngModel)]="_dateBefore" [maxDate]="this._maxDate" ngbDatepicker (dateSelect)="onDateSelected($event)" #dpBefore="ngbDatepicker">
<input class="form-control" type="text" placeholder="yyyy-mm-dd" name="before" [(ngModel)]="_dateBefore" [maxDate]="this._maxDate" ngbDatepicker (dateSelect)="onBeforeSelected($event)" #dpBefore="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary btn-sm" (click)="dpBefore.toggle()" type="button">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-calendar-date" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
@ -32,17 +25,9 @@
</div>
</div>
<div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
<div class="mb-2 d-flex flex-row w-100 justify-content-between small">
<div>After</div>
<a *ngIf="dateAfter" class="btn btn-link p-0 m-0" (click)="clearAfter()">
<svg width="0.8em" height="0.8em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
</svg>
<small>Clear</small>
</a>
</div>
<div>After</div>
<div class="input-group input-group-sm">
<input class="form-control form-control-sm" type="text" placeholder="yyyy-mm-dd" name="after" [(ngModel)]="_dateAfter" [maxDate]="this._maxDate" ngbDatepicker (dateSelect)="onDateSelected($event)" #dpAfter="ngbDatepicker">
<input class="form-control form-control-sm" type="text" placeholder="yyyy-mm-dd" name="after" [(ngModel)]="_dateAfter" [maxDate]="this._maxDate" ngbDatepicker (dateSelect)="onAfterSelected($event)" #dpAfter="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary btn-sm" (click)="dpAfter.toggle()" type="button">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-calendar-date" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

View File

@ -1,6 +1,13 @@
import { Component, EventEmitter, Input, Output, ElementRef, ViewChild, SimpleChange } from '@angular/core';
import { NgbDate, NgbDateStruct, NgbDatepicker } from '@ng-bootstrap/ng-bootstrap';
export interface DateSelection {
before?: NgbDateStruct
after?: NgbDateStruct
}
@Component({
selector: 'app-filter-dropdown-date',
templateUrl: './filter-dropdown-date.component.html',
@ -18,10 +25,7 @@ export class FilterDropdownDateComponent {
title: string
@Output()
dateBeforeSet = new EventEmitter()
@Output()
dateAfterSet = new EventEmitter()
datesSet = new EventEmitter<DateSelection>()
@ViewChild('dpAfter') dpAfter: NgbDatepicker
@ViewChild('dpBefore') dpBefore: NgbDatepicker
@ -88,19 +92,18 @@ export class FilterDropdownDateComponent {
break
}
this._dateAfter = newDate
this.onDateSelected(this._dateAfter)
this.datesSet.emit({after: newDate, before: null})
}
onDateSelected(date:NgbDateStruct) {
let emitter = this._dateAfter && NgbDate.from(this._dateAfter).equals(date) ? this.dateAfterSet : this.dateBeforeSet
emitter.emit(date)
onBeforeSelected(date: NgbDateStruct) {
this.datesSet.emit({after: this._dateAfter, before: date})
}
clearAfter() {
this.dateAfterSet.next()
onAfterSelected(date: NgbDateStruct) {
this.datesSet.emit({after: date, before: this._dateBefore})
}
clearBefore() {
this.dateBeforeSet.next()
clear() {
this.datesSet.emit({after: null, before: null})
}
}

View File

@ -10,8 +10,8 @@
<app-filter-dropdown class="col-auto" [items]="correspondents" [itemsSelected]="selectedCorrespondents" title="Correspondents" (toggle)="toggleCorrespondent($event.id)"></app-filter-dropdown>
<app-filter-dropdown class="col-auto" [items]="documentTypes" [itemsSelected]="selectedDocumentTypes" title="Document types" (toggle)="toggleDocumentType($event.id)"></app-filter-dropdown>
<app-filter-dropdown-date class="col-auto" [dateBefore]="dateCreatedBefore" [dateAfter]="dateCreatedAfter" title="Created" (dateBeforeSet)="onDateCreatedBeforeSet($event)" (dateAfterSet)="onDateCreatedAfterSet($event)"></app-filter-dropdown-date>
<app-filter-dropdown-date class="col-auto" [dateBefore]="dateAddedBefore" [dateAfter]="dateAddedAfter" title="Added" (dateBeforeSet)="onDateAddedBeforeSet($event)" (dateAfterSet)="onDateAddedAfterSet($event)"></app-filter-dropdown-date>
<app-filter-dropdown-date class="col-auto" [dateBefore]="dateCreatedBefore" [dateAfter]="dateCreatedAfter" title="Created" (datesSet)="onDatesCreatedSet($event)"></app-filter-dropdown-date>
<app-filter-dropdown-date class="col-auto" [dateBefore]="dateAddedBefore" [dateAfter]="dateAddedAfter" title="Added" (datesSet)="onDatesAddedSet($event)"></app-filter-dropdown-date>
<button class="btn btn-link btn-sm" [disabled]="!hasFilters()" (click)="clearSelected()">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

View File

@ -10,6 +10,7 @@ import { TagService } from 'src/app/services/rest/tag.service';
import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
import { FilterRule } from 'src/app/data/filter-rule';
import { FILTER_ADDED_AFTER, FILTER_ADDED_BEFORE, FILTER_CORRESPONDENT, FILTER_CREATED_AFTER, FILTER_CREATED_BEFORE, FILTER_DOCUMENT_TYPE, FILTER_HAS_TAG, FILTER_RULE_TYPES, FILTER_TITLE } from 'src/app/data/filter-rule-type';
import { DateSelection } from './filter-dropdown-date/filter-dropdown-date.component';
@Component({
selector: 'app-filter-editor',
@ -146,23 +147,15 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
// Date handling
onDateCreatedBeforeSet(date: NgbDateStruct) {
this.setDateCreatedBefore(date)
onDatesCreatedSet(dates: DateSelection) {
this.setDateCreatedBefore(dates.before)
this.setDateCreatedAfter(dates.after)
this.applyFilters()
}
onDateCreatedAfterSet(date: NgbDateStruct) {
this.setDateCreatedAfter(date)
this.applyFilters()
}
onDateAddedBeforeSet(date: NgbDateStruct) {
this.setDateAddedBefore(date)
this.applyFilters()
}
onDateAddedAfterSet(date: NgbDateStruct) {
this.setDateAddedAfter(date)
onDatesAddedSet(dates: DateSelection) {
this.setDateAddedBefore(dates.before)
this.setDateAddedAfter(dates.after)
this.applyFilters()
}