Working date filtering

src-ui/src/app/components/document-list/document-list.component.ts

@@ -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';

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

@@ -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)="setDateQuickFilter(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" (click)="setDateQuickFilter(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" (click)="setDateQuickFilter('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('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">

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

@@ -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();
+        now.setDate(now.getDate() - range)
-        date.setDate(date.getDate() - range)
+        this.dateAfter = { year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate() }
-        this.dateAfter = { year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate() }
+        this.dateSelected(this.dateAfter)
         break;
 
       case 'string':
-        let filterRuleType = this.filterRuleTypes.find(rt => rt.filtervar.indexOf(range) > -1)
+        let date = { year: now.getFullYear(), month: now.getMonth() + 1, day: 1 }
-        console.log(range);
+        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)
+    }
+  }
 }

src-ui/src/app/components/filter-editor/filter-editor.component.html

@@ -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">

src-ui/src/app/components/filter-editor/filter-editor.component.ts

@@ -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()
+  }
+
 }