fix(forms): "0" value is display correctly (#2015)

fixes #2013 

---------

Co-authored-by: Sebastian Leidig <sebastian@aam-digital.com>

src/app/core/basic-datatypes/number/display-dyanamic-percentage/display-dynamic-percentage.stories.ts → src/app/core/basic-datatypes/number/display-dynamic-percentage/display-dynamic-percentage.stories.ts

@@ -1,10 +1,10 @@
-import { Meta, StoryFn, applicationConfig } from "@storybook/angular";
+import { applicationConfig, Meta, StoryFn } from "@storybook/angular";
 import { StorybookBaseModule } from "app/utils/storybook-base.module";
 import { DisplayDynamicPercentageComponent } from "./display-dynamic-percentage.component";
 import { importProvidersFrom } from "@angular/core";
 
 export default {
-  title: "Core/Entities/Display Properties/DisplayDynamicPercentage",
+  title: "Core/Entities/Properties/number/DisplayDynamicPercentage",
   component: DisplayDynamicPercentageComponent,
   decorators: [
     applicationConfig({
@@ -28,3 +28,13 @@ Primary.args = {
     decimalPlaces: 3,
   },
 };
+
+export const Zero = Template.bind({});
+Zero.args = {
+  entity: { allDays: 110, presentDays: 0 },
+  config: {
+    actual: "presentDays",
+    total: "allDays",
+    decimalPlaces: 3,
+  },
+};

src/app/core/basic-datatypes/number/display-percentage/display-percentage.component.ts

@@ -6,7 +6,8 @@ import { CommonModule } from "@angular/common";
 @DynamicComponent("DisplayPercentage")
 @Component({
   selector: "app-display-percentage",
-  template: "{{ value ? (value | number : numberFormat) + '%' : '-' }}",
+  template:
+    "{{ value !== undefined ? (value | number : numberFormat) + '%' : '-' }}",
   standalone: true,
   imports: [CommonModule],
 })

src/app/core/basic-datatypes/number/display-percentage/display-percentage.stories.ts

@@ -29,7 +29,7 @@ const Template: StoryFn<DisplayPercentageComponent> = (
 
 export const Low = Template.bind({});
 Low.args = {
-  value: 5,
+  value: 0,
 };
 export const Medium = Template.bind({});
 Medium.args = {

src/app/core/basic-datatypes/number/display-unit/display-unit.component.ts

@@ -5,7 +5,7 @@ import { DynamicComponent } from "../../../config/dynamic-components/dynamic-com
 @DynamicComponent("DisplayUnit")
 @Component({
   selector: "app-display-unit",
-  template: '{{ value ? value + " " + config : "" }}',
+  template: '{{ value !== undefined ? value + " " + config : "" }}',
   standalone: true,
 })
 export class DisplayUnitComponent extends ViewDirective<string, string> {}

src/app/core/basic-datatypes/number/display-unit/display-unit.stories.ts

@@ -25,6 +25,12 @@ Basic.args = {
   config: "kg",
 };
 
+export const Zero = Template.bind({});
+Zero.args = {
+  value: 0,
+  config: "kg",
+};
+
 export const WithoutValue = Template.bind({});
 WithoutValue.args = {
   value: undefined,

src/app/core/basic-datatypes/number/number.datatype.ts

@@ -33,6 +33,7 @@ import { Injectable } from "@angular/core";
 @Injectable()
 export class NumberDatatype extends DefaultDatatype<number, number> {
   static dataType = "number";
+  viewComponent = "DisplayText";
   editComponent = "EditNumber";
 
   transformToDatabaseFormat(value) {

src/app/core/config/dynamic-components/dynamic-component.directive.spec.ts

@@ -0,0 +1,72 @@
+import { TestBed } from "@angular/core/testing";
+import { ChangeDetectorRef, ViewContainerRef } from "@angular/core";
+import { DynamicComponentDirective } from "./dynamic-component.directive";
+import { ComponentRegistry } from "../../../dynamic-components";
+
+describe("DynamicComponentDirective", () => {
+  let directive: DynamicComponentDirective;
+  let mockContainer: jasmine.SpyObj<ViewContainerRef>;
+  let mockDetector: jasmine.SpyObj<ChangeDetectorRef>;
+  let mockRegistry: jasmine.SpyObj<ComponentRegistry>;
+
+  beforeEach(() => {
+    mockContainer = jasmine.createSpyObj(["clear", "createComponent"]);
+    mockDetector = jasmine.createSpyObj(["detectChanges"]);
+    mockRegistry = jasmine.createSpyObj(["get"]);
+    TestBed.configureTestingModule({
+      providers: [
+        { provide: ViewContainerRef, useValue: mockContainer },
+        { provide: ChangeDetectorRef, useValue: mockDetector },
+        { provide: ComponentRegistry, useValue: mockRegistry },
+        DynamicComponentDirective,
+      ],
+    });
+    directive = TestBed.inject(DynamicComponentDirective);
+  });
+
+  it("should create the configured component", async () => {
+    directive.appDynamicComponent = { component: "TestComp" };
+    const comp = {} as any;
+    mockRegistry.get.and.returnValue(() => Promise.resolve(comp));
+
+    await directive.ngOnChanges();
+
+    expect(mockRegistry.get).toHaveBeenCalledWith("TestComp");
+    expect(mockContainer.createComponent).toHaveBeenCalledWith(comp);
+  });
+
+  it("should assign the properties to the component", async () => {
+    directive.appDynamicComponent = {
+      component: "TestComp",
+      config: {
+        numberProp: 0,
+        stringProp: "should exist",
+        missingProp: "should not exist",
+      },
+    };
+    const changesSpy = jasmine.createSpy();
+    const comp: any = {
+      prototype: {
+        constructor: {
+          ["ɵcmp"]: {
+            inputs: { numberProp: {}, stringProp: {}, otherProp: {} },
+          },
+        },
+      },
+    };
+    const compRef: any = { instance: { ngOnChanges: changesSpy } };
+    mockRegistry.get.and.returnValue(() => Promise.resolve(comp));
+    mockContainer.createComponent.and.returnValue(compRef);
+
+    await directive.ngOnChanges();
+
+    expect(compRef.instance.numberProp).toBe(0);
+    expect(compRef.instance.stringProp).toBe("should exist");
+    expect(compRef.instance.missingProp).toBeUndefined();
+    expect(compRef.instance.otherProp).toBeUndefined();
+    expect(compRef.instance.ngOnChanges).toHaveBeenCalledWith({
+      numberProp: jasmine.anything(),
+      stringProp: jasmine.anything(),
+    });
+  });
+});

src/app/core/config/dynamic-components/dynamic-component.directive.ts

@@ -31,8 +31,8 @@ export class DynamicComponentDirective implements OnChanges {
     private changeDetector: ChangeDetectorRef,
   ) {}
 
-  async ngOnChanges() {
-    await this.loadDynamicComponent();
+  ngOnChanges() {
+    return this.loadDynamicComponent();
   }
 
   private async loadDynamicComponent() {
@@ -57,7 +57,7 @@ export class DynamicComponentDirective implements OnChanges {
 
   private setInputProperties(proto, component) {
     const inputs = Object.keys(proto.constructor["ɵcmp"].inputs).filter(
-      (input) => this.appDynamicComponent.config?.[input],
+      (input) => this.appDynamicComponent.config?.[input] !== undefined,
     );
     const inputValues = pick(this.appDynamicComponent.config, inputs);
     const initialValues = pick(component, inputs);

src/app/core/core-components.ts

@@ -159,7 +159,7 @@ export const coreComponents: ComponentTuple[] = [
     "DisplayDynamicPercentage",
     () =>
       import(
-        "./basic-datatypes/number/display-dyanamic-percentage/display-dynamic-percentage.component"
+        "./basic-datatypes/number/display-dynamic-percentage/display-dynamic-percentage.component"
       ).then((c) => c.DisplayDynamicPercentageComponent),
   ],
   [