src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.spec.ts

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

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

+import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
+import { INeedItem } from '../../../../utils/orientationUtils';
+import { needsType } from '../../enums/needs.enum';
+
+@Component({
+  selector: 'app-multi-radio-form',
+  templateUrl: './multi-radio-form.component.html',
+  styleUrls: ['./multi-radio-form.component.scss'],
+})
+export class MultiRadioFormComponent implements OnInit {
+  @Input() items: INeedItem[];
+  @Input() selected: any;
+  @Output() handleSelect = new EventEmitter<any>();
+
+  public selectedItem: string;
+
+  ngOnInit() {
+    if (this.selected) this.selectedItem = this.selected;
+  }
+
+  public selectItem(key: string): void {
+    this.handleSelect.emit(key);
+    this.selectedItem = key;
+  }
+}

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

+<div class="footerForm" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center">
+  <app-button
+    *ngIf="currentStep !== null"
+    (action)="prevPage()"
+    [text]="'Précédent'"
+    [iconType]="'form'"
+    [iconBtn]="'chevronLeft'"
+  ></app-button>
+  <app-button
+    (action)="nextPage()"
+    [text]="isLastStep ? 'Terminer' : 'Suivant'"
+    [iconBtn]="!isLastStep ? 'chevronRight' : 'finish'"
+    [iconType]="'form'"
+    [iconPos]="!isLastStep ? 'right' : 'left'"
+    [style]="buttonTypeEnum.Primary"
+    [disabled]="!isPageValid"
+  >
+  </app-button>
+</div>

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

+.footerForm {
+  @media print {
+    display: none !important;
+  }
+}

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

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

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

+import { AfterContentChecked, Component, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
+import { ButtonType } from '../../../../shared/components/button/buttonType.enum';
+import { mediationSteps } from '../../enums/mediationSteps.enum';
+import { needsType } from '../../enums/needs.enum';
+
+@Component({
+  selector: 'app-navigation',
+  templateUrl: './navigation.component.html',
+  styleUrls: ['./navigation.component.scss'],
+})
+export class NavigationComponent implements OnInit {
+  @Input() currentStep: mediationSteps;
+  @Input() isPageValid: boolean;
+  @Input() needType: needsType;
+  @Output() goNext = new EventEmitter<any>();
+  @Output() goPrev = new EventEmitter<any>();
+
+  public buttonTypeEnum = ButtonType;
+  public isLastStep: boolean = false;
+  public needsTypeEnum = needsType;
+  constructor() {}
+
+  ngOnInit(): void {
+    this.checkLastStep();
+    if (this.currentStep === mediationSteps.mediationRecap && this.needType === needsType.onlineDemarch) {
+      this.isLastStep = true;
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes) {
+      this.checkLastStep();
+    }
+  }
+  public checkLastStep(): void {
+    if (this.currentStep === mediationSteps.mediationRecap && this.needType === needsType.onlineDemarch) {
+      this.isLastStep = true;
+    } else this.isLastStep = false;
+  }
+
+  public nextPage(isPrint?: boolean) {
+    this.goNext.emit(isPrint);
+  }
+  public prevPage() {
+    this.goPrev.emit();
+  }
+}

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

+<h2>Quels sont les besoins du bénéficiaire ?</h2>
+<app-multi-radio-form
+  [items]="needsList"
+  [selected]="getSelected()"
+  (handleSelect)="selectNeed($event)"
+></app-multi-radio-form>

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

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

+<div class="header-print">
+  <div class="header-infos">
+    <img src="../../../../../assets/logos/metropoleGrandLyon.svg" alt="logo métropole" />
+    <div class="header-title">
+      <div>Réseau des acteurs de l'inclusion numérique de la Métropole de Lyon</div>
+      <h3>Fiche d'orientation</h3>
+    </div>
+  </div>
+  <p class="informationHeader date">{{ date }}</p>
+</div>
+<hr />

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

+@import '../../../../../assets/scss/color';
+@import '../../../../../assets/scss/typography';
+
+.header-infos {
+  display: flex;
+  align-items: flex-start;
+  h3 {
+    @include lato-bold-16;
+    margin-top: 0.25rem;
+  }
+  img {
+    margin-right: 3rem;
+    width: 160px;
+  }
+}
+.date {
+  @include lato-regular-13;
+  text-align: right;
+  text-transform: capitalize;
+  font-style: italic;
+  margin-bottom: 0.5rem;
+  color: $grey-3;
+}
+hr {
+  height: 1px;
+  background: $grey-3;
+}

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

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-print-header',
+  templateUrl: './print-header.component.html',
+  styleUrls: ['./print-header.component.scss'],
+})
+export class PrintHeaderComponent implements OnInit {
+  public date: string;
+  constructor() {}
+
+  ngOnInit(): void {
+    this.date = new Date().toLocaleDateString('fr-FR', {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+    });
+  }
+}

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/interfaces/onlineMediation.interface.ts

+export interface IOnlineMediation {
+  name: string;
+  surname: string;
+  phone: string;
+  onlineDemarchType: string[];
+  dateSlot: { day: string; hours: string };
+}

src/app/form/orientation-form-view/online-demarch/accompaniment-type/accompaniment-type.component.html

+<h2>De quel accompagnement a besoin le bénéficiaire ?</h2>
+
+<app-multi-radio-form
+  [items]="accompanimentTypes"
+  [selected]="selected"
+  (handleSelect)="handleSelect($event)"
+></app-multi-radio-form>