mirror of
https://github.com/paperless-ngx/paperless-ngx.git
synced 2025-04-02 13:45:10 -05:00
fixed the date selection dropdowns.
- They still contain that ugly hack.
This commit is contained in:
parent
533be7e96e
commit
67d03c11b9
@ -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">
|
||||
|
@ -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})
|
||||
}
|
||||
}
|
||||
|
@ -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">
|
||||
|
@ -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()
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user