src/app/form/orientation-form-view/global-components/needs-selection/needs-selection.component.spec.ts

-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { NeedsSelectionComponent } from './needs-selection.component';
-
-describe('NeedsSelectionComponent', () => {
-  let component: NeedsSelectionComponent;
-  let fixture: ComponentFixture<NeedsSelectionComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ NeedsSelectionComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(NeedsSelectionComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/form/orientation-form-view/global-components/needs-selection/needs-selection.component.ts

 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { INeedItem, OrientationUtils } from '../../../../utils/orientationUtils';
-import { needsType } from '../../enums/needs.enum';
+import { NeedsType } from '../../enums/needs.enum';
 
 @Component({
   selector: 'app-needs-selection',
   templateUrl: './needs-selection.component.html',
-  styleUrls: ['./needs-selection.component.scss'],
 })
 export class NeedsSelectionComponent {
-  @Input() currentNeed: needsType;
+  @Input() currentNeed: NeedsType;
   @Output() setNeedType = new EventEmitter<any>();
   @Output() validate = new EventEmitter<any>();
   public needsList: INeedItem[] = new OrientationUtils().needsList;
 
-  public selectNeed(event: needsType) {
+  public selectNeed(event: NeedsType) {
     this.setNeedType.emit(event);
   }
-  public getSelected(): string | needsType {
+  public getSelected(): string | NeedsType {
     const selected = this.needsList.filter((need) => need.key == this.currentNeed)[0];
     if (selected) {
       this.validate.emit();

src/app/form/orientation-form-view/global-components/print-header/print-header.component.spec.ts

-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PrintHeaderComponent } from './print-header.component';
-
-describe('PrintHeaderComponent', () => {
-  let component: PrintHeaderComponent;
-  let fixture: ComponentFixture<PrintHeaderComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ PrintHeaderComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(PrintHeaderComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/form/orientation-form-view/global-components/print-header/print-header.component.ts

@@ -7,7 +7,6 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PrintHeaderComponent implements OnInit {
   public date: string;
-  constructor() {}
 
   ngOnInit(): void {
     this.date = new Date().toLocaleDateString('fr-FR', {

src/app/form/orientation-form-view/global-components/progress-bar/progress-bar.component.html

-<div class="progressBar">
-  <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="20px">
-    <label [ngClass]="{ validate: currentPage == nbPagesForm }" for="progressForm"
-      >{{ progressStatus > 100 ? 100 : (progressStatus | number: '1.0-0') }}%
-    </label>
-    <progress
-      id="progressForm"
-      [ngClass]="{ validate: currentPage == nbPagesForm }"
-      max="100"
-      [value]="progressStatus"
-    ></progress>
-  </div>
-</div>
-<div class="topSpacing"></div>

src/app/form/orientation-form-view/global-components/progress-bar/progress-bar.component.scss

-@import '../../../../../assets/scss/layout';
-@import '../../../../../assets/scss/color';
-@import '../../../../../assets/scss/typography';
-@import '../../../../../assets/scss/breakpoint';
-
-.progressBar {
-  max-width: 980px;
-  margin: 1.5rem auto;
-
-  @media #{$tablet} {
-    margin: 1rem 0.5rem;
-  }
-  @media print {
-    display: none;
-  }
-
-  progress {
-    width: 100%;
-    height: 6px;
-    border-radius: 7px;
-    &::-webkit-progress-bar {
-      background-color: $grey-6;
-      border-radius: 7px;
-    }
-    &::-webkit-progress-value {
-      background-color: $primary-color;
-      border-radius: 12px;
-    }
-    &::-moz-progress-bar {
-      background-color: $primary-color;
-      border-radius: 12px;
-    }
-  }
-  label {
-    @include lato-bold-14;
-    color: $primary-color;
-    min-width: 26px;
-  }
-}
-.topSpacing {
-  margin-top: 1rem;
-}

src/app/form/orientation-form-view/global-components/progress-bar/progress-bar.component.spec.ts

-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ProgressBarComponent } from './progress-bar.component';
-
-describe('ProgressBarComponent', () => {
-  let component: ProgressBarComponent;
-  let fixture: ComponentFixture<ProgressBarComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ ProgressBarComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ProgressBarComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/form/orientation-form-view/global-components/progress-bar/progress-bar.component.ts

-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { mediationSteps } from '../../enums/mediationSteps.enum';
-
-@Component({
-  selector: 'app-progress-bar',
-  templateUrl: './progress-bar.component.html',
-  styleUrls: ['./progress-bar.component.scss'],
-})
-export class ProgressBarComponent implements OnChanges {
-  @Input() currentPage: number;
-  @Input() nbSteps: number;
-  public progressStatus: number;
-  public nbPagesForm: number = Object.keys(mediationSteps).length / 2;
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.currentPage) {
-      this.progressStatus = ((this.currentPage + 1) / this.nbPagesForm) * 100;
-    }
-  }
-}

src/app/form/orientation-form-view/global-components/select/select.component.html

+<p>select works!</p>

src/app/form/orientation-form-view/global-components/select/select.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { ButtonType } from '../../../../shared/components/button/buttonType.enum';
+import { Module } from '../../../../structure-list/models/module.model';
+
+@Component({
+  selector: 'app-select',
+  templateUrl: './select.component.html',
+})
+export class SelectComponent {
+  @Input() form: FormGroup;
+  @Output() checkValidation = new EventEmitter<any>();
+  public equipmentType: Module[] = [];
+  public selectedModules: Module[] = [];
+  public buttonTypeEnum = ButtonType;
+
+  public handleClick(module: Module): void {
+    if (this.isSelectedModule(module.id)) {
+      const index = this.selectedModules.findIndex((_module) => _module.id === module.id);
+      this.selectedModules.splice(index, 1);
+    } else {
+      this.selectedModules.push(module);
+    }
+    this.form.get('filters').patchValue(this.selectedModules);
+    this.checkValidation.emit();
+  }
+
+  public isSelectedModule(moduleId: string): boolean {
+    return this.selectedModules.map((module) => module.id).includes(moduleId);
+  }
+}

src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.html

+<h2>Quelle structure oriente le bénéficiare ?</h2>
+<div *ngIf="hasStructures && structuresLinked.length >= 2" class="select-structure border">
+  <div class="number">{{ structuresLinked.length }} structures sont associées à votre compte</div>
+  <div
+    *ngFor="let structure of structuresLinked"
+    (click)="select(structure)"
+    [class]="structure === selected ? 'item-selected structure-item' : 'structure-item'"
+  >
+    <div class="item-frame">
+      <div class="name">{{ structure.structureName }}</div>
+      <div class="commune">{{ structure.address.commune }}</div>
+    </div>
+    <app-svg-icon
+      class="form-icon"
+      *ngIf="structure === selected"
+      [iconClass]="'icon-26'"
+      [type]="'form'"
+      [icon]="'validate'"
+    ></app-svg-icon>
+  </div>
+</div>
+<div *ngIf="!hasStructures" class="select-structure">
+  <form [formGroup]="form">
+    <div class="form-group" fxLayout="column">
+      <label for="structureName">Nom de votre structure</label>
+      <div fxLayout="row" fxLayoutGap="13px">
+        <input
+          type="text"
+          autocomplete="on"
+          formControlName="structureName"
+          class="form-input"
+          (input)="updatedForm('structureName', $event.target.value)"
+        />
+        <app-svg-icon
+          *ngIf="form.get('structureName').valid"
+          [iconClass]="'validation'"
+          [type]="'form'"
+          [icon]="'validate'"
+        ></app-svg-icon>
+        <app-svg-icon
+          *ngIf="form.get('structureName').value && !form.get('structureName').valid"
+          [iconClass]="'validation'"
+          [type]="'form'"
+          [icon]="'notValidate'"
+        ></app-svg-icon>
+      </div>
+    </div>
+    <div class="form-group" fxLayout="column">
+      <label for="structureMail">Email de votre structure</label>
+      <p class="notRequired">Facultatif</p>
+      <div fxLayout="row" fxLayoutGap="13px">
+        <input
+          type="text"
+          autocomplete="on"
+          formControlName="structureMail"
+          class="form-input"
+          (input)="updatedForm('structureMail', $event.target.value)"
+        />
+        <app-svg-icon
+          *ngIf="form.get('structureMail').value && form.get('structureMail').valid"
+          [iconClass]="'validation'"
+          [type]="'form'"
+          [icon]="'validate'"
+        ></app-svg-icon>
+        <app-svg-icon
+          *ngIf="form.get('structureMail').value && !form.get('structureMail').valid"
+          [iconClass]="'validation'"
+          [type]="'form'"
+          [icon]="'notValidate'"
+        ></app-svg-icon>
+      </div>
+    </div>
+    <div class="form-group" fxLayout="column">
+      <label for="structurePhone">Téléphone de votre structure</label>
+      <p class="notRequired">Facultatif</p>
+      <div fxLayout="row" fxLayoutGap="13px">
+        <input
+          type="phone"
+          autocomplete="on"
+          (input)="updatedForm('structurePhone', $event.target.value)"
+          formControlName="phone"
+          class="form-input"
+        />
+        <app-svg-icon
+          *ngIf="form.get('structurePhone').value && form.get('structurePhone').valid"
+          [iconClass]="'validation'"
+          [type]="'form'"
+          [icon]="'validate'"
+        ></app-svg-icon>
+        <app-svg-icon
+          *ngIf="form.get('structurePhone').value && !form.get('structurePhone').valid"
+          [iconClass]="'validation'"
+          [type]="'form'"
+          [icon]="'notValidate'"
+        ></app-svg-icon>
+      </div>
+    </div>
+  </form>
+</div>

src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.scss

+@import '../../../../../assets/scss/color';
+@import '../../../../../assets/scss/typography';
+@import '../../../../../assets/scss/inputs';
+@import '../../../../../assets/scss/breakpoint';
+
+.select-structure {
+  width: 380px;
+  .number {
+    padding: 1rem;
+    color: $grey-3;
+    @include lato-regular-13;
+  }
+  &.border {
+    border: solid 2px $grey-8;
+  }
+  .structure-item {
+    cursor: pointer;
+    padding-left: 1rem;
+    height: 76px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border: solid 2px transparent;
+    border-top-color: $grey-8;
+
+    &:hover {
+      .name {
+        text-decoration: underline;
+      }
+    }
+    &.item-selected {
+      border: solid 2px $green-1;
+    }
+  }
+}
+
+.name {
+  @include lato-regular-16;
+  font-weight: 600;
+  color: $grey-1;
+}
+
+.commune {
+  @include lato-regular-13;
+  font-style: italic;
+  color: $grey-3;
+  margin: 4px 0px 0px 0px;
+}
+
+.form-icon {
+  margin: 0px 24px;
+  display: flex;
+  align-items: center;
+}
+
+.notRequired {
+  margin-bottom: 0;
+}

src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.ts

+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { UntypedFormGroup } from '@angular/forms';
+import { Structure } from '../../../../models/structure.model';
+import { User } from '../../../../models/user.model';
+import { StructureService } from '../../../../services/structure.service';
+
+@Component({
+  selector: 'app-structure-orientator',
+  templateUrl: './structure-orientator.component.html',
+  styleUrls: ['./structure-orientator.component.scss'],
+})
+export class StructureOrientatorComponent implements OnInit {
+  @Input() form: UntypedFormGroup;
+  @Input() profile: User;
+  @Output() validatePage = new EventEmitter<boolean>();
+  public structuresLinked: Structure[] = [];
+  public hasStructures: boolean = false;
+  public selected: Structure;
+  constructor(private structureService: StructureService) {}
+
+  ngOnInit(): void {
+    if (this.profile?.structuresLink?.length) {
+      this.hasStructures = true;
+
+      for (let structure of this.profile.structuresLink) {
+        this.structureService
+          .getStructure(structure)
+          .subscribe((_structure) => this.structuresLinked.push(new Structure(_structure)));
+      }
+    } else {
+      this.hasStructures = false;
+    }
+  }
+
+  public select(structure: Structure): void {
+    this.selected = structure;
+    this.form.get('structureOrientator').patchValue({
+      structureName: structure.structureName,
+      structureMail: structure.contactMail,
+      structurePhone: structure.contactPhone,
+    });
+    this.validatePage.emit(this.form.get('structureOrientator').valid);
+  }
+}

src/app/form/orientation-form-view/interfaces/filtersForm.interface.ts

+import { FormControl } from '@angular/forms';
+import { Module } from '../../../structure-list/models/module.model';
+
+export interface FiltersForm {
+  filters: FormControl<Module[]>;
+}

src/app/form/orientation-form-view/interfaces/onlineDemarchesForm.interface.ts

+import { FormControl } from '@angular/forms';
+import { Module } from '../../../structure-list/models/module.model';
+
+export interface OnlineDemarchesForm {
+  onlineDemarcheType: FormControl<Module[]>;
+  accompanimentType: FormControl<number>;
+}

src/app/form/orientation-form-view/interfaces/onlineMediation.interface.ts

@@ -2,6 +2,6 @@ export interface IOnlineMediation {
   name: string;
   surname: string;
   phone: string;
-  onlineDemarchType: string[];
+  onlineDemarcheType: string[];
   dateSlot: { day: string; hours: string };
 }

src/app/form/orientation-form-view/interfaces/structureOrientationForm.interface.ts

+import { FormControl, FormGroup } from '@angular/forms';
+import { Module } from '../../../structure-list/models/module.model';
+import { StructureOrientator } from './structureOrientator.interface';
+
+export interface StructureOrientationForm {
+  filters: FormControl<Module[]>;
+  pmrAccess: FormControl<boolean>;
+  address: FormControl<string>;
+  structureChoice: FormControl<string[]>;
+  name: FormControl<string>;
+  surname: FormControl<string>;
+  comments: FormControl<string>;
+  structureOrientator: FormGroup<StructureOrientator>;
+}

src/app/form/orientation-form-view/interfaces/structureOrientator.interface.ts

+import { FormControl } from '@angular/forms';
+export interface StructureOrientator {
+  structureName: FormControl<string>;
+  structureMail: FormControl<string>;
+  structurePhone: FormControl<string>;
+}

src/app/form/orientation-form-view/interfaces/trainingForm.interface.ts

+import { FormControl, FormGroup } from '@angular/forms';
+import { Module } from '../../../structure-list/models/module.model';
+import { OnlineDemarchesForm } from './onlineDemarchesForm.interface';
+
+export interface TrainingForm {
+  filters: FormControl<Module[]>;
+  onlineDemarches: FormGroup<OnlineDemarchesForm>;
+}