diff --git a/src/app/shared/components/model-management/model-management.component.html b/src/app/shared/components/model-management/model-management.component.html
index 73fa285fc6338f6623422fb53ad8baaa0359e579..caf10af8337522c9f74806f8f3ad752348380a71 100644
--- a/src/app/shared/components/model-management/model-management.component.html
+++ b/src/app/shared/components/model-management/model-management.component.html
@@ -1,101 +1,195 @@
-<mat-sidenav-container>
- <mat-sidenav mode="side" opened>
- <div class="workflow-left-header workflow-header">MANAGEMENT OPTIONS</div>
+<div
+ style="display: flex; flex-direction: column"
+ *ngIf="solution$ | async as data"
+>
+ <div style="display: flex; flex-direction: column; padding: 20px">
<div
style="
display: flex;
- flex-direction: column !important;
- justify-content: center !important;
- margin-left: 16px;
+ flex-direction: row;
+ align-items: center;
+ justify-items: center;
+ gap: 8px;
"
>
- <div>
- <span class="tab-box" style="font-size: 14px">On - Boarding</span>
- </div>
- <div>
- <span class="version-on-boarded" *ngIf="selectedRevision?.onBoarded"
- >Completed on
- {{ selectedRevision.onBoarded | date: "MM/dd/yyyy, h:mm:ss a" }}</span
- >
+ <span class="md-headline5">Manage {{ data.name }}</span
+ >|
+
+ <gp-version-dropdown
+ [selectedDefaultRevision]="(selectedRevision$ | async)!"
+ [revisionsList]="(revisions$ | async)!"
+ (revisionChange)="onChangeVersion($event)"
+ ></gp-version-dropdown>
+ |
+ <div
+ style="
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-items: center;
+ "
+ *ngIf="sharedWith$ | async as sharedWithData"
+ >
+ <span>Author and Publisher - </span>
+ <img
+ style="width: 27px; height: 27px"
+ src="../../../../assets/images/user-profile-black.png"
+ />
+ <div style="display: flex; flex-direction: row">
+ <button
+ mat-icon-button
+ [matMenuTriggerFor]="menu"
+ aria-label="Example icon-button with a menu"
+ >
+ <mat-icon>more_horiz</mat-icon>
+ </button>
+ <mat-menu #menu="matMenu" xPosition="after">
+ <mat-list role="list" *ngFor="let item of sharedWithData">
+ <mat-list-item role="listitem" style="font-size: 14px">
+ <div
+ style="
+ display: flex;
+ align-items: center;
+ justify-items: center;
+ gap: 4px;
+ "
+ >
+ <img
+ style="width: 27px; height: 27px; display: inline-block"
+ src="../../../../assets/images/user-profile-black.png"
+ />
+ <span [title]="[item.firstName, item.lastName].join('')"
+ >{{
+ [item.firstName, item.lastName].join(" ") | truncate: 13
+ }}
+ </span>
+ </div>
+ </mat-list-item>
+ </mat-list>
+ </mat-menu>
+ </div>
</div>
</div>
- <nav mat-tab-nav-bar class="margin: 20px 0 20px 0;" [tabPanel]="tabPanel">
- <a
- mat-tab-link
- routerLink="shareWithTeam"
- routerLinkActive="is-active"
- style="padding-top: 2px; padding-bottom: 8px"
+
+ <div>
+ <gp-breadcrumb-navigation
+ [solution]="data"
+ [firstNavigationLabel]="'Home'"
+ [secondNavigationLabel]="'Manage my model'"
+ (firstNavigationClicked)="onHomeClick()"
+ (secondNavigationClicked)="onManageMyModelClick()"
+ ></gp-breadcrumb-navigation>
+ </div>
+ </div>
+
+ <mat-sidenav-container>
+ <mat-sidenav mode="side" opened>
+ <div class="workflow-left-header workflow-header">MANAGEMENT OPTIONS</div>
+ <div
+ *ngIf="selectedRevision$ | async as selectedRevision"
+ style="
+ display: flex;
+ flex-direction: column !important;
+ justify-content: center !important;
+ margin-left: 16px;
+ "
>
- <mat-icon fontIcon="share"></mat-icon>
- <div
- style="
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- gap: 2px;
- margin-left: 14px;
- "
+ <div>
+ <span class="tab-box" style="font-size: 14px">On - Boarding</span>
+ </div>
+ <div>
+ <span class="version-on-boarded"
+ >Completed on
+ {{
+ selectedRevision.onBoarded | date: "MM/dd/yyyy, h:mm:ss a"
+ }}</span
+ >
+ </div>
+ </div>
+ <nav mat-tab-nav-bar class="margin: 20px 0 20px 0;" [tabPanel]="tabPanel">
+ <a
+ mat-tab-link
+ routerLink="shareWithTeam"
+ routerLinkActive="is-active"
+ style="padding-top: 2px; padding-bottom: 8px"
>
- <span class="tab-box" style="font-size: 14px"> Share with team</span>
- <span
+ <mat-icon fontIcon="share"></mat-icon>
+ <div
style="
- margin: 0;
- padding: 0;
- font-size: 12px;
- line-height: 16px;
- font-weight: 400;
- letter-spacing: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 2px;
+ margin-left: 14px;
"
- >Shared with {{ sharedWith.length }} co-workers</span
>
- </div>
- </a>
- <a mat-tab-link routerLink="publisherAuthors" routerLinkActive="is-active"
- ><span
- class="managelefticon tabs-left authorsimg"
- [ngClass]="
- isActive(
- '/dashboard/manageMyModel/' +
- solutionId +
- 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="publishModel" routerLinkActive="is-active"
- ><span
- class="managelefticon tabs-left companyimg"
- [ngClass]="
- isActive(
- '/dashboard/manageMyModel/' +
- solutionId +
- 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="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
- >
- </nav>
- <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
- </mat-sidenav>
- <mat-sidenav-content> <router-outlet></router-outlet></mat-sidenav-content
-></mat-sidenav-container>
+ <span class="tab-box" style="font-size: 14px">
+ Share with team</span
+ >
+ <span
+ *ngIf="sharedWith$ | async as sharedWithData"
+ style="
+ margin: 0;
+ padding: 0;
+ font-size: 12px;
+ line-height: 16px;
+ font-weight: 400;
+ letter-spacing: 0;
+ "
+ >Shared with {{ sharedWithData.length }} co-workers</span
+ >
+ </div>
+ </a>
+ <a
+ mat-tab-link
+ routerLink="publisherAuthors"
+ routerLinkActive="is-active"
+ ><span
+ class="managelefticon tabs-left authorsimg"
+ [ngClass]="
+ isActive(
+ '/dashboard/manageMyModel/' +
+ solutionId +
+ 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="publishModel" routerLinkActive="is-active"
+ ><span
+ class="managelefticon tabs-left companyimg"
+ [ngClass]="
+ isActive(
+ '/dashboard/manageMyModel/' +
+ solutionId +
+ 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="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
+ >
+ </nav>
+ <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
+ </mat-sidenav>
+ <mat-sidenav-content> <router-outlet></router-outlet></mat-sidenav-content
+ ></mat-sidenav-container>
+</div>
diff --git a/src/app/shared/components/model-management/model-management.component.scss b/src/app/shared/components/model-management/model-management.component.scss
index c59f79ca2f9aed2b1482df0fa66a62a310a3ff33..688aaaf4b5648fe4f3e631c33c503d5074241a51 100644
--- a/src/app/shared/components/model-management/model-management.component.scss
+++ b/src/app/shared/components/model-management/model-management.component.scss
@@ -148,3 +148,21 @@ mat-sidenav-content {
color: #681d9e;
font-weight: 700 !important;
}
+
+::ng-deep.mat-mdc-menu-panel {
+ width: 160px;
+}
+
+.mat-mdc-menu-content {
+ padding: 0px !important;
+}
+
+.mdc-list {
+ padding: 0px !important;
+}
+
+.md-headline5 {
+ font-size: 20px;
+ font-weight: 600;
+ color: #671c9d;
+}
diff --git a/src/app/shared/components/model-management/model-management.component.ts b/src/app/shared/components/model-management/model-management.component.ts
index b18e853aed1d2b91ab5c14c83a176025e185e694..156107b41c190618c397704c12e88454c7878421 100644
--- a/src/app/shared/components/model-management/model-management.component.ts
+++ b/src/app/shared/components/model-management/model-management.component.ts
@@ -10,10 +10,24 @@ import {
Revision,
UserDetails,
} from '../../models';
-import { Subscription } from 'rxjs';
+import {
+ BehaviorSubject,
+ Observable,
+ Subscription,
+ map,
+ of,
+ switchMap,
+ tap,
+} from 'rxjs';
import { SharedDataService } from 'src/app/core/services/shared-data/shared-data.service';
import { PublicSolutionsService } from 'src/app/core/services/public-solutions.service';
import { PrivateCatalogsService } from 'src/app/core/services/private-catalogs.service';
+import { BreadcrumbNavigationComponent } from '../breadcrumb-navigation/breadcrumb-navigation.component';
+import { VersionDropdownComponent } from '../version-dropdown/version-dropdown.component';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatListModule } from '@angular/material/list';
+import { TruncatePipe } from '../../pipes/truncate.pipe';
@Component({
selector: 'gp-model-management',
@@ -24,6 +38,13 @@ import { PrivateCatalogsService } from 'src/app/core/services/private-catalogs.s
MatTabsModule,
MatIconModule,
RouterModule,
+ BreadcrumbNavigationComponent,
+ VersionDropdownComponent,
+ MatButtonModule,
+ MatMenuModule,
+ MatIconModule,
+ MatListModule,
+ TruncatePipe,
],
templateUrl: './model-management.component.html',
styleUrl: './model-management.component.scss',
@@ -34,6 +55,13 @@ export class ModelManagementComponent implements OnInit {
selectedRevision!: Revision;
selectedRevisionSubscription!: Subscription;
sharedWith: UserDetails[] = [];
+ solution!: PublicSolutionDetailsModel;
+ revisionsList!: Revision[];
+ solution$!: Observable<PublicSolutionDetailsModel>;
+ revisions$!: Observable<Revision[]>;
+ sharedWith$!: Observable<UserDetails[]>;
+ selectedRevision$: BehaviorSubject<Revision | null> =
+ new BehaviorSubject<Revision | null>(null);
constructor(
private router: Router,
@@ -43,12 +71,45 @@ export class ModelManagementComponent implements OnInit {
private privateCatalogsService: PrivateCatalogsService,
) {}
ngOnInit(): void {
- this.activatedRoute.params.subscribe((params) => {
- this.solutionId = params['solutionId'];
- this.revisionId = params['revisionId'];
- this.getShareWithTeam(this.solutionId);
- this.loadData(this.solutionId, this.revisionId);
- });
+ this.solution$ = this.activatedRoute.params.pipe(
+ switchMap((params) => {
+ this.solutionId = params['solutionId'];
+ this.revisionId = params['revisionId'];
+ this.sharedWith$ = this.privateCatalogsService.getShareWithTeam(
+ this.solutionId,
+ );
+ return this.publicSolutionsService.getSolutionDetails(
+ this.solutionId,
+ this.revisionId,
+ );
+ }),
+ tap((solution) => {
+ this.revisions$ = this.getRevisionsAsObservable(solution);
+ const initialRevision =
+ solution.revisions.find(
+ (rev) => rev.revisionId === this.revisionId,
+ ) || solution.revisions[0];
+ this.revisions$ = this.getRevisionsAsObservable(solution);
+ this.updateSelectedRevision(this.revisionId, solution);
+ this.setRevisionInService(solution.revisions[0]);
+ }),
+ );
+ }
+
+ private updateSelectedRevision(
+ revisionId: string,
+ solution: PublicSolutionDetailsModel,
+ ): void {
+ const revision = solution.revisions.find(
+ (rev) => rev.revisionId === revisionId,
+ );
+ if (revision) {
+ this.selectedRevision$.next({
+ revisionId: revision.revisionId,
+ version: revision.version,
+ onBoarded: revision.onboarded,
+ });
+ }
}
isActive(modelRoute: string): boolean {
@@ -59,6 +120,7 @@ export class ModelManagementComponent implements OnInit {
this.publicSolutionsService
.getSolutionDetails(solutionId, revisionId)
.subscribe((res) => {
+ console.log({ res });
const revisionsList = this.getRevisionsList(res);
this.selectedRevision = revisionsList[0];
this.setRevisionInService(this.selectedRevision);
@@ -75,14 +137,6 @@ export class ModelManagementComponent implements OnInit {
);
}
- setRevisionInService(revision: Revision): void {
- this.sharedDataService.selectedRevision = {
- version: revision.version,
- revisionId: revision.revisionId,
- onBoarded: revision.onBoarded,
- };
- }
-
getShareWithTeam(solutionId: string): void {
this.privateCatalogsService.getShareWithTeam(solutionId).subscribe({
next: (users) => {
@@ -93,4 +147,35 @@ export class ModelManagementComponent implements OnInit {
},
});
}
+ onHomeClick() {}
+
+ onManageMyModelClick() {}
+
+ private getRevisionsAsObservable(
+ solution: PublicSolutionDetailsModel,
+ ): Observable<Revision[]> {
+ return new Observable<Revision[]>((subscriber) => {
+ const revisions = solution.revisions.map((rev) => ({
+ version: rev.version,
+ revisionId: rev.revisionId,
+ onBoarded: rev.onboarded,
+ }));
+ subscriber.next(revisions);
+ subscriber.complete();
+ });
+ }
+
+ onChangeVersion(revision: Revision): void {
+ this.selectedRevision$.next(revision);
+ this.setRevisionInService(revision);
+ this.setVersionIdInService(revision.version);
+ }
+
+ setRevisionInService(revision: Revision): void {
+ this.sharedDataService.selectedRevision = revision;
+ }
+
+ setVersionIdInService(version: string): void {
+ this.sharedDataService.versionId = version;
+ }
}
diff --git a/src/app/shared/components/share-with-team-page/share-with-team-page.component.html b/src/app/shared/components/share-with-team-page/share-with-team-page.component.html
index 0c607ef1fab6d3ac77fcb8773aeb89198ebefa28..bc7eb39dd029f63b344816dccf126d3dc3c29381 100644
--- a/src/app/shared/components/share-with-team-page/share-with-team-page.component.html
+++ b/src/app/shared/components/share-with-team-page/share-with-team-page.component.html
@@ -56,35 +56,6 @@
</span>
</div>
</div>
-
- <!-- <div
- style="display: flex; flex-direction: row; justify-content: end"
- >
- <button matChipRemove [attr.aria-label]="'remove ' + sharedUser">
- <mat-icon>cancel</mat-icon>
- </button>
- </div>
- <div
- style="
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- "
- >
- <img
- style="width: 30px; height: 30px"
- src="../../../../assets/images/user-profile-black.png"
- />
- <span
- [title]="[sharedUser.firstName, sharedUser.lastName].join(' ')"
- >
- {{
- [sharedUser.firstName, sharedUser.lastName].join(" ")
- | truncate: 8
- }}
- </span>
- </div> -->
</mat-chip>
}
</mat-chip-set>
@@ -96,7 +67,7 @@
style="display: flex; flex-direction: row; gap: 4px"
class="manage-models"
>
- <span class="purple">Sharing "{{ solution.name }}" </span>
+ <span class="purple">Sharing "{{ solution?.name }}" </span>
|<span> Version - {{ selectedRevision.version }}</span>
|
<gp-solution-id [solutionId]="solutionId"></gp-solution-id>