feat(profile): logged in users can access the profile of other users

src/app/profile/profile-routing.module.ts

@@ -9,7 +9,16 @@ import { StructureEditionSummaryComponent } from './structure-edition-summary/st
 const routes: Routes = [
   {
     path: '',
-    component: ProfileComponent,
+    children: [
+      {
+        path: '',
+        component: ProfileComponent,
+      },
+      {
+        path: ':id',
+        component: ProfileComponent,
+      },
+    ],
   },
   {
     path: 'edit-structure/:id',

src/app/profile/profile.component.html

@@ -7,8 +7,17 @@
 >
   <section>
     <div fxLayout="row" fxLayoutAlign="start center" fxFill>
+      <app-svg-icon
+        *ngIf="isPublic"
+        (click)="goBack()"
+        [iconClass]="'backArrow'"
+        [type]="'ico'"
+        [icon]="'arrowBack'"
+        class="backArrow"
+      ></app-svg-icon>
       <h1>Profil</h1>
       <app-button
+        *ngIf="!isPublic"
         class="hide-on-mobile"
         [type]="'button'"
         [iconBtn]="'edit'"
@@ -18,6 +27,7 @@
         [routerLinkActive]="'active'"
       ></app-button>
       <app-button
+        *ngIf="!isPublic"
         class="hide-on-desktop"
         [type]="'button'"
         [iconBtn]="'edit'"
@@ -44,6 +54,7 @@
     </div>
     <div class="call-to-action" *ngIf="!userProfile.description" fxLayoutAlign="center center" fxFill>
       <app-button
+        *ngIf="!isPublic"
         [type]="'button'"
         [iconBtn]="'edit'"
         [text]="'Ajouter une description'"
@@ -59,6 +70,7 @@
     <div fxLayout="row" fxLayoutAlign="start center" fxFill>
       <h1>Structures</h1>
       <app-button
+        *ngIf="!isPublic"
         class="hide-on-mobile"
         [type]="'button'"
         [iconBtn]="'edit'"
@@ -82,10 +94,11 @@
           <div class="structureCard" *ngFor="let s of structures; let i = index">
             <div class="structureInfo" fxLayout="column" fxLayoutGap="14px">
               <div fxLayout="row" fxLayoutAlign="space-between start" fxLayoutGap="20px">
-                <a class="structureName" [routerLink]="['/profile']" [queryParams]="{ id: s.structure._id }">{{
+                <a class="structureName" [routerLink]="['./']" [queryParams]="{ id: s.structure._id }">{{
                   s.structure.structureName
                 }}</a>
                 <app-structure-options-modal
+                  *ngIf="!isPublic"
                   [structure]="s"
                   (closed)="ngOnInit()"
                   (closedWithRefresh)="ngOnInit()"
@@ -101,12 +114,12 @@
     </div>
   </section>
 
-  <section>
+  <section *ngIf="!isPublic">
     <div fxLayout="row" fxLayoutAlign="start center" fxFill>
       <h1>Ressources</h1>
     </div>
   </section>
-  <section>
+  <section *ngIf="!isPublic">
     <div fxLayout="row" fxLayoutAlign="start center" fxFill>
       <h1>Newsletter</h1>
     </div>

src/app/profile/profile.component.scss

@@ -33,6 +33,10 @@ section {
   .call-to-action {
     margin-top: 40px;
   }
+
+  .backArrow {
+    cursor: pointer;
+  }
 }
 
 .profile {

src/app/profile/profile.component.ts

+import { UserService } from './../services/user.service';
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 import { ButtonType } from '@gouvfr-anct/mediation-numerique/shared';
 import { StructureWithOwners } from '../models/structureWithOwners.model';
 import { User } from '../models/user.model';
 import { StructureService } from '../services/structure.service';
 import { ProfileService } from './services/profile.service';
 import { Utils } from '../utils/utils';
+import { catchError, map } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+import { Location } from '@angular/common';
 
 @Component({
   selector: 'app-profile',
   templateUrl: './profile.component.html',
-  styleUrls: ['./profile.component.scss'],
+  styleUrls: ['./profile.component.scss']
 })
 export class ProfileComponent implements OnInit {
   public userProfile: User;
   public structures: StructureWithOwners[] = [];
   public buttonTypeEnum = ButtonType;
+  public isPublic: boolean;
 
   constructor(
     private profileService: ProfileService,
     private structureService: StructureService,
+    private userService: UserService,
+    private route: ActivatedRoute,
     private router: Router,
+    private location: Location,
     public utils: Utils
   ) {}
 
   ngOnInit(): void {
-    this.profileService.getProfile().then((profile: User) => {
-      this.userProfile = profile;
-      this.structures = [];
-      profile.structuresLink.forEach((structureId) => {
-        this.structureService.getStructureWithOwners(structureId, null).subscribe((s) => {
-          this.structures.push(s);
+    this.route.params.subscribe((urlParams) => {
+      const userId = urlParams.id ? urlParams.id : '';
+      if (userId) {
+        this.isPublic = true;
+        this.userService
+          .getUser(userId)
+          .pipe(
+            map((res) => res),
+            catchError(() => {
+              this.router.navigate(['/home']);
+              return new Observable<User>();
+            })
+          )
+          .subscribe((user) => {
+            this.userProfile = user;
+            this.getStructuresFromProfile();
+          });
+      } else {
+        this.isPublic = false;
+        this.profileService.getProfile().then((profile: User) => {
+          this.userProfile = profile;
+          this.getStructuresFromProfile();
         });
+      }
+    });
+  }
+
+  private getStructuresFromProfile() {
+    this.structures = [];
+    this.userProfile.structuresLink.forEach((structureId) => {
+      this.structureService.getStructureWithOwners(structureId, null).subscribe((s) => {
+        this.structures.push(s);
       });
     });
   }
 
+  public goBack(): void {
+    this.location.back();
+  }
+
   public addStructure(): void {
     this.router.navigateByUrl('/form/structure');
   }

src/app/structure/components/structure-details-wrapper/structure-details-wrapper.component.html

@@ -39,11 +39,18 @@
     <h2>Membres</h2>
     <div fxLayout="column" fxLayoutGap="8px" fxLayoutAlign="baseline baseline">
       <div *ngFor="let member of structureAdmins" class="member-card">
-        <app-svg-icon class="avatar" [type]="'avatar'" [icon]="'defaultAvatar'" [iconClass]="'icon-40'"></app-svg-icon>
-        <div class="info-member">
-          <p class="member">{{ member.name | uppercase }} {{ member.surname | titlecase }}</p>
-          <p class="job" *ngIf="displayJobEmployer(member)">{{ displayJobEmployer(member) }}</p>
-        </div>
+        <a [routerLink]="'/profile/' + member._id">
+          <app-svg-icon
+            class="avatar"
+            [type]="'avatar'"
+            [icon]="'defaultAvatar'"
+            [iconClass]="'icon-40'"
+          ></app-svg-icon>
+          <div class="info-member">
+            <p class="member">{{ member.name | uppercase }} {{ member.surname | titlecase }}</p>
+            <p class="job" *ngIf="displayJobEmployer(member)">{{ displayJobEmployer(member) }}</p>
+          </div>
+        </a>
       </div>
     </div>
   </div>

src/app/structure/components/structure-details-wrapper/structure-details-wrapper.component.scss

@@ -33,6 +33,14 @@ h3 {
   display: flex;
   justify-content: center;
   align-items: center;
+  a {
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+  }
+  a:hover {
+    text-decoration: underline;
+  }
   .avatar {
     background-color: $grey-8;
     border-radius: 4px;