Working date filtering

This commit is contained in:
Michael Shamoon 2020-12-12 01:09:52 -08:00
parent e7cb358536
commit 9cd40e96f4
5 changed files with 43 additions and 20 deletions

View File

@ -11,7 +11,7 @@ import { SavedViewConfigService } from 'src/app/services/saved-view-config.servi
import { Toast, ToastService } from 'src/app/services/toast.service';
import { environment } from 'src/environments/environment';
import { SaveViewConfigDialogComponent } from './save-view-config-dialog/save-view-config-dialog.component';
import { FilterEditorComponent } from './filter-editor/filter-editor.component';
import { FilterEditorComponent } from 'src/app/components/filter-editor/filter-editor.component';
import { PaperlessTag } from 'src/app/data/paperless-tag';
import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent';
import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';

View File

@ -3,15 +3,15 @@
<div class="dropdown-menu date-filter shadow" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
<div class="list-group list-group-flush">
<div class="list-group-item d-flex flex-column align-items-start">
<button class="btn btn-sm btn-link pl-0" (click)="setQuickFilter(7)">Last 7 days</button>
<button class="btn btn-sm btn-link pl-0" (click)="setQuickFilter(30)">Last 30 days</button>
<button class="btn btn-sm btn-link pl-0" *ngIf="showMonth" (click)="setQuickFilter('month')">This month</button>
<button class="btn btn-sm btn-link pl-0" *ngIf="showYear" (click)="setQuickFilter('year')">This year</button>
<button class="btn btn-sm btn-link pl-0" (click)="setDateQuickFilter(7)">Last 7 days</button>
<button class="btn btn-sm btn-link pl-0" (click)="setDateQuickFilter(30)">Last 30 days</button>
<button class="btn btn-sm btn-link pl-0" (click)="setDateQuickFilter('month')">This month</button>
<button class="btn btn-sm btn-link pl-0" (click)="setDateQuickFilter('year')">This year</button>
</div>
<div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
<div class="mb-1"><small>Before</small></div>
<div class="input-group input-group-sm">
<input class="form-control" type="text" placeholder="yyyy-mm-dd" name="before" [(ngModel)]="dateBefore" ngbDatepicker #dpBefore="ngbDatepicker">
<input class="form-control" type="text" placeholder="yyyy-mm-dd" name="before" [(ngModel)]="dateBefore" ngbDatepicker (dateSelect)="dateSelected($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">
@ -25,7 +25,7 @@
<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">
<input class="form-control form-control-sm" type="text" placeholder="yyyy-mm-dd" name="after" [(ngModel)]="dateAfter" ngbDatepicker #dpAfter="ngbDatepicker">
<input class="form-control form-control-sm" type="text" placeholder="yyyy-mm-dd" name="after" [(ngModel)]="dateAfter" ngbDatepicker (dateSelect)="dateSelected($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,4 +1,5 @@
import { Component, EventEmitter, Input, OnInit, Output, ElementRef, ViewChild } from '@angular/core';
import { FilterRule } from 'src/app/data/filter-rule';
import { FilterRuleType, FILTER_RULE_TYPES } from 'src/app/data/filter-rule-type';
import { ObjectWithId } from 'src/app/data/object-with-id';
import { FilterDropdownComponent } from '../filter-dropdown.component'
@ -18,8 +19,6 @@ export class FilterDropdownDateComponent extends FilterDropdownComponent {
selected = new EventEmitter()
filterRuleTypes: FilterRuleType[] = []
showYear: boolean = false
showMonth: boolean = false
dateAfter: NgbDateStruct
dateBefore: NgbDateStruct
@ -27,27 +26,36 @@ export class FilterDropdownDateComponent extends FilterDropdownComponent {
this.filterRuleTypes = this.filterRuleTypeIDs.map(id => FILTER_RULE_TYPES.find(rt => rt.id == id))
this.filterRuleTypeID = this.filterRuleTypeIDs[0]
super.ngOnInit()
this.showYear = this.filterRuleTypes.find(rt => rt.filtervar.indexOf('year') > -1) !== undefined
this.showMonth = this.filterRuleTypes.find(rt => rt.filtervar.indexOf('month') > -1) !== undefined
}
setQuickFilter(range: any) {
setDateQuickFilter(range: any) {
this.dateAfter = this.dateBefore = undefined
let now = new Date()
switch (typeof range) {
case 'number':
let date = new Date();
date.setDate(date.getDate() - range)
this.dateAfter = { year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate() }
now.setDate(now.getDate() - range)
this.dateAfter = { year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate() }
this.dateSelected(this.dateAfter)
break;
case 'string':
let filterRuleType = this.filterRuleTypes.find(rt => rt.filtervar.indexOf(range) > -1)
console.log(range);
let date = { year: now.getFullYear(), month: now.getMonth() + 1, day: 1 }
if (range == 'year') date.month = 1
this.dateAfter = date
this.dateSelected(this.dateAfter)
break;
default:
break;
}
}
dateSelected(date:NgbDateStruct) {
let isAfter = this.dateAfter !== undefined
let filterRuleType = this.filterRuleTypes.find(rt => rt.filtervar.indexOf(isAfter ? 'gt' : 'lt') > -1)
if (filterRuleType) {
let dateFilterRule:FilterRule = {value: `${date.year}-${date.month}-${date.day}`, type: filterRuleType}
this.selected.emit(dateFilterRule)
}
}
}

View File

@ -8,7 +8,7 @@
<app-filter-dropdown class="col-auto" *ngFor="let quickFilterRuleTypeID of quickFilterRuleTypeIDs" [filterRuleTypeID]="quickFilterRuleTypeID" (toggle)="toggleFilterByItem($event, quickFilterRuleTypeID)"></app-filter-dropdown>
<app-filter-dropdown-date class="col-auto" *ngFor="let dateAddedFilterRuleTypeID of dateAddedFilterRuleTypeIDs" [filterRuleTypeIDs]="dateAddedFilterRuleTypeID" (toggle)="toggleFilterByItem($event, quickFilterRuleTypeID)"></app-filter-dropdown-date>
<app-filter-dropdown-date class="col-auto" *ngFor="let dateAddedFilterRuleTypeID of dateAddedFilterRuleTypeIDs" [filterRuleTypeIDs]="dateAddedFilterRuleTypeID" (selected)="setDateFilter($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

@ -12,6 +12,7 @@ import { TagService } from 'src/app/services/rest/tag.service';
import { FilterDropdownComponent } from './filter-dropdown/filter-dropdown.component'
import { fromEvent } from 'rxjs';
import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-filter-editor',
@ -35,7 +36,7 @@ export class FilterEditorComponent implements OnInit, AfterViewInit {
@ViewChildren(FilterDropdownComponent) quickFilterDropdowns!: QueryList<FilterDropdownComponent>;
quickFilterRuleTypeIDs: number[] = [FILTER_HAS_TAG, FILTER_CORRESPONDENT, FILTER_DOCUMENT_TYPE]
dateAddedFilterRuleTypeIDs: any[] = [[FILTER_ADDED_BEFORE, FILTER_ADDED_AFTER], [FILTER_CREATED_BEFORE, FILTER_CREATED_AFTER, FILTER_CREATED_YEAR, FILTER_CREATED_MONTH, FILTER_CREATED_DAY]]
dateAddedFilterRuleTypeIDs: any[] = [[FILTER_ADDED_BEFORE, FILTER_ADDED_AFTER], [FILTER_CREATED_BEFORE, FILTER_CREATED_AFTER]]
correspondents: PaperlessCorrespondent[] = []
tags: PaperlessTag[] = []
@ -147,4 +148,18 @@ export class FilterEditorComponent implements OnInit, AfterViewInit {
this.applySelected()
}
setDateFilter(newFilterRule: FilterRule) {
let filterRules = this.filterRules
let existingRule = filterRules.find(rule => rule.type.id == newFilterRule.type.id)
if (existingRule) {
existingRule.value = newFilterRule.value
} else {
filterRules.push(newFilterRule)
}
this.filterRules = filterRules
this.applySelected()
}
}