#19: Add the shared number of co-workers

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

@@ -20,15 +20,36 @@
       </div>
     </div>
     <nav mat-tab-nav-bar class="margin: 20px 0 20px 0;" [tabPanel]="tabPanel">
-      <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="shareWithTeam"
+        routerLinkActive="is-active"
+        style="padding-top: 2px; padding-bottom: 8px"
       >
+        <mat-icon fontIcon="share"></mat-icon>
+        <div
+          style="
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 2px;
+            margin-left: 14px;
+          "
+        >
+          <span class="tab-box" style="font-size: 14px"> Share with team</span>
+          <span
+            style="
+              margin: 0;
+              padding: 0;
+              font-size: 12px;
+              line-height: 16px;
+              font-weight: 400;
+              letter-spacing: 0;
+            "
+            >Shared with {{ sharedWith.length }} co-workers</span
+          >
+        </div>
+      </a>
       <a mat-tab-link routerLink="publisherAuthors" routerLinkActive="is-active"
         ><span
           class="managelefticon tabs-left authorsimg"

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

@@ -8,10 +8,12 @@ import {
   PublicSolutionDetailsModel,
   PublicSolutionDetailsRevisionModel,
   Revision,
+  UserDetails,
 } from '../../models';
 import { Subscription } 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';
 
 @Component({
   selector: 'gp-model-management',
@@ -31,17 +33,20 @@ export class ModelManagementComponent implements OnInit {
   revisionId!: string;
   selectedRevision!: Revision;
   selectedRevisionSubscription!: Subscription;
+  sharedWith: UserDetails[] = [];
 
   constructor(
     private router: Router,
     private activatedRoute: ActivatedRoute,
     private sharedDataService: SharedDataService,
     private publicSolutionsService: PublicSolutionsService,
+    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);
     });
   }
@@ -77,4 +82,15 @@ export class ModelManagementComponent implements OnInit {
       onBoarded: revision.onBoarded,
     };
   }
+
+  getShareWithTeam(solutionId: string): void {
+    this.privateCatalogsService.getShareWithTeam(solutionId).subscribe({
+      next: (users) => {
+        this.sharedWith = users;
+      },
+      error: (error) => {
+        console.error('Error fetching users:', error);
+      },
+    });
+  }
 }