Merge remote-tracking branch 'remotes/origin/main' into 2024-01-09-ed…

…itable-assets

# Conflicts:
#	CHANGELOG.md

CHANGELOG.md

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

src/app/component-library/catalog/asset-card-tag-list/asset-card-tag-list.component.html

@@ -0,0 +1,10 @@
+<mat-chip-list aria-label="Tags">
+  <mat-chip *ngIf="version" color="primary" selected>{{ version }}</mat-chip>
+  <mat-chip
+    *ngFor="let keyword of keywords | slice : 0 : numberOfKeywordsDisplayed"
+    >{{ keyword }}</mat-chip
+  >
+  <mat-chip *ngIf="(keywords ?? []).length > numberOfKeywordsDisplayed">
+    +{{ keywords!.length - numberOfKeywordsDisplayed }}
+  </mat-chip>
+</mat-chip-list>

src/app/component-library/catalog/asset-card-tag-list/asset-card-tag-list.component.ts

@@ -0,0 +1,12 @@
+import {Component, HostBinding, Input} from '@angular/core';
+
+@Component({
+  selector: 'asset-card-tag-list',
+  templateUrl: './asset-card-tag-list.component.html',
+})
+export class AssetCardTagListComponent {
+  @HostBinding('class.block') cls = true;
+  @Input() numberOfKeywordsDisplayed: number = 3;
+  @Input() keywords: string[] | undefined;
+  @Input() version: string | undefined;
+}

src/app/component-library/catalog/catalog.module.ts

@@ -12,6 +12,7 @@ import {JsonDialogModule} from '../json-dialog/json-dialog.module';
 import {PipesAndDirectivesModule} from '../pipes-and-directives/pipes-and-directives.module';
 import {PropertyGridModule} from '../property-grid/property-grid.module';
 import {UiElementsModule} from '../ui-elements/ui-elements.module';
+import {AssetCardTagListComponent} from './asset-card-tag-list/asset-card-tag-list.component';
 import {AssetDetailDialogDataService} from './asset-detail-dialog/asset-detail-dialog-data.service';
 import {AssetDetailDialogComponent} from './asset-detail-dialog/asset-detail-dialog.component';
 import {AssetDetailDialogService} from './asset-detail-dialog/asset-detail-dialog.service';
@@ -22,8 +23,10 @@ import {ContractOfferIconComponent} from './contract-offer-icon/contract-offer-i
 import {ContractOfferMiniListComponent} from './contract-offer-mini-list/contract-offer-mini-list.component';
 import {DataOfferCardsComponent} from './data-offer-cards/data-offer-cards.component';
 import {IconWithOnlineStatusComponent} from './icon-with-online-status/icon-with-online-status.component';
+import {SmallIconWithOnlineStatusText} from './small-icon-with-online-status-text/small-icon-with-online-status-text.component';
 import {TransferHistoryMiniListComponent} from './transfer-history-mini-list/transfer-history-mini-list.component';
 import {TruncatedShortDescription} from './truncated-short-description/truncated-short-description.component';
+import {ViewSelectionComponent} from './view-selection/view-selection.component';
 
 @NgModule({
   imports: [
@@ -39,6 +42,8 @@ import {TruncatedShortDescription} from './truncated-short-description/truncated
     MatProgressSpinnerModule,
     MatDialogModule,
     MatTooltipModule,
+    MatIconModule,
+    MatChipsModule,
 
     // Features
     JsonDialogModule,
@@ -55,6 +60,9 @@ import {TruncatedShortDescription} from './truncated-short-description/truncated
     IconWithOnlineStatusComponent,
     MarkdownDescriptionComponent,
     TruncatedShortDescription,
+    ViewSelectionComponent,
+    SmallIconWithOnlineStatusText,
+    AssetCardTagListComponent,
   ],
   exports: [
     AssetDetailDialogComponent,
@@ -64,6 +72,9 @@ import {TruncatedShortDescription} from './truncated-short-description/truncated
     TransferHistoryMiniListComponent,
     IconWithOnlineStatusComponent,
     TruncatedShortDescription,
+    ViewSelectionComponent,
+    SmallIconWithOnlineStatusText,
+    AssetCardTagListComponent,
   ],
   providers: [
     AssetPropertyGridGroupBuilder,

src/app/component-library/catalog/data-offer-cards/data-offer-cards.component.html

@@ -26,16 +26,10 @@
         [text]="asset.descriptionShortText"></truncated-short-description>
 
       <!-- Tag List -->
-      <div *ngIf="asset.keywords?.length || asset.version">
-        <mat-chip-list aria-label="Tags">
-          <mat-chip *ngIf="asset.version" color="primary" selected>{{
-            asset.version
-          }}</mat-chip>
-          <mat-chip *ngFor="let keyword of asset.keywords">{{
-            keyword
-          }}</mat-chip>
-        </mat-chip-list>
-      </div>
+      <asset-card-tag-list
+        *ngIf="asset.keywords?.length || asset.version"
+        [keywords]="asset.keywords"
+        [version]="asset.version"></asset-card-tag-list>
     </mat-card-content>
   </ng-container>
 </mat-card>

src/app/component-library/catalog/icon-with-online-status/online-status-utils.ts

@@ -36,3 +36,18 @@ export function getOnlineStatusIcon(status: ConnectorOnlineStatus): string {
       return '';
   }
 }
+
+export function getOnlineStatusSmallIcon(
+  status: ConnectorOnlineStatus,
+): string {
+  switch (status) {
+    case 'ONLINE':
+      return 'cloud_done';
+    case 'OFFLINE':
+      return 'pause_circle';
+    case 'DEAD':
+      return 'remove_circle';
+    default:
+      return '';
+  }
+}

src/app/component-library/catalog/small-icon-with-online-status-text/small-icon-with-online-status-text.component.html

@@ -0,0 +1,4 @@
+<div class="flex items-center gap-2 text-[12px]" [ngClass]="color">
+  <mat-icon class="mat-icon-[16px]" [ngClass]="color">{{ icon }}</mat-icon>
+  {{ text }}
+</div>

src/app/component-library/catalog/small-icon-with-online-status-text/small-icon-with-online-status-text.component.ts

@@ -0,0 +1,27 @@
+import {Component, Input} from '@angular/core';
+import {capitalize} from 'src/app/core/utils/string-utils';
+import {
+  ConnectorOnlineStatus,
+  getOnlineStatusColor,
+  getOnlineStatusSmallIcon,
+} from '../icon-with-online-status/online-status-utils';
+
+@Component({
+  selector: 'small-icon-with-online-status-text',
+  templateUrl: 'small-icon-with-online-status-text.component.html',
+})
+export class SmallIconWithOnlineStatusText {
+  @Input() onlineStatus!: ConnectorOnlineStatus;
+
+  get text(): string {
+    return capitalize(this.onlineStatus.toLowerCase());
+  }
+
+  get color(): string {
+    return getOnlineStatusColor(this.onlineStatus);
+  }
+
+  get icon(): string {
+    return getOnlineStatusSmallIcon(this.onlineStatus);
+  }
+}

src/app/component-library/catalog/truncated-short-description/truncated-short-description.component.ts

@@ -7,7 +7,7 @@ import {Component, HostBinding, Input} from '@angular/core';
 export class TruncatedShortDescription {
   @Input() text!: string | undefined;
   @HostBinding('class.whitespace-pre-line')
-  @HostBinding('class.truncate-lines-5')
+  @HostBinding('class.line-clamp-5')
   cls = true;
   @HostBinding('class.italic')
   get italic(): boolean {

src/app/component-library/catalog/view-selection/view-mode-enum.ts

@@ -0,0 +1,4 @@
+export enum ViewModeEnum {
+  GRID,
+  LIST,
+}

src/app/component-library/catalog/view-selection/view-selection.component.html

@@ -0,0 +1,16 @@
+<div class="flex flex-row items-center">
+  <button
+    mat-icon-button
+    matTooltip="Grid View"
+    [class.!bg-[#EDEDED]]="selected === viewModeEnum.GRID"
+    (click)="onSelection(viewModeEnum.GRID)">
+    <mat-icon class="mat-icon-[22px]">apps</mat-icon>
+  </button>
+  <button
+    mat-icon-button
+    matTooltip="List View"
+    [class.!bg-[#EDEDED]]="selected === viewModeEnum.LIST"
+    (click)="onSelection(viewModeEnum.LIST)">
+    <mat-icon>view_headline</mat-icon>
+  </button>
+</div>

src/app/component-library/catalog/view-selection/view-selection.component.ts

@@ -0,0 +1,16 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {ViewModeEnum} from './view-mode-enum';
+
+@Component({
+  selector: 'view-selection',
+  templateUrl: './view-selection.component.html',
+})
+export class ViewSelectionComponent {
+  viewModeEnum = ViewModeEnum;
+  @Input() selected!: ViewModeEnum;
+  @Output() selectedChange = new EventEmitter<ViewModeEnum>();
+
+  onSelection(view: ViewModeEnum) {
+    this.selectedChange.emit(view);
+  }
+}

src/app/core/utils/local-storage-utils.ts

@@ -0,0 +1,19 @@
+export class LocalStorageUtils {
+  saveData<T>(key: string, value: T) {
+    localStorage.setItem(key, JSON.stringify(value));
+  }
+
+  getData<T>(key: string): T | null {
+    const storedItem = localStorage.getItem(key);
+
+    return storedItem == null ? null : JSON.parse(storedItem);
+  }
+
+  removeData(key: string) {
+    localStorage.removeItem(key);
+  }
+
+  clearData() {
+    localStorage.clear();
+  }
+}

src/app/core/utils/local-stored-value.ts

@@ -0,0 +1,21 @@
+import {LocalStorageUtils} from './local-storage-utils';
+
+export class LocalStoredValue<T> {
+  localStorageUtils = new LocalStorageUtils();
+
+  constructor(private cachedValue: T, private key: string) {
+    this.cachedValue =
+      this.localStorageUtils.getData(this.key) ?? this.cachedValue;
+  }
+
+  get value(): T {
+    return this.cachedValue;
+  }
+
+  set value(value: T) {
+    if (this.cachedValue != value) {
+      this.cachedValue = value;
+      this.localStorageUtils.saveData(this.key, value);
+    }
+  }
+}

src/app/core/utils/string-utils.ts

@@ -15,3 +15,7 @@ export function everythingAfter(separator: string, s: string): string {
   const index = s.indexOf(separator);
   return index === -1 ? '' : s.substring(index + separator.length);
 }
+
+export function capitalize(s: string) {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}

src/app/routes/broker-ui/catalog-page/broker-data-offer-cards/broker-data-offer-cards.component.html

@@ -22,16 +22,10 @@
         [text]="asset.descriptionShortText"></truncated-short-description>
 
       <!-- Tag List -->
-      <div *ngIf="asset.keywords?.length || asset.version">
-        <mat-chip-list aria-label="Tags">
-          <mat-chip *ngIf="asset.version" color="primary" selected>{{
-            asset.version
-          }}</mat-chip>
-          <mat-chip *ngFor="let keyword of asset.keywords">{{
-            keyword
-          }}</mat-chip>
-        </mat-chip-list>
-      </div>
+      <asset-card-tag-list
+        *ngIf="asset.keywords?.length || asset.version"
+        [keywords]="asset.keywords"
+        [version]="asset.version"></asset-card-tag-list>
     </mat-card-content>
   </ng-container>
 </mat-card>

src/app/routes/broker-ui/catalog-page/broker-data-offer-list/broker-data-offer-list.component.html

@@ -0,0 +1,43 @@
+<table mat-table [dataSource]="dataOffers">
+  <ng-container matColumnDef="status">
+    <th *matHeaderCellDef class="status-column" mat-header-cell>Status</th>
+    <td *matCellDef="let offer" class="status-column" mat-cell>
+      <small-icon-with-online-status-text
+        [onlineStatus]="
+          offer.connectorOnlineStatus
+        "></small-icon-with-online-status-text>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="name">
+    <th *matHeaderCellDef class="name-column" mat-header-cell>Name</th>
+    <td *matCellDef="let offer" class="name-column" mat-cell>
+      {{ offer.asset.title }}
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="organizationName">
+    <th *matHeaderCellDef class="organization-column" mat-header-cell>
+      Organization
+    </th>
+    <td *matCellDef="let offer" class="organization-column" mat-cell>
+      {{ offer.asset.creatorOrganizationName }}
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="description">
+    <th *matHeaderCellDef class="description-column" mat-header-cell>
+      Description
+    </th>
+    <td *matCellDef="let offer" class="description-column" mat-cell>
+      {{ offer.asset.descriptionShortText }}
+    </td>
+  </ng-container>
+
+  <tr *matHeaderRowDef="columnsToDisplay" mat-header-row></tr>
+  <tr
+    *matRowDef="let rowData; columns: columnsToDisplay"
+    class="cursor-pointer hover:bg-gray-50"
+    mat-row
+    (click)="onRowClick(rowData)"></tr>
+</table>