From 58f614a6e7b2e28ab85eb73f96e696767a43c8a2 Mon Sep 17 00:00:00 2001
From: kaw67872 <kawtar.laariche@iais.fraunhofer.de>
Date: Wed, 15 May 2024 13:25:22 +0200
Subject: [PATCH] #19: use custom drop down menu in model details component
---
.../model-details.component.html | 38 +++----------------
.../model-details/model-details.component.ts | 14 +++----
.../version-dropdown.component.html | 27 +++++++++++++
3 files changed, 37 insertions(+), 42 deletions(-)
create mode 100644 src/app/shared/components/version-dropdown/version-dropdown.component.html
diff --git a/src/app/features/model-details/model-details.component.html b/src/app/features/model-details/model-details.component.html
index 9b5e330..4b6be61 100644
--- a/src/app/features/model-details/model-details.component.html
+++ b/src/app/features/model-details/model-details.component.html
@@ -41,39 +41,11 @@
</mat-menu>
</div>
</div>
- <div class="version-container">
- <button
- class="mdl-button"
- #menuTrigger2="matMenuTrigger"
- [matMenuTriggerFor]="menu2"
- (click)="menuTrigger2.openMenu()"
- >
- <span class="text-ellipsis"
- >Version - {{ selectedDefaultRevision?.version }}</span
- >
- <i class="material-icons">keyboard_arrow_down</i>
- </button>
- <mat-menu #menu2="matMenu"
- ><ul>
- <li
- *ngFor="let revision of revisionsList"
- [ngClass]="{
- selected: revision.version === selectedDefaultRevision.version
- }"
- (click)="onChangeVersion(revision)"
- class="li-border-bottom"
- >
- <span
- [ngClass]="{
- 'md-cat-txtellipsis': revision.version.length > 15
- }"
- >{{ revision.version }}</span
- >
- <span class="custom-tooltip-text">{{ revision.version }}</span>
- </li>
- </ul></mat-menu
- >
- </div>
+ <gp-version-dropdown
+ [selectedDefaultRevision]="selectedDefaultRevision"
+ [revisionsList]="revisionsList"
+ (revisionChange)="onChangeVersion($event)"
+ ></gp-version-dropdown>
</div>
<ng-container *ngIf="isLoggedIn$ | async; else notLoggedIn">
<div class="md-head-container2">
diff --git a/src/app/features/model-details/model-details.component.ts b/src/app/features/model-details/model-details.component.ts
index a407e6e..262ad05 100644
--- a/src/app/features/model-details/model-details.component.ts
+++ b/src/app/features/model-details/model-details.component.ts
@@ -51,6 +51,7 @@ import { apiConfig } from 'src/app/core/config';
import { PrivateCatalogsService } from 'src/app/core/services/private-catalogs.service';
import { SolutionIdComponent } from 'src/app/shared/components/solution-id/solution-id.component';
import { BreadcrumbNavigationComponent } from 'src/app/shared/components/breadcrumb-navigation/breadcrumb-navigation.component';
+import { VersionDropdownComponent } from 'src/app/shared/components/version-dropdown/version-dropdown.component';
interface SolutionData {
solutionId: string;
@@ -90,6 +91,7 @@ interface SolutionData {
FormsModule,
SolutionIdComponent,
BreadcrumbNavigationComponent,
+ VersionDropdownComponent,
],
templateUrl: './model-details.component.html',
styleUrl: './model-details.component.scss',
@@ -103,14 +105,8 @@ export class ModelDetailsComponent implements OnInit {
imageToShow: any;
isImageLoading = true;
selectedDefaultCatalog!: Catalog;
- revisionsList!: {
- version: string;
- revisionId: string;
- }[];
- selectedDefaultRevision!: {
- version: string;
- revisionId: string;
- };
+ revisionsList!: Revision[];
+ selectedDefaultRevision!: Revision;
averageRatings!: AverageRatings;
allRatings: AllUserRating[] = [];
totalRatingsCount: number = 0;
@@ -371,7 +367,7 @@ export class ModelDetailsComponent implements OnInit {
});
}
- onChangeVersion(revision: { version: string; revisionId: string }) {
+ onChangeVersion(revision: Revision) {
this.selectedDefaultRevision = revision;
this.setVersionIdInService();
this.setRevisionInService(revision);
diff --git a/src/app/shared/components/version-dropdown/version-dropdown.component.html b/src/app/shared/components/version-dropdown/version-dropdown.component.html
new file mode 100644
index 0000000..c86f1ec
--- /dev/null
+++ b/src/app/shared/components/version-dropdown/version-dropdown.component.html
@@ -0,0 +1,27 @@
+<div class="version-container">
+ <button
+ class="version-button"
+ #menuTrigger2="matMenuTrigger"
+ mat-raised-button
+ [matMenuTriggerFor]="menu2"
+ (click)="menuTrigger2.openMenu()"
+ >
+ <span>Version - {{ selectedDefaultRevision?.version }}</span>
+ <mat-icon iconPositionEnd>keyboard_arrow_down</mat-icon>
+ </button>
+ <mat-menu #menu2="matMenu">
+ <mat-list role="list" *ngFor="let revision of revisionsList">
+ <mat-list-item
+ (click)="onChangeVersion(revision)"
+ style="cursor: pointer"
+ [ngClass]="{
+ selected: revision.version === selectedDefaultRevision.version
+ }"
+ >
+ <span style="font-size: 14px; line-height: 24px; font-weight: 400"
+ >Version - {{ revision.version }}</span
+ >
+ </mat-list-item>
+ </mat-list>
+ </mat-menu>
+</div>
--
GitLab