mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
[ACS-5858] Migrated adfMomentDateTime Pipe to date-fns equivalent (#8856)
* [ACS-5858] created adfDateTimePipe and added unit tests * [ACS-5858] added revised unit tests * [ACS-5858] linting fixes * [ACS-5858] addressed review comments * [ACS-5858] addressed review comments
This commit is contained in:
parent
bb3000346f
commit
780800453a
@ -183,6 +183,7 @@ for more information about installing and using the source code.
|
|||||||
| [Text Highlight pipe](core/pipes/text-highlight.pipe.md) | Adds highlighting to words or sections of text that match a search string. | [Source](../lib/core/src/lib/pipes/text-highlight.pipe.ts) |
|
| [Text Highlight pipe](core/pipes/text-highlight.pipe.md) | Adds highlighting to words or sections of text that match a search string. | [Source](../lib/core/src/lib/pipes/text-highlight.pipe.ts) |
|
||||||
| [Time Ago pipe](core/pipes/time-ago.pipe.md) | Converts a recent past date into a number of days ago. | [Source](../lib/core/src/lib/pipes/time-ago.pipe.ts) |
|
| [Time Ago pipe](core/pipes/time-ago.pipe.md) | Converts a recent past date into a number of days ago. | [Source](../lib/core/src/lib/pipes/time-ago.pipe.ts) |
|
||||||
| [User Initial pipe](core/pipes/user-initial.pipe.md) | Takes the name fields of a UserProcessModel object and extracts and formats the initials. | [Source](../lib/core/src/lib/pipes/user-initial.pipe.ts) |
|
| [User Initial pipe](core/pipes/user-initial.pipe.md) | Takes the name fields of a UserProcessModel object and extracts and formats the initials. | [Source](../lib/core/src/lib/pipes/user-initial.pipe.ts) |
|
||||||
|
| [Date Time pipe](core/pipes/date-time.pipe.md) | Converts a given input value into a Date object and adjusts it according to the specified format and timezone offset. | [Source](../lib/core/src/lib/pipes/date-time.pipe.ts) |
|
||||||
|
|
||||||
### Services
|
### Services
|
||||||
|
|
||||||
|
47
docs/core/pipes/date-time.pipe.md
Normal file
47
docs/core/pipes/date-time.pipe.md
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
---
|
||||||
|
Title: Date Time Pipe
|
||||||
|
Added: v6.2.0
|
||||||
|
Status: Active
|
||||||
|
Last reviewed: 2023-08-30
|
||||||
|
---
|
||||||
|
|
||||||
|
# [Date Time Pipe](../../../lib/core/src/lib/pipes/date-time.pipe.ts "Defined in date-time.pipe.ts")
|
||||||
|
|
||||||
|
Converts a given input value into a Date object and adjusts it according to the specified format and timezone offset.
|
||||||
|
|
||||||
|
## Basic Usage
|
||||||
|
|
||||||
|
<!-- {% raw %} -->
|
||||||
|
|
||||||
|
```HTML
|
||||||
|
<div>
|
||||||
|
Adjusted Date: {{ inputValue | adfDateTime: 'your-date-format' }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
<!-- {% endraw %} -->
|
||||||
|
|
||||||
|
| Name | Type | Description |
|
||||||
|
| ---- | ---- | ----------- |
|
||||||
|
| value | string, Date, number | The input value to be converted to a Date object |
|
||||||
|
| dateFormat | string | The format to use for parsing the input string value |
|
||||||
|
| returns | Date | The adjusted Date object, accounted with timezone offset |
|
||||||
|
|
||||||
|
## Details
|
||||||
|
The pipe transforms the input value into a Date object, adjusting it for the timezone offset as necessary.
|
||||||
|
|
||||||
|
## Input Types
|
||||||
|
If the input value is of type string, it is parsed using the specified date format and converted to a Date object.
|
||||||
|
If the input value is a Date object, it is used as is.
|
||||||
|
If the input value is a number, it is treated as a Unix timestamp and converted to a Date object.
|
||||||
|
|
||||||
|
## Timezone Adjustment
|
||||||
|
The pipe calculates the timezone offset of the input value and adjusts it accordingly. This ensures that the resulting Date object is adjusted to the correct timezone.
|
||||||
|
|
||||||
|
## Example
|
||||||
|
```HTML
|
||||||
|
<div>
|
||||||
|
Date: {{ '2023-08-30T12:00:00' | adfDateTime: `yyyy-MM-dd'T'HH:mm:ss` }}
|
||||||
|
</div>
|
||||||
|
```
|
@ -52,6 +52,7 @@ backend services have been tested with each released version of ADF.
|
|||||||
- [Search Date Range Advanced Tabbed Component](content-services/components/search-date-range-advanced-tabbed.component.md)
|
- [Search Date Range Advanced Tabbed Component](content-services/components/search-date-range-advanced-tabbed.component.md)
|
||||||
- [Search Filter Tabbed Component](content-services/components/search-filter-tabbed.component.md)
|
- [Search Filter Tabbed Component](content-services/components/search-filter-tabbed.component.md)
|
||||||
- [Search Facet Chip Tabbed Component](content-services/components/search-facet-chip-tabbed.md)
|
- [Search Facet Chip Tabbed Component](content-services/components/search-facet-chip-tabbed.md)
|
||||||
|
- [Date Time Pipe](core/pipes/date-time.pipe.md)
|
||||||
|
|
||||||
<!--v620 end-->
|
<!--v620 end-->
|
||||||
|
|
||||||
|
70
lib/core/src/lib/pipes/date-time.pipe.spec.ts
Normal file
70
lib/core/src/lib/pipes/date-time.pipe.spec.ts
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
/*!
|
||||||
|
* @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 { TestBed } from '@angular/core/testing';
|
||||||
|
import { CoreTestingModule } from '../testing/core.testing.module';
|
||||||
|
import { TranslateModule } from '@ngx-translate/core';
|
||||||
|
import { DateTimePipe } from './date-time.pipe';
|
||||||
|
import { addMinutes, isValid } from 'date-fns';
|
||||||
|
|
||||||
|
describe('DateTimePipe', () => {
|
||||||
|
let pipe: DateTimePipe;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
imports: [TranslateModule.forRoot(), CoreTestingModule],
|
||||||
|
providers: [DateTimePipe]
|
||||||
|
});
|
||||||
|
|
||||||
|
pipe = new DateTimePipe();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should transform string input to date format', () => {
|
||||||
|
const value = '2023-08-24 12:00:00';
|
||||||
|
const dateFormat = 'yyyy-MM-dd HH:mm:ss';
|
||||||
|
const transformedDate = pipe.transform(value, dateFormat);
|
||||||
|
expect(transformedDate instanceof Date).toBe(true);
|
||||||
|
expect(isValid(transformedDate)).toBe(true);
|
||||||
|
|
||||||
|
const expectedDate = new Date(value);
|
||||||
|
expect(transformedDate).toEqual(addMinutes(new Date(expectedDate), new Date().getTimezoneOffset()));
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should transform Date input', () => {
|
||||||
|
const value = new Date(2023, 7, 24, 12, 0, 0);
|
||||||
|
const dateFormat = 'yyyy-MM-dd HH:mm:ss';
|
||||||
|
const transformedDate = pipe.transform(value, dateFormat);
|
||||||
|
expect(transformedDate instanceof Date).toBe(true);
|
||||||
|
expect(isValid(transformedDate)).toBe(true);
|
||||||
|
|
||||||
|
expect(transformedDate).toEqual(value);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should transform number input to date format', () => {
|
||||||
|
const value = 1693373300; // 30 August 2023 10:58:20
|
||||||
|
const dateFormat = 'yyyy-MM-dd HH:mm:ss';
|
||||||
|
const transformedDate = pipe.transform(value, dateFormat);
|
||||||
|
expect(transformedDate instanceof Date).toBe(true);
|
||||||
|
expect(isValid(transformedDate)).toBe(true);
|
||||||
|
|
||||||
|
const originalDate = new Date(2023, 7, 30, 10, 58, 20);
|
||||||
|
const timeZoneOffsetMinutes = -330; // 5 hours * 60 minutes/hour + 30 minutes
|
||||||
|
const expectedDate = addMinutes(originalDate, timeZoneOffsetMinutes);
|
||||||
|
|
||||||
|
expect(transformedDate).toEqual(expectedDate);
|
||||||
|
});
|
||||||
|
});
|
38
lib/core/src/lib/pipes/date-time.pipe.ts
Normal file
38
lib/core/src/lib/pipes/date-time.pipe.ts
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
/*!
|
||||||
|
* @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 { Pipe, PipeTransform } from '@angular/core';
|
||||||
|
import { addMinutes, fromUnixTime, parse } from 'date-fns';
|
||||||
|
|
||||||
|
@Pipe({ name: 'adfDateTime' })
|
||||||
|
export class DateTimePipe implements PipeTransform {
|
||||||
|
transform(value: string | Date | number, dateFormat: string): Date {
|
||||||
|
let parsedValue: Date;
|
||||||
|
|
||||||
|
if (typeof value === 'string') {
|
||||||
|
parsedValue = parse(value, dateFormat, new Date());
|
||||||
|
} else if (value instanceof Date) {
|
||||||
|
parsedValue = value;
|
||||||
|
} else {
|
||||||
|
parsedValue = fromUnixTime(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
const offsetMinutes = parsedValue.getTimezoneOffset();
|
||||||
|
const adjustedDate = addMinutes(parsedValue, offsetMinutes);
|
||||||
|
return adjustedDate;
|
||||||
|
}
|
||||||
|
}
|
@ -35,6 +35,7 @@ import { MomentDatePipe } from './moment-date.pipe';
|
|||||||
import { MomentDateTimePipe } from './moment-datetime.pipe';
|
import { MomentDateTimePipe } from './moment-datetime.pipe';
|
||||||
import { FilterStringPipe } from './filter-string.pipe';
|
import { FilterStringPipe } from './filter-string.pipe';
|
||||||
import { FilterOutArrayObjectsByPropPipe } from './filter-out-every-object-by-prop.pipe';
|
import { FilterOutArrayObjectsByPropPipe } from './filter-out-every-object-by-prop.pipe';
|
||||||
|
import { DateTimePipe } from './date-time.pipe';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
@ -56,6 +57,7 @@ import { FilterOutArrayObjectsByPropPipe } from './filter-out-every-object-by-pr
|
|||||||
LocalizedRolePipe,
|
LocalizedRolePipe,
|
||||||
MomentDatePipe,
|
MomentDatePipe,
|
||||||
MomentDateTimePipe,
|
MomentDateTimePipe,
|
||||||
|
DateTimePipe,
|
||||||
FilterStringPipe,
|
FilterStringPipe,
|
||||||
FilterOutArrayObjectsByPropPipe
|
FilterOutArrayObjectsByPropPipe
|
||||||
],
|
],
|
||||||
@ -73,6 +75,7 @@ import { FilterOutArrayObjectsByPropPipe } from './filter-out-every-object-by-pr
|
|||||||
LocalizedRolePipe,
|
LocalizedRolePipe,
|
||||||
MomentDatePipe,
|
MomentDatePipe,
|
||||||
MomentDateTimePipe,
|
MomentDateTimePipe,
|
||||||
|
DateTimePipe,
|
||||||
FilterStringPipe,
|
FilterStringPipe,
|
||||||
FilterOutArrayObjectsByPropPipe
|
FilterOutArrayObjectsByPropPipe
|
||||||
],
|
],
|
||||||
@ -91,6 +94,7 @@ import { FilterOutArrayObjectsByPropPipe } from './filter-out-every-object-by-pr
|
|||||||
LocalizedRolePipe,
|
LocalizedRolePipe,
|
||||||
MomentDatePipe,
|
MomentDatePipe,
|
||||||
MomentDateTimePipe,
|
MomentDateTimePipe,
|
||||||
|
DateTimePipe,
|
||||||
FilterStringPipe,
|
FilterStringPipe,
|
||||||
FilterOutArrayObjectsByPropPipe
|
FilterOutArrayObjectsByPropPipe
|
||||||
]
|
]
|
||||||
|
@ -30,5 +30,6 @@ export * from './localized-role.pipe';
|
|||||||
export * from './pipe.module';
|
export * from './pipe.module';
|
||||||
export * from './moment-date.pipe';
|
export * from './moment-date.pipe';
|
||||||
export * from './moment-datetime.pipe';
|
export * from './moment-datetime.pipe';
|
||||||
|
export * from './date-time.pipe';
|
||||||
export * from './filter-string.pipe';
|
export * from './filter-string.pipe';
|
||||||
export * from './filter-out-every-object-by-prop.pipe';
|
export * from './filter-out-every-object-by-prop.pipe';
|
||||||
|
Loading…
x
Reference in New Issue
Block a user