Merge branch 'feat/print' into 'dev'

Feat/print

See merge request web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client!22

src/app/app-routing.module.ts

@@ -3,9 +3,11 @@ import { Routes, RouterModule } from '@angular/router';
 import { AboutComponent } from './about/about.component';
 import { HomeComponent } from './home/home.component';
 import { LegalNoticeComponent } from './legal-notice/legal-notice.component';
+import { StructureDetailsComponent } from './structure-list/components/structure-details/structure-details.component';
 import { StructureListComponent } from './structure-list/structure-list.component';
 
 const routes: Routes = [
+  { path: 'print', outlet: 'print', children: [{ path: 'structure', component: StructureDetailsComponent }] },
   {
     path: 'home',
     component: HomeComponent,

src/app/app.component.html

@@ -2,6 +2,7 @@
   <app-header></app-header>
   <div class="app-body">
     <router-outlet></router-outlet>
+    <router-outlet name="print"></router-outlet>
   </div>
   <app-footer></app-footer>
 </div>

src/app/app.component.ts

 import { Component } from '@angular/core';
+import { PrintService } from './shared/service/print.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
   title = 'pamn';
+
+  constructor(public printService: PrintService) {}
 }

src/app/footer/footer.component.scss

@@ -51,3 +51,15 @@
   display: flex;
   align-items: center;
 }
+
+@media screen {
+  div {
+    flex-direction: row !important;
+  }
+}
+
+@media print {
+  div {
+    display: none !important;
+  }
+}

src/app/header/header.component.html

-<div fxLayout="row" fxLayout.lt-sm="column" class="header">
+<div fxLayout="row" class="header hide-on-print">
   <div class="logo clickable" routerLink="/home">
     <div fxLayout="row">
       <!-- <img class="logo-grand-lyon" src="/assets/logos/ram_logo.svg" alt /> -->

src/app/header/header.component.scss

@@ -42,3 +42,9 @@
     margin: 0;
   }
 }
+
+@media print {
+  div {
+    display: none !important;
+  }
+}

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

@@ -100,3 +100,9 @@
     margin-right: 10px;
   }
 }
+
+@media print {
+  .map-wrapper {
+    display: none;
+  }
+}

src/app/shared/components/button/button.component.html

 <ng-container *ngIf="style === 'buttonWithHash'">
-  <button class="btnSearch" type="{{ type }}">
+  <button class="btnSearch" type="{{ type }}" (click)="doAction()">
     <div *ngIf="!iconBtn" class="searchButton">{{ text }}</div>
     <div
       *ngIf="iconBtn"

src/app/shared/components/button/button.component.ts

-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 @Component({
   selector: 'app-button',
@@ -10,7 +10,13 @@ export class ButtonComponent implements OnInit {
   @Input() public text: string;
   @Input() public type: string;
   @Input() public iconBtn: string;
+  @Output() public action = new EventEmitter();
   constructor() {}
 
   ngOnInit(): void {}
+
+  public doAction(): void {
+    console.log('in do action');
+    this.action.emit();
+  }
 }

src/app/shared/service/print.service.ts

+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { Structure } from '../../models/structure.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PrintService {
+  public isPrinting = false;
+  public structure: Structure;
+
+  constructor(private router: Router) {}
+
+  public printDocument(documentName: string, structure: Structure): void {
+    this.isPrinting = true;
+    this.structure = structure;
+    this.router.navigate([
+      '/',
+      {
+        outlets: {
+          print: ['print', documentName],
+        },
+      },
+    ]);
+  }
+
+  public onDataReady(): void {
+    setTimeout(() => {
+      window.print();
+      this.isPrinting = false;
+      this.router.navigate([{ outlets: { print: null } }]);
+    });
+  }
+}

src/app/structure-list/components/structure-details/structure-details.component.html

 <div class="structrue-details-container">
   <!-- Header info -->
   <div fxLayout="row" class="structrue-details-block" fxLayoutAlign="baseline baseline" fxLayoutGap="20px">
-    <em class="ic-arrow-left clickable" (click)="close()"></em>
+    <em class="ic-arrow-left clickable hide-on-print" (click)="close()"></em>
     <div fxLayout="column" fxLayoutGap="10px" fxFlex="100%">
       <div fxLayout="row" fxLayoutAlign="space-between">
         <div fxLayout="column center">
@@ -9,14 +9,21 @@
           <h3>{{ structure.typeDeStructure }}</h3>
         </div>
         <div fxLayout="column" fxLayoutAlign="end">
-          <app-button [type]="'button'" [style]="'buttonWithHash'" [text]="'Imprimer'" [iconBtn]="'print'"></app-button>
+          <app-button
+            class="hide-on-print"
+            [type]="'button'"
+            [style]="'buttonWithHash'"
+            [text]="'Imprimer'"
+            [iconBtn]="'print'"
+            (action)="print()"
+          ></app-button>
         </div>
       </div>
-
       <div fxLayout="row">
         <div fxLayout="column" fxFlex="60%">
           <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
             <app-structure-opening-status
+              class="hide-on-print"
               [structure]="structure"
               [isCalledByDetails]="true"
             ></app-structure-opening-status>

src/app/structure-list/components/structure-details/structure-details.component.scss

@@ -58,3 +58,22 @@ a {
   margin-top: 9px;
   margin-bottom: 9px;
 }
+
+@media print {
+  .structrue-details-container {
+    background-color: unset;
+    z-index: unset;
+    position: unset;
+    top: unset;
+    left: unset;
+    max-width: unset;
+    width: unset;
+    height: unset;
+    padding: unset;
+    overflow: hidden;
+  }
+
+  .hide-on-print {
+    display: none !important;
+  }
+}

src/app/structure-list/components/structure-details/structure-details.component.ts

@@ -5,6 +5,8 @@ import { Category } from '../../models/category.model';
 import { AccessModality } from '../../enum/access-modality.enum';
 import { SearchService } from '../../services/search.service';
 import * as _ from 'lodash';
+import { ActivatedRoute } from '@angular/router';
+import { PrintService } from '../../../shared/service/print.service';
 @Component({
   selector: 'app-structure-details',
   templateUrl: './structure-details.component.html',
@@ -19,8 +21,16 @@ export class StructureDetailsComponent implements OnInit {
   public accessRightsReferentiel: Category;
   public baseSkills: Module[];
   public accessRights: Module[];
+  public printMode = false;
 
-  constructor(private searchService: SearchService) {}
+  constructor(route: ActivatedRoute, private printService: PrintService, private searchService: SearchService) {
+    route.url.subscribe((url) => {
+      if (url[0].path === 'structure') {
+        this.structure = this.printService.structure;
+        this.printMode = true;
+      }
+    });
+  }
 
   ngOnInit(): void {
     this.searchService.getCategoriesTraining().subscribe((referentiels) => {
@@ -32,6 +42,9 @@ export class StructureDetailsComponent implements OnInit {
         }
       });
       this.setServiceCategories();
+      if (this.printMode) {
+        this.printService.onDataReady();
+      }
     });
   }
 
@@ -39,6 +52,10 @@ export class StructureDetailsComponent implements OnInit {
     this.closeDetails.emit(true);
   }
 
+  public print(): void {
+    this.printService.printDocument('structure', this.structure);
+  }
+
   public getAccessIcon(accessModality: AccessModality): string {
     switch (accessModality) {
       case AccessModality.free:

src/app/structure-list/structure-list.component.html

-<div class="topBlock">
+<div class="topBlock hide-on-print">
   <app-structure-list-search (searchEvent)="fetchResults($event)"></app-structure-list-search>
 </div>
-<div class="nbStructuresLabel">
+<div class="nbStructuresLabel hide-on-print">
   {{ structureList ? structureList.length : '0' }} structure{{ structureList && structureList.length > 1 ? 's' : '' }}
 </div>
 

src/app/structure-list/structure-list.component.scss

@@ -19,3 +19,13 @@
 .topBlock {
   padding: 0 25px;
 }
+
+@media print {
+  .listCard {
+    display: none;
+  }
+
+  .hide-on-print {
+    display: none !important;
+  }
+}

src/styles.scss

@@ -132,3 +132,15 @@ a {
 .w-100 {
   width: 100%;
 }
+
+@media print {
+  body,
+  html,
+  .forPrint {
+    height: auto;
+  }
+
+  .content-container {
+    display: none !important;
+  }
+}