From 58e32df6781a20895873e02158cd20ce5315350c Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Mon, 16 Nov 2020 17:49:05 +0100
Subject: [PATCH 1/6] feat: add print feature
---
src/app/app-routing.module.ts | 2 ++
src/app/app.component.html | 3 +-
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/shared/service/print.service.ts | 34 +++++++++++++++++++
.../structure-details.component.html | 3 +-
.../structure-details.component.scss | 12 +++++++
.../structure-details.component.ts | 23 ++++++++++++-
src/styles.scss | 10 ++++++
11 files changed, 107 insertions(+), 5 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..ee092e34d 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,7 +1,8 @@
-<div class="app-container">
+<div class="app-container" [class.isPrinting]="printService.isPrinting">
<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 42cd211f6..e2c1c559a 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="hide-on-print" class="header">
<div class="logo clickable">
<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 724e589e8..975769d53 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -33,3 +33,9 @@
margin: 0;
}
}
+
+@media print {
+ div {
+ display: none !important;
+ }
+}
diff --git a/src/app/shared/service/print.service.ts b/src/app/shared/service/print.service.ts
new file mode 100644
index 000000000..4b3695d63
--- /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 {
+ 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 5edf8c8a5..cbc9560cd 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,5 +1,6 @@
<div class="structrue-details-container">
<!-- Header info -->
+ <button class="hide-on-print" (click)="print()">Print</button>
<div fxLayout="row" class="structrue-details-block" fxLayoutAlign="baseline baseline" fxLayoutGap="20px">
<em class="ic-arrow-left clickable" (click)="close()"></em>
<div fxLayout="column" fxLayoutGap="10px" fxFlex="100%">
@@ -7,7 +8,7 @@
<h2 class="bold">{{ structure.nomDeVotreStructure }}</h2>
<h3>{{ structure.typeDeStructure }}</h3>
</div>
- <app-structure-opening-status [structure]="structure"></app-structure-opening-status>
+ <app-structure-opening-status class="hide-on-print" [structure]="structure"></app-structure-opening-status>
<div fxLayout="row">
<div fxLayout="column" fxFlex="60%">
<div *ngIf="structure.voie" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
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..263ef6457 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,15 @@ a {
margin-top: 9px;
margin-bottom: 9px;
}
+
+@media print {
+ .structrue-details-container {
+ position: absolute;
+ height: 100%;
+ max-width: unset;
+ }
+
+ .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 ff53b7c38..ecbc9b2a8 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,18 @@ 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) {
+ console.log('route');
+ console.log(route);
+ 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 +44,9 @@ export class StructureDetailsComponent implements OnInit {
}
});
this.setServiceCategories();
+ if (this.printMode) {
+ this.printService.onDataReady();
+ }
});
}
@@ -39,6 +54,12 @@ export class StructureDetailsComponent implements OnInit {
this.closeDetails.emit(true);
}
+ public print(): void {
+ console.log('pinrt');
+ // window.print();
+ this.printService.printDocument('structure', this.structure);
+ }
+
public getAccessIcon(accessModality: AccessModality): string {
switch (accessModality) {
case AccessModality.free:
diff --git a/src/styles.scss b/src/styles.scss
index d79b100f2..1d0882bd7 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -132,3 +132,13 @@ a {
.w-100 {
width: 100%;
}
+
+@media print {
+ body,
+ html,
+ .forPrint {
+ width: 100%;
+ height: 100%;
+ overflow: visible;
+ }
+}
--
GitLab
From 572fb21761db3fa9c3e2c56385c5de941b389358 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Mon, 16 Nov 2020 19:29:12 +0100
Subject: [PATCH 2/6] fix: update printing version
---
.../structure-details/structure-details.component.scss | 3 ++-
src/styles.scss | 5 ++---
2 files changed, 4 insertions(+), 4 deletions(-)
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 263ef6457..be24ceb38 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
@@ -62,8 +62,9 @@ a {
@media print {
.structrue-details-container {
position: absolute;
- height: 100%;
+ height: auto;
max-width: unset;
+ padding: 0;
}
.hide-on-print {
diff --git a/src/styles.scss b/src/styles.scss
index 1d0882bd7..d487a4e6d 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -137,8 +137,7 @@ a {
body,
html,
.forPrint {
- width: 100%;
- height: 100%;
- overflow: visible;
+ height: auto;
+ overflow: visible !important;
}
}
--
GitLab
From c420f17deed5a1eda865de9d93513aae80a65a6a Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Mon, 16 Nov 2020 19:29:57 +0100
Subject: [PATCH 3/6] fix: printing layout
---
src/app/map/components/map.component.scss | 6 ++++++
.../structure-details.component.scss | 12 +++++++++---
src/app/structure-list/structure-list.component.html | 6 ++++--
src/app/structure-list/structure-list.component.scss | 10 ++++++++++
src/styles.scss | 5 ++++-
5 files changed, 33 insertions(+), 6 deletions(-)
diff --git a/src/app/map/components/map.component.scss b/src/app/map/components/map.component.scss
index fa76e2cc4..691618fe1 100644
--- a/src/app/map/components/map.component.scss
+++ b/src/app/map/components/map.component.scss
@@ -84,3 +84,9 @@
margin-right: 10px;
}
}
+
+@media print {
+ .map-wrapper {
+ display: none;
+ }
+}
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 be24ceb38..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
@@ -61,10 +61,16 @@ a {
@media print {
.structrue-details-container {
- position: absolute;
- height: auto;
+ background-color: unset;
+ z-index: unset;
+ position: unset;
+ top: unset;
+ left: unset;
max-width: unset;
- padding: 0;
+ width: unset;
+ height: unset;
+ padding: unset;
+ overflow: hidden;
}
.hide-on-print {
diff --git a/src/app/structure-list/structure-list.component.html b/src/app/structure-list/structure-list.component.html
index cf88f4479..08adf8629 100644
--- a/src/app/structure-list/structure-list.component.html
+++ b/src/app/structure-list/structure-list.component.html
@@ -1,7 +1,9 @@
-<div class="topBlock">
+<div class="topBlock hide-on-print">
<app-structure-list-search (searchEvent)="fetchResults($event)"></app-structure-list-search>
</div>
-<div class="nbStructuresLabel">{{ structureList.length }} structure{{ structureList.length > 1 ? 's' : '' }}</div>
+<div class="nbStructuresLabel hide-on-print">
+ {{ structureList.length }} structure{{ structureList.length > 1 ? 's' : '' }}
+</div>
<div class="listCard" (mouseout)="mouseOut()">
<app-card
diff --git a/src/app/structure-list/structure-list.component.scss b/src/app/structure-list/structure-list.component.scss
index b619da552..d4bfc859e 100644
--- a/src/app/structure-list/structure-list.component.scss
+++ b/src/app/structure-list/structure-list.component.scss
@@ -20,3 +20,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 d487a4e6d..c2ff66839 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -138,6 +138,9 @@ a {
html,
.forPrint {
height: auto;
- overflow: visible !important;
+ }
+
+ .content-container {
+ display: none !important;
}
}
--
GitLab
From ec7fc272f34efc1d4274ba5edcc08698def848bd Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Tue, 17 Nov 2020 15:41:22 +0100
Subject: [PATCH 4/6] fix: remove console.log
---
.../structure-details/structure-details.component.ts | 4 ----
1 file changed, 4 deletions(-)
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 ecbc9b2a8..1a937c273 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
@@ -24,8 +24,6 @@ export class StructureDetailsComponent implements OnInit {
public printMode = false;
constructor(route: ActivatedRoute, private printService: PrintService, private searchService: SearchService) {
- console.log('route');
- console.log(route);
route.url.subscribe((url) => {
if (url[0].path === 'structure') {
this.structure = this.printService.structure;
@@ -55,8 +53,6 @@ export class StructureDetailsComponent implements OnInit {
}
public print(): void {
- console.log('pinrt');
- // window.print();
this.printService.printDocument('structure', this.structure);
}
--
GitLab
From 781d247eba502f4f9da77a054b24a96455509633 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Tue, 17 Nov 2020 16:41:24 +0100
Subject: [PATCH 5/6] feat: merge temp button with real button
---
src/app/header/header.component.html | 2 +-
src/app/shared/components/button/button.component.html | 2 +-
src/app/shared/components/button/button.component.ts | 8 +++++++-
3 files changed, 9 insertions(+), 3 deletions(-)
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 31ddf6818..4fbad7f67 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="hide-on-print" class="header">
<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/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();
+ }
}
--
GitLab
From 3e403494430c9a3e517abcf72b730fbbce511511 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Tue, 17 Nov 2020 16:48:26 +0100
Subject: [PATCH 6/6] fix: mr returns
---
src/app/app.component.html | 2 +-
src/app/header/header.component.html | 2 +-
src/app/shared/service/print.service.ts | 2 +-
3 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/app/app.component.html b/src/app/app.component.html
index ee092e34d..f4d4b7c94 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,4 +1,4 @@
-<div class="app-container" [class.isPrinting]="printService.isPrinting">
+<div class="app-container">
<app-header></app-header>
<div class="app-body">
<router-outlet></router-outlet>
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 4fbad7f67..045aa764b 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -1,4 +1,4 @@
-<div fxLayout="row" class="hide-on-print" 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/shared/service/print.service.ts b/src/app/shared/service/print.service.ts
index 4b3695d63..101126c77 100644
--- a/src/app/shared/service/print.service.ts
+++ b/src/app/shared/service/print.service.ts
@@ -6,7 +6,7 @@ import { Structure } from '../../models/structure.model';
providedIn: 'root',
})
export class PrintService {
- isPrinting = false;
+ public isPrinting = false;
public structure: Structure;
constructor(private router: Router) {}
--
GitLab