fix(Admin UI): make photo and percentage field types available for configuration (#2546)

by adding them as new Datatype implementations

closes #2503, closes #2121 

---------

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

Author: sadaf895

build/Dockerfile

@@ -35,8 +35,9 @@ COPY --from=base-with-dependencies /opt/app /opt/app
 
 RUN apt-get update && apt-get install -y curl
 WORKDIR /tmp
-# 121.0.6167.139-1~deb12u1 -> 2024-02-01
-ARG CHROMIUM_VERSION=121.0.6167.139-1~deb12u1
+# 120.0.6099.224-1~deb11u1 -> 2024-02-01
+# 128.0.6613.113-1~deb12u1-> 2024-08-30
+ARG CHROMIUM_VERSION=128.0.6613.113-1~deb12u1
 RUN curl -o chromium-common.deb https://ftp.debian.org/debian/pool/main/c/chromium/chromium-common_${CHROMIUM_VERSION}_$(dpkg --print-architecture).deb
 RUN curl -o chromium.deb https://ftp.debian.org/debian/pool/main/c/chromium/chromium_${CHROMIUM_VERSION}_$(dpkg --print-architecture).deb
 RUN apt-get install -y ./chromium-common.deb ./chromium.deb build-essential git libssl-dev

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

@@ -0,0 +1,12 @@
+import { Injectable } from "@angular/core";
+import { NumberDatatype } from "../number.datatype";
+
+/** Datatype for percentage values */
+@Injectable()
+export class PercentageDatatype extends NumberDatatype {
+  static override dataType = "percentage";
+  static override label: string = $localize`:datatype-label:Percentage`;
+
+  override viewComponent = "DisplayPercentage";
+  override editComponent = "EditNumber";
+}

src/app/core/config/config-fix.ts

@@ -1018,9 +1018,8 @@ export const defaultJsonConfig = {
         label: $localize`:Label for the remarks about a dropout of a child:Dropout remarks`,
       },
       photo: {
-        dataType: "file",
+        dataType: "photo",
         label: $localize`:Label for the file field of a photo of a child:Photo`,
-        editComponent: "EditPhoto",
       },
       phone: {
         dataType: "string",
@@ -1301,10 +1300,8 @@ export const defaultJsonConfig = {
         anonymize: "retain",
       },
       result: {
-        dataType: "number",
+        dataType: "percentage",
         label: $localize`:Label for the percentage result of a relation:Result`,
-        viewComponent: "DisplayPercentage",
-        editComponent: "EditNumber",
         validators: {
           min: 0,
           max: 100,

src/app/core/config/config.service.spec.ts

@@ -550,4 +550,89 @@ describe("ConfigService", () => {
     const actualFromNew = service.getConfig("view:X");
     expect(actualFromNew).toEqual(newFormat);
   }));
+
+  it("should migrate to new photo dataType", fakeAsync(() => {
+    const config = new Config();
+    const oldFormat = {
+      attributes: {
+        myPhoto: {
+          dataType: "file",
+          editComponent: "EditPhoto",
+          label: "My Photo",
+        },
+        simpleFile: {
+          dataType: "file",
+          label: "Simple File attachment",
+        },
+      },
+    };
+
+    const newFormat: EntityConfig = {
+      attributes: {
+        myPhoto: {
+          dataType: "photo",
+          label: "My Photo",
+        },
+        simpleFile: {
+          dataType: "file",
+          label: "Simple File attachment",
+        },
+      },
+    };
+
+    config.data = { "entity:X": oldFormat };
+    updateSubject.next({ entity: config, type: "update" });
+    tick();
+    const actualFromOld = service.getConfig<EntityConfig>("entity:X");
+    expect(actualFromOld).toEqual(newFormat);
+
+    config.data = { "entity:X": newFormat };
+    updateSubject.next({ entity: config, type: "update" });
+    tick();
+    const actualFromNew = service.getConfig<EntityConfig>("entity:X");
+    expect(actualFromNew).toEqual(newFormat);
+  }));
+
+  it("should migrate to Percentage dataType", fakeAsync(() => {
+    const config = new Config();
+    const oldFormat = {
+      attributes: {
+        myPercentage: {
+          dataType: "number",
+          viewComponent: "DisplayPercentage",
+          editComponent: "EditNumber",
+          label: "My Percentage",
+        },
+        simpleNumber: {
+          dataType: "number",
+          label: "Simple Number",
+        },
+      },
+    };
+
+    const newFormat: EntityConfig = {
+      attributes: {
+        myPercentage: {
+          dataType: "percentage",
+          label: "My Percentage",
+        },
+        simpleNumber: {
+          dataType: "number",
+          label: "Simple Number",
+        },
+      },
+    };
+
+    config.data = { "entity:X": oldFormat };
+    updateSubject.next({ entity: config, type: "update" });
+    tick();
+    const actualFromOld = service.getConfig<EntityConfig>("entity:X");
+    expect(actualFromOld).toEqual(newFormat);
+
+    config.data = { "entity:X": newFormat };
+    updateSubject.next({ entity: config, type: "update" });
+    tick();
+    const actualFromNew = service.getConfig<EntityConfig>("entity:X");
+    expect(actualFromNew).toEqual(newFormat);
+  }));
 });

src/app/core/config/config.service.ts

@@ -69,6 +69,8 @@ export class ConfigService extends LatestEntityLoader<Config> {
       migrateEntitySchemaDefaultValue,
       migrateChildrenListConfig,
       migrateHistoricalDataComponent,
+      migratePhotoDatatype,
+      migratePercentageDatatype,
     ];
 
     // TODO: execute this on server via ndb-admin
@@ -259,6 +261,32 @@ const migrateEntityArrayDatatype: ConfigMigration = (key, configPart) => {
   return configPart;
 };
 
+/** Migrate the "file" datatype to use the new "photo" datatype  and remove editComponent if no longer needed */
+const migratePhotoDatatype: ConfigMigration = (key, configPart) => {
+  if (
+    configPart?.dataType === "file" &&
+    configPart?.editComponent === "EditPhoto"
+  ) {
+    configPart.dataType = "photo";
+    delete configPart.editComponent;
+  }
+  return configPart;
+};
+
+/** Migrate the number datatype to use the new "percentage" datatype */
+const migratePercentageDatatype: ConfigMigration = (key, configPart) => {
+  if (
+    configPart?.dataType === "number" &&
+    configPart?.viewComponent === "DisplayPercentage"
+  ) {
+    configPart.dataType = "percentage";
+    delete configPart.viewComponent;
+    delete configPart.editComponent;
+  }
+
+  return configPart;
+};
+
 const migrateEntitySchemaDefaultValue: ConfigMigration = (
   key: string,
   configPart: any,

src/app/core/core.module.ts

@@ -18,6 +18,7 @@ import { LongTextDatatype } from "./basic-datatypes/string/long-text.datatype";
 import { UpdateMetadataDatatype } from "./entity/model/update-metadata.datatype";
 import { CurrentUserSubject } from "./session/current-user-subject";
 import { SessionSubject } from "./session/auth/session-info";
+import { PercentageDatatype } from "./basic-datatypes/number/display-percentage/percentage.datatype";
 
 /**
  * Core module registering basic parts like datatypes and components.
@@ -37,6 +38,7 @@ import { SessionSubject } from "./session/auth/session-info";
     { provide: DefaultDatatype, useClass: MonthDatatype, multi: true },
     { provide: DefaultDatatype, useClass: DateDatatype, multi: true },
     { provide: DefaultDatatype, useClass: EntityDatatype, multi: true },
+    { provide: DefaultDatatype, useClass: PercentageDatatype, multi: true },
   ],
   imports: [CommonModule],
 })

src/app/features/file/file.module.ts

@@ -9,6 +9,7 @@ import { ComponentRegistry } from "../../dynamic-components";
 import { fileComponents } from "./file-components";
 import { DefaultDatatype } from "../../core/entity/default-datatype/default.datatype";
 import { FileDatatype } from "./file.datatype";
+import { PhotoDatatype } from "./photo.datatype";
 
 @NgModule({
   providers: [
@@ -20,6 +21,7 @@ import { FileDatatype } from "./file.datatype";
         : injector.get(MockFileService);
     }),
     { provide: DefaultDatatype, useClass: FileDatatype, multi: true },
+    { provide: DefaultDatatype, useClass: PhotoDatatype, multi: true },
   ],
 })
 export class FileModule {

src/app/features/file/photo.datatype.ts

@@ -0,0 +1,11 @@
+import { Injectable } from "@angular/core";
+import { FileDatatype } from "./file.datatype";
+
+/** Datatype for saving a photo on an entity property.*/
+@Injectable()
+export class PhotoDatatype extends FileDatatype {
+  static override dataType = "photo";
+  static override label: string = $localize`:datatype-label:profile photo`;
+
+  override editComponent = "EditPhoto";
+}