diff --git a/docs/core/components/data-column.component.md b/docs/core/components/data-column.component.md index 8ae1adb1274..b1eba8844e4 100644 --- a/docs/core/components/data-column.component.md +++ b/docs/core/components/data-column.component.md @@ -65,6 +65,8 @@ Defines column properties for DataTable, Tasklist, Document List and other compo | currencyConfig | `CurrencyConfig` | [Default currency config](#default-currency-config) | Currency configuration to customize the formatting and display of currency values within the component. | | decimalConfig | `DecimalConfig` | [Default decimal config](#default-decimal-config) | Decimal configuration to customize the formatting and display of decimal values within the component. | | dateConfig | `DateConfig` | [Default date config](#default-date-config) | Date configuration to customize the formatting and localization of date values within the component. | +| truncated | `boolean` | false | Should text in the column be truncated? | +| maxTextLength | `number` | 250 | Max length of the text displayed in column before truncation. | ## Properties configuration @@ -467,6 +469,31 @@ const shouldPerformAction = this.columns if (shouldPerformAction) { /* action */} ``` +### Specifying max text length in the column + +If you want to restrict max number of characters displayed in the column you can use `truncated` param together with `maxTextLength`. + +Example of using `truncated` from a JSON config file: + +```json +[ + {"type": "text", "key": "id", "title": "Id"}, + {"type": "text", "key": "name", "title": "name", "truncated": true, "maxTextLength": 100}, +] +``` + +HTML `` element example: + +```html +... + + + ... + +... +``` + + ## See also - [Document list component](../../content-services/components/document-list.component.md) diff --git a/docs/core/pipes/truncate.pipe.md b/docs/core/pipes/truncate.pipe.md new file mode 100644 index 00000000000..c617d509bda --- /dev/null +++ b/docs/core/pipes/truncate.pipe.md @@ -0,0 +1,27 @@ +--- +Title: Truncate pipe +Added: v7.0.0-alpha.7 +Status: Active +Last reviewed: 2024-11-28 +--- + +# Truncate Pipe + +Truncates the text when it exceeds specified max lenght. It also appends provided ellipsis at the end of the string. + +## Basic Usage + + + +```HTML +
+ {{ textToTruncate | truncate:100:'***' }} +
+``` + + + +| Name | Type | Default value | Description | +|--------|--------|---------------|-------------------------------------------------| +| maxTextLength | `number` | 250 | Max length of the text that should be displayed prio to truncating. | +| ellipsis | `string` | `...` | String which will be appended to the text when truncating will happen. | diff --git a/lib/core/src/lib/datatable/components/datatable-cell/datatable-cell.component.spec.ts b/lib/core/src/lib/datatable/components/datatable-cell/datatable-cell.component.spec.ts index a6949ea3199..04793e14ca2 100644 --- a/lib/core/src/lib/datatable/components/datatable-cell/datatable-cell.component.spec.ts +++ b/lib/core/src/lib/datatable/components/datatable-cell/datatable-cell.component.spec.ts @@ -97,4 +97,24 @@ describe('DataTableCellComponent', () => { expect(component.row.obj).toBe('New Value'); }); + + it('should truncate display text and not truncate tooltip if configured on column', () => { + const row: DataRow = { + id: '1', + isSelected: false, + hasValue: () => true, + getValue: () => 'hello world', + obj: 'Initial Value', + cache: [] + }; + + component.data = new ObjectDataTableAdapter(mockCarsData, mockCarsSchemaDefinition); + component.column = { key: 'car_name', type: 'text', truncated: true, maxTextLength: 10 }; + component.row = row; + + fixture.detectChanges(); + + checkDisplayedText('hello worl...'); + checkDisplayedTooltip('hello world'); + }); }); diff --git a/lib/core/src/lib/datatable/components/datatable-cell/datatable-cell.component.ts b/lib/core/src/lib/datatable/components/datatable-cell/datatable-cell.component.ts index 88d54426b5d..0675dd5f25b 100644 --- a/lib/core/src/lib/datatable/components/datatable-cell/datatable-cell.component.ts +++ b/lib/core/src/lib/datatable/components/datatable-cell/datatable-cell.component.ts @@ -15,15 +15,7 @@ * limitations under the License. */ -import { - ChangeDetectionStrategy, - Component, - DestroyRef, - inject, - Input, - OnInit, - ViewEncapsulation -} from '@angular/core'; +import { ChangeDetectionStrategy, Component, DestroyRef, inject, Input, OnInit, ViewEncapsulation } from '@angular/core'; import { DataColumn } from '../../data/data-column.model'; import { DataRow } from '../../data/data-row.model'; import { DataTableAdapter } from '../../data/datatable-adapter'; @@ -32,11 +24,12 @@ import { DataTableService } from '../../services/datatable.service'; import { CommonModule } from '@angular/common'; import { ClipboardDirective } from '../../../clipboard/clipboard.directive'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import { TruncatePipe } from '../../../pipes/truncate.pipe'; @Component({ selector: 'adf-datatable-cell', standalone: true, - imports: [CommonModule, ClipboardDirective], + imports: [CommonModule, ClipboardDirective, TruncatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: ` @@ -47,11 +40,13 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; [attr.aria-label]="value$ | async" [title]="tooltip" class="adf-datatable-cell-value" - >{{ value$ | async }}{{ column?.truncated ? (value$ | async | truncate : column?.maxTextLength) : (value$ | async) }} - {{ value$ | async }} + {{ + column?.truncated ? (value$ | async | truncate : column?.maxTextLength) : (value$ | async) + }} `, encapsulation: ViewEncapsulation.None, diff --git a/lib/core/src/lib/datatable/data/data-column.model.ts b/lib/core/src/lib/datatable/data/data-column.model.ts index 84fa8a86a74..80db4364cd2 100644 --- a/lib/core/src/lib/datatable/data/data-column.model.ts +++ b/lib/core/src/lib/datatable/data/data-column.model.ts @@ -45,6 +45,8 @@ export interface DataColumn { currencyConfig?: CurrencyConfig; decimalConfig?: DecimalConfig; dateConfig?: DateConfig; + truncated?: boolean; + maxTextLength?: number; } export interface LocaleConfig { diff --git a/lib/core/src/lib/datatable/data/object-datacolumn.model.ts b/lib/core/src/lib/datatable/data/object-datacolumn.model.ts index abf6ec2aaac..034b863f589 100644 --- a/lib/core/src/lib/datatable/data/object-datacolumn.model.ts +++ b/lib/core/src/lib/datatable/data/object-datacolumn.model.ts @@ -43,6 +43,8 @@ export class ObjectDataColumn implements DataColumn { currencyConfig?: CurrencyConfig; decimalConfig?: DecimalConfig; dateConfig?: DateConfig; + truncated?: boolean; + maxTextLength?: number; constructor(input: any) { this.id = input.id ?? ''; @@ -67,5 +69,7 @@ export class ObjectDataColumn implements DataColumn { this.currencyConfig = input.currencyConfig; this.decimalConfig = input.decimalConfig; this.dateConfig = input.dateConfig; + this.truncated = input.truncated ?? false; + this.maxTextLength = input.maxTextLength ?? 250; } } diff --git a/lib/core/src/lib/pipes/pipe.module.ts b/lib/core/src/lib/pipes/pipe.module.ts index 092d0d82a3d..c38977bab63 100644 --- a/lib/core/src/lib/pipes/pipe.module.ts +++ b/lib/core/src/lib/pipes/pipe.module.ts @@ -30,6 +30,7 @@ import { DecimalNumberPipe } from './decimal-number.pipe'; import { MomentDatePipe } from './moment-date.pipe'; import { MomentDateTimePipe } from './moment-datetime.pipe'; import { DateTimePipe } from './date-time.pipe'; +import { TruncatePipe } from './truncate.pipe'; export const CORE_PIPES = [ LocalizedDatePipe, @@ -44,7 +45,8 @@ export const CORE_PIPES = [ MomentDatePipe, MomentDateTimePipe, DateTimePipe, - InitialUsernamePipe + InitialUsernamePipe, + TruncatePipe ] as const; /** diff --git a/lib/core/src/lib/pipes/truncate.pipe.spec.ts b/lib/core/src/lib/pipes/truncate.pipe.spec.ts new file mode 100644 index 00000000000..b241a969e1f --- /dev/null +++ b/lib/core/src/lib/pipes/truncate.pipe.spec.ts @@ -0,0 +1,60 @@ +/*! + * @license + * Copyright © 2005-2024 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 { TruncatePipe } from './truncate.pipe'; +import { TestBed } from '@angular/core/testing'; +import { CoreTestingModule } from '../testing/core.testing.module'; +import { Injector, runInInjectionContext } from '@angular/core'; + +describe('TruncatePipe', () => { + let pipe: TruncatePipe; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [CoreTestingModule] + }); + const injector = TestBed.inject(Injector); + runInInjectionContext(injector, () => { + pipe = new TruncatePipe(); + }); + }); + + it('should truncate texts longer than maxTextLength value', () => { + const text = 'This is a long text'; + expect(pipe.transform(text, 10)).toBe('This is a ...'); + }); + + it('should not truncate texts shorter than maxTextLength value', () => { + const text = 'Short text'; + expect(pipe.transform(text, 20)).toBe('Short text'); + }); + + it('should truncate texts longer than 250 chars and append "..." by default', () => { + let text = + 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,'; + text += ' nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.'; + let truncatedString = + 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, '; + truncatedString += 'nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium ...'; + expect(pipe.transform(text)).toBe(truncatedString); + }); + + it('should append custom ellipsis when ellipsis param is provided', () => { + const text = 'This is a long text'; + expect(pipe.transform(text, 10, '***')).toBe('This is a ***'); + }); +}); diff --git a/lib/core/src/lib/pipes/truncate.pipe.ts b/lib/core/src/lib/pipes/truncate.pipe.ts new file mode 100644 index 00000000000..11f3c994588 --- /dev/null +++ b/lib/core/src/lib/pipes/truncate.pipe.ts @@ -0,0 +1,28 @@ +/*! + * @license + * Copyright © 2005-2024 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'; + +@Pipe({ + standalone: true, + name: 'truncate' +}) +export class TruncatePipe implements PipeTransform { + transform(value: string, maxTextLength = 250, ellipsis = '...') { + return value.length > maxTextLength ? value.substr(0, maxTextLength) + ellipsis : value; + } +} diff --git a/lib/extensions/src/lib/config/document-list.extensions.ts b/lib/extensions/src/lib/config/document-list.extensions.ts index 432da644e30..90bd2abe24f 100644 --- a/lib/extensions/src/lib/config/document-list.extensions.ts +++ b/lib/extensions/src/lib/config/document-list.extensions.ts @@ -51,4 +51,6 @@ export interface DocumentListPresetRef extends ExtensionElement { }; draggable?: boolean; resizable?: boolean; + truncated?: boolean; + maxTextLength?: number; }