feat(frontend): add summary org list under profile

frontend/src/app/modules/organizations/components/organization-list-summary/organization-list-summary.component.css

@@ -0,0 +1,10 @@
+.organization-list {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin: 10px;
+}
+
+.organization-list img{
+  width: 2.5rem;
+}

frontend/src/app/modules/organizations/components/organization-list-summary/organization-list-summary.component.html

@@ -0,0 +1,6 @@
+<div class="organization-list" *ngIf="(organizations | async) as organizationsList">
+  <ng-container *ngFor="let organization of organizationsList">
+    <img class="round-image clickable" [src]="organization.icon" (click)="goTo(organization.address)" />
+  </ng-container>
+  <p *ngIf="organizationsList.length === 0">No organization</p>
+</div>

frontend/src/app/modules/organizations/components/organization-list-summary/organization-list-summary.component.ts

@@ -0,0 +1,31 @@
+import { Observable, of } from 'rxjs';
+
+import { Component, Input, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Organization } from '@shared/interfaces';
+import { LoadingService } from '@shared/services/loading.service';
+
+@Component({
+  selector: 'app-organization-list-summary',
+  templateUrl: './organization-list-summary.component.html',
+  styleUrls: ['./organization-list-summary.component.css'],
+})
+export class OrganizationListSummaryComponent implements OnInit {
+  @Input() organizationsInput$!: Observable<Organization[]>;
+  organizations!: Observable<Organization[]>;
+
+  constructor(private router: Router, private loadingService: LoadingService) {}
+  ngOnInit(): void {
+    this.organizations = this.organizationsInput$ !== undefined ? this.organizationsInput$ : of([]);
+    this.loadingService.waitForObservables([this.organizations]);
+  }
+
+  getOrganizationMembers(organization: Organization): number {
+    return organization.members.length + organization.managers.length;
+  }
+
+  goTo(address: string): void {
+    this.router.navigate([`/organizations/${address}`]);
+  }
+}

frontend/src/app/modules/organizations/organizations.module.ts

@@ -6,13 +6,14 @@ import { SharedModule } from '@shared/shared.module';
 
 import { ProjectsModule } from '@projects/projects.module';
 
+import { OrganizationListSummaryComponent } from './components/organization-list-summary/organization-list-summary.component';
 import { OrganizationListComponent } from './components/organization-list/organization-list.component';
 import { ShowMembersComponent } from './components/show-members/show-members.component';
 import { OrganizationsRoutingModule, routedComponents } from './organizations-routing.module';
 
 @NgModule({
-  declarations: [routedComponents, ShowMembersComponent],
-  exports: [OrganizationListComponent],
+  declarations: [routedComponents, ShowMembersComponent, OrganizationListSummaryComponent],
+  exports: [OrganizationListComponent, OrganizationListSummaryComponent],
   imports: [CommonModule, SharedModule, OrganizationsRoutingModule, ProjectsModule, FormsModule, ReactiveFormsModule],
 })
 export class OrganizationsModule {}

frontend/src/app/modules/profiles/components/profile-body/profile-body.component.html

@@ -61,20 +61,13 @@ <h1 class="fw-bold">{{ profileData.firstName }} {{ profileData.surname }}</h1>
             <span class="mb-0">Energy</span>
           </ng-container>
         </div>
+        <h4>Organizations</h4>
+        <app-organization-list-summary [organizationsInput$]="organizations$"></app-organization-list-summary>
       </div>
     </div>
     <div class="cv">
       <app-skills [profileId]="id"></app-skills>
       <app-project-list [projects$]="projects$" [showOrganization]="true"></app-project-list>
-      <ng-container *ngIf="projects$ | async">
-        <div class="mt-4 bg-white p-4">
-          <h2 class="mb-3">Organizations</h2>
-          <h6>as manager</h6>
-          <app-organization-list [organizationsInput$]="organizations.manager$"></app-organization-list>
-          <h6>as member</h6>
-          <app-organization-list [organizationsInput$]="organizations.member$"></app-organization-list>
-        </div>
-      </ng-container>
     </div>
   </div>
 </div>

frontend/src/app/modules/profiles/components/profile-body/profile-body.component.ts

@@ -1,4 +1,4 @@
-import { Observable, catchError, map, of, switchMap } from 'rxjs';
+import { Observable, catchError, concat, distinct, map, of, switchMap, tap } from 'rxjs';
 
 import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
@@ -27,10 +27,7 @@ import { DataTypes } from '@vaimee/my3sec-contracts/dist/contracts/My3SecHub';
 export class ProfileBodyComponent implements OnInit {
   public profileData$!: Observable<Profile>;
   public projects$!: Observable<Project[]>;
-  public organizations: { member$: Observable<Organization[]>; manager$: Observable<Organization[]> } = {
-    member$: of([]),
-    manager$: of([]),
-  };
+  public organizations$: Observable<Organization[]> = of([]);
 
   public userWalletAddress!: string;
   public id!: number;
@@ -101,20 +98,17 @@ export class ProfileBodyComponent implements OnInit {
       switchMap(profile => this.organizationService.getProjectsOfProfile(parseInt(profile.id)))
     );
 
-    this.organizations.member$ = this.profileData$.pipe(
-      switchMap(profile => this.organizationService.getOrganizationsOfProfile(parseInt(profile.id)))
+    this.organizations$ = this.profileData$.pipe(
+      switchMap(profile =>
+        concat(
+          this.organizationService.getOrganizationsOfProfile(parseInt(profile.id)),
+          this.organizationService.getOrganizationsManagerOfProfile(parseInt(profile.id))
+        )
+      ),
+      distinct()
     );
 
-    this.organizations.manager$ = this.profileData$.pipe(
-      switchMap(profile => this.organizationService.getOrganizationsManagerOfProfile(parseInt(profile.id)))
-    );
-
-    this.loadingService.waitForObservables([
-      this.profileData$,
-      this.organizations.manager$,
-      this.organizations.member$,
-      this.projects$,
-    ]);
+    this.loadingService.waitForObservables([this.profileData$, this.organizations$, this.projects$]);
   }
 
   loadDefaultProfile() {