-
-
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.ts b/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.ts
index 91402d084..e570862cd 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.ts
+++ b/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.ts
@@ -1,24 +1,37 @@
-import { Component, EventEmitter, Input, Output, ElementRef, ViewChild, SimpleChange } from '@angular/core';
-import { NgbDate, NgbDateStruct, NgbDatepicker } from '@ng-bootstrap/ng-bootstrap';
+import { formatDate } from '@angular/common';
+import { Component, EventEmitter, Input, Output, OnInit, OnDestroy } from '@angular/core';
+import { Subject, Subscription } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
export interface DateSelection {
- before?: NgbDateStruct
- after?: NgbDateStruct
+ before?: string
+ after?: string
}
+const FILTER_LAST_7_DAYS = 0
+const FILTER_LAST_MONTH = 1
+const FILTER_LAST_3_MONTHS = 2
+const FILTER_LAST_YEAR = 3
@Component({
selector: 'app-filter-dropdown-date',
templateUrl: './filter-dropdown-date.component.html',
styleUrls: ['./filter-dropdown-date.component.scss']
})
-export class FilterDropdownDateComponent {
+export class FilterDropdownDateComponent implements OnInit, OnDestroy {
+
+ quickFilters = [
+ {id: FILTER_LAST_7_DAYS, name: "Last 7 days"},
+ {id: FILTER_LAST_MONTH, name: "Last month"},
+ {id: FILTER_LAST_3_MONTHS, name: "Last 3 months"},
+ {id: FILTER_LAST_YEAR, name: "Last year"}
+ ]
@Input()
- dateBefore: NgbDateStruct
+ dateBefore: string
@Input()
- dateAfter: NgbDateStruct
+ dateAfter: string
@Input()
title: string
@@ -26,87 +39,65 @@ export class FilterDropdownDateComponent {
@Output()
datesSet = new EventEmitter
()
- @ViewChild('dpAfter') dpAfter: NgbDatepicker
- @ViewChild('dpBefore') dpBefore: NgbDatepicker
+ private datesSetDebounce$ = new Subject()
- _dateBefore: NgbDateStruct
- _dateAfter: NgbDateStruct
-
- get _maxDate(): NgbDate {
- let date = new Date()
- return NgbDate.from({year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate()})
+ private sub: Subscription
+
+ ngOnInit() {
+ this.sub = this.datesSetDebounce$.pipe(
+ debounceTime(400)
+ ).subscribe(() => {
+ this.onChange()
+ })
}
- isStringRange(range: any) {
- return typeof range == 'string'
- }
-
- ngOnChanges(changes: SimpleChange) {
- // this is a hacky workaround perhaps because of https://github.com/angular/angular/issues/11097
- let dateString: string = ''
- let dateAfterChange: SimpleChange
- let dateBeforeChange: SimpleChange
- if (changes) {
- dateAfterChange = changes['dateAfter']
- dateBeforeChange = changes['dateBefore']
+ ngOnDestroy() {
+ if (this.sub) {
+ this.sub.unsubscribe()
}
+ }
- if (this.dpBefore && this.dpAfter) {
- let dpAfterElRef: ElementRef = this.dpAfter['_elRef']
- let dpBeforeElRef: ElementRef = this.dpBefore['_elRef']
+ setDateQuickFilter(qf: number) {
+ this.dateBefore = null
+ let date = new Date()
+ switch (qf) {
+ case FILTER_LAST_7_DAYS:
+ date.setDate(date.getDate() - 7)
+ break;
- if (dateAfterChange && dateAfterChange.currentValue) {
- let dateAfterDate = dateAfterChange.currentValue as NgbDateStruct
- dateString = `${dateAfterDate.year}-${dateAfterDate.month.toString().padStart(2,'0')}-${dateAfterDate.day.toString().padStart(2,'0')}`
- dpAfterElRef.nativeElement.value = dateString
- } else if (dateBeforeChange && dateBeforeChange.currentValue) {
- let dateBeforeDate = dateBeforeChange.currentValue as NgbDateStruct
- dateString = `${dateBeforeDate.year}-${dateBeforeDate.month.toString().padStart(2,'0')}-${dateBeforeDate.day.toString().padStart(2,'0')}`
- dpBeforeElRef.nativeElement.value = dateString
- } else {
- dpAfterElRef.nativeElement.value = dateString
- dpBeforeElRef.nativeElement.value = dateString
+ case FILTER_LAST_MONTH:
+ date.setMonth(date.getMonth() - 1)
+ break;
+
+ case FILTER_LAST_3_MONTHS:
+ date.setMonth(date.getMonth() - 3)
+ break
+
+ case FILTER_LAST_YEAR:
+ date.setFullYear(date.getFullYear() - 1)
+ break
+
}
- }
+ this.dateAfter = formatDate(date, 'yyyy-MM-dd', "en-us", "UTC")
+ this.onChange()
}
- setDateQuickFilter(range: any) {
- let date = new Date()
- let newDate: NgbDateStruct = { year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate() }
- switch (typeof range) {
- case 'number':
- date.setDate(date.getDate() - range)
- newDate.year = date.getFullYear()
- newDate.month = date.getMonth() + 1
- newDate.day = date.getDate()
- break
-
- case 'string':
- newDate.day = 1
- if (range == 'year') newDate.month = 1
- break
-
- default:
- break
- }
- this._dateAfter = newDate
- this._dateBefore = null
- this.datesSet.emit({after: newDate, before: null})
+ onChange() {
+ this.datesSet.emit({after: this.dateAfter, before: this.dateBefore})
}
- onBeforeSelected(date: NgbDateStruct) {
- this._dateBefore = date
- this.datesSet.emit({after: this._dateAfter, before: date})
+ onChangeDebounce() {
+ this.datesSetDebounce$.next({after: this.dateAfter, before: this.dateBefore})
}
- onAfterSelected(date: NgbDateStruct) {
- this._dateAfter = date
- this.datesSet.emit({after: date, before: this._dateBefore})
+ clearBefore() {
+ this.dateBefore = null;
+ this.onChange()
}
- clear() {
- this._dateBefore = null
- this._dateAfter = null
- this.datesSet.emit({after: null, before: null})
+ clearAfter() {
+ this.dateAfter = null;
+ this.onChange()
}
+
}
diff --git a/src-ui/src/app/components/filter-editor/filter-editor.component.ts b/src-ui/src/app/components/filter-editor/filter-editor.component.ts
index f762c6138..913c738a5 100644
--- a/src-ui/src/app/components/filter-editor/filter-editor.component.ts
+++ b/src-ui/src/app/components/filter-editor/filter-editor.component.ts
@@ -179,54 +179,53 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
this.applyFilters()
}
- get dateCreatedBefore(): NgbDateStruct {
+ get dateCreatedBefore(): string {
let createdBeforeRule: FilterRule = this.filterRules.find(fr => fr.rule_type == FILTER_CREATED_BEFORE)
- return createdBeforeRule ? this.dateParser.parse(createdBeforeRule.value) : null
+ return createdBeforeRule ? createdBeforeRule.value : null
}
- get dateCreatedAfter(): NgbDateStruct {
+ get dateCreatedAfter(): string {
let createdAfterRule: FilterRule = this.filterRules.find(fr => fr.rule_type == FILTER_CREATED_AFTER)
- return createdAfterRule ? this.dateParser.parse(createdAfterRule.value) : null
+ return createdAfterRule ? createdAfterRule.value : null
}
- get dateAddedBefore(): NgbDateStruct {
+ get dateAddedBefore(): string {
let addedBeforeRule: FilterRule = this.filterRules.find(fr => fr.rule_type == FILTER_ADDED_BEFORE)
- return addedBeforeRule ? this.dateParser.parse(addedBeforeRule.value) : null
+ return addedBeforeRule ? addedBeforeRule.value : null
}
- get dateAddedAfter(): NgbDateStruct {
+ get dateAddedAfter(): string {
let addedAfterRule: FilterRule = this.filterRules.find(fr => fr.rule_type == FILTER_ADDED_AFTER)
- return addedAfterRule ? this.dateParser.parse(addedAfterRule.value) : null
+ return addedAfterRule ? addedAfterRule.value : null
}
- setDateCreatedBefore(date?: NgbDateStruct) {
+ setDateCreatedBefore(date?: string) {
if (date) this.setDateFilter(date, FILTER_CREATED_BEFORE)
else this.clearDateFilter(FILTER_CREATED_BEFORE)
}
- setDateCreatedAfter(date?: NgbDateStruct) {
+ setDateCreatedAfter(date?: string) {
if (date) this.setDateFilter(date, FILTER_CREATED_AFTER)
else this.clearDateFilter(FILTER_CREATED_AFTER)
}
- setDateAddedBefore(date?: NgbDateStruct) {
+ setDateAddedBefore(date?: string) {
if (date) this.setDateFilter(date, FILTER_ADDED_BEFORE)
else this.clearDateFilter(FILTER_ADDED_BEFORE)
}
- setDateAddedAfter(date?: NgbDateStruct) {
+ setDateAddedAfter(date?: string) {
if (date) this.setDateFilter(date, FILTER_ADDED_AFTER)
else this.clearDateFilter(FILTER_ADDED_AFTER)
}
- setDateFilter(date: NgbDateStruct, dateRuleTypeID: number) {
+ setDateFilter(date: string, dateRuleTypeID: number) {
let existingRule = this.filterRules.find(rule => rule.rule_type == dateRuleTypeID)
- let newValue = this.dateParser.format(date)
if (existingRule) {
- existingRule.value = newValue
+ existingRule.value = date
} else {
- this.filterRules.push({rule_type: dateRuleTypeID, value: newValue})
+ this.filterRules.push({rule_type: dateRuleTypeID, value: date})
}
}
diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index b0b66b7f9..6e09db630 100644
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -1,7 +1,6 @@
@import "theme";
-
@import "node_modules/bootstrap/scss/bootstrap";
-
+@import "~@ng-select/ng-select/themes/default.theme.css";
.toolbaricon {
width: 1.2em;
@@ -20,7 +19,7 @@
}
body {
- font-size: .875rem;
+ font-size: 0.875rem;
}
.form-control-dark {
@@ -65,4 +64,39 @@ body {
display: block;
background-size: 1rem;
float: right;
-}
\ No newline at end of file
+}
+
+.paperless-input-select {
+ .ng-select {
+ position: relative;
+ flex: 1 1 auto;
+ margin-bottom: 0;
+ min-height: calc(1.5em + 0.75rem + 5px);
+ line-height: 1.5;
+
+ .ng-select-container {
+ height: 100%;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+
+ .ng-value-container .ng-input {
+ top: 10px;
+ }
+ }
+
+ .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,
+ .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked {
+ background: none;
+ }
+ }
+}
+
+.paperless-input-tags {
+ .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
+ background-color: transparent;
+ }
+
+ .ng-select.ng-select-multiple .ng-select-container .ng-value-container {
+ padding-top: 1px;
+ }
+}