feat: enable shared form components in dashboard

apps/picsa-apps/dashboard/project.json

@@ -16,7 +16,13 @@
         "polyfills": ["zone.js"],
         "tsConfig": "apps/picsa-apps/dashboard/tsconfig.app.json",
         "inlineStyleLanguage": "scss",
-        "assets": ["apps/picsa-apps/dashboard/src/favicon.ico", "apps/picsa-apps/dashboard/src/assets"],
+        "assets": [
+          "apps/picsa-apps/dashboard/src/favicon.ico",
+          "apps/picsa-apps/dashboard/src/assets",
+          { "glob": "*.svg", "input": "libs/data/crop_activity/svgs", "output": "assets/svgs/crop_activity" },
+          { "glob": "*.svg", "input": "libs/data/crops/svgs", "output": "assets/svgs/crops" },
+          { "glob": "*.svg", "input": "libs/data/weather/svgs", "output": "assets/svgs/weather" }
+        ],
         "styles": ["apps/picsa-apps/dashboard/src/styles.scss", "node_modules/leaflet/dist/leaflet.css"],
         "stylePreprocessorOptions": {
           "includePaths": ["libs/theme/src"]

apps/picsa-apps/dashboard/src/app/app.config.ts

@@ -1,9 +1,19 @@
-import { ApplicationConfig } from '@angular/core';
+import { provideHttpClient } from '@angular/common/http';
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideRouter } from '@angular/router';
+import { PicsaFormsModule } from '@picsa/forms';
+import { PicsaTranslateModule } from '@picsa/shared/modules';
 
 import { appRoutes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(appRoutes), provideAnimations()],
+  providers: [
+    provideRouter(appRoutes),
+    provideAnimations(),
+    provideHttpClient(),
+    // Enable picsa forms and (global) translate module for lazy-loaded standalone components
+    // https://angular.io/guide/standalone-components#configuring-dependency-injection
+    importProvidersFrom(PicsaFormsModule, PicsaTranslateModule.forRoot()),
+  ],
 };

apps/picsa-apps/dashboard/src/app/modules/crop-information/crop-information.service.ts

@@ -39,7 +39,17 @@ export class CropProbabilityDashboardService extends PicsaAsyncService {
   }
 
   public async addCropProbability(cropProbability: ICropInformationInsert) {
-    const { data, error } = await this.supabaseService.db.table('crop_data').upsert([cropProbability]);
+    const { data, error } = await this.supabaseService.db.table('crop_data').insert(cropProbability);
+    if (error) {
+      throw error;
+    }
+    return data;
+  }
+  public async updateCropProbability(cropProbability: ICropInformationInsert) {
+    const { data, error } = await this.supabaseService.db
+      .table('crop_data')
+      .update(cropProbability)
+      .eq('id', cropProbability.id);
     if (error) {
       throw error;
     }

apps/picsa-apps/dashboard/src/app/modules/crop-information/pages/new_entry/new_entry.component.html

@@ -2,8 +2,7 @@
   <h2>New Crop Probability Entry</h2>
   <form class="form-content" [formGroup]="entryForm" (ngSubmit)="submitForm()">
     <div class="form-data">
-      <label for="crop">Crop Name: </label>
-      <input id="crop" type="text" formControlName="crop" />
+      <picsa-form-crop-select formControlName="crop"></picsa-form-crop-select>
     </div>
     <div class="form-data">
       <label for="variety">Crop Variety:</label>

apps/picsa-apps/dashboard/src/app/modules/crop-information/pages/new_entry/new_entry.page.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { PicsaFormsModule } from '@picsa/forms';
 import { PicsaNotificationService } from '@picsa/shared/services/core/notification.service';
 
 import { DashboardMaterialModule } from '../../../../material.module';
@@ -14,7 +15,7 @@ import {
 @Component({
   selector: 'dashboard-new-entry',
   standalone: true,
-  imports: [CommonModule, DashboardMaterialModule, RouterModule, FormsModule, ReactiveFormsModule],
+  imports: [CommonModule, DashboardMaterialModule, RouterModule, FormsModule, PicsaFormsModule, ReactiveFormsModule],
   templateUrl: './new_entry.component.html',
   styleUrls: ['./new_entry.component.scss'],
 })
@@ -54,11 +55,14 @@ export class NewEntryPageComponent implements OnInit {
   }
 
   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);
+      if (this.formValue.id) {
+        await this.service.updateCropProbability(this.formValue);
+      } else {
+        // remove null id when adding crop probability
+        const { id, ...data } = this.formValue;
+        await this.service.addCropProbability(data);
+      }
       // navigate back after successful addition
       this.router.navigate(['../'], { relativeTo: this.route, replaceUrl: true });
     } catch (error: any) {