fix: custom properties work in UI again

sovity · Apr 18, 2024 · d55e30a · d55e30a
1 parent 4d13ea6
commit d55e30a
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 69 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "0.0.0",
   "license": "Apache 2.0",
   "scripts": {
+    "cold-start": "npm ci && npm run start",
     "ng": "ng",
     "start": "npm run generate-config && ng serve --host 0.0.0.0 ",
     "start-prod": "npm run generate-config && ng serve --host 0.0.0.0 --configuration=production",
@@ -27,8 +28,8 @@
     "@angular/router": "^14.3.0",
     "@ng-apimock/core": "^3.11.0",
     "@ngxs/store": "^3.8.1",
-    "@sovity.de/broker-server-client": "0.20240321.92753-main-45a69c59",
-    "@sovity.de/edc-client": "0.20240415.134652-main-9ba9dcd8",
+    "@sovity.de/broker-server-client": "0.20240123.125521-main-e2b49967",
+    "@sovity.de/edc-client": "0.20240418.174436-main-8bfcfeb1",
     "clean-deep": "^3.4.0",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.1",

diff --git a/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.service.ts b/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.service.ts
@@ -18,7 +18,9 @@ export class AssetDetailDialogDataService {
   assetDetailsReadonly(asset: UiAssetMapped): AssetDetailDialogData {
     const propertyGridGroups = [
       this.assetPropertyGridGroupBuilder.buildAssetPropertiesGroup(asset, null),
-      this.assetPropertyGridGroupBuilder.buildAdditionalPropertiesGroup(asset),
+      ...this.assetPropertyGridGroupBuilder.buildAdditionalPropertiesGroups(
+        asset,
+      ),
     ].filter((it) => it.properties.length);
 
     return {
@@ -44,7 +46,9 @@ export class AssetDetailDialogDataService {
     const asset = dataOffer.asset;
     const propertyGridGroups = [
       this.assetPropertyGridGroupBuilder.buildAssetPropertiesGroup(asset, null),
-      this.assetPropertyGridGroupBuilder.buildAdditionalPropertiesGroup(asset),
+      ...this.assetPropertyGridGroupBuilder.buildAdditionalPropertiesGroups(
+        asset,
+      ),
     ].filter((it) => it.properties.length);
 
     return {
@@ -72,7 +76,9 @@ export class AssetDetailDialogDataService {
         asset,
         'Asset',
       ),
-      this.assetPropertyGridGroupBuilder.buildAdditionalPropertiesGroup(asset),
+      ...this.assetPropertyGridGroupBuilder.buildAdditionalPropertiesGroups(
+        asset,
+      ),
     ].filter((it) => it.properties.length);
 
     return {
@@ -94,7 +100,9 @@ export class AssetDetailDialogDataService {
         asset,
         'Asset',
       ),
-      this.assetPropertyGridGroupBuilder.buildAdditionalPropertiesGroup(asset),
+      ...this.assetPropertyGridGroupBuilder.buildAdditionalPropertiesGroups(
+        asset,
+      ),
       ...dataOffer.contractOffers.map((contractOffer, i) =>
         this.assetPropertyGridGroupBuilder.buildBrokerContractOfferGroup(
           asset,

diff --git a/src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts b/src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts
@@ -124,28 +124,54 @@ export class AssetPropertyGridGroupBuilder {
     return fields;
   }
 
-  buildAdditionalPropertiesGroup(asset: UiAssetMapped): PropertyGridGroup {
-    const fields: PropertyGridField[] = [];
-
+  buildAdditionalPropertiesGroups(asset: UiAssetMapped): PropertyGridGroup[] {
+    const additionalProperties: PropertyGridField[] = [];
     if (!this.activeFeatureSet.hasMdsFields()) {
-      fields.push(...this.buildMdsProperties(asset));
+      additionalProperties.push(...this.buildMdsProperties(asset));
     }
 
-    fields.push(
-      ...asset.mergedAdditionalProperties.map((prop) => {
+    const customProperties: PropertyGridField[] = [
+      asset.customJsonProperties,
+      asset.customJsonLdProperties,
+    ]
+      .flat()
+      .map((prop) => {
         return {
           icon: 'category ',
           label: prop.key,
           labelTitle: prop.key,
           ...this.propertyGridUtils.guessValue(prop.value),
         };
-      }),
-    );
+      });
 
-    return {
-      groupLabel: 'Additional Properties',
-      properties: fields,
-    };
+    const privateCustomProperties: PropertyGridField[] = [
+      asset.privateCustomJsonProperties,
+      asset.privateCustomJsonLdProperties,
+    ]
+      .flat()
+      .map((prop) => {
+        return {
+          icon: 'category ',
+          label: prop.key,
+          labelTitle: prop.key,
+          ...this.propertyGridUtils.guessValue(prop.value),
+        };
+      });
+
+    return [
+      {
+        groupLabel: 'Additional Properties',
+        properties: additionalProperties,
+      },
+      {
+        groupLabel: 'Custom Properties',
+        properties: customProperties,
+      },
+      {
+        groupLabel: 'Private Properties',
+        properties: privateCustomProperties,
+      },
+    ];
   }
 
   buildMdsProperties(asset: UiAssetMapped): PropertyGridField[] {

diff --git a/src/app/core/services/api/fake-backend/connector-fake-impl/asset-fake-service.ts b/src/app/core/services/api/fake-backend/connector-fake-impl/asset-fake-service.ts
@@ -87,8 +87,6 @@ function createAssetMetadata(
     dataModel: request.dataModel,
     geoReferenceMethod: request.geoReferenceMethod,
     transportMode: request.transportMode,
-    customJsonAsString: request.customJsonAsString,
-    privateCustomJsonAsString: request.privateCustomJsonAsString,
     sovereignLegalName: request.sovereignLegalName,
     geoLocation: request.geoLocation,
     nutsLocations: request.nutsLocations,
@@ -99,6 +97,10 @@ function createAssetMetadata(
     dataUpdateFrequency: request.dataUpdateFrequency,
     temporalCoverageFrom: request.temporalCoverageFrom,
     temporalCoverageToInclusive: request.temporalCoverageToInclusive,
+    customJsonAsString: '{}',
+    customJsonLdAsString: '{}',
+    privateCustomJsonAsString: '{}',
+    privateCustomJsonLdAsString: '{}',
   };
 }
 

diff --git a/src/app/core/services/asset-builder.ts b/src/app/core/services/asset-builder.ts
@@ -27,8 +27,8 @@ export class AssetBuilder {
   buildAsset(asset: UiAsset): UiAssetMapped {
     const {
       customJsonAsString,
-      customJsonLdAsString,
       privateCustomJsonAsString,
+      customJsonLdAsString,
       privateCustomJsonLdAsString,
       language,
       dataCategory,
@@ -42,7 +42,15 @@ export class AssetBuilder {
       dataCategory: this.getDataCategoryItem(dataCategory),
       dataSubcategory: this.getDataSubcategoryItem(dataSubcategory),
       transportMode: this.getTransportModeItem(transportMode),
-      mergedAdditionalProperties: this.buildAdditionalProperties(asset),
+      customJsonProperties: this.buildAdditionalProperties(customJsonAsString),
+      customJsonLdProperties:
+        this.buildAdditionalProperties(customJsonLdAsString),
+      privateCustomJsonProperties: this.buildAdditionalProperties(
+        privateCustomJsonAsString,
+      ),
+      privateCustomJsonLdProperties: this.buildAdditionalProperties(
+        privateCustomJsonLdAsString,
+      ),
     };
   }
 
@@ -78,35 +86,33 @@ export class AssetBuilder {
       : this.languageSelectItemService.findById(language);
   }
 
-  private buildAdditionalProperties(asset: UiAsset): AdditionalAssetProperty[] {
-    const result: AdditionalAssetProperty[] = [];
-    type AssetKey =
-      | 'customJsonAsString'
-      | 'customJsonLdAsString'
-      | 'privateCustomJsonAsString'
-      | 'privateCustomJsonLdAsString';
+  private buildAdditionalProperties(
+    json: string | undefined,
+  ): AdditionalAssetProperty[] {
+    const obj = this.tryParseJsonObj(json || '{}');
+    return Object.entries(obj).map(
+      ([key, value]): AdditionalAssetProperty => ({
+        key: `${key}`,
+        value:
+          typeof value === 'object'
+            ? JSON.stringify(value, null, 2)
+            : `${value}`,
+      }),
+    );
+  }
 
-    const propertiesToConvert: AssetKey[] = [
-      'customJsonAsString',
-      'customJsonLdAsString',
-      'privateCustomJsonAsString',
-      'privateCustomJsonLdAsString',
-    ];
+  private tryParseJsonObj(json: string): any {
+    const bad = {'Conversion Failure': `Bad JSON: ${json}`};
 
-    for (let propName of propertiesToConvert) {
-      if (!asset[propName]) {
-        continue;
+    try {
+      const parsed = JSON.parse(json);
+      if (parsed == null) {
+        return {};
+      } else if (typeof parsed === 'object') {
+        return parsed;
       }
+    } catch (e) {}
 
-      try {
-        const propJson = JSON.parse(asset[propName]!);
-        for (let key in propJson) {
-          result.push({key: key, value: propJson[key]});
-        }
-      } catch (e) {
-        console.error('Error parsing additional properties', e);
-      }
-    }
-    return result;
+    return bad;
   }
 }
diff --git a/src/app/core/services/models/ui-asset-mapped.ts b/src/app/core/services/models/ui-asset-mapped.ts
@@ -23,7 +23,10 @@ export type UiAssetMapped = Omit<
   transportMode: TransportModeSelectItem | null;
 
   // Unhandled Additional Properties
-  mergedAdditionalProperties: AdditionalAssetProperty[];
+  customJsonProperties: AdditionalAssetProperty[];
+  customJsonLdProperties: AdditionalAssetProperty[];
+  privateCustomJsonProperties: AdditionalAssetProperty[];
+  privateCustomJsonLdProperties: AdditionalAssetProperty[];
 };
 
 export interface AdditionalAssetProperty {