#19: use custom drop down menu in model details component

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">

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);

src/app/shared/components/version-dropdown/version-dropdown.component.html

+<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>