Notes table

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,31 @@
+import { Component, 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";
+
+@DynamicComponent("DisplayLongText")
+@Component({
+  selector: "app-display-long-text",
+  template: `<div [innerHTML]="formattedValue"></div>`,
+  standalone: true,
+})
+export class DisplayLongTextComponent
+  extends ViewDirective<string, string>
+  implements OnInit
+{
+  formattedValue: string = "";
+
+  ngOnInit(): void {
+    if (this.value === undefined) {
+      this.formattedValue = "";
+      return;
+    }
+
+    const maxLines = 4;
+    const lines = this.value.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/edit-text/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 "../../../../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/edit-text/display-long-text/display-long-text.component.ts

@@ -0,0 +1,24 @@
+import { Component } from "@angular/core";
+import { ViewDirective } from "../../../../entity/default-datatype/view.directive";
+import { DynamicComponent } from "../../../../config/dynamic-components/dynamic-component.decorator";
+
+@DynamicComponent("DisplayLongText")
+@Component({
+  selector: "app-display-long-text",
+  template: `<div [innerHTML]="formattedValue"></div>`,
+  standalone: true,
+})
+export class DisplayLongTextComponent extends ViewDirective<string, string> {
+  get formattedValue(): string {
+    if (this.value === undefined) return "";
+
+    const MaxLines = 4;
+    const lines = this.value.split("\n");
+
+    const truncatedText =
+      lines.length > MaxLines
+        ? lines.slice(0, MaxLines).join("<br>") + "..."
+        : lines.join("<br>");
+    return truncatedText;
+  }
+}

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

@@ -0,0 +1,29 @@
+import { applicationConfig, Meta, StoryFn } from "@storybook/angular";
+import { StorybookBaseModule } from "../../../../../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/edit-text/display-long-text/display-long-text.component"
+      ).then((c) => c.DisplayLongTextComponent),
+  ],
+
   [
     "DisplayDate",
     () =>

tsconfig.json

@@ -49,9 +49,9 @@
     }
   },
   "exclude": [
-    "e2e",
-    "./cypress.config.ts",
-    "**/*.cy.tsx"
+      "e2e",
+      "./cypress.config.ts",
+      "**/*.cy.tsx",
   ],
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,