Merge branch 'ui/fix/account' into 'dev'

chore(ui): account details

See merge request !702

src/app/admin/components/manage-jobs/manage-jobs.component.ts

@@ -79,7 +79,7 @@ export class ManageJobsComponent implements OnInit {
         onCellValueChanged: this.onChange.bind(this),
       },
       {
-        headerName: 'Offre de service',
+        headerName: 'Offre d’accompagnements',
         field: 'hasPersonalOffer',
         cellRenderer: 'jobPersonalOffer',
         cellEditor: 'agSelectCellEditor',
@@ -176,7 +176,7 @@ export class ManageJobsComponent implements OnInit {
         minWidth: 200,
       },
       {
-        headerName: 'Offre de service',
+        headerName: 'Offre d’accompagnements',
         field: 'hasPersonalOffer',
         cellRenderer: 'jobPersonalOffer',
         cellEditor: 'agSelectCellEditor',

src/app/form/form-view/global-components/progress-bar/progress-bar.component.html

@@ -2,7 +2,7 @@
   <p *ngIf="formType === formTypeEnum.account">Création de compte</p>
   <p *ngIf="formType === formTypeEnum.profile">Création du profil</p>
   <p *ngIf="formType === formTypeEnum.structure">Création de la structure</p>
-  <p *ngIf="formType === formTypeEnum.personaloffer">Création d'offre de service</p>
+  <p *ngIf="formType === formTypeEnum.personaloffer">Création d'offre d’accompagnements</p>
   <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="20px">
     <label for="progressForm" [ngClass]="{ validate: currentPage === nbSteps }"
       >{{ progressStatus > 100 ? 100 : (progressStatus | number: '1.0-0') }}%

src/app/profile/personal-offer-edition/personal-offer-edition.component.html

@@ -4,14 +4,14 @@
     <div class="header">
       <div class="title">
         <div>
-          <h1>Gérer mon offre de service</h1>
+          <h1>Gérer mon offre d'accompagnements</h1>
           <h2 *ngIf="structureName" class="overtitle">{{ structureName }}</h2>
         </div>
       </div>
       <app-v3-button
         class="hide-on-mobile"
         [variant]="buttonTypeEnumV3.SecondaryDelete"
-        [label]="'Supprimer mon offre de service'"
+        [label]="'Supprimer mon offre'"
         [iconName]="'delete'"
         [wide]="true"
         [size]="'small'"
@@ -90,7 +90,7 @@
   >
     <div class="deleteModal">
       <p *ngIf="structureName" class="emphasized">{{ structureName }}</p>
-      <p>Vous êtes sur le point de supprimer votre offre de service, veuillez confirmer pour poursuivre</p>
+      <p>Vous êtes sur le point de supprimer votre offre d’accompagnements, veuillez confirmer pour poursuivre</p>
     </div>
   </app-v3-modal>
 </div>

src/app/profile/personal-offer-edition/personal-offer-edition.component.ts

@@ -128,7 +128,7 @@ export class PersonalOfferEditionComponent implements OnInit {
   public confirmDeleteOffer(): void {
     this.personalOfferService.deletePersonalOffer(this.personalOffer._id).subscribe(
       () => {
-        this.notificationService.showSuccess('Votre offre de service a bien été supprimée.');
+        this.notificationService.showSuccess('Votre offre d’accompagnements a bien été supprimée.');
       },
       (err) => {
         this.notificationService.showError(`${err.error.message}`, 'Une erreur est survenue');

src/app/profile/profile-structure/personal-offer/personal-offer.component.html

 <div *ngIf="this.personalOffer.categoriesDisplay" class="container">
   <div class="header">
-    <h2 class="uppercase">mon offre de service</h2>
+    <h2 class="uppercase">Mon offre d'accompagnements</h2>
     <app-v3-button
       *ngIf="!isPublic"
       class="hide-on-mobile"
       [state]="{ structureName: this.structureName }"
       routerLink="./edit-personal-offer/{{ this.personalOffer._id }}"
       [variant]="buttonTypeEnumV3.Secondary"
-      [label]="'Modifier mon offre de service'"
+      [label]="'Modifier mon offre'"
       [iconName]="'edit'"
       [size]="'small'"
       [wide]="true"
@@ -21,7 +21,7 @@
     />
   </div>
   <div class="content">
-    <app-collapse *ngIf="this.personalOffer.categoriesDisplay.onlineProcedures.length">
+    <app-collapse *ngIf="this.personalOffer.categoriesDisplay.onlineProcedures.length" [expanded]="true">
       <app-collapse-header>
         <div class="collapseHeader">
           <h3>Démarches en ligne</h3>
@@ -36,7 +36,7 @@
       </app-collapse-content>
     </app-collapse>
 
-    <app-collapse *ngIf="this.personalOffer.categoriesDisplay.baseSkills.length">
+    <app-collapse *ngIf="this.personalOffer.categoriesDisplay.baseSkills.length" [expanded]="true">
       <app-collapse-header>
         <div class="collapseHeader">
           <h3>Compétences numériques de base</h3>

src/app/profile/profile-structure/profile-structure.component.html

@@ -4,11 +4,12 @@
   [size]="'medium'"
   [boxShadow]="true"
   [warningBorder]="!isValid() && !isPublic"
+  [expanded]="true"
 >
   <app-collapse-header>
     <div class="collapseHeader">
       <div class="left">
-        <app-svg-icon [type]="'ico'" [icon]="getStructureTypeIcon()" [iconClass]="'icon-52'" />
+        <img alt="" height="80px" width="80px" [src]="'../../../../../assets/ico/' + getStructureTypeIcon() + '.svg'" />
         <div class="structureInfos">
           <p class="structureName">{{ structure.structureName }}</p>
           <app-v3-tag-item
@@ -88,15 +89,15 @@
       </div>
       <div class="sectionContent infoSection">
         <div class="row">
-          <app-svg-icon [iconClass]="'icon-20'" [type]="'ico'" [icon]="'address'" />
+          <app-svg-icon [iconClass]="'icon-20'" [type]="'tags'" [icon]="'address'" />
           <p>{{ getAddress() }}</p>
         </div>
         <div *ngIf="structure.contactPhone" class="row">
-          <app-svg-icon [iconClass]="'icon-20'" [type]="'ico'" [icon]="'phone'" />
+          <app-svg-icon [iconClass]="'icon-20'" [type]="'tags'" [icon]="'phone'" />
           <p>{{ structure.contactPhone | phone }}</p>
         </div>
         <div *ngIf="structure.contactMail" class="row">
-          <app-svg-icon [iconClass]="'icon-20'" [type]="'ico'" [icon]="'mail'" />
+          <app-svg-icon [iconClass]="'icon-20'" [type]="'tags'" [icon]="'mail'" />
           <a class="email" href="mailto:{{ structure.contactMail }}">
             {{ structure.contactMail }}
           </a>

src/app/shared/components/member-card/member-card.component.html

-<div class="structureMember" tabindex="0" (click)="goToProfile()" (keyup.enter)="goToProfile()">
-  <div class="left">
-    <app-svg-icon class="avatar hide-on-mobile" [type]="'avatar'" [icon]="'defaultAvatar'" [iconClass]="'icon-40'" />
-    <div class="nameJobSection">
-      <p class="name">{{ member.name | userName }} {{ member.surname | uppercase }}</p>
-      <p class="jobEmployer">{{ getJobEmployer() }}</p>
-    </div>
-    <div *ngIf="getPhone()">
-      <p>{{ getPhone() }}</p>
-      <p class="mail">{{ member.email }}</p>
-    </div>
+<div class="structureMember">
+  <app-svg-icon class="avatar hide-on-mobile" [type]="'avatar'" [icon]="'defaultAvatar'" [iconClass]="'icon-40'" />
+  <div class="infoDetails">
+    <p class="name underline" tabindex="0" (click)="goToProfile()" (keyup.enter)="goToProfile()">
+      {{ member.name | userName }} {{ member.surname | uppercase }}
+    </p>
+    <p>{{ getJob() }}</p>
+  </div>
+  <div *ngIf="getPhone()" class="infoDetails">
+    <p>{{ getPhone() }}</p>
+    <p class="mail">{{ member.email }}</p>
   </div>
-  <app-svg-icon tabindex="0" [iconClass]="'icon-32'" [type]="'ico'" [icon]="'chevronRight'" />
 </div>

src/app/shared/components/member-card/member-card.component.scss

@@ -7,23 +7,14 @@
   @include font-regular-14;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: 24px;
 
-  .left {
-    display: flex;
-    gap: 24px;
-  }
   padding: 1rem;
   border: 1px solid $grey-7;
   border-radius: 4px;
   color: $grey-3;
-  cursor: pointer;
   transition: all 0.2s ease-in-out;
 
-  &:hover {
-    border-color: $grey-4;
-  }
-
   .avatar {
     display: flex;
     align-items: center;
@@ -36,14 +27,18 @@
   }
   .name {
     @include font-bold-16;
+    text-decoration: underline;
+    cursor: pointer;
     color: $grey-1;
   }
 
-  .nameJobSection {
+  .infoDetails {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     gap: 8px;
+    flex-grow: 1;
+    flex-basis: 0;
   }
 
   .mail {

src/app/shared/components/member-card/member-card.component.ts

@@ -14,17 +14,8 @@ export class MemberCardComponent {
 
   constructor(private router: Router) {}
 
-  getJobEmployer(): string {
-    if (this.member.job?.name && this.member.employer?.name) {
-      return this.member.job.name + ', ' + this.member.employer.name;
-    }
-    if (this.member.job?.name && !this.member.employer?.name) {
-      return this.member.job.name;
-    }
-    if (!this.member.job?.name && this.member.employer?.name) {
-      return this.member.employer.name;
-    }
-    return '';
+  getJob(): string {
+    return this.member.job?.name ?? '';
   }
 
   /** Depending on User or Owner return the phone number of false */

src/app/shared/components/v3/tag-item/tag-item.component.html

-<button type="button" [ngClass]="classes" [disabled]="disabled" (click)="action.emit($event)">
+<button
+  type="button"
+  [ngClass]="classes"
+  [disabled]="disabled"
+  [tabIndex]="clickable ? 0 : -1"
+  (click)="action.emit($event)"
+>
   <app-svg-icon
     *ngIf="iconName && iconPosition === 'left'"
     [type]="iconFolder"