fix(frontend): delete bootstrap

Author: pYassine

.claude/settings.local.json

@@ -10,7 +10,8 @@
       "Bash(xargs:*)",
       "Bash(npx ng:*)",
       "Bash(python3:*)",
-      "Bash(read f:*)"
+      "Bash(read f:*)",
+      "Bash(ls:*)"
     ]
   }
 }

packages/frontend/angular.json

@@ -30,7 +30,6 @@
             ],
             "styles": [
               "src/styles.scss",
-              "src/assets/css/custom-dsfr.scss",
               "src/assets/css/main.scss",
               "src/assets/css/print.css",
               "node_modules/intl-tel-input/build/css/intlTelInput.css"

packages/frontend/package.json

@@ -90,7 +90,6 @@
     "lodash.clonedeep": "^4.5.0",
     "lodash.isequal": "^4.5.0",
     "marked": "4.0.12",
-    "ngx-bootstrap": "^12.0.0",
     "ngx-countup": "^13.2.0",
     "ngx-matomo-client": "^6.2.0",
     "parchment": "^3.0.0",

packages/frontend/src/_common/model/usager/dossier/FormAyantDroit.type.ts

@@ -1,8 +1,7 @@
 import { AyantDroiLienParent } from "@domifa/common";
-import { NgbDate } from "@ng-bootstrap/ng-bootstrap";
 
 export interface UsagerFormAyantDroit {
-  dateNaissance: NgbDate;
+  dateNaissance: string;
   lien: AyantDroiLienParent;
   nom: string;
   prenom: string;

packages/frontend/src/app/app.module.ts

@@ -16,8 +16,6 @@ import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { BrowserModule } from "@angular/platform-browser";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 
-import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
-
 import { environment } from "src/environments/environment";
 import { AppRoutingModule } from "./app-routing.module";
 import { AppComponent } from "./app.component";
@@ -69,7 +67,7 @@ registerLocaleData(localeFr, "fr");
     FormsModule,
     ReactiveFormsModule,
     GeneralModule,
-    NgbModule,
+
     StoreModule.forRoot({ app: _usagerReducer }),
     SharedModule,
     MATOMO_INJECTORS,

packages/frontend/src/app/modules/admin-portail-usagers/admin-portail-usagers.module.ts

@@ -6,11 +6,7 @@ import {
   withInterceptorsFromDi,
 } from "@angular/common/http";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
-import {
-  NgbDateParserFormatter,
-  NgbDatepickerI18n,
-  NgbModule,
-} from "@ng-bootstrap/ng-bootstrap";
+
 import { GeneralModule } from "../general/general.module";
 import { SharedModule } from "../shared/shared.module";
 import { AdminPortailUsagersMenuComponent } from "./components/admin-portail-usagers-menu/admin-portail-usagers-menu.component";
@@ -19,10 +15,6 @@ import { ManageStructureInformationComponent } from "./components/manage-structu
 import { ManageStructureInformationFormComponent } from "./components/manage-structure-information-form/manage-structure-information-form.component";
 import { StructureInformationService } from "./services/structure-information.service";
 import { ManagePortailUsagersService } from "./services/manage-portail-usagers.service";
-import {
-  NgbDateCustomParserFormatter,
-  CustomDatepickerI18n,
-} from "../shared/services";
 
 import { ManageUserUsagerComponent } from "./components/manage-user-usager/manage-user-usager.component";
 import { DsfrEditorComponent } from "@edugouvfr/ngx-dsfr-ext/editor";
@@ -31,6 +23,7 @@ import {
   DsfrPaginationComponent,
 } from "@edugouvfr/ngx-dsfr";
 import { DisplayLastLoginComponent } from "../shared/components/display-last-login/display-last-login.component";
+import { DsfrDatePickerComponent } from "@edugouvfr/ngx-dsfr-ext";
 
 @NgModule({
   declarations: [
@@ -44,11 +37,11 @@ import { DisplayLastLoginComponent } from "../shared/components/display-last-log
     CommonModule,
     AdminPortailUsagersRoutingModule,
     FormsModule,
-    NgbModule,
+
     ReactiveFormsModule,
     SharedModule,
     GeneralModule,
-
+    DsfrDatePickerComponent,
     DsfrEditorComponent,
     DsfrModalComponent,
     DisplayLastLoginComponent,
@@ -57,9 +50,7 @@ import { DisplayLastLoginComponent } from "../shared/components/display-last-log
   providers: [
     StructureInformationService,
     ManagePortailUsagersService,
-    NgbDateCustomParserFormatter,
-    { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n },
-    { provide: NgbDateParserFormatter, useClass: NgbDateCustomParserFormatter },
+
     provideHttpClient(withInterceptorsFromDi()),
   ],
 })

packages/frontend/src/app/modules/admin-portail-usagers/components/manage-structure-information-form/manage-structure-information-form.component.html

@@ -133,128 +133,34 @@
         *ngIf="f.isTemporary.value === true"
       >
         <div class="fr-col-12 fr-col-md-6">
-          <div
-            class="fr-input-group"
-            [class.fr-input-group--error]="
+          <dsfr-ext-datepicker
+            formControlName="startDate"
+            label="Date de début de diffusion"
+            [required]="true"
+            [showMask]="true"
+            [message]="
               (f.startDate.dirty || submitted) && f.startDate.errors
+                ? 'La date de début est incorrecte. Exemple : 20/12/1996'
+                : ''
             "
-          >
-            <label for="startDate" class="fr-label"
-              >Date de début de diffusion
-            </label>
-            <div class="fr-date-input">
-              <input
-                class="fr-input"
-                placeholder="jj/mm/aaaa"
-                placement="auto"
-                id="startDate"
-                formControlName="startDate"
-                name="startDate"
-                ngbDatepicker
-                dateFr
-                value
-                [class.fr-input--error]="
-                  (f.startDate.dirty || submitted) && f.startDate.errors
-                "
-                [attr.aria-describedby]="
-                  (f.startDate.dirty || submitted) && f.startDate.errors
-                    ? 'startDate-errors'
-                    : null
-                "
-                [attr.aria-invalid]="
-                  (f.startDate.dirty || submitted) && f.startDate.errors
-                    ? true
-                    : false
-                "
-                #startDate="ngbDatepicker"
-                maxlength="10"
-                required
-              />
-
-              <button
-                type="button"
-                aria-label="Choisir une date de début de validité dans le calendrier"
-                class="date-btn"
-                (click)="startDate.toggle()"
-              >
-                <span class="fr-icon-calendar-line" aria-hidden="true"></span>
-              </button>
-            </div>
-
-            <p
-              *ngIf="(f.startDate.dirty || submitted) && f.startDate.errors"
-              id="startDate-errors"
-              class="fr-error-text"
-            >
-              La date de debut est incorrecte. Exemple : 20/12/1996
-            </p>
-          </div>
+            [messageSeverity]="'error'"
+          ></dsfr-ext-datepicker>
         </div>
         <div class="fr-col-12 fr-col-md-6">
-          <div
-            class="fr-input-group"
-            [class.fr-input-group--error]="
+          <dsfr-ext-datepicker
+            formControlName="endDate"
+            label="Date de fin"
+            [required]="true"
+            [showMask]="true"
+            [message]="
               (f.endDate.dirty || submitted) && f.endDate.errors
+                ? f.endDate.errors.required
+                  ? 'La date de fin est obligatoire'
+                  : 'La date de fin est incorrecte. Exemple : 20/12/1996'
+                : ''
             "
-          >
-            <label for="endDate" class="fr-label">Date de fin </label>
-            <div class="fr-date-input">
-              <input
-                class="fr-input"
-                placeholder="jj/mm/aaaa"
-                placement="auto"
-                id="endDate"
-                formControlName="endDate"
-                name="endDate"
-                ngbDatepicker
-                dateFr
-                required
-                value
-                [class.fr-input--error]="
-                  (f.endDate.dirty || submitted) && f.endDate.errors
-                "
-                [attr.aria-describedby]="
-                  (f.endDate.dirty || submitted) && f.endDate.errors
-                    ? 'endDate-errors'
-                    : null
-                "
-                [attr.aria-invalid]="
-                  (f.endDate.dirty || submitted) && f.endDate.errors
-                    ? true
-                    : false
-                "
-                #endDate="ngbDatepicker"
-                maxlength="10"
-              />
-
-              <button
-                type="button"
-                aria-label="Choisir une date de fin de validité dans le calendrier"
-                class="date-btn"
-                (click)="endDate.toggle()"
-              >
-                <span class="fr-icon-calendar-line" aria-hidden="true"></span>
-              </button>
-            </div>
-          </div>
-
-          <div
-            *ngIf="(f.endDate.dirty || submitted) && f.endDate.errors"
-            id="endDate-errors"
-            class="fr-error-text"
-          >
-            <p *ngIf="f.endDate.errors.required">
-              La date de fin est obligatoire
-            </p>
-            <p
-              *ngIf="
-                f.endDate.errors.ngbDate ||
-                f.endDate.errors.endDateAfterBeginDate
-              "
-            >
-              La date de fin est incorrecte. Exemple : 20/12/1996
-            </p>
-          </div>
+            [messageSeverity]="'error'"
+          ></dsfr-ext-datepicker>
         </div>
       </div>
     </form>

packages/frontend/src/app/modules/admin-portail-usagers/components/manage-structure-information-form/manage-structure-information-form.component.ts

@@ -12,16 +12,14 @@ import {
   Validators,
   ValidationErrors,
 } from "@angular/forms";
-import {
-  CustomToastService,
-  NgbDateCustomParserFormatter,
-} from "../../../shared/services";
+import { CustomToastService } from "../../../shared/services";
 import { StructureInformation } from "@domifa/common";
 import { StructureInformationService } from "../../services/structure-information.service";
 
 import {
   endDateAfterBeginDateCheck,
-  formatDateToNgb,
+  formatDateToFr,
+  parseFrDate,
 } from "../../../../shared";
 import { Subscription } from "rxjs";
 import {
@@ -67,7 +65,6 @@ export class ManageStructureInformationFormComponent implements OnDestroy {
 
   constructor(
     private readonly fb: FormBuilder,
-    private readonly nbgDate: NgbDateCustomParserFormatter,
     private readonly structureInformationService: StructureInformationService,
     private readonly toastService: CustomToastService
   ) {}
@@ -103,13 +100,13 @@ export class ManageStructureInformationFormComponent implements OnDestroy {
         ],
         startDate: [
           this.structureInformation?.startDate
-            ? formatDateToNgb(this.structureInformation?.startDate)
+            ? formatDateToFr(this.structureInformation?.startDate)
             : null,
           this.structureInformation?.isTemporary ? Validators.required : null,
         ],
         endDate: [
           this.structureInformation?.endDate
-            ? formatDateToNgb(this.structureInformation?.endDate)
+            ? formatDateToFr(this.structureInformation?.endDate)
             : null,
           this.structureInformation?.isTemporary ? Validators.required : null,
         ],
@@ -169,19 +166,11 @@ export class ManageStructureInformationFormComponent implements OnDestroy {
         ...this.tempMessageForm.value,
         startDate:
           this.tempMessageForm.controls.isTemporary.value === true
-            ? new Date(
-                this.nbgDate.formatEn(
-                  this.tempMessageForm.controls.startDate.value
-                )
-              )
+            ? parseFrDate(this.tempMessageForm.controls.startDate.value)
             : null,
         endDate:
           this.tempMessageForm.controls.isTemporary.value === true
-            ? new Date(
-                this.nbgDate.formatEn(
-                  this.tempMessageForm.controls.endDate.value
-                )
-              )
+            ? parseFrDate(this.tempMessageForm.controls.endDate.value)
             : null,
       };
 

packages/frontend/src/app/modules/admin-portail-usagers/components/manage-structure-information/manage-structure-information.component.spec.ts

@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { ManageStructureInformationComponent } from "./manage-structure-information.component";
 import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
-import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
+
 import { RouterModule } from "@angular/router";
 import { provideHttpClient } from "@angular/common/http";
 
@@ -13,7 +13,7 @@ describe("ManageStructureInformationComponent", () => {
     await TestBed.configureTestingModule({
       declarations: [ManageStructureInformationComponent],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
-      imports: [NgbModule, RouterModule.forRoot([])],
+      imports: [RouterModule.forRoot([])],
       providers: [provideHttpClient()],
     }).compileComponents();
 

packages/frontend/src/app/modules/admin-portail-usagers/components/portail-usagers-params/portail-usagers-params.component.spec.ts

@@ -3,7 +3,7 @@ import { PortailUsagersParamsComponent } from "./portail-usagers-params.componen
 import { APP_BASE_HREF } from "@angular/common";
 import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
 import { ReactiveFormsModule, FormsModule } from "@angular/forms";
-import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
+
 import {
   MockAuthService,
   USER_STRUCTURE_MOCK,
@@ -18,12 +18,7 @@ describe("PortailUsagersParamsComponent", () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      imports: [
-        NgbModule,
-        ReactiveFormsModule,
-        FormsModule,
-        RouterModule.forRoot([]),
-      ],
+      imports: [ReactiveFormsModule, FormsModule, RouterModule.forRoot([])],
       providers: [
         provideHttpClient(),
         { provide: APP_BASE_HREF, useValue: "/" },