diff --git a/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.html index 75d03b0c8..1ecc27038 100644 --- a/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.html @@ -44,8 +44,8 @@ {{ entity.numberOfLines }} -
- {{ entity.columnLabels.join(', ') }} +
+ {{ entity.columnLabelsString }}
diff --git a/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.scss index 60096fc14..fad13c3cd 100644 --- a/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.scss @@ -3,3 +3,9 @@ overflow: hidden; white-space: nowrap; } + +::ng-deep .custom-tooltip { + max-width: 300px; + white-space: normal; + word-wrap: break-word; +} diff --git a/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.ts index 87c82ca50..09ef65805 100644 --- a/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.ts @@ -30,6 +30,7 @@ import { DossierTemplateActionsComponent } from '../../shared/components/dossier import { DossierTemplateBreadcrumbsComponent } from '../../shared/components/dossier-template-breadcrumbs/dossier-template-breadcrumbs.component'; import { AddEditComponentMappingDialogComponent } from './add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component'; import { download } from '@utils/file-download-utils'; +import { MatTooltip } from '@angular/material/tooltip'; @Component({ templateUrl: './component-mappings-screen.component.html', @@ -49,6 +50,7 @@ import { download } from '@utils/file-download-utils'; InputWithActionComponent, IconButtonComponent, IqserAllowDirective, + MatTooltip, ], }) export default class ComponentMappingsScreenComponent extends ListingComponent implements OnInit { diff --git a/libs/red-domain/src/lib/component-mappings/component-mapping.ts b/libs/red-domain/src/lib/component-mappings/component-mapping.ts index b8e1e7745..9bfa2d6b1 100644 --- a/libs/red-domain/src/lib/component-mappings/component-mapping.ts +++ b/libs/red-domain/src/lib/component-mappings/component-mapping.ts @@ -6,6 +6,7 @@ export interface IComponentMapping extends IListable { fileName: string; version: number; columnLabels: string[]; + columnLabelsString: string; numberOfLines: number; encoding: string; delimiter: string; @@ -17,6 +18,7 @@ export class ComponentMapping implements IComponentMapping, IListable { readonly fileName: string; readonly version: number; readonly columnLabels: string[]; + readonly columnLabelsString: string; readonly numberOfLines: number; readonly encoding: string; readonly delimiter: string; @@ -27,6 +29,7 @@ export class ComponentMapping implements IComponentMapping, IListable { this.fileName = componentMapping.fileName; this.version = componentMapping.version; this.columnLabels = componentMapping.columnLabels; + this.columnLabelsString = componentMapping.columnLabels?.join(', '); this.numberOfLines = componentMapping.numberOfLines; this.encoding = componentMapping.encoding; this.delimiter = componentMapping.delimiter;