diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 1a031a21257b35e59e3155dfc62e6d4a21aa8e98..52a961c6c2cfcf8ae3d4aa8822cf753cdd1ae978 100644
--- a/src/app/app-routing.module.ts
+++ b/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,
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 863172c1c5b3a4173954ebbcd8a7fa060e776df1..f4d4b7c94d52798f4b87edb0e1160486c03c25b2 100644
--- a/src/app/app.component.html
+++ b/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>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 25def1602220bc064e11f67c9119f7926c5356fc..54eae011826b429c49877e3ceb093d84ed45e7ce 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,10 +1,13 @@
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) {}
}
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
index b438f3aeab19b37195717fadedf03526461c46b1..f48ac61f4fde27d502874d9e8e47dbb09ba12a19 100644
--- a/src/app/footer/footer.component.scss
+++ b/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;
+ }
+}
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 31ddf68180a0fa99b9636316bcdc4578a01d57aa..045aa764b8794aac3f73ed8b168ec3e6e1c528e5 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -1,4 +1,4 @@
-<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 /> -->
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 35317699a2720d9279686694123f124e4f0328cd..0f02934cc371f7f9806836005e582678722b6cfd 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -42,3 +42,9 @@
margin: 0;
}
}
+
+@media print {
+ div {
+ display: none !important;
+ }
+}
diff --git a/src/app/map/components/map.component.scss b/src/app/map/components/map.component.scss
index c6eba45fc010f38e7b433a5d3b380e449ebc0c1b..9384e8a7b934ad971a673bb327a620509bf21eb9 100644
--- a/src/app/map/components/map.component.scss
+++ b/src/app/map/components/map.component.scss
@@ -100,3 +100,9 @@
margin-right: 10px;
}
}
+
+@media print {
+ .map-wrapper {
+ display: none;
+ }
+}
diff --git a/src/app/shared/components/button/button.component.html b/src/app/shared/components/button/button.component.html
index bd98c853b5a423f2df286050a247b8ffdb289023..5b059dee959364d697fb6dabbe58e52ca0e63c43 100644
--- a/src/app/shared/components/button/button.component.html
+++ b/src/app/shared/components/button/button.component.html
@@ -1,5 +1,5 @@
<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"
diff --git a/src/app/shared/components/button/button.component.ts b/src/app/shared/components/button/button.component.ts
index e1e007e33dbfddd5ab19fe885c53cafe0516ce29..4f88fda9054946f1e78cfdb15e9d496493083015 100644
--- a/src/app/shared/components/button/button.component.ts
+++ b/src/app/shared/components/button/button.component.ts
@@ -1,4 +1,4 @@
-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();
+ }
}
diff --git a/src/app/shared/service/print.service.ts b/src/app/shared/service/print.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..101126c77ca3d0d2f6f9e5dabdebf87692a7f30a
--- /dev/null
+++ b/src/app/shared/service/print.service.ts
@@ -0,0 +1,34 @@
+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 } }]);
+ });
+ }
+}
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.html b/src/app/structure-list/components/structure-details/structure-details.component.html
index a01d871b8bb7e46e37832fd7880c09336578cf0d..2b506089740afb23fca0f7cb963f7dd3f3323f30 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.html
+++ b/src/app/structure-list/components/structure-details/structure-details.component.html
@@ -1,7 +1,7 @@
<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>
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.scss b/src/app/structure-list/components/structure-details/structure-details.component.scss
index 5ece631a00393a2eae3ed865451a148398e3447b..df8f2159806f789a8ee7441a0176bacdc3a30576 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.scss
+++ b/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;
+ }
+}
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.ts b/src/app/structure-list/components/structure-details/structure-details.component.ts
index f6f4312a7e995e58b4c9bae585fcc4ccb94fb0d3..99d8e119cc3712552df98cdbf241ed29efcf2042 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.ts
+++ b/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:
diff --git a/src/app/structure-list/structure-list.component.html b/src/app/structure-list/structure-list.component.html
index 1d80802a9cfddc7a15cde77973eaef686bc4c09e..27a1c1029a0a1c0343097fe6f243a5641cabcff8 100644
--- a/src/app/structure-list/structure-list.component.html
+++ b/src/app/structure-list/structure-list.component.html
@@ -1,7 +1,7 @@
-<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>
diff --git a/src/app/structure-list/structure-list.component.scss b/src/app/structure-list/structure-list.component.scss
index 66ef37ec675564b3414adfa2bdb33169d0365842..e95a3c4efca433a7b6e9b79fa5ef779fb7fb87f9 100644
--- a/src/app/structure-list/structure-list.component.scss
+++ b/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;
+ }
+}
diff --git a/src/styles.scss b/src/styles.scss
index a32ecf96448f9befab94b8d6a1efecdca64ef3e4..2d6db92a4650118d681d882823bf1bf86d81aa7c 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -132,3 +132,15 @@ a {
.w-100 {
width: 100%;
}
+
+@media print {
+ body,
+ html,
+ .forPrint {
+ height: auto;
+ }
+
+ .content-container {
+ display: none !important;
+ }
+}