Printer

src/app/app.module.ts

@@ -20,6 +20,7 @@ import { MesForetsComponent } from './pages/mes-forets/mes-forets.component';
 import { ExtendDatePipe } from './shared/pipes/extend-date.pipe';
 import { SimplePageComponent } from './pages/simple-page/simple-page.component';
 
+
 @NgModule({
   declarations: [
     AppComponent,

src/app/requete/components/requete-export-list/requete-export-list.component.css

@@ -0,0 +1,9 @@
+ul {
+  padding: 0;
+  list-style: none;
+}
+
+ul li {
+  padding: 0;
+  display: block;
+}

src/app/requete/components/requete-export-list/requete-export-list.component.html

@@ -0,0 +1,12 @@
+<div class="fr-grid-row fr-grid-row--gutters">
+  @for (tile of exportTiles; track tile) {
+  <div class="fr-col-12 fr-col-lg-6">
+    <dsfr-tile [customBackground]="tile.customBackground" [customBorder]="tile.customBorder"
+      [description]="tile.description" [disabled]="tile.disabled" [downloadDirect]="tile.downloadDirect"
+      [downloadAssessFile]="tile.downloadAssessFile" [enlargeLink]="tile.enlargeLink" [heading]="tile.heading"
+      [headingLevel]="tile.headingLevel" [horizontal]="tile.horizontal" [route]="tile.route" [size]="tile.size"
+      [download]="tile.download" [artworkDirPath]="tile.artworkDirPath" [artworkFilePath]="tile.artworkFilePath"
+      [detail]="tile.detail" (tileSelect)="tileSelect($event)"></dsfr-tile>
+  </div>
+  }
+</div>

src/app/requete/components/requete-export-list/requete-export-list.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RequeteExportListComponent } from './requete-export-list.component';
+import { SharedDesignDsfrModule } from '../../../shared-design-dsfr/shared-design-dsfr.module';
+
+describe('RequeteExportListComponent', () => {
+  let component: RequeteExportListComponent;
+  let fixture: ComponentFixture<RequeteExportListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [RequeteExportListComponent],
+      imports: [SharedDesignDsfrModule]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RequeteExportListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/requete/components/requete-export-list/requete-export-list.component.ts

@@ -0,0 +1,67 @@
+import { Component, OnInit } from '@angular/core';
+import { TileTranformerService } from '../../../shared-design-dsfr/transformers/tile-tranformer.service';
+import { Router } from '@angular/router';
+
+const EXPORT_TILE_CONFIG = [
+  {
+    customBackground: 'default',
+    customBorder: 'default',
+    description: 'Vous allez être dirigé vers une aperçu de l\'impression',
+    disabled: false,
+    downloadDirect: true,
+    downloadAssessFile: false,
+    enlargeLink: true,
+    heading: 'Imprimer un rapport',
+    headingLevel: 'H3',
+    horizontal: false,
+    route: 'requete/nouvelle/impression',
+    size: 'MD',
+    download: false,
+    artworkDirPath: 'artwork',
+    artworkFilePath: 'artwork/pictograms/buildings/city-hall.svg',
+    detail: 'Détail (optionnel)'
+  },
+  {
+    customBackground: 'default',
+    customBorder: 'default',
+    description: 'Exporter les données de la requête',
+    disabled: false,
+    downloadDirect: true,
+    downloadAssessFile: false,
+    enlargeLink: true,
+    heading: 'Export',
+    headingLevel: 'H3',
+    horizontal: false,
+    route: 'requete/nouvelle/impression',
+    size: 'MD',
+    download: false,
+    artworkDirPath: 'artwork',
+    artworkFilePath: 'artwork/pictograms/buildings/city-hall.svg',
+    detail: 'Détail (optionnel)'
+  }
+];
+
+@Component({
+  selector: 'app-requete-export-list',
+  templateUrl: './requete-export-list.component.html',
+  styleUrl: './requete-export-list.component.css'
+})
+export class RequeteExportListComponent implements OnInit {
+
+  exportTiles: any[] = [];
+
+  constructor(
+    private tileTranformerService: TileTranformerService,
+    private router: Router
+  ) { }
+
+  ngOnInit(): void {
+    this.exportTiles = EXPORT_TILE_CONFIG.map((tile: any) => this.tileTranformerService.fromOptions(tile));
+  }
+
+  tileSelect(route: string) {
+    // TODO determine active foret
+    this.router.navigate(['/', 'requete', 'nouvelle', 'impression']);
+  }
+
+}

src/app/requete/components/requete-stepper-control/requete-stepper-control.component.html

@@ -1,4 +1,17 @@
 <dsfr-buttons-group inline="always" iconPosition="left" class="step-btn">
-  <dsfr-button label="Modifier" variant="secondary" icon="fr-icon-arrow-left-fill" (click)="emitPrevious()" [disabled]="step < 1"></dsfr-button>
-  <dsfr-button label="Valider" icon="fr-icon-arrow-right-fill" (click)="emitNext()" [disabled]="step > 2"></dsfr-button>
+
+  <ng-container *ngIf="step !== 0">
+    <dsfr-button [label]="previousButtonLabel" variant="secondary" icon="fr-icon-arrow-left-fill"
+      (click)="emitPrevious()" [disabled]="step < 1"></dsfr-button>
+  </ng-container>
+
+  <ng-container *ngIf="step === 2">
+    <dsfr-button label="Enregistrer Ma Forêt" (click)="save()"></dsfr-button>
+  </ng-container>
+
+  <ng-container *ngIf="step !== 3">
+    <dsfr-button [label]="nextButtonLabel" icon="fr-icon-arrow-right-fill" (click)="emitNext()"
+      [disabled]="step > 2"></dsfr-button>
+  </ng-container>
+
 </dsfr-buttons-group>

src/app/requete/components/requete-stepper-control/requete-stepper-control.component.ts

@@ -1,29 +1,54 @@
-import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { STEPPER_CONFIG } from '../requete-stepper/requete-stepper.component';
 
 @Component({
   selector: 'app-requete-stepper-control',
   templateUrl: './requete-stepper-control.component.html',
   styleUrl: './requete-stepper-control.component.css'
 })
-export class RequeteStepperControlComponent {
+export class RequeteStepperControlComponent implements OnChanges {
 
   @Input() step: number = 0;
 
   @Output() next: EventEmitter<boolean> = new EventEmitter<boolean>();
 
   @Output() previous: EventEmitter<boolean> = new EventEmitter<boolean>();
 
-  constructor(private cdr: ChangeDetectorRef) {}
+  previousButtonLabel = 'Précédent';
+
+  nextButtonLabel = 'Suivant';
+
+  constructor(private cdr: ChangeDetectorRef) { }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['step']) {
+      this.updateButtonLabel();
+    }
+  }
 
   emitNext() {
     this.next.emit(true);
     // Marque le composant pour réévaluation lors du prochain cycle de détection
     this.cdr.markForCheck();
+
   }
 
   emitPrevious() {
     this.previous.emit(true);
     this.cdr.markForCheck();
   }
 
+
+  save() {
+    alert('[TODO][FONCTION NEXISTE PAS] Sauvegarde effectuée');
+  }
+
+
+  private updateButtonLabel() {
+    if (this.step > 0) {
+      this.previousButtonLabel = STEPPER_CONFIG[this.step - 1].currentStepTitle;
+    }
+    this.nextButtonLabel = STEPPER_CONFIG[this.step].nextStepTitle;
+  }
+
 }

src/app/requete/components/requete-stepper/requete-stepper.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 
-const STEPPER_CONFIG = [
+export const STEPPER_CONFIG = [
   { currentStep: 1, currentStepTitle: 'Localiser la forêt', nextStepTitle: 'Préciser le périmètre de la forêt' },
   { currentStep: 2, currentStepTitle: 'Préciser le périmètre', nextStepTitle: 'Sélectionner les informations' },
   { currentStep: 3, currentStepTitle: 'Sélectionnez les informations', nextStepTitle: 'Exporter les informations' },

src/app/requete/pages/requete-new/requete-new.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="breadcrumb" class="fr-container">
+<div *ngIf="breadcrumb" class="fr-container ">
   <app-breadcrumb [breadcrumb]="breadcrumb"></app-breadcrumb>
 </div>
 
@@ -8,6 +8,10 @@ <h1>Votre forêt<span *ngIf="forestId"> - {{ forestId }}</span></h1>
 
   <app-requete-stepper [step]="step"></app-requete-stepper>
 
+  <app-requete-stepper-control [step]="step" (previous)="previousStep()"
+    (next)="nextStep()"></app-requete-stepper-control>
+
+
   <div *ngIf="step === 0 || step === 1" class="fr-grid-row fr-mb-4v">
     <div class="fr-col-12 fr-col-lg-6">
       <app-geolocalise-form (select)="confirmSelect()"></app-geolocalise-form>
@@ -27,14 +31,14 @@ <h1>Votre forêt<span *ngIf="forestId"> - {{ forestId }}</span></h1>
     </div>
 
     <div class="fr-col-12 fr-col-lg-6">
-      <app-thematic-tabs *ngIf="step > 1"></app-thematic-tabs>
+      <app-thematic-tabs *ngIf="step === 2"></app-thematic-tabs>
+      <app-requete-export-list *ngIf="step === 3"></app-requete-export-list>
     </div>
 
   </div>
 
-  <div class="fr-mt-4v">
+  <!-- <div class="fr-mt-4v">
     <app-requete-stepper-control [step]="step" (previous)="previousStep()"
       (next)="nextStep()"></app-requete-stepper-control>
-  </div>
-
+  </div> -->
 </div>

src/app/requete/pages/requete-new/requete-new.component.ts

@@ -35,10 +35,11 @@ export class RequeteNewComponent implements OnInit {
         this.buildBreadcrumb();
       })
     ).subscribe();
-
-    this.mapContextService.createMap('map');
   }
 
+  ngOnDestroy(): void {
+    this.mapContextService.destroyMap();
+  }
 
   confirmSelect() {
     if (this.step === 0) {

src/app/requete/pages/requete-printer/requete-printer.component.html

@@ -0,0 +1,7 @@
+<div class="fr-container">
+
+  <h1>Votre forêt - Impression</h1>
+
+  <app-thematic-list></app-thematic-list>
+
+</div>

src/app/requete/pages/requete-printer/requete-printer.component.spec.ts

@@ -0,0 +1,46 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CommonModule } from '@angular/common';
+
+import { appConfig } from '../../../app.config';
+import { RequetePrinterComponent } from './requete-printer.component';
+import { ThematicListComponent } from '../../../shared-thematic/components/thematic-list/thematic-list.component';
+import { SharedDesignDsfrModule } from '../../../shared-design-dsfr/shared-design-dsfr.module';
+import { SharedMapModule } from '../../../shared-map/shared-map.module';
+import { SyntheseComponent } from '../../../shared-thematic/components/synthese/synthese.component';
+import { FicheInfoViewComponent } from '../../../shared-thematic/components/fiche-info-view/fiche-info-view.component';
+import { LayerInfoViewComponent } from '../../../shared-thematic/components/layer-info-view/layer-info-view.component';
+import { MapViewerComponent } from '../../../shared-map/components/map-viewer/map-viewer.component';
+
+
+describe('RequetePrinterComponent', () => {
+  let component: RequetePrinterComponent;
+  let fixture: ComponentFixture<RequetePrinterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        RequetePrinterComponent,
+        ThematicListComponent,
+        SyntheseComponent,
+        FicheInfoViewComponent,
+        LayerInfoViewComponent,
+        MapViewerComponent
+      ],
+      imports: [
+        CommonModule,
+        SharedDesignDsfrModule,
+        SharedMapModule,
+      ],
+      providers: appConfig.providers
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RequetePrinterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+});

src/app/requete/pages/requete-printer/requete-printer.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+
+@Component({
+  selector: 'app-requete-printer',
+  templateUrl: './requete-printer.component.html',
+  styleUrl: './requete-printer.component.css',
+})
+export class RequetePrinterComponent implements OnInit {
+
+  constructor( ) {}
+
+  ngOnInit(): void { }
+
+
+}

src/app/requete/requete.module.ts

@@ -3,18 +3,22 @@ import { CommonModule } from '@angular/common';
 import { provideRouter } from '@angular/router';
 
 import { RequeteNewComponent } from './pages/requete-new/requete-new.component';
+import { RequetePrinterComponent } from './pages/requete-printer/requete-printer.component';
 import { RequeteStepperComponent } from './components/requete-stepper/requete-stepper.component';
 import { SharedDesignDsfrModule } from '../shared-design-dsfr/shared-design-dsfr.module';
 import { SharedMapModule } from '../shared-map/shared-map.module';
 import { RequeteStepperControlComponent } from './components/requete-stepper-control/requete-stepper-control.component';
 import { SharedThematicModule } from '../shared-thematic/shared-thematic.module';
 import { requeteRoutes } from './requete.routes';
+import { RequeteExportListComponent } from './components/requete-export-list/requete-export-list.component';
 
 @NgModule({
   declarations: [
     RequeteNewComponent,
+    RequetePrinterComponent,
     RequeteStepperComponent,
-    RequeteStepperControlComponent
+    RequeteStepperControlComponent,
+    RequeteExportListComponent
   ],
   imports: [
     CommonModule,

src/app/requete/requete.routes.ts

@@ -1,6 +1,7 @@
 import { Routes } from '@angular/router';
 
 import { RequeteNewComponent } from './pages/requete-new/requete-new.component';
+import { RequetePrinterComponent } from './pages/requete-printer/requete-printer.component';
 
 export const requeteRoutes: Routes = [
   {
@@ -12,5 +13,10 @@ export const requeteRoutes: Routes = [
     path: ':id',
     component: RequeteNewComponent,
     title: 'Requête sur ma forêt'
-  }
+  },
+  {
+    path: 'nouvelle/impression',
+    component: RequetePrinterComponent,
+    title: 'Impression'
+  },
 ];

src/app/shared-design-dsfr/shared-design-dsfr.module.ts

@@ -36,7 +36,7 @@ import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.componen
 
 @NgModule({
   declarations: [
-    BreadcrumbComponent
+    BreadcrumbComponent,
   ],
   imports: [
     CommonModule,