removing teams dependency on api service and switching to openapi imp…

…lementation

apps/agora/api/src/api.ts

@@ -21,7 +21,7 @@ const router = express.Router();
 mongoose.connection.once('open', async () => {
   router.get('/dataversion', dataVersionRoute);
   router.get('/teams', teamsRoute);
-  router.get('/team-members/:name/image', teamMemberImageRoute);
+  router.get('/teamMembers/:name/image', teamMemberImageRoute);
 });
 
 export default router;

libs/agora/api-client-angular/src/lib/api/teamMember.service.ts

@@ -117,7 +117,7 @@ export class TeamMemberService {
     observe?: 'body',
     reportProgress?: boolean,
     options?: {
-      httpHeaderAccept?: 'image/jpeg' | 'application/problem+json';
+      httpHeaderAccept?: 'image/jpg' | 'image/jpeg' | 'image/png' | 'application/problem+json';
       context?: HttpContext;
     },
   ): Observable<Blob>;
@@ -126,7 +126,7 @@ export class TeamMemberService {
     observe?: 'response',
     reportProgress?: boolean,
     options?: {
-      httpHeaderAccept?: 'image/jpeg' | 'application/problem+json';
+      httpHeaderAccept?: 'image/jpg' | 'image/jpeg' | 'image/png' | 'application/problem+json';
       context?: HttpContext;
     },
   ): Observable<HttpResponse<Blob>>;
@@ -135,7 +135,7 @@ export class TeamMemberService {
     observe?: 'events',
     reportProgress?: boolean,
     options?: {
-      httpHeaderAccept?: 'image/jpeg' | 'application/problem+json';
+      httpHeaderAccept?: 'image/jpg' | 'image/jpeg' | 'image/png' | 'application/problem+json';
       context?: HttpContext;
     },
   ): Observable<HttpEvent<Blob>>;
@@ -144,7 +144,7 @@ export class TeamMemberService {
     observe: any = 'body',
     reportProgress: boolean = false,
     options?: {
-      httpHeaderAccept?: 'image/jpeg' | 'application/problem+json';
+      httpHeaderAccept?: 'image/jpg' | 'image/jpeg' | 'image/png' | 'application/problem+json';
       context?: HttpContext;
     },
   ): Observable<any> {
@@ -159,7 +159,12 @@ export class TeamMemberService {
     let localVarHttpHeaderAcceptSelected: string | undefined = options && options.httpHeaderAccept;
     if (localVarHttpHeaderAcceptSelected === undefined) {
       // to determine the Accept header
-      const httpHeaderAccepts: string[] = ['image/jpeg', 'application/problem+json'];
+      const httpHeaderAccepts: string[] = [
+        'image/jpg',
+        'image/jpeg',
+        'image/png',
+        'application/problem+json',
+      ];
       localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
     }
     if (localVarHttpHeaderAcceptSelected !== undefined) {

libs/agora/api-description/build/openapi.yaml

@@ -72,12 +72,17 @@ paths:
             type: string
       responses:
         '200':
+          description: Success
           content:
+            image/jpg:
+              schema:
+                $ref: '#/components/schemas/TeamImage'
             image/jpeg:
               schema:
-                type: string
-                format: binary
-          description: Success
+                $ref: '#/components/schemas/TeamImage'
+            image/png:
+              schema:
+                $ref: '#/components/schemas/TeamImage'
         '400':
           $ref: '#/components/responses/BadRequest'
         '500':
@@ -163,6 +168,9 @@ components:
           type: array
           items:
             $ref: '#/components/schemas/Team'
+    TeamImage:
+      type: string
+      format: binary
   responses:
     BadRequest:
       description: Invalid request

libs/agora/api-description/src/components/schemas/TeamImage.yaml

@@ -0,0 +1,2 @@
+type: string
+format: binary

libs/agora/api-description/src/paths/teamMembers/@{name}/image.yaml

@@ -12,12 +12,17 @@ get:
         type: string
   responses:
     '200':
+      description: Success
       content:
+        image/jpg:
+          schema:
+            $ref: ../../../components/schemas/TeamImage.yaml
         image/jpeg:
           schema:
-            type: string
-            format: binary
-      description: Success
+            $ref: ../../../components/schemas/TeamImage.yaml
+        image/png:
+          schema:
+            $ref: ../../../components/schemas/TeamImage.yaml
     '400':
       $ref: ../../../components/responses/BadRequest.yaml
     '500':

libs/agora/services/src/index.ts

@@ -1,4 +1,3 @@
-export * from './lib/api.service';
 export * from './lib/error.service';
 export * from './lib/helper.service';
 export * from './lib/rollbar.service';

libs/agora/teams/src/lib/team-member-list/team-member-list.component.ts

@@ -1,17 +1,19 @@
 import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
-import { TeamService } from '../../services';
-import { Team, TeamMember } from '@sagebionetworks/agora/api-client-angular';
+import { Component, inject, Input } from '@angular/core';
+import { Team, TeamMember, TeamMemberService } from '@sagebionetworks/agora/api-client-angular';
+import { map, Observable } from 'rxjs';
 
 @Component({
   selector: 'agora-team-member-list',
   standalone: true,
   imports: [CommonModule],
   templateUrl: './team-member-list.component.html',
   styleUrls: ['./team-member-list.component.scss'],
-  providers: [TeamService],
+  providers: [TeamMemberService],
 })
 export class TeamMemberListComponent {
+  teamMemberService = inject(TeamMemberService);
+
   _team: Team = {} as Team;
   get team(): Team {
     return this._team;
@@ -22,8 +24,6 @@ export class TeamMemberListComponent {
 
   images: { [key: string]: string } = {};
 
-  constructor(private teamService: TeamService) {}
-
   init(team: Team) {
     if (!team.members) {
       return;
@@ -32,7 +32,8 @@ export class TeamMemberListComponent {
     this.images = {};
 
     team.members.forEach((member: TeamMember) => {
-      this.teamService.getTeamMemberImageUrl(member.name).subscribe((url: string | undefined) => {
+      const name = member.name.toLowerCase().replace(/[- ]/g, '-');
+      this.getTeamMemberImageUrl(name).subscribe((url) => {
         if (!url) {
           return;
         }
@@ -44,6 +45,21 @@ export class TeamMemberListComponent {
     this._team = team;
   }
 
+  getTeamMemberImageUrl(name: string): Observable<string | undefined> {
+    return this.teamMemberService.getTeamMemberImage(name).pipe(
+      map((buffer) => {
+        if (!buffer || buffer.size <= 0) {
+          return;
+        }
+        return URL.createObjectURL(
+          new Blob([buffer], {
+            type: 'image/jpg, image/png, image/jpeg',
+          }),
+        );
+      }),
+    );
+  }
+
   sort(members: TeamMember[]) {
     members.sort((a, b) => {
       if (a.isPrimaryInvestigator === b.isPrimaryInvestigator) {

libs/agora/teams/src/lib/teams/teams.component.ts

@@ -1,7 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
-import { Team, TeamList } from '@sagebionetworks/agora/api-client-angular';
-import { TeamService } from '../../services';
+import { Team, TeamList, TeamService } from '@sagebionetworks/agora/api-client-angular';
 import { HelperService } from '@sagebionetworks/agora/services';
 import { TeamListComponent } from '../team-list/team-list.component';
 import { catchError, finalize, map, Observable, of } from 'rxjs';
@@ -29,7 +28,7 @@ export class TeamsComponent implements OnInit {
   loadTeams() {
     this.helperService.setLoading(true);
 
-    this.teams$ = this.teamService.getTeams().pipe(
+    this.teams$ = this.teamService.listTeams().pipe(
       map((res: TeamList) => res.items || []),
       catchError((error: Error) => {
         console.error('Error loading teams:', error.message);