From ffd9f09ce20c05065211da10497cc3a32877700b Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Tue, 17 Nov 2020 17:06:32 +0100
Subject: [PATCH] Feat/print
---
src/app/app-routing.module.ts | 2 ++
src/app/app.component.html | 1 +
src/app/app.component.ts | 5 ++-
src/app/footer/footer.component.scss | 12 +++++++
src/app/header/header.component.html | 2 +-
src/app/header/header.component.scss | 6 ++++
src/app/map/components/map.component.scss | 6 ++++
.../components/button/button.component.html | 2 +-
.../components/button/button.component.ts | 8 ++++-
src/app/shared/service/print.service.ts | 34 +++++++++++++++++++
.../structure-details.component.html | 13 +++++--
.../structure-details.component.scss | 19 +++++++++++
.../structure-details.component.ts | 19 ++++++++++-
.../structure-list.component.html | 4 +--
.../structure-list.component.scss | 10 ++++++
src/styles.scss | 12 +++++++
16 files changed, 145 insertions(+), 10 deletions(-)
create mode 100644 src/app/shared/service/print.service.ts
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 1a031a212..52a961c6c 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 863172c1c..f4d4b7c94 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 25def1602..54eae0118 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 b438f3aea..f48ac61f4 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 31ddf6818..045aa764b 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 35317699a..0f02934cc 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 c6eba45fc..9384e8a7b 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 bd98c853b..5b059dee9 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 e1e007e33..4f88fda90 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 000000000..101126c77
--- /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 a01d871b8..2b5060897 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 5ece631a0..df8f21598 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 f6f4312a7..99d8e119c 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 1d80802a9..27a1c1029 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 66ef37ec6..e95a3c4ef 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 a32ecf964..2d6db92a4 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;
+ }
+}
--
GitLab