src/app/admin/admin.module.ts

-import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { PanelComponent } from './components/panel/panel.component';
-import { ClaimStructureComponent } from './components/claim-structure/claim-structure.component';
-import { ManageUsersComponent } from './components/manage-users/manage-users.component';
+import { NgModule } from '@angular/core';
+import { AgGridModule } from 'ag-grid-angular';
 import { SharedModule } from '../shared/shared.module';
-import { AdminStructuresListComponent } from './components/structures-list/admin-structures-list.component';
-import { ManageLockdownInfoComponent } from './components/lockdown-info/manage-lockdown-info.component';
 import { AdminRoutingModule } from './admin-routing.module';
-import { AgGridModule } from 'ag-grid-angular';
-import { DeleteUserComponent } from './components/manage-users/delete-user/delete-user.component';
-import { AdministredStructuresComponent } from './components/manage-users/administred-structures/administred-structures.component';
-import { ManageJobsComponent } from './components/manage-jobs/manage-jobs.component';
+import { ClaimStructureComponent } from './components/claim-structure/claim-structure.component';
+import { ManageLockdownInfoComponent } from './components/lockdown-info/manage-lockdown-info.component';
+import { DeleteEmployerComponent } from './components/manage-employers/delete-employer/delete-employer.component';
 import { ManageEmployersComponent } from './components/manage-employers/manage-employers.component';
-import { JobRenderer } from './components/manage-users/job-renderer/job-renderer.component';
-import { EmployerRenderer } from './components/manage-users/employer-renderer/employer-renderer.component';
+import { ValidateEmployerComponent } from './components/manage-employers/validate-employer/validate-employer.component';
 import { AttachedUsersComponent } from './components/manage-jobs/attached-users/attached-users.component';
 import { DeleteJobComponent } from './components/manage-jobs/delete-job/delete-job.component';
-import { DeleteEmployerComponent } from './components/manage-employers/delete-employer/delete-employer.component';
-import { ValidateJobComponent } from './components/manage-jobs/validate-job/validate-job.component';
-import { ValidateEmployerComponent } from './components/manage-employers/validate-employer/validate-employer.component';
 import { JobPersonalOffer } from './components/manage-jobs/jobPersonalOffer/job-personal-offer';
+import { ManageJobsComponent } from './components/manage-jobs/manage-jobs.component';
+import { ValidateJobComponent } from './components/manage-jobs/validate-job/validate-job.component';
+import { AdministredStructuresComponent } from './components/manage-users/administred-structures/administred-structures.component';
+import { DeleteUserComponent } from './components/manage-users/delete-user/delete-user.component';
+import { EmployerRenderer } from './components/manage-users/employer-renderer/employer-renderer.component';
+import { JobRenderer } from './components/manage-users/job-renderer/job-renderer.component';
+import { ManageUsersComponent } from './components/manage-users/manage-users.component';
+import { PanelComponent } from './components/panel/panel.component';
+import { AdminStructuresListComponent } from './components/structures-list/admin-structures-list.component';
 
 @NgModule({
   declarations: [

src/app/admin/components/lockdown-info/manage-lockdown-info.component.html

 <div *ngIf="isLoading" class="loader">
-  <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />
+  <img class="loader-gif" src="/assets/gif/loader_circle_grey.gif" alt />
 </div>
 <div *ngIf="!isLoading" fxLayout="column" fxLayoutAlign="center center">
   <H2>Gestion de l'affichage des infos Covid</H2>

src/app/app-routing.module.ts

@@ -4,7 +4,6 @@ import { AnnuaireComponent } from './annuaire/annuaire.component';
 import { CartoComponent } from './carto/carto.component';
 import { ContactComponent } from './contact/contact.component';
 import { FooterComponent } from './footer/footer.component';
-import { StructureListPrintComponent } from './form/orientation-form/component/structure-list-print/structure-list-print.component';
 import { AdminGuard } from './guards/admin.guard';
 import { AuthGuard } from './guards/auth.guard';
 import { LegalNoticeComponent } from './legal-notice/legal-notice.component';
@@ -15,11 +14,12 @@ import { ResetEmailComponent } from './reset-email/reset-email.component';
 import { ResetPasswordComponent } from './reset-password/reset-password.component';
 import { StructureResolver } from './resolvers/structure.resolver';
 import { PasswordFormComponent } from './shared/components';
+import { StructureListPrintComponent } from './shared/components/structure-list-print/structure-list-print.component';
 import { StructureDetailsComponent } from './structure-list/components/structure-details/structure-details.component';
+import { StructureListSearchPrintComponent } from './structure-list/components/structure-list-search-print/structure-list-search-print.component';
 import { StructureListComponent } from './structure-list/structure-list.component';
 import { StructureExcludeComponent } from './structure/structure-exclude/structure-exclude.component';
 import { StructureJoinComponent } from './structure/structure-join/structure-join.component';
-import { StructureListSearchPrintComponent } from './structure-list/components/structure-list-search-print/structure-list-search-print.component';
 
 const footerOutletRoute: Route = {
   path: '',
@@ -244,7 +244,21 @@ const routes: Routes = [
   },
   {
     path: 'orientation',
-    loadChildren: () => import('./form/orientation-form-view/orientation.module').then((m) => m.OrientationModule),
+    children: [
+      {
+        path: '',
+        loadChildren: () => import('./form/orientation-form-view/orientation.module').then((m) => m.OrientationModule),
+      },
+      {
+        path: '',
+        outlet: 'left-pane',
+        data: { fullScreen: true },
+        component: StructureDetailsComponent,
+        resolve: {
+          structure: StructureResolver,
+        },
+      },
+    ],
   },
   {
     path: 'home',

src/app/app.component.ts

 import { Component, OnInit } from '@angular/core';
-import { NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router';
+import {
+  GuardsCheckStart,
+  NavigationCancel,
+  NavigationEnd,
+  NavigationError,
+  NavigationStart,
+  Router,
+} from '@angular/router';
 import { ProfileService } from './profile/services/profile.service';
 import { AuthService } from './services/auth.service';
 import { RouterListenerService } from './services/routerListener.service';
@@ -41,8 +48,12 @@ export class AppComponent implements OnInit {
           break;
         }
 
+        case event instanceof GuardsCheckStart:
         case event instanceof NavigationEnd:
-        case event instanceof NavigationCancel:
+        case event instanceof NavigationCancel: {
+          this.loading = false;
+          break;
+        }
         case event instanceof NavigationError: {
           setTimeout(() => {
             this.loading = false;

src/app/app.module.ts

@@ -13,18 +13,13 @@ import { FilterModalComponent } from './annuaire/filter-modal/filter-modal.compo
 import { ResultListComponent } from './annuaire/result-list/result-list.component';
 import { SearchBarComponent } from './annuaire/search-bar/search-bar.component';
 import { AppComponent } from './app.component';
-import { CartoComponent } from './carto/carto.component';
+import { CartoModule } from './carto/carto.module';
 import { CustomBreakPointsProvider } from './config/custom-breakpoint';
 import { CustomHttpInterceptor } from './config/http-interceptor';
 import { ContactComponent } from './contact/contact.component';
 import { FooterComponent } from './footer/footer.component';
 import { FormViewModule } from './form/form-view/form-view.module';
 import { OrientationModule } from './form/orientation-form-view/orientation.module';
-import { OrientationComponent } from './form/orientation-form/component/orientation-modal/orientation-modal.component';
-import { StructureDetailPrintComponent } from './form/orientation-form/component/structure-detail-print/structure-detail-print.component';
-import { StructureListPrintComponent } from './form/orientation-form/component/structure-list-print/structure-list-print.component';
-import { StructurePrintHeaderComponent } from './form/orientation-form/component/structure-print-header/structure-print-header.component';
-import { OrientationFormComponent } from './form/orientation-form/orientation-form.component';
 import { AdminGuard } from './guards/admin.guard';
 import { AuthGuard } from './guards/auth.guard';
 import { DeactivateGuard } from './guards/deactivate.guard';
@@ -43,12 +38,8 @@ import { RouterListenerService } from './services/routerListener.service';
 import { UpdateService } from './services/update.service';
 import { DataShareConsentComponent } from './shared/components/data-share-consent/data-share-consent.component';
 import { SharedModule } from './shared/shared.module';
-import { CardComponent } from './structure-list/components/card/card.component';
-import { ModalFilterComponent } from './structure-list/components/modal-filter/modal-filter.component';
 import { StructureDetailsComponent } from './structure-list/components/structure-details/structure-details.component';
 import { StructureListSearchPrintComponent } from './structure-list/components/structure-list-search-print/structure-list-search-print.component';
-import { StructureListSearchComponent } from './structure-list/components/structure-list-search/structure-list-search.component';
-import { StructureListComponent } from './structure-list/structure-list.component';
 import { StructureExcludeComponent } from './structure/structure-exclude/structure-exclude.component';
 import { StructureJoinComponent } from './structure/structure-join/structure-join.component';
 
@@ -57,11 +48,6 @@ import { StructureJoinComponent } from './structure/structure-join/structure-joi
     AppComponent,
     HeaderComponent,
     FooterComponent,
-    CartoComponent,
-    StructureListComponent,
-    CardComponent,
-    StructureListSearchComponent,
-    ModalFilterComponent,
     StructureDetailsComponent,
     LegalNoticeComponent,
     PageComponent,
@@ -70,12 +56,7 @@ import { StructureJoinComponent } from './structure/structure-join/structure-joi
     ResetPasswordComponent,
     StructureJoinComponent,
     NewsletterSubscriptionComponent,
-    OrientationFormComponent,
-    StructureDetailPrintComponent,
-    StructureListPrintComponent,
-    StructurePrintHeaderComponent,
     DataShareConsentComponent,
-    OrientationComponent,
     LoginComponent,
     StructureExcludeComponent,
     AnnuaireComponent,
@@ -90,6 +71,7 @@ import { StructureJoinComponent } from './structure/structure-join/structure-joi
     AppRoutingModule,
     SharedModule,
     MapModule,
+    CartoModule,
     BrowserAnimationsModule,
     ToastrModule.forRoot(),
     FormViewModule,

src/app/carto/carto.component.html

-<div class="content-container">
+<div class="content-container" [ngClass]="{ 'height-100': isOrientationForm }">
   <div class="hide-on-print">
-    <app-structure-list-search (searchEvent)="getStructures($event)"></app-structure-list-search>
+    <app-structure-list-search (searchEvent)="getStructures($event)" [filters]="filters"></app-structure-list-search>
   </div>
   <div class="panes-container" fxLayout="row">
     <app-structure-list
       (searchEvent)="getStructures($event)"
       [structureList]="structures"
+      [isOrientation]="isOrientationForm"
       [location]="currentLocation"
       (displayMapMarkerId)="setMapMarkerId($event)"
       (selectedMarkerId)="setSelectedMarkerId($event)"
       [selectedStructure]="currentStructure"
       (updatedStructure)="updateStructures($event)"
+      (structureSelected)="selectStructure($event)"
       class="left-pane"
       [ngClass]="{ mapPhone: isMapPhone == true }"
       fxLayout="column"
@@ -24,12 +26,14 @@
       ></app-button>
     </div>
     <app-map
+      [isOrientationForm]="isOrientationForm"
       [structures]="structures"
       [toogleToolTipId]="displayMarkerId"
       [selectedMarkerId]="selectedMarkerId"
+      [structuresToPrint]="structuresSelected"
       (selectedStructure)="showDetailStructure($event)"
       [isMapPhone]="isMapPhone"
-      [searchedValue]="searchedValue"
+      [searchedValue]="searchedValue || userLocate"
       class="right-pane"
       [ngClass]="{ mapPhone: isMapPhone == true }"
     ></app-map>

src/app/carto/carto.component.scss

@@ -17,6 +17,10 @@
   flex-direction: column;
 }
 
+.height-100 {
+  height: 100%;
+}
+
 .panes-container {
   width: 100%;
   position: relative;

src/app/carto/carto.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Meta } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
 import * as _ from 'lodash';
+import { Observable } from 'rxjs';
 import { GeoJson } from '../map/models/geojson.model';
-import { ProfileService } from '../profile/services/profile.service';
 import { Structure } from '../models/structure.model';
+import { ProfileService } from '../profile/services/profile.service';
 import { GeojsonService } from '../services/geojson.service';
 import { StructureService } from '../services/structure.service';
 import { ButtonType } from '../shared/components/button/buttonType.enum';
 import { Filter } from '../structure-list/models/filter.model';
 import { CustomRegExp } from '../utils/CustomRegExp';
-import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-carto',
@@ -18,17 +18,22 @@ import { Observable } from 'rxjs';
   styleUrls: ['./carto.component.scss'],
 })
 export class CartoComponent implements OnInit {
-  public filters: Filter[] = [];
+  @Input() public isOrientationForm = false;
+  @Input() public filters: Filter[] = [];
+  @Input() public userLatitude: number = null;
+  @Input() public userLongitude: number = null;
+  @Output() structureSelection = new EventEmitter<any>();
+
   public structures: Structure[] = [];
+  public structuresSelected: Structure[] = [];
+  public currentLocation: GeoJson;
   public displayMarkerId: string;
   public selectedMarkerId: string;
   public geolocation = false;
-  public currentLocation: GeoJson;
   public currentStructure: Structure;
-  public userLatitude: number;
-  public userLongitude: number;
   public isMapPhone = false;
   public searchedValue = null;
+  public userLocate = null;
   public buttonTypeEnum = ButtonType;
 
   constructor(
@@ -41,10 +46,14 @@ export class CartoComponent implements OnInit {
 
   ngOnInit(): void {
     if (!this.activatedRoute.snapshot.queryParamMap.get('search')) {
+      // Set user location if provided
+      if (this.userLatitude && this.userLongitude) {
+        this.userLocate = [this.userLongitude, this.userLatitude];
+      }
       if (navigator.geolocation) {
-        this.getLocation();
+        this.getLocation(this.filters);
       } else {
-        this.getStructures(null);
+        this.getStructures(this.filters);
       }
     }
 
@@ -166,18 +175,20 @@ export class CartoComponent implements OnInit {
     return structure;
   }
 
-  public getLocation(): void {
+  public getLocation(filters: Filter[]): void {
     navigator.geolocation.getCurrentPosition(
       (position) => {
         this.geolocation = true;
-        this.userLongitude = position.coords.longitude;
-        this.userLatitude = position.coords.latitude;
+        if (!this.userLongitude && !this.userLatitude) {
+          this.userLongitude = position.coords.longitude;
+          this.userLatitude = position.coords.latitude;
+        }
         this.getAddress(position.coords.longitude, position.coords.latitude);
-        this.getStructures(null);
+        this.getStructures(filters);
       },
       (err) => {
         if (err.PERMISSION_DENIED) {
-          this.getStructures(null);
+          this.getStructures(filters);
         }
       }
     );
@@ -222,4 +233,9 @@ export class CartoComponent implements OnInit {
   public isClaimed(structure: Structure): Observable<boolean> {
     return this.structureService.isClaimed(structure._id, null);
   }
+
+  public selectStructure(structures: Structure[]): void {
+    this.structuresSelected = structures;
+    this.structureSelection.emit(this.structuresSelected);
+  }
 }

src/app/carto/carto.module.ts

+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MapModule } from '../map/map.module';
+import { SharedModule } from '../shared/shared.module';
+import { CardComponent } from '../structure-list/components/card/card.component';
+import { ModalFilterComponent } from '../structure-list/components/modal-filter/modal-filter.component';
+import { StructureListSearchComponent } from '../structure-list/components/structure-list-search/structure-list-search.component';
+import { StructureListComponent } from '../structure-list/structure-list.component';
+import { CartoComponent } from './carto.component';
+@NgModule({
+  imports: [CommonModule, SharedModule, MapModule],
+  declarations: [
+    CartoComponent,
+    CardComponent,
+    ModalFilterComponent,
+    StructureListComponent,
+    StructureListSearchComponent,
+  ],
+  exports: [CartoComponent, CardComponent, ModalFilterComponent, StructureListComponent, StructureListSearchComponent],
+})
+export class CartoModule {}

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

@@ -8,7 +8,6 @@ import { AccountInfoComponent } from './account-form/account-info/account-info.c
 import { AccountNewsletterComponent } from './account-form/account-newsletter/account-newsletter.component';
 import { FormViewRoutingModule } from './form-view-routing.module';
 import { FormViewComponent } from './form-view.component';
-import { ProgressBarComponent } from './global-components/progress-bar/progress-bar.component';
 import { PersonalOfferGuard } from './guards/personalOffer.guard';
 import { PersonalOfferAccompanimentComponent } from './personal-offer-form/personal-offer-accompaniment/personal-offer-accompaniment.component';
 import { PersonalOfferFormComponent } from './personal-offer-form/personal-offer-form.component';
@@ -33,7 +32,6 @@ import { StructureHoursComponent } from './structure-form/structure-hours/struct
 import { StructureLabelsComponent } from './structure-form/structure-labels/structure-labels.component';
 import { StructureNameAndAddressComponent } from './structure-form/structure-name-and-address/structure-name-and-address.component';
 import { StructureOtherServicesComponent } from './structure-form/structure-other-services/structure-other-services.component';
-import { StructurePmrComponent } from './structure-form/structure-pmr/structure-pmr.component';
 import { structureDigitalHelpingAccompanimentOtherComponent } from './structure-form/structure-public-target-other/structure-public-target-other.component';
 import { StructurePublicTargetComponent } from './structure-form/structure-public-target/structure-public-target.component';
 import { StructureTrainingPriceComponent } from './structure-form/structure-training-price/structure-training-price.component';
@@ -45,7 +43,6 @@ import { StructureWifiComponent } from './structure-form/structure-wifi/structur
 @NgModule({
   declarations: [
     FormViewComponent,
-    ProgressBarComponent,
     StructureFormComponent,
     ProfileFormComponent,
     PersonalOfferFormComponent,
@@ -64,7 +61,6 @@ import { StructureWifiComponent } from './structure-form/structure-wifi/structur
     StructureContactCompletionComponent,
     StructureAccessModalityComponent,
     StructureHoursComponent,
-    StructurePmrComponent,
     StructureWebAndSocialNetworkComponent,
     StructurePublicTargetComponent,
     structureDigitalHelpingAccompanimentOtherComponent,

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

@@ -6,7 +6,7 @@
 .progressBar {
   height: #{$progressBar-height};
   max-width: 980px;
-  margin: 16px auto;
+  margin: 16px auto 0 auto;
 
   @media #{$tablet} {
     margin: 0px 4px;
@@ -17,6 +17,9 @@
     margin-bottom: 7px;
   }
 
+  @media print {
+    display: none;
+  }
   progress {
     width: 100%;
     height: 6px;

src/app/form/orientation-form-view/base-skills/base-skills-choice/base-skills-choice.component.html

+<h2>De quelle compétence(s) numérique(s) le bénéficiaire a-t-il besoin ?</h2>
+
+<div fxLayout="column" fxLayoutGap="32px">
+  <div class="btn-grid">
+    <span *ngFor="let module of baseSkills">
+      <app-button
+        [ngClass]="{ selectedChoice: true }"
+        [extraClass]="isSelectedModule(module.id) ? 'selected' : ''"
+        [style]="buttonTypeEnum.CheckButton"
+        [text]="module.name"
+        (action)="handleClick(module)"
+      ></app-button>
+    </span>
+  </div>
+</div>

src/app/form/orientation-form-view/base-skills/base-skills-choice/base-skills-choice.component.ts

+import { Component, OnInit } from '@angular/core';
+import { CategoryEnum } from '../../../../shared/enum/category.enum';
+import { Category } from '../../../../structure-list/models/category.model';
+import { Module } from '../../../../structure-list/models/module.model';
+import { SearchService } from '../../../../structure-list/services/search.service';
+import { SelectComponent } from '../../global-components/select/select.component';
+
+@Component({
+  selector: 'app-base-skills-choice',
+  templateUrl: './base-skills-choice.component.html',
+})
+export class BaseSkillsChoiceComponent extends SelectComponent implements OnInit {
+  public baseSkills: Module[] = [];
+
+  constructor(private searchService: SearchService) {
+    super();
+  }
+
+  ngOnInit(): void {
+    this.searchService.getCategories().subscribe((categories: Category[]) => {
+      this.baseSkills = categories.find((el) => el.id === CategoryEnum.baseSkills).modules;
+    });
+    this.checkValidation.emit();
+  }
+}

src/app/form/orientation-form-view/base-skills/base-skills.component.html

+<app-base-skills-choice
+  *ngIf="currentType === GenericOrientationSteps.common"
+  [currentStep]="currentStep"
+  [currentType]="currentType"
+  [form]="form"
+  (checkValidation)="checkValidation($event)"
+></app-base-skills-choice>

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

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import { OrientationUtils } from '../../../utils/orientationUtils';
+import { FiltersSteps } from '../enums/filtersSteps.enum';
+import { GenericOrientationSteps } from '../enums/genericOrientationSteps.enum';
+import { RecapsType } from '../enums/recapsType.enum';
+import { StructuresListSteps } from '../enums/structuresListSteps.enum';
+import { FiltersForm } from '../interfaces/filtersForm.interface';
+
+@Component({
+  selector: 'app-base-skills',
+  templateUrl: './base-skills.component.html',
+})
+export class BaseSkillsComponent {
+  @Input() currentStep: FiltersSteps;
+  @Input() currentType: GenericOrientationSteps;
+  @Input() form: FormGroup<FiltersForm>;
+  @Output() validatePage = new EventEmitter<any>();
+
+  public orientationUtils = new OrientationUtils();
+  public pagesValidation: any[] = [];
+
+  // Enums
+  public structuresListStepsEnum = StructuresListSteps;
+  public FiltersSteps = FiltersSteps;
+  public recapsType = RecapsType;
+  public GenericOrientationSteps = GenericOrientationSteps;
+
+  public checkValidation(): void {
+    switch (this.currentType) {
+      case GenericOrientationSteps.common:
+        this.orientationUtils.setValidationsEquipmentForm(
+          this.pagesValidation,
+          this.form,
+          (isValid) => this.validatePage.emit(isValid),
+          this.currentStep as FiltersSteps
+        );
+        break;
+      default:
+        throw new Error('Not implemented tunnel type in OnlineDemarchFormComponent');
+    }
+  }
+}

src/app/form/orientation-form-view/enums/filtersSteps.enum.ts

+export enum FiltersSteps {
+  filterChoice,
+}

src/app/form/orientation-form-view/enums/genericOrientationSteps.enum.ts

+export enum GenericOrientationSteps {
+  common = 'Common',
+  structureList = 'Trouver une structure',
+}

src/app/form/orientation-form-view/enums/mediationSteps.enum.ts → src/app/form/orientation-form-view/enums/hotlineMediationSteps.enum.ts

-export enum mediationSteps {
-  onlineDemarch,
-  accompanimentType,
+export enum HotlineMediationSteps {
   mediationBeneciaryInfo,
   mediationHoursSelection,
   mediationRecap,

src/app/form/orientation-form-view/enums/needs.enum.ts

-export enum needsType {
+export enum NeedsType {
   equipmentAccess,
   equipmentBuy,
   onlineDemarch,

src/app/form/orientation-form-view/enums/onlineDemarche.enum.ts

+export enum OnlineDemarche {
+  common = 'Common',
+  structureList = 'Trouver une structure',
+  meetings = 'RDV Conseiller Numérique',
+  onlineMediation = 'Médiation Numérique à distance',
+}