inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-4985] Migrated SearchDateRangeAdvancedComponent from moment.js to date-fns

Browse Source
This commit is contained in:
swapnil.verma
2023-07-27 11:14:48 +05:30
committed by Jatin_Chugh
parent c8e4e179b3
commit 520c6e588f
1 changed files with 19 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/content-services/src/lib/search/components/search-date-range-advanced/search-date-range-advanced.component.ts
+19 -46
View File
@@ -1,19 +1,11 @@
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { SearchWidget } from '../../models/search-widget.interface'; import { SearchWidget } from '../../models/search-widget.interface';
import { SearchWidgetSettings } from '../../models/search-widget-settings.interface'; import { SearchWidgetSettings } from '../../models/search-widget-settings.interface';
import { SearchQueryBuilderService } from '../../services/search-query-builder.service'; import { SearchQueryBuilderService } from '../../services/search-query-builder.service';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { Moment } from 'moment';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { import { TranslationService } from '@alfresco/adf-core';
MOMENT_DATE_FORMATS, import { endOfDay, format, formatISO, parse, startOfDay } from 'date-fns';
MomentDateAdapter, TranslationService, import { DateAdapter, NativeDateAdapter } from '@angular/material/core';
UserPreferencesService,
UserPreferenceValues
} from '@alfresco/adf-core';
import { takeUntil } from 'rxjs/operators';
declare let moment: any;
enum DateRangeType { enum DateRangeType {
ANY = 'ANY', ANY = 'ANY',
@@ -33,20 +25,19 @@ interface SearchDateRangeAdvanced {
[indexer: string]: any; [indexer: string]: any;
} }
const DEFAULT_FORMAT_DATE: string = 'DD/MM/YYYY'; const DEFAULT_DATE_DISPLAY_FORMAT: string = 'dd-MMM-yyyy';
@Component({ @Component({
selector: 'adf-search-date-range-advanced', selector: 'adf-search-date-range-advanced',
templateUrl: './search-date-range-advanced.component.html', templateUrl: './search-date-range-advanced.component.html',
styleUrls: ['./search-date-range-advanced.component.scss'], styleUrls: ['./search-date-range-advanced.component.scss'],
providers: [ providers: [
{provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]}, {provide: DateAdapter, useClass: NativeDateAdapter},
{provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS}
], ],
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
host: {class: 'adf-search-date-range-advanced'} host: {class: 'adf-search-date-range-advanced'}
}) })
export class SearchDateRangeAdvancedComponent implements SearchWidget, OnInit, OnDestroy { export class SearchDateRangeAdvancedComponent implements SearchWidget, OnInit {
displayValue$: Subject<string> = new Subject<string>(); displayValue$: Subject<string> = new Subject<string>();
isActive: boolean; isActive: boolean;
@@ -67,43 +58,24 @@ export class SearchDateRangeAdvancedComponent implements SearchWidget, OnInit, O
private datePickerFormat: string; private datePickerFormat: string;
private onDestroy$ = new Subject<void>(); constructor(private translate: TranslationService) {
constructor(private dateAdapter: DateAdapter<Moment>,
private translate: TranslationService,
private userPreferencesService: UserPreferencesService) {
} }
ngOnInit(): void { ngOnInit(): void {
this.datePickerFormat = this.settings?.dateFormat ? this.settings.dateFormat : DEFAULT_FORMAT_DATE; this.datePickerFormat = this.settings?.dateFormat ? this.settings.dateFormat : DEFAULT_DATE_DISPLAY_FORMAT;
if (this.settings && this.settings.maxDate) { if (this.settings) {
if (this.settings.maxDate === 'today') { if (!this.settings.maxDate || this.settings.maxDate === 'today') {
this.maxDate = this.dateAdapter.today().endOf('day'); this.maxDate = endOfDay(new Date());
} else { } else {
this.maxDate = moment(this.settings.maxDate).endOf('day'); this.maxDate = endOfDay(parse(this.settings.maxDate, this.datePickerFormat, new Date()));
} }
} }
this.userPreferencesService
.select(UserPreferenceValues.Locale)
.pipe(takeUntil(this.onDestroy$))
.subscribe(locale => this.setLocale(locale));
if (this.startValue) { if (this.startValue) {
this.setValue(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 { getCurrentValue(): SearchDateRangeAdvanced {
let currentValue = {}; let currentValue = {};
switch (this.dateRangeTypeValue) { switch (this.dateRangeTypeValue) {
@@ -191,8 +163,8 @@ export class SearchDateRangeAdvancedComponent implements SearchWidget, OnInit, O
break; break;
case DateRangeType.BETWEEN: case DateRangeType.BETWEEN:
if (this.hasValidValue()) { if (this.hasValidValue()) {
const start = moment(this.betweenStartDate).startOf('day').format(); const start = formatISO(startOfDay(this.betweenStartDate));
const end = moment(this.betweenEndDate).endOf('day').format(); const end = formatISO(endOfDay(this.betweenEndDate));
query = `${this.settings.field}:['${start}' TO '${end}']`; query = `${this.settings.field}:['${start}' TO '${end}']`;
} }
} }
@@ -208,13 +180,13 @@ export class SearchDateRangeAdvancedComponent implements SearchWidget, OnInit, O
switch (this.dateRangeTypeValue) { switch (this.dateRangeTypeValue) {
case DateRangeType.IN_LAST: case DateRangeType.IN_LAST:
if (this.hasValidValue()) { if (this.hasValidValue()) {
displayLabel = this.translate.instant(`SEARCH.DATE_RANGE_ADVANCED.IN_LAST_DISPLAY_LABELS.${this.inLastValueType}`, { value: this.inLastValue }); displayLabel = this.translate.instant(`SEARCH.DATE_RANGE_ADVANCED.IN_LAST_DISPLAY_LABELS.${this.inLastValueType}`, {value: this.inLastValue});
} }
break; break;
case DateRangeType.BETWEEN: case DateRangeType.BETWEEN:
if (this.hasValidValue()) { if (this.hasValidValue()) {
const start = moment(this.betweenStartDate).startOf('day').format(this.datePickerFormat); const start = format(startOfDay(this.betweenStartDate), this.datePickerFormat);
const end = moment(this.betweenEndDate).endOf('day').format(this.datePickerFormat); const end = format(endOfDay(this.betweenEndDate), this.datePickerFormat);
displayLabel = `${start} - ${end}`; displayLabel = `${start} - ${end}`;
} }
break; break;
@@ -228,5 +200,6 @@ export class SearchDateRangeAdvancedComponent implements SearchWidget, OnInit, O
} }
} }
} }
//TODO: Format dates for Between date range type //TODO: Format dates for Between date range type