feat: crop info edit

e-picsa · Mar 12, 2024 · 283070e · 283070e
1 parent 30f377f
commit 283070e
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 27 deletions.
diff --git a/apps/picsa-apps/dashboard/src/app/modules/crop-information/crop-information.module.ts b/apps/picsa-apps/dashboard/src/app/modules/crop-information/crop-information.module.ts
@@ -14,10 +14,16 @@ import { NewEntryPageComponent } from './pages/new_entry/new_entry.page';
         path: '',
         component: CropInformationPageComponent,
       },
+      // new entry
       {
         path: 'entry',
         component: NewEntryPageComponent,
       },
+      // editable entry
+      {
+        path: ':id',
+        component: NewEntryPageComponent,
+      },
     ]),
   ],
 })

diff --git a/apps/picsa-apps/dashboard/src/app/modules/crop-information/crop-information.page.ts b/apps/picsa-apps/dashboard/src/app/modules/crop-information/crop-information.page.ts
@@ -3,12 +3,12 @@ import '@uppy/dashboard/dist/style.min.css';
 
 import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { PicsaDataTableComponent } from '@picsa/shared/features';
 import { PicsaNotificationService } from '@picsa/shared/services/core/notification.service';
 
 import { DashboardMaterialModule } from '../../material.module';
-import { CropProbabilityDashboardService } from './crop-information.service';
+import { CropProbabilityDashboardService, ICropInformationRow } from './crop-information.service';
 
 @Component({
   selector: 'dashboard-resources-page',
@@ -21,6 +21,8 @@ export class CropInformationPageComponent implements OnInit {
   constructor(
     public service: CropProbabilityDashboardService,
     private notificationService: PicsaNotificationService,
+    private route: ActivatedRoute,
+    private router: Router
   ) {}
 
   displayedColumns: string[] = [
@@ -30,12 +32,14 @@ export class CropInformationPageComponent implements OnInit {
     'water_upper',
     'length_lower',
     'length_upper',
-    'label'
+    'label',
   ];
 
   tableOptions = {
     displayColumns: this.displayedColumns,
-    handleRowClick: () => null,
+    handleRowClick: (row: ICropInformationRow) => {
+      this.router.navigate([row.id], { relativeTo: this.route });
+    },
   };
 
   async ngOnInit() {

diff --git a/apps/picsa-apps/dashboard/src/app/modules/crop-information/crop-information.service.ts b/apps/picsa-apps/dashboard/src/app/modules/crop-information/crop-information.service.ts
@@ -38,11 +38,11 @@ export class CropProbabilityDashboardService extends PicsaAsyncService {
     this.cropProbabilities = data || [];
   }
 
-  public async addCropProbability(cropProbability: Partial<ICropInformationRow>): Promise<string> {
-    const { data, error } = await this.supabaseService.db.table('crop_data').insert([cropProbability]);
+  public async addCropProbability(cropProbability: ICropInformationInsert) {
+    const { data, error } = await this.supabaseService.db.table('crop_data').upsert([cropProbability]);
     if (error) {
       throw error;
     }
-    return 'Added successfully';
+    return data;
   }
 }
diff --git a/...-apps/dashboard/src/app/modules/crop-information/pages/new_entry/new_entry.component.html b/...-apps/dashboard/src/app/modules/crop-information/pages/new_entry/new_entry.component.html
@@ -25,9 +25,8 @@ <h2>New Crop Probability Entry</h2>
       <label for="length_lower">Length Lower:</label>
       <input id="lenght_lower" type="number" formControlName="length_lower" />
     </div>
-    <button mat-raised-button color="primary" class="submitButton" type="submit" [disabled]="!entryForm.valid">Submit</button>
+    <button mat-raised-button color="primary" class="submitButton" type="submit" [disabled]="!entryForm.valid">
+      Submit
+    </button>
   </form>
-  @if(ActionFeedbackMessage){
-  <div>{{ ActionFeedbackMessage }}</div>
-  }
 </div>
diff --git a/apps/picsa-apps/dashboard/src/app/modules/crop-information/pages/new_entry/new_entry.page.ts b/apps/picsa-apps/dashboard/src/app/modules/crop-information/pages/new_entry/new_entry.page.ts
@@ -1,10 +1,15 @@
 import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { FormBuilder, FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { PicsaNotificationService } from '@picsa/shared/services/core/notification.service';
 
 import { DashboardMaterialModule } from '../../../../material.module';
-import { CropProbabilityDashboardService, ICropInformationInsert } from '../../crop-information.service';
+import {
+  CropProbabilityDashboardService,
+  ICropInformationInsert,
+  ICropInformationRow,
+} from '../../crop-information.service';
 
 @Component({
   selector: 'dashboard-new-entry',
@@ -15,14 +20,14 @@ import { CropProbabilityDashboardService, ICropInformationInsert } from '../../c
 })
 export class NewEntryPageComponent implements OnInit {
   entryForm = this.formBuilder.nonNullable.group({
+    id: new FormControl(), // populated by server or on edit
     crop: ['', Validators.required],
     variety: ['', Validators.required],
     water_lower: [0],
     water_upper: [0],
     length_lower: [0],
     length_upper: [0],
   });
-  ActionFeedbackMessage: string;
 
   /** Utility method, retained to ensure rawValue corresponds to expected CaledarDataEntry type */
   private get formValue() {
@@ -34,25 +39,42 @@ export class NewEntryPageComponent implements OnInit {
     private service: CropProbabilityDashboardService,
     private formBuilder: FormBuilder,
     private router: Router,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private notificationService: PicsaNotificationService
   ) {
     this.service.ready();
   }
 
   ngOnInit(): void {
     this.service.ready();
+    const { id } = this.route.snapshot.params;
+    if (id) {
+      this.loadEditableEntry(id);
+    }
   }
-  submitForm() {
-    this.service
-      .addCropProbability(this.formValue)
-      .then((data) => {
-        if (data === 'Added successfully') {
-          this.router.navigate(['../'], { relativeTo: this.route, replaceUrl: true });
-        }
-      })
-      .catch((error) => {
-        console.error('Error adding new entry:', error);
-        this.ActionFeedbackMessage = 'Error adding new entry';
-      });
+
+  async submitForm() {
+    const data = this.formValue;
+    // remove `null` id generated if not editing
+    if (data.id === null) delete data.id;
+    try {
+      await this.service.addCropProbability(data);
+      // navigate back after successful addition
+      this.router.navigate(['../'], { relativeTo: this.route, replaceUrl: true });
+    } catch (error: any) {
+      this.notificationService.showUserNotification({ matIcon: 'error', message: error.message });
+    }
+  }
+
+  /** Load an existing db record for editing */
+  private async loadEditableEntry(id: string) {
+    const { data, error } = await this.service.table.select<'*', ICropInformationRow>('*').eq('id', id).single();
+    if (data) {
+      this.entryForm.patchValue(data);
+    }
+    if (error) {
+      this.notificationService.showUserNotification({ matIcon: 'error', message: error.message });
+      this.router.navigate(['../'], { relativeTo: this.route, replaceUrl: true });
+    }
   }
 }