feat(mon-domifa): add new links of partners

SocialGouv · Oct 21, 2024 · 97c8a86 · 97c8a86
1 parent 2ee9ce1
commit 97c8a86
Show file tree

Hide file tree

Showing 41 changed files with 496 additions and 413 deletions.
diff --git a/packages/portail-usagers/angular.json b/packages/portail-usagers/angular.json
@@ -26,7 +26,6 @@
             "assets": ["src/assets", "src/robots.txt"],
             "styles": [
               "src/styles.scss",
-              "src/assets/css/bootstrap-custom.css",
               "src/assets/css/print.css",
               "src/assets/css/icons.css",
               "src/assets/css/forms.css",

diff --git a/packages/portail-usagers/src/app/app.component.html b/packages/portail-usagers/src/app/app.component.html
@@ -73,9 +73,13 @@
 <main role="main" id="page">
   <router-outlet></router-outlet>
   <div *ngIf="usagerProfile" class="py-4 text-center">
-    <button (click)="logout()" class="btn btn-outline-primary" type="button">
-      <fa-icon aria-hidden="true" [icon]="['far', 'comment']"></fa-icon> Me
-      déconnecter
+    <button
+      (click)="logout()"
+      class="btn btn-outline-primary px-5"
+      type="button"
+    >
+      Me déconnecter
+      <fa-icon aria-hidden="true" [icon]="faRightFromBracket"></fa-icon>
     </button>
   </div>
 </main>
@@ -257,7 +261,7 @@
 <ng-template #newsModal let-modal>
   <div class="modal-header">
     <span id="modal-title">
-      🎉 Des nouveautés sont disponibles sur la plateforme
+      🎉 Des nouveautés sont disponibles sur la Mon DomiFa
     </span>
     <button
       class="btn-close"

diff --git a/packages/portail-usagers/src/app/app.component.ts b/packages/portail-usagers/src/app/app.component.ts
@@ -8,6 +8,7 @@ import { PortailUsagerProfile } from "@domifa/common";
 import { MatomoTracker } from "ngx-matomo-client";
 import DOMIFA_NEWS from "../assets/files/news.json";
 import { NgbModal, NgbModalRef } from "@ng-bootstrap/ng-bootstrap";
+import { faRightFromBracket } from "@fortawesome/free-solid-svg-icons";
 
 @Component({
   selector: "app-root",
@@ -20,6 +21,7 @@ export class AppComponent implements OnInit {
   public usagerProfile: PortailUsagerProfile | null;
   public currentUrl = "";
   public readonly partnerLinks = LIENS_PARTENAIRES;
+  public readonly faRightFromBracket = faRightFromBracket;
   public pendingNews = false;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   public news: any;
@@ -113,26 +115,23 @@ export class AppComponent implements OnInit {
     this.router.events
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       .pipe(filter((e: any) => e instanceof NavigationEnd))
-      .subscribe((ev: Event) => {
+      .subscribe((ev: NavigationEnd) => {
         const event = ev as unknown as NavigationEnd;
         const splitUrl = event?.url.split("#");
         this.currentUrl = splitUrl[0];
 
-        const sections = ["page", "footer"];
         if (typeof splitUrl[1] !== "undefined") {
-          if (sections.indexOf(splitUrl[1]) !== -1) {
-            const fragment = splitUrl[1];
-            const element = document.getElementById(fragment);
-            if (element) {
-              element.tabIndex = -1;
-              element.focus();
-            }
+          const fragment = splitUrl[1];
+          const element = document.getElementById(fragment);
+          if (element) {
+            element.tabIndex = -1;
+            element.focus();
           }
         } else {
-          this.currentUrl = event.url.split("#")[0];
-          // Retour au top du curseur
+          this.currentUrl = event.url;
           const mainHeader = document.getElementById("top-site");
           if (mainHeader) {
+            mainHeader.tabIndex = -1;
             mainHeader.focus();
           }
 

diff --git a/packages/portail-usagers/src/app/modules/shared/pipes/formatInternationalPhoneNumber.pipe.ts b/packages/portail-usagers/src/app/modules/shared/pipes/formatInternationalPhoneNumber.pipe.ts
diff --git a/packages/portail-usagers/src/app/modules/shared/pipes/usager-nom-complet.pipe.ts b/packages/portail-usagers/src/app/modules/shared/pipes/usager-nom-complet.pipe.ts
diff --git a/packages/portail-usagers/src/app/modules/shared/services/seo.service.ts b/packages/portail-usagers/src/app/modules/shared/services/seo.service.ts
@@ -29,7 +29,7 @@ export class SeoService {
   public createLinkForCanonicalURL(): void {
     const link: HTMLLinkElement = this.doc.createElement("link");
     let element: HTMLLinkElement | null =
-      this.doc.querySelector(`link[rel='canonical']`) ?? null;
+      this.doc.querySelector("link[rel='canonical']") ?? null;
     if (!element) {
       element = this.doc.createElement("link") as HTMLLinkElement;
       this.doc.head.appendChild(link);
@@ -41,7 +41,7 @@ export class SeoService {
   public generateMetasTags(title: string, description: string): void {
     description =
       description.length > 155
-        ? description.substring(0, 155) + "..."
+        ? `${description.substring(0, 155)}...`
         : description;
 
     const tags: MetaDefinition[] = [

diff --git a/packages/portail-usagers/src/app/modules/shared/shared.module.ts b/packages/portail-usagers/src/app/modules/shared/shared.module.ts
@@ -1,32 +1,18 @@
 import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 
-import { UsagerNomCompletPipe } from "./pipes/usager-nom-complet.pipe";
-
-import { FormatInternationalPhoneNumberPipe } from "./pipes/formatInternationalPhoneNumber.pipe";
-
 import {
   FaIconLibrary,
   FontAwesomeModule,
 } from "@fortawesome/angular-fontawesome";
 import { FA_ICONS } from "./constants/FA_ICONS.const";
 import { CustomToastrComponent } from "./components/custom-toastr/custom-toastr.component";
 import { SeoService } from "./services/seo.service";
-import { ReplaceLineBreaks } from "./pipes";
+import { ReplaceLineBreaks } from "./pipes/nl2br.pipe";
 
 @NgModule({
-  declarations: [
-    UsagerNomCompletPipe,
-    FormatInternationalPhoneNumberPipe,
-    CustomToastrComponent,
-    ReplaceLineBreaks,
-  ],
-  exports: [
-    UsagerNomCompletPipe,
-    FormatInternationalPhoneNumberPipe,
-    CustomToastrComponent,
-    ReplaceLineBreaks,
-  ],
+  declarations: [CustomToastrComponent, ReplaceLineBreaks],
+  exports: [CustomToastrComponent, ReplaceLineBreaks],
   providers: [SeoService],
   imports: [CommonModule, FontAwesomeModule],
 })

diff --git a/...odules/usager-account/components/historique-courriers/historique-courriers.component.html b/...odules/usager-account/components/historique-courriers/historique-courriers.component.html
@@ -1,61 +1,69 @@
-<h1 class="mt-5 mb-2 content section-title">Historique des interactions</h1>
+<div class="content">
+  <h1 class="mt-5 mb-2 section-title">Historique des interactions</h1>
 
-<div class="content section-content">
-  <p>
-    Vous trouverez ci-dessous, l'ensemble des courriers, colis et avis de
-    passage reçus et déjà récupérés
-  </p>
-  <br />
-  <div
-    *ngIf="!interactions || interactions.length === 0"
-    class="alert alert-info"
-  >
-    <p>Aucune interaction enregistrée</p>
-  </div>
+  <div class="content section-content">
+    <p>
+      Vous trouverez ci-dessous, l'ensemble des courriers, colis et avis de
+      passage reçus et déjà récupérés
+    </p>
+    <br />
+    <div
+      *ngIf="!interactions || interactions.length === 0"
+      class="alert alert-info"
+    >
+      <p>Aucune interaction enregistrée</p>
+    </div>
 
-  <div
-    *ngFor="let interaction of interactions; let i = index"
-    class="interaction-historique"
-  >
-    <div class="d-flex align-items-top">
-      <div>
-        <div class="number d-print-none">
+    <div
+      *ngFor="let interaction of interactions; let i = index"
+      class="interaction-historique"
+    >
+      <div class="d-flex align-items-top">
+        <div>
+          <div class="number d-print-none">
+            <div
+              class="icon-courrier"
+              [ngClass]="'icon-' + interaction.type"
+            ></div>
+          </div>
           <div
-            class="icon-courrier"
-            [ngClass]="'icon-' + interaction.type"
+            class="interaction-separator"
+            *ngIf="i < 4 && i < interactions.length - 1"
           ></div>
         </div>
-        <div class="interaction-separator" *ngIf="i < 4"></div>
-      </div>
 
-      <div class="ms-3">
-        <p class="interaction-date">
-          {{ interaction.dateInteraction | date : "dd MMMM yyyy à HH:mm" }}
-        </p>
-        <p class="fw-bold">
-          {{ interaction.label }}
-        </p>
-        <span
-          [innerHTML]="interaction.content | nl2br"
-          *ngIf="interaction.content"
-        ></span>
+        <div class="ms-3">
+          <p class="interaction-date">
+            {{ interaction.dateInteraction | date : "dd MMMM yyyy à HH:mm" }}
+          </p>
+          <p class="fw-bold">
+            {{ interaction.label }}
+          </p>
+          <span
+            [innerHTML]="interaction.content | nl2br"
+            *ngIf="interaction.content"
+          ></span>
+        </div>
       </div>
     </div>
-  </div>
-  <ngb-pagination
-    class="my-5 d-flex justify-content-center"
-    [collectionSize]="searchResults.meta.itemCount"
-    [(page)]="params.page"
-    [boundaryLinks]="true"
-    [rotate]="true"
-    [maxSize]="5"
-    [pageSize]="params.take"
-    (pageChange)="getInteractions()"
-  ></ngb-pagination>
-  <div class="text-center my-2">
-    <a routerLink="/account" class="btn btn-outline-primary">
-      <fa-icon aria-hidden="true" [icon]="faChevronLeft"></fa-icon>
-      Retourner sur mon profil
-    </a>
+    <ngb-pagination
+      *ngIf="searchResults.meta.itemCount >= params.take"
+      class="my-5 d-flex justify-content-center"
+      [collectionSize]="searchResults.meta.itemCount"
+      [(page)]="params.page"
+      [boundaryLinks]="true"
+      [rotate]="true"
+      [maxSize]="5"
+      [pageSize]="params.take"
+      (pageChange)="getInteractions()"
+    ></ngb-pagination>
+    <br />
+    <br />
+    <div class="text-center my-2">
+      <a routerLink="/account" class="btn btn-outline-primary">
+        <fa-icon aria-hidden="true" [icon]="faChevronLeft"></fa-icon>
+        Retourner sur mon profil
+      </a>
+    </div>
   </div>
 </div>
diff --git a/...rriers/historique-courriers.component.css → ...riers/historique-courriers.component.scss b/...rriers/historique-courriers.component.css → ...riers/historique-courriers.component.scss
diff --git a/.../modules/usager-account/components/historique-courriers/historique-courriers.component.ts b/.../modules/usager-account/components/historique-courriers/historique-courriers.component.ts
@@ -9,7 +9,7 @@ import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 @Component({
   selector: "app-historique-courriers",
   templateUrl: "./historique-courriers.component.html",
-  styleUrls: ["./historique-courriers.component.css"],
+  styleUrls: ["./historique-courriers.component.scss"],
 })
 export class HistoriqueCourriersComponent implements OnDestroy, OnInit {
   private subscription = new Subscription();

diff --git a/...l-usagers/src/app/modules/usager-account/components/home-usager/home-usager.component.css b/...l-usagers/src/app/modules/usager-account/components/home-usager/home-usager.component.css
@@ -1,7 +1,3 @@
-.home-message {
-  padding: 2rem 1rem;
-}
-
 .subtitle {
   font-style: normal;
   font-weight: normal;

diff --git a/...-usagers/src/app/modules/usager-account/components/home-usager/home-usager.component.html b/...-usagers/src/app/modules/usager-account/components/home-usager/home-usager.component.html
@@ -1,17 +1,32 @@
-<ng-container *ngIf="usagerProfile">
-  <div class="home-message">
-    <h1 class="text-primary fw-bold">
-      Bonjour {{ usagerProfile.usager.prenom }}
-      <span class="text-uppercase">{{ usagerProfile.usager.nom }}.</span>
-    </h1>
-    <span class="subtitle"
-      >Bienvenue dans votre espace de suivi de courrier</span
-    >
-  </div>
-  <app-structure-information></app-structure-information>
-  <app-section-courriers
-    [usager]="usagerProfile.usager"
-  ></app-section-courriers>
-  <app-section-options [usager]="usagerProfile.usager"></app-section-options>
-  <app-section-infos [usager]="usagerProfile.usager"></app-section-infos>
-</ng-container>
+<div class="container">
+  <ng-container *ngIf="usagerProfile">
+    <div class="py-4">
+      <h1 class="text-primary fw-bold">
+        Bonjour {{ usagerProfile.usager.prenom }}
+        <span class="text-uppercase">{{ usagerProfile.usager.nom }}.</span>
+      </h1>
+      <span class="subtitle"
+        >Bienvenue dans votre espace de suivi de courrier</span
+      >
+    </div>
+    <div class="row">
+      <app-structure-information
+        *ngIf="structureInformation?.length"
+        [structureInformation]="structureInformation"
+        class="col-md-6 col-12 py-3"
+      ></app-structure-information>
+      <app-section-courriers
+        class="col-md-6 col-12 py-3"
+        [usager]="usagerProfile.usager"
+      ></app-section-courriers>
+      <app-section-infos
+        class="col-md-6 col-12 py-3"
+        [usager]="usagerProfile.usager"
+      ></app-section-infos>
+      <app-section-links
+        class="col-md-6 col-12 py-3"
+        [usager]="usagerProfile.usager"
+      ></app-section-links>
+    </div>
+  </ng-container>
+</div>
diff --git a/...agers/src/app/modules/usager-account/components/home-usager/home-usager.component.spec.ts b/...agers/src/app/modules/usager-account/components/home-usager/home-usager.component.spec.ts
@@ -15,7 +15,6 @@ describe("HomeUsagerComponent", () => {
       imports: [
         UsagerAccountModule,
         RouterTestingModule,
-
         HttpClientTestingModule,
       ],
     }).compileComponents();