inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-6107] Replaced SearchDateRange component with SearchDateRangeAdvanced Component (#9023)

Browse Source 
* [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
2023-12-06 17:03:43 +05:30
committed by GitHub
parent 88ab336d05
commit f47fb2a7e9
50 changed files with 220 additions and 1143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
lib/content-services/src/lib/i18n/en.json
View File

@@ -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": {

5
lib/content-services/src/lib/mock/search-filter-mock.ts
View File

@@ -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)'
}
}
}
},

4
lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced-tabbed.component.html → lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range-tabbed.component.html
View File

@@ -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>

44
lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced-tabbed.component.spec.ts → lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range-tabbed.component.spec.ts
View File

@@ -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();
});
});

30
lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced-tabbed.component.ts → lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range-tabbed.component.ts
View File

@@ -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) => {

0
lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced/date-range-type.ts → lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/date-range-type.ts
View File

0
lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced/in-last-date-type.ts → lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/in-last-date-type.ts
View File

22
lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced/search-date-range-advanced.component.html → lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.html
View File

@@ -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>

2
lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced/search-date-range-advanced.component.scss → lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.scss
View File

@@ -1,4 +1,4 @@
adf-search-date-range-advanced {
adf-search-date-range {
.adf-search-date-range-container {
margin-top: 20px;
padding: 10px;

70
lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced/search-date-range-advanced.component.spec.ts → lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.spec.ts
View File

@@ -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);

18
lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced/search-date-range-advanced.component.ts → lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.ts
View File

@@ -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,

2
lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced/search-date-range-advanced.ts → lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.ts
View File

@@ -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;

49
lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.html
View File

@@ -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>

5
lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.scss
View File

@@ -1,5 +0,0 @@
.adf-search-date-range > form {
display: inline-flex;
flex-direction: column;
width: 100%;
}

267
lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.spec.ts
View File

@@ -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);
});
});

240
lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.ts
View File

@@ -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;
}
}

4
lib/content-services/src/lib/search/public-api.ts
View File

@@ -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';

14
lib/content-services/src/lib/search/search.module.ts
View File

@@ -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

8
lib/content-services/src/lib/search/services/search-filter.service.ts
View File

@@ -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
};
}

141
lib/testing/src/lib/protractor/content-services/pages/search/date-range-filter.page.ts
View File

@@ -1,141 +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 { protractor, ElementFinder, $ } from 'protractor';
import { DatePickerCalendarPage } from '../../../core/pages/material/date-picker-calendar.page';
import { BrowserVisibility } from '../../../core/utils/browser-visibility';
import { BrowserActions } from '../../../core/utils/browser-actions';
export class DateRangeFilterPage {
fromField = '[data-automation-id="date-range-from-input"]';
fromDateToggle = '[data-automation-id="date-range-from-date-toggle"]';
toField = '[data-automation-id="date-range-to-input"]';
toDateToggle = '[data-automation-id="date-range-to-date-toggle"]';
applyButton = '[data-automation-id="date-range-apply-btn"]';
clearButton = '[data-automation-id="date-range-clear-btn"]';
fromErrorMessage = '[data-automation-id="date-range-from-error"]';
toErrorMessage = '[data-automation-id="date-range-to-error"]';
filter: ElementFinder;
constructor(filter: ElementFinder) {
this.filter = filter;
}
async getFromDate(): Promise<string> {
return BrowserActions.getInputValue(this.filter.$(this.fromField));
}
async putFromDate(date): Promise<void> {
await this.checkFromFieldIsDisplayed();
await BrowserActions.clearSendKeys(this.filter.$(this.fromField), date);
await this.filter.$(this.fromField).sendKeys(protractor.Key.ENTER);
}
async getFromCalendarSelectedDate(): Promise<string> {
const datePicker = await this.openFromDatePicker();
const selectedDate = await datePicker.getSelectedDate();
await datePicker.closeDatePicker();
return selectedDate;
}
async openFromDatePicker(): Promise<DatePickerCalendarPage> {
await BrowserActions.click(this.filter.$(this.fromDateToggle));
const datePicker = new DatePickerCalendarPage();
await datePicker.checkDatePickerIsDisplayed();
return datePicker;
}
async openToDatePicker(): Promise<DatePickerCalendarPage> {
await BrowserActions.click(this.filter.$(this.toDateToggle));
const datePicker = new DatePickerCalendarPage();
await datePicker.checkDatePickerIsDisplayed();
return datePicker;
}
async clickFromField(): Promise<void> {
await BrowserActions.click(this.filter.$(this.fromField));
}
async checkFromErrorMessageIsDisplayed(msg: string): Promise<void> {
await BrowserVisibility.waitUntilElementIsVisible(this.filter.$(this.fromErrorMessage));
const text = await BrowserActions.getText(this.filter.$(this.fromErrorMessage));
await expect(text).toEqual(msg);
}
async checkFromErrorMessageIsNotDisplayed(): Promise<void> {
await BrowserVisibility.waitUntilElementIsNotVisible(this.filter.$(this.fromErrorMessage));
}
async checkFromFieldIsDisplayed(): Promise<void> {
await BrowserVisibility.waitUntilElementIsVisible(this.filter.$(this.fromField));
}
async checkFromDateToggleIsDisplayed(): Promise<void> {
await BrowserVisibility.waitUntilElementIsVisible(this.filter.$(this.fromDateToggle));
}
async getToDate(): Promise<string> {
return BrowserActions.getInputValue(this.filter.$(this.toField));
}
async putToDate(date): Promise<void> {
await this.checkToFieldIsDisplayed();
await BrowserActions.clearSendKeys($(this.toField), date);
await this.filter.$(this.toField).sendKeys(protractor.Key.ENTER);
}
async clickToField(): Promise<void> {
await BrowserActions.click(this.filter.$(this.toField));
}
async checkToErrorMessageIsDisplayed(msg): Promise<void> {
await BrowserVisibility.waitUntilElementIsVisible(this.filter.$(this.toErrorMessage));
const text = await BrowserActions.getText(this.filter.$(this.toErrorMessage));
await expect(text).toEqual(msg);
}
async checkToFieldIsDisplayed(): Promise<void> {
await BrowserVisibility.waitUntilElementIsVisible(this.filter.$(this.toField));
}
async checkToDateToggleIsDisplayed(): Promise<void> {
await BrowserVisibility.waitUntilElementIsVisible(this.filter.$(this.toDateToggle));
}
async clickApplyButton(): Promise<void> {
await BrowserActions.click(this.filter.$(this.applyButton));
}
async checkApplyButtonIsDisplayed(): Promise<void> {
await BrowserVisibility.waitUntilElementIsVisible(this.filter.$(this.applyButton));
}
async checkApplyButtonIsEnabled(): Promise<void> {
const isEnabled = await this.filter.$(this.applyButton).isEnabled();
await expect(isEnabled).toBe(true);
}
async checkApplyButtonIsDisabled(): Promise<void> {
const isEnabled = await this.filter.$(this.applyButton).isEnabled();
await expect(isEnabled).toBe(false);
}
async checkClearButtonIsDisplayed(): Promise<void> {
await BrowserVisibility.waitUntilElementIsVisible(this.filter.$(this.clearButton));
}
}

1
lib/testing/src/lib/protractor/content-services/pages/search/public-api.ts
View File

@@ -16,7 +16,6 @@
*/
export * from './search-categories.page';
export * from './date-range-filter.page';
export * from './number-range-filter.page';
export * from './search-check-list.page';
export * from './search-radio.page';

5
lib/testing/src/lib/protractor/content-services/pages/search/search-categories.page.ts
View File

@@ -19,7 +19,6 @@ import { ElementFinder } from 'protractor';
import { SearchTextPage } from './search-text.page';
import { SearchCheckListPage } from './search-check-list.page';
import { SearchRadioPage } from './search-radio.page';
import { DateRangeFilterPage } from './date-range-filter.page';
import { NumberRangeFilterPage } from './number-range-filter.page';
import { SearchSliderPage } from './search-slider.page';
import { BrowserActions } from '../../../core/utils/browser-actions';
@@ -39,10 +38,6 @@ export class SearchCategoriesPage {
return new SearchRadioPage(filter);
}
static dateRangeFilter(filter: ElementFinder): DateRangeFilterPage {
return new DateRangeFilterPage(filter);
}
static numberRangeFilter(filter: ElementFinder): NumberRangeFilterPage {
return new NumberRangeFilterPage(filter);
}