From b399790681f20d83886f639fb8bb30ef1c8cd0b7 Mon Sep 17 00:00:00 2001 From: shamoon <4887959+shamoon@users.noreply.github.com> Date: Tue, 23 Apr 2024 22:46:25 -0700 Subject: [PATCH] Unified date filter --- .../e2e/document-list/document-list.spec.ts | 9 +- src-ui/src/app/app.module.ts | 6 +- .../date-dropdown.component.html | 71 ------ .../date-dropdown/date-dropdown.component.ts | 164 ------------- .../dates-dropdown.component.html | 143 ++++++++++++ .../dates-dropdown.component.scss} | 4 + .../dates-dropdown.component.spec.ts} | 78 ++++--- .../dates-dropdown.component.ts | 219 ++++++++++++++++++ .../document-list.component.spec.ts | 4 +- .../filter-editor.component.html | 20 +- .../filter-editor.component.spec.ts | 52 ++--- .../filter-editor/filter-editor.component.ts | 2 +- 12 files changed, 464 insertions(+), 308 deletions(-) delete mode 100644 src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html delete mode 100644 src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts create mode 100644 src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.html rename src-ui/src/app/components/common/{date-dropdown/date-dropdown.component.scss => dates-dropdown/dates-dropdown.component.scss} (66%) rename src-ui/src/app/components/common/{date-dropdown/date-dropdown.component.spec.ts => dates-dropdown/dates-dropdown.component.spec.ts} (61%) create mode 100644 src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.ts diff --git a/src-ui/e2e/document-list/document-list.spec.ts b/src-ui/e2e/document-list/document-list.spec.ts index e974d36a1..da2454e7f 100644 --- a/src-ui/e2e/document-list/document-list.spec.ts +++ b/src-ui/e2e/document-list/document-list.spec.ts @@ -81,14 +81,15 @@ test('text filtering', async ({ page }) => { test('date filtering', async ({ page }) => { await page.routeFromHAR(REQUESTS_HAR3, { notFound: 'fallback' }) await page.goto('/documents') - await page.getByRole('button', { name: 'Created' }).click() - await page.getByRole('menuitem', { name: 'Last 3 months' }).click() + await page.getByRole('button', { name: 'Dates' }).click() + await page.getByRole('menuitem', { name: 'Last 3 months' }).first().click() await expect(page.locator('pngx-document-list')).toHaveText(/one document/i) - await page.getByRole('button', { name: 'Created Clear selected' }).click() - await page.getByRole('button', { name: 'Created' }).click() + await page.getByRole('button', { name: 'Dates Clear selected' }).click() + await page.getByRole('button', { name: 'Dates' }).click() await page .getByRole('menuitem', { name: 'After mm/dd/yyyy' }) .getByRole('button') + .first() .click() await page.getByRole('combobox', { name: 'Select month' }).selectOption('12') await page.getByRole('combobox', { name: 'Select year' }).selectOption('2022') diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts index ab33840a2..416cfd129 100644 --- a/src-ui/src/app/app.module.ts +++ b/src-ui/src/app/app.module.ts @@ -31,7 +31,7 @@ import { ToastsComponent } from './components/common/toasts/toasts.component' import { FilterEditorComponent } from './components/document-list/filter-editor/filter-editor.component' import { FilterableDropdownComponent } from './components/common/filterable-dropdown/filterable-dropdown.component' import { ToggleableDropdownButtonComponent } from './components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component' -import { DateDropdownComponent } from './components/common/date-dropdown/date-dropdown.component' +import { DatesDropdownComponent } from './components/common/dates-dropdown/dates-dropdown.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 { BulkEditorComponent } from './components/document-list/bulk-editor/bulk-editor.component' @@ -140,6 +140,7 @@ import { boxes, calendar, calendarEvent, + calendarEventFill, cardChecklist, cardHeading, caretDown, @@ -235,6 +236,7 @@ const icons = { boxes, calendar, calendarEvent, + calendarEventFill, cardChecklist, cardHeading, caretDown, @@ -407,7 +409,7 @@ function initializeApp(settings: SettingsService) { FilterEditorComponent, FilterableDropdownComponent, ToggleableDropdownButtonComponent, - DateDropdownComponent, + DatesDropdownComponent, DocumentCardLargeComponent, DocumentCardSmallComponent, BulkEditorComponent, diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html deleted file mode 100644 index 8556495d4..000000000 --- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html +++ /dev/null @@ -1,71 +0,0 @@ -
- -
-
- @for (rd of relativeDates; track rd) { - - } - - -
-
-
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 deleted file mode 100644 index f47489699..000000000 --- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts +++ /dev/null @@ -1,164 +0,0 @@ -import { - Component, - EventEmitter, - Input, - Output, - OnInit, - OnDestroy, -} from '@angular/core' -import { NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap' -import { Subject, Subscription } from 'rxjs' -import { debounceTime } from 'rxjs/operators' -import { SettingsService } from 'src/app/services/settings.service' -import { ISODateAdapter } from 'src/app/utils/ngb-iso-date-adapter' - -export interface DateSelection { - before?: string - after?: string - relativeDateID?: number -} - -export enum RelativeDate { - LAST_7_DAYS = 0, - LAST_MONTH = 1, - LAST_3_MONTHS = 2, - LAST_YEAR = 3, -} - -@Component({ - selector: 'pngx-date-dropdown', - templateUrl: './date-dropdown.component.html', - styleUrls: ['./date-dropdown.component.scss'], - providers: [{ provide: NgbDateAdapter, useClass: ISODateAdapter }], -}) -export class DateDropdownComponent implements OnInit, OnDestroy { - constructor(settings: SettingsService) { - this.datePlaceHolder = settings.getLocalizedDateInputFormat() - } - - relativeDates = [ - { - id: RelativeDate.LAST_7_DAYS, - name: $localize`Last 7 days`, - date: new Date().setDate(new Date().getDate() - 7), - }, - { - id: RelativeDate.LAST_MONTH, - name: $localize`Last month`, - date: new Date().setMonth(new Date().getMonth() - 1), - }, - { - id: RelativeDate.LAST_3_MONTHS, - name: $localize`Last 3 months`, - date: new Date().setMonth(new Date().getMonth() - 3), - }, - { - id: RelativeDate.LAST_YEAR, - name: $localize`Last year`, - date: new Date().setFullYear(new Date().getFullYear() - 1), - }, - ] - - datePlaceHolder: string - - @Input() - dateBefore: string - - @Output() - dateBeforeChange = new EventEmitter() - - @Input() - dateAfter: string - - @Output() - dateAfterChange = new EventEmitter() - - @Input() - relativeDate: RelativeDate - - @Output() - relativeDateChange = new EventEmitter() - - @Input() - title: string - - @Output() - datesSet = new EventEmitter() - - @Input() - disabled: boolean = false - - get isActive(): boolean { - return ( - this.relativeDate !== null || - this.dateAfter?.length > 0 || - this.dateBefore?.length > 0 - ) - } - - private datesSetDebounce$ = new Subject() - - private sub: Subscription - - ngOnInit() { - this.sub = this.datesSetDebounce$.pipe(debounceTime(400)).subscribe(() => { - this.onChange() - }) - } - - ngOnDestroy() { - if (this.sub) { - this.sub.unsubscribe() - } - } - - reset() { - this.dateBefore = null - this.dateAfter = null - this.relativeDate = null - this.onChange() - } - - setRelativeDate(rd: RelativeDate) { - this.dateBefore = null - this.dateAfter = null - this.relativeDate = this.relativeDate == rd ? null : rd - this.onChange() - } - - onChange() { - this.dateBeforeChange.emit(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, - }) - } - - clearBefore() { - this.dateBefore = null - this.onChange() - } - - clearAfter() { - this.dateAfter = null - this.onChange() - } - - // prevent chars other than numbers and separators - onKeyPress(event: KeyboardEvent) { - if ('Enter' !== event.key && !/[0-9,\.\/-]+/.test(event.key)) { - event.preventDefault() - } - } -} diff --git a/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.html b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.html new file mode 100644 index 000000000..f4c357f52 --- /dev/null +++ b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.html @@ -0,0 +1,143 @@ +
+ +
+
+
+
+
Created
+ @for (rd of relativeDates; track rd) { + + } + + +
+
+
+
Added
+
+ @for (rd of relativeDates; track rd) { + + } + + +
+
+
+
+
diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.scss b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.scss similarity index 66% rename from src-ui/src/app/components/common/date-dropdown/date-dropdown.component.scss rename to src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.scss index 83ac93233..f8e09e1b2 100644 --- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.scss +++ b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.scss @@ -1,6 +1,10 @@ .date-dropdown { white-space: nowrap; + @media(min-width: 768px) { + --bs-dropdown-min-width: 40rem; + } + .btn-link { line-height: 1; } diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.spec.ts b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.spec.ts similarity index 61% rename from src-ui/src/app/components/common/date-dropdown/date-dropdown.component.spec.ts rename to src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.spec.ts index e445a73b7..03338f014 100644 --- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.spec.ts +++ b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.spec.ts @@ -4,12 +4,12 @@ import { fakeAsync, tick, } from '@angular/core/testing' -let fixture: ComponentFixture +let fixture: ComponentFixture import { - DateDropdownComponent, + DatesDropdownComponent, DateSelection, RelativeDate, -} from './date-dropdown.component' +} from './dates-dropdown.component' import { HttpClientTestingModule } from '@angular/common/http/testing' import { NgbModule } from '@ng-bootstrap/ng-bootstrap' import { SettingsService } from 'src/app/services/settings.service' @@ -19,15 +19,15 @@ import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe' import { DatePipe } from '@angular/common' import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons' -describe('DateDropdownComponent', () => { - let component: DateDropdownComponent +describe('DatesDropdownComponent', () => { + let component: DatesDropdownComponent let settingsService: SettingsService let settingsSpy beforeEach(async () => { TestBed.configureTestingModule({ declarations: [ - DateDropdownComponent, + DatesDropdownComponent, ClearableBadgeComponent, CustomDatePipe, ], @@ -44,7 +44,7 @@ describe('DateDropdownComponent', () => { settingsService = TestBed.inject(SettingsService) settingsSpy = jest.spyOn(settingsService, 'getLocalizedDateInputFormat') - fixture = TestBed.createComponent(DateDropdownComponent) + fixture = TestBed.createComponent(DatesDropdownComponent) component = fixture.componentInstance fixture.detectChanges() @@ -57,7 +57,7 @@ describe('DateDropdownComponent', () => { it('should support date input, emit change', fakeAsync(() => { let result: string - component.dateAfterChange.subscribe((date) => (result = date)) + component.createdDateAfterChange.subscribe((date) => (result = date)) const input: HTMLInputElement = fixture.nativeElement.querySelector('input') input.value = '5/30/2023' input.dispatchEvent(new Event('change')) @@ -78,45 +78,69 @@ describe('DateDropdownComponent', () => { it('should support relative dates', fakeAsync(() => { let result: DateSelection component.datesSet.subscribe((date) => (result = date)) - component.setRelativeDate(null) - component.setRelativeDate(RelativeDate.LAST_7_DAYS) + component.setCreatedRelativeDate(null) + component.setCreatedRelativeDate(RelativeDate.LAST_7_DAYS) + component.setAddedRelativeDate(null) + component.setAddedRelativeDate(RelativeDate.LAST_7_DAYS) tick(500) expect(result).toEqual({ - after: null, - before: null, - relativeDateID: RelativeDate.LAST_7_DAYS, + createdAfter: null, + createdBefore: null, + createdRelativeDateID: RelativeDate.LAST_7_DAYS, + addedAfter: null, + addedBefore: null, + addedRelativeDateID: RelativeDate.LAST_7_DAYS, }) })) it('should support report if active', () => { - component.relativeDate = RelativeDate.LAST_7_DAYS + component.createdRelativeDate = RelativeDate.LAST_7_DAYS expect(component.isActive).toBeTruthy() - component.relativeDate = null - component.dateAfter = '2023-05-30' + component.createdRelativeDate = null + component.createdDateAfter = '2023-05-30' expect(component.isActive).toBeTruthy() - component.dateAfter = null - component.dateBefore = '2023-05-30' + component.createdDateAfter = null + component.createdDateBefore = '2023-05-30' expect(component.isActive).toBeTruthy() - component.dateBefore = null + component.createdDateBefore = null + + component.addedRelativeDate = RelativeDate.LAST_7_DAYS + expect(component.isActive).toBeTruthy() + component.addedRelativeDate = null + component.addedDateAfter = '2023-05-30' + expect(component.isActive).toBeTruthy() + component.addedDateAfter = null + component.addedDateBefore = '2023-05-30' + expect(component.isActive).toBeTruthy() + component.addedDateBefore = null + expect(component.isActive).toBeFalsy() }) it('should support reset', () => { - component.dateAfter = '2023-05-30' + component.createdDateAfter = '2023-05-30' component.reset() - expect(component.dateAfter).toBeNull() + expect(component.createdDateAfter).toBeNull() }) it('should support clearAfter', () => { - component.dateAfter = '2023-05-30' - component.clearAfter() - expect(component.dateAfter).toBeNull() + component.createdDateAfter = '2023-05-30' + component.clearCreatedAfter() + expect(component.createdDateAfter).toBeNull() + + component.addedDateAfter = '2023-05-30' + component.clearAddedAfter() + expect(component.addedDateAfter).toBeNull() }) it('should support clearBefore', () => { - component.dateBefore = '2023-05-30' - component.clearBefore() - expect(component.dateBefore).toBeNull() + component.createdDateBefore = '2023-05-30' + component.clearCreatedBefore() + expect(component.createdDateBefore).toBeNull() + + component.addedDateBefore = '2023-05-30' + component.clearAddedBefore() + expect(component.addedDateBefore).toBeNull() }) it('should limit keyboard events', () => { diff --git a/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.ts b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.ts new file mode 100644 index 000000000..966e9640a --- /dev/null +++ b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.ts @@ -0,0 +1,219 @@ +import { + Component, + EventEmitter, + Input, + Output, + OnInit, + OnDestroy, +} from '@angular/core' +import { NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap' +import { Subject, Subscription } from 'rxjs' +import { debounceTime } from 'rxjs/operators' +import { SettingsService } from 'src/app/services/settings.service' +import { ISODateAdapter } from 'src/app/utils/ngb-iso-date-adapter' + +export interface DateSelection { + createdBefore?: string + createdAfter?: string + createdRelativeDateID?: number + addedBefore?: string + addedAfter?: string + addedRelativeDateID?: number +} + +export enum RelativeDate { + LAST_7_DAYS = 0, + LAST_MONTH = 1, + LAST_3_MONTHS = 2, + LAST_YEAR = 3, +} + +@Component({ + selector: 'pngx-dates-dropdown', + templateUrl: './dates-dropdown.component.html', + styleUrls: ['./dates-dropdown.component.scss'], + providers: [{ provide: NgbDateAdapter, useClass: ISODateAdapter }], +}) +export class DatesDropdownComponent implements OnInit, OnDestroy { + constructor(settings: SettingsService) { + this.datePlaceHolder = settings.getLocalizedDateInputFormat() + } + + relativeDates = [ + { + id: RelativeDate.LAST_7_DAYS, + name: $localize`Last 7 days`, + date: new Date().setDate(new Date().getDate() - 7), + }, + { + id: RelativeDate.LAST_MONTH, + name: $localize`Last month`, + date: new Date().setMonth(new Date().getMonth() - 1), + }, + { + id: RelativeDate.LAST_3_MONTHS, + name: $localize`Last 3 months`, + date: new Date().setMonth(new Date().getMonth() - 3), + }, + { + id: RelativeDate.LAST_YEAR, + name: $localize`Last year`, + date: new Date().setFullYear(new Date().getFullYear() - 1), + }, + ] + + datePlaceHolder: string + + // created + @Input() + createdDateBefore: string + + @Output() + createdDateBeforeChange = new EventEmitter() + + @Input() + createdDateAfter: string + + @Output() + createdDateAfterChange = new EventEmitter() + + @Input() + createdRelativeDate: RelativeDate + + @Output() + createdRelativeDateChange = new EventEmitter() + + // added + @Input() + addedDateBefore: string + + @Output() + addedDateBeforeChange = new EventEmitter() + + @Input() + addedDateAfter: string + + @Output() + addedDateAfterChange = new EventEmitter() + + @Input() + addedRelativeDate: RelativeDate + + @Output() + addedRelativeDateChange = new EventEmitter() + + @Input() + title: string + + @Output() + datesSet = new EventEmitter() + + @Input() + disabled: boolean = false + + get isActive(): boolean { + return ( + this.createdRelativeDate !== null || + this.createdDateAfter?.length > 0 || + this.createdDateBefore?.length > 0 || + this.addedRelativeDate !== null || + this.addedDateAfter?.length > 0 || + this.addedDateBefore?.length > 0 + ) + } + + private datesSetDebounce$ = new Subject() + + private sub: Subscription + + ngOnInit() { + this.sub = this.datesSetDebounce$.pipe(debounceTime(400)).subscribe(() => { + this.onChange() + }) + } + + ngOnDestroy() { + if (this.sub) { + this.sub.unsubscribe() + } + } + + reset() { + this.createdDateBefore = null + this.createdDateAfter = null + this.createdRelativeDate = null + this.addedDateBefore = null + this.addedDateAfter = null + this.addedRelativeDate = null + this.onChange() + } + + setCreatedRelativeDate(rd: RelativeDate) { + this.createdDateBefore = null + this.createdDateAfter = null + this.createdRelativeDate = this.createdRelativeDate == rd ? null : rd + this.onChange() + } + + setAddedRelativeDate(rd: RelativeDate) { + this.addedDateBefore = null + this.addedDateAfter = null + this.addedRelativeDate = this.addedRelativeDate == rd ? null : rd + this.onChange() + } + + onChange() { + this.createdDateBeforeChange.emit(this.createdDateBefore) + this.createdDateAfterChange.emit(this.createdDateAfter) + this.createdRelativeDateChange.emit(this.createdRelativeDate) + this.addedDateBeforeChange.emit(this.addedDateBefore) + this.addedDateAfterChange.emit(this.addedDateAfter) + this.addedRelativeDateChange.emit(this.addedRelativeDate) + this.datesSet.emit({ + createdAfter: this.createdDateAfter, + createdBefore: this.createdDateBefore, + createdRelativeDateID: this.createdRelativeDate, + addedAfter: this.addedDateAfter, + addedBefore: this.addedDateBefore, + addedRelativeDateID: this.addedRelativeDate, + }) + } + + onChangeDebounce() { + this.createdRelativeDate = null + this.addedRelativeDate = null + this.datesSetDebounce$.next({ + createdAfter: this.createdDateAfter, + createdBefore: this.createdDateBefore, + addedAfter: this.addedDateAfter, + addedBefore: this.addedDateBefore, + }) + } + + clearCreatedBefore() { + this.createdDateBefore = null + this.onChange() + } + + clearCreatedAfter() { + this.createdDateAfter = null + this.onChange() + } + + clearAddedBefore() { + this.addedDateBefore = null + this.onChange() + } + + clearAddedAfter() { + this.addedDateAfter = null + this.onChange() + } + + // prevent chars other than numbers and separators + onKeyPress(event: KeyboardEvent) { + if ('Enter' !== event.key && !/[0-9,\.\/-]+/.test(event.key)) { + event.preventDefault() + } + } +} diff --git a/src-ui/src/app/components/document-list/document-list.component.spec.ts b/src-ui/src/app/components/document-list/document-list.component.spec.ts index 237520f33..4c2f48765 100644 --- a/src-ui/src/app/components/document-list/document-list.component.spec.ts +++ b/src-ui/src/app/components/document-list/document-list.component.spec.ts @@ -5,7 +5,7 @@ import { RouterTestingModule } from '@angular/router/testing' import { routes } from 'src/app/app-routing.module' import { FilterEditorComponent } from './filter-editor/filter-editor.component' import { PermissionsFilterDropdownComponent } from '../common/permissions-filter-dropdown/permissions-filter-dropdown.component' -import { DateDropdownComponent } from '../common/date-dropdown/date-dropdown.component' +import { DatesDropdownComponent } from '../common/dates-dropdown/dates-dropdown.component' import { FilterableDropdownComponent } from '../common/filterable-dropdown/filterable-dropdown.component' import { PageHeaderComponent } from '../common/page-header/page-header.component' import { BulkEditorComponent } from './bulk-editor/bulk-editor.component' @@ -113,7 +113,7 @@ describe('DocumentListComponent', () => { PageHeaderComponent, FilterEditorComponent, FilterableDropdownComponent, - DateDropdownComponent, + DatesDropdownComponent, PermissionsFilterDropdownComponent, ToggleableDropdownButtonComponent, BulkEditorComponent, diff --git a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html index ceb19f4ea..5e6f162ec 100644 --- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html +++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html @@ -84,18 +84,16 @@ }
- - + [(createdDateBefore)]="dateCreatedBefore" + [(createdDateAfter)]="dateCreatedAfter" + [(createdRelativeDate)]="dateCreatedRelativeDate" + [(addedDateBefore)]="dateAddedBefore" + [(addedDateAfter)]="dateAddedAfter" + [(addedRelativeDate)]="dateAddedRelativeDate"> +
{ IfPermissionsDirective, ClearableBadgeComponent, ToggleableDropdownButtonComponent, - DateDropdownComponent, + DatesDropdownComponent, CustomDatePipe, ], providers: [ @@ -1517,7 +1517,7 @@ describe('FilterEditorComponent', () => { it('should convert user input to correct filter rules on date created after', fakeAsync(() => { const dateCreatedDropdown = fixture.debugElement.queryAll( - By.directive(DateDropdownComponent) + By.directive(DatesDropdownComponent) )[0] const dateCreatedAfter = dateCreatedDropdown.queryAll(By.css('input'))[0] @@ -1537,7 +1537,7 @@ describe('FilterEditorComponent', () => { it('should convert user input to correct filter rules on date created before', fakeAsync(() => { const dateCreatedDropdown = fixture.debugElement.queryAll( - By.directive(DateDropdownComponent) + By.directive(DatesDropdownComponent) )[0] const dateCreatedBefore = dateCreatedDropdown.queryAll(By.css('input'))[1] @@ -1557,7 +1557,7 @@ describe('FilterEditorComponent', () => { it('should convert user input to correct filter rules on date created with relative date', fakeAsync(() => { const dateCreatedDropdown = fixture.debugElement.queryAll( - By.directive(DateDropdownComponent) + By.directive(DatesDropdownComponent) )[0] const dateCreatedBeforeRelativeButton = dateCreatedDropdown.queryAll( By.css('button') @@ -1576,7 +1576,7 @@ describe('FilterEditorComponent', () => { it('should carry over text filtering on date created with relative date', fakeAsync(() => { component.textFilter = 'foo' const dateCreatedDropdown = fixture.debugElement.queryAll( - By.directive(DateDropdownComponent) + By.directive(DatesDropdownComponent) )[0] const dateCreatedBeforeRelativeButton = dateCreatedDropdown.queryAll( By.css('button') @@ -1621,10 +1621,10 @@ describe('FilterEditorComponent', () => { })) it('should convert user input to correct filter rules on date added after', fakeAsync(() => { - const dateAddedDropdown = fixture.debugElement.queryAll( - By.directive(DateDropdownComponent) - )[1] - const dateAddedAfter = dateAddedDropdown.queryAll(By.css('input'))[0] + const datesDropdown = fixture.debugElement.query( + By.directive(DatesDropdownComponent) + ) + const dateAddedAfter = datesDropdown.queryAll(By.css('input'))[2] dateAddedAfter.nativeElement.value = '05/14/2023' // dateAddedAfter.triggerEventHandler('change') @@ -1641,10 +1641,10 @@ describe('FilterEditorComponent', () => { })) it('should convert user input to correct filter rules on date added before', fakeAsync(() => { - const dateAddedDropdown = fixture.debugElement.queryAll( - By.directive(DateDropdownComponent) - )[1] - const dateAddedBefore = dateAddedDropdown.queryAll(By.css('input'))[1] + const datesDropdown = fixture.debugElement.query( + By.directive(DatesDropdownComponent) + ) + const dateAddedBefore = datesDropdown.queryAll(By.css('input'))[2] dateAddedBefore.nativeElement.value = '05/14/2023' // dateAddedBefore.triggerEventHandler('change') @@ -1661,38 +1661,38 @@ describe('FilterEditorComponent', () => { })) it('should convert user input to correct filter rules on date added with relative date', fakeAsync(() => { - const dateAddedDropdown = fixture.debugElement.queryAll( - By.directive(DateDropdownComponent) - )[1] - const dateAddedBeforeRelativeButton = dateAddedDropdown.queryAll( + const datesDropdown = fixture.debugElement.query( + By.directive(DatesDropdownComponent) + ) + const dateCreatedBeforeRelativeButton = datesDropdown.queryAll( By.css('button') )[1] - dateAddedBeforeRelativeButton.triggerEventHandler('click') + dateCreatedBeforeRelativeButton.triggerEventHandler('click') fixture.detectChanges() tick(400) expect(component.filterRules).toEqual([ { rule_type: FILTER_FULLTEXT_QUERY, - value: 'added:[-1 week to now]', + value: 'created:[-1 week to now]', }, ]) })) it('should carry over text filtering on date added with relative date', fakeAsync(() => { component.textFilter = 'foo' - const dateAddedDropdown = fixture.debugElement.queryAll( - By.directive(DateDropdownComponent) - )[1] - const dateAddedBeforeRelativeButton = dateAddedDropdown.queryAll( + const datesDropdown = fixture.debugElement.query( + By.directive(DatesDropdownComponent) + ) + const dateCreatedBeforeRelativeButton = datesDropdown.queryAll( By.css('button') )[1] - dateAddedBeforeRelativeButton.triggerEventHandler('click') + dateCreatedBeforeRelativeButton.triggerEventHandler('click') fixture.detectChanges() tick(400) expect(component.filterRules).toEqual([ { rule_type: FILTER_FULLTEXT_QUERY, - value: 'foo,added:[-1 week to now]', + value: 'foo,created:[-1 week to now]', }, ]) })) diff --git a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts index c8547f391..b59ae53f1 100644 --- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts +++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts @@ -69,7 +69,7 @@ import { import { Document } from 'src/app/data/document' import { StoragePath } from 'src/app/data/storage-path' import { StoragePathService } from 'src/app/services/rest/storage-path.service' -import { RelativeDate } from '../../common/date-dropdown/date-dropdown.component' +import { RelativeDate } from '../../common/dates-dropdown/dates-dropdown.component' import { OwnerFilterType, PermissionsSelectionModel,