Feat/adding parameterization details to asset card

CHANGELOG.md

@@ -16,6 +16,8 @@ the detailed section referring to by linking pull requests or issues.
 
 #### Added
 
+- Added viewing of parameterization options to asset details
+
 #### Changed
 
 #### Removed

fake-backend/json/assets.json

@@ -18,7 +18,11 @@
       "http://w3id.org/mds#dataModel": "my-data-model-001",
       "http://w3id.org/mds#geoReferenceMethod": "my-geo-reference-method",
       "http://w3id.org/mds#transportMode": "Rail",
-      "asset:prop:some-unsupported-property": "F10E2821BBBEA527EA02200352313BC059445190"
+      "asset:prop:some-unsupported-property": "test",
+      "asset:prop:datasource:http:hints:proxyBody": "true",
+      "asset:prop:datasource:http:hints:proxyMethod": "true",
+      "asset:prop:datasource:http:hints:proxyPath": "false",
+      "asset:prop:datasource:http:hints:proxyQueryParams": "false"
     }
   },
   {

fake-backend/json/contractAgreementPage.json

@@ -127,9 +127,9 @@
           "http://w3id.org/mds#dataModel": "my-data-model-001",
           "http://w3id.org/mds#geoReferenceMethod": "my-geo-reference-method",
           "http://w3id.org/mds#transportMode": "Rail",
-          "asset:prop:some-unsupported-property": "F10E2821BBBEA527EA02200352313BC059445190",
+          "asset:prop:some-unsupported-property": "test",
           "asset:prop:datasource:http:hints:proxyMethod": "true",
-          "asset:prop:datasource:http:hints:proxyPath": "true",
+          "asset:prop:datasource:http:hints:proxyPath": "false",
           "asset:prop:datasource:http:hints:proxyQueryParams": "true",
           "asset:prop:datasource:http:hints:proxyBody": "true"
         }

src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts

@@ -6,6 +6,11 @@ import {Policy} from '../../../core/services/api/legacy-managent-api-client';
 import {AssetProperties} from '../../../core/services/asset-properties';
 import {Asset} from '../../../core/services/models/asset';
 import {BrokerDataOffer} from '../../../routes/broker-ui/catalog-page/catalog-page/mapping/broker-data-offer';
+import {ParameterizationDetailDialogComponent} from '../../../routes/connector-ui/asset-page/parameterization-detail-dialog/parameterization-detail-dialog.component';
+import {
+  ParameterizationDetailDialogData,
+  assetParameterizationDetail,
+} from '../../../routes/connector-ui/asset-page/parameterization-detail-dialog/parameterization-detail-dialog.data';
 import {ContractAgreementCardMapped} from '../../../routes/connector-ui/contract-agreement-page/contract-agreement-cards/contract-agreement-card-mapped';
 import {JsonDialogComponent} from '../../json-dialog/json-dialog/json-dialog.component';
 import {JsonDialogData} from '../../json-dialog/json-dialog/json-dialog.data';
@@ -88,6 +93,33 @@ export class AssetPropertyGridGroupBuilder {
       fields.push(...this.buildMdsProperties(asset, true));
     }
 
+    if (
+      asset.httpProxyMethod != null ||
+      asset.httpProxyBody != null ||
+      asset.httpProxyPath != null ||
+      asset.httpProxyQueryParams != null
+    ) {
+      let showDetailsObject = {
+        httpProxyMethod: asset.httpProxyMethod ? 'Enabled' : 'Disabled',
+        httpProxyBody: asset.httpProxyBody ? 'Enabled' : 'Disabled',
+        httpProxyPath: asset.httpProxyPath ? 'Enabled' : 'Disabled',
+        httpProxiedQueryParams: asset.httpProxyQueryParams
+          ? 'Enabled'
+          : 'Disabled',
+      };
+      fields.push({
+        icon: 'list',
+        label: 'Parameterization Options',
+        text: 'Show Details',
+        onclick: () =>
+          this.onShowDetailsClick(
+            `Parameterization Options`,
+            asset.name,
+            showDetailsObject,
+          ),
+      });
+    }
+
     return {
       groupLabel,
       properties: fields,
@@ -177,6 +209,20 @@ export class AssetPropertyGridGroupBuilder {
     this.matDialog.open(JsonDialogComponent, {data});
   }
 
+  onShowDetailsClick(
+    title: string,
+    subtitle: string,
+    details: assetParameterizationDetail,
+  ) {
+    const data: ParameterizationDetailDialogData = {
+      title,
+      subtitle,
+      icon: 'list',
+      objectForDetailDialog: details,
+    };
+    this.matDialog.open(ParameterizationDetailDialogComponent, {data});
+  }
+
   buildContractOfferGroup(
     asset: Asset,
     contractOffer: CatalogContractOffer,

src/app/routes/connector-ui/asset-page/asset-page.module.ts

@@ -31,8 +31,10 @@ import {DataSubcategoryItemsPipe} from './data-subcategory-select/data-subcatego
 import {DataSubcategorySelectComponent} from './data-subcategory-select/data-subcategory-select.component';
 import {KeywordSelectComponent} from './keyword-select/keyword-select.component';
 import {LanguageSelectComponent} from './language-select/language-select.component';
+import {ParameterizationDetailDialogComponent} from './parameterization-detail-dialog/parameterization-detail-dialog.component';
 import {TransportModeSelectComponent} from './transport-mode-select/transport-mode-select.component';
 
+
 @NgModule({
   imports: [
     // Angular
@@ -71,12 +73,14 @@ import {TransportModeSelectComponent} from './transport-mode-select/transport-mo
     AssetCreateDialogComponent,
     AssetPageComponent,
     DataCategorySelectComponent,
-    DataSubcategorySelectComponent,
     DataSubcategoryItemsPipe,
+    DataSubcategorySelectComponent,
     KeywordSelectComponent,
     LanguageSelectComponent,
+    ParameterizationDetailDialogComponent,
     TransportModeSelectComponent,
   ],
   exports: [AssetPageComponent],
 })
-export class AssetPageModule {}
+export class AssetPageModule {
+}

src/app/routes/connector-ui/asset-page/parameterization-detail-dialog/parameterization-detail-dialog.component.html

@@ -0,0 +1,19 @@
+<div class="mat-card-header" mat-dialog-title removeClass="mat-dialog-title">
+  <mat-icon class="mat-icon-[40px]"> {{ data.icon }} </mat-icon>
+  <div class="mat-card-header-text">
+    <div class="mat-card-title">{{ data.title }}</div>
+    <div class="mat-card-subtitle">{{ data.subtitle }}</div>
+  </div>
+</div>
+
+<div mat-dialog-content>
+  <ul>
+    <li *ngFor="let key of Object.keys(data.objectForDetailDialog)">
+      {{ key }} : {{ data.objectForDetailDialog[key] }}
+    </li>
+  </ul>
+</div>
+
+<div class="w-full flex flex-row justify-end" mat-dialog-actions>
+  <button mat-dialog-close mat-button color="default">Close</button>
+</div>

src/app/routes/connector-ui/asset-page/parameterization-detail-dialog/parameterization-detail-dialog.component.ts

@@ -0,0 +1,15 @@
+import {Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {ParameterizationDetailDialogData} from './parameterization-detail-dialog.data';
+
+@Component({
+  selector: 'app-parameterization-detail-dialog',
+  templateUrl: './parameterization-detail-dialog.component.html',
+})
+export class ParameterizationDetailDialogComponent {
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: ParameterizationDetailDialogData,
+  ) {}
+
+  Object = Object;
+}

src/app/routes/connector-ui/asset-page/parameterization-detail-dialog/parameterization-detail-dialog.data.ts

@@ -0,0 +1,10 @@
+export interface ParameterizationDetailDialogData {
+  title: string;
+  subtitle: string;
+  icon: string;
+  objectForDetailDialog: assetParameterizationDetail;
+}
+
+export interface assetParameterizationDetail {
+  [key: string]: string;
+}