[ACS-4985] Added SearchFilterTabbedComponent and SearchDateRangeAdvancedComponent. Added config for using the new components

2026-09-09 18:03:21 +00:00 · 2023-07-27 11:14:48 +05:30
parent fee60cd4ab
commit f8455a57cc
6 changed files with 351 additions and 2 deletions
@@ -0,0 +1,40 @@
+<mat-radio-group [(ngModel)]="dateRangeTypeValue">
+  <span class="adf-search-data-range-horizontal-container">
+    <mat-radio-button [value]="DateRangeType.ANY">
+      {{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.ANYTIME' | translate }}
+    </mat-radio-button>
+  </span>
+  <span class="adf-search-date-range-horizontal-container">
+    <mat-radio-button [value]="DateRangeType.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 type="number" min="1" [(ngModel)]="inLastValue">
+    </mat-form-field>
+    <mat-form-field class="adf-search-date-range-form-field">
+      <mat-select [(ngModel)]="inLastValueType">
+        <mat-option [value]="InLastDateType.DAYS">{{ 'SEARCH.DATE_RANGE_ADVANCED.IN_LAST_LABELS.DAYS' | translate }}</mat-option>
+        <mat-option [value]="InLastDateType.WEEKS">{{ 'SEARCH.DATE_RANGE_ADVANCED.IN_LAST_LABELS.WEEKS' | translate }}</mat-option>
+        <mat-option [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-horizontal-container">
+    <mat-radio-button [value]="DateRangeType.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]="picker" [max]="maxDate">
+        <input matStartDate placeholder="{{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDERS.START_DATE' | translate }}" [(ngModel)]="betweenStartDate">
+        <input matEndDate placeholder="{{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDERS.END_DATE' | translate }}" [(ngModel)]="betweenEndDate">
+      </mat-date-range-input>
+      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+      <mat-date-range-picker #picker></mat-date-range-picker>
+    </mat-form-field>
+  </span>
+</mat-radio-group>
+
+<div class="adf-facet-buttons adf-facet-buttons--topSpace" *ngIf="!settings?.hideDefaultAction">
+  <button mat-button color="primary" type="button" (click)="reset()" data-automation-id="date-range-advanced-clear-btn">
+    {{ 'SEARCH.FILTER.ACTIONS.CLEAR' | translate }}
+  </button>
+  <button mat-button color="primary" (click)="submitValues()" data-automation-id="date-range-advanced-apply-btn">
+    {{ 'SEARCH.FILTER.ACTIONS.APPLY' | translate }}
+  </button>
+</div>
@@ -0,0 +1,25 @@
+.adf-search-date-range-advanced {
+  .mat-radio-group {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .mat-radio-button {
+    margin: 5px;
+  }
+
+  .adf-search-date-range-horizontal-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .adf-search-date-range-input-field {
+      width: 75px;
+    }
+
+    .adf-search-date-range-form-field {
+      padding-left: 10px;
+      flex: 1;
+    }
+  }
+}
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchDateRangeAdvancedComponent } from './search-date-range-advanced.component';
+
+describe('SearchDateRangeAdvancedComponent', () => {
+  let component: SearchDateRangeAdvancedComponent;
+  let fixture: ComponentFixture<SearchDateRangeAdvancedComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SearchDateRangeAdvancedComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SearchDateRangeAdvancedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,238 @@
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import {
+    SearchQueryBuilderService,
+    SearchWidget,
+    SearchWidgetSettings
+} from '@alfresco/adf-content-services';
+import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
+import { Moment } from 'moment';
+import { Subject } from 'rxjs';
+import { TranslateService } from '@ngx-translate/core';
+import {
+    MOMENT_DATE_FORMATS,
+    MomentDateAdapter,
+    UserPreferencesService,
+    UserPreferenceValues
+} from '@alfresco/adf-core';
+import { takeUntil } from 'rxjs/operators';
+
+declare let moment: any;
+
+enum DateRangeType {
+    ANY = 'ANY',
+    IN_LAST = 'IN_LAST',
+    BETWEEN = 'BETWEEN',
+}
+
+enum InLastDateType {
+    DAYS = 'DAYS',
+    WEEKS = 'WEEKS',
+    MONTHS = 'MONTHS'
+}
+
+interface SearchDateRangeAdvanced {
+    dateRangeType: DateRangeType;
+
+    [indexer: string]: any;
+}
+
+const DEFAULT_FORMAT_DATE: string = 'DD/MM/YYYY';
+
+@Component({
+    selector: 'adf-search-date-range-advanced',
+    templateUrl: './search-date-range-advanced.component.html',
+    styleUrls: ['./search-date-range-advanced.component.scss'],
+    providers: [
+        {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
+        {provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS}
+    ],
+    encapsulation: ViewEncapsulation.None,
+    host: {class: 'adf-search-date-range-advanced'}
+})
+export class SearchDateRangeAdvancedComponent implements SearchWidget, OnInit, OnDestroy {
+    displayValue$: Subject<string> = new Subject<string>();
+    isActive: boolean;
+
+    id: string;
+    settings?: SearchWidgetSettings;
+    context?: SearchQueryBuilderService;
+    startValue: SearchDateRangeAdvanced;
+    maxDate: any;
+    dateRangeTypeValue: DateRangeType = DateRangeType.ANY;
+    inLastValue: string;
+    inLastValueType: InLastDateType = InLastDateType.DAYS;
+    betweenStartDate: any;
+    betweenEndDate: any;
+
+    DateRangeType = DateRangeType;
+    InLastDateType = InLastDateType;
+
+    private enableChangeUpdate: boolean;
+    private datePickerFormat: string;
+    private disableUpdateOnSubmit = false;
+
+    private onDestroy$ = new Subject<void>();
+
+    constructor(private dateAdapter: DateAdapter<Moment>,
+                private translate: TranslateService,
+                private userPreferencesService: UserPreferencesService) {
+    }
+
+    ngOnInit(): void {
+        this.datePickerFormat = this.settings?.dateFormat ? this.settings.dateFormat : DEFAULT_FORMAT_DATE;
+        this.disableUpdateOnSubmit = this.settings?.disableUpdateOnSubmit;
+        if (this.settings && this.settings.maxDate) {
+            if (this.settings.maxDate === 'today') {
+                this.maxDate = this.dateAdapter.today().endOf('day');
+            } else {
+                this.maxDate = moment(this.settings.maxDate).endOf('day');
+            }
+        }
+        this.enableChangeUpdate = this.settings?.allowUpdateOnChange ?? true;
+
+        this.userPreferencesService
+            .select(UserPreferenceValues.Locale)
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(locale => this.setLocale(locale));
+
+        if (this.startValue) {
+            this.setValue(this.startValue);
+        }
+    }
+
+    ngOnDestroy(): void {
+        this.onDestroy$.next();
+        this.onDestroy$.complete();
+    }
+
+    setLocale(locale) {
+        this.dateAdapter.setLocale(locale);
+        moment.locale(locale);
+    }
+
+    getCurrentValue(): SearchDateRangeAdvanced {
+        let currentValue = {};
+        switch (this.dateRangeTypeValue) {
+            case DateRangeType.IN_LAST:
+                currentValue = {
+                    inLastValue: this.inLastValue,
+                    inLastValueType: this.inLastValueType
+                };
+                break;
+            case DateRangeType.BETWEEN:
+                currentValue = {
+                    betweenStartDate: this.betweenStartDate,
+                    betweenEndDate: this.betweenEndDate
+                };
+                break;
+        }
+        return {
+            dateRangeType: this.dateRangeTypeValue,
+            ...currentValue
+        };
+    }
+
+    hasValidValue(): boolean {
+        let isValid = false;
+        switch (this.dateRangeTypeValue) {
+            case DateRangeType.ANY:
+                isValid = true;
+                break;
+            case DateRangeType.IN_LAST:
+                if (this.inLastValue) {
+                    isValid = true;
+                }
+                break;
+            case DateRangeType.BETWEEN:
+                if (this.betweenStartDate && this.betweenEndDate) {
+                    isValid = true;
+                }
+                break;
+            default:
+                isValid = false;
+        }
+        return isValid;
+    }
+
+    reset(): void {
+        this.isActive = false;
+
+        this.dateRangeTypeValue = DateRangeType.ANY;
+        this.inLastValue = '';
+        this.inLastValueType = InLastDateType.DAYS;
+        this.betweenStartDate = '';
+        this.betweenEndDate = '';
+
+        if (this.id && this.context) {
+            this.context.queryFragments[this.id] = '';
+            if (this.enableChangeUpdate) {
+                this.updateQuery();
+            }
+        }
+
+    }
+
+    setValue(value: SearchDateRangeAdvanced) {
+        this.dateRangeTypeValue = value.dateRangeType ? value.dateRangeType : DateRangeType.ANY;
+        switch (this.dateRangeTypeValue) {
+            case DateRangeType.IN_LAST:
+                this.inLastValue = value.inLastValue;
+                this.inLastValueType = value.inLastValueType;
+                break;
+            case DateRangeType.BETWEEN:
+                this.betweenStartDate = value.betweenStartDate;
+                this.betweenEndDate = value.betweeenEndDate;
+                break;
+        }
+    }
+
+    submitValues(): void {
+        let query = '';
+        this.isActive = true;
+        switch (this.dateRangeTypeValue) {
+            case DateRangeType.IN_LAST:
+                if (this.hasValidValue()) {
+                    query = `${this.settings.field}:[NOW/DAY-${this.inLastValue}${this.inLastValueType} TO NOW/DAY+1DAY]`;
+                }
+                break;
+            case DateRangeType.BETWEEN:
+                if (this.hasValidValue()) {
+                    const start = moment(this.betweenStartDate).startOf('day').format();
+                    const end = moment(this.betweenEndDate).endOf('day').format();
+                    query = `${this.settings.field}:['${start}' TO '${end}']`;
+                }
+        }
+        this.context.queryFragments[this.id] = query;
+        this.updateDisplayValue();
+        if (!this.disableUpdateOnSubmit) {
+            this.updateQuery();
+        }
+    }
+
+    updateDisplayValue(): void {
+        let displayLabel = '';
+        switch (this.dateRangeTypeValue) {
+            case DateRangeType.IN_LAST:
+                if (this.hasValidValue()) {
+                    displayLabel = `${this.translate.instant('SEARCH.DATE_RANGE_ADVANCED.OPTIONS.IN_LAST')} ${this.inLastValue} ${this.translate.instant(`SEARCH.DATE_RANGE_ADVANCED.IN_LAST_LABELS.${this.inLastValueType}`)}`;
+                }
+                break;
+            case DateRangeType.BETWEEN:
+                if (this.hasValidValue()) {
+                    const start = moment(this.betweenStartDate).startOf('day').format(this.datePickerFormat);
+                    const end = moment(this.betweenEndDate).endOf('day').format(this.datePickerFormat);
+                    displayLabel = `${start} - ${end}`;
+                }
+                break;
+        }
+        this.displayValue$.next(displayLabel);
+    }
+
+    private updateQuery() {
+        if (this.id && this.context) {
+            this.context.update();
+        }
+    }
+}
+
+//TODO: Format dates for Between date range type
@@ -16,10 +16,10 @@
 */

 import { Component, ElementRef, Input, ViewChild, ViewEncapsulation } from '@angular/core';
-import { SearchCategory } from '../../../models/search-category.interface';
+import { SearchCategory } from '@alfresco/adf-content-services';
 import { ConfigurableFocusTrap, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
 import { MatMenuTrigger } from '@angular/material/menu';
-import { SearchWidgetContainerComponent } from '../../search-widget-container/search-widget-container.component';
+import { SearchWidgetContainerComponent } from '@alfresco/adf-content-services';

@Component({
  selector: 'adf-search-widget-chip',
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchFilterTabbedComponent } from './search-filter-tabbed.component';
+
+describe('SearchFilterTabbedComponent', () => {
+  let component: SearchFilterTabbedComponent;
+  let fixture: ComponentFixture<SearchFilterTabbedComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SearchFilterTabbedComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SearchFilterTabbedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});