Skip to content
Snippets Groups Projects
Commit 94fef191 authored by Kawtar Laariche's avatar Kawtar Laariche
Browse files

#19: enhance model management alignment

parent 58f614a6
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/app/shared/components/model-management/model-management.component.html
+ 183
− 89
View file @ 94fef191
<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 - &nbsp; </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>
src/app/shared/components/model-management/model-management.component.scss
+ 18
− 0
View file @ 94fef191
......@@ -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;
}
src/app/shared/components/model-management/model-management.component.ts
+ 100
− 15
View file @ 94fef191
......@@ -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;
}
}
src/app/shared/components/share-with-team-page/share-with-team-page.component.html
+ 1
− 30
View file @ 94fef191
......@@ -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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Copyright © Eclipse Foundation, Inc. All Rights Reserved.     Privacy Policy | Terms of Use | Copyright Agent