feat: editable asset metadata

CHANGELOG.md

@@ -19,6 +19,7 @@ the detailed section referring to by linking pull requests or issues.
 #### Minor
 
 - Implemented markdown for asset descriptions
+- Asset Metadata is now editable
 
 #### Patch
 

package.json

@@ -28,7 +28,7 @@
     "@ng-apimock/core": "^3.11.0",
     "@ngxs/store": "^3.8.1",
     "@sovity.de/broker-server-client": "0.20240109.125529-main-1c7e5add",
-    "@sovity.de/edc-client": "0.20240109.103441-main-c8323d18",
+    "@sovity.de/edc-client": "0.20240109.181620-main-78f67a69",
     "clean-deep": "^3.4.0",
     "date-fns": "^2.30.0",
     "dotenv": "^16.3.1",

src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.service.ts

@@ -3,7 +3,10 @@ import {DataOffer} from '../../../core/services/models/data-offer';
 import {UiAssetMapped} from '../../../core/services/models/ui-asset-mapped';
 import {CatalogDataOfferMapped} from '../../../routes/broker-ui/catalog-page/catalog-page/mapping/catalog-page-result-mapped';
 import {ContractAgreementCardMapped} from '../../../routes/connector-ui/contract-agreement-page/contract-agreement-cards/contract-agreement-card-mapped';
-import {AssetDetailDialogData} from './asset-detail-dialog-data';
+import {
+  AssetDetailDialogData,
+  OnAssetEditClickFn,
+} from './asset-detail-dialog-data';
 import {AssetPropertyGridGroupBuilder} from './asset-property-grid-group-builder';
 
 @Injectable()
@@ -12,10 +15,7 @@ export class AssetDetailDialogDataService {
     private assetPropertyGridGroupBuilder: AssetPropertyGridGroupBuilder,
   ) {}
 
-  assetDetails(
-    asset: UiAssetMapped,
-    allowDelete: boolean,
-  ): AssetDetailDialogData {
+  assetDetailsReadonly(asset: UiAssetMapped): AssetDetailDialogData {
     const propertyGridGroups = [
       this.assetPropertyGridGroupBuilder.buildAssetPropertiesGroup(asset, null),
       this.assetPropertyGridGroupBuilder.buildAdditionalPropertiesGroup(asset),
@@ -24,11 +24,22 @@ export class AssetDetailDialogDataService {
     return {
       type: 'asset-details',
       asset,
-      showDeleteButton: allowDelete,
       propertyGridGroups,
     };
   }
 
+  assetDetailsEditable(
+    asset: UiAssetMapped,
+    opts: {onAssetEditClick: OnAssetEditClickFn},
+  ): AssetDetailDialogData {
+    return {
+      ...this.assetDetailsReadonly(asset),
+      showDeleteButton: true,
+      showEditButton: true,
+      onAssetEditClick: opts.onAssetEditClick,
+    };
+  }
+
   dataOfferDetails(dataOffer: DataOffer): AssetDetailDialogData {
     const asset = dataOffer.asset;
     const propertyGridGroups = [

src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.ts

@@ -16,4 +16,14 @@ export interface AssetDetailDialogData {
   contractAgreement?: ContractAgreementCardMapped;
   brokerDataOffer?: CatalogDataOfferMapped;
   showDeleteButton?: boolean;
+  showEditButton?: boolean;
+  onAssetEditClick?: OnAssetEditClickFn;
 }
+
+export type OnAssetEditClickFn = (
+  asset: UiAssetMapped,
+  /**
+   * Required so that after the editing the detail dialog can be updated again
+   */
+  afterEditCb: (updatedDialogData: AssetDetailDialogData) => void,
+) => void;

src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.component.html

@@ -74,18 +74,30 @@
 </div>
 
 <mat-dialog-actions>
-  <div class="w-full flex flex-row justify-end">
+  <div class="w-full flex flex-row justify-between">
     <div>
-      <button mat-dialog-close mat-button [disabled]="loading">Close</button>
-
       <button
         *ngIf="data.showDeleteButton"
-        mat-raised-button
+        mat-button
         color="warn"
         [disabled]="loading"
         (click)="onDeleteClick()">
         Delete
       </button>
+    </div>
+    <div>
+      <button mat-button [mat-dialog-close]="null" [disabled]="loading">
+        Close
+      </button>
+
+      <button
+        *ngIf="data.showEditButton"
+        mat-raised-button
+        color="primary"
+        [disabled]="loading"
+        (click)="onEditClick()">
+        Edit
+      </button>
 
       <button
         *ngIf="

src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.component.ts

@@ -79,6 +79,12 @@ export class AssetDetailDialogComponent implements OnDestroy {
     this.propGroups = this.data.propertyGridGroups;
   }
 
+  onEditClick() {
+    if (this.data.onAssetEditClick) {
+      this.data.onAssetEditClick(this.data.asset, (data) => this.setData(data));
+    }
+  }
+
   onDeleteClick() {
     this.confirmDelete().subscribe(() => {
       this.blockingRequest({

src/app/component-library/catalog/asset-detail-dialog/markdown-description/markdown-description.component.html

@@ -1,10 +1,10 @@
 <div
   class="overflow-hidden relative"
-  #content
   [style.height.px]="isCollapsed ? collapsedDescriptionHeight : null">
   <div
     *ngIf="description"
     class="markdown-description"
+    #content
     [innerHtml]="
       htmlSanitizer.sanitize(markdownConverter.toHtml(description))
     "></div>
@@ -28,7 +28,7 @@
   *ngIf="isLargeDescription"
   class="w-full"
   mat-button
-  (click)="isCollapsed = !isCollapsed">
+  (click)="onToggleShowMore()">
   <div class="flex items-center gap-1 justify-center">
     <mat-icon *ngIf="isCollapsed" class="mat-icon-[17px] mt-[2px]"
       >keyboard_double_arrow_down</mat-icon

src/app/component-library/catalog/asset-detail-dialog/markdown-description/markdown-description.component.ts

@@ -5,27 +5,36 @@ import {
   ElementRef,
   HostBinding,
   Input,
+  OnChanges,
   OnInit,
   ViewChild,
 } from '@angular/core';
 import {HtmlSanitizer} from 'src/app/core/services/html-sanitizer';
 import {MarkdownConverter} from 'src/app/core/services/markdown-converter';
+import {SimpleChangesTyped} from '../../../../core/utils/angular-utils';
 
 const COLLAPSED_DESCRIPTION_HEIGHT = 280;
 
 @Component({
   selector: 'markdown-description',
   templateUrl: './markdown-description.component.html',
 })
-export class MarkdownDescriptionComponent implements OnInit, AfterViewInit {
+export class MarkdownDescriptionComponent
+  implements OnInit, OnChanges, AfterViewInit
+{
   @HostBinding('class.block') cls = true;
-  @Input() description!: string | undefined;
-  @ViewChild('content')
-  elementView!: ElementRef;
+  @Input() description: string | undefined;
+  @ViewChild('content') elementView!: ElementRef;
   isLargeDescription = false;
-  isCollapsed = false;
   collapsedDescriptionHeight!: number;
 
+  get isCollapsed(): boolean {
+    return this.isLargeDescription && this.collapsed;
+  }
+
+  private collapsed = true;
+  private isAfterViewInit = false;
+
   constructor(
     private cd: ChangeDetectorRef,
     public markdownConverter: MarkdownConverter,
@@ -36,13 +45,24 @@ export class MarkdownDescriptionComponent implements OnInit, AfterViewInit {
     this.collapsedDescriptionHeight = COLLAPSED_DESCRIPTION_HEIGHT;
   }
 
+  ngOnChanges(changes: SimpleChangesTyped<MarkdownDescriptionComponent>) {
+    if (changes.description && this.isAfterViewInit) {
+      this.recalculateShowMore();
+    }
+  }
+
   ngAfterViewInit() {
-    const contentHeight = this.elementView.nativeElement.offsetHeight;
+    this.isAfterViewInit = true;
+    this.recalculateShowMore();
+    this.cd.detectChanges();
+  }
 
-    if (contentHeight > this.collapsedDescriptionHeight) {
-      this.isLargeDescription = true;
-      this.isCollapsed = true;
-      this.cd.detectChanges();
-    }
+  onToggleShowMore() {
+    this.collapsed = !this.collapsed;
+  }
+
+  private recalculateShowMore() {
+    const contentHeight = this.elementView.nativeElement.offsetHeight;
+    this.isLargeDescription = contentHeight > this.collapsedDescriptionHeight;
   }
 }

src/app/component-library/data-address/data-address-type-select/data-address-type-select.component.ts

@@ -1,11 +1,6 @@
-import {
-  Component,
-  HostBinding,
-  Input,
-  OnChanges,
-  SimpleChanges,
-} from '@angular/core';
+import {Component, HostBinding, Input, OnChanges} from '@angular/core';
 import {FormControl} from '@angular/forms';
+import {SimpleChangesTyped} from '../../../core/utils/angular-utils';
 import {DataAddressType} from './data-address-type';
 import {dataAddressTypeSelectItems} from './data-address-type-select-items';
 import {DataAddressTypeSelectMode} from './data-address-type-select-mode';
@@ -29,7 +24,7 @@ export class DataAddressTypeSelectComponent implements OnChanges {
   mode: DataAddressTypeSelectMode = 'Datasource';
 
   items = dataAddressTypeSelectItems(this.mode);
-  ngOnChanges(changes: SimpleChanges) {
+  ngOnChanges(changes: SimpleChangesTyped<DataAddressTypeSelectComponent>) {
     if (changes.mode) {
       this.items = dataAddressTypeSelectItems(this.mode);
     }

src/app/component-library/json-dialog/json-dialog/json-dialog.component.html

@@ -37,7 +37,11 @@
     </mat-checkbox>
   </div>
   <div class="flex flex-row">
-    <button mat-dialog-close mat-button color="default" [disabled]="busy">
+    <button
+      mat-button
+      color="default"
+      [mat-dialog-close]="null"
+      [disabled]="busy">
       Close
     </button>
     <button

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

@@ -77,6 +77,6 @@ export class AppConfigFetcher {
       return null;
     }
 
-    return urlJoin(managementApiUrl!!, relativeUrl);
+    return urlJoin(managementApiUrl, relativeUrl);
   }
 }

src/app/core/services/api/edc-api.service.ts

@@ -17,6 +17,7 @@ import {
   TransferHistoryPage,
   UiAsset,
   UiAssetCreateRequest,
+  UiAssetEditMetadataRequest,
   UiContractNegotiation,
   UiDataOffer,
   buildEdcClient,
@@ -52,6 +53,18 @@ export class EdcApiService {
     return from(this.edcClient.uiApi.createAsset({uiAssetCreateRequest}));
   }
 
+  editAssetMetadata(
+    assetId: string,
+    uiAssetEditMetadataRequest: UiAssetEditMetadataRequest,
+  ): Observable<IdResponseDto> {
+    return from(
+      this.edcClient.uiApi.editAssetMetadata({
+        assetId,
+        uiAssetEditMetadataRequest,
+      }),
+    );
+  }
+
   deleteAsset(assetId: string): Observable<IdResponseDto> {
     return from(this.edcClient.uiApi.deleteAsset({assetId}));
   }