Merge pull request #163 from PnEcrins/edit-observation

edit observation
PnEcrins · Oct 29, 2024 · 1bdc4d0 · 1bdc4d0
2 parents 9f468c6 + 986af0b
commit 1bdc4d0
Show file tree

Hide file tree

Showing 7 changed files with 274 additions and 59 deletions.
diff --git a/front-end/src/app/app.routes.ts b/front-end/src/app/app.routes.ts
@@ -33,6 +33,19 @@ export const routes: Routes = [
       title: 'Nouvelle observation',
       backButton: true,
       accountButton: false,
+      observation: null,
+    },
+    canActivate: [authGuard],
+  },
+  {
+    path: 'modification-d-une-observation',
+    title: "Modification d'une observation • Regard d'altitude",
+    component: NewObservationComponent,
+    data: {
+      title: "Modification d'une observation",
+      backButton: true,
+      accountButton: false,
+      observation: null,
     },
     canActivate: [authGuard],
   },

diff --git a/front-end/src/app/pages/my-observations/my-observations.component.html b/front-end/src/app/pages/my-observations/my-observations.component.html
@@ -23,7 +23,14 @@
           <button
             mat-icon-button
             class="mt-16"
-            (click)="sendObservation(observation)"
+            (click)="editMyOfflineObservation(observation)"
+          >
+            <mat-icon>edit</mat-icon>
+          </button>
+          <button
+            mat-icon-button
+            class="mt-16"
+            (click)="postObservation(observation)"
           >
             <mat-icon>send</mat-icon>
           </button>
@@ -55,6 +62,13 @@
           {{ getEventType(observation.properties.category)!.label }}</span
         >
         <span matListItemMeta>
+          <button
+            mat-icon-button
+            class="mt-16"
+            (click)="editObservation(observation)"
+          >
+            <mat-icon>edit</mat-icon>
+          </button>
           <button
             mat-icon-button
             class="mt-16"

diff --git a/front-end/src/app/pages/my-observations/my-observations.component.ts b/front-end/src/app/pages/my-observations/my-observations.component.ts
@@ -1,6 +1,6 @@
 import { Component, inject } from '@angular/core';
 import { MatListModule } from '@angular/material/list';
-import { RouterLink } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
 import slugify from 'slugify';
 import { CommonModule } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
@@ -50,6 +50,8 @@ export class MyObservationsComponent {
 
   readonly dialog = inject(MatDialog);
 
+  router = inject(Router);
+
   async ngOnInit() {
     await this.getMyOfflineObservations();
     this.observationsService.getMyObservations().subscribe({
@@ -65,7 +67,7 @@ export class MyObservationsComponent {
       await this.offlineService.getAllDataInStore('observations');
   }
 
-  async sendObservation(myOfflineObservation: Observation) {
+  async postObservation(myOfflineObservation: Observation) {
     const newObservationLoaderDialogRef = this.dialog.open(
       MyObservationLoaderDialog,
       {
@@ -74,7 +76,6 @@ export class MyObservationsComponent {
         disableClose: true,
       },
     );
-
     const observation: ObservationFeature = {
       type: 'Feature',
       geometry: {
@@ -90,7 +91,7 @@ export class MyObservationsComponent {
     if (Boolean(myOfflineObservation.name)) {
       observation.properties.name = myOfflineObservation.name;
     }
-    this.observationsService.sendObservation(observation).subscribe({
+    this.observationsService.postObservation(observation).subscribe({
       next: async (observationResponse: any) => {
         for (
           let index = 0;
@@ -99,7 +100,7 @@ export class MyObservationsComponent {
         ) {
           const file = myOfflineObservation.files![index];
           await firstValueFrom(
-            this.observationsService.sendPhotoObservation(
+            this.observationsService.postPhotoObservation(
               observationResponse.id,
               file,
             ),
@@ -149,7 +150,19 @@ export class MyObservationsComponent {
   async sendObservations() {
     for (let index = 0; index < this.myOfflineObservations.length; index++) {
       const myOfflineObservation = this.myOfflineObservations[index];
-      await this.sendObservation(myOfflineObservation);
+      await this.postObservation(myOfflineObservation);
     }
   }
+
+  editMyOfflineObservation(observation: Observation) {
+    this.router.navigate(['/nouvelle-observation'], {
+      state: { data: observation },
+    });
+  }
+
+  editObservation(observation: ObservationFeature) {
+    this.router.navigate(['/modification-d-une-observation'], {
+      state: { data: observation },
+    });
+  }
 }
diff --git a/front-end/src/app/pages/new-observation/new-observation.component.html b/front-end/src/app/pages/new-observation/new-observation.component.html
@@ -117,7 +117,7 @@
         </button>
       </div>
       <div class="photos-container mt-16" *ngIf="photoForm.value.photos">
-        @for (photo of photoForm.value.photos; track photo.file.name) {
+        @for (photo of photoForm.value.photos; track photo.uuid) {
           <div class="photo-container">
             <button
               mat-icon-button
@@ -250,6 +250,10 @@
       </div>
       <div class="mr-1 mb-1">
         <button
+          *ngIf="
+            !this.currentObservation ||
+            (this.currentObservation && !this.currentObservation.id)
+          "
           mat-flat-button
           (click)="saveAsDraft()"
           [disabled]="observationIsInvalid"
@@ -263,7 +267,12 @@
           (click)="sendObservation()"
           [disabled]="observationIsInvalid"
         >
-          Envoyer
+          {{
+            !this.currentObservation ||
+            (this.currentObservation && !this.currentObservation.id)
+              ? "Envoyer"
+              : "Modifier"
+          }}
         </button>
       </div>
     </mat-step>