diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.scss b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.scss
index e6045629b..8573ab575 100644
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.scss
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.scss
@@ -5,3 +5,8 @@
line-height: 1;
}
}
+
+.selected-icon {
+ min-width: 1em;
+ min-height: 1em;
+}
diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
index f9d90ae7a..e901acfeb 100644
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
@@ -16,12 +16,15 @@ import { ISODateAdapter } from 'src/app/utils/ngb-iso-date-adapter'
export interface DateSelection {
before?: string
after?: string
+ relativeDateID?: number
}
-const LAST_7_DAYS = 0
-const LAST_MONTH = 1
-const LAST_3_MONTHS = 2
-const LAST_YEAR = 3
+export enum RelativeDate {
+ LAST_7_DAYS = 0,
+ LAST_MONTH = 1,
+ LAST_3_MONTHS = 2,
+ LAST_YEAR = 3,
+}
@Component({
selector: 'app-date-dropdown',
@@ -34,11 +37,23 @@ export class DateDropdownComponent implements OnInit, OnDestroy {
this.datePlaceHolder = settings.getLocalizedDateInputFormat()
}
- quickFilters = [
- { id: LAST_7_DAYS, name: $localize`Last 7 days` },
- { id: LAST_MONTH, name: $localize`Last month` },
- { id: LAST_3_MONTHS, name: $localize`Last 3 months` },
- { id: LAST_YEAR, name: $localize`Last year` },
+ relativeDates = [
+ {
+ date: RelativeDate.LAST_7_DAYS,
+ name: $localize`Last 7 days`,
+ },
+ {
+ date: RelativeDate.LAST_MONTH,
+ name: $localize`Last month`,
+ },
+ {
+ date: RelativeDate.LAST_3_MONTHS,
+ name: $localize`Last 3 months`,
+ },
+ {
+ date: RelativeDate.LAST_YEAR,
+ name: $localize`Last year`,
+ },
]
datePlaceHolder: string
@@ -55,12 +70,26 @@ export class DateDropdownComponent implements OnInit, OnDestroy {
@Output()
dateAfterChange = new EventEmitter
()
+ @Input()
+ relativeDate: RelativeDate
+
+ @Output()
+ relativeDateChange = new EventEmitter()
+
@Input()
title: string
@Output()
datesSet = new EventEmitter()
+ get isActive(): boolean {
+ return (
+ this.relativeDate !== null ||
+ this.dateAfter?.length > 0 ||
+ this.dateBefore?.length > 0
+ )
+ }
+
private datesSetDebounce$ = new Subject()
private sub: Subscription
@@ -77,37 +106,33 @@ export class DateDropdownComponent implements OnInit, OnDestroy {
}
}
- setDateQuickFilter(qf: number) {
+ reset() {
this.dateBefore = null
- let date = new Date()
- switch (qf) {
- case LAST_7_DAYS:
- date.setDate(date.getDate() - 7)
- break
+ this.dateAfter = null
+ this.relativeDate = null
+ this.onChange()
+ }
- case LAST_MONTH:
- date.setMonth(date.getMonth() - 1)
- break
-
- case LAST_3_MONTHS:
- date.setMonth(date.getMonth() - 3)
- break
-
- case LAST_YEAR:
- date.setFullYear(date.getFullYear() - 1)
- break
- }
- this.dateAfter = formatDate(date, 'yyyy-MM-dd', 'en-us', 'UTC')
+ setRelativeDate(rd: RelativeDate) {
+ this.dateBefore = null
+ this.dateAfter = null
+ this.relativeDate = this.relativeDate == rd ? null : rd
this.onChange()
}
onChange() {
- this.dateAfterChange.emit(this.dateAfter)
this.dateBeforeChange.emit(this.dateBefore)
- this.datesSet.emit({ after: this.dateAfter, before: this.dateBefore })
+ this.dateAfterChange.emit(this.dateAfter)
+ this.relativeDateChange.emit(this.relativeDate)
+ this.datesSet.emit({
+ after: this.dateAfter,
+ before: this.dateBefore,
+ relativeDateID: this.relativeDate,
+ })
}
onChangeDebounce() {
+ this.relativeDate = null
this.datesSetDebounce$.next({
after: this.dateAfter,
before: this.dateBefore,
diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
index d5eb29e90..9ce3c8da2 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
@@ -5,12 +5,7 @@
{{title}}
-
- {{selectionModel.totalCount}}selected
-
-
- selected
-
+
diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts
index 9a16b4426..373f0aa5d 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts
@@ -384,4 +384,9 @@ export class FilterableDropdownComponent {
this.selectionModel.exclude(itemID)
}
}
+
+ reset() {
+ this.selectionModel.reset()
+ this.selectionModelChange.emit(this.selectionModel)
+ }
}
diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index ca725b175..9357813f6 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -60,14 +60,19 @@
-
+
-
+