src/app/form/form-view/personal-offer-form/personal-offer-training-type/personal-offer-training-type.component.spec.ts

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

src/app/form/form-view/personal-offer-form/personal-offer-training-type/personal-offer-training-type.component.ts

+import { Component, Input } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { Category } from '../../../../structure-list/models/category.model';
+
+@Component({
+  selector: 'app-personal-offer-training-type',
+  templateUrl: './personal-offer-training-type.component.html',
+  styleUrls: ['./personal-offer-training-type.component.scss'],
+})
+export class PersonalOfferTrainingTypeComponent {
+  @Input() structureName: string;
+  @Input() personalOfferForm: FormGroup;
+
+  public setTrainingsFromCategories(categories: Category[]) {
+    for (const categorie of categories) {
+      const moduleIds: string[] = categorie.modules.map((module) => module.id);
+      if (this.personalOfferForm.get(categorie.id)) {
+        this.personalOfferForm.get(categorie.id).patchValue(moduleIds);
+      }
+    }
+  }
+}

src/app/form/form-view/personal-offer-form/personalOfferFormStep.enum.ts

+export enum personalOfferFormStep {
+  personalOfferAccompaniment,
+  personalOfferTrainingType,
+  personalOfferStructureChoice,
+  personalOfferFinishedInfo,
+}

src/app/form/form-view/profile-form/profile-employer-selection/profile-employer-selection.component.html

+<form [formGroup]="profileForm">
+  <div class="title">
+    <h3>Qui vous emploie&nbsp;?</h3>
+    <p>L’employeur demandé est celui qui figure sur votre fiche de paie (ou fiche de poste)</p>
+  </div>
+  <div class="search-structure">
+    <div fxLayout="column" fxLayoutAlign="space-between" class="form-group search">
+      <label for="employer">Employeur</label>
+      <div fxLayout="row" fxLayoutGap="13px">
+        <input
+          id="search-employer"
+          type="text"
+          (input)="onSearchChange($event.target.value)"
+          class="form-input"
+          autocomplete="off"
+          #searchEmployer
+        />
+      </div>
+    </div>
+    <div class="scroll">
+      <div class="autocomplete-items" *ngIf="!isAlreadySearching">
+        <p *ngFor="let employer of employers" (click)="selectedResult(employer)" class="autocomplete-item">
+          {{ employer.name }}
+        </p>
+      </div>
+    </div>
+  </div>
+</form>

src/app/form/form-view/profile-form/profile-employer-selection/profile-employer-selection.component.scss

+@import '../../../../../assets/scss/color';
+@import '../../../../../assets/scss/typography';
+@import '../../../../../assets/scss/inputs';
+@import '../../../../../assets/scss/breakpoint';
+
+.search-structure {
+  width: 380px;
+}
+
+.search {
+  width: 380px;
+  border-radius: 20px;
+  margin: 4px 0px;
+
+  .search-input {
+    height: 34px;
+    border: 0px;
+    @include lato-regular-15;
+    font-style: italic;
+    padding: 0px;
+    margin: 0px 0px 0px 5px;
+  }
+}
+
+::ng-deep .searchIcon {
+  padding-right: 12px;
+}
+
+.nb {
+  padding: 0px 0px 0px 16px;
+  margin: 16px 0px;
+}
+
+.nb-text {
+  @include lato-regular-13;
+  color: $grey-3;
+}
+
+.structure-list {
+  margin: 16px 0px;
+}
+
+.filet {
+  border-width: 0px 0px 1px 0px;
+  border-style: solid;
+  border-color: $grey-8;
+}
+
+.form-list {
+  cursor: pointer;
+  height: 76px;
+  border-width: 2px;
+  border-style: solid;
+  border-color: $white;
+  &:hover {
+    background: $primary-color-light;
+    border-color: $primary-color-light;
+  }
+
+  &.item-selected {
+    border-color: $green-1;
+    &:hover {
+      border-color: $green-1;
+      background: $white;
+    }
+  }
+}
+
+.item-frame {
+  padding: 0px 0px 0px 16px;
+}
+
+.name {
+  @include lato-regular-16;
+  font-weight: 600;
+  color: $grey-1;
+}
+
+.commune {
+  @include lato-regular-13;
+  font-style: italic;
+  color: $grey-3;
+  margin: 6px 0px;
+}
+
+.create-text {
+  @include lato-regular-15;
+  color: $grey-1;
+  margin: 8px 0px;
+}
+
+.form-icon {
+  margin: 0px 24px;
+}
+
+.search-bar {
+  display: flex;
+  flex-direction: column;
+  * {
+    width: 400px;
+  }
+}
+.autocomplete-items {
+  width: 296px;
+}

src/app/form/form-view/profile-form/profile-employer-selection/profile-employer-selection.component.spec.ts

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

src/app/form/form-view/profile-form/profile-employer-selection/profile-employer-selection.component.ts

+import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { Employer } from '../../../../models/employer.model';
+import { ProfileService } from '../../../../profile/services/profile.service';
+import { ButtonType } from '../../../../shared/components/button/buttonType.enum';
+
+@Component({
+  selector: 'app-profile-employer-selection',
+  templateUrl: './profile-employer-selection.component.html',
+  styleUrls: ['./profile-employer-selection.component.scss'],
+})
+export class ProfileEmployerSelectionComponent {
+  @Input() profileForm: FormGroup;
+  @Output() validateForm = new EventEmitter<Employer>();
+  @ViewChild('searchEmployer', { static: true }) searchEmployer: ElementRef;
+  public buttonTypeEnum = ButtonType;
+  public employers: Employer[];
+  public isAlreadySearching = false;
+
+  constructor(private profileService: ProfileService) {}
+
+  public onSearchChange(searchString: string): void {
+    if (searchString.length <= 2) this.getEmployers();
+    this.getEmployers(searchString);
+    this.profileForm.get('employer').patchValue({
+      name: searchString,
+      validated: false,
+    });
+    this.validateForm.emit();
+  }
+
+  public selectedResult(employer: Employer): void {
+    this.searchEmployer.nativeElement.value = employer.name;
+    this.profileForm.get('employer').patchValue({
+      name: employer.name,
+      validated: employer.validated,
+    });
+    this.employers = [];
+    this.validateForm.emit();
+  }
+
+  private getEmployers(searchString: string = '') {
+    if (!this.isAlreadySearching) {
+      this.isAlreadySearching = true;
+      this.profileService.getEmployers(searchString).subscribe((employers) => {
+        this.employers = employers;
+        this.isAlreadySearching = false;
+      });
+    }
+  }
+}

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

+<div class="no-max-width">
+  <ng-container *ngIf="currentStep === profileFormStepEnum.profileBeginningInfo">
+    <app-information-step
+      [step]="0"
+      (goNext)="setValidationsForm()"
+      [formType]="formTypeEnum.profile"
+    ></app-information-step>
+  </ng-container>
+  <ng-container *ngIf="currentStep === profileFormStepEnum.profileEmployerSelection">
+    <app-profile-employer-selection
+      [profileForm]="profileForm"
+      (validateForm)="setValidationsForm()"
+    ></app-profile-employer-selection>
+  </ng-container>
+  <ng-container *ngIf="currentStep === profileFormStepEnum.profileJobSelection">
+    <app-profile-job-selection
+      [profileForm]="profileForm"
+      (validateForm)="setValidationsForm()"
+    ></app-profile-job-selection>
+  </ng-container>
+</div>

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

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

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

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { formType } from '../formType.enum';
+import { profileFormStep } from './profileFormStep.enum';
+
+@Component({
+  selector: 'app-profile-form',
+  templateUrl: './profile-form.component.html',
+})
+export class ProfileFormComponent {
+  @Input() profileForm: FormGroup;
+  @Input() nbSteps: number;
+  @Input() currentStep: profileFormStep;
+  @Output() pageValid = new EventEmitter<any>();
+  @Output() goNext = new EventEmitter<any>();
+
+  public isPageValid: boolean;
+  public profileFormStepEnum = profileFormStep;
+  public pagesValidation = [];
+  public formTypeEnum = formType;
+
+  public setValidationsForm(): void {
+    this.pagesValidation[profileFormStep.profileBeginningInfo] = {
+      valid: true,
+    };
+    this.pagesValidation[profileFormStep.profileEmployerSelection] = {
+      valid: this.profileForm.get('employer').valid,
+    };
+    this.pagesValidation[profileFormStep.profileJobSelection] = {
+      valid: this.profileForm.get('job').get('name').valid,
+    };
+    this.updatePageValid();
+  }
+
+  /**
+   * Update valid page or return page validity of the given index
+   * @param {number} [index] - Page index
+   */
+  private updatePageValid(index?: number): boolean {
+    if (index) {
+      return this.pagesValidation[index].valid;
+    }
+    this.isPageValid = this.pagesValidation[this.currentStep].valid;
+    if (this.isPageValid) {
+      if (this.currentStep === profileFormStep.profileBeginningInfo) {
+        this.goNext.emit();
+      } else {
+        this.pageValid.emit();
+      }
+    } else {
+      this.pageValid.emit(false);
+    }
+    return this.isPageValid;
+  }
+}

src/app/form/form-view/profile-form/profile-job-selection/profile-job-selection.component.html

+<form [formGroup]="profileForm">
+  <div class="title">
+    <h3>Quelle est votre fonction&nbsp;?</h3>
+    <p>Cette information sera visible sur votre profil public</p>
+  </div>
+  <div fxLayout="column" fxLayoutGap="32px">
+    <div class="btn-grid">
+      <span *ngFor="let job of jobs">
+        <app-button
+          [ngClass]="{ selectedChoice: true }"
+          [extraClass]="isSelectedJob(job) ? 'selected' : ''"
+          [style]="buttonTypeEnum.CheckButton"
+          [text]="job.name"
+          (action)="selectedResult(job)"
+        ></app-button>
+      </span>
+    </div>
+    <div *ngIf="isUnexistingJob()" fxLayout="column" fxLayoutAlign="space-between" class="form-group search">
+      <label for="employer">Quelle fonction occupez-vous ?</label>
+      <input type="text" (input)="newJob($event.target.value)" class="form-input" autocomplete="off" />
+    </div>
+  </div>
+</form>

src/app/form/form-view/profile-form/profile-job-selection/profile-job-selection.component.scss

+@import '../../../../../assets/scss/buttons';

src/app/form/form-view/profile-form/profile-job-selection/profile-job-selection.component.spec.ts

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

src/app/form/form-view/profile-form/profile-job-selection/profile-job-selection.component.ts

+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { Job } from '../../../../models/job.model';
+import { ProfileService } from '../../../../profile/services/profile.service';
+import { ButtonType } from '../../../../shared/components/button/buttonType.enum';
+
+@Component({
+  selector: 'app-profile-job-selection',
+  templateUrl: './profile-job-selection.component.html',
+  styleUrls: ['./profile-job-selection.component.scss'],
+})
+export class ProfileJobSelectionComponent implements OnInit {
+  @Input() profileForm: FormGroup;
+  @Output() validateForm = new EventEmitter<Job>();
+  public jobs: Job[];
+  public selectedJob: Job;
+  public buttonTypeEnum = ButtonType;
+
+  constructor(private profileService: ProfileService) {}
+
+  ngOnInit(): void {
+    // getJobs
+    this.profileService.getJobs().subscribe((jobs) => {
+      this.jobs = [...jobs, new Job({ name: 'Autre' })];
+    });
+  }
+
+  public selectedResult(job: Job): void {
+    this.selectedJob = job;
+    if (!this.isUnexistingJob()) {
+      this.profileForm.get('job').setValue({
+        name: job.name,
+        validated: job.validated,
+        hasPersonalOffer: job.hasPersonalOffer,
+      });
+    } else {
+      this.profileForm.get('job').setValue({
+        name: '',
+        validated: false,
+        hasPersonalOffer: true,
+      });
+    }
+    this.validateForm.emit();
+  }
+
+  public isSelectedJob(job: Job): boolean {
+    if (this.selectedJob && this.selectedJob.name === job.name) return true;
+    return false;
+  }
+
+  public isUnexistingJob(): boolean {
+    if (this.selectedJob && this.selectedJob.name === 'Autre') return true;
+    return false;
+  }
+
+  public newJob(event: any): any {
+    this.profileForm.get('job').patchValue({
+      name: event,
+      validated: false,
+    });
+    this.validateForm.emit();
+  }
+}

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

+<div fxLayout="column">
+  <h2>Dans quelle structure travaillez-vous ?</h2>
+  <div class="search-structure">
+    <div fxLayout="row" fxLayoutAlign="space-between" class="form-input search">
+      <input
+        type="text"
+        id="structureName"
+        (input)="onSearchChange($event.target.value)"
+        placeholder="Rechercher une structure"
+        class="form-input search-input"
+        autocomplete="off"
+      />
+      <app-svg-icon [iconClass]="'searchIcon icon-32'" [type]="'ico'" [icon]="'search'"></app-svg-icon>
+    </div>
+    <div class="scroll">
+      <div *ngIf="!isAlreadySearching">
+        <div class="nb">
+          <div *ngIf="structures">
+            <div *ngIf="searchString.length == 0" class="nb-text">{{ structures.length }} structures existantes</div>
+            <div *ngIf="searchString.length > 0" class="nb-text" [ngPlural]="structures.length">
+              <ng-template ngPluralCase="0">0 structure trouvée</ng-template>
+              <ng-template ngPluralCase="1">1 structure trouvée</ng-template>
+              <ng-template ngPluralCase="other">{{ structures.length }} structures trouvées</ng-template>
+            </div>
+          </div>
+        </div>
+
+        <div class="structure-list">
+          <div *ngFor="let structure of structures" (click)="selectedResult(structure)" class="filet">
+            <div
+              fxLayout="column"
+              fxLayoutAlign="space-around"
+              class="form-list"
+              [class]="
+                structure['alreadySelected']
+                  ? 'already-selected'
+                  : isSelectedStructure(structure)
+                  ? 'item-selected'
+                  : ''
+              "
+            >
+              <div fxLayout="row" fxLayoutAlign="space-between center">
+                <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="isSelectedStructure(structure)"
+                  [iconClass]="'icon-26'"
+                  [type]="'form'"
+                  [icon]="'validate'"
+                ></app-svg-icon>
+                <div *ngIf="structure['alreadySelected']" class="sticker">Déjà<br />sélectionnée</div>
+              </div>
+            </div>
+          </div>
+          <div class="item-frame">
+            <div class="create-text">
+              Cette structure n’existe pas encore sur Res’in.<br />
+              <span class="question">Souhaitez-vous la référencer ?</span>
+            </div>
+            <app-button
+              (action)="addStructure()"
+              [text]="'Créer une structure'"
+              [style]="buttonTypeEnum.Primary"
+            ></app-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/form/form-view/profile-form/profile-structure-choice/profile-structure-choice.component.scss

+@import '../../../../../assets/scss/color';
+@import '../../../../../assets/scss/typography';
+@import '../../../../../assets/scss/inputs';
+@import '../../../../../assets/scss/breakpoint';
+
+.search-structure {
+  width: 380px;
+}
+
+.search {
+  width: 380px;
+  border-radius: 20px;
+  padding: 0px 0px 0px 8px;
+  margin: 4px 0px;
+
+  .search-input {
+    height: 34px;
+    border: 0px;
+    @include lato-regular-15;
+    font-style: italic;
+    padding: 0px;
+    margin: 0px 0px 0px 5px;
+  }
+}
+
+::ng-deep .searchIcon {
+  padding-right: 12px;
+}
+
+.scroll {
+  height: 353px;
+  overflow-y: scroll;
+  border: 1px solid $grey-6;
+  margin: 16px 0px -1px 0px;
+}
+
+.nb {
+  padding: 0px 0px 0px 16px;
+  margin: 16px 0px;
+}
+
+.nb-text {
+  @include lato-regular-13;
+  color: $grey-3;
+}
+
+.structure-list {
+  margin: 16px 0px;
+}
+
+.filet {
+  border-width: 0px 0px 1px 0px;
+  border-style: solid;
+  border-color: $grey-8;
+}
+
+.form-list {
+  cursor: pointer;
+  height: 68px;
+  border-width: 2px;
+  border-style: solid;
+  border-color: $white;
+  &:hover {
+    background: $primary-color-light;
+    border-color: $primary-color-light;
+  }
+
+  &.item-selected {
+    border-color: $green-1;
+    &:hover {
+      border-color: $green-1;
+      background: $white;
+    }
+  }
+
+  &.already-selected {
+    background: $grey-8;
+    border-color: $grey-8;
+    background: $grey-8;
+
+    .sticker {
+      @include lato-regular-10;
+      font-weight: 700;
+      background: $white;
+      margin: 0px 10px;
+      width: 110px;
+      height: 32px;
+      text-align: center;
+      align-items: center;
+      display: flex;
+      place-content: center;
+    }
+  }
+}
+
+.item-frame {
+  padding: 0px 0px 0px 16px;
+}
+
+.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;
+}
+
+.create-text {
+  @include lato-regular-14;
+  color: $grey-1;
+  margin: 8px 0px;
+  .question {
+    font-weight: bold;
+  }
+}
+
+.form-icon {
+  margin: 0px 24px;
+  display: flex;
+  align-items: center;
+}

src/app/structure-list/components/structure-opening-status/structure-opening-status.component.spec.ts → src/app/form/form-view/profile-form/profile-structure-choice/profile-structure-choice.component.spec.ts

 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { StructureOpeningStatusComponent } from './structure-opening-status.component';
+import { ProfileStructureChoiceComponent } from './profile-structure-choice.component';
 
-describe('StructureOpeningStatusComponent', () => {
-  let component: StructureOpeningStatusComponent;
-  let fixture: ComponentFixture<StructureOpeningStatusComponent>;
+describe('ProfileStructureChoiceComponent', () => {
+  let component: ProfileStructureChoiceComponent;
+  let fixture: ComponentFixture<ProfileStructureChoiceComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ StructureOpeningStatusComponent ]
+      declarations: [ ProfileStructureChoiceComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(StructureOpeningStatusComponent);
+    fixture = TestBed.createComponent(ProfileStructureChoiceComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { Structure } from '../../../../models/structure.model';
+import { ProfileService } from '../../../../profile/services/profile.service';
+import { StructureService } from '../../../../services/structure.service';
+import { ButtonType } from '../../../../shared/components/button/buttonType.enum';
+import { Filter } from '../../../../structure-list/models/filter.model';
+
+@Component({
+  selector: 'app-profile-structure-choice',
+  templateUrl: './profile-structure-choice.component.html',
+  styleUrls: ['./profile-structure-choice.component.scss'],
+})
+export class ProfileStructureChoiceComponent implements OnInit {
+  @Input() structureForm: FormGroup;
+  @Output() validateForm = new EventEmitter<Structure>();
+  @Output() selectedStructure: EventEmitter<Structure> = new EventEmitter<Structure>();
+  @Output() createStructure = new EventEmitter<any>();
+  public searchString: string = '';
+  public structures: Structure[];
+  public selectedStructureItem: Structure;
+  public isAlreadySearching = false;
+  public buttonTypeEnum = ButtonType;
+  public profileStructuresLink: string[] = [];
+
+  constructor(private structureService: StructureService, private profileService: ProfileService) {}
+
+  ngOnInit(): void {
+    this.isAlreadySearching = true;
+    this.profileService.getProfile().then((profile) => {
+      this.isAlreadySearching = false;
+      this.profileStructuresLink = profile.structuresLink;
+      this.getStructures(null);
+    });
+  }
+
+  public onSearchChange(searchString: string) {
+    if (searchString.length < 3 && this.searchString == '') return;
+    this.searchString = searchString;
+    const filters: Filter[] = [];
+    if (searchString.length > 0) {
+      filters.push(new Filter('query', searchString));
+    }
+    this.getStructures(filters);
+  }
+
+  public selectedResult(structure: Structure): void {
+    if (structure['alreadySelected']) return;
+    if (this.selectedStructureItem) this.selectedStructureItem['selected'] = false;
+    this.selectedStructureItem = structure;
+    this.structureForm.patchValue({ _id: structure._id, structureName: structure.structureName });
+    this.validateForm.emit();
+  }
+
+  public isSelectedStructure(structure: Structure): boolean {
+    if (this.selectedStructureItem && this.selectedStructureItem._id === structure._id) return true;
+    return false;
+  }
+
+  private getStructures(filters: Filter[]) {
+    if (!this.isAlreadySearching) {
+      this.isAlreadySearching = true;
+      this.structureService.getStructuresByName(filters).subscribe((structures) => {
+        structures.forEach((structure) => {
+          if (this.profileStructuresLink.includes(structure._id)) {
+            structure['alreadySelected'] = true;
+          }
+        });
+        if (this.searchString == '') {
+          structures.sort((a, b) => a.structureName.localeCompare(b.structureName));
+        }
+        this.structures = structures;
+        this.isAlreadySearching = false;
+      });
+    }
+  }
+
+  public addStructure(): void {
+    this.createStructure.emit();
+  }
+}

src/app/form/form-view/profile-form/profileFormStep.enum.ts

+export enum profileFormStep {
+  profileBeginningInfo,
+  profileEmployerSelection,
+  profileJobSelection,
+}

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

+<form [formGroup]="structureForm" *ngIf="structureForm" (keyup.enter)="isPageValid && !isEditMode ? nextPage() : null">
+  <div class="title">
+    <h3>Quelles sont les modalités d'accueil de la structure&nbsp;?</h3>
+    <p>Plusieurs choix possibles</p>
+  </div>
+  <p class="missing-information" *ngIf="isEditMode && !structureForm.get('accessModality').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="accessModality" fxLayout="row wrap" fxLayoutGap="16px" fxLayoutAlign="flex-start" class="welcomingTerms">
+    <app-checkbox-form
+      *ngFor="let module of accessModality.modules"
+      [isChecked]="isInArray('accessModality', module.id)"
+      [text]="module.text"
+      [iconSvg]="module.id"
+      (checkEvent)="onCheckChange($event, 'accessModality', module.id)"
+    >
+    </app-checkbox-form>
+  </div>
+</form>