diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html b/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html index 6f6a42fe2..aca6e836c 100644 --- a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html +++ b/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html @@ -4,38 +4,39 @@
- -
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}) } }