chore: add crop adder and remover

apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html

@@ -15,8 +15,14 @@
     <tbody>
       <ng-container *ngFor="let crop of calendarData.crops">
         <tr>
-          <td (click)="openCropDialog(crop)">
-            <span class="y-axis-header"> {{ crop.name }} <mat-icon>info</mat-icon></span>
+          <td >
+            <div class="y-axis-header">
+            <span > {{ crop.name }} </span>
+            <div class="y-axis-actions">
+              <mat-icon (click)="deleteCropData(crop)" class="custom-trash-icon" >delete</mat-icon> 
+              <mat-icon (click)="openCropDialog(crop)">info</mat-icon>
+            </div>
+          </div>
           </td>
           <td class="activities-cell" (click)="openAddActivityDialog(crop, month)" *ngFor="let month of calendarData.timeAndConditions">
             <div class="user-activity-list">
@@ -32,4 +38,29 @@
       </ng-container>
     </tbody>
   </table>
+  <div class="crop-adder">
+    <button mat-button mat-raised-button color="primary" (click)="toggleCropAdder()">
+      {{ showCropAdder ? 'Hide Crop Adder' : 'Show Crop Adder' }}
+    </button>
+    <div *ngIf="showCropAdder" class="select-box">
+      <div class="select-input-field">
+        <select [(ngModel)]="selectedCrop">
+          <option value="" disabled selected>Select a Crop</option>
+          <option *ngFor="let crop of crops" [value]="crop">{{ crop }}</option>
+          <option value="Other">Other</option>
+        </select>
+        <button mat-button mat-raised-button color="primary" (click)="addNewCrop()"
+          *ngIf="selectedCrop !== '' && selectedCrop !== 'Other'">
+          + {{ 'Add Selected' | translate }}
+        </button>
+      </div>
+      <div class="select-input-field">
+        <input class="inputField" *ngIf="selectedCrop === 'Other'" [(ngModel)]="customCrop"
+          placeholder="Enter custom crop" />
+        <button mat-button mat-raised-button color="primary" (click)="addNewCrop()" *ngIf="selectedCrop === 'Other'">
+          + {{ 'Add' | translate }}
+        </button>
+      </div>
+    </div>
+  </div>
 </div>

apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.scss

@@ -1,5 +1,7 @@
 .table-container{
     padding-left: 1.5rem;
+    padding-bottom: 2rem;
+
 .calendar-table {
     width: 90%;
     border-collapse: collapse;
@@ -75,8 +77,9 @@
   .y-axis-header{
     display: flex;
     flex-direction: row;
+    height: '100%';
     align-items: center;
-    justify-content: space-around;
+    justify-content: space-between;
   }
   .activities-cell{
     max-width: 7rem;
@@ -103,5 +106,31 @@
   width: 100%;
   align-items: centeer; 
 }
+.crop-adder{
+  margin-top: 1rem;
+}
+.custom-trash-icon {
+  color: red; 
+}
+.y-axis-actions{
+  display: flex;
+  gap: 1rem;
+}
+select{
+  padding: .5rem;
+  width: 16rem;
+}
+.select-input-field{
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+.select-box{
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+  margin-top: 1rem;
+}
 
 }

apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts

@@ -1,15 +1,14 @@
 import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
+import { PicsaDialogService } from '@picsa/shared/features';
 
 import { ActivitiesEditorDialogComponent } from '../../components/activities-editor-dialog/activities-editor-dialog.component';
 import { CropDialogComponent } from '../../components/crop-dialog-component/crop-dialog-component.component';
 import { MonthDialogComponent } from '../../components/month-editor-dialog/crop-dialog-component.component';
 import { Crop, MonthData } from '../../schema/schema_v0'
 import {  SeasonCalenderService } from './../../services/calender.data.service';
 
-
-
 @Component({
   selector: 'seasonal-calendar-table',
   templateUrl: './calendar-table.component.html',
@@ -18,7 +17,12 @@ import {  SeasonCalenderService } from './../../services/calender.data.service';
 export class CalendarTableComponent implements OnInit {
   calendarData: any;
   months: string[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September'];
-  constructor(private route: ActivatedRoute,private dialog: MatDialog, private router: Router, private service: SeasonCalenderService,  ) {
+  crops: string[] = ["Maize", "Beans", "Peas"];
+  selectedCrop = "";
+  customCrop = ''
+  showCropAdder = false;
+
+  constructor(private route: ActivatedRoute,private dialog: MatDialog, private router: Router, private service: SeasonCalenderService, private dialogService: PicsaDialogService ) {
      this.initaliseDb()
   }
 
@@ -86,7 +90,10 @@ export class CalendarTableComponent implements OnInit {
     dialogRef.afterClosed().subscribe((result) => {
       console.log("closed")
     });
-
+
+  }
+  toggleCropAdder() {
+    this.showCropAdder = !this.showCropAdder;
   }
 
   openAddActivityDialog(crop: Crop, month: MonthData) {
@@ -114,6 +121,44 @@ export class CalendarTableComponent implements OnInit {
       }
     });
   }
+  async deleteCropData(crop: Crop) {
+    const dialog = await this.dialogService.open('delete');
+    dialog.afterClosed().subscribe(async (shouldDelete) => {
+      if (shouldDelete) {
+        const cropIndex = this.calendarData.crops.findIndex((c) => c.name === crop.name);
+        if (cropIndex !== -1) {
+          this.calendarData.crops.splice(cropIndex, 1); 
+        }
+      }
+    });
+
+  }
+  addNewCrop() {
+    let cropName
+    if (this.selectedCrop === 'Other' && this.customCrop.trim() !== '') {
+      cropName = this.customCrop
+      this.customCrop = ''; 
+    } else if (this.selectedCrop && this.selectedCrop !== 'Other' ) {
+      cropName =  this.selectedCrop
+    }
+    if (!this.isCropNameDuplicate(cropName)) {
+      const newCrop: Crop = {
+        name: cropName,
+        months: this.calendarData.timeAndConditions.map((monthData) => ({
+          month: monthData.month,
+          activities: [],
+        })),
+        extraInformation: '',
+      };
+
+      this.calendarData.crops.push(newCrop);
+    } else {
+      console.log('Crop with the same name already exists.');
+    }
+  }
+  isCropNameDuplicate(newCropName: string): boolean {
+    return this.calendarData.crops.some((crop) => crop.name === newCropName);
+  }
 
   saveCalendar(){
     console.log(this.calendarData)

apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html

@@ -25,9 +25,8 @@ <h2>Calendar Lists</h2>
           <button *ngIf="editMode"  (click)="saveUpdates(calendar)"  class="" mat-button mat-raised-button color="primary">Save</button> 
           <mat-icon (click)="editMode = true" *ngIf="!editMode">edit</mat-icon>
         </div>
-       <mat-icon (click)="promptDelete(i)">cancel</mat-icon>
+       <mat-icon class="custom-trash-icon " (click)="promptDelete(i)">delete</mat-icon>
       </div>
-       <!-- <mat-icon>keyboard_arrow_right</mat-icon> -->
     </div>
   </div>
   </div>

apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.scss

@@ -63,6 +63,9 @@
       font-size: 16px;
       border-radius: 5px;
   } 
+  .custom-trash-icon {
+    color: red; 
+  }
 
   }
 

apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts

@@ -1,10 +1,8 @@
 import { Component, OnDestroy } from '@angular/core';
 import {  Router } from '@angular/router';
 import { PicsaDialogService } from '@picsa/shared/features';
-import { RxDocument } from 'rxdb';
 import { Subject, takeUntil } from 'rxjs';
 
-import {  CalendarDataEntry } from '../../schema';
 import {  SeasonCalenderService } from './../../services/calender.data.service';
 
 @Component({
@@ -32,7 +30,7 @@ export class HomeComponent implements OnDestroy {
     const query = this.service.dbUserCollection;
     query.$.pipe(takeUntil(this.componentDestroyed$)).subscribe((docs) => {
       const extractedData = docs.map((doc) => doc._data);
-      console.log(extractedData);
+      //console.log(extractedData);
       this.dbCalendars = extractedData;
     });
   }