mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ACS-6107] Replaced SearchDateRange component with SearchDateRangeAdvanced Component (#9023)
* [ACS-6107] Removed date range component from ADF content-services * [ACS-6107] Removed references of date range component in code * [ACS-6107] Updated documentation to replace occurrences of date range component with date-range-advanced-tabbed component * [ACS-6107] Renamed DateRangeAdvanced to DateRange. Renamed DateRangeAdvancedTabbed to DateRangeTabbed * [ACS-6107] Fixed missing export of SearchDateRangeTabbedComponent * [ACS-6107] Replaced occurrences of date-range-advanced with date-range in HTML and Unit Tests automation ids * [ACS-6107] Documentation corrections * [ACS-6107] Reverted unneeded documentation formatting * [ACS-6107] Reverted unneeded documentation formatting * [ACS-6107] Reverted unneeded documentation formatting * [ACS-6107] Migrated unneeded E2E test case to unit test * [ACS-6107] Removed search-date-range E2E * [ACS-6107] Resolved PR comments. Removed date-range-filter.page.ts. Removed unused translation keys. Updated documentation to refer proper comment name * [ACS-6107] Updated documentation for SearchDateRange component to mention the change from original configuration to the newer configuration * [ACS-6107] Corrected wrong version in documentation * [ci:force] * [ACS-6107] Removed unneeded file * [ACS-6107] Updated unit tests and mock data after rebase * [ci:force] * [ACS-6107] Revert unneeded change. Remove unneeded file * [ci:force] * [ACS-6107] Updated E2E search config * [ci:force] * [ACS-6107] Updated E2E expects after component changes * [ci:force]
This commit is contained in:
swapnil-verma-gl
GitHub
@@ -319,9 +319,7 @@
|
||||
"FROM": "From",
|
||||
"TO": "To",
|
||||
"FROM-DATE": "From",
|
||||
"TO-DATE": "To",
|
||||
"SELECT-FROM-DATE": "Select From Date",
|
||||
"SELECT-TO-DATE": "Select To Date"
|
||||
"TO-DATE": "To"
|
||||
},
|
||||
"VALIDATION": {
|
||||
"REQUIRED-VALUE": "Required value",
|
||||
@@ -378,14 +376,14 @@
|
||||
}
|
||||
},
|
||||
"UNKNOWN_CONFIGURATION": "Unknown Configuration",
|
||||
"SEARCH_HEADER" : {
|
||||
"TITLE":"Filter",
|
||||
"SEARCH_HEADER": {
|
||||
"TITLE": "Filter",
|
||||
"TYPE": "Type",
|
||||
"FILTER_BY": "Filter by {{ category }}",
|
||||
"CLEAR": "Clear",
|
||||
"APPLY": "Apply",
|
||||
"FILTERS" : {
|
||||
"NAME" : {
|
||||
"FILTERS": {
|
||||
"NAME": {
|
||||
"TITLE": "Name",
|
||||
"PLACEHOLDER": "Enter the name"
|
||||
},
|
||||
@@ -395,14 +393,14 @@
|
||||
"DOCUMENT": "Document"
|
||||
},
|
||||
"SIZE": {
|
||||
"TITLE" : "Content Size (range)",
|
||||
"TITLE": "Content Size (range)",
|
||||
"SMALL": "Small",
|
||||
"MEDIUM": "Medium",
|
||||
"LARGE": "Large",
|
||||
"HUGE": "Huge"
|
||||
},
|
||||
"DATE" :{
|
||||
"TITLE" : "Created Date (range)"
|
||||
"DATE": {
|
||||
"TITLE": "Created Date (range)"
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -493,15 +491,15 @@
|
||||
"ADD_TAG_TOOLTIP": "Add tag"
|
||||
},
|
||||
"CONTENT_TYPE": {
|
||||
"DIALOG" :{
|
||||
"TITLE" : "Change content type",
|
||||
"DIALOG": {
|
||||
"TITLE": "Change content type",
|
||||
"DESCRIPTION": "Making this change to the content type will permanently add some properties and stored metadata to the document.",
|
||||
"CONFIRM": "Are you sure you want to change the content type?",
|
||||
"CANCEL": "CANCEL",
|
||||
"APPLY": "SAVE CHANGES",
|
||||
"VIEW_DETAILS": "View details",
|
||||
"PROPERTY" :{
|
||||
"NAME" : "Name",
|
||||
"PROPERTY": {
|
||||
"NAME": "Name",
|
||||
"DESCRIPTION": "Description",
|
||||
"DATA_TYPE": "Data type"
|
||||
}
|
||||
@@ -524,7 +522,7 @@
|
||||
"LINK-WITH-EXPIRY-SETTINGS": "New link has been generated with expiry settings",
|
||||
"EXPIRES": "Expires on",
|
||||
"LINK-EXPIRY-DATE": "Link Expiry Date",
|
||||
"EXPIRATION-LABEL" : "Expiration Date",
|
||||
"EXPIRATION-LABEL": "Expiration Date",
|
||||
"EXPIRATION-PLACEHOLDER": "MM/DD/YYYY",
|
||||
"CLIPBOARD-MESSAGE": "Link copied to the clipboard",
|
||||
"CLOSE": "Close",
|
||||
@@ -666,19 +664,19 @@
|
||||
"ARIA_LABEL": "Open {{ name }}"
|
||||
}
|
||||
},
|
||||
"ADF-ASPECT-LIST" : {
|
||||
"ADF-ASPECT-LIST": {
|
||||
"PROPERTY_NAME": "Property Name",
|
||||
"DESCRIPTION": "Description",
|
||||
"DATA_TYPE": "Data Type",
|
||||
"DIALOG" : {
|
||||
"TITLE" : "Customize Properties",
|
||||
"DESCRIPTION": "Manage the properties associated with selected file(s). Choose from property aspects listed below, to expose and apply additional metadata and functionality",
|
||||
"RESET": "Reset",
|
||||
"CLEAR": "Clear",
|
||||
"CANCEL": "Cancel",
|
||||
"APPLY": "Apply",
|
||||
"OVER-TABLE-MESSAGE" : "Select property aspects",
|
||||
"SELECTED": "Selected"
|
||||
"DIALOG": {
|
||||
"TITLE": "Customize Properties",
|
||||
"DESCRIPTION": "Manage the properties associated with selected file(s). Choose from property aspects listed below, to expose and apply additional metadata and functionality",
|
||||
"RESET": "Reset",
|
||||
"CLEAR": "Clear",
|
||||
"CANCEL": "Cancel",
|
||||
"APPLY": "Apply",
|
||||
"OVER-TABLE-MESSAGE": "Select property aspects",
|
||||
"SELECTED": "Selected"
|
||||
}
|
||||
},
|
||||
"NODE_COUNTER": {
|
||||
|
||||
@@ -375,7 +375,10 @@ export const searchFilter = {
|
||||
selector: 'date-range',
|
||||
settings: {
|
||||
field: 'cm:created',
|
||||
dateFormat: 'DD-MMM-YY'
|
||||
dateFormat: 'DD-MMM-YY',
|
||||
displayedLabelsByField: {
|
||||
'cm:created': 'Created Date (range)'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<adf-search-filter-tabbed>
|
||||
<ng-container *ngFor="let field of fields">
|
||||
<adf-search-date-range-advanced
|
||||
<adf-search-date-range
|
||||
*adf-search-filter-tab="settings.displayedLabelsByField[field]"
|
||||
[dateFormat]="settings.dateFormat"
|
||||
[maxDate]="settings.maxDate"
|
||||
@@ -8,6 +8,6 @@
|
||||
[initialValue]="startValue"
|
||||
(changed)="onDateRangedValueChanged($event, field)"
|
||||
(valid)="tabsValidity[field]=$event">
|
||||
</adf-search-date-range-advanced>
|
||||
</adf-search-date-range>
|
||||
</ng-container>
|
||||
</adf-search-filter-tabbed>
|
||||
@@ -19,12 +19,12 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { ContentTestingModule } from '../../../testing/content.testing.module';
|
||||
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
||||
import { SearchDateRangeAdvanced } from './search-date-range-advanced/search-date-range-advanced';
|
||||
import { SearchDateRange } from './search-date-range/search-date-range';
|
||||
import { SearchFilterTabbedComponent } from '../search-filter-tabbed/search-filter-tabbed.component';
|
||||
import { SearchDateRangeAdvancedComponent } from './search-date-range-advanced/search-date-range-advanced.component';
|
||||
import { SearchDateRangeAdvancedTabbedComponent } from './search-date-range-advanced-tabbed.component';
|
||||
import { DateRangeType } from './search-date-range-advanced/date-range-type';
|
||||
import { InLastDateType } from './search-date-range-advanced/in-last-date-type';
|
||||
import { SearchDateRangeComponent } from './search-date-range/search-date-range.component';
|
||||
import { SearchDateRangeTabbedComponent } from './search-date-range-tabbed.component';
|
||||
import { DateRangeType } from './search-date-range/date-range-type';
|
||||
import { InLastDateType } from './search-date-range/in-last-date-type';
|
||||
import {
|
||||
endOfDay,
|
||||
endOfToday,
|
||||
@@ -44,10 +44,10 @@ import {
|
||||
export class MockSearchFilterTabbedComponent {}
|
||||
|
||||
@Component({
|
||||
selector: 'adf-search-date-range-advanced',
|
||||
selector: 'adf-search-date-range',
|
||||
template: ``
|
||||
})
|
||||
export class MockSearchDateRangeAdvancedComponent {
|
||||
export class MockSearchDateRangeComponent {
|
||||
@Input()
|
||||
dateFormat: string;
|
||||
@Input()
|
||||
@@ -55,39 +55,39 @@ export class MockSearchDateRangeAdvancedComponent {
|
||||
@Input()
|
||||
field: string;
|
||||
@Input()
|
||||
initialValue: SearchDateRangeAdvanced;
|
||||
initialValue: SearchDateRange;
|
||||
|
||||
@Output()
|
||||
changed = new EventEmitter<Partial<SearchDateRangeAdvanced>>();
|
||||
changed = new EventEmitter<Partial<SearchDateRange>>();
|
||||
@Output()
|
||||
valid = new EventEmitter<boolean>();
|
||||
}
|
||||
describe('SearchDateRangeAdvancedTabbedComponent', () => {
|
||||
let component: SearchDateRangeAdvancedTabbedComponent;
|
||||
let fixture: ComponentFixture<SearchDateRangeAdvancedTabbedComponent>;
|
||||
let betweenMockData: SearchDateRangeAdvanced;
|
||||
let inLastMockData: SearchDateRangeAdvanced;
|
||||
let anyMockDate: SearchDateRangeAdvanced;
|
||||
describe('SearchDateRangeTabbedComponent', () => {
|
||||
let component: SearchDateRangeTabbedComponent;
|
||||
let fixture: ComponentFixture<SearchDateRangeTabbedComponent>;
|
||||
let betweenMockData: SearchDateRange;
|
||||
let inLastMockData: SearchDateRange;
|
||||
let anyMockDate: SearchDateRange;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [SearchDateRangeAdvancedTabbedComponent, SearchFilterTabbedComponent, SearchDateRangeAdvancedComponent],
|
||||
declarations: [SearchDateRangeTabbedComponent, SearchFilterTabbedComponent, SearchDateRangeComponent],
|
||||
imports: [
|
||||
TranslateModule.forRoot(),
|
||||
ContentTestingModule
|
||||
],
|
||||
providers: [
|
||||
{ provide: SearchFilterTabbedComponent, useClass: MockSearchFilterTabbedComponent },
|
||||
{ provide: SearchDateRangeAdvancedComponent, useClass: MockSearchDateRangeAdvancedComponent }
|
||||
{ provide: SearchDateRangeComponent, useClass: MockSearchDateRangeComponent }
|
||||
]
|
||||
});
|
||||
fixture = TestBed.createComponent(SearchDateRangeAdvancedTabbedComponent);
|
||||
fixture = TestBed.createComponent(SearchDateRangeTabbedComponent);
|
||||
|
||||
component = fixture.componentInstance;
|
||||
component.id = 'dateRangeAdvanced';
|
||||
component.id = 'dateRange';
|
||||
component.context = {
|
||||
queryFragments: {
|
||||
dateRangeAdvanced: ''
|
||||
dateRange: ''
|
||||
},
|
||||
update: jasmine.createSpy('update')
|
||||
} as any;
|
||||
@@ -219,7 +219,7 @@ describe('SearchDateRangeAdvancedTabbedComponent', () => {
|
||||
const inLastStartDate = startOfWeek(subWeeks(new Date(), 5));
|
||||
const query = `createdDate:['${formatISO(startOfDay(betweenMockData.betweenStartDate))}' TO '${formatISO(endOfDay(betweenMockData.betweenEndDate))}']` +
|
||||
` AND modifiedDate:['${formatISO(startOfDay(inLastStartDate))}' TO '${formatISO(endOfToday())}']`;
|
||||
expect(component.context.queryFragments['dateRangeAdvanced']).toEqual(query);
|
||||
expect(component.context.queryFragments['dateRange']).toEqual(query);
|
||||
expect(component.context.update).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
@@ -230,7 +230,7 @@ describe('SearchDateRangeAdvancedTabbedComponent', () => {
|
||||
expect(component.combinedQuery).toBe('');
|
||||
expect(component.combinedDisplayValue).toBe('');
|
||||
expect(component.displayValue$.next).toHaveBeenCalledWith('');
|
||||
expect(component.context.queryFragments['dateRangeAdvanced']).toEqual('');
|
||||
expect(component.context.queryFragments['dateRange']).toEqual('');
|
||||
expect(component.context.update).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@@ -17,12 +17,12 @@
|
||||
|
||||
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { SearchDateRangeAdvanced } from './search-date-range-advanced/search-date-range-advanced';
|
||||
import { DateRangeType } from './search-date-range-advanced/date-range-type';
|
||||
import { DateRangeType } from './search-date-range/date-range-type';
|
||||
import { SearchDateRange } from './search-date-range/search-date-range';
|
||||
import { SearchWidget } from '../../models/search-widget.interface';
|
||||
import { SearchWidgetSettings } from '../../models/search-widget-settings.interface';
|
||||
import { SearchQueryBuilderService } from '../../services/search-query-builder.service';
|
||||
import { InLastDateType } from './search-date-range-advanced/in-last-date-type';
|
||||
import { InLastDateType } from './search-date-range/in-last-date-type';
|
||||
import { TranslationService } from '@alfresco/adf-core';
|
||||
import {
|
||||
endOfDay,
|
||||
@@ -38,14 +38,14 @@ import {
|
||||
} from 'date-fns';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-search-date-range-advanced-tabbed',
|
||||
templateUrl: './search-date-range-advanced-tabbed.component.html',
|
||||
selector: 'adf-search-date-range-tabbed',
|
||||
templateUrl: './search-date-range-tabbed.component.html',
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class SearchDateRangeAdvancedTabbedComponent implements SearchWidget, OnInit {
|
||||
export class SearchDateRangeTabbedComponent implements SearchWidget, OnInit {
|
||||
displayValue$ = new Subject<string>();
|
||||
id: string;
|
||||
startValue: SearchDateRangeAdvanced = {
|
||||
startValue: SearchDateRange = {
|
||||
dateRangeType: DateRangeType.ANY,
|
||||
inLastValueType: InLastDateType.DAYS,
|
||||
inLastValue: undefined,
|
||||
@@ -59,7 +59,7 @@ export class SearchDateRangeAdvancedTabbedComponent implements SearchWidget, OnI
|
||||
combinedQuery: string;
|
||||
combinedDisplayValue: string;
|
||||
|
||||
private value: { [key: string]: Partial<SearchDateRangeAdvanced> } = {};
|
||||
private value: { [key: string]: Partial<SearchDateRange> } = {};
|
||||
private queryMapByField: Map<string, string> = new Map<string, string>();
|
||||
private displayValueMapByField: Map<string, string> = new Map<string, string>();
|
||||
|
||||
@@ -69,7 +69,7 @@ export class SearchDateRangeAdvancedTabbedComponent implements SearchWidget, OnI
|
||||
this.fields = this.settings?.field.split(',').map(field => field.trim());
|
||||
}
|
||||
|
||||
getCurrentValue(): { [key: string]: Partial<SearchDateRangeAdvanced> } {
|
||||
getCurrentValue(): { [key: string]: Partial<SearchDateRange> } {
|
||||
return this.value;
|
||||
}
|
||||
|
||||
@@ -86,7 +86,7 @@ export class SearchDateRangeAdvancedTabbedComponent implements SearchWidget, OnI
|
||||
this.submitValues();
|
||||
}
|
||||
|
||||
setValue(value: { [key: string]: SearchDateRangeAdvanced }) {
|
||||
setValue(value: { [key: string]: SearchDateRange }) {
|
||||
this.value = value;
|
||||
}
|
||||
|
||||
@@ -97,13 +97,13 @@ export class SearchDateRangeAdvancedTabbedComponent implements SearchWidget, OnI
|
||||
this.context.update();
|
||||
}
|
||||
}
|
||||
onDateRangedValueChanged(value: Partial<SearchDateRangeAdvanced>, field: string) {
|
||||
onDateRangedValueChanged(value: Partial<SearchDateRange>, field: string) {
|
||||
this.value[field] = value;
|
||||
this.updateQuery(value, field);
|
||||
this.updateDisplayValue(value, field);
|
||||
}
|
||||
|
||||
private generateQuery(value: Partial<SearchDateRangeAdvanced>, field: string): string {
|
||||
private generateQuery(value: Partial<SearchDateRange>, field: string): string {
|
||||
let query = '';
|
||||
let startDate: Date;
|
||||
let endDate: Date;
|
||||
@@ -136,7 +136,7 @@ export class SearchDateRangeAdvancedTabbedComponent implements SearchWidget, OnI
|
||||
return query;
|
||||
}
|
||||
|
||||
private generateDisplayValue(value: Partial<SearchDateRangeAdvanced>): string {
|
||||
private generateDisplayValue(value: Partial<SearchDateRange>): string {
|
||||
let displayValue = '';
|
||||
if (value.dateRangeType === DateRangeType.IN_LAST && value.inLastValue) {
|
||||
displayValue = this.translateService.instant(`SEARCH.DATE_RANGE_ADVANCED.IN_LAST_DISPLAY_LABELS.${value.inLastValueType}`, {
|
||||
@@ -148,7 +148,7 @@ export class SearchDateRangeAdvancedTabbedComponent implements SearchWidget, OnI
|
||||
return displayValue;
|
||||
}
|
||||
|
||||
private updateQuery(value: Partial<SearchDateRangeAdvanced>, field: string) {
|
||||
private updateQuery(value: Partial<SearchDateRange>, field: string) {
|
||||
this.combinedQuery = '';
|
||||
this.queryMapByField.set(field, this.generateQuery(value, field));
|
||||
this.queryMapByField.forEach((query: string) => {
|
||||
@@ -158,7 +158,7 @@ export class SearchDateRangeAdvancedTabbedComponent implements SearchWidget, OnI
|
||||
});
|
||||
}
|
||||
|
||||
private updateDisplayValue(value: Partial<SearchDateRangeAdvanced>, field: string) {
|
||||
private updateDisplayValue(value: Partial<SearchDateRange>, field: string) {
|
||||
this.combinedDisplayValue = '';
|
||||
this.displayValueMapByField.set(field, this.generateDisplayValue(value));
|
||||
this.displayValueMapByField.forEach((displayValue: string, fieldForDisplayLabel: string) => {
|
||||
@@ -1,41 +1,41 @@
|
||||
<div class="adf-search-date-range-container" [formGroup]="form">
|
||||
<mat-radio-group formControlName="dateRangeType">
|
||||
<span class="adf-search-date-range-container-row">
|
||||
<mat-radio-button [value]="DateRangeType.ANY" data-automation-id="date-range-advanced-anytime">
|
||||
<mat-radio-button [value]="DateRangeType.ANY" data-automation-id="date-range-anytime">
|
||||
{{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.ANYTIME' | translate }}
|
||||
</mat-radio-button>
|
||||
</span>
|
||||
<span class="adf-search-date-range-container-row">
|
||||
<mat-radio-button [value]="DateRangeType.IN_LAST" data-automation-id="date-range-advanced-in-last">
|
||||
<mat-radio-button [value]="DateRangeType.IN_LAST" data-automation-id="date-range-in-last">
|
||||
{{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.IN_LAST' | translate }}
|
||||
</mat-radio-button>
|
||||
<mat-form-field class="adf-search-date-range-form-field adf-search-date-range-input-field">
|
||||
<input matInput [attr.aria-label]="'SEARCH.DATE_RANGE_ADVANCED.ARIA_LABEL.NUMBER_INPUT' | translate"
|
||||
type="number" min="1" formControlName="inLastValue"
|
||||
data-automation-id="date-range-advanced-in-last-input" (input)="narrowDownAllowedCharacters($event)"
|
||||
data-automation-id="date-range-in-last-input" (input)="narrowDownAllowedCharacters($event)"
|
||||
(keydown)="preventIncorrectNumberCharacters($event)">
|
||||
<mat-error *ngIf="form.controls.inLastValue.errors?.required">{{ 'SEARCH.DATE_RANGE_ADVANCED.ERROR.IN_LAST' | translate }}</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="adf-search-date-range-form-field">
|
||||
<mat-select formControlName="inLastValueType" data-automation-id="date-range-advanced-in-last-dropdown">
|
||||
<mat-option data-automation-id="date-range-advanced-in-last-option-days" [value]="InLastDateType.DAYS">{{ 'SEARCH.DATE_RANGE_ADVANCED.IN_LAST_LABELS.DAYS' | translate }}</mat-option>
|
||||
<mat-option data-automation-id="date-range-advanced-in-last-option-weeks" [value]="InLastDateType.WEEKS">{{ 'SEARCH.DATE_RANGE_ADVANCED.IN_LAST_LABELS.WEEKS' | translate }}</mat-option>
|
||||
<mat-option data-automation-id="date-range-advanced-in-last-option-months" [value]="InLastDateType.MONTHS">{{ 'SEARCH.DATE_RANGE_ADVANCED.IN_LAST_LABELS.MONTHS' | translate }}</mat-option>
|
||||
<mat-select formControlName="inLastValueType" data-automation-id="date-range-in-last-dropdown">
|
||||
<mat-option data-automation-id="date-range-in-last-option-days" [value]="InLastDateType.DAYS">{{ 'SEARCH.DATE_RANGE_ADVANCED.IN_LAST_LABELS.DAYS' | translate }}</mat-option>
|
||||
<mat-option data-automation-id="date-range-in-last-option-weeks" [value]="InLastDateType.WEEKS">{{ 'SEARCH.DATE_RANGE_ADVANCED.IN_LAST_LABELS.WEEKS' | translate }}</mat-option>
|
||||
<mat-option data-automation-id="date-range-in-last-option-months" [value]="InLastDateType.MONTHS">{{ 'SEARCH.DATE_RANGE_ADVANCED.IN_LAST_LABELS.MONTHS' | translate }}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</span>
|
||||
<span class="adf-search-date-range-container-row">
|
||||
<mat-radio-button [value]="DateRangeType.BETWEEN" data-automation-id="date-range-advanced-between">
|
||||
<mat-radio-button [value]="DateRangeType.BETWEEN" data-automation-id="date-range-between">
|
||||
{{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.BETWEEN' | translate }}
|
||||
</mat-radio-button>
|
||||
<mat-form-field class="adf-search-date-range-form-field">
|
||||
<mat-date-range-input [rangePicker]="$any(picker)" [max]="convertedMaxDate">
|
||||
<input matStartDate placeholder="{{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDERS.START_DATE' | translate }}"
|
||||
data-automation-id="date-range-advanced-between-start-input" [formControl]="betweenStartDateFormControl" (change)="dateChanged($event, betweenStartDateFormControl)">
|
||||
data-automation-id="date-range-between-start-input" [formControl]="betweenStartDateFormControl" (change)="dateChanged($event, betweenStartDateFormControl)">
|
||||
<input matEndDate placeholder="{{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDERS.END_DATE' | translate }}"
|
||||
data-automation-id="date-range-advanced-between-end-input" [formControl]="betweenEndDateFormControl" (change)="dateChanged($event, betweenEndDateFormControl)">
|
||||
data-automation-id="date-range-between-end-input" [formControl]="betweenEndDateFormControl" (change)="dateChanged($event, betweenEndDateFormControl)">
|
||||
</mat-date-range-input>
|
||||
<mat-datepicker-toggle matSuffix [for]="picker" data-automation-id="date-range-advanced-between-datepicker-toggle"></mat-datepicker-toggle>
|
||||
<mat-datepicker-toggle matSuffix [for]="picker" data-automation-id="date-range-between-datepicker-toggle"></mat-datepicker-toggle>
|
||||
<mat-date-range-picker #picker></mat-date-range-picker>
|
||||
|
||||
<mat-error *ngIf="betweenStartDateFormControl.errors?.invalidDate">{{ 'SEARCH.DATE_RANGE_ADVANCED.ERROR.START_DATE.INVALID_FORMAT' | translate }}</mat-error>
|
||||
@@ -1,4 +1,4 @@
|
||||
adf-search-date-range-advanced {
|
||||
adf-search-date-range {
|
||||
.adf-search-date-range-container {
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
@@ -19,29 +19,29 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { ContentTestingModule } from '../../../../testing/content.testing.module';
|
||||
import { SearchDateRangeAdvancedComponent } from './search-date-range-advanced.component';
|
||||
import { SearchDateRangeComponent } from './search-date-range.component';
|
||||
import { addDays, endOfToday, format, parse, startOfYesterday, subDays } from 'date-fns';
|
||||
import { Validators } from '@angular/forms';
|
||||
|
||||
describe('SearchDateRangeAdvancedComponent', () => {
|
||||
let component: SearchDateRangeAdvancedComponent;
|
||||
let fixture: ComponentFixture<SearchDateRangeAdvancedComponent>;
|
||||
describe('SearchDateRangeComponent', () => {
|
||||
let component: SearchDateRangeComponent;
|
||||
let fixture: ComponentFixture<SearchDateRangeComponent>;
|
||||
|
||||
const startDateSampleValue = parse('05-Jun-23', 'dd-MMM-yy', new Date());
|
||||
const endDateSampleValue = parse('07-Jun-23', 'dd-MMM-yy', new Date());
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [SearchDateRangeAdvancedComponent],
|
||||
declarations: [SearchDateRangeComponent],
|
||||
imports: [
|
||||
TranslateModule.forRoot(),
|
||||
ContentTestingModule
|
||||
]
|
||||
});
|
||||
|
||||
fixture = TestBed.createComponent(SearchDateRangeAdvancedComponent);
|
||||
fixture = TestBed.createComponent(SearchDateRangeComponent);
|
||||
component = fixture.componentInstance;
|
||||
component.field = 'test-field';
|
||||
component.field = 'test-field';
|
||||
component.dateFormat = 'dd-MMM-yy';
|
||||
component.maxDate = 'today';
|
||||
component.form.setValue({
|
||||
@@ -64,7 +64,7 @@ describe('SearchDateRangeAdvancedComponent', () => {
|
||||
};
|
||||
|
||||
const selectDropdownOption = (itemId: string) => {
|
||||
const matSelect = fixture.debugElement.query(By.css('[data-automation-id="date-range-advanced-in-last-dropdown"]')).nativeElement;
|
||||
const matSelect = fixture.debugElement.query(By.css('[data-automation-id="date-range-in-last-dropdown"]')).nativeElement;
|
||||
matSelect.click();
|
||||
fixture.detectChanges();
|
||||
const matOption = fixture.debugElement.query(By.css(`[data-automation-id="${itemId}"]`)).nativeElement;
|
||||
@@ -131,20 +131,20 @@ describe('SearchDateRangeAdvancedComponent', () => {
|
||||
it('should not be able to set zero or negative values in In the last input field', () => {
|
||||
component.form.controls.dateRangeType.setValue(component.DateRangeType.IN_LAST);
|
||||
fixture.detectChanges();
|
||||
enterValueInInputFieldAndTriggerEvent('date-range-advanced-in-last-input', '-5');
|
||||
let inLastInputFieldValue = getElementBySelector('[data-automation-id="date-range-advanced-in-last-input"]').value;
|
||||
enterValueInInputFieldAndTriggerEvent('date-range-in-last-input', '-5');
|
||||
let inLastInputFieldValue = getElementBySelector('[data-automation-id="date-range-in-last-input"]').value;
|
||||
expect(inLastInputFieldValue).toBe('5');
|
||||
|
||||
enterValueInInputFieldAndTriggerEvent('date-range-advanced-in-last-input', '0');
|
||||
inLastInputFieldValue = getElementBySelector('[data-automation-id="date-range-advanced-in-last-input"]').value;
|
||||
enterValueInInputFieldAndTriggerEvent('date-range-in-last-input', '0');
|
||||
inLastInputFieldValue = getElementBySelector('[data-automation-id="date-range-in-last-input"]').value;
|
||||
expect(inLastInputFieldValue).toBe('');
|
||||
});
|
||||
|
||||
it('should give an invalid date error when manually setting a start date and an end date that are not in the correct format', () => {
|
||||
component.form.controls.dateRangeType.setValue(component.DateRangeType.BETWEEN);
|
||||
fixture.detectChanges();
|
||||
enterValueInInputFieldAndTriggerEvent('date-range-advanced-between-start-input', 'invalid-date-input', 'change');
|
||||
enterValueInInputFieldAndTriggerEvent('date-range-advanced-between-end-input', 'invalid-date-input', 'change');
|
||||
enterValueInInputFieldAndTriggerEvent('date-range-between-start-input', 'invalid-date-input', 'change');
|
||||
enterValueInInputFieldAndTriggerEvent('date-range-between-end-input', 'invalid-date-input', 'change');
|
||||
expect(component.form.controls.betweenStartDate.errors.invalidDate).toBeTrue();
|
||||
expect(component.form.controls.betweenEndDate.errors.invalidDate).toBeTrue();
|
||||
});
|
||||
@@ -154,7 +154,7 @@ describe('SearchDateRangeAdvancedComponent', () => {
|
||||
fixture.detectChanges();
|
||||
component.form.controls.betweenEndDate.setValue(new Date());
|
||||
const startDate = format(addDays(component.form.controls.betweenEndDate.value, 3), component.dateFormat);
|
||||
enterValueInInputFieldAndTriggerEvent('date-range-advanced-between-start-input', startDate, 'change');
|
||||
enterValueInInputFieldAndTriggerEvent('date-range-between-start-input', startDate, 'change');
|
||||
expect(component.form.controls.betweenEndDate.errors.invalidDate).toBeTrue();
|
||||
});
|
||||
|
||||
@@ -163,7 +163,7 @@ describe('SearchDateRangeAdvancedComponent', () => {
|
||||
fixture.detectChanges();
|
||||
component.form.controls.betweenStartDate.setValue(new Date());
|
||||
const endDate = format(subDays(component.form.controls.betweenStartDate.value, 3), component.dateFormat);
|
||||
enterValueInInputFieldAndTriggerEvent('date-range-advanced-between-end-input', endDate, 'change');
|
||||
enterValueInInputFieldAndTriggerEvent('date-range-between-end-input', endDate, 'change');
|
||||
expect(component.form.controls.betweenEndDate.errors.invalidDate).toBeTrue();
|
||||
});
|
||||
|
||||
@@ -171,16 +171,28 @@ describe('SearchDateRangeAdvancedComponent', () => {
|
||||
component.form.controls.dateRangeType.setValue(component.DateRangeType.BETWEEN);
|
||||
fixture.detectChanges();
|
||||
const endDate = format(addDays(component.convertedMaxDate, 3), component.dateFormat);
|
||||
enterValueInInputFieldAndTriggerEvent('date-range-advanced-between-end-input', endDate, 'change');
|
||||
enterValueInInputFieldAndTriggerEvent('date-range-between-end-input', endDate, 'change');
|
||||
expect(component.form.controls.betweenEndDate.errors.invalidDate).toBeTrue();
|
||||
});
|
||||
|
||||
it('should not be able to select a date after the max date when selecting the BETWEEN option', async () => {
|
||||
component.form.controls.dateRangeType.setValue(component.DateRangeType.BETWEEN);
|
||||
component.maxDate = 'today';
|
||||
fixture.detectChanges();
|
||||
getElementBySelector('[data-automation-id="date-range-between-datepicker-toggle"]').click();
|
||||
fixture.detectChanges();
|
||||
|
||||
const afterDate = format(addDays(new Date(), 1), 'MMM d, yyyy');
|
||||
const afterDateItem = document.querySelector(`.mat-calendar-body-cell[aria-label="${afterDate}"]`);
|
||||
expect(afterDateItem.getAttribute('aria-disabled')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should emit valid as false when form is invalid', () => {
|
||||
spyOn(component.valid, 'emit');
|
||||
component.form.controls.dateRangeType.setValue(component.DateRangeType.IN_LAST);
|
||||
fixture.detectChanges();
|
||||
enterValueInInputFieldAndTriggerEvent('date-range-advanced-in-last-input', '');
|
||||
selectDropdownOption('date-range-advanced-in-last-option-weeks');
|
||||
enterValueInInputFieldAndTriggerEvent('date-range-in-last-input', '');
|
||||
selectDropdownOption('date-range-in-last-option-weeks');
|
||||
expect(component.valid.emit).toHaveBeenCalledWith(false);
|
||||
|
||||
component.form.controls.dateRangeType.setValue(component.DateRangeType.BETWEEN);
|
||||
@@ -192,8 +204,8 @@ describe('SearchDateRangeAdvancedComponent', () => {
|
||||
spyOn(component.valid, 'emit');
|
||||
component.form.controls.dateRangeType.setValue(component.DateRangeType.IN_LAST);
|
||||
fixture.detectChanges();
|
||||
enterValueInInputFieldAndTriggerEvent('date-range-advanced-in-last-input', '5');
|
||||
selectDropdownOption('date-range-advanced-in-last-option-weeks');
|
||||
enterValueInInputFieldAndTriggerEvent('date-range-in-last-input', '5');
|
||||
selectDropdownOption('date-range-in-last-option-weeks');
|
||||
expect(component.valid.emit).toHaveBeenCalledWith(true);
|
||||
|
||||
component.form.controls.dateRangeType.setValue(component.DateRangeType.BETWEEN);
|
||||
@@ -213,10 +225,10 @@ describe('SearchDateRangeAdvancedComponent', () => {
|
||||
betweenStartDate: undefined,
|
||||
betweenEndDate: undefined
|
||||
};
|
||||
let dateRangeTypeRadioButton = getElementBySelector('[data-automation-id="date-range-advanced-in-last"] .mat-radio-input');
|
||||
let dateRangeTypeRadioButton = getElementBySelector('[data-automation-id="date-range-in-last"] .mat-radio-input');
|
||||
dateRangeTypeRadioButton.click();
|
||||
selectDropdownOption('date-range-advanced-in-last-option-weeks');
|
||||
enterValueInInputFieldAndTriggerEvent('date-range-advanced-in-last-input', '');
|
||||
selectDropdownOption('date-range-in-last-option-weeks');
|
||||
enterValueInInputFieldAndTriggerEvent('date-range-in-last-input', '');
|
||||
expect(component.changed.emit).not.toHaveBeenCalledWith(value);
|
||||
|
||||
component.form.patchValue({
|
||||
@@ -234,7 +246,7 @@ describe('SearchDateRangeAdvancedComponent', () => {
|
||||
betweenStartDate: '',
|
||||
betweenEndDate: ''
|
||||
};
|
||||
dateRangeTypeRadioButton = getElementBySelector('[data-automation-id="date-range-advanced-between"] .mat-radio-input');
|
||||
dateRangeTypeRadioButton = getElementBySelector('[data-automation-id="date-range-between"] .mat-radio-input');
|
||||
dateRangeTypeRadioButton.click();
|
||||
fixture.detectChanges();
|
||||
expect(component.changed.emit).not.toHaveBeenCalledWith(value);
|
||||
@@ -249,10 +261,10 @@ describe('SearchDateRangeAdvancedComponent', () => {
|
||||
betweenStartDate: null,
|
||||
betweenEndDate: null
|
||||
};
|
||||
let dateRangeTypeRadioButton = getElementBySelector('[data-automation-id="date-range-advanced-in-last"] .mat-radio-input');
|
||||
let dateRangeTypeRadioButton = getElementBySelector('[data-automation-id="date-range-in-last"] .mat-radio-input');
|
||||
dateRangeTypeRadioButton.click();
|
||||
selectDropdownOption('date-range-advanced-in-last-option-weeks');
|
||||
enterValueInInputFieldAndTriggerEvent('date-range-advanced-in-last-input', '5');
|
||||
selectDropdownOption('date-range-in-last-option-weeks');
|
||||
enterValueInInputFieldAndTriggerEvent('date-range-in-last-input', '5');
|
||||
fixture.detectChanges();
|
||||
expect(component.changed.emit).toHaveBeenCalledWith(value);
|
||||
|
||||
@@ -271,7 +283,7 @@ describe('SearchDateRangeAdvancedComponent', () => {
|
||||
betweenStartDate: startDateSampleValue,
|
||||
betweenEndDate: endDateSampleValue
|
||||
};
|
||||
dateRangeTypeRadioButton = getElementBySelector('[data-automation-id="date-range-advanced-between"] .mat-radio-input');
|
||||
dateRangeTypeRadioButton = getElementBySelector('[data-automation-id="date-range-between"] .mat-radio-input');
|
||||
dateRangeTypeRadioButton.click();
|
||||
component.betweenStartDateFormControl.setValue(startDateSampleValue);
|
||||
component.betweenEndDateFormControl.setValue(endDateSampleValue);
|
||||
@@ -22,7 +22,7 @@ import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatDateFormats } from '
|
||||
import { DateFnsAdapter, MAT_DATE_FNS_FORMATS } from '@angular/material-date-fns-adapter';
|
||||
import { InLastDateType } from './in-last-date-type';
|
||||
import { DateRangeType } from './date-range-type';
|
||||
import { SearchDateRangeAdvanced } from './search-date-range-advanced';
|
||||
import { SearchDateRange } from './search-date-range';
|
||||
import { FormBuilder, UntypedFormControl, Validators } from '@angular/forms';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { UserPreferencesService, UserPreferenceValues, DateFnsUtils } from '@alfresco/adf-core';
|
||||
@@ -30,17 +30,17 @@ import { UserPreferencesService, UserPreferenceValues, DateFnsUtils } from '@alf
|
||||
const DEFAULT_DATE_DISPLAY_FORMAT = 'dd-MMM-yy';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-search-date-range-advanced',
|
||||
templateUrl: './search-date-range-advanced.component.html',
|
||||
styleUrls: ['./search-date-range-advanced.component.scss'],
|
||||
selector: 'adf-search-date-range',
|
||||
templateUrl: './search-date-range.component.html',
|
||||
styleUrls: ['./search-date-range.component.scss'],
|
||||
providers: [
|
||||
{ provide: DateAdapter, useClass: DateFnsAdapter, deps: [ MAT_DATE_LOCALE ] },
|
||||
{ provide: MAT_DATE_FORMATS, useValue: MAT_DATE_FNS_FORMATS }
|
||||
],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: {class: 'adf-search-date-range-advanced'}
|
||||
host: {class: 'adf-search-date-range'}
|
||||
})
|
||||
export class SearchDateRangeAdvancedComponent implements OnInit, OnDestroy {
|
||||
export class SearchDateRangeComponent implements OnInit, OnDestroy {
|
||||
@Input()
|
||||
dateFormat = DEFAULT_DATE_DISPLAY_FORMAT;
|
||||
@Input()
|
||||
@@ -48,18 +48,18 @@ export class SearchDateRangeAdvancedComponent implements OnInit, OnDestroy {
|
||||
@Input()
|
||||
field: string;
|
||||
@Input()
|
||||
set initialValue(value: SearchDateRangeAdvanced) {
|
||||
set initialValue(value: SearchDateRange) {
|
||||
if (value) {
|
||||
this.form.patchValue(value);
|
||||
}
|
||||
}
|
||||
|
||||
@Output()
|
||||
changed = new EventEmitter<Partial<SearchDateRangeAdvanced>>();
|
||||
changed = new EventEmitter<Partial<SearchDateRange>>();
|
||||
@Output()
|
||||
valid = new EventEmitter<boolean>();
|
||||
|
||||
form = this.formBuilder.group<SearchDateRangeAdvanced>({
|
||||
form = this.formBuilder.group<SearchDateRange>({
|
||||
dateRangeType: DateRangeType.ANY,
|
||||
inLastValueType: InLastDateType.DAYS,
|
||||
inLastValue: undefined,
|
||||
@@ -18,7 +18,7 @@
|
||||
import { DateRangeType } from './date-range-type';
|
||||
import { InLastDateType } from './in-last-date-type';
|
||||
|
||||
export interface SearchDateRangeAdvanced {
|
||||
export interface SearchDateRange {
|
||||
dateRangeType: DateRangeType;
|
||||
inLastValueType?: InLastDateType;
|
||||
inLastValue?: string;
|
||||
@@ -1,49 +0,0 @@
|
||||
<form [formGroup]="form" novalidate (ngSubmit)="apply(form.value, form.valid)">
|
||||
<mat-form-field>
|
||||
<mat-label>{{ 'SEARCH.FILTER.RANGE.SELECT-FROM-DATE' | translate }}</mat-label>
|
||||
<input matInput
|
||||
(input)="forcePlaceholder($event)"
|
||||
[formControl]="from"
|
||||
[errorStateMatcher]="matcher"
|
||||
placeholder="{{ 'SEARCH.FILTER.RANGE.FROM-DATE' | translate }}"
|
||||
[attr.aria-label]="'SEARCH.FILTER.RANGE.FROM-DATE' | translate"
|
||||
[matDatepicker]="fromDatepicker"
|
||||
[max]="fromMaxDate"
|
||||
(dateChange)="onChangedHandler($event, from)"
|
||||
data-automation-id="date-range-from-input">
|
||||
<mat-datepicker-toggle matSuffix [for]="fromDatepicker" data-automation-id="date-range-from-date-toggle"></mat-datepicker-toggle>
|
||||
<mat-datepicker #fromDatepicker color="accent"></mat-datepicker>
|
||||
<mat-error *ngIf="from.invalid" data-automation-id="date-range-from-error">
|
||||
{{ getFromValidationMessage() | translate: { requiredFormat: datePickerFormat } }}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>{{ 'SEARCH.FILTER.RANGE.SELECT-TO-DATE' | translate }}</mat-label>
|
||||
<input matInput
|
||||
(input)="forcePlaceholder($event)"
|
||||
[formControl]="to"
|
||||
[errorStateMatcher]="matcher"
|
||||
placeholder="{{ 'SEARCH.FILTER.RANGE.TO-DATE' | translate }}"
|
||||
[attr.aria-label]="'SEARCH.FILTER.RANGE.TO-DATE' | translate"
|
||||
[matDatepicker]="toDatepicker"
|
||||
[min]="from.value"
|
||||
[max]="maxDate"
|
||||
(dateChange)="onChangedHandler($event, to)"
|
||||
data-automation-id="date-range-to-input">
|
||||
<mat-datepicker-toggle matSuffix [for]="toDatepicker" data-automation-id="date-range-to-date-toggle"></mat-datepicker-toggle>
|
||||
<mat-datepicker #toDatepicker color="accent"></mat-datepicker>
|
||||
<mat-error *ngIf="to.invalid" data-automation-id="date-range-to-error">
|
||||
{{ getToValidationMessage() | translate: { requiredFormat: datePickerFormat } }}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="adf-facet-buttons adf-facet-buttons--topSpace" *ngIf="!settings?.hideDefaultAction">
|
||||
<button mat-button color="primary" type="button" (click)="clear()" data-automation-id="date-range-clear-btn">
|
||||
{{ 'SEARCH.FILTER.ACTIONS.CLEAR' | translate }}
|
||||
</button>
|
||||
<button mat-button color="primary" type="submit" [disabled]="!form.valid" data-automation-id="date-range-apply-btn">
|
||||
{{ 'SEARCH.FILTER.ACTIONS.APPLY' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -1,5 +0,0 @@
|
||||
.adf-search-date-range > form {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1,267 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { SearchDateRangeComponent } from './search-date-range.component';
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { ContentTestingModule } from '../../../testing/content.testing.module';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
|
||||
import { startOfDay, endOfDay, isValid, addDays, format } from 'date-fns';
|
||||
|
||||
describe('SearchDateRangeComponent', () => {
|
||||
let fixture: ComponentFixture<SearchDateRangeComponent>;
|
||||
let component: SearchDateRangeComponent;
|
||||
|
||||
const dateFormatFixture = 'dd-MMM-yy';
|
||||
const fromDate = new Date('2016-10-16');
|
||||
const toDate = new Date('2017-10-16');
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [TranslateModule.forRoot(), ContentTestingModule]
|
||||
});
|
||||
fixture = TestBed.createComponent(SearchDateRangeComponent);
|
||||
component = fixture.componentInstance;
|
||||
});
|
||||
|
||||
afterEach(() => fixture.destroy());
|
||||
|
||||
const getFromInput = () => fixture.debugElement.nativeElement.querySelector('[data-automation-id="date-range-from-input"]');
|
||||
const getToInput = () => fixture.debugElement.nativeElement.querySelector('[data-automation-id="date-range-to-input"]');
|
||||
|
||||
it('should setup form elements on init', () => {
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(component.from).toBeDefined();
|
||||
expect(component.to).toBeDefined();
|
||||
expect(component.form).toBeDefined();
|
||||
});
|
||||
|
||||
it('should setup form control with formatted valid date on change', () => {
|
||||
component.settings = { field: 'cm:created', dateFormat: dateFormatFixture };
|
||||
fixture.detectChanges();
|
||||
|
||||
const date = new Date('20-feb-18');
|
||||
expect(isValid(date)).toBeTrue();
|
||||
|
||||
component.onChangedHandler({ value: date } as MatDatepickerInputEvent<Date>, component.from);
|
||||
expect(component.from.value.toString()).toEqual(date.toString());
|
||||
});
|
||||
|
||||
it('should NOT setup form control with invalid date on change', () => {
|
||||
component.settings = { field: 'cm:created', dateFormat: dateFormatFixture };
|
||||
fixture.detectChanges();
|
||||
|
||||
const date = new Date('20.f.18');
|
||||
expect(isValid(date)).toBeFalse();
|
||||
|
||||
component.onChangedHandler({ value: date } as MatDatepickerInputEvent<Date>, component.from);
|
||||
expect(component.from.value).not.toEqual(date);
|
||||
});
|
||||
|
||||
it('should reset form', () => {
|
||||
fixture.detectChanges();
|
||||
component.form.setValue({ from: fromDate, to: toDate });
|
||||
|
||||
expect(component.from.value).toEqual(fromDate);
|
||||
expect(component.to.value).toEqual(toDate);
|
||||
|
||||
component.reset();
|
||||
|
||||
expect(component.from.value).toBeNull();
|
||||
expect(component.to.value).toBeNull();
|
||||
expect(component.form.value).toEqual({ from: null, to: null });
|
||||
});
|
||||
|
||||
it('should reset fromMaxDate on reset', () => {
|
||||
fixture.detectChanges();
|
||||
component.fromMaxDate = fromDate;
|
||||
component.reset();
|
||||
|
||||
expect(component.fromMaxDate).toEqual(undefined);
|
||||
});
|
||||
|
||||
it('should update query builder on reset', () => {
|
||||
const context: any = {
|
||||
queryFragments: {
|
||||
createdDateRange: 'query'
|
||||
},
|
||||
update: () => {}
|
||||
};
|
||||
|
||||
component.id = 'createdDateRange';
|
||||
component.context = context;
|
||||
|
||||
spyOn(context, 'update').and.stub();
|
||||
|
||||
fixture.detectChanges();
|
||||
component.reset();
|
||||
|
||||
expect(context.queryFragments.createdDateRange).toEqual('');
|
||||
expect(context.update).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should update query builder on value changes', () => {
|
||||
const context: any = {
|
||||
queryFragments: {},
|
||||
update: () => {}
|
||||
};
|
||||
|
||||
component.id = 'createdDateRange';
|
||||
component.context = context;
|
||||
component.settings = { field: 'cm:created' };
|
||||
|
||||
spyOn(context, 'update').and.stub();
|
||||
|
||||
fixture.detectChanges();
|
||||
component.apply(
|
||||
{
|
||||
from: fromDate,
|
||||
to: toDate
|
||||
},
|
||||
true
|
||||
);
|
||||
|
||||
const startDate = startOfDay(fromDate).toISOString();
|
||||
const endDate = endOfDay(toDate).toISOString();
|
||||
|
||||
const expectedQuery = `cm:created:['${startDate}' TO '${endDate}']`;
|
||||
|
||||
expect(context.queryFragments[component.id]).toEqual(expectedQuery);
|
||||
expect(context.update).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should show date-format error when Invalid found', async () => {
|
||||
fixture.detectChanges();
|
||||
|
||||
const input = getFromInput();
|
||||
input.value = '10-f-18';
|
||||
input.dispatchEvent(new Event('input'));
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
expect(component.getFromValidationMessage()).toEqual('SEARCH.FILTER.VALIDATION.INVALID-DATE');
|
||||
});
|
||||
|
||||
it('should hide date-format error when correcting input', async () => {
|
||||
fixture.detectChanges();
|
||||
|
||||
const input = getFromInput();
|
||||
input.value = '10-f-18';
|
||||
input.dispatchEvent(new Event('input'));
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
expect(component.getFromValidationMessage()).toEqual('SEARCH.FILTER.VALIDATION.INVALID-DATE');
|
||||
|
||||
input.value = '10-10-2018';
|
||||
input.dispatchEvent(new Event('input'));
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
expect(component.getFromValidationMessage()).toEqual('');
|
||||
});
|
||||
|
||||
it('should show error for max date constraint', async () => {
|
||||
component.settings = { field: 'cm:created', maxDate: 'today' };
|
||||
fixture.detectChanges();
|
||||
|
||||
const input = getFromInput();
|
||||
input.value = format(addDays(new Date(), 1), 'dd-MM-yyyy');
|
||||
input.dispatchEvent(new Event('input'));
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
expect(component.getFromValidationMessage()).toEqual('SEARCH.FILTER.VALIDATION.BEYOND-MAX-DATE');
|
||||
});
|
||||
|
||||
it('should show error for required constraint', async () => {
|
||||
fixture.detectChanges();
|
||||
|
||||
const fromInput = getFromInput();
|
||||
fromInput.value = '';
|
||||
fromInput.dispatchEvent(new Event('input'));
|
||||
|
||||
const toInput = getToInput();
|
||||
toInput.value = '';
|
||||
toInput.dispatchEvent(new Event('input'));
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
expect(component.getFromValidationMessage()).toEqual('SEARCH.FILTER.VALIDATION.REQUIRED-VALUE');
|
||||
expect(component.getToValidationMessage()).toEqual('SEARCH.FILTER.VALIDATION.REQUIRED-VALUE');
|
||||
});
|
||||
|
||||
it('should show error for incorrect date range', async () => {
|
||||
fixture.detectChanges();
|
||||
|
||||
const fromInput = getFromInput();
|
||||
fromInput.value = '11-10-2018';
|
||||
fromInput.dispatchEvent(new Event('input'));
|
||||
|
||||
const toInput = getToInput();
|
||||
toInput.value = '10-10-2018';
|
||||
toInput.dispatchEvent(new Event('input'));
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
expect(component.getFromValidationMessage()).toEqual('');
|
||||
expect(component.getToValidationMessage()).toEqual('SEARCH.FILTER.VALIDATION.NO-DAYS');
|
||||
});
|
||||
|
||||
it('should not show date-format error when valid found', async () => {
|
||||
fixture.detectChanges();
|
||||
|
||||
const input = getFromInput();
|
||||
input.value = '10-10-2018';
|
||||
input.dispatchEvent(new Event('input'));
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
expect(component.getFromValidationMessage()).toEqual('');
|
||||
});
|
||||
|
||||
it('should have no maximum date by default', async () => {
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
expect(component.maxDate).toBeUndefined();
|
||||
});
|
||||
|
||||
it('should be able to set a fixed maximum date', async () => {
|
||||
component.settings = { field: 'cm:created', dateFormat: dateFormatFixture, maxDate: '10-Mar-20' };
|
||||
fixture.detectChanges();
|
||||
|
||||
const expected = endOfDay(new Date(2020, 2, 10));
|
||||
expect(component.maxDate).toEqual(expected);
|
||||
});
|
||||
|
||||
it('should be able to set the maximum date to today', async () => {
|
||||
component.settings = { field: 'cm:created', dateFormat: dateFormatFixture, maxDate: 'today' };
|
||||
fixture.detectChanges();
|
||||
const today = endOfDay(new Date());
|
||||
|
||||
expect(component.maxDate).toEqual(today);
|
||||
});
|
||||
});
|
||||
@@ -1,240 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
|
||||
import { ADF_DATE_FORMATS, AdfDateFnsAdapter } from '@alfresco/adf-core';
|
||||
import { SearchWidget } from '../../models/search-widget.interface';
|
||||
import { SearchWidgetSettings } from '../../models/search-widget-settings.interface';
|
||||
import { SearchQueryBuilderService } from '../../services/search-query-builder.service';
|
||||
import { LiveErrorStateMatcher } from '../../forms/live-error-state-matcher';
|
||||
import { Subject } from 'rxjs';
|
||||
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
|
||||
import { startOfDay, endOfDay, isBefore, isValid as isValidDate } from 'date-fns';
|
||||
|
||||
export interface DateRangeValue {
|
||||
from: string;
|
||||
to: string;
|
||||
}
|
||||
|
||||
const DEFAULT_FORMAT_DATE: string = 'DD/MM/YYYY';
|
||||
|
||||
interface DateRangeForm {
|
||||
from: FormControl<Date>;
|
||||
to: FormControl<Date>;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'adf-search-date-range',
|
||||
templateUrl: './search-date-range.component.html',
|
||||
styleUrls: ['./search-date-range.component.scss'],
|
||||
providers: [
|
||||
{ provide: MAT_DATE_FORMATS, useValue: ADF_DATE_FORMATS },
|
||||
{ provide: DateAdapter, useClass: AdfDateFnsAdapter }
|
||||
],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-search-date-range' }
|
||||
})
|
||||
export class SearchDateRangeComponent implements SearchWidget, OnInit {
|
||||
from: FormControl<Date>;
|
||||
to: FormControl<Date>;
|
||||
|
||||
form: FormGroup<DateRangeForm>;
|
||||
matcher = new LiveErrorStateMatcher();
|
||||
|
||||
id: string;
|
||||
settings?: SearchWidgetSettings;
|
||||
context?: SearchQueryBuilderService;
|
||||
datePickerFormat: string;
|
||||
maxDate: Date;
|
||||
fromMaxDate: Date;
|
||||
isActive = false;
|
||||
startValue: any;
|
||||
enableChangeUpdate: boolean;
|
||||
displayValue$ = new Subject<string>();
|
||||
|
||||
constructor(private dateAdapter: DateAdapter<Date>) {}
|
||||
|
||||
getFromValidationMessage(): string {
|
||||
return this.from.hasError('invalidOnChange') || this.hasParseError(this.from)
|
||||
? 'SEARCH.FILTER.VALIDATION.INVALID-DATE'
|
||||
: this.from.hasError('matDatepickerMax')
|
||||
? 'SEARCH.FILTER.VALIDATION.BEYOND-MAX-DATE'
|
||||
: this.from.hasError('required')
|
||||
? 'SEARCH.FILTER.VALIDATION.REQUIRED-VALUE'
|
||||
: '';
|
||||
}
|
||||
|
||||
getToValidationMessage(): string {
|
||||
return this.to.hasError('invalidOnChange') || this.hasParseError(this.to)
|
||||
? 'SEARCH.FILTER.VALIDATION.INVALID-DATE'
|
||||
: this.to.hasError('matDatepickerMin')
|
||||
? 'SEARCH.FILTER.VALIDATION.NO-DAYS'
|
||||
: this.to.hasError('matDatepickerMax')
|
||||
? 'SEARCH.FILTER.VALIDATION.BEYOND-MAX-DATE'
|
||||
: this.to.hasError('required')
|
||||
? 'SEARCH.FILTER.VALIDATION.REQUIRED-VALUE'
|
||||
: '';
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.datePickerFormat = this.settings?.dateFormat ? this.settings.dateFormat : DEFAULT_FORMAT_DATE;
|
||||
|
||||
const customDateAdapter = this.dateAdapter as AdfDateFnsAdapter;
|
||||
customDateAdapter.displayFormat = this.datePickerFormat;
|
||||
|
||||
const validators = Validators.compose([Validators.required]);
|
||||
|
||||
if (this.settings?.maxDate) {
|
||||
if (this.settings.maxDate === 'today') {
|
||||
this.maxDate = endOfDay(this.dateAdapter.today());
|
||||
} else {
|
||||
this.maxDate = endOfDay(this.dateAdapter.parse(this.settings.maxDate, this.datePickerFormat));
|
||||
}
|
||||
}
|
||||
|
||||
if (this.startValue) {
|
||||
const splitValue = this.startValue.split('||');
|
||||
const fromValue = this.dateAdapter.parse(splitValue[0], this.datePickerFormat);
|
||||
const toValue = this.dateAdapter.parse(splitValue[1], this.datePickerFormat);
|
||||
this.from = new FormControl(fromValue, validators);
|
||||
this.to = new FormControl(toValue, validators);
|
||||
} else {
|
||||
this.from = new FormControl(null, validators);
|
||||
this.to = new FormControl(null, validators);
|
||||
}
|
||||
|
||||
this.form = new FormGroup({
|
||||
from: this.from,
|
||||
to: this.to
|
||||
});
|
||||
|
||||
this.setFromMaxDate();
|
||||
this.enableChangeUpdate = this.settings?.allowUpdateOnChange ?? true;
|
||||
}
|
||||
|
||||
apply(model: Partial<{ from: Date; to: Date }>, isValid: boolean) {
|
||||
if (isValid && this.id && this.context && this.settings && this.settings.field) {
|
||||
this.isActive = true;
|
||||
|
||||
const start = startOfDay(model.from).toISOString();
|
||||
const end = endOfDay(model.to).toISOString();
|
||||
|
||||
this.context.queryFragments[this.id] = `${this.settings.field}:['${start}' TO '${end}']`;
|
||||
|
||||
this.updateDisplayValue();
|
||||
this.context.update();
|
||||
}
|
||||
}
|
||||
|
||||
submitValues() {
|
||||
this.apply(this.form.value, this.form.valid);
|
||||
}
|
||||
|
||||
hasValidValue(): boolean {
|
||||
return this.form.valid;
|
||||
}
|
||||
|
||||
getCurrentValue(): DateRangeValue {
|
||||
return {
|
||||
from: this.dateAdapter.format(this.form.value.from, this.datePickerFormat),
|
||||
to: this.dateAdapter.format(this.form.value.from, this.datePickerFormat)
|
||||
};
|
||||
}
|
||||
|
||||
updateDisplayValue(): void {
|
||||
if (this.form.invalid || this.form.pristine) {
|
||||
this.displayValue$.next('');
|
||||
} else {
|
||||
this.displayValue$.next(
|
||||
`${this.dateAdapter.format(this.form.value.from, this.datePickerFormat)} - ${this.dateAdapter.format(
|
||||
this.form.value.to,
|
||||
this.datePickerFormat
|
||||
)}`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
setValue(parsedDate: string) {
|
||||
const splitValue = parsedDate.split('||');
|
||||
const fromValue = this.dateAdapter.parse(splitValue[0], this.datePickerFormat);
|
||||
const toValue = this.dateAdapter.parse(splitValue[1], this.datePickerFormat);
|
||||
this.from.setValue(fromValue);
|
||||
this.from.markAsDirty();
|
||||
this.from.markAsTouched();
|
||||
this.to.setValue(toValue);
|
||||
this.to.markAsDirty();
|
||||
this.to.markAsTouched();
|
||||
this.submitValues();
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.isActive = false;
|
||||
this.form.reset({
|
||||
from: null,
|
||||
to: null
|
||||
});
|
||||
|
||||
if (this.id && this.context) {
|
||||
this.context.queryFragments[this.id] = '';
|
||||
if (this.enableChangeUpdate) {
|
||||
this.updateQuery();
|
||||
}
|
||||
}
|
||||
|
||||
this.setFromMaxDate();
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.clear();
|
||||
this.updateQuery();
|
||||
}
|
||||
|
||||
private updateQuery() {
|
||||
if (this.id && this.context) {
|
||||
this.updateDisplayValue();
|
||||
this.context.update();
|
||||
}
|
||||
}
|
||||
|
||||
onChangedHandler(event: MatDatepickerInputEvent<Date>, formControl: FormControl) {
|
||||
const inputValue = event.value;
|
||||
|
||||
if (isValidDate(inputValue)) {
|
||||
formControl.setValue(inputValue);
|
||||
} else if (inputValue) {
|
||||
formControl.setErrors({
|
||||
invalidOnChange: true
|
||||
});
|
||||
}
|
||||
|
||||
this.setFromMaxDate();
|
||||
}
|
||||
|
||||
hasParseError(formControl: FormControl): boolean {
|
||||
return formControl.hasError('matDatepickerParse') && formControl.getError('matDatepickerParse').text;
|
||||
}
|
||||
|
||||
forcePlaceholder(event: any) {
|
||||
event.srcElement.click();
|
||||
}
|
||||
|
||||
setFromMaxDate() {
|
||||
this.fromMaxDate = !this.to.value || (this.maxDate && isBefore(this.maxDate, this.to.value)) ? this.maxDate : this.to.value;
|
||||
}
|
||||
}
|
||||
@@ -47,7 +47,6 @@ export * from './components/search.component';
|
||||
export * from './components/search-panel/search-panel.component';
|
||||
export * from './components/search-check-list/search-check-list.component';
|
||||
export * from './components/search-chip-list/search-chip-list.component';
|
||||
export * from './components/search-date-range/search-date-range.component';
|
||||
export * from './components/search-filter/search-filter.component';
|
||||
export * from './components/search-filter-container/search-filter-container.component';
|
||||
export * from './components/search-number-range/search-number-range.component';
|
||||
@@ -63,7 +62,8 @@ export * from './components/search-filter-chips/search-filter-chips.component';
|
||||
export * from './components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component';
|
||||
export * from './components/search-facet-field/search-facet-field.component';
|
||||
export * from './components/search-logical-filter/search-logical-filter.component';
|
||||
export * from './components/search-date-range-advanced-tabbed/search-date-range-advanced/search-date-range-advanced.component';
|
||||
export * from './components/search-date-range-tabbed/search-date-range/search-date-range.component';
|
||||
export * from './components/search-date-range-tabbed/search-date-range-tabbed.component';
|
||||
export * from './components/search-filter-tabbed/search-filter-tabbed.component';
|
||||
export * from './components/reset-search.directive';
|
||||
export * from './components/search-chip-autocomplete-input/search-chip-autocomplete-input.component';
|
||||
|
||||
@@ -37,7 +37,6 @@ import { SearchSliderComponent } from './components/search-slider/search-slider.
|
||||
import { SearchNumberRangeComponent } from './components/search-number-range/search-number-range.component';
|
||||
import { SearchPanelComponent } from './components/search-panel/search-panel.component';
|
||||
import { SearchCheckListComponent } from './components/search-check-list/search-check-list.component';
|
||||
import { SearchDateRangeComponent } from './components/search-date-range/search-date-range.component';
|
||||
import { SearchSortingPickerComponent } from './components/search-sorting-picker/search-sorting-picker.component';
|
||||
import { SEARCH_QUERY_SERVICE_TOKEN } from './search-query-service.token';
|
||||
import { SearchQueryBuilderService } from './services/search-query-builder.service';
|
||||
@@ -53,8 +52,8 @@ import { SearchLogicalFilterComponent } from './components/search-logical-filter
|
||||
import { ResetSearchDirective } from './components/reset-search.directive';
|
||||
import { SearchPropertiesComponent } from './components/search-properties/search-properties.component';
|
||||
import { SearchFilterTabbedComponent } from './components/search-filter-tabbed/search-filter-tabbed.component';
|
||||
import { SearchDateRangeAdvancedComponent } from './components/search-date-range-advanced-tabbed/search-date-range-advanced/search-date-range-advanced.component';
|
||||
import { SearchDateRangeAdvancedTabbedComponent } from './components/search-date-range-advanced-tabbed/search-date-range-advanced-tabbed.component';
|
||||
import { SearchDateRangeComponent } from './components/search-date-range-tabbed/search-date-range/search-date-range.component';
|
||||
import { SearchDateRangeTabbedComponent } from './components/search-date-range-tabbed/search-date-range-tabbed.component';
|
||||
import { SearchFilterTabDirective } from './components/search-filter-tabbed/search-filter-tab.directive';
|
||||
import { SearchFacetChipTabbedComponent } from './components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component';
|
||||
import { SearchFacetTabbedContentComponent } from './components/search-filter-chips/search-facet-chip-tabbed/search-facet-tabbed-content.component';
|
||||
@@ -84,7 +83,6 @@ import { SearchFacetTabbedContentComponent } from './components/search-filter-ch
|
||||
SearchNumberRangeComponent,
|
||||
SearchPanelComponent,
|
||||
SearchCheckListComponent,
|
||||
SearchDateRangeComponent,
|
||||
SearchDatetimeRangeComponent,
|
||||
SearchSortingPickerComponent,
|
||||
SearchFilterContainerComponent,
|
||||
@@ -98,8 +96,8 @@ import { SearchFacetTabbedContentComponent } from './components/search-filter-ch
|
||||
ResetSearchDirective,
|
||||
SearchPropertiesComponent,
|
||||
SearchFilterTabbedComponent,
|
||||
SearchDateRangeAdvancedComponent,
|
||||
SearchDateRangeAdvancedTabbedComponent,
|
||||
SearchDateRangeComponent,
|
||||
SearchDateRangeTabbedComponent,
|
||||
SearchFilterTabDirective,
|
||||
SearchFacetChipTabbedComponent,
|
||||
SearchFacetTabbedContentComponent
|
||||
@@ -119,7 +117,6 @@ import { SearchFacetTabbedContentComponent } from './components/search-filter-ch
|
||||
SearchNumberRangeComponent,
|
||||
SearchPanelComponent,
|
||||
SearchCheckListComponent,
|
||||
SearchDateRangeComponent,
|
||||
SearchDatetimeRangeComponent,
|
||||
SearchSortingPickerComponent,
|
||||
SearchFilterContainerComponent,
|
||||
@@ -129,7 +126,8 @@ import { SearchFacetTabbedContentComponent } from './components/search-filter-ch
|
||||
SearchFacetFieldComponent,
|
||||
SearchLogicalFilterComponent,
|
||||
SearchFilterTabbedComponent,
|
||||
SearchDateRangeAdvancedComponent,
|
||||
SearchDateRangeComponent,
|
||||
SearchDateRangeTabbedComponent,
|
||||
ResetSearchDirective,
|
||||
SearchFacetChipTabbedComponent,
|
||||
SearchFacetTabbedContentComponent
|
||||
|
||||
@@ -21,14 +21,11 @@ import { SearchRadioComponent } from '../components/search-radio/search-radio.co
|
||||
import { SearchSliderComponent } from '../components/search-slider/search-slider.component';
|
||||
import { SearchNumberRangeComponent } from '../components/search-number-range/search-number-range.component';
|
||||
import { SearchCheckListComponent } from '../components/search-check-list/search-check-list.component';
|
||||
import { SearchDateRangeComponent } from '../components/search-date-range/search-date-range.component';
|
||||
import { SearchDatetimeRangeComponent } from '../components/search-datetime-range/search-datetime-range.component';
|
||||
import { SearchLogicalFilterComponent } from '../components/search-logical-filter/search-logical-filter.component';
|
||||
import { SearchFilterAutocompleteChipsComponent } from '../components/search-filter-autocomplete-chips/search-filter-autocomplete-chips.component';
|
||||
import { SearchPropertiesComponent } from '../components/search-properties/search-properties.component';
|
||||
import {
|
||||
SearchDateRangeAdvancedTabbedComponent
|
||||
} from '../components/search-date-range-advanced-tabbed/search-date-range-advanced-tabbed.component';
|
||||
import { SearchDateRangeTabbedComponent } from '../components/search-date-range-tabbed/search-date-range-tabbed.component';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
@@ -45,11 +42,10 @@ export class SearchFilterService {
|
||||
properties: SearchPropertiesComponent,
|
||||
'number-range': SearchNumberRangeComponent,
|
||||
'check-list': SearchCheckListComponent,
|
||||
'date-range': SearchDateRangeComponent,
|
||||
'datetime-range': SearchDatetimeRangeComponent,
|
||||
'logical-filter': SearchLogicalFilterComponent,
|
||||
'autocomplete-chips': SearchFilterAutocompleteChipsComponent,
|
||||
'date-range-advanced': SearchDateRangeAdvancedTabbedComponent
|
||||
'date-range': SearchDateRangeTabbedComponent
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user