fix: display long texts (e.g. note texts) with linebreaks in the table (#2568)

closes #2547 

---------

Co-authored-by: Sebastian Leidig <[email protected]>

Author: sadaf895

src/app/core/basic-datatypes/string/display-long-text/display-long-text.component.spec.ts

@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { DisplayLongTextComponent } from "./display-long-text.component";
+import { Entity } from "app/core/entity/model/entity";
+
+describe("DisplayLongTextComponent", () => {
+  let component: DisplayLongTextComponent;
+  let fixture: ComponentFixture<DisplayLongTextComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DisplayLongTextComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DisplayLongTextComponent);
+    component = fixture.componentInstance;
+    component.entity = new Entity();
+    component.id = "text";
+    component.value = "this is some long text abcde\nefgh";
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/core/basic-datatypes/string/display-long-text/display-long-text.component.ts

@@ -0,0 +1,49 @@
+import { Component, Input, OnInit } from "@angular/core";
+import { ViewDirective } from "app/core/entity/default-datatype/view.directive";
+import { DynamicComponent } from "app/core/config/dynamic-components/dynamic-component.decorator";
+
+/**
+ * Config for details of how a long-text field should be displayed.
+ * (define as "additional" on the entity field)
+ */
+export interface LongTextFieldConfig {
+  /** Maximum number of lines to show */
+  maxLines?: number;
+
+  /** Maximum number of characters to show */
+  maxCharacters?: number;
+}
+
+@DynamicComponent("DisplayLongText")
+@Component({
+  selector: "app-display-long-text",
+  template: `<div [innerHTML]="formattedValue"></div>`,
+  standalone: true,
+})
+export class DisplayLongTextComponent
+  extends ViewDirective<string, LongTextFieldConfig>
+  implements OnInit
+{
+  @Input() declare config: LongTextFieldConfig;
+
+  formattedValue: string = "";
+
+  ngOnInit(): void {
+    if (this.value === undefined) {
+      this.formattedValue = "";
+      return;
+    }
+
+    const maxLines = this.config?.maxLines ?? 3;
+    const maxCharacters = this.config?.maxCharacters ?? 250;
+    const text =
+      this.value.length > maxCharacters
+        ? this.value.slice(0, maxCharacters) + "..."
+        : this.value;
+    const lines = text.split("\n");
+    this.formattedValue =
+      lines.length > maxLines
+        ? lines.slice(0, maxLines).join("<br>") + "..."
+        : lines.join("<br>");
+  }
+}

src/app/core/basic-datatypes/string/display-long-text/display-long-text.stories.ts

@@ -0,0 +1,29 @@
+import { applicationConfig, Meta, StoryFn } from "@storybook/angular";
+import { StorybookBaseModule } from "app/utils/storybook-base.module";
+import { DisplayLongTextComponent } from "./display-long-text.component";
+import { importProvidersFrom } from "@angular/core";
+
+export default {
+  title: "Core/Entities/Properties/string/DisplayLongText",
+  component: DisplayLongTextComponent,
+  decorators: [
+    applicationConfig({
+      providers: [importProvidersFrom(StorybookBaseModule)],
+    }),
+  ],
+} as Meta;
+
+const Template: StoryFn<DisplayLongTextComponent> = (
+  args: DisplayLongTextComponent,
+) => ({
+  props: args,
+});
+
+export const Basic = Template.bind({});
+Basic.args = {
+  value: `Lorem ipsum dolor sit amet,
+
+  consectetur adipiscing elit. Nullam nec
+  purus nec nunc ultricies ultricies.
+  `,
+};

src/app/core/basic-datatypes/string/long-text.datatype.ts

@@ -9,5 +9,6 @@ export class LongTextDatatype extends StringDatatype {
   static override dataType = "long-text";
   static override label: string = $localize`:datatype-label:text (long)`;
 
+  override viewComponent = "DisplayLongText";
   override editComponent = "EditLongText";
 }

src/app/core/core-components.ts

@@ -127,6 +127,14 @@ export const coreComponents: ComponentTuple[] = [
         "./basic-datatypes/string/display-text/display-text.component"
       ).then((c) => c.DisplayTextComponent),
   ],
+  [
+    "DisplayLongText",
+    () =>
+      import(
+        "./basic-datatypes/string/display-long-text/display-long-text.component"
+      ).then((c) => c.DisplayLongTextComponent),
+  ],
+
   [
     "DisplayDate",
     () =>