filter-dropdown-date rough implementation

src-ui/src/app/app.module.ts

@@ -29,6 +29,7 @@ import { AppFrameComponent } from './components/app-frame/app-frame.component';
 import { ToastsComponent } from './components/common/toasts/toasts.component';
 import { FilterEditorComponent } from './components/filter-editor/filter-editor.component';
 import { FilterDropdownComponent } from './components/filter-editor/filter-dropdown/filter-dropdown.component';
+import { FilterDropdownDateComponent } from './components/filter-editor/filter-dropdown/filter-dropdown-date/filter-dropdown-date.component';
 import { DocumentCardLargeComponent } from './components/document-list/document-card-large/document-card-large.component';
 import { DocumentCardSmallComponent } from './components/document-list/document-card-small/document-card-small.component';
 import { NgxFileDropModule } from 'ngx-file-drop';
@@ -76,6 +77,7 @@ import { FilterPipe } from './pipes/filter.pipe';
     ToastsComponent,
     FilterEditorComponent,
     FilterDropdownComponent,
+    FilterDropdownDateComponent,
     DocumentCardLargeComponent,
     DocumentCardSmallComponent,
     TextComponent,

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

@@ -0,0 +1,41 @@
+  <div class="btn-group" ngbDropdown role="group">
+  <button class="btn btn-outline-primary btn-sm" id="dropdown{{title}}" ngbDropdownToggle>{{title}}</button>
+  <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>
+        </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">
+            <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">
+                  <path fill-rule="evenodd" d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
+                  <path d="M6.445 11.688V6.354h-.633A12.6 12.6 0 0 0 4.5 7.16v.695c.375-.257.969-.62 1.258-.777h.012v4.61h.675zm1.188-1.305c.047.64.594 1.406 1.703 1.406 1.258 0 2-1.066 2-2.871 0-1.934-.781-2.668-1.953-2.668-.926 0-1.797.672-1.797 1.809 0 1.16.824 1.77 1.676 1.77.746 0 1.23-.376 1.383-.79h.027c-.004 1.316-.461 2.164-1.305 2.164-.664 0-1.008-.45-1.05-.82h-.684zm2.953-2.317c0 .696-.559 1.18-1.184 1.18-.601 0-1.144-.383-1.144-1.2 0-.823.582-1.21 1.168-1.21.633 0 1.16.398 1.16 1.23z"/>
+                </svg>
+              </button>
+            </div>
+          </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">
+            <input class="form-control form-control-sm" type="text" placeholder="yyyy-mm-dd" name="after" [(ngModel)]="dateAfter" ngbDatepicker #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">
+                  <path fill-rule="evenodd" d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
+                  <path d="M6.445 11.688V6.354h-.633A12.6 12.6 0 0 0 4.5 7.16v.695c.375-.257.969-.62 1.258-.777h.012v4.61h.675zm1.188-1.305c.047.64.594 1.406 1.703 1.406 1.258 0 2-1.066 2-2.871 0-1.934-.781-2.668-1.953-2.668-.926 0-1.797.672-1.797 1.809 0 1.16.824 1.77 1.676 1.77.746 0 1.23-.376 1.383-.79h.027c-.004 1.316-.461 2.164-1.305 2.164-.664 0-1.008-.45-1.05-.82h-.684zm2.953-2.317c0 .696-.559 1.18-1.184 1.18-.601 0-1.144-.383-1.144-1.2 0-.823.582-1.21 1.168-1.21.633 0 1.16.398 1.16 1.23z"/>
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,3 @@
+.date-filter {
+  min-width: 250px;
+}

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

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilterDropdownDateComponent } from './filter-dropdown-date.component';
+
+describe('FilterDropdownDateComponent', () => {
+  let component: FilterDropdownDateComponent;
+  let fixture: ComponentFixture<FilterDropdownDateComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FilterDropdownDateComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilterDropdownDateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,53 @@
+import { Component, EventEmitter, Input, OnInit, Output, ElementRef, ViewChild } from '@angular/core';
+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'
+import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-filter-dropdown-date',
+  templateUrl: './filter-dropdown-date.component.html',
+  styleUrls: ['./filter-dropdown-date.component.scss']
+})
+export class FilterDropdownDateComponent extends FilterDropdownComponent {
+
+  @Input()
+  filterRuleTypeIDs: number[] = []
+
+  @Output()
+  selected = new EventEmitter()
+
+  filterRuleTypes: FilterRuleType[] = []
+  showYear: boolean = false
+  showMonth: boolean = false
+  dateAfter: NgbDateStruct
+  dateBefore: NgbDateStruct
+
+  ngOnInit(): void {
+    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) {
+    this.dateAfter = this.dateBefore = undefined
+    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() }
+        break;
+
+      case 'string':
+        let filterRuleType = this.filterRuleTypes.find(rt => rt.filtervar.indexOf(range) > -1)
+        console.log(range);
+        break;
+
+      default:
+        break;
+    }
+  }
+}

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

@@ -6,18 +6,9 @@
     <input class="form-control form-control-sm" type="text" [(ngModel)]="filterText" placeholder="Title" #filterTextInput>
   </div>
 
-  <app-filter-dropdown class="col-auto" *ngFor="let quickFilterRuleTypeID of quickFilterRuleTypeIDs"
-    [filterRuleTypeID]="quickFilterRuleTypeID"
-    (toggle)="toggleFilterByItem($event, quickFilterRuleTypeID)">
-  </app-filter-dropdown>
+  <app-filter-dropdown class="col-auto" *ngFor="let quickFilterRuleTypeID of quickFilterRuleTypeIDs" [filterRuleTypeID]="quickFilterRuleTypeID" (toggle)="toggleFilterByItem($event, quickFilterRuleTypeID)"></app-filter-dropdown>
 
-  <div class="btn-group col-auto" ngbDropdown role="group">
-    <button class="btn btn-outline-primary btn-sm" id="dropdownCreated" ngbDropdownToggle>Created</button>
-  </div>
-
-  <div class="btn-group col-auto" ngbDropdown role="group">
-    <button class="btn btn-outline-primary btn-sm" id="dropdownAdded" ngbDropdownToggle>Added</button>
-  </div>
+  <app-filter-dropdown-date class="col-auto" *ngFor="let dateAddedFilterRuleTypeID of dateAddedFilterRuleTypeIDs" [filterRuleTypeIDs]="dateAddedFilterRuleTypeID" (toggle)="toggleFilterByItem($event, quickFilterRuleTypeID)"></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

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output, ElementRef, AfterViewInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
 import { FilterRule } from 'src/app/data/filter-rule';
-import { FilterRuleType, FILTER_CORRESPONDENT, FILTER_DOCUMENT_TYPE, FILTER_HAS_TAG, FILTER_TITLE, FILTER_RULE_TYPES } from 'src/app/data/filter-rule-type';
+import { FilterRuleType, FILTER_RULE_TYPES, FILTER_CORRESPONDENT, FILTER_DOCUMENT_TYPE, FILTER_HAS_TAG, FILTER_TITLE, FILTER_ADDED_BEFORE, FILTER_ADDED_AFTER, FILTER_CREATED_BEFORE, FILTER_CREATED_AFTER, FILTER_CREATED_YEAR, FILTER_CREATED_MONTH, FILTER_CREATED_DAY } from 'src/app/data/filter-rule-type';
 import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent';
 import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
 import { PaperlessTag } from 'src/app/data/paperless-tag';
@@ -31,10 +31,11 @@ export class FilterEditorComponent implements OnInit, AfterViewInit {
   @Output()
   apply = new EventEmitter()
 
-  @ViewChild('filterTextInput') input: ElementRef;
+  @ViewChild('filterTextInput') filterTextInput: ElementRef;
   @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]]
 
   correspondents: PaperlessCorrespondent[] = []
   tags: PaperlessTag[] = []
@@ -53,7 +54,7 @@ export class FilterEditorComponent implements OnInit, AfterViewInit {
   }
 
   ngAfterViewInit() {
-    fromEvent(this.input.nativeElement,'keyup')
+    fromEvent(this.filterTextInput.nativeElement,'keyup')
         .pipe(
             debounceTime(150),
             distinctUntilChanged(),