paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-10-30 03:56:23 -05:00
Code Issues Packages Projects Releases Wiki Activity

Clear date filter buttons

Browse Source
This commit is contained in:
Michael Shamoon
2020-12-13 15:38:28 -08:00
parent 1013c89b8d
commit 4b614dfd85
4 changed files with 57 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html
View File

@@ -15,7 +15,15 @@
<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-1"><small>Before</small></div>
<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 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">
<div class="input-group-append">
@@ -29,8 +37,16 @@
</div>
</div>
<div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
<div class="mb-1"><small>After</small></div>
<div class="input-group">
<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 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">
<div class="input-group-append">
<button class="btn btn-outline-secondary btn-sm" (click)="dpAfter.toggle()" type="button">

4
src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.scss
View File

@@ -1,3 +1,7 @@
.date-filter {
min-width: 250px;
.btn-link {
line-height: 1;
}
}

16
src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.ts
View File

@@ -43,8 +43,12 @@ export class FilterDropdownDateComponent {
ngOnChanges(changes: SimpleChange) {
// this is a hacky workaround perhaps because of https://github.com/angular/angular/issues/11097
let dateString: string = ''
let dateAfterChange: SimpleChange = changes['dateAfter']
let dateBeforeChange: SimpleChange = changes['dateBefore']
let dateAfterChange: SimpleChange
let dateBeforeChange: SimpleChange
if (changes) {
dateAfterChange = changes['dateAfter']
dateBeforeChange = changes['dateBefore']
}
if (this.dpBefore && this.dpAfter) {
let dpAfterElRef: ElementRef = this.dpAfter['_elRef']
@@ -93,4 +97,12 @@ export class FilterDropdownDateComponent {
let emitter = this._dateAfter && NgbDate.from(this._dateAfter).equals(date) ? this.dateAfterSet : this.dateBeforeSet
emitter.emit(date)
}
clearAfter() {
this.dateAfterSet.next()
}
clearBefore() {
this.dateBeforeSet.next()
}
}

29
src-ui/src/app/services/filter-editor-view.service.ts
View File

@@ -155,23 +155,27 @@ export class FilterEditorViewService {
} : undefined
}
setDateCreatedBefore(date: NgbDateStruct) {
this.setDate(date, FILTER_CREATED_BEFORE)
setDateCreatedBefore(date?: NgbDateStruct) {
if (date) this.setDateFilter(date, FILTER_CREATED_BEFORE)
else this.clearDateFilter(FILTER_CREATED_BEFORE)
}
setDateCreatedAfter(date: NgbDateStruct) {
this.setDate(date, FILTER_CREATED_AFTER)
setDateCreatedAfter(date?: NgbDateStruct) {
if (date) this.setDateFilter(date, FILTER_CREATED_AFTER)
else this.clearDateFilter(FILTER_CREATED_AFTER)
}
setDateAddedBefore(date: NgbDateStruct) {
this.setDate(date, FILTER_ADDED_BEFORE)
setDateAddedBefore(date?: NgbDateStruct) {
if (date) this.setDateFilter(date, FILTER_ADDED_BEFORE)
else this.clearDateFilter(FILTER_ADDED_BEFORE)
}
setDateAddedAfter(date: NgbDateStruct) {
this.setDate(date, FILTER_ADDED_AFTER)
setDateAddedAfter(date?: NgbDateStruct) {
if (date) this.setDateFilter(date, FILTER_ADDED_AFTER)
else this.clearDateFilter(FILTER_ADDED_AFTER)
}
setDate(date: NgbDateStruct, dateRuleTypeID: number) {
setDateFilter(date: NgbDateStruct, dateRuleTypeID: number) {
let filterRules = this.filterRules
let existingRule = filterRules.find(rule => rule.type.id == dateRuleTypeID)
let newValue = `${date.year}-${date.month.toString().padStart(2,'0')}-${date.day.toString().padStart(2,'0')}` // YYYY-MM-DD
@@ -184,4 +188,11 @@ export class FilterEditorViewService {
this.filterRules = filterRules
}
clearDateFilter(dateRuleTypeID: number) {
let filterRules = this.filterRules
let existingRule = filterRules.find(rule => rule.type.id == dateRuleTypeID)
filterRules.splice(filterRules.indexOf(existingRule), 1)
this.filterRules = filterRules
}
}