feat(print-orientation): graphic update for the print at the end of the orientation

src/app/app.module.ts

@@ -39,6 +39,7 @@ import { OrientationFormComponent } from './form/orientation-form/orientation-fo
 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 { OrientationComponent } from './form/orientation-form/component/orientation-modal/orientation-modal.component';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
 import { StructureResolver } from './resolvers/structure.resolver';
@@ -71,6 +72,7 @@ import { UpdateService } from './services/update.service';
     StructureDetailPrintComponent,
     StructureListPrintComponent,
     StructurePrintHeaderComponent,
+    OrientationComponent,
   ],
   imports: [
     BrowserModule,

src/app/form/footer-form/footer-form.component.html

-<div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center">
+<div fxLayout="row" [ngClass]="{ column: hasFinishButton() }" fxLayoutGap="10px" fxLayoutAlign="center center">
   <button *ngIf="displayPreviousButton" class="btn-primary small previous" (click)="goToPreviousPage()">
     <div class="rowBtn" fxLayout="row" fxLayoutAlign="center center">
       <svg class="chevronLeft" aria-hidden="true">
@@ -7,6 +7,16 @@
       {{ btnName[0] }}
     </div>
   </button>
+
+  <button *ngIf="hasFinishButton()" class="btn-primary small previous" (click)="finishedModal()">
+    <div class="rowBtn" fxLayout="row" fxLayoutAlign="center center">
+      <svg class="flag" aria-hidden="true">
+        <use [attr.xlink:href]="'/assets/ico/flag.svg'"></use>
+      </svg>
+      {{ btnName[2] }}
+    </div>
+  </button>
+
   <button
     class="btn-primary small next"
     (click)="goToNextPage()"
@@ -14,9 +24,15 @@
     type="submit"
     [ngClass]="{ invalid: !isValid }"
   >
-    <div class="rowBtn" fxLayout="row" fxLayoutAlign="center center">
-      {{ btnName[1]
-      }}<svg class="chevronRight" aria-hidden="true">
+    <div *ngIf="btnName[1] == 'Imprimer'" fxLayout="row" fxLayoutAlign="center center">
+      <svg class="print" aria-hidden="true">
+        <use [attr.xlink:href]="'/assets/ico/print.svg'"></use>
+      </svg>
+      {{ btnName[1] }}
+    </div>
+    <div *ngIf="btnName[1] == 'Suivant'" class="rowBtn" fxLayout="row" fxLayoutAlign="center center">
+      {{ btnName[1] }}
+      <svg class="chevronRight" aria-hidden="true">
         <use [attr.xlink:href]="'assets/form/sprite.svg#chevronRight'"></use>
       </svg>
     </div>

src/app/form/footer-form/footer-form.component.scss

 @import '../../../assets/scss/color';
 @import '../../../assets/scss/typography';
+@import '../../../assets/scss/breakpoint';
 
 .btn-primary {
   &.previous {
@@ -7,13 +8,28 @@
     color: $grey-2;
     border: solid $grey-4 1px;
   }
+  &.invalid {
+    opacity: 0.4;
+  }
+
+  &:focus .print {
+    background-color: $secondary-color;
+  }
+
   &.next {
     .rowBtn {
       margin-left: 24px;
     }
   }
-  &.invalid {
-    opacity: 0.4;
+}
+
+.column {
+  @media #{$phone} {
+    flex-direction: column !important;
+    button {
+      margin-bottom: 10px !important;
+      margin-right: 0 !important;
+    }
   }
 }
 
@@ -26,6 +42,22 @@
 .chevronRight {
   height: 24px;
   width: 24px;
-  // stroke: inherit;
   margin-left: 10px;
 }
+
+.print {
+  stroke: $white;
+  width: 20px;
+  height: 20px;
+  padding-right: 20px;
+  background-color: $white;
+  mask: url(/assets/ico/print.svg) no-repeat center;
+}
+.flag {
+  padding-right: 10px;
+  stroke: $black;
+  width: 20px;
+  height: 20px;
+  background-color: $grey-1;
+  mask: url(/assets/ico/flag.svg) no-repeat center;
+}

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

@@ -11,6 +11,7 @@ export class FooterFormComponent {
   @Input() displayPreviousButton: boolean = true;
   @Output() nextPage = new EventEmitter<any>();
   @Output() previousPage = new EventEmitter<any>();
+  @Output() endPage = new EventEmitter<any>();
 
   public goToNextPage(): void {
     this.nextPage.emit();
@@ -19,4 +20,11 @@ export class FooterFormComponent {
   public goToPreviousPage(): void {
     this.previousPage.emit();
   }
+
+  public hasFinishButton(): boolean {
+    return this.btnName.length == 3;
+  }
+  public finishedModal(): void {
+    this.endPage.emit();
+  }
 }

src/app/form/orientation-form/component/orientation-modal/orientation-modal.component.html

+<div *ngIf="openned" class="modalBackground">
+  <div class="modal">
+    <div
+      (clickOutside)="closeModal(false)"
+      class="contentModal"
+      fxLayout="row-reverse"
+      fxLayoutAlign="space-around start"
+    >
+      <div class="ico-close">
+        <div class="ico-close-wrapper">
+          <div (click)="closeModal()" class="ico-close-details"></div>
+        </div>
+      </div>
+
+      <div class="modalContent">
+        <h3 fxLayoutAlign="center center">Souhaitez-vous terminer cette orientation ?</h3>
+
+        <div class="footerModal" fxLayout="row" fxLayoutAlign="space-around center">
+          <button type="button" class="btn confirm" (click)="goToPreviousPage()">Revenir aux résultats</button>
+          <button class="btn-primary small previous" routerLink="../home">
+            <div class="rowBtn" fxLayout="row" fxLayoutAlign="center center">
+              <img class="flag" src="/assets/ico/flag.svg" alt />
+              Terminer
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/form/orientation-form/component/orientation-modal/orientation-modal.component.scss

+@import '../../../../../assets/scss/typography';
+@import '../../../../../assets/scss/color';
+
+.ico-close-details {
+  margin-right: 16px;
+}
+h3 {
+  margin: 8% 15%;
+  text-align: center;
+  @include cn-regular-18;
+  color: $grey-2;
+}
+.modalContent {
+  margin: 0 32px;
+  width: 100%;
+}
+.footerModal {
+  margin: 25px;
+}
+.modalBackground .modal .footerModal .btn.confirm {
+  font-size: 14px;
+  font-weight: normal;
+}
+.flag {
+  padding-right: 10px;
+  stroke: $white;
+}

src/app/form/orientation-form/component/orientation-modal/orientation-modal.component.spec.ts

+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OrientationComponent } from './orientation-modal.component';
+
+describe('OrientationModalComponent', () => {
+  let component: OrientationComponent;
+  let fixture: ComponentFixture<OrientationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [OrientationComponent],
+      imports: [HttpClientTestingModule],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OrientationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-orientation-modal',
+  templateUrl: './orientation-modal.component.html',
+  styleUrls: ['./orientation-modal.component.scss'],
+})
+export class OrientationComponent {
+  @Input() public openned: boolean;
+  @Output() closed = new EventEmitter();
+  @Output() previousPage = new EventEmitter();
+
+  public closeModal(): void {
+    this.closed.emit();
+  }
+  public goToPreviousPage(): void {
+    this.closeModal();
+    this.previousPage.emit();
+  }
+}

src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.html

@@ -6,7 +6,7 @@
         <h3 class="bold">{{ structure.structureName }}</h3>
       </div>
       <div class="mobile-column">
-        <div fxLayout="column" fxFlex="50%">
+        <div fxLayout="column" fxFlex="100%">
           <div *ngIf="structure.address" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
             <app-svg-icon [type]="'ico'" [icon]="'adress'" [title]="'Adresse'"></app-svg-icon>
             <p>{{ structure.address.numero }} {{ structure.address.street }}, {{ structure.address.commune }}</p>

src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.scss

@@ -28,7 +28,6 @@ a {
 }
 
 .structrue-details-container > .structure-details-block {
-  padding: 0px 0px 24px 0;
   .subtitle {
     text-transform: uppercase;
     @include cn-bold-16;

src/app/form/orientation-form/component/structure-list-print/structure-list-print.component.html

-<app-structure-print-header
-  class="multi-print"
-  [beneficiaryNeedCommentary]="beneficiaryNeedCommentary"
-  [beneficiaryName]="beneficiaryName"
-  [structureAccompaniment]="structureAccompaniment"
-  [beneficiaryPassNumeric]="beneficiaryPassNumeric"
-  [contactAccompaniment]="contactAccompaniment"
-  [filters]="filters"
-></app-structure-print-header>
 <div class="multi-print" *ngFor="let structure of structures">
+  <app-structure-print-header
+    [beneficiaryNeedCommentary]="beneficiaryNeedCommentary"
+    [beneficiaryName]="beneficiaryName"
+    [structureAccompaniment]="structureAccompaniment"
+    [beneficiaryPassNumeric]="beneficiaryPassNumeric"
+    [contactAccompaniment]="contactAccompaniment"
+    [filters]="filters"
+  ></app-structure-print-header>
   <app-structure-detail-print [structure]="structure"></app-structure-detail-print>
 </div>
+<div class="loader">
+  <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />
+  <p>Liste en cours d'impression</p>
+</div>

src/app/form/orientation-form/component/structure-list-print/structure-list-print.component.scss

+@import '../../../../../assets/scss/color';
+@import '../../../../../assets/scss/layout';
+
 .list-to-print {
   height: 600px;
   overflow-x: hidden;
@@ -5,14 +8,42 @@
 }
 
 .multi-print {
+  :host {
+    background-color: $grey-6;
+  }
   ::ng-deep {
     .structrue-details-container {
-      page-break-after: always;
-      height: 100%;
+      margin-top: 2%;
+      margin-left: 34%;
+      height: 98%;
     }
     .print-header {
-      page-break-after: always;
       height: 100%;
     }
   }
+  page-break-after: always;
+  -webkit-print-color-adjust: exact;
+  width: 50%;
+  margin-left: 23%;
+  margin-right: 23%;
+  padding-left: 2%;
+  padding-right: 2%;
+  height: 100%;
+  overflow-x: hidden;
+  background-color: $white;
+  @media screen {
+    display: none;
+  }
+  @media print {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.loader {
+  height: calc(100vh - #{$header-height} - #{$footer-height});
+  @media print {
+    display: none;
+  }
 }

src/app/form/orientation-form/component/structure-list-print/structure-list-print.component.ts

 import { Component, Input, OnInit } from '@angular/core';
 import { Structure } from '../../../../models/structure.model';
 import * as _ from 'lodash';
-import { ActivatedRoute } from '@angular/router';
-import { PrintService } from '../../../../shared/service/print.service';
 import { Filter } from '../../../../structure-list/models/filter.model';
-import Module from 'module';
 @Component({
   selector: 'app-structure-list-print',
   templateUrl: './structure-list-print.component.html',
   styleUrls: ['./structure-list-print.component.scss'],
 })
-export class StructureListPrintComponent implements OnInit {
+export class StructureListPrintComponent {
   @Input() public structures: Structure[];
   @Input() public filters: Filter[];
   @Input() public beneficiaryNeedCommentary: string;
@@ -18,8 +15,4 @@ export class StructureListPrintComponent implements OnInit {
   @Input() public structureAccompaniment: string;
   @Input() public beneficiaryPassNumeric: boolean;
   @Input() public contactAccompaniment: string;
-
-  constructor(private printService: PrintService, private route: ActivatedRoute) {}
-
-  async ngOnInit(): Promise<void> {}
 }

src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.html

@@ -9,14 +9,14 @@
         <h3>Fiche d'orientation</h3>
       </div>
     </div>
-    <p class="typeInformationHeader date">{{ date }}</p>
+    <p class="informationHeader date">{{ date }}</p>
   </div>
 
   <div class="informations">
     <div class="helper">
       <!-- Accompaniment -->
       <div *ngIf="structureAccompaniment">
-        <div class="typeInformationHeader">{{ 'Orienté par' | uppercase }}</div>
+        <div class="informationHeader">{{ 'Orienté par' | uppercase }}</div>
         <p class="bold">{{ structureAccompaniment }}</p>
         <!-- Contact -->
         <p class="bold" *ngIf="contactAccompaniment">{{ contactAccompaniment }}</p>
@@ -24,39 +24,39 @@
       </div>
     </div>
     <div class="beneficiary">
-      <div class="typeInformationHeader">{{ 'Bénéficiaire' | uppercase }}</div>
+      <div class="informationHeader">{{ 'Bénéficiaire' | uppercase }}</div>
       <!-- Name -->
-      <table>
+      <table class="beneficiaryNeeds">
         <tr>
-          <td class="typeInformationHeader">Nom</td>
+          <td class="informationHeader">Nom</td>
           <td class="bold">{{ beneficiaryName }}</td>
         </tr>
         <tr *ngIf="equipments.length > 0">
-          <td class="typeInformationHeader">Besoin(s) en matériel</td>
+          <td class="informationHeader">Besoin(s) en matériel</td>
           <td class="bold">
             <div *ngFor="let equipmentTag of equipments">
               {{ equipmentTag.text ? equipmentTag.text : equipmentTag.value }}
             </div>
           </td>
         </tr>
-        <tr *ngIf="formations.length > 0">
-          <td class="typeInformationHeader">Besoin(s) en formation</td>
+        <tr *ngIf="assistances.length > 0">
+          <td class="informationHeader">Besoin(s) en formation</td>
           <td class="bold">
-            <div *ngFor="let formationTag of formations">
-              {{ formationTag.text ? formationTag.text : formationTag.value }}
+            <div *ngFor="let assistanceTag of assistances">
+              {{ assistanceTag.text ? assistanceTag.text : assistanceTag.value }}
             </div>
           </td>
         </tr>
-        <tr *ngIf="assistances.length > 0">
-          <td class="typeInformationHeader">Besoin(s) d'accompagnement</td>
+        <tr *ngIf="formations.length > 0">
+          <td class="informationHeader">Besoin(s) d'accompagnement</td>
           <td class="bold">
-            <div *ngFor="let assistanceTag of assistances">
-              {{ assistanceTag.text ? assistanceTag.text : assistanceTag.value }}
+            <div *ngFor="let formationTag of formations">
+              {{ formationTag.text ? formationTag.text : formationTag.value }}
             </div>
           </td>
         </tr>
         <tr *ngIf="specificNeeds.length > 0">
-          <td class="typeInformationHeader">Besoin(s) spécifiques</td>
+          <td class="informationHeader">Besoin(s) spécifiques</td>
           <td class="bold">
             <div *ngFor="let specificNeed of specificNeeds">
               {{ specificNeed.text ? specificNeed.text : specificNeed.value }}
@@ -64,11 +64,11 @@
           </td>
         </tr>
         <tr *ngIf="beneficiaryPassNumeric">
-          <td class="typeInformationHeader">Pass Numérique</td>
+          <td class="informationHeader">Pass Numérique</td>
           <td class="bold">Oui</td>
         </tr>
         <tr *ngIf="beneficiaryNeedCommentary">
-          <td class="typeInformationHeader">Informations</td>
+          <td class="informationHeader">Informations</td>
           <td class="bold">{{ beneficiaryNeedCommentary }}</td>
         </tr>
       </table>

src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.scss

@@ -35,9 +35,18 @@
   float: right;
 }
 
-.print-header {
-  page-break-after: always;
-  height: 100%;
+.beneficiaryNeeds {
+  td {
+    vertical-align: top;
+  }
+  border-collapse: separate;
+  border-spacing: 10px 15px;
+}
+
+.informationsHeader {
+  min-width: 35%;
+  margin-bottom: 5px;
+  color: $black;
 }
 
 .typeInformationHeader {
@@ -104,4 +113,8 @@
     padding: 2%;
     width: 70%;
   }
+
+  tr {
+    margin-bottom: 8px;
+  }
 }

src/app/form/orientation-form/orientation-form.component.html

@@ -333,6 +333,7 @@
         <app-structure-detail-print
           *ngFor="let structure of structuresToPrint"
           [structure]="structure"
+          class="print-structure-container"
         ></app-structure-detail-print>
       </div>
     </div>
@@ -427,9 +428,10 @@
   <div *ngIf="currentPage == pageTypeEnum.printResults" class="form-footer">
     <div fxLayout="row" fxLayoutAlign="center center">
       <app-footer-form
-        [btnName]="['Précédent', 'Imprimer']"
+        [btnName]="['Précédent', 'Imprimer', 'Terminer']"
         (previousPage)="previousPage()"
         (nextPage)="runMultiPrint(true)"
+        (endPage)="displayFinishModal()"
         [isValid]="isPageValid"
       ></app-footer-form>
     </div>
@@ -443,7 +445,7 @@
   [beneficiaryName]="getOrientationControl('beneficiaryName').value"
   [structureAccompaniment]="getOrientationControl('structureAccompaniment').value"
   [beneficiaryPassNumeric]="getOrientationControl('passNumeric').value"
-  [contactAccompaniment]="getOrientationControl('contactAccompaniment').value"
+  [contactAccompaniment]="getOrientationControl('contactAccompanimentPhone').value"
   [filters]="filters"
 ></app-structure-list-print>
 
@@ -452,3 +454,10 @@
   [structure]="selectedStructure"
   (closeDetails)="closeDetails()"
 ></app-structure-details>
+
+<app-orientation-modal
+  *ngIf="displayModal"
+  [openned]="true"
+  (closed)="closeFinishModal($event)"
+  (previousPage)="previousPage()"
+></app-orientation-modal>

src/app/form/orientation-form/orientation-form.component.scss

@@ -288,3 +288,16 @@ input {
     font-style: italic;
   }
 }
+
+.print-structure-container {
+  ::ng-deep .structrue-details-container {
+    border-bottom: solid 1px $grey-3;
+    margin-bottom: 4%;
+  }
+}
+
+.print-structure-container:last-child {
+  ::ng-deep .structrue-details-container {
+    border-bottom: none;
+  }
+}

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

@@ -77,6 +77,7 @@ export class OrientationFormComponent implements OnInit {
   public showFormation: boolean;
 
   public multiPrint: boolean = false;
+  public displayModal = false;
 
   public structuresList: Structure[];
   public structuresToPrint: Structure[] = [];
@@ -250,6 +251,9 @@ export class OrientationFormComponent implements OnInit {
     this.pagesValidation[PageTypeEnum.beneficiaryAddress] = {
       valid: true,
     };
+    this.pagesValidation[PageTypeEnum.beneficiaryAddress] = {
+      valid: true,
+    };
     this.pagesValidation[PageTypeEnum.printResults] = { valid: true };
     this.pagesValidation[PageTypeEnum.structuresSelection] = { valid: this.structuresToPrint.length > 0 };
 
@@ -535,4 +539,12 @@ export class OrientationFormComponent implements OnInit {
   onWindowAfterPrint() {
     this.multiPrint = false;
   }
+
+  public displayFinishModal(): void {
+    this.displayModal = true;
+  }
+
+  public closeFinishModal(): void {
+    this.displayModal = false;
+  }
 }

src/app/map/components/map.component.scss

@@ -24,7 +24,7 @@
     height: calc(100vh - #{$header-height} - 28px);
   }
   &.orientation {
-    height: calc(96vh - #{$header-height} - #{$footer-height} - 68px);
+    height: calc(96vh - #{$header-height} - #{$footer-height} - 68px - #{$footer-height-phone});
   }
 }
 

src/assets/ico/flag.svg

+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="6.01176" y="2.61237" width="1" height="17" rx="0.5" transform="rotate(15 6.01176 2.61237)" stroke="white"/>
+<rect x="6.90824" y="6.99372" width="1" height="1" transform="rotate(15 6.90824 6.99372)" stroke="white"/>
+<rect x="5.87308" y="10.8574" width="1" height="1" transform="rotate(15 5.87308 10.8574)" stroke="white"/>
+<rect x="10.7715" y="8.029" width="1" height="1" transform="rotate(15 10.7715 8.029)" stroke="white"/>
+<rect x="9.73637" y="11.8926" width="1" height="1" transform="rotate(15 9.73637 11.8926)" stroke="white"/>
+<rect x="14.6348" y="9.06428" width="1" height="1" transform="rotate(15 14.6348 9.06428)" stroke="white"/>
+<rect x="13.5996" y="12.9279" width="1" height="1" transform="rotate(15 13.5996 12.9279)" stroke="white"/>
+<rect x="8.3223" y="9.44318" width="1" height="1" transform="rotate(15 8.3223 9.44318)" stroke="white"/>
+<rect x="12.1856" y="10.4785" width="1" height="1" transform="rotate(15 12.1856 10.4785)" stroke="white"/>
+<rect x="16.0489" y="11.5137" width="1" height="1" transform="rotate(15 16.0489 11.5137)" stroke="white"/>
+<rect x="9.35746" y="5.57941" width="1" height="1" transform="rotate(15 9.35746 5.57941)" stroke="white"/>
+<rect x="13.2207" y="6.61469" width="1" height="1" transform="rotate(15 13.2207 6.61469)" stroke="white"/>
+<rect x="17.086" y="7.64997" width="1" height="1" transform="rotate(15 17.086 7.64997)" stroke="white"/>
+<rect x="6.71879" y="3.8371" width="13" height="9" transform="rotate(15 6.71879 3.8371)" stroke="white"/>
+</svg>