#19: add routing to the sidebar tabs

src/app/shared/components/delete-model-page/delete-model-page.component.html

-<p>delete-model-page works!</p>
+<div class="workflow-right-header workflow-header">Delete Model</div>

src/app/shared/components/manage-publisher-auhtors-page/manage-publisher-auhtors-page.component.html

-<p>manage-publisher-auhtors-page works!</p>

src/app/shared/components/manage-publisher-authors-page/manage-publisher-authors-page.component.html

+<div class="workflow-right-header workflow-header">Manage Authors</div>

src/app/shared/components/manage-publisher-auhtors-page/manage-publisher-auhtors-page.component.spec.ts → src/app/shared/components/manage-publisher-authors-page/manage-publisher-authors-page.component.spec.ts

 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ManagePublisherAuhtorsPageComponent } from './manage-publisher-auhtors-page.component';
+import { ManagePublisherAuthorsPageComponent } from './manage-publisher-authors-page.component';
 
-describe('ManagePublisherAuhtorsPageComponent', () => {
-  let component: ManagePublisherAuhtorsPageComponent;
-  let fixture: ComponentFixture<ManagePublisherAuhtorsPageComponent>;
+describe('ManagePublisherAuthorsPageComponent', () => {
+  let component: ManagePublisherAuthorsPageComponent;
+  let fixture: ComponentFixture<ManagePublisherAuthorsPageComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ManagePublisherAuhtorsPageComponent]
+      imports: [ManagePublisherAuthorsPageComponent]
     })
     .compileComponents();
     
-    fixture = TestBed.createComponent(ManagePublisherAuhtorsPageComponent);
+    fixture = TestBed.createComponent(ManagePublisherAuthorsPageComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/shared/components/manage-publisher-auhtors-page/manage-publisher-auhtors-page.component.ts → src/app/shared/components/manage-publisher-authors-page/manage-publisher-authors-page.component.ts

@@ -2,12 +2,12 @@ import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 @Component({
-  selector: 'gp-manage-publisher-auhtors-page',
+  selector: 'gp-manage-publisher-authors-page',
   standalone: true,
   imports: [CommonModule],
-  templateUrl: './manage-publisher-auhtors-page.component.html',
-  styleUrl: './manage-publisher-auhtors-page.component.scss'
+  templateUrl: './manage-publisher-authors-page.component.html',
+  styleUrl: './manage-publisher-authors-page.component.scss'
 })
-export class ManagePublisherAuhtorsPageComponent {
+export class ManagePublisherAuthorsPageComponent {
 
 }

src/app/shared/components/model-management/model-management.component.html

 <mat-sidenav-container>
   <mat-sidenav mode="side" opened>
+    <div class="workflow-left-header workflow-header">MANAGEMENT OPTIONS</div>
     <nav mat-tab-nav-bar class="margin: 20px 0 20px 0;" [tabPanel]="tabPanel">
-      <a mat-tab-link routerLink="modelDescription" routerLinkActive="is-active"
-        ><mat-icon fontIcon="description"></mat-icon
-        ><span class="tab-box">Description</span></a
+      <a mat-tab-link routerLink="onBoarding" routerLinkActive="is-active">
+        <span
+          class="launcherimg managelefticon tabs-left"
+          [ngClass]="
+            isActive(
+              '/dashboard/manageMyModel/solutionId/' +
+                solutionId +
+                '/revisionId/' +
+                revisionId +
+                '/onBoarding'
+            )
+              ? 'launcherimg-active'
+              : 'launcherimg-inactive'
+          "
+        ></span
+        ><span class="tab-box" style="font-size: 14px">On - Boarding</span></a
       >
-      <a mat-tab-link routerLink="licenseProfile" routerLinkActive="is-active">
-        <span class="tab_license"></span
-        ><span class="tab-box"> License profile</span></a
+      <a mat-tab-link routerLink="shareWithTeam" routerLinkActive="is-active">
+        <mat-icon fontIcon="share"></mat-icon
+        ><span
+          class="tab-box"
+          style="font-size: 14px; margin-left: 15px !important"
+        >
+          Share with team</span
+        ></a
       >
-      <a mat-tab-link routerLink="modelSignature" routerLinkActive="is-active"
-        ><mat-icon fontIcon="sync_alt"></mat-icon
-        ><span class="tab-box">Signature</span></a
+      <a mat-tab-link routerLink="publisherAuthors" routerLinkActive="is-active"
+        ><span
+          class="managelefticon tabs-left authorsimg"
+          [ngClass]="
+            isActive(
+              '/dashboard/manageMyModel/solutionId/' +
+                solutionId +
+                '/revisionId/' +
+                revisionId +
+                '/publisherAuthors'
+            )
+              ? 'authorsimg-active'
+              : 'authorsimg-inactive'
+          "
+        ></span
+        ><span class="tab-box" style="font-size: 14px"
+          >Manage Publisher/Authors</span
+        ></a
       >
-      <a mat-tab-link routerLink="modelDocuments" routerLinkActive="is-active"
-        ><mat-icon fontIcon="content_copy"></mat-icon
-        ><span class="tab-box">Documents</span></a
+      <a mat-tab-link routerLink="publishModel" routerLinkActive="is-active"
+        ><span
+          class="managelefticon tabs-left companyimg"
+          [ngClass]="
+            isActive(
+              '/dashboard/manageMyModel/solutionId/' +
+                solutionId +
+                '/revisionId/' +
+                revisionId +
+                '/publishModel'
+            )
+              ? 'companyimg-active'
+              : 'companyimg-inactive'
+          "
+        ></span
+        ><span class="tab-box" style="font-size: 14px"
+          >Publish to Marketplace</span
+        ></a
       >
-      <a mat-tab-link routerLink="modelArtifacts" routerLinkActive="is-active"
-        ><mat-icon fontIcon="history"></mat-icon
-        ><span class="tab-box">Model artifacts</span></a
+      <a mat-tab-link routerLink="viewDownloads" routerLinkActive="is-active"
+        ><mat-icon fontIcon="file_download"></mat-icon
+        ><span
+          class="tab-box"
+          style="font-size: 14px; margin-left: 15px !important"
+          >View downloads</span
+        ></a
+      >
+      <a mat-tab-link routerLink="replyToComments" routerLinkActive="is-active"
+        ><mat-icon fontIcon="reply"></mat-icon
+        ><span
+          class="tab-box"
+          style="font-size: 14px; margin-left: 15px !important"
+          >Reply to Comments</span
+        ></a
+      >
+      <a mat-tab-link routerLink="deleteModel" routerLinkActive="is-active"
+        ><mat-icon fontIcon="delete"></mat-icon
+        ><span
+          class="tab-box"
+          style="font-size: 14px; margin-left: 15px !important"
+          >Delete Model</span
+        ></a
       >
-      <a mat-tab-link routerLink="modelAuthor" routerLinkActive="is-active">
-        <span class="tab-icon"> </span>
-        <span class="tab-box" style="font-size: 14.5px">
-          <span>Author</span>
-          <span>/</span>
-          <span>Publisher details</span>
-        </span>
-      </a>
     </nav>
     <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
   </mat-sidenav>
-  <mat-sidenav-content> </mat-sidenav-content
+  <mat-sidenav-content> <router-outlet></router-outlet></mat-sidenav-content
 ></mat-sidenav-container>

src/app/shared/components/model-management/model-management.component.scss

@@ -12,11 +12,116 @@ mat-sidenav {
   width: 250px !important;
   overflow: hidden !important;
 }
-.mat-drawer-container {
-  position: absolute;
-}
 
+mat-sidenav-content {
+  height: 87vh;
+  overflow: auto;
+}
 ::ng-deep .mat-drawer-inner-container {
   overflow: hidden !important;
   padding: 20px 0 20px 0;
 }
+
+::ng-deep .mat-mdc-tab-links {
+  flex-direction: column !important;
+}
+
+::ng-deep .mdc-tab {
+  display: flex !important;
+  justify-content: flex-start !important;
+  align-items: flex-start !important;
+  padding-left: 8px !important;
+  padding-right: 0px !important;
+  width: 100% !important;
+}
+
+.is-active {
+  pointer-events: none !important;
+  border-right: 5px solid #671c9d !important;
+  color: #671c9d !important;
+  font-weight: 700 !important;
+  background: #fff;
+  box-shadow: 1px 0px 14px 4px rgba(0, 0, 0, 0.1);
+  position: relative;
+  span {
+    color: #671c9d !important;
+  }
+  mat-icon {
+    color: #671c9d !important;
+  }
+}
+
+::ng-deep .workflow-header {
+  background-color: rgb(246, 243, 250);
+  font-weight: bold;
+}
+
+.workflow-left-header {
+  padding: 15px;
+  background-color: rgb(232, 229, 236);
+  color: #681d9e;
+  font-size: 14px;
+}
+
+::ng-deep .workflow-right-header {
+  width: 100% !important;
+  padding: 15px 20px;
+  color: #424043;
+}
+
+.authorsimg-inactive {
+  background-image: url("../../../../assets/images/ico_manage_authors_inactive.png");
+  background-repeat: no-repeat;
+}
+
+.authorsimg-active {
+  background-image: url("../../../../assets/images/ico_manage_authors_active.png");
+  background-repeat: no-repeat;
+}
+
+.authorsimg {
+  width: 18px;
+  height: 18px;
+}
+
+.companyimg-active {
+  background-image: url("../../../../assets/images/Publish2.png");
+  background-repeat: no-repeat;
+}
+
+.companyimg-inactive {
+  background-image: url("../../../../assets/images/Publish1.png");
+  background-repeat: no-repeat;
+}
+
+.companyimg {
+  width: 20px;
+  height: 18px;
+}
+
+.launcherimg-inactive {
+  background-image: url("../../../../assets/images/on_boarding.png");
+  background-repeat: no-repeat;
+}
+
+.launcherimg-active {
+  background-image: url("../../../../assets/images/on_boarding_selected.png");
+  background-repeat: no-repeat;
+}
+
+.launcherimg {
+  background-size: 23px;
+  width: 100%;
+  height: 20px;
+  display: inline-block;
+}
+
+.tabs-left {
+  color: #bbb;
+  font-size: 23px;
+}
+
+.managelefticon {
+  width: 35px;
+  line-height: 48px;
+}

src/app/shared/components/model-management/model-management.component.ts

-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatIconModule } from '@angular/material/icon';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 
 @Component({
   selector: 'gp-model-management',
   standalone: true,
-  imports: [CommonModule, MatSidenavModule, MatTabsModule, MatIconModule],
+  imports: [
+    CommonModule,
+    MatSidenavModule,
+    MatTabsModule,
+    MatIconModule,
+    RouterModule,
+  ],
   templateUrl: './model-management.component.html',
   styleUrl: './model-management.component.scss',
 })
-export class ModelManagementComponent {}
+export class ModelManagementComponent implements OnInit {
+  solutionId!: string;
+  revisionId!: string;
+
+  constructor(
+    private router: Router,
+    private activatedRoute: ActivatedRoute,
+  ) {}
+  ngOnInit(): void {
+    this.activatedRoute.params.subscribe((params) => {
+      this.solutionId = params['solutionId'];
+      this.revisionId = params['revisionId'];
+    });
+  }
+
+  isActive(modelRoute: string): boolean {
+    /* console.log('solutionId', this.solutionId);
+    console.log('revisionId', this.revisionId);*/
+    console.log(
+      'isActive',
+      this.router.routerState.snapshot.url === modelRoute,
+    );
+    console.log('routerState', this.router.routerState.snapshot.url);
+    console.log('modelRoute', modelRoute);
+    return this.router.routerState.snapshot.url === modelRoute;
+  }
+}

src/app/shared/components/on-boarding-page/on-boarding-page.component.html

-<p>on-boarding-page works!</p>
+<div class="workflow-right-header workflow-header">On-boarding</div>

src/app/shared/components/publish-to-marketplace-page/publish-to-marketplace-page.component.html

+<div class="workflow-right-header workflow-header">Publish to Marketplace</div>

src/app/shared/components/publish-to-marketplace-page/publish-to-marketplace-page.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PublishToMarketplacePageComponent } from './publish-to-marketplace-page.component';
+
+describe('PublishToMarketplacePageComponent', () => {
+  let component: PublishToMarketplacePageComponent;
+  let fixture: ComponentFixture<PublishToMarketplacePageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PublishToMarketplacePageComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(PublishToMarketplacePageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/publish-to-marketplace-page/publish-to-marketplace-page.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'gp-publish-to-marketplace-page',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './publish-to-marketplace-page.component.html',
+  styleUrl: './publish-to-marketplace-page.component.scss'
+})
+export class PublishToMarketplacePageComponent {
+
+}

src/app/shared/components/reply-to-comments-page/reply-to-comments-page.component.html

-<p>reply-to-comments-page works!</p>
+<div class="workflow-right-header workflow-header">Reply to Comments</div>

src/app/shared/components/share-with-team-page/share-with-team-page.component.html

-<p>share-with-team-page works!</p>
+<div class="workflow-right-header workflow-header">Share With Team</div>

src/app/shared/components/view-downloads-page/view-downloads-page.component.html

-<p>view-downloads-page works!</p>
+<div class="workflow-right-header workflow-header">View Downloads</div>