diff --git a/projects/valtimo/components/src/lib/components/carbon-list/carbon-list.component.ts b/projects/valtimo/components/src/lib/components/carbon-list/carbon-list.component.ts index 25086d022..20045bfba 100644 --- a/projects/valtimo/components/src/lib/components/carbon-list/carbon-list.component.ts +++ b/projects/valtimo/components/src/lib/components/carbon-list/carbon-list.component.ts @@ -72,6 +72,7 @@ import { TAG_ELLIPSIS_LIMIT, ViewType, } from '../../models'; +import {EllipsisPipe} from '../../pipes'; import {KeyStateService} from '../../services/key-state.service'; import {ViewContentService} from '../view-content/view-content.service'; import {CarbonListFilterPipe} from './CarbonListFilterPipe.directive'; @@ -256,6 +257,7 @@ export class CarbonListComponent implements OnInit, AfterViewInit, OnDestroy { } constructor( + private readonly ellipsisPipe: EllipsisPipe, private readonly filterPipe: CarbonListFilterPipe, private readonly iconService: IconService, private readonly logger: NGXLogger, @@ -461,7 +463,7 @@ export class CarbonListComponent implements OnInit, AfterViewInit, OnDestroy { title: resolvedObject ?? '-', data: (field.tooltipCharLimit - ? this.transformContentEllipsis(resolvedObject, field.tooltipCharLimit) + ? this.ellipsisPipe.transform(resolvedObject, field.tooltipCharLimit) : resolvedObject) ?? '-', template: this.defaultTemplate, item, @@ -702,7 +704,7 @@ export class CarbonListComponent implements OnInit, AfterViewInit, OnDestroy { const tags = itemTags.map((tag: CarbonTag, index: number) => index === 0 - ? {...tag, ellipsisContent: this.transformContentEllipsis(tag.content, TAG_ELLIPSIS_LIMIT)} + ? {...tag, ellipsisContent: this.ellipsisPipe.transform(tag.content, TAG_ELLIPSIS_LIMIT)} : tag ); @@ -711,8 +713,4 @@ export class CarbonListComponent implements OnInit, AfterViewInit, OnDestroy { template: this.tagTemplate, }); } - - private transformContentEllipsis(content: string, limit: number): string { - return content.substring(0, limit - 1) + (content.length > limit ? '...' : ''); - } } diff --git a/projects/valtimo/components/src/lib/components/carbon-list/carbon-list.module.ts b/projects/valtimo/components/src/lib/components/carbon-list/carbon-list.module.ts index 35e969f20..bb6010346 100644 --- a/projects/valtimo/components/src/lib/components/carbon-list/carbon-list.module.ts +++ b/projects/valtimo/components/src/lib/components/carbon-list/carbon-list.module.ts @@ -29,6 +29,7 @@ import { TagModule, } from 'carbon-components-angular'; import {ValtimoCdsModalDirectiveModule} from '../../directives/valtimo-cds-modal/valtimo-cds-modal-directive.module'; +import {EllipsisPipe} from '../../pipes'; import {CardModule} from '../card/card.module'; import {ViewContentModule} from '../view-content/view-content.module'; import {CarbonListComponent} from './carbon-list.component'; @@ -63,5 +64,6 @@ import {CarbonTagsModalComponent} from './tags-modal/tags-modal.component'; ViewContentModule, ], exports: [CarbonListComponent, CarbonListFilterPipe, CarbonNoResultsComponent], + providers: [EllipsisPipe], }) export class CarbonListModule {} diff --git a/projects/valtimo/components/src/lib/pipes/ellipsis.pipe.ts b/projects/valtimo/components/src/lib/pipes/ellipsis.pipe.ts new file mode 100644 index 000000000..5fbd8d649 --- /dev/null +++ b/projects/valtimo/components/src/lib/pipes/ellipsis.pipe.ts @@ -0,0 +1,10 @@ +import {Pipe, PipeTransform} from '@angular/core'; + +@Pipe({name: 'valtimoEllipsis', standalone: true}) +export class EllipsisPipe implements PipeTransform { + public transform(content: string, limit: number | null): string { + if (!limit) return content; + + return content.substring(0, limit - 1) + (content.length > limit ? '...' : ''); + } +} diff --git a/projects/valtimo/components/src/lib/pipes/index.ts b/projects/valtimo/components/src/lib/pipes/index.ts index 4185a4e93..9edb04770 100644 --- a/projects/valtimo/components/src/lib/pipes/index.ts +++ b/projects/valtimo/components/src/lib/pipes/index.ts @@ -18,3 +18,4 @@ export * from './menu-item-translation.pipe'; export * from './components-pipes.module'; export * from './case-count.pipe'; export * from './is-array.pipe'; +export * from './ellipsis.pipe' diff --git a/projects/valtimo/config/assets/core/de.json b/projects/valtimo/config/assets/core/de.json index 98487cb2b..c97d999b2 100644 --- a/projects/valtimo/config/assets/core/de.json +++ b/projects/valtimo/config/assets/core/de.json @@ -816,7 +816,10 @@ "type": "Anzeigetyp", "typePlaceholder": "Wählen Sie Typ", "value": "Wert", - "valuePlaceholder": "Weg zum Wert" + "valuePlaceholder": "Weg zum Wert", + "ellipsisCharacterLimit": "Zeichenbeschränkung für Auslassungszeichen", + "ellipsisCharacterLimitTooltip": "Geben Sie die Anzahl der Zeichen ein, die angezeigt werden sollen, bevor Auslassungspunkte angezeigt werden", + "ellipsisCharacterLimitPlaceholder": "Wählen Sie eine Anzahl von Zeichen (optional)" }, "displayType": { "text": "Text", diff --git a/projects/valtimo/config/assets/core/en.json b/projects/valtimo/config/assets/core/en.json index 68515bbe6..c68a422d0 100644 --- a/projects/valtimo/config/assets/core/en.json +++ b/projects/valtimo/config/assets/core/en.json @@ -817,7 +817,10 @@ "type": "Display type", "typePlaceholder": "Choose type", "value": "Value", - "valuePlaceholder": "Path to value" + "valuePlaceholder": "Path to value", + "ellipsisCharacterLimit": "Ellipsis character limit", + "ellipsisCharacterLimitTooltip": "Enter the number of characters that will display before an ellipsis is shown", + "ellipsisCharacterLimitPlaceholder": "Choose a number of characters (optional)" }, "displayType": { "text": "Text", diff --git a/projects/valtimo/config/assets/core/nl.json b/projects/valtimo/config/assets/core/nl.json index 635f75dd0..a5a41cb9d 100644 --- a/projects/valtimo/config/assets/core/nl.json +++ b/projects/valtimo/config/assets/core/nl.json @@ -816,7 +816,10 @@ "type": "Weergavetype", "typePlaceholder": "Kies type", "value": "Waarde", - "valuePlaceholder": "Pad naar waarde" + "valuePlaceholder": "Pad naar waarde", + "ellipsisCharacterLimit": "Tekenlimiet met beletseltekens", + "ellipsisCharacterLimitTooltip": "Voer het aantal tekens in dat wordt weergegeven voordat er een weglatingsteken wordt weergegeven", + "ellipsisCharacterLimitPlaceholder": "Kies een aantal karakters (optioneel)" }, "displayType": { "text": "Tekst", diff --git a/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/column/dossier-management-widget-fields-column.component.html b/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/column/dossier-management-widget-fields-column.component.html index e8456feb3..9a75a1b12 100644 --- a/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/column/dossier-management-widget-fields-column.component.html +++ b/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/column/dossier-management-widget-fields-column.component.html @@ -306,6 +306,30 @@ } } + + + + + + + diff --git a/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/column/dossier-management-widget-fields-column.component.ts b/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/column/dossier-management-widget-fields-column.component.ts index 5e4522520..b39b05db2 100644 --- a/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/column/dossier-management-widget-fields-column.component.ts +++ b/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/column/dossier-management-widget-fields-column.component.ts @@ -47,6 +47,7 @@ import { CaseWidgetDisplayTypeKey, CaseWidgetEnumDisplayType, CaseWidgetNumberDisplayType, + CaseWidgetTextDisplayType, CaseWidgetType, FieldsCaseWidgetValue, } from '@valtimo/dossier'; @@ -86,6 +87,7 @@ export class DossierManagementWidgetFieldsColumnComponent implements OnInit, OnD @HostBinding('class') public readonly class = 'valtimo-dossier-management-widget-field-column'; @Input({required: true}) public columnData: FieldsCaseWidgetValue[]; @Input() public addTranslateKey = 'widgetTabManagement.content.fields.add'; + @Input() public isFieldWidget = false; @Input() public fieldWidthDropdown?: TemplateRef; @Output() public columnUpdateEvent = new EventEmitter<{ @@ -151,6 +153,10 @@ export class DossierManagementWidgetFieldsColumnComponent implements OnInit, OnD ]), title: this.fb.control('', Validators.required), content: this.fb.control('', Validators.required), + ellipsisCharacterLimit: this.fb.control( + null, + Validators.pattern('[1-9][0-9]*') + ), }) ); } @@ -198,6 +204,13 @@ export class DossierManagementWidgetFieldsColumnComponent implements OnInit, OnD ), title: this.fb.control(row.title, Validators.required), content: this.fb.control(row.value, Validators.required), + ...((!row.displayProperties || + row.displayProperties?.type === CaseWidgetDisplayTypeKey.TEXT) && { + ellipsisCharacterLimit: this.fb.control( + (row.displayProperties as CaseWidgetTextDisplayType)?.ellipsisCharacterLimit ?? null, + Validators.pattern('[1-9][0-9]*') + ), + }), ...([CaseWidgetDisplayTypeKey.NUMBER, CaseWidgetDisplayTypeKey.PERCENT].includes( row.displayProperties?.type as CaseWidgetDisplayTypeKey ) && { @@ -264,19 +277,21 @@ export class DossierManagementWidgetFieldsColumnComponent implements OnInit, OnD key: row.title.replace(/\W+/g, '-').replace(/\-$/, '').toLowerCase(), title: row.title, value: row.content, - ...(!!row?.type.id && - row?.type.id !== CaseWidgetDisplayTypeKey.TEXT && { - displayProperties: { - type: row.type.id, - ...(!!row?.currencyCode && {currencyCode: row.currencyCode}), - ...(!!row?.display && {display: row.display}), - ...(!!row?.digitsInfo && {digitsInfo: row.digitsInfo}), - ...(!!row?.format && {format: row.format}), - ...(!!row?.values && { - values: row.values?.reduce((acc, curr) => ({...acc, [curr.key]: curr.value}), {}), - }), - }, - }), + ...(!!row?.type.id && { + displayProperties: { + type: row.type.id, + ...(!!row?.ellipsisCharacterLimit && { + ellipsisCharacterLimit: row.ellipsisCharacterLimit, + }), + ...(!!row?.currencyCode && {currencyCode: row.currencyCode}), + ...(!!row?.display && {display: row.display}), + ...(!!row?.digitsInfo && {digitsInfo: row.digitsInfo}), + ...(!!row?.format && {format: row.format}), + ...(!!row?.values && { + values: row.values?.reduce((acc, curr) => ({...acc, [curr.key]: curr.value}), {}), + }), + }, + }), })); this.columnUpdateEvent.emit({data: mappedRows, valid: this.formGroup.valid}); }) diff --git a/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/dossier-management-widget-fields.component.html b/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/dossier-management-widget-fields.component.html index 2d96c604d..39a278a51 100644 --- a/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/dossier-management-widget-fields.component.html +++ b/projects/valtimo/dossier-management/src/lib/components/dossier-management-widget-configurators/fields/dossier-management-widget-fields.component.html @@ -46,6 +46,7 @@ > diff --git a/projects/valtimo/dossier-management/src/lib/services/widget-fields.service.ts b/projects/valtimo/dossier-management/src/lib/services/widget-fields.service.ts index eacb9acb9..0dd6f7652 100644 --- a/projects/valtimo/dossier-management/src/lib/services/widget-fields.service.ts +++ b/projects/valtimo/dossier-management/src/lib/services/widget-fields.service.ts @@ -98,6 +98,7 @@ export class WidgetFieldsService { case CaseWidgetDisplayTypeKey.BOOLEAN: break; case CaseWidgetDisplayTypeKey.TEXT: + formGroup.addControl('ellipsisCharacterLimit', this.fb.control('')); break; case CaseWidgetDisplayTypeKey.CURRENCY: formGroup.addControl('currencyCode', this.fb.control('')); diff --git a/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.html b/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.html index 536013546..683ea0938 100644 --- a/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.html +++ b/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.html @@ -43,11 +43,15 @@

{{ obs?.widgetConfiguration?.title }}

@for (column of obs?.widgetPropertyValue; track column.key) {
@for (property of column; track property) { - - {{ property?.title }} +
+ - - +
+ {{ property?.value | valtimoEllipsis: property?.ellipsisCharacterLimit }} +
+
}
} diff --git a/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.scss b/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.scss index 892dbefdb..71876717c 100644 --- a/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.scss +++ b/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.scss @@ -39,6 +39,25 @@ grid-template-columns: repeat(4, 1fr); } + &__field { + display: flex; + width: 100%; + flex-direction: column; + gap: 8px; + + &-label { + font-size: 12px; + color: var(--cds-text-secondary); + } + + &-value { + color: var(--cds-text-primary); + padding: 8px 16px; + border-bottom: 1px solid var(--cds-border-subtle-01); + font-size: 14px; + } + } + .cds--label { width: 100%; white-space: nowrap; diff --git a/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.ts b/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.ts index 8ff40515e..ce35fc767 100644 --- a/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.ts +++ b/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/field/widget-field.component.ts @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - +import {CommonModule} from '@angular/common'; import { AfterViewInit, ChangeDetectionStrategy, @@ -26,12 +26,11 @@ import { ViewChild, ViewEncapsulation, } from '@angular/core'; -import {CarbonListModule, ViewContentService} from '@valtimo/components'; -import {CommonModule} from '@angular/common'; -import {BehaviorSubject, combineLatest, map, Observable} from 'rxjs'; -import {FieldsCaseWidget} from '../../../../../../models'; -import {InputModule} from 'carbon-components-angular'; import {TranslateModule} from '@ngx-translate/core'; +import {CarbonListModule, EllipsisPipe, ViewContentService} from '@valtimo/components'; +import {InputModule} from 'carbon-components-angular'; +import {BehaviorSubject, combineLatest, map, Observable} from 'rxjs'; +import {CaseWidgetTextDisplayType, FieldsCaseWidget} from '../../../../../../models'; @Component({ selector: 'valtimo-widget-field', @@ -40,7 +39,7 @@ import {TranslateModule} from '@ngx-translate/core'; changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, - imports: [CommonModule, WidgetFieldComponent, InputModule, TranslateModule, CarbonListModule], + imports: [CommonModule, InputModule, TranslateModule, CarbonListModule, EllipsisPipe], }) export class WidgetFieldComponent implements AfterViewInit, OnDestroy { @HostBinding('class') public readonly class = 'widget-field'; @@ -64,33 +63,37 @@ export class WidgetFieldComponent implements AfterViewInit, OnDestroy { public readonly widgetConfiguration$ = new BehaviorSubject(null); public readonly widgetData$ = new BehaviorSubject(null); - public readonly widgetPropertyValue$: Observable<{title: string; value: string}[][]> = - combineLatest([this.widgetConfiguration$, this.widgetData$]).pipe( - map(([widget, widgetData]) => - widget?.properties.columns.map(column => - column.reduce( - (columnFields, property) => [ - ...columnFields, - ...(widgetData?.hasOwnProperty(property.key) - ? [ - { - title: property.title, - value: - widgetData[property.key] !== null && widgetData[property.key] !== undefined - ? this.viewContentService.get(widgetData[property.key], { - ...property.displayProperties, - viewType: property.displayProperties?.type ?? 'text', - }) - : '-', - }, - ] - : []), - ], - [] - ) + public readonly widgetPropertyValue$: Observable< + {title: string; value: string; ellipsisCharacterLimit: number | null}[][] + > = combineLatest([this.widgetConfiguration$, this.widgetData$]).pipe( + map(([widget, widgetData]) => + widget?.properties.columns.map(column => + column.reduce( + (columnFields, property) => [ + ...columnFields, + ...(widgetData?.hasOwnProperty(property.key) + ? [ + { + title: property.title, + ellipsisCharacterLimit: + (property.displayProperties as CaseWidgetTextDisplayType) + ?.ellipsisCharacterLimit ?? null, + value: + widgetData[property.key] !== null && widgetData[property.key] !== undefined + ? this.viewContentService.get(widgetData[property.key], { + ...property.displayProperties, + viewType: property.displayProperties?.type ?? 'text', + }) + : '-', + }, + ] + : []), + ], + [] ) ) - ); + ) + ); private _observer!: ResizeObserver; diff --git a/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/widget-block/widget-block.component.ts b/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/widget-block/widget-block.component.ts index 1bcbe1650..f706e3355 100644 --- a/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/widget-block/widget-block.component.ts +++ b/projects/valtimo/dossier/src/lib/components/dossier-detail/tab/widgets/components/widget-block/widget-block.component.ts @@ -81,7 +81,6 @@ import {WIDGET_HEIGHT_1X} from '../../../../../../constants'; }) export class WidgetBlockComponent implements AfterViewInit, OnDestroy { @ViewChild('widgetBlockContent') private _widgetBlockContentRef: ElementRef; - @ViewChild('widgetBlock') private _widgetBlockRef: ElementRef; @Input() public set widget(value: CaseWidgetWithUuid) { this._widgetUuid = value.uuid; diff --git a/projects/valtimo/dossier/src/lib/models/case-widget-content.model.ts b/projects/valtimo/dossier/src/lib/models/case-widget-content.model.ts index 07274b8d8..b3d775f3e 100644 --- a/projects/valtimo/dossier/src/lib/models/case-widget-content.model.ts +++ b/projects/valtimo/dossier/src/lib/models/case-widget-content.model.ts @@ -15,7 +15,7 @@ */ import {CaseWidgetDisplayType} from './case-widget-display.model'; -import {CollectionFieldWidth, FieldsCaseWidgetValue} from './case-widget.model'; +import {FieldsCaseWidgetValue} from './case-widget.model'; interface WidgetFieldsContent { columns: FieldsCaseWidgetValue[][]; diff --git a/projects/valtimo/dossier/src/lib/models/case-widget-display.model.ts b/projects/valtimo/dossier/src/lib/models/case-widget-display.model.ts index 3e190c97c..d5ea28dbd 100644 --- a/projects/valtimo/dossier/src/lib/models/case-widget-display.model.ts +++ b/projects/valtimo/dossier/src/lib/models/case-widget-display.model.ts @@ -9,6 +9,11 @@ enum CaseWidgetDisplayTypeKey { PERCENT = 'percent', } +interface CaseWidgetTextDisplayType { + type: CaseWidgetDisplayTypeKey.TEXT; + ellipsisCharacterLimit: number; +} + interface CaseWidgetBooleanDisplayType { type: CaseWidgetDisplayTypeKey.BOOLEAN; } @@ -48,6 +53,7 @@ interface CaseWidgetPercentDisplayType { } type CaseWidgetDisplayType = + | CaseWidgetTextDisplayType | CaseWidgetBooleanDisplayType | CaseWidgetCurrencyDisplayType | CaseWidgetDateDisplayType @@ -57,13 +63,14 @@ type CaseWidgetDisplayType = | CaseWidgetPercentDisplayType; export { - CaseWidgetDisplayTypeKey, - CaseWidgetDisplayType, CaseWidgetBooleanDisplayType, CaseWidgetCurrencyDisplayType, CaseWidgetDateDisplayType, CaseWidgetDateTimeDisplayType, + CaseWidgetDisplayType, + CaseWidgetDisplayTypeKey, CaseWidgetEnumDisplayType, CaseWidgetNumberDisplayType, CaseWidgetPercentDisplayType, + CaseWidgetTextDisplayType, }; diff --git a/projects/valtimo/dossier/src/lib/models/case-widget.model.ts b/projects/valtimo/dossier/src/lib/models/case-widget.model.ts index 018d148f5..595b7776a 100644 --- a/projects/valtimo/dossier/src/lib/models/case-widget.model.ts +++ b/projects/valtimo/dossier/src/lib/models/case-widget.model.ts @@ -48,6 +48,7 @@ interface FieldsCaseWidgetValue { key: string; title: string; value: string; + ellipsisCharacterLimit?: number; displayProperties?: CaseWidgetDisplayType; }