refactor(frontend): add format phone in a standalone component

SocialGouv · Feb 15, 2024 · a0c3259 · a0c3259
1 parent 69fcabf
commit a0c3259
Show file tree

Hide file tree

Showing 18 changed files with 129 additions and 45 deletions.
diff --git a/packages/backend/src/usagers/controllers/usagers.controller.ts b/packages/backend/src/usagers/controllers/usagers.controller.ts
@@ -198,7 +198,7 @@ export class UsagersController {
 
   @UseGuards(UsagerAccessGuard)
   @AllowUserStructureRoles("simple", "responsable", "admin", "facteur")
-  @Post("contact-details/:usagerRef")
+  @Patch("contact-details/:usagerRef")
   public async patchMailAndPhone(
     @Body() contactDetails: ContactDetailsDto,
     @CurrentUser() _user: UserStructureAuthenticated,

diff --git a/packages/frontend/angular.json b/packages/frontend/angular.json
@@ -36,7 +36,7 @@
             "extractLicenses": false,
             "buildOptimizer": false,
             "sourceMap": true,
-            "optimization": true,
+            "optimization": false,
             "namedChunks": true
           },
           "configurations": {
@@ -49,7 +49,7 @@
               "buildOptimizer": false
             },
             "analyze": {
-              "optimization": true,
+              "optimization": false,
               "outputHashing": "all",
               "sourceMap": true,
               "namedChunks": true,
@@ -72,7 +72,7 @@
                   "with": "./src/environments/environment.prod.ts"
                 }
               ],
-              "optimization": true,
+              "optimization": false,
               "outputHashing": "all",
               "sourceMap": false,
               "namedChunks": true,

diff --git a/...mponents/display-contact-details-decision/display-contact-details-decision.component.html b/...mponents/display-contact-details-decision/display-contact-details-decision.component.html
@@ -0,0 +1,20 @@
+<p class="my-2">
+  <b>Téléphone:</b>
+  <span class="valeur" *ngIf="usager.telephone.numero">{{
+    usager.telephone | formatInternationalPhoneNumber
+  }}</span>
+  <span class="valeur" *ngIf="!usager.telephone.numero">Non renseigné</span>
+</p>
+<p class="my-2">
+  <b>Adresse e-mail:</b>
+  <span *ngIf="usager.email">
+    {{ usager.email }}
+  </span>
+  <span *ngIf="!usager.email">Non renseigné</span>
+</p>
+<p class="my-2">
+  <b>Notifications par SMS activés: </b>
+  <span>
+    {{ usager.contactByPhone ? "oui" : "non" }}
+  </span>
+</p>
diff --git a/...nents/display-contact-details-decision/display-contact-details-decision.component.spec.ts b/...nents/display-contact-details-decision/display-contact-details-decision.component.spec.ts
@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { DisplayContactDetailsDecisionComponent } from "./display-contact-details-decision.component";
+import { USAGER_ACTIF_MOCK } from "../../../../../_common/mocks";
+import { UsagerFormModel } from "../../../usager-shared/interfaces";
+import { FormatInternationalPhoneNumberPipe } from "../../../usager-shared/formatInternationalPhoneNumber.pipe";
+
+describe("DisplayContactDetailsDecisionComponent", () => {
+  let component: DisplayContactDetailsDecisionComponent;
+  let fixture: ComponentFixture<DisplayContactDetailsDecisionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DisplayContactDetailsDecisionComponent],
+      imports: [FormatInternationalPhoneNumberPipe],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DisplayContactDetailsDecisionComponent);
+    component = fixture.componentInstance;
+    component.usager = new UsagerFormModel(USAGER_ACTIF_MOCK);
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/...components/display-contact-details-decision/display-contact-details-decision.component.ts b/...components/display-contact-details-decision/display-contact-details-decision.component.ts
@@ -0,0 +1,10 @@
+import { Component, Input } from "@angular/core";
+import { UsagerFormModel } from "../../../usager-shared/interfaces";
+
+@Component({
+  selector: "app-display-contact-details-decision",
+  templateUrl: "./display-contact-details-decision.component.html",
+})
+export class DisplayContactDetailsDecisionComponent {
+  @Input() public usager!: UsagerFormModel;
+}
diff --git a/...dossier/components/display-etat-civil-decision/display-etat-civil-decision.component.html b/...dossier/components/display-etat-civil-decision/display-etat-civil-decision.component.html
@@ -23,30 +23,6 @@
       {{ usager.numeroDistribution || "Non renseigné" }}
     </span>
   </p>
-
-  <div class="my-4">
-    <div class="py-2 text-primary fw-bold">Contact</div>
-    <p class="my-2">
-      <b>Téléphone:</b>
-      <span class="valeur" *ngIf="usager.telephone.numero">{{
-        usager.telephone | formatInternationalPhoneNumber
-      }}</span>
-      <span class="valeur" *ngIf="!usager.telephone.numero">Non renseigné</span>
-    </p>
-    <p class="my-2">
-      <b>Adresse e-mail:</b>
-      <span *ngIf="usager.email">
-        {{ usager.email }}
-      </span>
-      <span *ngIf="!usager.email">Non renseigné</span>
-    </p>
-    <p class="my-2">
-      <b>Notifications par SMS activés: </b>
-      <span>
-        {{ usager.contactByPhone ? "oui" : "non" }}
-      </span>
-    </p>
-  </div>
 </ng-container>
 
 <ng-container *ngIf="section === 'AYANTS_DROIT'">

diff --git a/...sier/components/display-etat-civil-decision/display-etat-civil-decision.component.spec.ts b/...sier/components/display-etat-civil-decision/display-etat-civil-decision.component.spec.ts
@@ -3,6 +3,8 @@ import { NO_ERRORS_SCHEMA } from "@angular/core";
 
 import { DisplayEtatCivilDecisionComponent } from "./display-etat-civil-decision.component";
 import { FormatInternationalPhoneNumberPipe } from "../../../usager-shared/formatInternationalPhoneNumber.pipe";
+import { USAGER_ACTIF_MOCK } from "../../../../../_common/mocks";
+import { UsagerFormModel } from "../../../usager-shared/interfaces";
 
 describe("DisplayEtatCivilDecisionComponent", () => {
   let component: DisplayEtatCivilDecisionComponent;
@@ -16,6 +18,7 @@ describe("DisplayEtatCivilDecisionComponent", () => {
     });
     fixture = TestBed.createComponent(DisplayEtatCivilDecisionComponent);
     component = fixture.componentInstance;
+    component.usager = new UsagerFormModel(USAGER_ACTIF_MOCK);
   });
 
   it("can load instance", () => {

diff --git a/...tend/src/app/modules/usager-dossier/components/step-decision/step-decision.component.html b/...tend/src/app/modules/usager-dossier/components/step-decision/step-decision.component.html
@@ -61,7 +61,6 @@ <h3 *ngIf="!editInfos">Ayants-droits</h3>
                   >l'état-civil et et ayant-droits</span
                 >
               </button>
-
               <button
                 class="btn btn-outline-primary d-print-none"
                 *ngIf="editInfos"
@@ -82,6 +81,50 @@ <h3 *ngIf="!editInfos">Ayants-droits</h3>
             [usager]="usager"
             [(editInfos)]="editInfos"
           ></app-profil-etat-civil-form>
+          <div class="row">
+            <div class="col"><h3>Informations de contact</h3></div>
+            <div class="col text-end">
+              <button
+                class="btn btn-outline-primary d-print-none"
+                *ngIf="!editContactDetails"
+                type="button"
+                (click)="editContactDetails = true"
+              >
+                <fa-icon
+                  [icon]="['far', 'edit']"
+                  aria-hidden="true"
+                  class="me-2"
+                ></fa-icon>
+                Modifier
+                <span class="visually-hidden">les informatiosn de contact</span>
+              </button>
+              <button
+                class="btn btn-outline-primary d-print-none"
+                *ngIf="editContactDetails"
+                type="button"
+                (click)="editContactDetails = false"
+              >
+                <fa-icon
+                  [icon]="['fas', 'times']"
+                  aria-hidden="true"
+                  class="me-2"
+                ></fa-icon>
+                Annuler
+              </button>
+            </div>
+            <div class="col-12">
+              <app-display-contact-details-decision
+                [usager]="usager"
+                *ngIf="!editContactDetails"
+              ></app-display-contact-details-decision>
+              <app-form-contact-details
+                [usager]="usager"
+                *ngIf="editContactDetails"
+                [(editContactDetails)]="editContactDetails"
+              ></app-form-contact-details>
+            </div>
+          </div>
+
           <hr />
           <div class="row">
             <div class="col-md-12">

diff --git a/...ontend/src/app/modules/usager-dossier/components/step-decision/step-decision.component.ts b/...ontend/src/app/modules/usager-dossier/components/step-decision/step-decision.component.ts
@@ -39,6 +39,7 @@ export class StepDecisionComponent
 {
   public isAdmin: boolean;
   public editInfos: boolean;
+  public editContactDetails = false;
   public editEntretien: boolean;
   public editPJ: boolean;
 

diff --git a/packages/frontend/src/app/modules/usager-dossier/usager-dossier.module.ts b/packages/frontend/src/app/modules/usager-dossier/usager-dossier.module.ts
@@ -28,6 +28,7 @@ import { DecisionValideFormComponent } from "./components/decision-valide-form/d
 import { UsagerNotesModule } from "../usager-notes/usager-notes.module";
 import { BaseUsagerDossierPageComponent } from "./components/base-usager-dossier-page/base-usager-dossier-page.component";
 import { FormatInternationalPhoneNumberPipe } from "../usager-shared/formatInternationalPhoneNumber.pipe";
+import { DisplayContactDetailsDecisionComponent } from "./components/display-contact-details-decision/display-contact-details-decision.component";
 
 @NgModule({
   declarations: [
@@ -43,6 +44,7 @@ import { FormatInternationalPhoneNumberPipe } from "../usager-shared/formatInter
     DecisionValideFormComponent,
     DecisionRefusFormComponent,
     BaseUsagerDossierPageComponent,
+    DisplayContactDetailsDecisionComponent,
   ],
   imports: [
     CommonModule,

diff --git a/packages/frontend/src/app/modules/usager-profil/usager-profil.module.ts b/packages/frontend/src/app/modules/usager-profil/usager-profil.module.ts
@@ -38,7 +38,7 @@ import {
 } from "../shared/services";
 import { ProfilHistoriqueLoginPortailComponent } from "./components/_historiques/profil-historique-login-portail/profil-historique-login-portail.component";
 import { SetNpaiComponent } from "./components/_general-section/set-npai/set-npai.component";
-import { FormContactDetailsComponent } from "./components/_general-section/form-contact-details/form-contact-details.component";
+
 import { DisplayContactDetailsComponent } from "./components/_general-section/display-contact-details/display-contact-details.component";
 import { NgxIntlTelInputModule } from "@khazii/ngx-intl-tel-input";
 import { FormatInternationalPhoneNumberPipe } from "../usager-shared/formatInternationalPhoneNumber.pipe";
@@ -66,7 +66,6 @@ import { FormatInternationalPhoneNumberPipe } from "../usager-shared/formatInter
     ProfilHistoriqueDecisionsComponent,
     ProfilHistoriqueLoginPortailComponent,
     SetNpaiComponent,
-    FormContactDetailsComponent,
     DisplayContactDetailsComponent,
   ],
   imports: [

diff --git a/...etails/form-contact-details.component.css → ...etails/form-contact-details.component.css b/...etails/form-contact-details.component.css → ...etails/form-contact-details.component.css
diff --git a/...tails/form-contact-details.component.html → ...tails/form-contact-details.component.html b/...tails/form-contact-details.component.html → ...tails/form-contact-details.component.html
diff --git a/...ls/form-contact-details.component.spec.ts → ...ls/form-contact-details.component.spec.ts b/...ls/form-contact-details.component.spec.ts → ...ls/form-contact-details.component.spec.ts
@@ -2,14 +2,14 @@ import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { FormContactDetailsComponent } from "./form-contact-details.component";
 import { ReactiveFormsModule, FormsModule } from "@angular/forms";
 import { RouterTestingModule } from "@angular/router/testing";
-import { SharedModule } from "../../../../shared/shared.module";
+import { SharedModule } from "../../../shared/shared.module";
 import { APP_BASE_HREF } from "@angular/common";
 import { HttpClientTestingModule } from "@angular/common/http/testing";
 import { StoreModule } from "@ngrx/store";
-import { _usagerReducer } from "../../../../../shared";
-import { NGRX_PROVIDERS_TESTING } from "../../../../../shared/store/tests";
-import { UsagerFormModel } from "../../../../usager-shared/interfaces";
-import { USAGER_ACTIF_MOCK } from "../../../../../../_common/mocks";
+import { _usagerReducer } from "../../../../shared";
+import { NGRX_PROVIDERS_TESTING } from "../../../../shared/store/tests";
+import { UsagerFormModel } from "../../interfaces";
+import { USAGER_ACTIF_MOCK } from "../../../../../_common/mocks";
 
 describe("FormContactDetailsComponent", () => {
   let component: FormContactDetailsComponent;

diff --git a/...details/form-contact-details.component.ts → ...details/form-contact-details.component.ts b/...details/form-contact-details.component.ts → ...details/form-contact-details.component.ts
@@ -17,24 +17,24 @@ import {
   Telephone,
   UsagerEtatCivilFormData,
   UserStructure,
-} from "../../../../../../_common/model";
+} from "../../../../../_common/model";
 
 import {
   setFormPhone,
   mobilePhoneValidator,
   getFormPhone,
-} from "../../../../shared/phone";
-import { AuthService, CustomToastService } from "../../../../shared/services";
-import { UsagerFormModel } from "../../../../usager-shared/interfaces";
-import { UsagerService } from "../../../../usager-shared/services";
+} from "../../../shared/phone";
+import { AuthService, CustomToastService } from "../../../shared/services";
+import { UsagerFormModel } from "../../interfaces";
+import { UsagerService } from "../../services";
 import {
   CountryISO,
   PhoneNumberFormat,
   SearchCountryField,
 } from "@khazii/ngx-intl-tel-input";
 
 import { Observable, Subscription } from "rxjs";
-import { PREFERRED_COUNTRIES, EmailValidator } from "../../../../../shared";
+import { PREFERRED_COUNTRIES, EmailValidator } from "../../../../shared";
 
 @Component({
   selector: "app-form-contact-details",

diff --git a/packages/frontend/src/app/modules/usager-shared/services/usagers.service.ts b/packages/frontend/src/app/modules/usager-shared/services/usagers.service.ts
@@ -73,7 +73,7 @@ export class UsagerService {
   ): Observable<UsagerLight> {
     return this.http
       .patch<UsagerLight>(
-        `${this.endPointUsagers}/contact-detail/${ref}`,
+        `${this.endPointUsagers}/contact-details/${ref}`,
         formData
       )
       .pipe(

diff --git a/packages/frontend/src/app/modules/usager-shared/usager-shared.module.ts b/packages/frontend/src/app/modules/usager-shared/usager-shared.module.ts
@@ -30,6 +30,7 @@ import {
   CustomDatepickerI18n,
 } from "../shared/services";
 import { DisplayAyantsDroitsComponent } from "./components/display-ayants-droits/display-ayants-droits.component";
+import { FormContactDetailsComponent } from "./components/form-contact-details/form-contact-details.component";
 
 @NgModule({
   declarations: [
@@ -47,6 +48,7 @@ import { DisplayAyantsDroitsComponent } from "./components/display-ayants-droits
     DecisionRadiationFormComponent,
     DeleteUsagerComponent,
     DisplayAyantsDroitsComponent,
+    FormContactDetailsComponent,
   ],
   imports: [
     CommonModule,
@@ -73,6 +75,7 @@ import { DisplayAyantsDroitsComponent } from "./components/display-ayants-droits
     DisplayDuplicatesUsagerComponent,
     DeleteUsagerComponent,
     DecisionRadiationFormComponent,
+    FormContactDetailsComponent,
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   providers: [

diff --git a/packages/frontend/src/assets/css/main.scss b/packages/frontend/src/assets/css/main.scss
@@ -57,10 +57,10 @@ caption {
 .step-form {
   background-color: white;
   padding: 1.4rem 1rem;
-  max-width: 940px;
+  max-width: 1040px;
   margin: 1rem auto;
   border: 1px solid #d1d1d1;
-  border-radius: 5px;
+  border-radius: 4px;
 }
 
 .tooltip.show {