Fix seasonal calender

apps/picsa-tools/seasonal-calendar-tool/src/app/app-routing.module.ts

@@ -8,12 +8,12 @@ export const ROUTES_COMMON: Routes = [
     title: 'Seasonal Calendar',
   },
   {
-    path: 'create-calendar',
+    path: 'create',
     loadChildren: () => import('./pages/create-calendar/create-calendar.module').then((m) => m.CreateCalendarModule),
     title: 'Create Calendar',
   },
   {
-    path: 'calendar-table',
+    path: ':id',
     loadChildren: () => import('./pages/calender-table/calendar-table.module').then((m) => m.CalenderTableModule),
     title: 'Calendar Table',
   },

apps/picsa-tools/seasonal-calendar-tool/src/app/components/components.module.ts

@@ -8,11 +8,12 @@ import { PicsaTranslateModule } from '@picsa/shared/modules';
 
 import { ActivitiesEditorDialogComponent } from './activities-editor-dialog/activities-editor-dialog.component';
 import { CropDialogComponent  } from './crop-dialog-component/crop-dialog-component.component';
+import { FieldErrorDisplayComponent } from './field-error-display/field-error-display.component';
 // Local components
 import { SeasonalCalendarMaterialModule } from './material.module';
 import { MonthDialogComponent } from './month-editor-dialog/crop-dialog-component.component';
 
-const Components = [CropDialogComponent,ActivitiesEditorDialogComponent,MonthDialogComponent];
+const Components = [CropDialogComponent,ActivitiesEditorDialogComponent,MonthDialogComponent,FieldErrorDisplayComponent];
 
 @NgModule({
   imports: [

apps/picsa-tools/seasonal-calendar-tool/src/app/components/field-error-display/field-error-display.component.html

@@ -0,0 +1,6 @@
+<div *ngIf="displayError" >
+  <span class="form-control-feedback fix-error-icon"></span>
+  <div class="error-msg">
+    {{ errorMsg }}
+  </div>
+</div>

apps/picsa-tools/seasonal-calendar-tool/src/app/components/field-error-display/field-error-display.component.scss

@@ -0,0 +1,6 @@
+.error-msg {
+  color: #a94442;
+}
+.fix-error-icon {
+  top: 27px;
+}

apps/picsa-tools/seasonal-calendar-tool/src/app/components/field-error-display/field-error-display.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FieldErrorDisplayComponent } from './field-error-display.component';
+
+describe('FieldErrorDisplayComponent', () => {
+  let component: FieldErrorDisplayComponent;
+  let fixture: ComponentFixture<FieldErrorDisplayComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FieldErrorDisplayComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FieldErrorDisplayComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/picsa-tools/seasonal-calendar-tool/src/app/components/field-error-display/field-error-display.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+
+
+@Component({
+  selector: 'seasonal-calendar-error-display',
+  templateUrl: './field-error-display.component.html',
+  styleUrls: ['./field-error-display.component.scss'],
+})
+export class FieldErrorDisplayComponent {
+
+  @Input() errorMsg: string;
+  @Input() displayError: boolean | undefined;
+
+}

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

@@ -51,15 +51,15 @@ <h1>{{calendarData?.name}}</h1> <button class="" mat-button mat-raised-button (c
       {{ showCropAdder ? 'Hide Crop Adder' : 'Show Crop Adder' }}
     </button>
     <div *ngIf="showCropAdder" class="select-box">
-      <div class="select-input-field">
+      <!-- <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 }}
+          + {{ 'Add Selected' | translate }}z
         </button>
       </div>
       <div class="select-input-field">
@@ -68,7 +68,13 @@ <h1>{{calendarData?.name}}</h1> <button class="" mat-button mat-raised-button (c
         <button mat-button mat-raised-button color="primary" (click)="addNewCrop()" *ngIf="selectedCrop === 'Other'">
           + {{ 'Add' | translate }}
         </button>
+      </div> -->
+      <div class="select-input-field">
+        <picsa-form-crop-select [(ngModel)]="userCropNames"></picsa-form-crop-select>
       </div>
+        <button mat-button mat-raised-button color="primary" (click)="addNewCrop()">
+           {{ 'Update Crops' | translate }}
+        </button>
     </div>
   </div>
 </div>

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

@@ -21,6 +21,8 @@ export class CalendarTableComponent implements OnInit {
   selectedCrop = '';
   customCrop = '';
   showCropAdder = false;
+  userCropNames: string[] = [];
+
 
   constructor(
     private route: ActivatedRoute,
@@ -31,29 +33,33 @@ export class CalendarTableComponent implements OnInit {
   ) {}
 
   async ngOnInit() {
+
     await this.service.ready();
-    this.route.paramMap.subscribe((params) => {
-      const calendarName = params.get('calendarName');
-      if (calendarName) {
-        this.fetchData(calendarName)
+    this.route.params.subscribe((params) => {
+      const {id} = params;
+      if (id) {
+        this.fetchData(id)
           .then((resData) => {
             //console.log(resData)
             this.calendarData = resData;
+            //map crop names
+            this.userCropNames = this.calendarData.crops.map((crop: any) => crop.name);
+            //console.log(this.userCropNames)
           })
           .catch(() => {
             this.calendarData = null;
           })
           .finally(() => {
-            console.log(this.calendarData);
+            //console.log(this.calendarData);
             if (!this.calendarData) {
               this.router.navigate(['/seasonal-calendar']);
             }
           });
       }
     });
   }
-  async fetchData(calendarName: string) {
-    return await this.service.getCalenderByName(calendarName);
+  async fetchData(id: string) {
+    return await this.service.getCalenderById(id);
   }
 
   getActivitiesForMonthAndCrop(monthName: string, crop: Crop): string {
@@ -70,6 +76,7 @@ export class CalendarTableComponent implements OnInit {
       const activityIndex = selectedMonth.activities.indexOf(activity);
       if (activityIndex !== -1) {
         selectedMonth.activities.splice(activityIndex, 1);
+        this.autoDbUpdate();
       }
     }
   }
@@ -80,6 +87,7 @@ export class CalendarTableComponent implements OnInit {
 
     dialogRef.afterClosed().subscribe((result) => {
       console.log('closed');
+      this.autoDbUpdate();
     });
   }
 
@@ -90,6 +98,7 @@ export class CalendarTableComponent implements OnInit {
 
     dialogRef.afterClosed().subscribe((result) => {
       console.log('closed');
+      this.autoDbUpdate();
     });
   }
   toggleCropAdder() {
@@ -112,6 +121,7 @@ export class CalendarTableComponent implements OnInit {
         if (selectedMonth) {
           if (!selectedMonth.activities.includes(activityToAdd)) {
             selectedMonth.activities.push(activityToAdd);
+            this.autoDbUpdate();
           } else {
             console.log('Activity already exists in this month.');
           }
@@ -126,33 +136,35 @@ export class CalendarTableComponent implements OnInit {
         const cropIndex = this.calendarData.crops.findIndex((c) => c.name === crop.name);
         if (cropIndex !== -1) {
           this.calendarData.crops.splice(cropIndex, 1);
+          //update db
+          this.autoDbUpdate()
         }
       }
     });
   }
-
+  autoDbUpdate(){
+     //upadate db
+     this.service.addORUpdateData(this.calendarData, 'update');
+     //refreash crop names
+     this.userCropNames = this.calendarData.crops.map((crop: any) => crop.name);  
+  }
+
   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)) {
+    for(let i =0; i<this.userCropNames.length; i++ )
+     //skip crops that already exist
+     if (!this.isCropNameDuplicate(this.userCropNames[i])) {
       const newCrop: Crop = {
-        name: cropName,
+        name: this.userCropNames[i],
         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.');
     }
+    this.autoDbUpdate();
+    this.showCropAdder = false;
   }
 
   isCropNameDuplicate(newCropName: string): boolean {
@@ -172,12 +184,13 @@ export class CalendarTableComponent implements OnInit {
         this.calendarData.crops.forEach((crop) => {
           crop.months = crop.months.filter((month) => month.month !== monthName);
         });
+        this.autoDbUpdate();
       }
     });
   }
 
   saveCalendar() {
-    console.log(this.calendarData);
+    //console.log(this.calendarData);
     this.service.addORUpdateData(this.calendarData, 'update');
     this.router.navigate(['/seasonal-calendar']);
   }

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

@@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { PicsaVideoPlayerModule } from '@picsa/shared/features';
-import { PicsaTranslateModule } from '@picsa/shared/modules';
+import { PicsaFormsModule, PicsaTranslateModule } from '@picsa/shared/modules';
 
 import { SeasonalCalendarMaterialModule } from '../../components/material.module';
 import { CalendarTableComponent } from './calendar-table.component';
@@ -21,6 +21,7 @@ import { CalendarTableRoutingModule } from './calendar-table.routing.module';
     PicsaVideoPlayerModule,
     MatButtonModule,
     CalendarTableRoutingModule,
+    PicsaFormsModule,
   ]
 })
 export class CalenderTableModule {}

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

@@ -5,7 +5,7 @@ import { CalendarTableComponent } from './calendar-table.component';
 
 const routes: Routes = [
     {
-        path: 'calendar-table',
+        path: ':id',
         component: CalendarTableComponent,
     }
 ];

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

@@ -2,7 +2,9 @@
   <h2>Crops Seasonal calender</h2>
   <div class="box">
     <h2>Calender name</h2>
-    <input class="inputField" [(ngModel)]="calenderTitle" placeholder="Season of 85" />
+    <input class="inputField"  [(ngModel)]="calenderTitle"  placeholder="Season of 85" />
+    <seasonal-calendar-error-display [displayError]="showMessageFlag && calenderTitle===''" errorMsg="Please add the calender title">
+    </seasonal-calendar-error-display>
   </div>
 
   <!-- Crops -->
@@ -12,24 +14,34 @@ <h2>Season Crops</h2>
       <div class="select-input-field">
         <picsa-form-crop-select [(ngModel)]="userCrops"></picsa-form-crop-select>
       </div>
+      <seasonal-calendar-error-display [displayError]="showMessageFlag && userCrops.length<1" errorMsg="Please select a crop">
+      </seasonal-calendar-error-display>
     </div>
   </div>
 
   <!-- Calendar Time -->
   <div>
     <h2>Calendar Time</h2>
     <div class="calender-box">
+      <div>
       <div class="form-group">
         <label for="startMonth">Start Month:</label>
-        <select id="startMonth" [(ngModel)]="startMonth">
+        <select  id="startMonth" [(ngModel)]="startMonth">
           <option value="" disabled selected>Select start month</option>
           <option *ngFor="let month of months" [value]="month">{{ month }}</option>
         </select>
       </div>
+      <seasonal-calendar-error-display [displayError]="showMessageFlag && startMonth ===''"  errorMsg="Please select a start month">
+      </seasonal-calendar-error-display>
+    </div>
+    <div>
       <div class="form-group">
         <label for="numberOfMonths">Number of Months Needed:</label>
         <input type="number" class="inputField" id="numberOfMonths" [(ngModel)]="numMonths" />
       </div>
+      <seasonal-calendar-error-display [displayError]="showMessageFlag && numMonths <1 " errorMsg="Please enter the required number of months">
+      </seasonal-calendar-error-display>
+    </div>
     </div>
     <h4 *ngIf="calendarMonths.length > 0">{{ "Enter the selected month's weather condition" | translate }}</h4>
     <div class="monthsGrid">

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

@@ -14,7 +14,7 @@ export class CreateCalendarComponent implements OnInit {
   constructor(private router: Router, private service: SeasonCalenderService) {
     this.generateCalendarMonths();
     this.data = this.router?.getCurrentNavigation()?.extras?.state;
-    console.log(this.data);
+    //console.log(this.data);
   }
   calenderTitle = '';
   selectedCrop = '';
@@ -43,8 +43,9 @@ export class CreateCalendarComponent implements OnInit {
   message = 'Please fill all the fields.';
   showMessageFlag = false;
 
-  private _numMonths = 0;
-  private _startMonth = '';
+  private _numMonths  =0;
+  private _startMonth = ''
+
 
   @Input() set numMonths(value: number) {
     this._numMonths = value;
@@ -65,7 +66,9 @@ export class CreateCalendarComponent implements OnInit {
   }
   async ngOnInit() {
     await this.service.ready();
+
   }
+
 
   generateCalendarMonths() {
     const startIndex = this.months.indexOf(this.startMonth);
@@ -80,6 +83,7 @@ export class CreateCalendarComponent implements OnInit {
     const selectedMonth = this.calendarMonths.find((item) => item.month === month);
     return selectedMonth ? selectedMonth.weather : '';
   }
+
 
   onSubmition() {
     if (this.calendarMonths.length > 0 && this.userCrops.length > 0 && this.calenderTitle) {
@@ -91,6 +95,7 @@ export class CreateCalendarComponent implements OnInit {
       this.service.addORUpdateData(data, 'add');
       this.router.navigate(['/seasonal-calendar']);
     } else {
+      // verify fields
       this.showMessageFlag = true;
     }
   }