src/app/form/form-view/form-view.component.ts

@@ -447,6 +447,11 @@ export class FormViewComponent implements OnInit, AfterViewInit {
         return {
           categories: {
             age: this.structureForm.get('categories').get('age').value,
+          },
+        };
+      case structureFormStep.structurePublicTargetOptional:
+        return {
+          categories: {
             languageAndIlliteracy: this.structureForm.get('categories').get('languageAndIlliteracy').value,
             handicaps: this.structureForm.get('categories').get('handicaps').value,
             publicOthers: this.structureForm.get('categories').get('publicOthers').value,

src/app/form/form-view/structure-form/structure-form.component.html

@@ -113,9 +113,19 @@
       [isEditMode]="isEditMode"
       [structureForm]="structureForm"
       [age]="age"
+      (validateForm)="setValidationsForm()"
+      (updateChoice)="updateChoice($event)"
+    >
+    </app-structure-public-target>
+  </div>
+  <div *ngIf="currentStep == structureFormStep.structurePublicTargetOptional">
+    <app-structure-public-target
+      [isEditMode]="isEditMode"
+      [structureForm]="structureForm"
       [handicaps]="handicaps"
       [publicOthers]="publicOthers"
       [languageAndIlliteracy]="languageAndIlliteracy"
+      [isMandatoryFields]="false"
       (validateForm)="setValidationsForm()"
       (updateChoice)="updateChoice($event)"
     >

src/app/form/form-view/structure-form/structure-form.component.ts

@@ -68,6 +68,7 @@ export class StructureFormComponent implements OnChanges, OnInit {
         this.currentStep === structureFormStep.structureCreationFinishedInfo ||
         this.currentStep === structureFormStep.structureHours ||
         this.currentStep === structureFormStep.structureTrainingType ||
+        this.currentStep === structureFormStep.structurePublicTargetOptional ||
         this.currentStep === structureFormStep.structureEquipments ||
         this.currentStep === structureFormStep.structureLabels ||
         this.currentStep === structureFormStep.structureSolidarityMaterial ||
@@ -194,6 +195,9 @@ export class StructureFormComponent implements OnChanges, OnInit {
       this.pagesValidation[structureFormStep.structurePublicTarget] = {
         valid: this.structureForm.get('categories').get('age').valid,
       };
+      this.pagesValidation[structureFormStep.structurePublicTargetOptional] = {
+        valid: true,
+      };
       this.pagesValidation[structureFormStep.structureDigitalHelpingAccompanimentOther] = {
         valid: this.structureForm.get('otherDescription').valid,
       };

src/app/form/form-view/structure-form/structure-public-target/structure-public-target.component.html

@@ -8,74 +8,84 @@
       [icon]="'arrowBack'"
     ></app-svg-icon>
     <div class="titleContent">
-      <h3>Quel public peut être accueilli dans cette structure&nbsp;?</h3>
-      <p>Plusieurs choix possibles</p>
+      <h3>
+        {{
+          isMandatoryFields
+            ? 'Quel public peut être accueilli dans cette structure&nbsp;?'
+            : 'Quels publics spécifiques peuvent être accueillis dans cette structure&nbsp;?'
+        }}
+      </h3>
+      <p>{{ isMandatoryFields ? '' : 'Facultatif - ' }}Plusieurs choix possibles</p>
     </div>
   </div>
   <p class="missing-information" *ngIf="isEditMode && !structureForm.get('categories').get('age').valid">
     <app-svg-icon [iconClass]="'icon-26'" [type]="'form'" [icon]="'notValidate'" class="validationIcon"></app-svg-icon>
     <span>Il faut renseigner au moins un champ</span>
   </p>
-  <div *ngIf="publicOthers">
-    <div class="btn-grid">
-      <app-button
-        *ngFor="let choice of publicOthers.modules"
-        [ngClass]="{ selectedChoice: true }"
-        [extraClass]="isInArray(choice.id, 'publicOthers') ? 'selected' : ''"
-        [style]="buttonTypeEnum.CheckButton"
-        [text]="choice.name"
-        (action)="updateChoicePublic(choice.id, 'publicOthers')"
-      ></app-button>
+  <ng-container *ngIf="!isMandatoryFields">
+    <div *ngIf="languageAndIlliteracy">
+      <div class="title">
+        <h4>Langue et illettrisme</h4>
+      </div>
+      <div class="btn-grid">
+        <app-button
+          *ngFor="let choice of languageAndIlliteracy.modules"
+          [ngClass]="{ selectedChoice: true }"
+          [extraClass]="isInArray(choice.id, 'languageAndIlliteracy') ? 'selected' : ''"
+          [style]="buttonTypeEnum.CheckButton"
+          [text]="choice.name"
+          (action)="updateChoicePublic(choice.id, 'languageAndIlliteracy')"
+        ></app-button>
+      </div>
     </div>
-  </div>
-  <div *ngIf="age">
-    <div class="title">
-      <h4>Âge</h4>
-    </div>
-    <div class="btn-grid">
-      <app-button
-        *ngFor="let choice of age.modules"
-        [ngClass]="{ selectedChoice: true }"
-        [extraClass]="isInArray(choice.id, 'age') ? 'selected' : ''"
-        [style]="buttonTypeEnum.CheckButton"
-        [text]="choice.name"
-        (action)="updateChoicePublic(choice.id, 'age')"
-      ></app-button>
-    </div>
-  </div>
+    <div *ngIf="handicaps">
+      <div class="title">
+        <h4>Handicaps</h4>
+      </div>
 
-  <div *ngIf="languageAndIlliteracy">
-    <div class="title">
-      <h4>Langue et illettrisme</h4>
-      <p>Facultatif</p>
+      <div class="btn-grid">
+        <app-button
+          *ngFor="let choice of handicaps.modules"
+          [ngClass]="{ selectedChoice: true }"
+          [extraClass]="isInArray(choice.id, 'handicaps') ? 'selected' : ''"
+          [style]="buttonTypeEnum.CheckButton"
+          [text]="choice.name"
+          (action)="updateChoicePublic(choice.id, 'handicaps')"
+        ></app-button>
+      </div>
     </div>
-    <div class="btn-grid">
-      <app-button
-        *ngFor="let choice of languageAndIlliteracy.modules"
-        [ngClass]="{ selectedChoice: true }"
-        [extraClass]="isInArray(choice.id, 'languageAndIlliteracy') ? 'selected' : ''"
-        [style]="buttonTypeEnum.CheckButton"
-        [text]="choice.name"
-        (action)="updateChoicePublic(choice.id, 'languageAndIlliteracy')"
-      ></app-button>
-    </div>
-  </div>
-
-  <div *ngIf="handicaps">
-    <div class="title">
-      <h4>Handicaps</h4>
-      <p>Facultatif</p>
+    <div *ngIf="publicOthers">
+      <div class="title">
+        <h4>Autre</h4>
+      </div>
+      <div class="btn-grid">
+        <app-button
+          *ngFor="let choice of publicOthers.modules"
+          [ngClass]="{ selectedChoice: true }"
+          [extraClass]="isInArray(choice.id, 'publicOthers') ? 'selected' : ''"
+          [style]="buttonTypeEnum.CheckButton"
+          [text]="choice.name"
+          (action)="updateChoicePublic(choice.id, 'publicOthers')"
+        ></app-button>
+      </div>
     </div>
+  </ng-container>
 
-    <div class="btn-grid">
-      <app-button
-        *ngFor="let choice of handicaps.modules"
-        [ngClass]="{ selectedChoice: true }"
-        [extraClass]="isInArray(choice.id, 'handicaps') ? 'selected' : ''"
-        [style]="buttonTypeEnum.CheckButton"
-        [text]="choice.name"
-        (action)="updateChoicePublic(choice.id, 'handicaps')"
-      ></app-button>
+  <ng-container *ngIf="isMandatoryFields">
+    <div *ngIf="age">
+      <div class="title">
+        <h4>Âge</h4>
+      </div>
+      <div class="btn-grid">
+        <app-button
+          *ngFor="let choice of age.modules"
+          [ngClass]="{ selectedChoice: true }"
+          [extraClass]="isInArray(choice.id, 'age') ? 'selected' : ''"
+          [style]="buttonTypeEnum.CheckButton"
+          [text]="choice.name"
+          (action)="updateChoicePublic(choice.id, 'age')"
+        ></app-button>
+      </div>
     </div>
-  </div>
+  </ng-container>
 </form>

src/app/form/form-view/structure-form/structure-public-target/structure-public-target.component.ts

@@ -14,6 +14,7 @@ export class StructurePublicTargetComponent implements OnInit {
   @Input() handicaps: Category;
   @Input() publicOthers: Category;
   @Input() isEditMode: boolean;
+  @Input() isMandatoryFields = true;
   @Output() updateChoice = new EventEmitter<any>();
   @Output() validateForm = new EventEmitter<any>();
 

src/app/form/form-view/structure-form/structureFormStep.enum.ts

@@ -12,6 +12,7 @@ export enum structureFormStep {
   structurePmr,
   structureWebAndSocialNetwork,
   structurePublicTarget,
+  structurePublicTargetOptional,
   structureDigitalHelpingAccompaniment,
   structureDigitalHelpingAccompanimentOther,
   structureTrainingType,

src/app/form/orientation-form-view/orientation-form-view.component.ts

@@ -197,7 +197,7 @@ export class OrientationFormViewComponent implements OnInit, AfterContentChecked
     const onlineProcedures: Filter[] = this.onlineDemarchForm.value.onlineDemarcheType.map((module: Module) => {
       return new Filter('onlineProcedures', module.id, module.displayText);
     });
-    if (onlineProcedures.length > 0) this.filters.push(onlineProcedures[0]);
+    if (onlineProcedures.length > 0) this.filters = [...onlineProcedures, ...this.filters];
   }
 
   public setFilters(category: string): void {

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

@@ -300,6 +300,25 @@
           <app-missing-information></app-missing-information>
         </ng-container>
       </div>
+    </div>
+
+    <div class="section publics">
+      <div class="sectionHeader">
+        <p>Public spécifique admis</p>
+        <app-button
+          class="hide-on-mobile"
+          [text]="'Modifier'"
+          [style]="buttonTypeEnum.Secondary"
+          [extraClass]="'editButton'"
+          (action)="goToEdit(structureFormStep.structurePublicTargetOptional)"
+        ></app-button>
+        <app-button
+          class="hide-on-desktop"
+          [iconBtn]="'edit'"
+          [style]="buttonTypeEnum.SecondaryOnlyIcon"
+          (action)="goToEdit(structureFormStep.structurePublicTargetOptional)"
+        ></app-button>
+      </div>
       <div class="content">
         <ng-container
           *ngIf="
@@ -339,6 +358,17 @@
           </div>
         </ng-container>
       </div>
+      <div class="content">
+        <ng-container
+          *ngIf="
+            structure.categoriesDisplay.languageAndIlliteracy.length === 0 &&
+            structure.categoriesDisplay.publicOthers.length === 0 &&
+            structure.categoriesDisplay.handicaps.length === 0
+          "
+        >
+          <app-no-information></app-no-information>
+        </ng-container>
+      </div>
     </div>
 
     <div class="section proceduresAccompaniment">

src/app/shared/components/structure-detail-print/structure-detail-print.component.html

@@ -8,11 +8,17 @@
       <div class="mobile-column">
         <div fxLayout="column" fxFlex="100%">
           <div *ngIf="structure.address" fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
-            <app-svg-icon [type]="'ico'" [icon]="'adress'" [title]="'Adresse'"></app-svg-icon>
+            <app-svg-icon [type]="'ico'" [icon]="'adress'" [title]="'Adresse'" [iconClass]="'icon-22'"></app-svg-icon>
             <p>{{ structure.address.numero }} {{ structure.address.street }}, {{ structure.address.commune }}</p>
           </div>
-          <div *ngIf="structure.contactPhone" fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
-            <app-svg-icon [type]="'ico'" [icon]="'tel'" [title]="'Téléphone'"></app-svg-icon>
+          <div
+            *ngIf="structure.contactPhone"
+            fxLayout="row"
+            fxLayoutAlign="none center"
+            [iconClass]="'icon-22'"
+            fxLayoutGap="13px"
+          >
+            <app-svg-icon [type]="'ico'" [icon]="'tel'" [title]="'Téléphone'" [iconClass]="'icon-22'"></app-svg-icon>
             <p>{{ structure.contactPhone | phone }}</p>
           </div>
           <div
@@ -21,7 +27,12 @@
             fxLayoutAlign="none center"
             fxLayoutGap="13px"
           >
-            <app-svg-icon [type]="'ico'" [iconClass]="'grey-1'" [icon]="'email'" [title]="'Email'"></app-svg-icon>
+            <app-svg-icon
+              [type]="'ico'"
+              [iconClass]="'grey-1 icon-22'"
+              [icon]="'email'"
+              [title]="'Email'"
+            ></app-svg-icon>
             <p>{{ structure.contactMail }}</p>
           </div>
         </div>
@@ -31,50 +42,47 @@
   <!-- Accueil -->
   <div
     *ngIf="tclStopPoints || structure.hours.hasData() || structure.remoteAccompaniment"
-    fxLayout="column"
-    class="structure-details-block"
-    fxLayoutAlign="baseline baseline"
-    fxLayoutGap="20px"
+    class="structure-details-block flex column"
   >
     <!-- Opening Hours -->
-    <div fxLayout="row" class="w-100 mobile-column">
-      <div *ngIf="structure.hours.hasData()" fxFlex="60%">
-        <h3 class="subtitle">Horaires</h3>
-        <div fxLayout="column">
-          <div *ngFor="let day of structure.hours | keyvalue: keepOriginalOrder">
-            <div *ngIf="day.value.open" fxLayout="row" fxLayoutAlign="none baseline">
-              <h4 fxFlex="30%">{{ day.key | day }}</h4>
-              <div class="opening-time w100" fxLayout="column" fxLayoutAlign="none baseline">
-                <div *ngFor="let timeRange of day.value.time">
-                  <p *ngIf="timeRange.opening">
-                    de {{ timeRange.formatOpeningDate() }} à {{ timeRange.formatClosingDate() }}
-                  </p>
-                </div>
+    <div class="w-100 mobile-column flex row mb20">
+      <div *ngIf="structure.hours.hasData()" class="timeContainer">
+        <h3 class="subtitle">HORAIRES</h3>
+        <div *ngFor="let day of structure.hours | keyvalue: keepOriginalOrder">
+          <div *ngIf="day.value.open" class="mb4">
+            <h4>{{ day.key | day }}</h4>
+            <div class="opening-time w100">
+              <div *ngFor="let timeRange of day.value.time">
+                <p *ngIf="timeRange.opening">{{ timeRange.opening }} - {{ timeRange.closing }}</p>
               </div>
             </div>
           </div>
         </div>
       </div>
       <!-- accessModality -->
-      <div *ngIf="tclStopPoints.length > 0" fxFlex="40%">
-        <h3 class="subtitle">Accès</h3>
-        <div fxLayout="column">
-          <div *ngFor="let tclStop of tclStopPoints | slice: 0:3">
-            <div fxLayout="row wrap" fxLayoutGap="5px" class="tclStop">
-              <p>{{ tclStop.name }}:</p>
-              <p *ngIf="tclStop.subLines.length > 0">Métro</p>
-              <p *ngFor="let sub of tclStop.subLines">{{ sub }}</p>
-              <p *ngIf="tclStop.tramLines.length > 0">Tram</p>
-              <p *ngFor="let tram of tclStop.tramLines">{{ tram }}</p>
-              <p *ngIf="tclStop.busLines.length > 0">Bus</p>
-              <p *ngFor="let bus of tclStop.busLines">{{ bus }}</p>
+      <div *ngIf="tclStopPoints.length">
+        <h3 class="subtitle">ACCÈS</h3>
+        <div class="flex column container">
+          <div *ngFor="let tclStop of tclStopPoints | slice: 0:3" class="flex column tclStop">
+            <p>{{ tclStop.name }}</p>
+            <div class="flex">
+              <p *ngIf="tclStop.subLines.length" class="bold">Métro&nbsp;:&nbsp;</p>
+              <p *ngFor="let sub of tclStop.subLines" class="line">{{ sub }}</p>
+            </div>
+            <div class="flex">
+              <p *ngIf="tclStop.tramLines.length" class="bold">Tram&nbsp;:&nbsp;</p>
+              <p *ngFor="let tram of tclStop.tramLines" class="line">{{ tram }}</p>
+            </div>
+            <div class="flex">
+              <p *ngIf="tclStop.busLines.length" class="bold">Bus&nbsp;:&nbsp;</p>
+              <p *ngFor="let bus of tclStop.busLines" class="line">{{ bus }}</p>
             </div>
           </div>
         </div>
       </div>
     </div>
-    <div *ngIf="structure.exceptionalClosures" class="bold-info">
-      <h3 class="subtitle">Précisions sur les horaires</h3>
+    <div *ngIf="structure.exceptionalClosures" class="mb20">
+      <h3 class="subtitle">PRÉCISIONS SUR LES HORAIRES</h3>
       <p>{{ structure.exceptionalClosures }}</p>
     </div>
     <div *ngIf="structure.remoteAccompaniment" class="bold-info">

src/app/shared/components/structure-detail-print/structure-detail-print.component.scss

@@ -12,19 +12,17 @@ h2 {
 }
 h3 {
   margin: 0 0 8px 0;
-  @include lato-regular-16;
+  @include lato-regular-14;
 }
 h4 {
-  margin-left: 0;
-  margin-bottom: 0;
-  margin-top: 4px;
+  margin: 0;
   @include lato-regular-14;
   color: $grey-2;
   text-transform: capitalize;
 }
 p,
 .custom-link {
-  @include lato-regular-16;
+  @include lato-regular-14;
   margin-top: 9px;
   margin-bottom: 9px;
   &.no-margin {
@@ -56,12 +54,10 @@ a {
   }
 }
 
-.structure-details-container > .structure-details-block {
-  .subtitle {
-    @include lato-bold-16;
-    margin-bottom: 10px;
-    color: $grey-3;
-  }
+.subtitle {
+  @include lato-bold-14;
+  margin-bottom: 8px;
+  color: $grey-3;
 }
 
 .structure-details-container > .structure-details-block ~ .structure-details-block {
@@ -82,7 +78,7 @@ a {
 }
 
 .bold-info {
-  @include lato-bold-16;
+  @include lato-bold-14;
 }
 
 @media print {
@@ -103,6 +99,9 @@ a {
 }
 
 .mobile-column {
+  p {
+    margin: 0;
+  }
   @media #{$tablet} {
     flex-direction: row;
   }
@@ -122,7 +121,26 @@ a {
     flex-direction: column;
   }
 }
-.tclStop p {
-  margin-top: 0;
-  margin-bottom: 0.2rem;
+
+.tclStop {
+  margin-bottom: 4px;
+  .line:not(:empty):not(:last-child):after {
+    content: ',\00a0';
+  }
+  p {
+    margin-top: 0;
+  }
+}
+
+.timeContainer {
+  flex: 1;
+  box-sizing: border-box;
+  max-width: 50%;
+}
+.mb4 {
+  margin-bottom: 4px;
+}
+
+.mb20 {
+  margin-bottom: 20px;
 }

src/app/shared/components/svg-icon/svg-icon.component.scss

@@ -5,6 +5,20 @@
   align-items: center;
 }
 
+$sizes: (
+  16: 16px,
+  22: 22px,
+  26: 26px,
+  28: 28px,
+  30: 30px,
+  32: 32px,
+  40: 40px,
+  52: 52px,
+  75: 75px,
+  80: 80px,
+  112: 112px,
+);
+
 .icon {
   display: inline-block;
   height: 2em;
@@ -13,44 +27,11 @@
     width: unset;
     height: unset;
   }
-  &.icon-16 {
-    height: 16px;
-    width: 16px;
-  }
-  &.icon-26 {
-    height: 26px;
-    width: 26px;
-  }
-  &.icon-28 {
-    width: 28px;
-    height: 28px;
-  }
-  &.icon-30 {
-    width: 30px;
-    height: 30px;
-  }
-  &.icon-32 {
-    width: 32px;
-    height: 32px;
-  }
-  &.icon-52 {
-    width: 52px;
-    height: 52px;
-  }
-  &.icon-40 {
-    width: 40px;
-    height: 40px;
-  }
-  &.icon-75 {
-    width: 4.688em;
-  }
-  &.icon-80 {
-    height: 80px;
-    width: 80px;
-  }
-  &.icon-112 {
-    height: 112px;
-    width: 112px;
+  @each $sizename, $size in $sizes {
+    &.icon-#{$sizename} {
+      height: $size;
+      width: $size;
+    }
   }
   &.validation {
     height: 36px;

src/app/utils/formUtils.ts

@@ -30,7 +30,7 @@ export class formUtils {
       inputs: ['website', 'facebook', 'twitter', 'instagram'],
     },
     { step: structureFormStep.structurePublicTarget, name: 'Public admis', inputs: ['publics'] },
-
+    { step: structureFormStep.structurePublicTarget, name: 'Public admis - Optionnel', inputs: ['publics'] },
     {
       step: structureFormStep.structureDigitalHelpingAccompaniment,
       name: 'Aides au numérique',

src/styles.scss

@@ -294,6 +294,20 @@ button {
   }
 }
 
+.flex {
+  &.row {
+    flex-direction: row;
+  }
+  &.row-wrap {
+    flex-flow: row wrap;
+  }
+  &.column {
+    flex-direction: column;
+  }
+  box-sizing: border-box;
+  display: flex;
+}
+
 // PRINT
 
 @media print {