feat(MesForets): chargement depuis list fixe avant passage a l'API

src/app/core/interceptors/app-token.interceptor.ts

@@ -24,8 +24,6 @@ export class AppTokenInterceptor implements HttpInterceptor {
       return next.handle(request);
     }
 
-    console.log('[AppTokenInterceptor]', 'intercept', request.url);
-
     if (this.hasToken()) {
       request = this.addToken(request);
     }

src/app/pages/mes-forets/mes-forets.component.html

@@ -25,8 +25,8 @@ <h1>Mes Forets</h1>
         [description]="foret.description" [enlargeLink]="foret.enlargeLink" [hasFooter]="foret.hasFooter"
         [horizontal]="foret.horizontal">
         <dsfr-buttons-group footer inline="always">
-          <dsfr-button label="Voir le détail" (click)="goToRequete(foret.heading)"></dsfr-button>
-          <dsfr-button label="?" variant="secondary"></dsfr-button>
+          <dsfr-button label="Voir le détail" (click)="goToRequete(foret.id)"></dsfr-button>
+          <dsfr-button label="Supprimer" customClass="fr-tag--pink-macaron"></dsfr-button>
         </dsfr-buttons-group>
       </dsfr-card>
     </div>

src/app/pages/mes-forets/mes-forets.component.ts

@@ -29,24 +29,30 @@ export class MesForetsComponent implements OnInit {
     private router: Router
   ) { }
 
+
   ngOnInit(): void {
     this.buildBreadcrumb();
-    this.foretService.list().pipe(
-      catchError((error) => {
-        console.error('error', error);
-        this.subcribed = false;
-        return this.foretService.mockList();
-      })
-    ).subscribe((forets) => {
-      console.log('subscribe((forets)', forets);
+
+    this.foretService.mockList().subscribe((forets) => {
       this.foretCards = forets.map((foret) => this.cardTransformerService.fromForet(foret));
     });
+
+    // this.foretService.list().pipe(
+    //   catchError((error) => {
+    //     this.subcribed = false;
+    //     return this.foretService.mockList();
+    //   })
+    // ).subscribe((forets) => {
+    //   this.foretCards = forets.map((foret) => this.cardTransformerService.fromForet(foret));
+    // });
   }
 
-  goToRequete(foretTitle: string) {
-    this.router.navigate(['/', 'requete', foretTitle]);
+
+  goToRequete(foretId: string) {
+    this.router.navigate(['/', 'requete', foretId]);
   }
 
+
   private buildBreadcrumb() {
     this.breadcrumb = this.breadcrumbTransformerService.fromOptions({
       label: 'Mes forêts', route: ''

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

@@ -6,7 +6,7 @@
   </ng-container>
 
   <ng-container *ngIf="step === 2">
-    <dsfr-button label="Enregistrer Ma Forêt" (click)="save()"></dsfr-button>
+    <dsfr-button label="Enregistrer Ma Forêt" (click)="emitSave()"></dsfr-button>
   </ng-container>
 
   <ng-container *ngIf="step !== 3">

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

@@ -14,6 +14,8 @@ export class RequeteStepperControlComponent implements OnChanges {
 
   @Output() previous: EventEmitter<boolean> = new EventEmitter<boolean>();
 
+  @Output() save: EventEmitter<boolean> = new EventEmitter<boolean>();
+
   previousButtonLabel = 'Précédent';
 
   nextButtonLabel = 'Suivant';
@@ -39,8 +41,8 @@ export class RequeteStepperControlComponent implements OnChanges {
   }
 
 
-  save() {
-    alert('[TODO][FONCTION NEXISTE PAS] Sauvegarde effectuée');
+  emitSave() {
+    this.save.emit(true);
   }
 
 

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

@@ -1,16 +1,20 @@
-<div *ngIf="breadcrumb" class="fr-container ">
+<div *ngIf="breadcrumb" class="fr-container">
   <app-breadcrumb [breadcrumb]="breadcrumb"></app-breadcrumb>
 </div>
 
 <div class="fr-container">
 
-  <h1>Votre forêt<span *ngIf="forestId"> - {{ forestId }}</span></h1>
+  <h1>
+    Votre forêt
+    @if (foret) {
+      <span> - {{ foret.name }}</span>
+    }
+  </h1>
 
   <app-requete-stepper [step]="step"></app-requete-stepper>
 
   <app-requete-stepper-control [step]="step" (previous)="previousStep()"
-    (next)="nextStep()"></app-requete-stepper-control>
-
+    (next)="nextStep()" (save)="saveForet()"></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">

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

@@ -1,19 +1,20 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { map } from 'rxjs';
 
 import { MapContextService } from '../../../shared-map/services/map-context.service';
 import { BreadcrumbTransformerService } from '../../../shared-design-dsfr/transformers/breadcrumb-transformer.service';
 import { THEMATIC_LIST } from '../../../shared-thematic/models/thematic-list.enum';
+import { Foret } from '../../../shared/models/foret.model';
 
 @Component({
   selector: 'app-requete-new',
   templateUrl: './requete-new.component.html',
   styleUrl: './requete-new.component.css'
 })
-export class RequeteNewComponent implements OnInit {
+export class RequeteNewComponent implements OnInit, AfterViewInit {
 
-  forestId: string = '';
+  foret?: Foret;
 
   step: number = 0;
 
@@ -26,19 +27,23 @@ export class RequeteNewComponent implements OnInit {
   ) { }
 
   ngOnInit(): void {
-    this.route.params.pipe(
-      map((params) => {
-        if (params['id']) {
-          this.forestId = params['id'];
-          this.step = 2;
+
+    this.route.data.pipe(
+      map((response: any) => {
+        if (response && response.data) {
+          this.foret = response.data;
         }
-        this.buildBreadcrumb();
+        this.loadPageComponent();
       })
     ).subscribe();
   }
 
-  ngOnDestroy(): void {
-    this.mapContextService.destroyMap();
+  ngAfterViewInit(): void {
+    this.loadWithForet();
+  }
+
+  saveForet() { 
+    const geoJson = this.mapContextService.maForetToGeoJson();
   }
 
   confirmSelect() {
@@ -83,13 +88,26 @@ export class RequeteNewComponent implements OnInit {
     }
   }
 
+
   updateThematics() {
     this.mapContextService.updateLayers();
   }
 
+
+  private loadWithForet() {
+    if (!this.foret) {
+      return;
+    }
+    if (this.foret.geometry) {
+      this.mapContextService.maForetFromGeoJson(this.foret.geometry);
+    }
+    this.step = 1;
+    this.nextStep();
+  }
+
 
-  private buildBreadcrumb() {
-    const label = this.forestId ? `Requête ${this.forestId}` : 'Nouvelle requête';
+  private loadPageComponent() {
+    const label = this.foret ? `Requête ${this.foret}` : 'Nouvelle requête';
     this.breadcrumb = this.breadcrumbTransformerService.fromOptions({
       label: label, route: ''
     });

src/app/requete/requete.routes.ts

@@ -1,7 +1,15 @@
-import { Routes } from '@angular/router';
+import { ActivatedRouteSnapshot, ResolveFn, RouterStateSnapshot, Routes } from '@angular/router';
+import { inject } from '@angular/core';
 
 import { RequeteNewComponent } from './pages/requete-new/requete-new.component';
 import { RequetePrinterComponent } from './pages/requete-printer/requete-printer.component';
+import { ForetService } from '../shared/services/foret.service';
+import { Foret } from '../shared/models/foret.model';
+
+
+export const resolver: ResolveFn<Foret | undefined> = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
+  return inject(ForetService).getMockForet(route.paramMap.get('id')!);
+};
 
 export const requeteRoutes: Routes = [
   {
@@ -12,7 +20,8 @@ export const requeteRoutes: Routes = [
   {
     path: ':id',
     component: RequeteNewComponent,
-    title: 'Requête sur ma forêt'
+    title: 'Requête sur ma forêt',
+    resolve: { data: resolver }
   },
   {
     path: 'nouvelle/impression',

src/app/shared-design-dsfr/transformers/card-transformer.service.ts

@@ -32,7 +32,7 @@ export class CardTransformerService {
       imagePath: foret.imgUrl,
       enlargeLink: false,
       hasFooter: true,
-      horizontal: true
+      horizontal: true,
     };
 
     return foretCard;

src/app/shared-map/services/map-context.service.ts

@@ -12,6 +12,7 @@ import { extend } from 'ol/extent';
 import GeoportailLayer from 'ol-ext/layer/Geoportail';
 import EditBar from 'ol-ext/control/EditBar.js';
 import LayerSwitcher from 'ol-ext/control/LayerSwitcher';
+import GeoJSON from 'ol/format/GeoJSON.js';
 
 import { MAP_DEFAULT_LAYER_GROUP } from '../models/map-layers-default.enum';
 import { MAP_BIODIVERISTE_LAYER_GROUP, MAP_PATRIMOINE_LAYER_GROUP } from '../../shared-thematic/models/map-thematic-layers.enum';
@@ -259,13 +260,34 @@ export class MapContextService {
     }
     return this.getLayerDessin().getSource().getFeatures();
   }
+
+
+  maForetFromGeoJson(geoJson: any) {
+    if (!this.getLayerDessin()) {
+      return;
+    }
+    this.getLayerDessin().getSource().clear();
+    this.getLayerDessin().getSource().addFeatures(new GeoJSON().readFeatures(geoJson));
+  }
+
+  maForetToGeoJson() {
+    if (!this.getLayerDessin()) {
+      return null;
+    }
+    const features = this.getLayerDessin().getSource().getFeatures();
+    const geoJson = new GeoJSON().writeFeatures(features);
+    return JSON.parse(geoJson);
+  }
+
 
   resetDessin() {
     this.getLayerDessin().getSource().forEachFeature((f: any) => {
       this.getLayerDessin()?.getSource().removeFeature(f);
     });
   }
 
+
+
   centerOnDessin(map?: Map) {
     if (!map) {
       map = this.map;

src/app/shared/models/foret.model.ts

@@ -3,43 +3,59 @@ import { Serializable } from '../../core/models/serializable.model';
 export class Foret implements Serializable {
 
   id: string = '';
+
   name: string = '';
+
+  adresse: any = {};
+
   description: string = '';
+
   tags: Array<string> = [];
+
   parcels: Array<string> = [];
+
   imgUrl: string = '';
+
   area: number = 0;
+
   createdAt: Date = new Date();
+
   updatedAt: Date = new Date();
 
+  geometry: any = {};
+
   constructor() { }
 
   deserialise(input: any) {
     Object.assign(this, {
       id: input.id,
       name: input.name,
+      adresse: input.adresse,
       description: input.description,
       tags: input.tags,
       parcels: input.parcels,
       imgUrl: input.imgUrl,
       area: input.area,
       createdAt: input.createdAt,
-      updatedAt: input.updatedAt
-    });
+      updatedAt: input.updatedAt,
+      geometry: input.geometry
+});
     return this;
   }
 
   serialise() {
     return {
       id: this.id,
       name: this.name,
+      adresse: this.adresse,
       description: this.description,
       tags: this.tags,
       parcels: this.parcels,
       imgUrl: this.imgUrl,
       area: this.area,
       createdAt: this.createdAt,
-      updatedAt: this.updatedAt
+      updatedAt: this.updatedAt,
+      geometry: this.geometry
     };
   }