fix: new schema for orientation

Author: marc-gavanier

src/features/orientation/components/besoin-link/besoin-link.component.html

@@ -3,7 +3,7 @@
   class="btn orientation-btn bg-light mb-3 px-lg-3 px-2 py-0 rounded-0 d-flex position-relative">
   <span
     class="position-absolute top-0 start-0 z-index-over-base ms-lg-4 mt-sm-4 ms-sm-3 mt-1 ms-1 translate-middle square d-flex text-center small bg-secondary text-primary border border-primary rounded-circle"
-    *ngIf="serviceItem.value === serviceFilter">
+    *ngIf="serviceFilter?.includes(serviceItem.value)">
     <span class="visually-hidden">Service sélectionné</span>
     <span role="img" class="ri-check-line m-auto" aria-hidden="true"></span>
   </span>
@@ -16,14 +16,13 @@ <h3 class="fs-6 mb-0">
         class="stretched-link text-decoration-none text-body"
         routerLink="../localisation"
         queryParamsHandling="merge"
-        [queryParams]="{ service: serviceItem.value }"
-        (click)="selectServiceValue.emit(serviceItem.value); addLastFilter.emit(serviceItem.value)">
+        [queryParams]="{ service: [serviceItem.value] }"
+        (click)="selectServiceValue.emit([serviceItem.value]); addLastFilter.emit(serviceItem.value)">
         <span class="orientation-btn-label d-block">{{ serviceItem.label }}</span>
       </a>
     </h3>
-    <i class="small text-muted-dark">{{ serviceItem.description }}</i>
+    <em class="small text-muted-dark">{{ serviceItem.description }}</em>
   </div>
-
   <span class="ms-auto d-flex align-items-center mt-3">
     <button
       class="btn btn-link p-0 text-decoration-none z-index-over-base mb-auto"

src/features/orientation/components/besoin-link/besoin-link.component.ts

@@ -12,9 +12,9 @@ export class BesoinLinkComponent {
 
   @Input() public selectedServiceItem?: string;
 
-  @Input() public serviceFilter: string | null = '';
+  @Input() public serviceFilter: string[] | null = [];
 
-  @Output() public selectServiceValue: EventEmitter<string> = new EventEmitter<string>();
+  @Output() public selectServiceValue: EventEmitter<string[]> = new EventEmitter<string[]>();
 
   @Output() public addLastFilter: EventEmitter<string> = new EventEmitter<string>();
 

src/features/orientation/components/selected-filters/selected-filters.component.ts

@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { DispositifProgrammeNational } from '@gouvfr-anct/lieux-de-mediation-numerique';
+import { DispositifProgrammeNational, PriseEnChargeSpecifique } from '@gouvfr-anct/lieux-de-mediation-numerique';
 import { FormGroup } from '@angular/forms';
 import { FilterFormPresentation } from '../../../core/presenters';
-import publicSpecifiqueAcceuilli from '../../pages/accessibilite/public-specifique-accueilli.json';
+import prisesEnChargeSpecifiques from '../../pages/accessibilite/prise-en-charge-specifique.json';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -36,7 +36,7 @@ export class SelectedFiltersComponent {
 
   public getLabelFromValue(value: string): string {
     return (
-      [...publicSpecifiqueAcceuilli].find((field: { value: string; label: string }) => {
+      [...prisesEnChargeSpecifiques].find((field: { value: string; label: string }) => {
         return field.value === value;
       })?.label ?? ''
     );

src/features/orientation/layouts/orientation/orientation.layout.ts

@@ -67,7 +67,7 @@ export class OrientationLayout {
   public lastFilterAdded: { key: string; value: string } | null = null;
 
   public addLastFilter(value: string, key: string, event?: Event) {
-    const shouldUpdate: boolean = key === 'publics_accueillis' ? (event?.target as HTMLInputElement).checked : true;
+    const shouldUpdate: boolean = key === 'prise_en_charge_specifique' ? (event?.target as HTMLInputElement).checked : true;
     if (shouldUpdate) this.lastFilterAdded = { key, value };
   }
 

src/features/orientation/pages/accessibilite/accessibilite-information-modal-texts.ts

@@ -7,10 +7,7 @@ export const ACCESSIBILITE_INFORMATION_MODAL_TEXTS: Record<
   'accueil-specifique': {
     titre: 'Accueil adapté',
     description: `Si vous sélectionnez certaines de ces options, vous restreindrez votre recherche aux lieux en capacité d'accueillir certains types de publics. Pour toute information concernant les déplacements des personnes en situation de handicap, rendez-vous sur <a href="https://acceslibre.beta.gouv.fr/" target="_blank" title="Accès libre (nouvel onglet)" rel="noopener noreferrer">Accès libre</a>`,
-    elements: [
-      'Handicap psychique : trouble psychiatrique donnant lieu à des atteintes comportementales',
-      'Handicap mental : déficience limitant les activités d’une personne'
-    ],
-    label: 'Détails de certaines options'
+    elements: [],
+    label: undefined
   }
 };

src/features/orientation/pages/accessibilite/accessibilite.page.html

@@ -22,18 +22,18 @@ <h1 class="h2 text-center fw-bold mt-sm-5 mt-3">
         <div class="bg-light px-3 py-2">
           <div
             class="form-check form-check-inline form-chip my-2"
-            *ngFor="let accueilSpecifiqueOption of publicSpecifiqueAcceuilliOptions; index as i">
+            *ngFor="let priseEnChargeSpecifiqueOption of priseEnChargeSpecifiqueOptions; index as i">
             <input
               type="checkbox"
-              name="publics_accueillis"
+              name="prise_en_charge_specifique"
               appCheckboxArray
-              formControlName="publics_accueillis"
+              formControlName="prise_en_charge_specifique"
               class="form-check-input"
-              [value]="accueilSpecifiqueOption.value"
-              [attr.id]="'accueilSpecifiqueLabelChip' + i"
-              (change)="orientationLayout.addLastFilter(accueilSpecifiqueOption.value, 'publics_accueillis', $event)" />
-            <label class="form-check-label bg-white" [attr.for]="'accueilSpecifiqueLabelChip' + i">
-              <b>{{ accueilSpecifiqueOption.label }}</b>
+              [value]="priseEnChargeSpecifiqueOption.value"
+              [attr.id]="'priseEnChargeSpecifique' + i"
+              (change)="orientationLayout.addLastFilter(priseEnChargeSpecifiqueOption.value, 'prise_en_charge_specifique', $event)" />
+            <label class="form-check-label bg-white" [attr.for]="'priseEnChargeSpecifique' + i">
+              <b>{{ priseEnChargeSpecifiqueOption.label }}</b>
             </label>
           </div>
         </div>

src/features/orientation/pages/accessibilite/accessibilite.page.ts

@@ -6,7 +6,7 @@ import {
   OrientationInformationContent,
   OrientationItemPresentation
 } from '../../presenters';
-import publicSpecifiqueAcceuilli from './public-specifique-accueilli.json';
+import priseEnChargeSpecifique from './prise-en-charge-specifique.json';
 import { ACCESSIBILITE_INFORMATION_MODAL_TEXTS } from './accessibilite-information-modal-texts';
 
 @Component({
@@ -16,7 +16,7 @@ import { ACCESSIBILITE_INFORMATION_MODAL_TEXTS } from './accessibilite-informati
 export class AccessibilitePage {
   public selectedOrientationInformation: OrientationInformationContent | null = null;
 
-  public publicSpecifiqueAcceuilliOptions: OrientationItemPresentation<string>[] = publicSpecifiqueAcceuilli;
+  public priseEnChargeSpecifiqueOptions: OrientationItemPresentation<string>[] = priseEnChargeSpecifique;
 
   public readonly orientationInformations: Record<AccessibiliteOrientationInformationTypes, OrientationInformationContent> =
     ACCESSIBILITE_INFORMATION_MODAL_TEXTS;

src/features/orientation/pages/accessibilite/prise-en-charge-specifique.json

@@ -0,0 +1,30 @@
+[
+  {
+    "label": "Illettrisme",
+    "value": "Illettrisme"
+  },
+  {
+    "label": "Langues étrangères (anglais)",
+    "value": "Langues étrangères (anglais)"
+  },
+  {
+    "label": "Langues étrangères (autres)",
+    "value": "Langues étrangères (autres)"
+  },
+  {
+    "label": "Handicaps moteurs",
+    "value": "Handicaps moteurs"
+  },
+  {
+    "label": "Handicaps mentaux",
+    "value": "Handicaps mentaux"
+  },
+  {
+    "label": "Déficience visuelle",
+    "value": "Déficience visuelle"
+  },
+  {
+    "label": "Surdité",
+    "value": "Surdité"
+  }
+]

src/features/orientation/pages/accessibilite/public-specifique-accueilli.json

@@ -43,8 +43,10 @@ export class BesoinPage {
 
   public serviceControl: AbstractControl | null = this.orientationLayout.filterForm.get('service');
 
-  public serviceFilter$: Observable<string | null> = this.route.queryParamMap.pipe(
-    map((paramMap: ParamMap) => paramMap.get('service'))
+  public serviceFilter$: Observable<string[]> = this.route.queryParamMap.pipe(
+    map((paramMap: ParamMap) => paramMap.get('service')),
+    map((service: string | null) => (Array.isArray(service) || service == null ? service : [service])),
+    map((services: string[] | null) => (services == null ? [] : services))
   );
 
   public selectedOrientationInformation: OrientationInformationContent | null = null;