feat: editable asset metadata (#617)

sovity · Jan 16, 2024 · 2934524 · 2934524
1 parent d561463
commit 2934524
Show file tree

Hide file tree

Showing 68 changed files with 1,022 additions and 502 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,7 @@ the detailed section referring to by linking pull requests or issues.
 
 - Implemented markdown for asset descriptions
 - Implemented list view for Broker UI
+- Asset Metadata is now editable
 - Now displaying organization information on BrokerUI's `/connectors` page
 
 #### Patch

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
     "@ng-apimock/core": "^3.11.0",
     "@ngxs/store": "^3.8.1",
     "@sovity.de/broker-server-client": "0.20240116.140046-main-787cf146",
-    "@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",

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
@@ -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 = [

diff --git a/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.ts b/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;
diff --git a/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.component.html b/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.component.html
@@ -1,30 +1,56 @@
-<div class="mat-card-header" mat-dialog-title removeClass="mat-dialog-title">
-  <mat-icon *ngIf="data.type === 'asset-details'" class="mat-card-avatar-icon">
-    upload
-  </mat-icon>
-  <icon-with-online-status
-    *ngIf="data.type === 'broker-data-offer'"
-    mainIcon="sim_card"
-    [onlineStatus]="data.brokerDataOffer!!.connectorOnlineStatus">
-  </icon-with-online-status>
-  <mat-icon
-    *ngIf="data.type === 'contract-agreement'"
-    class="mat-card-avatar-icon">
-    {{
-      data.contractAgreement!!.direction === 'PROVIDING' ? 'upload' : 'download'
-    }}
-  </mat-icon>
-  <contract-offer-icon
-    *ngIf="data.type === 'data-offer'"
-    [dataOffer]="data.dataOffer!"></contract-offer-icon>
-  <div class="mat-card-header-text">
-    <div class="mat-card-title">
-      {{ asset.title }}
-    </div>
-    <div class="mat-card-subtitle">
-      {{ asset.creatorOrganizationName }}
+<div class="flex flex-row justify-between space-x-[10px]">
+  <div class="mat-card-header" mat-dialog-title removeClass="mat-dialog-title">
+    <mat-icon
+      *ngIf="data.type === 'asset-details'"
+      class="mat-card-avatar-icon">
+      upload
+    </mat-icon>
+    <icon-with-online-status
+      *ngIf="data.type === 'broker-data-offer'"
+      mainIcon="sim_card"
+      [onlineStatus]="data.brokerDataOffer!!.connectorOnlineStatus">
+    </icon-with-online-status>
+    <mat-icon
+      *ngIf="data.type === 'contract-agreement'"
+      class="mat-card-avatar-icon">
+      {{
+        data.contractAgreement!!.direction === 'PROVIDING'
+          ? 'upload'
+          : 'download'
+      }}
+    </mat-icon>
+    <contract-offer-icon
+      *ngIf="data.type === 'data-offer'"
+      [dataOffer]="data.dataOffer!"></contract-offer-icon>
+    <div class="mat-card-header-text">
+      <div class="mat-card-title">
+        {{ asset.title }}
+      </div>
+      <div class="mat-card-subtitle">
+        {{ asset.creatorOrganizationName }}
+      </div>
     </div>
   </div>
+  <div
+    *ngIf="data.showDeleteButton || data.showEditButton"
+    class="flex flex-row">
+    <button
+      *ngIf="data.showEditButton"
+      class="hover:!bg-[#EDEDED]"
+      mat-icon-button
+      matTooltip="Edit"
+      (click)="onEditClick()">
+      <mat-icon class="mat-icon-[22px]">edit</mat-icon>
+    </button>
+    <button
+      *ngIf="data.showDeleteButton"
+      class="hover:!bg-[#EDEDED]"
+      mat-icon-button
+      matTooltip="Delete"
+      (click)="onDeleteClick()">
+      <mat-icon class="mat-icon-[22px]">delete</mat-icon>
+    </button>
+  </div>
 </div>
 
 <div class="flex flex-col space-y-[10px]" mat-dialog-content>
@@ -76,15 +102,8 @@
 <mat-dialog-actions>
   <div class="w-full flex flex-row justify-end">
     <div>
-      <button mat-dialog-close mat-button [disabled]="loading">Close</button>
-
-      <button
-        *ngIf="data.showDeleteButton"
-        mat-raised-button
-        color="warn"
-        [disabled]="loading"
-        (click)="onDeleteClick()">
-        Delete
+      <button mat-button [mat-dialog-close]="null" [disabled]="loading">
+        Close
       </button>
 
       <button

diff --git a/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.component.ts b/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({

diff --git a/...rary/catalog/asset-detail-dialog/markdown-description/markdown-description.component.html b/...rary/catalog/asset-detail-dialog/markdown-description/markdown-description.component.html
@@ -1,12 +1,11 @@
 <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))
+      htmlSanitizer.sanitize(markdownConverter.toHtml(description ?? ''))
     "></div>
 
   <i *ngIf="!description">No description.</i>
@@ -28,7 +27,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

diff --git a/...ibrary/catalog/asset-detail-dialog/markdown-description/markdown-description.component.ts b/...ibrary/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;
   }
 }
diff --git a/...onent-library/data-address/data-address-type-select/data-address-type-select.component.ts b/...onent-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);
     }