From ada83ea000587597455d8a59a20917683d9a3b60 Mon Sep 17 00:00:00 2001 From: sadaf895 <116058905+sadaf895@users.noreply.github.com> Date: Wed, 11 Sep 2024 13:34:23 +0530 Subject: [PATCH 01/15] Created display-long-text folder --- .../display-long-text.component.spec.ts | 29 ++++++++++++++ .../display-long-text.component.ts | 11 ++++++ .../display-long-text.stories.ts | 38 +++++++++++++++++++ .../string/long-text.datatype.ts | 1 + src/app/core/core-components.ts | 8 ++++ 5 files changed, 87 insertions(+) create mode 100644 src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.spec.ts create mode 100644 src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.ts create mode 100644 src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.stories.ts diff --git a/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.spec.ts b/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.spec.ts new file mode 100644 index 0000000000..27b437020a --- /dev/null +++ b/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.spec.ts @@ -0,0 +1,29 @@ +import { ComponentFixture, TestBed } from "@angular/core/testing"; + +import { DisplayLongTextComponent } from "./display-long-text.component"; +import { Entity } from "../../../../entity/model/entity"; + +describe("DisplayUnitComponent", () => { + let component: DisplayLongTextComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [DisplayLongTextComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(DisplayLongTextComponent); + component = fixture.componentInstance; + component.entity = new Entity(); + component.id = "height"; + component.value = "120"; + component.config = "cm"; + fixture.detectChanges(); + }); + + it("should create", () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.ts b/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.ts new file mode 100644 index 0000000000..ae76347152 --- /dev/null +++ b/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.ts @@ -0,0 +1,11 @@ +import { Component } from "@angular/core"; +import { ViewDirective } from "../../../../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: 'Display Text{{ value !== undefined ? value + " " + config : "" }}', + standalone: true, +}) +export class DisplayLongTextComponent extends ViewDirective {} diff --git a/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.stories.ts b/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.stories.ts new file mode 100644 index 0000000000..daf4b8be50 --- /dev/null +++ b/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.stories.ts @@ -0,0 +1,38 @@ +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/number/DisplayUnit", + component: DisplayLongTextComponent, + decorators: [ + applicationConfig({ + providers: [importProvidersFrom(StorybookBaseModule)], + }), + ], +} as Meta; + +const Template: StoryFn = ( + args: DisplayLongTextComponent, +) => ({ + props: args, +}); + +export const Basic = Template.bind({}); +Basic.args = { + value: 5, + config: "kg", +}; + +export const Zero = Template.bind({}); +Zero.args = { + value: 0, + config: "kg", +}; + +export const WithoutValue = Template.bind({}); +WithoutValue.args = { + value: undefined, + config: "kg", +}; diff --git a/src/app/core/basic-datatypes/string/long-text.datatype.ts b/src/app/core/basic-datatypes/string/long-text.datatype.ts index 5a063eafab..c7d7b8bb02 100644 --- a/src/app/core/basic-datatypes/string/long-text.datatype.ts +++ b/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"; } diff --git a/src/app/core/core-components.ts b/src/app/core/core-components.ts index 485d7cdc2b..ff458ff669 100644 --- a/src/app/core/core-components.ts +++ b/src/app/core/core-components.ts @@ -120,6 +120,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", () => From eee5244813bb8734a76aedfb8e0f80f70615b858 Mon Sep 17 00:00:00 2001 From: sadaf895 <116058905+sadaf895@users.noreply.github.com> Date: Wed, 11 Sep 2024 16:01:20 +0530 Subject: [PATCH 02/15] Updated the display-long-text.component.ts file --- .../display-long-text.component.ts | 17 +++++++++++++++-- tsconfig.json | 8 +++++--- 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.ts b/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.ts index ae76347152..393548a72e 100644 --- a/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.ts +++ b/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.ts @@ -5,7 +5,20 @@ import { DynamicComponent } from "app/core/config/dynamic-components/dynamic-com @DynamicComponent("DisplayLongText") @Component({ selector: "app-display-long-text", - template: 'Display Text{{ value !== undefined ? value + " " + config : "" }}', + template: `
`, standalone: true, }) -export class DisplayLongTextComponent extends ViewDirective {} +export class DisplayLongTextComponent extends ViewDirective { + 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("
") + "..." + : lines.join("
"); + return truncatedText; + } +} diff --git a/tsconfig.json b/tsconfig.json index 10744c2068..f31be12a1d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -49,9 +49,11 @@ } }, "exclude": [ - "e2e", - "./cypress.config.ts", - "**/*.cy.tsx" + "e2e", + "./cypress.config.ts", + "**/*.cy.tsx", + "src/app/core/basic-datatypes/string/edit-text/display-long-text/display-longtext.component.spec.ts", + "src/app/core/basic-datatypes/string/edit-text/display-long-text/display-unit.stories.ts" ], "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, From 753cfcbf0417a8c55fefc5795d8c54aa6e5e5086 Mon Sep 17 00:00:00 2001 From: Abu Sadaf <116058905+sadaf895@users.noreply.github.com> Date: Wed, 11 Sep 2024 16:09:16 +0530 Subject: [PATCH 03/15] Update display-long-text.component.spec.ts --- .../display-long-text/display-long-text.component.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.spec.ts b/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.spec.ts index 27b437020a..0b03401a48 100644 --- a/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.spec.ts +++ b/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.spec.ts @@ -3,7 +3,7 @@ import { ComponentFixture, TestBed } from "@angular/core/testing"; import { DisplayLongTextComponent } from "./display-long-text.component"; import { Entity } from "../../../../entity/model/entity"; -describe("DisplayUnitComponent", () => { +describe("DisplayLongTextComponent", () => { let component: DisplayLongTextComponent; let fixture: ComponentFixture; From f7bdaa9d89ff624a44971c7b8d4b0536c297ec83 Mon Sep 17 00:00:00 2001 From: Sebastian Leidig Date: Wed, 11 Sep 2024 13:44:31 +0200 Subject: [PATCH 04/15] update stories file for DisplayLongText --- .../display-long-text.stories.ts | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.stories.ts b/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.stories.ts index daf4b8be50..f158b6f574 100644 --- a/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.stories.ts +++ b/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.stories.ts @@ -4,7 +4,7 @@ import { DisplayLongTextComponent } from "./display-long-text.component"; import { importProvidersFrom } from "@angular/core"; export default { - title: "Core/Entities/Properties/number/DisplayUnit", + title: "Core/Entities/Properties/string/DisplayLongText", component: DisplayLongTextComponent, decorators: [ applicationConfig({ @@ -21,18 +21,9 @@ const Template: StoryFn = ( export const Basic = Template.bind({}); Basic.args = { - value: 5, - config: "kg", -}; - -export const Zero = Template.bind({}); -Zero.args = { - value: 0, - config: "kg", -}; + value: `Lorem ipsum dolor sit amet, -export const WithoutValue = Template.bind({}); -WithoutValue.args = { - value: undefined, - config: "kg", + consectetur adipiscing elit. Nullam nec + purus nec nunc ultricies ultricies. + `, }; From bd101b35a07d401569aede0e128e5ebb82f94c54 Mon Sep 17 00:00:00 2001 From: Sebastian Leidig Date: Wed, 11 Sep 2024 13:46:09 +0200 Subject: [PATCH 05/15] make import relative --- .../edit-text/display-long-text/display-long-text.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.ts b/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.ts index 393548a72e..a73c6174ee 100644 --- a/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.ts +++ b/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.ts @@ -1,6 +1,6 @@ import { Component } from "@angular/core"; import { ViewDirective } from "../../../../entity/default-datatype/view.directive"; -import { DynamicComponent } from "app/core/config/dynamic-components/dynamic-component.decorator"; +import { DynamicComponent } from "../../../../config/dynamic-components/dynamic-component.decorator"; @DynamicComponent("DisplayLongText") @Component({ From efdbb025ce0067ddbb2f14eef23f1a4417ee19f9 Mon Sep 17 00:00:00 2001 From: Abu Sadaf <116058905+sadaf895@users.noreply.github.com> Date: Wed, 11 Sep 2024 19:25:34 +0530 Subject: [PATCH 06/15] Update src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.spec.ts Co-authored-by: Sebastian --- .../display-long-text/display-long-text.component.spec.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.spec.ts b/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.spec.ts index 0b03401a48..c0722c5924 100644 --- a/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.spec.ts +++ b/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.spec.ts @@ -17,9 +17,8 @@ describe("DisplayLongTextComponent", () => { fixture = TestBed.createComponent(DisplayLongTextComponent); component = fixture.componentInstance; component.entity = new Entity(); - component.id = "height"; - component.value = "120"; - component.config = "cm"; + component.id = "text"; + component.value = "this is some long text abcde\nefgh"; fixture.detectChanges(); }); From dfa8a7f4cdd134a479c44f1bff25a4f12babc394 Mon Sep 17 00:00:00 2001 From: sadaf895 <116058905+sadaf895@users.noreply.github.com> Date: Wed, 11 Sep 2024 20:16:52 +0530 Subject: [PATCH 07/15] Final cleanup of the code. --- .../display-long-text.component.spec.ts | 28 +++++++++++++++++ .../display-long-text.component.ts | 31 +++++++++++++++++++ .../display-long-text.stories.ts | 29 +++++++++++++++++ tsconfig.json | 2 -- 4 files changed, 88 insertions(+), 2 deletions(-) create mode 100644 src/app/core/basic-datatypes/string/display-long-text/display-long-text.component.spec.ts create mode 100644 src/app/core/basic-datatypes/string/display-long-text/display-long-text.component.ts create mode 100644 src/app/core/basic-datatypes/string/display-long-text/display-long-text.stories.ts diff --git a/src/app/core/basic-datatypes/string/display-long-text/display-long-text.component.spec.ts b/src/app/core/basic-datatypes/string/display-long-text/display-long-text.component.spec.ts new file mode 100644 index 0000000000..5ee0797b8d --- /dev/null +++ b/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; + + 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(); + }); +}); diff --git a/src/app/core/basic-datatypes/string/display-long-text/display-long-text.component.ts b/src/app/core/basic-datatypes/string/display-long-text/display-long-text.component.ts new file mode 100644 index 0000000000..9e357dd47f --- /dev/null +++ b/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: `
`, + standalone: true, +}) +export class DisplayLongTextComponent + extends ViewDirective + 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("
") + "..." + : lines.join("
"); + } +} diff --git a/src/app/core/basic-datatypes/string/display-long-text/display-long-text.stories.ts b/src/app/core/basic-datatypes/string/display-long-text/display-long-text.stories.ts new file mode 100644 index 0000000000..8f7031b00c --- /dev/null +++ b/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 = ( + 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. + `, +}; diff --git a/tsconfig.json b/tsconfig.json index f31be12a1d..805ffb27d6 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -52,8 +52,6 @@ "e2e", "./cypress.config.ts", "**/*.cy.tsx", - "src/app/core/basic-datatypes/string/edit-text/display-long-text/display-longtext.component.spec.ts", - "src/app/core/basic-datatypes/string/edit-text/display-long-text/display-unit.stories.ts" ], "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, From b30f670186169ec9a74746a3c68845c65243a661 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Wed, 11 Sep 2024 16:53:02 +0200 Subject: [PATCH 08/15] Update tsconfig.json --- tsconfig.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tsconfig.json b/tsconfig.json index 805ffb27d6..45eec11418 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -49,9 +49,9 @@ } }, "exclude": [ - "e2e", - "./cypress.config.ts", - "**/*.cy.tsx", + "e2e", + "./cypress.config.ts", + "**/*.cy.tsx", ], "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, From 3193517b5bf38aee89bbb6b0e4fa12b5e5dd7bb0 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Wed, 11 Sep 2024 16:53:31 +0200 Subject: [PATCH 09/15] Update tsconfig.json --- tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index 45eec11418..10744c2068 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -51,7 +51,7 @@ "exclude": [ "e2e", "./cypress.config.ts", - "**/*.cy.tsx", + "**/*.cy.tsx" ], "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, From 92d6754ce7ce786cdfacb24f27389b2a8870db87 Mon Sep 17 00:00:00 2001 From: Abu Sadaf <116058905+sadaf895@users.noreply.github.com> Date: Wed, 11 Sep 2024 20:28:16 +0530 Subject: [PATCH 10/15] Delete src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.spec.ts --- .../display-long-text.component.spec.ts | 28 ------------------- 1 file changed, 28 deletions(-) delete mode 100644 src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.spec.ts diff --git a/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.spec.ts b/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.spec.ts deleted file mode 100644 index c0722c5924..0000000000 --- a/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.spec.ts +++ /dev/null @@ -1,28 +0,0 @@ -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; - - 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(); - }); -}); From aa0d83c153b1c4be98dd8a8a13b3835bf7cc73d3 Mon Sep 17 00:00:00 2001 From: Abu Sadaf <116058905+sadaf895@users.noreply.github.com> Date: Wed, 11 Sep 2024 20:28:36 +0530 Subject: [PATCH 11/15] Delete src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.ts --- .../display-long-text.component.ts | 24 ------------------- 1 file changed, 24 deletions(-) delete mode 100644 src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.ts diff --git a/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.ts b/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.ts deleted file mode 100644 index a73c6174ee..0000000000 --- a/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -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: `
`, - standalone: true, -}) -export class DisplayLongTextComponent extends ViewDirective { - 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("
") + "..." - : lines.join("
"); - return truncatedText; - } -} From 897b39a6394b4491dd978580214f1a0933926007 Mon Sep 17 00:00:00 2001 From: Abu Sadaf <116058905+sadaf895@users.noreply.github.com> Date: Wed, 11 Sep 2024 20:28:54 +0530 Subject: [PATCH 12/15] Delete src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.stories.ts --- .../display-long-text.stories.ts | 29 ------------------- 1 file changed, 29 deletions(-) delete mode 100644 src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.stories.ts diff --git a/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.stories.ts b/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.stories.ts deleted file mode 100644 index f158b6f574..0000000000 --- a/src/app/core/basic-datatypes/string/edit-text/display-long-text/display-long-text.stories.ts +++ /dev/null @@ -1,29 +0,0 @@ -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 = ( - 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. - `, -}; From ddf0bd0eb1ebac445ab1c51f5a7cab149d321156 Mon Sep 17 00:00:00 2001 From: Sebastian Leidig Date: Wed, 11 Sep 2024 17:19:38 +0200 Subject: [PATCH 13/15] fix import path --- src/app/core/core-components.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/core/core-components.ts b/src/app/core/core-components.ts index eebad7cc46..b8a3c77a04 100644 --- a/src/app/core/core-components.ts +++ b/src/app/core/core-components.ts @@ -131,7 +131,7 @@ export const coreComponents: ComponentTuple[] = [ "DisplayLongText", () => import( - "./basic-datatypes/string/edit-text/display-long-text/display-long-text.component" + "./basic-datatypes/string/display-long-text/display-long-text.component" ).then((c) => c.DisplayLongTextComponent), ], From 4385cd127a05762f5d6b922cb8fe58c3fb4550c6 Mon Sep 17 00:00:00 2001 From: Sebastian Leidig Date: Wed, 11 Sep 2024 17:19:47 +0200 Subject: [PATCH 14/15] cut off very long text --- .../display-long-text/display-long-text.component.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/app/core/basic-datatypes/string/display-long-text/display-long-text.component.ts b/src/app/core/basic-datatypes/string/display-long-text/display-long-text.component.ts index 9e357dd47f..8d27c2ef21 100644 --- a/src/app/core/basic-datatypes/string/display-long-text/display-long-text.component.ts +++ b/src/app/core/basic-datatypes/string/display-long-text/display-long-text.component.ts @@ -20,9 +20,13 @@ export class DisplayLongTextComponent return; } - const maxLines = 4; - const lines = this.value.split("\n"); - + const maxLines = 3; + const 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("
") + "..." From 58512e7ed8ef6a1e4a58049d3191a9342f2a51ba Mon Sep 17 00:00:00 2001 From: Sebastian Leidig Date: Wed, 11 Sep 2024 17:32:54 +0200 Subject: [PATCH 15/15] make maxLength configurable --- .../display-long-text.component.ts | 22 +++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/src/app/core/basic-datatypes/string/display-long-text/display-long-text.component.ts b/src/app/core/basic-datatypes/string/display-long-text/display-long-text.component.ts index 8d27c2ef21..a914607714 100644 --- a/src/app/core/basic-datatypes/string/display-long-text/display-long-text.component.ts +++ b/src/app/core/basic-datatypes/string/display-long-text/display-long-text.component.ts @@ -1,7 +1,19 @@ -import { Component, OnInit } from "@angular/core"; +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", @@ -9,9 +21,11 @@ import { DynamicComponent } from "app/core/config/dynamic-components/dynamic-com standalone: true, }) export class DisplayLongTextComponent - extends ViewDirective + extends ViewDirective implements OnInit { + @Input() declare config: LongTextFieldConfig; + formattedValue: string = ""; ngOnInit(): void { @@ -20,8 +34,8 @@ export class DisplayLongTextComponent return; } - const maxLines = 3; - const maxCharacters = 250; + const maxLines = this.config?.maxLines ?? 3; + const maxCharacters = this.config?.maxCharacters ?? 250; const text = this.value.length > maxCharacters ? this.value.slice(0, maxCharacters) + "..."