From 05e8b354abb0f180be6b0eab0998fe71f43eab92 Mon Sep 17 00:00:00 2001
From: khalifan-kfan <khalifanmuwonge@gmail.com>
Date: Fri, 29 Sep 2023 03:36:34 +0300
Subject: [PATCH 01/21] map out calender creation logic

---
 .../src/app/app-routing.module.ts             |   5 +
 .../src/app/app.module.ts                     |   1 +
 .../create-calender.component.html            |  54 ++++++++
 .../create-calender.component.scss            |   0
 .../create-calender.component.spec.ts         |  21 ++++
 .../create-calender.component.ts              | 116 ++++++++++++++++++
 .../create-calender/create-calender.module.ts |  31 +++++
 .../src/app/pages/home/home.component.html    |  12 +-
 .../src/app/pages/home/home.component.scss    |  37 ++++++
 .../src/app/pages/home/home.component.ts      |   4 +-
 yarn.lock                                     |   2 +-
 11 files changed, 280 insertions(+), 3 deletions(-)
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.html
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.scss
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.spec.ts
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.ts
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.module.ts

diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/app-routing.module.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/app-routing.module.ts
index b78eca854..5f9f190d5 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/app-routing.module.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/app-routing.module.ts
@@ -7,6 +7,11 @@ export const ROUTES_COMMON: Routes = [
     loadChildren: () => import('./pages/home/home.module').then((m) => m.HomeModule),
     title: 'Seasonal Calendar',
   },
+  {
+    path: 'create-calender',
+    loadChildren: () => import('./pages/create-calender/create-calender.module').then((m) => m.CreateCalenderModule),
+    title: 'Create Calendar',
+  },
 ];
 /** Routes only registered in standalone mode */
 const ROUTES_STANDALONE: Routes = [{ path: '**', redirectTo: '' }];
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/app.module.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/app.module.ts
index 1cee46d5d..1ff25a9f8 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/app.module.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/app.module.ts
@@ -9,6 +9,7 @@ import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { SeasonalCalendarMaterialModule } from './components/material.module';
 
+
 /** Core imports only required when running standalone */
 const StandaloneImports = [
   AppRoutingModule,
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.html
new file mode 100644
index 000000000..c67101f9a
--- /dev/null
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.html
@@ -0,0 +1,54 @@
+<div class="container">
+    <!-- Crops -->
+    <div class="box">
+      <h2>Crops</h2>
+      <div class="user-activity-list">
+        <div *ngFor="let userCrop of userCrops; let i = index" class="activity">
+          {{ userCrop }}
+          <button (click)="removeCrop(i)">Remove</button>
+        </div>
+      </div>
+      <div class="select-box">
+        <select [(ngModel)]="selectedCrop">
+          <option *ngFor="let crop of crops" [value]="crop">{{ crop }}</option>
+          <option value="Other">Other</option>
+        </select>
+        <input *ngIf="selectedCrop === 'Other'" [(ngModel)]="customCrop" placeholder="Enter custom crop" />
+        <button (click)="addCrop()" *ngIf="selectedCrop === 'Other'">Add</button>
+        <button (click)="addCrop()" *ngIf="selectedCrop !== '' && selectedCrop !== 'Other'">Add Selected</button>
+      </div>
+    </div>
+  
+    <!-- List of Activities -->
+    <div class="box">
+      <h2>List of Activities</h2>
+      <div class="activity-list">
+        <div *ngFor="let activity of activities" class="activity">{{ activity }}</div>
+      </div>
+      <div class="select-box">
+        <input type="text" [(ngModel)]="selectedActivity" />
+        <button (click)="addActivity()" *ngIf="selectedActivity">Add</button>
+      </div>
+    </div>
+
+  <!-- Calendar Time -->
+<div class="box">
+  <h2>Calendar Time</h2>
+  <div class="form-group">
+    <label for="startMonth">Start Month:</label>
+    <select id="startMonth" [(ngModel)]="startMonth">
+      <option *ngFor="let month of months" [value]="month">{{ month }}</option>
+    </select>
+  </div>
+  <div class="form-group">
+    <label for="numberOfMonths">Number of Months Needed:</label>
+    <input type="number" id="numberOfMonths" [(ngModel)]="numMonths" />
+  </div>
+  <div class="months">
+    <div *ngFor="let monthData of calendarMonths" class="month">
+      {{ monthData.month }}
+      <input type="text" [(ngModel)]="monthData.weather"  />
+    </div>
+  </div>
+</div>
+</div>
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.scss b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.spec.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.spec.ts
new file mode 100644
index 000000000..6fe34723d
--- /dev/null
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CreateCalenderComponent } from './create-calender.component';
+
+describe('CreateCalenderComponent', () => {
+  let component: CreateCalenderComponent;
+  let fixture: ComponentFixture<CreateCalenderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CreateCalenderComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CreateCalenderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.ts
new file mode 100644
index 000000000..f775d1590
--- /dev/null
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.ts
@@ -0,0 +1,116 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'seasonal-calendar-picsa-create-calender',
+  templateUrl: './create-calender.component.html',
+  styleUrls: ['./create-calender.component.scss'],
+})
+
+
+export class CreateCalenderComponent {
+  
+  constructor() {
+    this.generateCalendarMonths();
+  }
+  crops: string[] = ["Maize", "Beans", "Peas"];
+  activities: string[] = ["Planting", "Weeding", "Preparation", "Harvesting", "Drying"];
+  selectedCrop = "";
+  selectedActivity = "";
+  customCrop = '';
+
+  userCrops: string[] = [];
+
+  
+  calendarMonths: {weather:string, month:string}[]= [];
+
+
+  months: string[] = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+  ];
+
+ 
+  private _numMonths = 0;
+  private _startMonth = '';
+
+  @Input() set numMonths(value: number) {
+    this._numMonths = value;
+    this.generateCalendarMonths();
+  }
+
+  get numMonths(): number {
+    return this._numMonths;
+  }
+
+  @Input() set startMonth(value: string) {
+    this._startMonth = value;
+    this.generateCalendarMonths();
+  }
+
+  get startMonth(): string {
+    return this._startMonth;
+  }
+  
+
+  addActivity() {
+    if (this.selectedActivity && !this.activities.includes(this.selectedActivity)) {
+      this.activities.push(this.selectedActivity);
+      this.selectedActivity = "";
+    }
+  }
+
+
+  addCrop() {
+    if (this.selectedCrop === 'Other' && this.customCrop.trim() !== '') {
+      this.userCrops.push(this.customCrop);
+      this.customCrop = ''; 
+    } else if (this.selectedCrop && this.selectedCrop !== 'Other') {
+      this.userCrops.push(this.selectedCrop);
+    }
+    this.selectedCrop = ''; 
+  }
+
+  removeCrop(index: number) {
+    this.userCrops.splice(index, 1);
+  }
+
+  generateCalendarMonths() {
+    const startIndex = this.months.indexOf(this.startMonth);
+    this.calendarMonths = [];
+    for (let i = 0; i < this.numMonths; i++) {
+      const index = (startIndex + i) % 12;
+      this.calendarMonths.push({month:this.months[index],weather:''});
+    }
+  }
+
+
+  getMonthsArray(): string[] {
+    
+    const startMonthIndex = this.months.indexOf(this.startMonth);
+    const monthsArray: string[] = [];
+  
+    for (let i = 0; i < this.numMonths; i++) {
+      const index = (startMonthIndex + i) % this.months.length;
+      monthsArray.push(this.months[index]);
+    }
+    return monthsArray;
+  }
+
+
+
+  getWeatherCondition(month: string): string {
+    const selectedMonth = this.calendarMonths.find(item => item.month === month);
+    return selectedMonth ? selectedMonth.weather : '';
+  }
+
+}
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.module.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.module.ts
new file mode 100644
index 000000000..af461503f
--- /dev/null
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.module.ts
@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { Route, RouterModule } from '@angular/router';
+import { PicsaVideoPlayerModule } from '@picsa/shared/features';
+import { PicsaTranslateModule } from '@picsa/shared/modules';
+
+import { CreateCalenderComponent } from './create-calender.component';
+
+const routes: Route[] = [
+  {
+    path: '',
+    component: CreateCalenderComponent,
+  },
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatIconModule,
+    RouterModule.forChild(routes),
+    PicsaTranslateModule,
+    FormsModule,
+    PicsaVideoPlayerModule,
+  ],
+  exports: [],
+  declarations: [CreateCalenderComponent],
+  providers: [],
+})
+export class CreateCalenderModule {}
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
index fedc210f6..5dd4fc56c 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
@@ -1,3 +1,13 @@
 <div class="page-content">
-  <p>Seasonal Calendar Home</p>
+  <div class="create-button">
+    <button class="" mat-button mat-raised-button color="primary">Create new calender</button> 
+  </div>
+  <h2>Categories</h2>
+  <div class="categories-list">
+    <div class="categories-item">Crops</div>
+  </div>
+  <h2>Calendar Lists</h2>
+  <div class="calendar-list">
+    <div class="feedbackMessage" *ngIf="calendars.length === 0">No available calendars</div>
+    </div>
 </div>
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.scss b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.scss
index e69de29bb..77911030a 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.scss
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.scss
@@ -0,0 +1,37 @@
+.page-content {
+    display: flex;
+    width: 100%;
+    margin: 0 auto;
+    position: relative;
+    .create-button {
+      position: absolute;
+      right: 50px;
+    }
+  
+    h2 {
+      margin-top: 30px;
+    }  
+    .categories-list {
+      display: flex;
+      flex-direction: row;
+      padding-left: 1rem;
+    }
+    .categories-item{
+        color: var(--color-primary);
+        border: 1px solid var(--color-primary);
+        border-radius: 5px;
+        padding: .4rem;
+    }
+  
+    .calendar-list {
+      width: 100%;
+      align-items: center;
+      display: flex; 
+    }
+    .feedbackMessage{
+        display: block;
+        text-align: center;
+        width: 100%;
+    }
+  }
+  
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
index 1315887c1..bbfb66e21 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
@@ -5,4 +5,6 @@ import { Component } from '@angular/core';
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],
 })
-export class HomeComponent {}
+export class HomeComponent {
+  calendars: string[] = [];
+}
diff --git a/yarn.lock b/yarn.lock
index c5e3c49aa..694b8b707 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15242,7 +15242,7 @@ __metadata:
 "leaflet-draw@github:enketo/Leaflet.draw#ff730785db7fcccbf2485ffcf4dffe1238a7c617":
   version: 1.0.4
   resolution: "leaflet-draw@https://github.com/enketo/Leaflet.draw.git#commit=ff730785db7fcccbf2485ffcf4dffe1238a7c617"
-  checksum: b08b88994769667f11f2b6a8937656c89cea34dafd4661abab0b48b4b97f3bddbdce7b23ddfdb8d7c6335e065530e32a70e281314afa34afa134bf68597945fc
+  checksum: 253998170af27f886d05b245c85429767e272647221daaf8d94ff5b86f75b8cbb96cc76a8a88492243166a214bc3b66b3ae704a81f74c862f09ac6c9495f731e
   languageName: node
   linkType: hard
 

From 8c9efb09073e474ff84b6e9282dd792da8426a63 Mon Sep 17 00:00:00 2001
From: khalifan-kfan <khalifanmuwonge@gmail.com>
Date: Fri, 29 Sep 2023 18:12:52 +0300
Subject: [PATCH 02/21] chore: design the create calender component

---
 .../create-calender.component.html            | 74 ++++++++++++------
 .../create-calender.component.scss            | 78 +++++++++++++++++++
 .../create-calender.component.ts              |  3 +-
 .../create-calender/create-calender.module.ts |  2 +
 4 files changed, 133 insertions(+), 24 deletions(-)

diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.html
index c67101f9a..8ab10e627 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.html
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.html
@@ -1,54 +1,82 @@
 <div class="container">
+  <h2>Crops Seasonal calender</h2>
+  <div class="box">
+    <h2>Calender name</h2>
+    <input class="inputField" [(ngModel)]="calenderTitle" placeholder="Season of 85" />
+  </div>
+
     <!-- Crops -->
     <div class="box">
-      <h2>Crops</h2>
-      <div class="user-activity-list">
-        <div *ngFor="let userCrop of userCrops; let i = index" class="activity">
-          {{ userCrop }}
-          <button (click)="removeCrop(i)">Remove</button>
-        </div>
-      </div>
+      <h2>Season Crops</h2>
       <div class="select-box">
-        <select [(ngModel)]="selectedCrop">
+        <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>
-        <input *ngIf="selectedCrop === 'Other'" [(ngModel)]="customCrop" placeholder="Enter custom crop" />
-        <button (click)="addCrop()" *ngIf="selectedCrop === 'Other'">Add</button>
-        <button (click)="addCrop()" *ngIf="selectedCrop !== '' && selectedCrop !== 'Other'">Add Selected</button>
+        <button
+           mat-button mat-raised-button color="primary"
+          (click)="addCrop()" *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)="addCrop()" 
+          *ngIf="selectedCrop === 'Other'" >
+          + {{ 'Add' | translate }}
+        </button>
+        </div>
+      </div>
+      <h3 *ngIf="userCrops.length > 0" >Selected crops</h3>
+      <div class="user-activity-list">
+        <div *ngFor="let userCrop of userCrops; let i = index" class="activity">
+          {{ userCrop }}
+          <mat-icon  (click)="removeCrop(i)" color="primary">clear</mat-icon>
+        </div>
       </div>
     </div>
   
     <!-- List of Activities -->
     <div class="box">
       <h2>List of Activities</h2>
-      <div class="activity-list">
-        <div *ngFor="let activity of activities" class="activity">{{ activity }}</div>
+      <div class="user-activity-list">
+        <div *ngFor="let activity of activities" class="activity-items">{{ activity }}</div>
       </div>
-      <div class="select-box">
-        <input type="text" [(ngModel)]="selectedActivity" />
-        <button (click)="addActivity()" *ngIf="selectedActivity">Add</button>
+      <h3>Add to activities if not on the provided list</h3>
+      <div class="select-input-field">
+        <input placeholder="planting.." class="inputField" type="text" [(ngModel)]="selectedActivity" />
+        <button mat-button mat-raised-button color="primary" (click)="addActivity()" *ngIf="selectedActivity">Add</button>
       </div>
     </div>
 
   <!-- Calendar Time -->
-<div class="box">
+<div >
   <h2>Calendar Time</h2>
+  <div class="calender-box">
   <div class="form-group">
     <label for="startMonth">Start Month:</label>
     <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>
   <div class="form-group">
     <label for="numberOfMonths">Number of Months Needed:</label>
-    <input type="number" id="numberOfMonths" [(ngModel)]="numMonths" />
+    <input type="number" class="inputField" id="numberOfMonths" [(ngModel)]="numMonths" />
   </div>
-  <div class="months">
-    <div *ngFor="let monthData of calendarMonths" class="month">
-      {{ monthData.month }}
-      <input type="text" [(ngModel)]="monthData.weather"  />
-    </div>
+</div>
+<h4 *ngIf="calendarMonths.length > 0" >{{"Enter the selected month's weather condition" | translate}}</h4>
+<div class="monthsGrid">
+  <div *ngFor="let monthData of calendarMonths" class="month">
+   <div>{{ monthData.month }}</div> 
+   <div>
+    <input placeholder="wet,dry..." type="text" class="inputField" [(ngModel)]="monthData.weather"  />
   </div>
+  </div>
+</div>
 </div>
 </div>
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.scss b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.scss
index e69de29bb..ffbb45d42 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.scss
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.scss
@@ -0,0 +1,78 @@
+.container{
+    padding: 1.5rem;
+    overflow-y: auto;
+    padding-bottom: 3rem;
+    .addButton{
+        background-color: var(--color-primary);
+        color: #fff;
+        outline: none;
+        padding: 1rem;
+    }
+    .inputField{
+        padding: .5rem;
+        width: 14rem;
+        font-size: 16px;
+        border-radius: 5px;
+    }
+    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;
+    }
+    .user-activity-list{
+        margin-top: .5rem;
+        display: flex;
+        gap: .4rem;
+        flex-direction: row; 
+        justify-content: start;
+        width: 100%;
+        align-items: centeer; 
+    }
+    .activity{
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        gap: .2rem;
+        font-size: 15px;
+        font-weight: 600;
+        padding: .7rem;
+        border: 1px solid var(--color-primary);
+        border-radius: 12px;
+    }
+    .activity-items{
+        padding: .7rem;
+        border-radius: 12px;
+        border: 1px solid var(--color-primary);
+        font-size: 17px;
+        color: #504e4e;
+    }
+    .form-group{
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 1rem; 
+    }
+    .calender-box{
+        display: flex;
+        flex-direction: row;
+        gap: 2rem;
+    }
+    .months{
+        display: flex;
+        flex-direction: column;
+    }
+    .monthsGrid{
+         display: grid;
+         grid-template-columns: repeat(3, 1fr);
+    }
+}
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.ts
index f775d1590..540ad9eeb 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.ts
@@ -12,6 +12,7 @@ export class CreateCalenderComponent {
   constructor() {
     this.generateCalendarMonths();
   }
+  calenderTitle = "";
   crops: string[] = ["Maize", "Beans", "Peas"];
   activities: string[] = ["Planting", "Weeding", "Preparation", "Harvesting", "Drying"];
   selectedCrop = "";
@@ -74,7 +75,7 @@ export class CreateCalenderComponent {
     if (this.selectedCrop === 'Other' && this.customCrop.trim() !== '') {
       this.userCrops.push(this.customCrop);
       this.customCrop = ''; 
-    } else if (this.selectedCrop && this.selectedCrop !== 'Other') {
+    } else if (this.selectedCrop && this.selectedCrop !== 'Other' &&  !this.userCrops.includes(this.selectedCrop)) {
       this.userCrops.push(this.selectedCrop);
     }
     this.selectedCrop = ''; 
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.module.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.module.ts
index af461503f..e8808fa65 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.module.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.module.ts
@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { Route, RouterModule } from '@angular/router';
 import { PicsaVideoPlayerModule } from '@picsa/shared/features';
@@ -23,6 +24,7 @@ const routes: Route[] = [
     PicsaTranslateModule,
     FormsModule,
     PicsaVideoPlayerModule,
+    MatButtonModule,
   ],
   exports: [],
   declarations: [CreateCalenderComponent],

From 0ff8c0c2a0b7d557ffb67f7e023049eb21cdfc2c Mon Sep 17 00:00:00 2001
From: khalifan-kfan <khalifanmuwonge@gmail.com>
Date: Mon, 2 Oct 2023 08:57:26 +0300
Subject: [PATCH 03/21] fix: change routing and correct spellings

---
 .../src/app/app-routing.module.ts             |  2 +-
 .../src/app/app.routes.ts                     |  3 -
 .../create-calendar.component.html            | 79 ++++++++++++++++++
 .../create-calendar.component.scss}           |  0
 .../create-calendar.component.spec.ts}        | 10 +--
 .../create-calendar.component.ts}             |  8 +-
 .../create-calendar.module.ts}                | 23 ++----
 .../create-calendar.routing.module.ts         | 17 ++++
 .../create-calender.component.html            | 82 -------------------
 .../src/app/pages/home/home.component.html    |  2 +-
 .../src/app/pages/home/home.component.ts      |  2 +-
 .../src/app/pages/home/home.module.ts         | 11 +--
 .../src/app/pages/home/home.routing.module.ts | 22 +++++
 13 files changed, 140 insertions(+), 121 deletions(-)
 delete mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/app.routes.ts
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.html
 rename apps/picsa-tools/seasonal-calendar-tool/src/app/pages/{create-calender/create-calender.component.scss => create-calendar/create-calendar.component.scss} (100%)
 rename apps/picsa-tools/seasonal-calendar-tool/src/app/pages/{create-calender/create-calender.component.spec.ts => create-calendar/create-calendar.component.spec.ts} (57%)
 rename apps/picsa-tools/seasonal-calendar-tool/src/app/pages/{create-calender/create-calender.component.ts => create-calendar/create-calendar.component.ts} (92%)
 rename apps/picsa-tools/seasonal-calendar-tool/src/app/pages/{create-calender/create-calender.module.ts => create-calendar/create-calendar.module.ts} (58%)
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.routing.module.ts
 delete mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.html
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.routing.module.ts

diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/app-routing.module.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/app-routing.module.ts
index 5f9f190d5..9f583ae01 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/app-routing.module.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/app-routing.module.ts
@@ -9,7 +9,7 @@ export const ROUTES_COMMON: Routes = [
   },
   {
     path: 'create-calender',
-    loadChildren: () => import('./pages/create-calender/create-calender.module').then((m) => m.CreateCalenderModule),
+    loadChildren: () => import('./pages/create-calendar/create-calendar.module').then((m) => m.CreateCalendarModule),
     title: 'Create Calendar',
   },
 ];
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/app.routes.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/app.routes.ts
deleted file mode 100644
index 8762dfe2c..000000000
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/app.routes.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Route } from '@angular/router';
-
-export const appRoutes: Route[] = [];
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.html
new file mode 100644
index 000000000..884563428
--- /dev/null
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.html
@@ -0,0 +1,79 @@
+<div class="container">
+  <h2>Crops Seasonal calender</h2>
+  <div class="box">
+    <h2>Calender name</h2>
+    <input class="inputField" [(ngModel)]="calenderTitle" placeholder="Season of 85" />
+  </div>
+
+  <!-- Crops -->
+  <div class="box">
+    <h2>Season Crops</h2>
+    <div 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)="addCrop()"
+          *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)="addCrop()" *ngIf="selectedCrop === 'Other'">
+          + {{ 'Add' | translate }}
+        </button>
+      </div>
+    </div>
+    <h3 *ngIf="userCrops.length > 0">Selected crops</h3>
+    <div class="user-activity-list">
+      <div *ngFor="let userCrop of userCrops; let i = index" class="activity">
+        {{ userCrop }}
+        <mat-icon (click)="removeCrop(i)" color="primary">clear</mat-icon>
+      </div>
+    </div>
+  </div>
+
+  <!-- List of Activities -->
+  <div class="box">
+    <h2>List of Activities</h2>
+    <div class="user-activity-list">
+      <div *ngFor="let activity of activities" class="activity-items">{{ activity }}</div>
+    </div>
+    <h3>Add to activities if not on the provided list</h3>
+    <div class="select-input-field">
+      <input placeholder="planting.." class="inputField" type="text" [(ngModel)]="selectedActivity" />
+      <button mat-button mat-raised-button color="primary" (click)="addActivity()" *ngIf="selectedActivity">Add</button>
+    </div>
+  </div>
+
+  <!-- Calendar Time -->
+  <div>
+    <h2>Calendar Time</h2>
+    <div class="calender-box">
+      <div class="form-group">
+        <label for="startMonth">Start Month:</label>
+        <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>
+      <div class="form-group">
+        <label for="numberOfMonths">Number of Months Needed:</label>
+        <input type="number" class="inputField" id="numberOfMonths" [(ngModel)]="numMonths" />
+      </div>
+    </div>
+    <h4 *ngIf="calendarMonths.length > 0">{{"Enter the selected month's weather condition" | translate}}</h4>
+    <div class="monthsGrid">
+      <div *ngFor="let monthData of calendarMonths" class="month">
+        <div>{{ monthData.month }}</div>
+        <div>
+          <input placeholder="wet,dry..." type="text" class="inputField" [(ngModel)]="monthData.weather" />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.scss b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.scss
similarity index 100%
rename from apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.scss
rename to apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.scss
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.spec.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.spec.ts
similarity index 57%
rename from apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.spec.ts
rename to apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.spec.ts
index 6fe34723d..2422d49b8 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.spec.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.spec.ts
@@ -1,16 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { CreateCalenderComponent } from './create-calender.component';
+import { CreateCalendarComponent } from './create-calendar.component';
 
 describe('CreateCalenderComponent', () => {
-  let component: CreateCalenderComponent;
-  let fixture: ComponentFixture<CreateCalenderComponent>;
+  let component: CreateCalendarComponent;
+  let fixture: ComponentFixture<CreateCalendarComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [CreateCalenderComponent],
+      declarations: [CreateCalendarComponent],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(CreateCalenderComponent);
+    fixture = TestBed.createComponent(CreateCalendarComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.ts
similarity index 92%
rename from apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.ts
rename to apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.ts
index 540ad9eeb..a90bed62b 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.ts
@@ -1,13 +1,13 @@
 import { Component, Input } from '@angular/core';
 
 @Component({
-  selector: 'seasonal-calendar-picsa-create-calender',
-  templateUrl: './create-calender.component.html',
-  styleUrls: ['./create-calender.component.scss'],
+  selector: 'seasonal-calendar-create-calender',
+  templateUrl: './create-calendar.component.html',
+  styleUrls: ['./create-calendar.component.scss'],
 })
 
 
-export class CreateCalenderComponent {
+export class CreateCalendarComponent {
   
   constructor() {
     this.generateCalendarMonths();
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.module.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.module.ts
similarity index 58%
rename from apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.module.ts
rename to apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.module.ts
index e8808fa65..6375ff45a 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.module.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.module.ts
@@ -3,31 +3,24 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { Route, RouterModule } from '@angular/router';
 import { PicsaVideoPlayerModule } from '@picsa/shared/features';
 import { PicsaTranslateModule } from '@picsa/shared/modules';
 
-import { CreateCalenderComponent } from './create-calender.component';
-
-const routes: Route[] = [
-  {
-    path: '',
-    component: CreateCalenderComponent,
-  },
-];
+import { SeasonalCalendarMaterialModule } from '../../components/material.module';
+import { CreateCalendarComponent } from './create-calendar.component';
+import { CreateCalendarRoutingModule } from './create-calendar.routing.module';
 
 @NgModule({
+  declarations: [CreateCalendarComponent],
   imports: [
     CommonModule,
     MatIconModule,
-    RouterModule.forChild(routes),
     PicsaTranslateModule,
+    SeasonalCalendarMaterialModule,
     FormsModule,
     PicsaVideoPlayerModule,
     MatButtonModule,
-  ],
-  exports: [],
-  declarations: [CreateCalenderComponent],
-  providers: [],
+    CreateCalendarRoutingModule,
+  ]
 })
-export class CreateCalenderModule {}
+export class CreateCalendarModule {}
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.routing.module.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.routing.module.ts
new file mode 100644
index 000000000..67d519e31
--- /dev/null
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { CreateCalendarComponent } from './create-calendar.component';
+
+const routes: Routes = [
+    {
+        path: 'create-calender',
+        component: CreateCalendarComponent,
+    }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class CreateCalendarRoutingModule {}
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.html
deleted file mode 100644
index 8ab10e627..000000000
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calender/create-calender.component.html
+++ /dev/null
@@ -1,82 +0,0 @@
-<div class="container">
-  <h2>Crops Seasonal calender</h2>
-  <div class="box">
-    <h2>Calender name</h2>
-    <input class="inputField" [(ngModel)]="calenderTitle" placeholder="Season of 85" />
-  </div>
-
-    <!-- Crops -->
-    <div class="box">
-      <h2>Season Crops</h2>
-      <div 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)="addCrop()" *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)="addCrop()" 
-          *ngIf="selectedCrop === 'Other'" >
-          + {{ 'Add' | translate }}
-        </button>
-        </div>
-      </div>
-      <h3 *ngIf="userCrops.length > 0" >Selected crops</h3>
-      <div class="user-activity-list">
-        <div *ngFor="let userCrop of userCrops; let i = index" class="activity">
-          {{ userCrop }}
-          <mat-icon  (click)="removeCrop(i)" color="primary">clear</mat-icon>
-        </div>
-      </div>
-    </div>
-  
-    <!-- List of Activities -->
-    <div class="box">
-      <h2>List of Activities</h2>
-      <div class="user-activity-list">
-        <div *ngFor="let activity of activities" class="activity-items">{{ activity }}</div>
-      </div>
-      <h3>Add to activities if not on the provided list</h3>
-      <div class="select-input-field">
-        <input placeholder="planting.." class="inputField" type="text" [(ngModel)]="selectedActivity" />
-        <button mat-button mat-raised-button color="primary" (click)="addActivity()" *ngIf="selectedActivity">Add</button>
-      </div>
-    </div>
-
-  <!-- Calendar Time -->
-<div >
-  <h2>Calendar Time</h2>
-  <div class="calender-box">
-  <div class="form-group">
-    <label for="startMonth">Start Month:</label>
-    <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>
-  <div class="form-group">
-    <label for="numberOfMonths">Number of Months Needed:</label>
-    <input type="number" class="inputField" id="numberOfMonths" [(ngModel)]="numMonths" />
-  </div>
-</div>
-<h4 *ngIf="calendarMonths.length > 0" >{{"Enter the selected month's weather condition" | translate}}</h4>
-<div class="monthsGrid">
-  <div *ngFor="let monthData of calendarMonths" class="month">
-   <div>{{ monthData.month }}</div> 
-   <div>
-    <input placeholder="wet,dry..." type="text" class="inputField" [(ngModel)]="monthData.weather"  />
-  </div>
-  </div>
-</div>
-</div>
-</div>
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
index 5dd4fc56c..bc6cbd904 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
@@ -1,6 +1,6 @@
 <div class="page-content">
   <div class="create-button">
-    <button class="" mat-button mat-raised-button color="primary">Create new calender</button> 
+    <button class="" mat-button mat-raised-button a routerLink="create-calender" color="primary">Create new calender</button> 
   </div>
   <h2>Categories</h2>
   <div class="categories-list">
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
index bbfb66e21..1373a0734 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./home.component.scss'],
 })
 export class HomeComponent {
-  calendars: string[] = [];
+  calendars: string[] = []; 
 }
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.module.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.module.ts
index a1e34b758..1024418f7 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.module.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.module.ts
@@ -1,19 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { Route, RouterModule } from '@angular/router';
 
 import { SeasonalCalendarToolComponentsModule } from '../../components/components.module';
 import { HomeComponent } from './home.component';
-
-const routes: Route[] = [
-  {
-    path: '',
-    component: HomeComponent,
-  },
-];
+import { HomeRoutingModule } from './home.routing.module';
 
 @NgModule({
   declarations: [HomeComponent],
-  imports: [CommonModule, RouterModule.forChild(routes), SeasonalCalendarToolComponentsModule],
+  imports: [CommonModule, HomeRoutingModule, SeasonalCalendarToolComponentsModule],
 })
 export class HomeModule {}
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.routing.module.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.routing.module.ts
new file mode 100644
index 000000000..8c71d6ba6
--- /dev/null
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.routing.module.ts
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { CreateCalendarComponent } from '../create-calendar/create-calendar.component';
+import { HomeComponent } from './home.component';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: HomeComponent,
+    },
+    {
+      path: 'create-calender',
+      component: CreateCalendarComponent,
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class HomeRoutingModule {}

From f195e5606077c54b2ed638e1ac84ac657ba751a4 Mon Sep 17 00:00:00 2001
From: khalifan-kfan <khalifanmuwonge@gmail.com>
Date: Thu, 5 Oct 2023 17:07:01 +0300
Subject: [PATCH 04/21] chore: give data a single center point

---
 .../create-calendar.component.html            |  3 ++
 .../create-calendar.component.scss            |  4 ++
 .../create-calendar.component.ts              | 40 +++++++++++--------
 .../src/app/pages/home/home.component.html    |  2 +-
 .../src/app/pages/home/home.component.ts      | 15 ++++++-
 .../src/app/services/calender.data.service.ts | 22 ++++++++++
 6 files changed, 67 insertions(+), 19 deletions(-)
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/services/calender.data.service.ts

diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.html
index 884563428..520fb8ba0 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.html
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.html
@@ -76,4 +76,7 @@ <h4 *ngIf="calendarMonths.length > 0">{{"Enter the selected month's weather cond
       </div>
     </div>
   </div>
+  <div class="submit-button">
+    <button class="" mat-button mat-raised-button (click)="onSubmition()" color="primary">Create  calender</button> 
+  </div>
 </div>
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.scss b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.scss
index ffbb45d42..56f5cbfb2 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.scss
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.scss
@@ -75,4 +75,8 @@
          display: grid;
          grid-template-columns: repeat(3, 1fr);
     }
+    .submit-button{
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+    }
 }
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.ts
index a90bed62b..d09835f50 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.ts
@@ -1,5 +1,7 @@
 import { Component, Input } from '@angular/core';
+import { Router } from '@angular/router';
 
+import { DataService } from './../../services/calender.data.service';
 @Component({
   selector: 'seasonal-calendar-create-calender',
   templateUrl: './create-calendar.component.html',
@@ -9,7 +11,7 @@ import { Component, Input } from '@angular/core';
 
 export class CreateCalendarComponent {
   
-  constructor() {
+  constructor(private router: Router, private dataService: DataService) {
     this.generateCalendarMonths();
   }
   calenderTitle = "";
@@ -17,7 +19,7 @@ export class CreateCalendarComponent {
   activities: string[] = ["Planting", "Weeding", "Preparation", "Harvesting", "Drying"];
   selectedCrop = "";
   selectedActivity = "";
-  customCrop = '';
+  customCrop = ''
 
   userCrops: string[] = [];
 
@@ -85,6 +87,10 @@ export class CreateCalendarComponent {
     this.userCrops.splice(index, 1);
   }
 
+  removeActivity(index: number) {
+    this.activities.splice(index, 1);
+  }
+
   generateCalendarMonths() {
     const startIndex = this.months.indexOf(this.startMonth);
     this.calendarMonths = [];
@@ -94,24 +100,24 @@ export class CreateCalendarComponent {
     }
   }
 
-
-  getMonthsArray(): string[] {
-    
-    const startMonthIndex = this.months.indexOf(this.startMonth);
-    const monthsArray: string[] = [];
-  
-    for (let i = 0; i < this.numMonths; i++) {
-      const index = (startMonthIndex + i) % this.months.length;
-      monthsArray.push(this.months[index]);
-    }
-    return monthsArray;
-  }
-
-
-
   getWeatherCondition(month: string): string {
     const selectedMonth = this.calendarMonths.find(item => item.month === month);
     return selectedMonth ? selectedMonth.weather : '';
   }
 
+  onSubmition(){
+    //any required data validation
+    const data = {
+     name: this.calenderTitle,
+     crops: this.userCrops,
+     timeAndConditions: this.calendarMonths,
+     activities: this.activities
+    }
+    console.log(data);
+  
+    this.dataService.saveData(data);
+  
+    this.router.navigate(['/seasonal-calendar', data]);
+  }
+
 }
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
index bc6cbd904..37983e7e3 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
@@ -1,6 +1,6 @@
 <div class="page-content">
   <div class="create-button">
-    <button class="" mat-button mat-raised-button a routerLink="create-calender" color="primary">Create new calender</button> 
+    <button class="" mat-button mat-raised-button  routerLink="create-calender" color="primary">Create new calender</button> 
   </div>
   <h2>Categories</h2>
   <div class="categories-list">
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
index 1373a0734..a1beee64a 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
@@ -1,10 +1,23 @@
 import { Component } from '@angular/core';
 
+import { DataService } from './../../services/calender.data.service';
+
 @Component({
   selector: 'seasonal-calendar-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],
 })
 export class HomeComponent {
-  calendars: string[] = []; 
+  constructor( public dataService: DataService) { }
+  calendars;
+  ngOnInit() {
+    //confirm data sharing
+    console.log(this.dataService.calendars)
+    this.calendars = this.getCalendarsAsArray(this.dataService.calendars)
+  }
+  getCalendarsAsArray(calenderObject): any[] {
+    return Object.keys(calenderObject).map((key) => calenderObject[key]);
+  }
+
+
 }
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calender.data.service.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calender.data.service.ts
new file mode 100644
index 000000000..59a6b3c0c
--- /dev/null
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calender.data.service.ts
@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DataService {
+   calendars= {}; 
+//   activities: string[] = [];
+//   userCrops: string[] = [];
+//   calendarMonths: { weather: string; month: string }[] = [];
+
+  saveData(data: any) {
+    //save new calender as key for the mean time 
+    this.calendars[data.name] = {
+        name: data.name,
+        crops : data.crops,
+        timeAndConditions: data.timeAndConditions,
+        activities: data.activities
+    }
+  } 
+
+}

From 19c9b0e33001bb1e7df3fc32e39e72dc7341d830 Mon Sep 17 00:00:00 2001
From: khalifan-kfan <khalifanmuwonge@gmail.com>
Date: Thu, 5 Oct 2023 18:15:08 +0300
Subject: [PATCH 05/21] list out calender items

---
 .../src/app/pages/home/home.component.html    |  7 +++++++
 .../src/app/pages/home/home.component.scss    | 20 +++++++++++++++++++
 .../src/app/pages/home/home.component.ts      |  4 ++--
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
index 37983e7e3..f6dfdb55c 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
@@ -9,5 +9,12 @@ <h2>Categories</h2>
   <h2>Calendar Lists</h2>
   <div class="calendar-list">
     <div class="feedbackMessage" *ngIf="calendars.length === 0">No available calendars</div>
+    <!-- map calenders -->
+    <div *ngIf="calendars.length > 0" class="items-container" >
+    <div *ngFor="let calender of calendars" class="calenders-display">
+      <div>{{ calender.name }}</div>
+      <mat-icon>keyboard_arrow_right</mat-icon>
     </div>
+  </div>
+  </div>
 </div>
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.scss b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.scss
index 77911030a..cbef8e7ef 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.scss
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.scss
@@ -33,5 +33,25 @@
         text-align: center;
         width: 100%;
     }
+    .items-containe{
+      width: 100%;
+    }
+    .calenders-display {
+      width: 90vw;
+      padding-left: 1rem;
+      color: #000; 
+      font-size: 23px;
+      font-weight: 600;
+      position: relative;
+      border-bottom: 1px solid #000;
+      margin-bottom: 1rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      padding-right: 2rem;
+    }
+    
+  
+    
   }
   
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
index a1beee64a..c5c4ca5db 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
@@ -10,14 +10,14 @@ import { DataService } from './../../services/calender.data.service';
 export class HomeComponent {
   constructor( public dataService: DataService) { }
   calendars;
+
   ngOnInit() {
     //confirm data sharing
     console.log(this.dataService.calendars)
     this.calendars = this.getCalendarsAsArray(this.dataService.calendars)
   }
+  
   getCalendarsAsArray(calenderObject): any[] {
     return Object.keys(calenderObject).map((key) => calenderObject[key]);
   }
-
-
 }

From 737500a193a8ff9348e0b47885b121f09a331ea4 Mon Sep 17 00:00:00 2001
From: khalifan-kfan <khalifanmuwonge@gmail.com>
Date: Sun, 8 Oct 2023 16:21:32 +0300
Subject: [PATCH 06/21] add season table components

---
 .../src/app/app-routing.module.ts             |  7 +-
 .../src/app/app.module.ts                     |  1 -
 .../calendar-table.component.html             | 24 +++++
 .../calendar-table.component.scss             | 68 +++++++++++++
 .../calendar-table.component.spec.ts          | 22 +++++
 .../calendar-table.component.ts               | 95 +++++++++++++++++++
 .../calender-table/calendar-table.module.ts   | 26 +++++
 .../calendar-table.routing.module.ts          | 17 ++++
 .../create-calendar.component.html            |  6 +-
 .../create-calendar.component.ts              | 28 +++---
 .../create-calendar.routing.module.ts         |  2 +-
 .../src/app/pages/home/home.component.html    |  8 +-
 .../src/app/pages/home/home.component.scss    |  2 +-
 .../src/app/pages/home/home.component.ts      | 12 ++-
 .../src/app/pages/home/home.module.ts         |  2 +-
 .../src/app/pages/home/home.routing.module.ts |  9 +-
 .../src/app/services/calender.data.service.ts | 26 +++--
 17 files changed, 315 insertions(+), 40 deletions(-)
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.scss
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.spec.ts
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.module.ts
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.routing.module.ts

diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/app-routing.module.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/app-routing.module.ts
index 9f583ae01..fdda49704 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/app-routing.module.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/app-routing.module.ts
@@ -8,10 +8,15 @@ export const ROUTES_COMMON: Routes = [
     title: 'Seasonal Calendar',
   },
   {
-    path: 'create-calender',
+    path: 'create-calendar',
     loadChildren: () => import('./pages/create-calendar/create-calendar.module').then((m) => m.CreateCalendarModule),
     title: 'Create Calendar',
   },
+  {
+    path: 'calendar-table',
+    loadChildren: () => import('./pages/calender-table/calendar-table.module').then((m) => m.CalenderTableModule),
+    title: 'Calendar Table',
+  },
 ];
 /** Routes only registered in standalone mode */
 const ROUTES_STANDALONE: Routes = [{ path: '**', redirectTo: '' }];
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/app.module.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/app.module.ts
index 1ff25a9f8..1cee46d5d 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/app.module.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/app.module.ts
@@ -9,7 +9,6 @@ import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { SeasonalCalendarMaterialModule } from './components/material.module';
 
-
 /** Core imports only required when running standalone */
 const StandaloneImports = [
   AppRoutingModule,
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html
new file mode 100644
index 000000000..d65ba0d44
--- /dev/null
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html
@@ -0,0 +1,24 @@
+<div class="table-container">
+    <table class="calendar-table">
+        <thead>
+          <tr>
+            <th></th>
+            <th *ngFor="let month of sampleData.timeAndWeather">{{ month.month }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <ng-container *ngFor="let crop of sampleData.crops">
+            <tr>
+              <td>{{ crop.name }}</td>
+              <td *ngFor="let month of sampleData.timeAndWeather">
+                <span class="activities-cell"  >
+                    {{ getActivitiesForMonthAndCrop(month.month, crop) }}
+                </span>
+              </td>
+            </tr>
+          </ng-container>
+        </tbody>
+      </table>
+      
+
+</div>
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.scss b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.scss
new file mode 100644
index 000000000..c8d1e47ac
--- /dev/null
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.scss
@@ -0,0 +1,68 @@
+.table-container{
+    padding-left: 1.5rem;
+.calendar-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+    font-family: Arial, sans-serif;
+  }
+  
+  .calendar-table th,
+  .calendar-table td {
+    border: 1px solid #ccc;
+    padding: 10px;
+    text-align: center;
+  }
+  
+  .calendar-table th {
+    background-color: #f2f2f2;
+    font-weight: bold;
+  }
+  
+  .calendar-table tr:nth-child(even) {
+    background-color: #f2f2f2;
+  }
+  
+  .calendar-table td {
+    background-color: #fff;
+    max-width: 10rem;
+  }
+  
+
+  .calendar-table td:hover {
+    background-color: #e0e0e0;
+  }
+  
+  .calendar-table td:first-child {
+    font-weight: bold;
+    text-align: left;
+    background-color: #f2f2f2;
+  }
+
+  .calendar-table th:first-child {
+    text-align: center;
+  }
+  
+ 
+  .calendar-table thead {
+    background-color: #333;
+    color: #000;
+  }
+  
+
+  .calendar-table th {
+    color: #000;
+  }
+
+  .calendar-table th,
+  .calendar-table td {
+    padding: 10px;
+  }
+  
+  
+  .calendar-table td,
+  .calendar-table th {
+    border-radius: 5px;
+  }
+  
+}
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.spec.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.spec.ts
new file mode 100644
index 000000000..9adb522ef
--- /dev/null
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CalendarTableComponent } from './calendar-table.component';
+
+describe('CalenderTableComponent', () => {
+  let component: CalendarTableComponent;
+  let fixture: ComponentFixture<CalendarTableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CalendarTableComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CalendarTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
new file mode 100644
index 000000000..6b15aa97a
--- /dev/null
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
@@ -0,0 +1,95 @@
+import { Component, OnInit } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { ActivatedRoute } from '@angular/router'
+
+import { DataService } from './../../services/calender.data.service';
+
+@Component({
+  selector: 'seasonal-calendar-table',
+  templateUrl: './calendar-table.component.html',
+  styleUrls: ['./calendar-table.component.scss'],
+})
+
+export class CalendarTableComponent implements OnInit  {
+  calendarData: any | null = null;
+
+   sampleData:SampleData = {
+    name: 'Sample Calendar',
+    timeAndWeather: [
+      { month: 'January', weather: 'Sunny' },
+      { month: 'February', weather: 'Rainy' },
+    ],
+    crops: [
+      {
+        name: 'Maize',
+        months: [
+          { month: 'January', activities: ['Planting', 'Weeding'] },
+          { month: 'February', activities: ['Weeding', 'Harvesting'] },
+        ],
+        extraInformation: 'Extra data for Maize',
+      },
+      {
+        name: 'Beans',
+        months: [
+          { month: 'January', activities: ['Planting', 'Preparation'] },
+          { month: 'February', activities: ['Weeding', 'Harvesting'] },
+        ],
+        extraInformation: 'Extra data for Beans',
+      },
+    ],
+  }; 
+  
+  months: string[] = [
+    'January', 'February', 'March', 'April',
+    'May', 'June', 'July', 'August',
+    'September',
+  ];
+  constructor(private route: ActivatedRoute, private dataService: DataService) {}
+
+  ngOnInit() {
+    console.log(this.dataService)
+  }
+
+ 
+  crops: string[] = ['Beans', 'Maize', 'Peas', 'Wheat', 'Barley']; 
+
+  dataSource: MatTableDataSource<any>;
+
+  // This should contain your data from the service with appropriate structure
+  dataServiceData: any[] = [
+    { crop: 'Beans', January: ['Value1', 'Value5', 'value6', 'value7'], February: ['Value2', 'Value6']},
+    { crop: 'Maize', January: ['Value3'], February: ['Value4']},
+  ];
+
+  getActivitiesForMonthAndCrop(monthName: string, crop: Crop): string {
+    const selectedMonth = crop.months.find((month) => month.month === monthName);
+    if (selectedMonth) {
+      return selectedMonth.activities.join(', '); // Display activities as a comma-separated string
+    } else {
+      return ''; // Return an empty string if no activities are found
+    }
+  }
+  
+}
+
+interface MonthData {
+  month: string;
+  weather: string;
+}
+
+interface CropMonth {
+  month: string;
+  activities: string[];
+}
+
+interface Crop {
+  name: string;
+  months: CropMonth[];
+  extraInformation: string;
+}
+
+interface SampleData {
+  name: string;
+  timeAndWeather: MonthData[];
+  crops: Crop[];
+}
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.module.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.module.ts
new file mode 100644
index 000000000..9b81d4618
--- /dev/null
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.module.ts
@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+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 { SeasonalCalendarMaterialModule } from '../../components/material.module';
+import { CalendarTableComponent } from './calendar-table.component';
+import { CalendarTableRoutingModule } from './calendar-table.routing.module';
+
+@NgModule({
+  declarations: [CalendarTableComponent],
+  imports: [
+    CommonModule,
+    MatIconModule,
+    PicsaTranslateModule,
+    SeasonalCalendarMaterialModule,
+    FormsModule,
+    PicsaVideoPlayerModule,
+    MatButtonModule,
+    CalendarTableRoutingModule,
+  ]
+})
+export class CalenderTableModule {}
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.routing.module.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.routing.module.ts
new file mode 100644
index 000000000..9d07494fc
--- /dev/null
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { CalendarTableComponent } from './calendar-table.component';
+
+const routes: Routes = [
+    {
+        path: 'calendar-table',
+        component: CalendarTableComponent,
+    }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class CalendarTableRoutingModule {}
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.html
index 520fb8ba0..deb78ef88 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.html
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.html
@@ -36,8 +36,8 @@ <h3 *ngIf="userCrops.length > 0">Selected crops</h3>
       </div>
     </div>
   </div>
-
-  <!-- List of Activities -->
+ <!-- to be added at cell level -->
+  <!-- List of Activities
   <div class="box">
     <h2>List of Activities</h2>
     <div class="user-activity-list">
@@ -48,7 +48,7 @@ <h3>Add to activities if not on the provided list</h3>
       <input placeholder="planting.." class="inputField" type="text" [(ngModel)]="selectedActivity" />
       <button mat-button mat-raised-button color="primary" (click)="addActivity()" *ngIf="selectedActivity">Add</button>
     </div>
-  </div>
+  </div> -->
 
   <!-- Calendar Time -->
   <div>
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.ts
index d09835f50..4721c1db4 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.ts
@@ -16,7 +16,7 @@ export class CreateCalendarComponent {
   }
   calenderTitle = "";
   crops: string[] = ["Maize", "Beans", "Peas"];
-  activities: string[] = ["Planting", "Weeding", "Preparation", "Harvesting", "Drying"];
+  //activities: string[] = ["Planting", "Weeding", "Preparation", "Harvesting", "Drying"];
   selectedCrop = "";
   selectedActivity = "";
   customCrop = ''
@@ -65,12 +65,12 @@ export class CreateCalendarComponent {
   }
   
 
-  addActivity() {
-    if (this.selectedActivity && !this.activities.includes(this.selectedActivity)) {
-      this.activities.push(this.selectedActivity);
-      this.selectedActivity = "";
-    }
-  }
+  // addActivity() {
+  //   if (this.selectedActivity && !this.activities.includes(this.selectedActivity)) {
+  //     this.activities.push(this.selectedActivity);
+  //     this.selectedActivity = "";
+  //   }
+  // }
 
 
   addCrop() {
@@ -87,9 +87,9 @@ export class CreateCalendarComponent {
     this.userCrops.splice(index, 1);
   }
 
-  removeActivity(index: number) {
-    this.activities.splice(index, 1);
-  }
+  // removeActivity(index: number) {
+  //   this.activities.splice(index, 1);
+  // }
 
   generateCalendarMonths() {
     const startIndex = this.months.indexOf(this.startMonth);
@@ -106,18 +106,16 @@ export class CreateCalendarComponent {
   }
 
   onSubmition(){
-    //any required data validation
+    //any required data validation happens here
     const data = {
      name: this.calenderTitle,
      crops: this.userCrops,
      timeAndConditions: this.calendarMonths,
-     activities: this.activities
     }
     console.log(data);
-  
+
     this.dataService.saveData(data);
-  
-    this.router.navigate(['/seasonal-calendar', data]);
+    this.router.navigate(['/seasonal-calendar']);
   }
 
 }
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.routing.module.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.routing.module.ts
index 67d519e31..dfcc13381 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.routing.module.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.routing.module.ts
@@ -5,7 +5,7 @@ import { CreateCalendarComponent } from './create-calendar.component';
 
 const routes: Routes = [
     {
-        path: 'create-calender',
+        path: 'create-calendar',
         component: CreateCalendarComponent,
     }
 ];
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
index f6dfdb55c..831e0cff1 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
@@ -1,6 +1,6 @@
 <div class="page-content">
   <div class="create-button">
-    <button class="" mat-button mat-raised-button  routerLink="create-calender" color="primary">Create new calender</button> 
+    <button class="" mat-button mat-raised-button  routerLink="create-calendar" color="primary">Create new calender</button> 
   </div>
   <h2>Categories</h2>
   <div class="categories-list">
@@ -11,8 +11,10 @@ <h2>Calendar Lists</h2>
     <div class="feedbackMessage" *ngIf="calendars.length === 0">No available calendars</div>
     <!-- map calenders -->
     <div *ngIf="calendars.length > 0" class="items-container" >
-    <div *ngFor="let calender of calendars" class="calenders-display">
-      <div>{{ calender.name }}</div>
+    <div *ngFor="let calendar of calendars" class="calendars-display">
+      <div (click)="redirectToCalendarTable(calendar.name)">
+        {{ calendar.name }}
+      </div>
       <mat-icon>keyboard_arrow_right</mat-icon>
     </div>
   </div>
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.scss b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.scss
index cbef8e7ef..412225cb7 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.scss
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.scss
@@ -36,7 +36,7 @@
     .items-containe{
       width: 100%;
     }
-    .calenders-display {
+    .calendars-display {
       width: 90vw;
       padding-left: 1rem;
       color: #000; 
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
index c5c4ca5db..8ee1b9a0f 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { DataService } from './../../services/calender.data.service';
 
@@ -7,8 +8,8 @@ import { DataService } from './../../services/calender.data.service';
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],
 })
-export class HomeComponent {
-  constructor( public dataService: DataService) { }
+export class HomeComponent implements OnInit {
+  constructor(private router: Router ,public dataService: DataService) { }
   calendars;
 
   ngOnInit() {
@@ -20,4 +21,9 @@ export class HomeComponent {
   getCalendarsAsArray(calenderObject): any[] {
     return Object.keys(calenderObject).map((key) => calenderObject[key]);
   }
+  redirectToCalendarTable(calendarName: string) {
+    
+    this.router.navigate(['/seasonal-calendar/calendar-table',{calendarName}] );
+  }
 }
+ 
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.module.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.module.ts
index 1024418f7..955c9fe8f 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.module.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.module.ts
@@ -7,6 +7,6 @@ import { HomeRoutingModule } from './home.routing.module';
 
 @NgModule({
   declarations: [HomeComponent],
-  imports: [CommonModule, HomeRoutingModule, SeasonalCalendarToolComponentsModule],
+  imports: [CommonModule, HomeRoutingModule, SeasonalCalendarToolComponentsModule ],
 })
 export class HomeModule {}
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.routing.module.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.routing.module.ts
index 8c71d6ba6..cea29d871 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.routing.module.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.routing.module.ts
@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
+import { CalendarTableComponent } from '../calender-table/calendar-table.component';
 import { CreateCalendarComponent } from '../create-calendar/create-calendar.component';
 import { HomeComponent } from './home.component';
 
@@ -10,9 +11,13 @@ const routes: Routes = [
         component: HomeComponent,
     },
     {
-      path: 'create-calender',
+      path: 'create-calendar',
       component: CreateCalendarComponent,
-  }
+     },
+     {
+      path: 'calendar-table',
+      component: CalendarTableComponent,
+     }
 ];
 
 @NgModule({
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calender.data.service.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calender.data.service.ts
index 59a6b3c0c..35ace1ffa 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calender.data.service.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calender.data.service.ts
@@ -4,19 +4,27 @@ import { Injectable } from '@angular/core';
   providedIn: 'root',
 })
 export class DataService {
+
+
    calendars= {}; 
-//   activities: string[] = [];
-//   userCrops: string[] = [];
-//   calendarMonths: { weather: string; month: string }[] = [];
+
 
   saveData(data: any) {
     //save new calender as key for the mean time 
-    this.calendars[data.name] = {
-        name: data.name,
-        crops : data.crops,
-        timeAndConditions: data.timeAndConditions,
-        activities: data.activities
-    }
+    const transformedData = {
+      name: data.name,
+      timeAndConditions: data.timeAndConditions,
+      crops: data.crops.map((cropName) => ({
+        name: cropName,
+        months: data.timeAndConditions.map((monthData) => ({
+          month: monthData.month,
+          activities: [], // Initially empty
+        })),
+        extraInformation: "",
+      })),
+    };
+    this.calendars[data.name] = transformedData;
   } 
 
 }
+

From c5f512f357763ab7522d5a60e4be74bdff1c6102 Mon Sep 17 00:00:00 2001
From: khalifan-kfan <khalifanmuwonge@gmail.com>
Date: Sun, 8 Oct 2023 23:22:01 +0300
Subject: [PATCH 07/21] connect to real data

---
 .../calendar-table.component.html             | 11 ++--
 .../calendar-table.component.ts               | 57 ++++++-------------
 2 files changed, 23 insertions(+), 45 deletions(-)

diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html
index d65ba0d44..6d153031e 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html
@@ -3,15 +3,18 @@
         <thead>
           <tr>
             <th></th>
-            <th *ngFor="let month of sampleData.timeAndWeather">{{ month.month }}</th>
+            <th *ngFor="let month of calendarData.timeAndConditions">
+                {{ month.month }} <br/>
+                ( {{ month.weather }})
+            </th>
           </tr>
         </thead>
         <tbody>
-          <ng-container *ngFor="let crop of sampleData.crops">
+          <ng-container *ngFor="let crop of calendarData.crops">
             <tr>
               <td>{{ crop.name }}</td>
-              <td *ngFor="let month of sampleData.timeAndWeather">
-                <span class="activities-cell"  >
+              <td *ngFor="let month of calendarData.timeAndConditions"  class="activities-cell">
+                <span >
                     {{ getActivitiesForMonthAndCrop(month.month, crop) }}
                 </span>
               </td>
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
index 6b15aa97a..00f6b26eb 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table';
-import { ActivatedRoute } from '@angular/router'
+import { ActivatedRoute, Router } from '@angular/router'
 
 import { DataService } from './../../services/calender.data.service';
 
@@ -11,62 +11,37 @@ import { DataService } from './../../services/calender.data.service';
 })
 
 export class CalendarTableComponent implements OnInit  {
-  calendarData: any | null = null;
-
-   sampleData:SampleData = {
-    name: 'Sample Calendar',
-    timeAndWeather: [
-      { month: 'January', weather: 'Sunny' },
-      { month: 'February', weather: 'Rainy' },
-    ],
-    crops: [
-      {
-        name: 'Maize',
-        months: [
-          { month: 'January', activities: ['Planting', 'Weeding'] },
-          { month: 'February', activities: ['Weeding', 'Harvesting'] },
-        ],
-        extraInformation: 'Extra data for Maize',
-      },
-      {
-        name: 'Beans',
-        months: [
-          { month: 'January', activities: ['Planting', 'Preparation'] },
-          { month: 'February', activities: ['Weeding', 'Harvesting'] },
-        ],
-        extraInformation: 'Extra data for Beans',
-      },
-    ],
-  }; 
-  
+  calendarData: CalendarData | null = null;
   months: string[] = [
     'January', 'February', 'March', 'April',
     'May', 'June', 'July', 'August',
     'September',
   ];
-  constructor(private route: ActivatedRoute, private dataService: DataService) {}
+  constructor(private route: ActivatedRoute, private dataService: DataService, private router: Router) {}
 
   ngOnInit() {
-    console.log(this.dataService)
+    this.route.paramMap.subscribe((params) => {
+      const calendarName = params.get('calendarName');
+      if(calendarName){
+      this.calendarData = this.dataService.calendars[calendarName]
+      if (!this.calendarData || Object.keys(this.calendarData).length === 0) {
+        this.router.navigate(['/seasonal-calendar']);
+      }
+      }
+    });
   }
-
  
   crops: string[] = ['Beans', 'Maize', 'Peas', 'Wheat', 'Barley']; 
 
   dataSource: MatTableDataSource<any>;
 
-  // This should contain your data from the service with appropriate structure
-  dataServiceData: any[] = [
-    { crop: 'Beans', January: ['Value1', 'Value5', 'value6', 'value7'], February: ['Value2', 'Value6']},
-    { crop: 'Maize', January: ['Value3'], February: ['Value4']},
-  ];
 
   getActivitiesForMonthAndCrop(monthName: string, crop: Crop): string {
     const selectedMonth = crop.months.find((month) => month.month === monthName);
     if (selectedMonth) {
-      return selectedMonth.activities.join(', '); // Display activities as a comma-separated string
+      return selectedMonth.activities.join(','); 
     } else {
-      return ''; // Return an empty string if no activities are found
+      return ''; 
     }
   }
   
@@ -88,8 +63,8 @@ interface Crop {
   extraInformation: string;
 }
 
-interface SampleData {
+interface CalendarData {
   name: string;
-  timeAndWeather: MonthData[];
+  timeAndConditions: MonthData[];
   crops: Crop[];
 }
\ No newline at end of file

From 6e2ff78b4639bac003e92966c357965d8504e9e9 Mon Sep 17 00:00:00 2001
From: khalifan-kfan <khalifanmuwonge@gmail.com>
Date: Sun, 8 Oct 2023 23:23:19 +0300
Subject: [PATCH 08/21] remove null data type

---
 .../src/app/pages/calender-table/calendar-table.component.ts   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
index 00f6b26eb..e7769e416 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
@@ -11,7 +11,7 @@ import { DataService } from './../../services/calender.data.service';
 })
 
 export class CalendarTableComponent implements OnInit  {
-  calendarData: CalendarData | null = null;
+  calendarData: CalendarData;
   months: string[] = [
     'January', 'February', 'March', 'April',
     'May', 'June', 'July', 'August',
@@ -35,7 +35,6 @@ export class CalendarTableComponent implements OnInit  {
 
   dataSource: MatTableDataSource<any>;
 
-
   getActivitiesForMonthAndCrop(monthName: string, crop: Crop): string {
     const selectedMonth = crop.months.find((month) => month.month === monthName);
     if (selectedMonth) {

From 27e75dd9db231f7b9939a0d3036f1a1a352133dc Mon Sep 17 00:00:00 2001
From: khalifan-kfan <khalifanmuwonge@gmail.com>
Date: Sun, 8 Oct 2023 23:28:50 +0300
Subject: [PATCH 09/21] import calendar data from the service

---
 .../calendar-table.component.ts               | 24 +------------------
 .../src/app/services/calender.data.service.ts | 21 ++++++++++++++++
 2 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
index e7769e416..f100df0d7 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router'
 
-import { DataService } from './../../services/calender.data.service';
+import { CalendarData,Crop,DataService } from './../../services/calender.data.service';
 
 @Component({
   selector: 'seasonal-calendar-table',
@@ -45,25 +45,3 @@ export class CalendarTableComponent implements OnInit  {
   }
   
 }
-
-interface MonthData {
-  month: string;
-  weather: string;
-}
-
-interface CropMonth {
-  month: string;
-  activities: string[];
-}
-
-interface Crop {
-  name: string;
-  months: CropMonth[];
-  extraInformation: string;
-}
-
-interface CalendarData {
-  name: string;
-  timeAndConditions: MonthData[];
-  crops: Crop[];
-}
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calender.data.service.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calender.data.service.ts
index 35ace1ffa..104836326 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calender.data.service.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calender.data.service.ts
@@ -27,4 +27,25 @@ export class DataService {
   } 
 
 }
+interface MonthData {
+  month: string;
+  weather: string;
+}
+
+interface CropMonth {
+  month: string;
+  activities: string[];
+}
+
+export interface Crop {
+  name: string;
+  months: CropMonth[];
+  extraInformation: string;
+}
+
+export interface CalendarData {
+  name: string;
+  timeAndConditions: MonthData[];
+  crops: Crop[];
+}
 

From e61325f13983184158d3563e3e0b23ab1e5560df Mon Sep 17 00:00:00 2001
From: khalifan-kfan <khalifanmuwonge@gmail.com>
Date: Mon, 9 Oct 2023 00:41:48 +0300
Subject: [PATCH 10/21] add  crop title editor dialog

---
 .../src/app/components/components.module.ts   |  3 +-
 .../crop-dialog-component.component.html      |  9 ++++
 .../crop-dialog-component.component.scss      | 12 +++++
 .../crop-dialog-component.component.spec.ts   | 22 ++++++++++
 .../crop-dialog-component.component.ts        | 29 ++++++++++++
 .../calendar-table.component.html             |  6 +--
 .../calendar-table.component.scss             |  6 +++
 .../calendar-table.component.ts               | 44 +++++++++++--------
 8 files changed, 108 insertions(+), 23 deletions(-)
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/crop-dialog-component/crop-dialog-component.component.html
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/crop-dialog-component/crop-dialog-component.component.scss
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/crop-dialog-component/crop-dialog-component.component.spec.ts
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/crop-dialog-component/crop-dialog-component.component.ts

diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/components.module.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/components.module.ts
index a2de0913a..4463595e0 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/components.module.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/components.module.ts
@@ -6,10 +6,11 @@ import { RouterModule } from '@angular/router';
 import { PicsaCommonComponentsModule } from '@picsa/components';
 import { PicsaTranslateModule } from '@picsa/shared/modules';
 
+import { CropDialogComponentComponent  } from './../crop-dialog-component/crop-dialog-component.component';
 // Local components
 import { SeasonalCalendarMaterialModule } from './material.module';
 
-const Components = [];
+const Components = [CropDialogComponentComponent];
 
 @NgModule({
   imports: [
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/crop-dialog-component/crop-dialog-component.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/crop-dialog-component/crop-dialog-component.component.html
new file mode 100644
index 000000000..5e9c5f56b
--- /dev/null
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/crop-dialog-component/crop-dialog-component.component.html
@@ -0,0 +1,9 @@
+<div class="dialog-container">
+    <h2 class="dialog-container" >{{ data.name }} Extra information</h2>
+    <p>{{"Please include any information required about farming this crop."}}</p>
+    <input  class="inputField" [(ngModel)]="editedExtraInformation" placeholder="Edit extra information" />
+    <div mat-dialog-actions>
+        <button mat-button (click)="onSave()">Save</button>
+        <button mat-button (click)="onClose()">Close</button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/crop-dialog-component/crop-dialog-component.component.scss b/apps/picsa-tools/seasonal-calendar-tool/src/app/crop-dialog-component/crop-dialog-component.component.scss
new file mode 100644
index 000000000..f20e16f2c
--- /dev/null
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/crop-dialog-component/crop-dialog-component.component.scss
@@ -0,0 +1,12 @@
+.dialog-container{
+    width: 25rem;
+    .dialog-container{
+        font-weight: 700;
+    }
+    .inputField{
+        padding: .5rem;
+        width: 14rem;
+        font-size: 16px;
+        border-radius: 5px;
+    }
+}
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/crop-dialog-component/crop-dialog-component.component.spec.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/crop-dialog-component/crop-dialog-component.component.spec.ts
new file mode 100644
index 000000000..434871ce7
--- /dev/null
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/crop-dialog-component/crop-dialog-component.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CropDialogComponentComponent } from './crop-dialog-component.component';
+
+describe('CropDialogComponentComponent', () => {
+  let component: CropDialogComponentComponent;
+  let fixture: ComponentFixture<CropDialogComponentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CropDialogComponentComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CropDialogComponentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/crop-dialog-component/crop-dialog-component.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/crop-dialog-component/crop-dialog-component.component.ts
new file mode 100644
index 000000000..62445c438
--- /dev/null
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/crop-dialog-component/crop-dialog-component.component.ts
@@ -0,0 +1,29 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA,MatDialogRef } from '@angular/material/dialog';
+
+import { Crop } from '../services/calender.data.service';
+
+@Component({
+  selector: 'seasonal-calendar-dialog-component',
+  templateUrl: './crop-dialog-component.component.html',
+  styleUrls: ['./crop-dialog-component.component.scss'],
+})
+export class CropDialogComponentComponent {
+  editedExtraInformation: string;
+
+  constructor(
+    public dialogRef: MatDialogRef<CropDialogComponentComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: Crop
+  ) {
+    this.editedExtraInformation = data.extraInformation;
+  }
+
+  onClose(): void {
+    this.dialogRef.close();
+  }
+
+  onSave(): void {
+    this.data.extraInformation = this.editedExtraInformation;
+    this.dialogRef.close();
+  }
+}
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html
index 6d153031e..eb7698d9d 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html
@@ -12,7 +12,9 @@
         <tbody>
           <ng-container *ngFor="let crop of calendarData.crops">
             <tr>
-              <td>{{ crop.name }}</td>
+              <td (click)="openCropDialog(crop)" >
+                <span class="y-axis-header" > {{ crop.name }} <mat-icon>info</mat-icon></span>
+             </td>
               <td *ngFor="let month of calendarData.timeAndConditions"  class="activities-cell">
                 <span >
                     {{ getActivitiesForMonthAndCrop(month.month, crop) }}
@@ -22,6 +24,4 @@
           </ng-container>
         </tbody>
       </table>
-      
-
 </div>
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.scss b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.scss
index c8d1e47ac..ea7a445d5 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.scss
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.scss
@@ -64,5 +64,11 @@
   .calendar-table th {
     border-radius: 5px;
   }
+  .y-axis-header{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+  }
   
 }
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
index f100df0d7..c260a7c4d 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
@@ -1,47 +1,53 @@
 import { Component, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import { MatTableDataSource } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router'
+import { ActivatedRoute, Router } from '@angular/router';
 
-import { CalendarData,Crop,DataService } from './../../services/calender.data.service';
+import { CropDialogComponentComponent } from '../../crop-dialog-component/crop-dialog-component.component';
+import { CalendarData, Crop, DataService } from './../../services/calender.data.service';
 
 @Component({
   selector: 'seasonal-calendar-table',
   templateUrl: './calendar-table.component.html',
   styleUrls: ['./calendar-table.component.scss'],
 })
-
-export class CalendarTableComponent implements OnInit  {
+export class CalendarTableComponent implements OnInit {
   calendarData: CalendarData;
-  months: string[] = [
-    'January', 'February', 'March', 'April',
-    'May', 'June', 'July', 'August',
-    'September',
-  ];
-  constructor(private route: ActivatedRoute, private dataService: DataService, private router: Router) {}
+  months: string[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September'];
+  constructor(private route: ActivatedRoute,private dialog: MatDialog, private dataService: DataService, private router: Router) {}
 
   ngOnInit() {
     this.route.paramMap.subscribe((params) => {
       const calendarName = params.get('calendarName');
-      if(calendarName){
-      this.calendarData = this.dataService.calendars[calendarName]
-      if (!this.calendarData || Object.keys(this.calendarData).length === 0) {
-        this.router.navigate(['/seasonal-calendar']);
-      }
+      if (calendarName) {
+        this.calendarData = this.dataService.calendars[calendarName];
+        if (!this.calendarData || Object.keys(this.calendarData).length === 0) {
+          this.router.navigate(['/seasonal-calendar']);
+        }
       }
     });
   }
- 
-  crops: string[] = ['Beans', 'Maize', 'Peas', 'Wheat', 'Barley']; 
+
+  crops: string[] = ['Beans', 'Maize', 'Peas', 'Wheat', 'Barley'];
 
   dataSource: MatTableDataSource<any>;
 
   getActivitiesForMonthAndCrop(monthName: string, crop: Crop): string {
     const selectedMonth = crop.months.find((month) => month.month === monthName);
     if (selectedMonth) {
-      return selectedMonth.activities.join(','); 
+      return selectedMonth.activities.join(',');
     } else {
-      return ''; 
+      return '';
     }
   }
+  openCropDialog(crop: Crop) {
+    const dialogRef = this.dialog.open(CropDialogComponentComponent, {
+      data: crop, 
+    });
   
+    dialogRef.afterClosed().subscribe((result) => {
+      console.log("closed")
+    });
+  }
+
 }

From 69a85752cf072b87c4e7233146f97c52f47236b9 Mon Sep 17 00:00:00 2001
From: khalifan-kfan <khalifanmuwonge@gmail.com>
Date: Mon, 9 Oct 2023 01:17:58 +0300
Subject: [PATCH 11/21] correct component structure and  activities  dialog

---
 .../src/app/app.module.ts                     |  1 +
 .../activities-editor-dialog.component.html   |  1 +
 .../activities-editor-dialog.component.scss   |  0
 ...activities-editor-dialog.component.spec.ts | 21 +++++++++++++++++++
 .../activities-editor-dialog.component.ts     |  8 +++++++
 .../src/app/components/components.module.ts   |  5 +++--
 .../crop-dialog-component.component.html      |  0
 .../crop-dialog-component.component.scss      |  0
 .../crop-dialog-component.component.spec.ts   |  0
 .../crop-dialog-component.component.ts        |  2 +-
 .../calendar-table.component.ts               |  3 ++-
 11 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.html
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.scss
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.spec.ts
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.ts
 rename apps/picsa-tools/seasonal-calendar-tool/src/app/{ => components}/crop-dialog-component/crop-dialog-component.component.html (100%)
 rename apps/picsa-tools/seasonal-calendar-tool/src/app/{ => components}/crop-dialog-component/crop-dialog-component.component.scss (100%)
 rename apps/picsa-tools/seasonal-calendar-tool/src/app/{ => components}/crop-dialog-component/crop-dialog-component.component.spec.ts (100%)
 rename apps/picsa-tools/seasonal-calendar-tool/src/app/{ => components}/crop-dialog-component/crop-dialog-component.component.ts (92%)

diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/app.module.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/app.module.ts
index 1cee46d5d..1ff25a9f8 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/app.module.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/app.module.ts
@@ -9,6 +9,7 @@ import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { SeasonalCalendarMaterialModule } from './components/material.module';
 
+
 /** Core imports only required when running standalone */
 const StandaloneImports = [
   AppRoutingModule,
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.html
new file mode 100644
index 000000000..ed0998482
--- /dev/null
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.html
@@ -0,0 +1 @@
+<p>activities-editor-dialog works!</p>
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.scss b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.spec.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.spec.ts
new file mode 100644
index 000000000..3077d4c80
--- /dev/null
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivitiesEditorDialogComponent } from './activities-editor-dialog.component';
+
+describe('ActivitiesEditorDialogComponent', () => {
+  let component: ActivitiesEditorDialogComponent;
+  let fixture: ComponentFixture<ActivitiesEditorDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ActivitiesEditorDialogComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ActivitiesEditorDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.ts
new file mode 100644
index 000000000..d3401d58f
--- /dev/null
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'picsa-activities-editor-dialog',
+  templateUrl: './activities-editor-dialog.component.html',
+  styleUrls: ['./activities-editor-dialog.component.scss'],
+})
+export class ActivitiesEditorDialogComponent {}
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/components.module.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/components.module.ts
index 4463595e0..85582d13f 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/components.module.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/components.module.ts
@@ -6,11 +6,12 @@ import { RouterModule } from '@angular/router';
 import { PicsaCommonComponentsModule } from '@picsa/components';
 import { PicsaTranslateModule } from '@picsa/shared/modules';
 
-import { CropDialogComponentComponent  } from './../crop-dialog-component/crop-dialog-component.component';
+import { ActivitiesEditorDialogComponent } from './activities-editor-dialog/activities-editor-dialog.component';
+import { CropDialogComponentComponent  } from './crop-dialog-component/crop-dialog-component.component';
 // Local components
 import { SeasonalCalendarMaterialModule } from './material.module';
 
-const Components = [CropDialogComponentComponent];
+const Components = [CropDialogComponentComponent,ActivitiesEditorDialogComponent];
 
 @NgModule({
   imports: [
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/crop-dialog-component/crop-dialog-component.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/crop-dialog-component/crop-dialog-component.component.html
similarity index 100%
rename from apps/picsa-tools/seasonal-calendar-tool/src/app/crop-dialog-component/crop-dialog-component.component.html
rename to apps/picsa-tools/seasonal-calendar-tool/src/app/components/crop-dialog-component/crop-dialog-component.component.html
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/crop-dialog-component/crop-dialog-component.component.scss b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/crop-dialog-component/crop-dialog-component.component.scss
similarity index 100%
rename from apps/picsa-tools/seasonal-calendar-tool/src/app/crop-dialog-component/crop-dialog-component.component.scss
rename to apps/picsa-tools/seasonal-calendar-tool/src/app/components/crop-dialog-component/crop-dialog-component.component.scss
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/crop-dialog-component/crop-dialog-component.component.spec.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/crop-dialog-component/crop-dialog-component.component.spec.ts
similarity index 100%
rename from apps/picsa-tools/seasonal-calendar-tool/src/app/crop-dialog-component/crop-dialog-component.component.spec.ts
rename to apps/picsa-tools/seasonal-calendar-tool/src/app/components/crop-dialog-component/crop-dialog-component.component.spec.ts
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/crop-dialog-component/crop-dialog-component.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/crop-dialog-component/crop-dialog-component.component.ts
similarity index 92%
rename from apps/picsa-tools/seasonal-calendar-tool/src/app/crop-dialog-component/crop-dialog-component.component.ts
rename to apps/picsa-tools/seasonal-calendar-tool/src/app/components/crop-dialog-component/crop-dialog-component.component.ts
index 62445c438..3e8c9a5d6 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/crop-dialog-component/crop-dialog-component.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/crop-dialog-component/crop-dialog-component.component.ts
@@ -1,7 +1,7 @@
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA,MatDialogRef } from '@angular/material/dialog';
 
-import { Crop } from '../services/calender.data.service';
+import { Crop } from '../../services/calender.data.service';
 
 @Component({
   selector: 'seasonal-calendar-dialog-component',
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
index c260a7c4d..3f2ac90d5 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
@@ -3,7 +3,8 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 
-import { CropDialogComponentComponent } from '../../crop-dialog-component/crop-dialog-component.component';
+import { ActivitiesEditorDialogComponent } from '../../components/activities-editor-dialog/activities-editor-dialog.component';
+import { CropDialogComponentComponent } from '../../components/crop-dialog-component/crop-dialog-component.component';
 import { CalendarData, Crop, DataService } from './../../services/calender.data.service';
 
 @Component({

From 7f82c586aba1cfe2e80a31d292a6f3fe0587fe4f Mon Sep 17 00:00:00 2001
From: khalifan-kfan <khalifanmuwonge@gmail.com>
Date: Mon, 9 Oct 2023 11:54:34 +0300
Subject: [PATCH 12/21] enable crop activities editing

---
 .../activities-editor-dialog.component.html   | 23 +++++++-
 .../activities-editor-dialog.component.scss   | 35 ++++++++++++
 .../activities-editor-dialog.component.ts     | 35 +++++++++++-
 .../src/app/components/material.module.ts     |  1 +
 .../calendar-table.component.html             | 56 ++++++++++---------
 .../calendar-table.component.scss             | 33 +++++++++--
 .../calendar-table.component.ts               | 36 +++++++++++-
 .../create-calendar.component.html            | 16 +-----
 .../create-calendar.component.scss            |  3 +
 .../create-calendar.component.ts              | 11 ++--
 .../src/app/services/calender.data.service.ts |  2 +-
 11 files changed, 198 insertions(+), 53 deletions(-)

diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.html
index ed0998482..c9ad67895 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.html
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.html
@@ -1 +1,22 @@
-<p>activities-editor-dialog works!</p>
+<div class="table-container">
+    <h2 class="dialog-title">Add Activity</h2>
+    <div class="dialog-body">
+      <mat-form-field>
+        <mat-label>Select Activity</mat-label>
+        <mat-select class="selectField" [(ngModel)]="selectedActivity">
+          <mat-option *ngFor="let activity of activities" [value]="activity">
+            {{ activity }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+      <div *ngIf="selectedActivity === 'Other'">
+        <h4>Type other activity</h4>
+        <input matInput class="inputField" placeholder="Custom Activity" [(ngModel)]="customActivity">
+      </div>
+    </div>
+    <div class="buttons">
+      <button mat-button class="add-button" (click)="onSave()" [mat-dialog-close]="selectedActivity || customActivity" [disabled]="!(selectedActivity || customActivity)">Add</button>
+      <button mat-button class="cancel-button" (click)="onClose()">Cancel</button>
+    </div>
+</div>
+  
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.scss b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.scss
index e69de29bb..cac03d060 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.scss
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.scss
@@ -0,0 +1,35 @@
+.table-container {
+    width: 23rem;
+    text-align: center;
+  
+    .dialog-title {
+      margin-bottom: 1rem;
+    }
+  
+    .dialog-body {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.4rem;
+    }
+    .inputField{
+        padding: .5rem;
+        font-size: 16px;
+        border-radius: 5px;
+        width: 12rem;
+    }
+    .selectField{
+        padding: .5rem;
+    }
+  
+    .buttons {
+      display: flex;
+      justify-content: center;
+      margin-top: 1rem;
+  
+      .add-button {
+        margin-right: 1rem;
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.ts
index d3401d58f..07dda69ba 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.ts
@@ -1,8 +1,37 @@
-import { Component } from '@angular/core';
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA,MatDialogRef } from '@angular/material/dialog';
 
 @Component({
-  selector: 'picsa-activities-editor-dialog',
+  selector: 'seasonal-calendar-editor-dialog',
   templateUrl: './activities-editor-dialog.component.html',
   styleUrls: ['./activities-editor-dialog.component.scss'],
 })
-export class ActivitiesEditorDialogComponent {}
+export class ActivitiesEditorDialogComponent {
+  activities: string[] = ['Preparation', 'Weeding', 'Havesting', 'Drying', 'Other']; 
+  selectedActivity = '';
+  customActivity = '';
+
+
+  constructor(
+    public dialogRef: MatDialogRef<ActivitiesEditorDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) {}
+
+  onSave(): void {
+    let result: string | null = this.selectedActivity;
+    if (this.selectedActivity === 'Other') {
+      const trimmedCustomActivity = this.customActivity.trim();
+      if (trimmedCustomActivity !== '') {
+        result = trimmedCustomActivity;
+      } else {
+        result = null;  
+      }
+    }
+    this.dialogRef.close(result);
+  }
+  onClose(): void {
+    this.dialogRef.close();
+  }
+
+
+}
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/material.module.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/material.module.ts
index 23c52d328..bd7b7c3cf 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/material.module.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/material.module.ts
@@ -8,6 +8,7 @@ import { MatStepperModule } from '@angular/material/stepper';
 import { MatTableModule } from '@angular/material/table';
 import { DomSanitizer } from '@angular/platform-browser';
 
+
 const COMPONENTS = [MatButtonModule, MatDialogModule, MatIconModule, MatSelectModule, MatStepperModule, MatTableModule];
 // use custom module to make it easier to control what is available through app
 @NgModule({
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html
index eb7698d9d..68bedf750 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html
@@ -1,27 +1,33 @@
 <div class="table-container">
-    <table class="calendar-table">
-        <thead>
-          <tr>
-            <th></th>
-            <th *ngFor="let month of calendarData.timeAndConditions">
-                {{ month.month }} <br/>
-                ( {{ month.weather }})
-            </th>
-          </tr>
-        </thead>
-        <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>
-              <td *ngFor="let month of calendarData.timeAndConditions"  class="activities-cell">
-                <span >
-                    {{ getActivitiesForMonthAndCrop(month.month, crop) }}
-                </span>
-              </td>
-            </tr>
-          </ng-container>
-        </tbody>
-      </table>
+  <h1>{{calendarData.name}}</h1>
+  <table class="calendar-table">
+    <thead>
+      <tr>
+        <th></th>
+        <th *ngFor="let month of calendarData.timeAndConditions">
+          {{ month.month }} <br />
+          ( {{ month.weather }})
+        </th>
+      </tr>
+    </thead>
+    <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>
+          <td class="activities-cell" (click)="openAddActivityDialog(crop, month)" *ngFor="let month of calendarData.timeAndConditions">
+            <div class="user-activity-list">
+              <div class="activity" *ngFor="let activity of getActivitiesForMonthAndCrop(month.month, crop).split(',')">
+                <ng-container *ngIf="activity.trim() !== ''">
+                {{ activity }}
+                <mat-icon (click)="deleteActivity(crop, month.month, activity)" color="primary">clear</mat-icon>
+                </ng-container>
+              </div>
+            </div>
+          </td>
+        </tr>
+      </ng-container>
+    </tbody>
+  </table>
 </div>
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.scss b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.scss
index ea7a445d5..6c5655f0b 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.scss
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.scss
@@ -1,10 +1,11 @@
 .table-container{
     padding-left: 1.5rem;
 .calendar-table {
-    width: 100%;
+    width: 90%;
     border-collapse: collapse;
     margin-top: 20px;
-    font-family: Arial, sans-serif;
+    overflow-x: auto;
+
   }
   
   .calendar-table th,
@@ -25,7 +26,6 @@
   
   .calendar-table td {
     background-color: #fff;
-    max-width: 10rem;
   }
   
 
@@ -70,5 +70,30 @@
     align-items: center;
     justify-content: space-around;
   }
-  
+  .activities-cell{
+    max-width: 7rem;
+    font-size: large;
+  }
+  .activity{
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    gap: .2rem;
+    font-size: 15px;
+    font-weight: 600;
+    width: fit-content;
+    padding: .7rem;
+    border: 1px solid var(--color-primary);
+    border-radius: 12px;
+}
+.user-activity-list{
+  margin-top: .5rem;
+  display: flex;
+  gap: .4rem;
+  flex-direction: column; 
+  justify-content: start;
+  width: 100%;
+  align-items: centeer; 
+}
+ 
 }
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
index 3f2ac90d5..78404b562 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
@@ -5,7 +5,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 import { ActivitiesEditorDialogComponent } from '../../components/activities-editor-dialog/activities-editor-dialog.component';
 import { CropDialogComponentComponent } from '../../components/crop-dialog-component/crop-dialog-component.component';
-import { CalendarData, Crop, DataService } from './../../services/calender.data.service';
+import { CalendarData, Crop, DataService, MonthData } from './../../services/calender.data.service';
 
 @Component({
   selector: 'seasonal-calendar-table',
@@ -29,7 +29,6 @@ export class CalendarTableComponent implements OnInit {
     });
   }
 
-  crops: string[] = ['Beans', 'Maize', 'Peas', 'Wheat', 'Barley'];
 
   dataSource: MatTableDataSource<any>;
 
@@ -41,6 +40,15 @@ export class CalendarTableComponent implements OnInit {
       return '';
     }
   }
+  deleteActivity(crop: Crop, monthName: string, activity: string) {
+    const selectedMonth = crop.months.find((month) => month.month === monthName);
+    if (selectedMonth) {
+      const activityIndex = selectedMonth.activities.indexOf(activity);
+      if (activityIndex !== -1) {
+        selectedMonth.activities.splice(activityIndex, 1);
+      }
+    }
+  }
   openCropDialog(crop: Crop) {
     const dialogRef = this.dialog.open(CropDialogComponentComponent, {
       data: crop, 
@@ -51,4 +59,28 @@ export class CalendarTableComponent implements OnInit {
     });
   }
 
+  openAddActivityDialog(crop: Crop, month: MonthData) {
+    const dialogRef = this.dialog.open(ActivitiesEditorDialogComponent, {
+      data: {
+        crop,
+        month
+      }, 
+    });
+  
+    dialogRef.afterClosed().subscribe((result) => {
+      if (result) {
+        const activityToAdd = result;
+        const selectedMonth = crop.months.find((m) => m.month === month.month);
+    
+        if (selectedMonth) {
+          if (!selectedMonth.activities.includes(activityToAdd)) {
+            selectedMonth.activities.push(activityToAdd);
+          } else {
+            console.log('Activity already exists in this month.');
+          }
+        }
+      }
+    });
+  }
+
 }
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.html
index deb78ef88..74510ae5e 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.html
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.html
@@ -36,19 +36,6 @@ <h3 *ngIf="userCrops.length > 0">Selected crops</h3>
       </div>
     </div>
   </div>
- <!-- to be added at cell level -->
-  <!-- List of Activities
-  <div class="box">
-    <h2>List of Activities</h2>
-    <div class="user-activity-list">
-      <div *ngFor="let activity of activities" class="activity-items">{{ activity }}</div>
-    </div>
-    <h3>Add to activities if not on the provided list</h3>
-    <div class="select-input-field">
-      <input placeholder="planting.." class="inputField" type="text" [(ngModel)]="selectedActivity" />
-      <button mat-button mat-raised-button color="primary" (click)="addActivity()" *ngIf="selectedActivity">Add</button>
-    </div>
-  </div> -->
 
   <!-- Calendar Time -->
   <div>
@@ -79,4 +66,7 @@ <h4 *ngIf="calendarMonths.length > 0">{{"Enter the selected month's weather cond
   <div class="submit-button">
     <button class="" mat-button mat-raised-button (click)="onSubmition()" color="primary">Create  calender</button> 
   </div>
+  <div class="flag-message" *ngIf="showMessageFlag">
+    <p>{{message}}</p>
+  </div>
 </div>
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.scss b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.scss
index 56f5cbfb2..4c0a9cba4 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.scss
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.scss
@@ -79,4 +79,7 @@
         margin-top: 2rem;
         margin-bottom: 2rem;
     }
+    .flag-message{
+        color: var(--color-primary);
+    }
 }
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.ts
index 4721c1db4..f53cf9688 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.ts
@@ -22,7 +22,6 @@ export class CreateCalendarComponent {
   customCrop = ''
 
   userCrops: string[] = [];
-
   
   calendarMonths: {weather:string, month:string}[]= [];
 
@@ -42,6 +41,8 @@ export class CreateCalendarComponent {
     'December'
   ];
 
+  message = 'Please fill all the fields.';
+ showMessageFlag = false;
  
   private _numMonths = 0;
   private _startMonth = '';
@@ -106,16 +107,18 @@ export class CreateCalendarComponent {
   }
 
   onSubmition(){
-    //any required data validation happens here
+   if(this.calendarMonths.length > 0 && this.userCrops.length > 0 && this.calenderTitle){
     const data = {
      name: this.calenderTitle,
      crops: this.userCrops,
      timeAndConditions: this.calendarMonths,
     }
-    console.log(data);
-
+    // console.log(data);
     this.dataService.saveData(data);
     this.router.navigate(['/seasonal-calendar']);
+  }else{
+    this.showMessageFlag = true;
   }
+ }
 
 }
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calender.data.service.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calender.data.service.ts
index 104836326..11d06e483 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calender.data.service.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calender.data.service.ts
@@ -27,7 +27,7 @@ export class DataService {
   } 
 
 }
-interface MonthData {
+export interface MonthData {
   month: string;
   weather: string;
 }

From 9f9a69595eb37898630e7936311f0de9961a8a12 Mon Sep 17 00:00:00 2001
From: khalifan-kfan <khalifanmuwonge@gmail.com>
Date: Mon, 9 Oct 2023 11:57:14 +0300
Subject: [PATCH 13/21] chore: edit out unneeded content

---
 .../create-calendar/create-calendar.component.ts      | 11 -----------
 .../src/app/pages/home/home.component.spec.ts         |  1 +
 .../src/app/pages/home/home.component.ts              |  4 ++--
 3 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.ts
index f53cf9688..a93698ca1 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.ts
@@ -66,13 +66,6 @@ export class CreateCalendarComponent {
   }
   
 
-  // addActivity() {
-  //   if (this.selectedActivity && !this.activities.includes(this.selectedActivity)) {
-  //     this.activities.push(this.selectedActivity);
-  //     this.selectedActivity = "";
-  //   }
-  // }
-
 
   addCrop() {
     if (this.selectedCrop === 'Other' && this.customCrop.trim() !== '') {
@@ -88,10 +81,6 @@ export class CreateCalendarComponent {
     this.userCrops.splice(index, 1);
   }
 
-  // removeActivity(index: number) {
-  //   this.activities.splice(index, 1);
-  // }
-
   generateCalendarMonths() {
     const startIndex = this.months.indexOf(this.startMonth);
     this.calendarMonths = [];
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.spec.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.spec.ts
index 8680c5059..7d04862b9 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.spec.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.spec.ts
@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+
 import { HomeComponent } from './home.component';
 
 describe('HomeComponent', () => {
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
index 8ee1b9a0f..08ed288b4 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
@@ -13,8 +13,8 @@ export class HomeComponent implements OnInit {
   calendars;
 
   ngOnInit() {
-    //confirm data sharing
-    console.log(this.dataService.calendars)
+    // //confirm data sharing
+    // console.log(this.dataService.calendars)
     this.calendars = this.getCalendarsAsArray(this.dataService.calendars)
   }
   

From 238176ead087786fd894ac7de4a5a0a5b4955690 Mon Sep 17 00:00:00 2001
From: khalifan-kfan <khalifanmuwonge@gmail.com>
Date: Mon, 23 Oct 2023 02:34:07 +0300
Subject: [PATCH 14/21] chore: use rxdb

---
 .../app/src/main/assets/capacitor.config.json |  54 ++++-----
 .../crop-dialog-component.component.ts        |   2 +-
 .../calendar-table.component.html             |   4 +-
 .../calendar-table.component.scss             |   8 ++
 .../calendar-table.component.ts               |  44 +++++--
 .../create-calendar.component.ts              |  13 +-
 .../src/app/pages/home/home.component.html    |  11 +-
 .../src/app/pages/home/home.component.ts      |  53 +++++---
 .../src/app/schema/index.ts                   |   7 ++
 .../src/app/schema/schema_v0.ts               |  90 ++++++++++++++
 .../src/app/services/calender.data.service.ts | 113 ++++++++++++------
 11 files changed, 299 insertions(+), 100 deletions(-)
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/schema/index.ts
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/schema/schema_v0.ts

diff --git a/apps/picsa-apps/extension-app-native/android/app/src/main/assets/capacitor.config.json b/apps/picsa-apps/extension-app-native/android/app/src/main/assets/capacitor.config.json
index 07354c917..81144e893 100644
--- a/apps/picsa-apps/extension-app-native/android/app/src/main/assets/capacitor.config.json
+++ b/apps/picsa-apps/extension-app-native/android/app/src/main/assets/capacitor.config.json
@@ -1,29 +1,29 @@
 {
-  "appId": "io.picsa.extension",
-  "appName": "PICSA Extension",
-  "webDir": "../../../dist/apps/picsa-apps/extension-app",
-  "bundledWebRuntime": false,
-  "includePlugins": [
-    "@awesome-cordova-plugins/file-opener",
-    "cordova-plugin-file-opener2",
-    "@awesome-cordova-plugins/file",
-    "cordova-plugin-file",
-    "@awesome-cordova-plugins/social-sharing",
-    "cordova-plugin-x-socialsharing",
-    "cordova-plugin-codeplay-share-own-apk",
-    "@capacitor/app",
-    "@capacitor/browser",
-    "@capacitor/core",
-    "@capacitor/device",
-    "@capacitor/filesystem",
-    "capacitor-blob-writer",
-    "capacitor-video-player",
-    "@capacitor-community/firebase-analytics",
-    "@capacitor-community/firebase-crashlytics",
-    "@capacitor-firebase/performance"
-  ],
-  "server": {
-    "androidScheme": "http",
-    "cleartext": true
-  }
+	"appId": "io.picsa.extension",
+	"appName": "PICSA Extension",
+	"webDir": "../../../dist/apps/picsa-apps/extension-app",
+	"bundledWebRuntime": false,
+	"includePlugins": [
+		"@awesome-cordova-plugins/file-opener",
+		"cordova-plugin-file-opener2",
+		"@awesome-cordova-plugins/file",
+		"cordova-plugin-file",
+		"@awesome-cordova-plugins/social-sharing",
+		"cordova-plugin-x-socialsharing",
+		"cordova-plugin-codeplay-share-own-apk",
+		"@capacitor/app",
+		"@capacitor/browser",
+		"@capacitor/core",
+		"@capacitor/device",
+		"@capacitor/filesystem",
+		"capacitor-blob-writer",
+		"capacitor-video-player",
+		"@capacitor-community/firebase-analytics",
+		"@capacitor-community/firebase-crashlytics",
+		"@capacitor-firebase/performance"
+	],
+	"server": {
+		"androidScheme": "http",
+		"cleartext": true
+	}
 }
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/crop-dialog-component/crop-dialog-component.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/crop-dialog-component/crop-dialog-component.component.ts
index 3e8c9a5d6..43336ec6f 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/crop-dialog-component/crop-dialog-component.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/crop-dialog-component/crop-dialog-component.component.ts
@@ -1,7 +1,7 @@
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA,MatDialogRef } from '@angular/material/dialog';
 
-import { Crop } from '../../services/calender.data.service';
+import { Crop } from '../../schema/schema_v0';
 
 @Component({
   selector: 'seasonal-calendar-dialog-component',
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html
index 68bedf750..eded96c0b 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html
@@ -1,5 +1,5 @@
-<div class="table-container">
-  <h1>{{calendarData.name}}</h1>
+<div *ngIf="calendarData" class="table-container">
+  <div class="header-section" ><h1>{{calendarData?.name}}</h1>  <button class="" mat-button mat-raised-button  (click)="saveCalendar()" color="primary">Save</button> </div>
   <table class="calendar-table">
     <thead>
       <tr>
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.scss b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.scss
index 6c5655f0b..04cfc5136 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.scss
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.scss
@@ -7,6 +7,14 @@
     overflow-x: auto;
 
   }
+  .header-section{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 90%;
+    align-items: center;
+    padding-top: 1.5rem;
+  }
   
   .calendar-table th,
   .calendar-table td {
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
index 78404b562..bfd9be876 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
@@ -1,11 +1,13 @@
 import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { ActivitiesEditorDialogComponent } from '../../components/activities-editor-dialog/activities-editor-dialog.component';
 import { CropDialogComponentComponent } from '../../components/crop-dialog-component/crop-dialog-component.component';
-import { CalendarData, Crop, DataService, MonthData } from './../../services/calender.data.service';
+import { Crop, MonthData } from '../../schema/schema_v0'
+import {  SeasonCalenderService } from './../../services/calender.data.service';
+
+
 
 @Component({
   selector: 'seasonal-calendar-table',
@@ -13,24 +15,38 @@ import { CalendarData, Crop, DataService, MonthData } from './../../services/cal
   styleUrls: ['./calendar-table.component.scss'],
 })
 export class CalendarTableComponent implements OnInit {
-  calendarData: CalendarData;
+  calendarData: any;
   months: string[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September'];
-  constructor(private route: ActivatedRoute,private dialog: MatDialog, private dataService: DataService, private router: Router) {}
+  constructor(private route: ActivatedRoute,private dialog: MatDialog, private router: Router, private service: SeasonCalenderService,  ) {
+     this.initaliseDb()
+  }
 
   ngOnInit() {
     this.route.paramMap.subscribe((params) => {
       const calendarName = params.get('calendarName');
       if (calendarName) {
-        this.calendarData = this.dataService.calendars[calendarName];
-        if (!this.calendarData || Object.keys(this.calendarData).length === 0) {
-          this.router.navigate(['/seasonal-calendar']);
-        }
+         this.fetchData(calendarName).then((resData)=>{
+          //console.log(resData)
+          this.calendarData = resData;
+         }).catch(()=>{
+           this.calendarData = null
+         }).finally(()=>{
+          console.log(this.calendarData) 
+          if (!this.calendarData ) {
+            this.router.navigate(['/seasonal-calendar']);
+          }
+         })    
       }
     });
   }
+  async fetchData(calendarName: string){
+   return await this.service.getCalenderByName(calendarName);
+  }
+  private async initaliseDb() {
+    await this.service.initialise();
+  }
 
 
-  dataSource: MatTableDataSource<any>;
 
   getActivitiesForMonthAndCrop(monthName: string, crop: Crop): string {
     const selectedMonth = crop.months.find((month) => month.month === monthName);
@@ -47,6 +63,7 @@ export class CalendarTableComponent implements OnInit {
       if (activityIndex !== -1) {
         selectedMonth.activities.splice(activityIndex, 1);
       }
+     
     }
   }
   openCropDialog(crop: Crop) {
@@ -56,6 +73,7 @@ export class CalendarTableComponent implements OnInit {
   
     dialogRef.afterClosed().subscribe((result) => {
       console.log("closed")
+
     });
   }
 
@@ -75,12 +93,20 @@ export class CalendarTableComponent implements OnInit {
         if (selectedMonth) {
           if (!selectedMonth.activities.includes(activityToAdd)) {
             selectedMonth.activities.push(activityToAdd);
+
           } else {
             console.log('Activity already exists in this month.');
           }
+
         }
       }
     });
   }
 
+  saveCalendar(){
+    console.log(this.calendarData)
+    this.service.addORUpdateData(this.calendarData, 'update')
+    this.router.navigate(['/seasonal-calendar']);
+  }
+
 }
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.ts
index a93698ca1..20d127bb8 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.ts
@@ -1,7 +1,8 @@
 import { Component, Input } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { DataService } from './../../services/calender.data.service';
+import { SeasonCalenderService } from './../../services/calender.data.service';
+
 @Component({
   selector: 'seasonal-calendar-create-calender',
   templateUrl: './create-calendar.component.html',
@@ -10,9 +11,12 @@ import { DataService } from './../../services/calender.data.service';
 
 
 export class CreateCalendarComponent {
+  data
   
-  constructor(private router: Router, private dataService: DataService) {
+  constructor(private router: Router, private dataService: SeasonCalenderService ) {
     this.generateCalendarMonths();
+    this.data = this.router?.getCurrentNavigation()?.extras?.state;
+    console.log(this.data)
   }
   calenderTitle = "";
   crops: string[] = ["Maize", "Beans", "Peas"];
@@ -25,7 +29,6 @@ export class CreateCalendarComponent {
   
   calendarMonths: {weather:string, month:string}[]= [];
 
-
   months: string[] = [
     'January',
     'February',
@@ -65,8 +68,6 @@ export class CreateCalendarComponent {
     return this._startMonth;
   }
   
-
-
   addCrop() {
     if (this.selectedCrop === 'Other' && this.customCrop.trim() !== '') {
       this.userCrops.push(this.customCrop);
@@ -103,7 +104,7 @@ export class CreateCalendarComponent {
      timeAndConditions: this.calendarMonths,
     }
     // console.log(data);
-    this.dataService.saveData(data);
+    this.dataService.addORUpdateData(data, 'add');
     this.router.navigate(['/seasonal-calendar']);
   }else{
     this.showMessageFlag = true;
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
index 831e0cff1..ef4fd9319 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
@@ -8,14 +8,15 @@ <h2>Categories</h2>
   </div>
   <h2>Calendar Lists</h2>
   <div class="calendar-list">
-    <div class="feedbackMessage" *ngIf="calendars.length === 0">No available calendars</div>
+    <div class="feedbackMessage" *ngIf="dbCalendars.length === 0">No available calendars</div>
     <!-- map calenders -->
-    <div *ngIf="calendars.length > 0" class="items-container" >
-    <div *ngFor="let calendar of calendars" class="calendars-display">
-      <div (click)="redirectToCalendarTable(calendar.name)">
+    <div *ngIf="dbCalendars.length > 0" class="items-container" >
+    <div *ngFor="let calendar of dbCalendars;  let i = index" class="calendars-display">
+      <div (click)="redirectToCalendarTable(calendar.name, i)">
         {{ calendar.name }}
       </div>
-      <mat-icon>keyboard_arrow_right</mat-icon>
+       <mat-icon (click)="deleteThisCalender(i)">cancel</mat-icon>
+       <!-- <mat-icon>keyboard_arrow_right</mat-icon> -->
     </div>
   </div>
   </div>
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
index 08ed288b4..fe2b0bd43 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
@@ -1,29 +1,54 @@
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { NavigationExtras, Router } from '@angular/router';
+import { RxDocument } from 'rxdb';
+import { Subject, takeUntil } from 'rxjs';
 
-import { DataService } from './../../services/calender.data.service';
+import {  CalendarDataEntry } from '../../schema';
+import {  SeasonCalenderService } from './../../services/calender.data.service';
 
 @Component({
   selector: 'seasonal-calendar-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],
 })
-export class HomeComponent implements OnInit {
-  constructor(private router: Router ,public dataService: DataService) { }
-  calendars;
-
-  ngOnInit() {
-    // //confirm data sharing
-    // console.log(this.dataService.calendars)
-    this.calendars = this.getCalendarsAsArray(this.dataService.calendars)
+
+export class HomeComponent implements OnDestroy {
+  private componentDestroyed$ = new Subject();
+  public dbCalendars: RxDocument<CalendarDataEntry>[] = [];
+
+  constructor(private router: Router, private service: SeasonCalenderService) {
+    this.subscribeToDbChanges();
+  }
+
+  private async subscribeToDbChanges() {
+    await this.service.initialise();
+
+    const query = this.service.dbUserCollection;
+    query.$.pipe(takeUntil(this.componentDestroyed$)).subscribe((docs) => {
+      this.dbCalendars = docs;
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.componentDestroyed$.next(true);
+    this.componentDestroyed$.complete();
+  }
+
+  // ngOnInit() {
+  //  // this.calendars = this.getCalendarsAsArray(this.dataService.calendars)
+  //  console.log(this.dbCalendars)
+  // }
+
+  deleteThisCalender(index: number){
+    this.service.deleteCalender(this.dbCalendars[index]);
   }
   
   getCalendarsAsArray(calenderObject): any[] {
     return Object.keys(calenderObject).map((key) => calenderObject[key]);
   }
-  redirectToCalendarTable(calendarName: string) {
-    
-    this.router.navigate(['/seasonal-calendar/calendar-table',{calendarName}] );
+
+  redirectToCalendarTable(calendarName: string, index) { 
+    this.router.navigate(['/seasonal-calendar/calendar-table',{calendarName}]);
   }
 }
  
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/schema/index.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/schema/index.ts
new file mode 100644
index 000000000..5c89eba88
--- /dev/null
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/schema/index.ts
@@ -0,0 +1,7 @@
+import * as schema from './schema_v0';
+
+export const COLLECTION = schema.COLLECTION_V0;
+export type CalendarDataEntry = schema.CalendarDataEntry_v0;
+export const SCHEMA = schema.SCHEMA_V0;
+
+
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/schema/schema_v0.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/schema/schema_v0.ts
new file mode 100644
index 000000000..ee5078aa1
--- /dev/null
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/schema/schema_v0.ts
@@ -0,0 +1,90 @@
+import { IPicsaCollectionCreator } from '@picsa/shared/services/core/db_v2';
+import { RxJsonSchema } from 'rxdb';
+
+  export interface MonthData {
+    month: string;
+    weather: string;
+  }
+  
+  interface CropMonth {
+    month: string;
+    activities: string[];
+  }
+  
+  export interface Crop {
+    name: string;
+    months: CropMonth[];
+    extraInformation: string;
+  }
+  
+  export interface CalendarDataEntry_v0 {
+    name: string;
+    timeAndConditions: MonthData[];
+    crops: Crop[];
+  }
+
+  export const SCHEMA_V0: RxJsonSchema<CalendarDataEntry_v0> = {
+    title: 'calender entry schema',
+    version: 0,
+    keyCompression: false,
+    type: 'object',
+    properties: {
+      name: {
+        type: 'string',
+        default: '',
+      },
+      timeAndConditions: {
+        type: 'array',
+        items: {
+          type: 'object',
+          properties: {
+            name: {
+                type: 'string'
+            },
+            weather: {
+                type: 'string'
+            }
+          }
+        },
+      },
+      crops: {
+        type: 'array',
+        items: {
+          type: 'object',
+          properties: {
+            name: {
+              type: 'string',
+            },
+            extraInformation: {
+                type: 'string',
+            },
+            months: {
+              type: 'array',
+              items: {
+                type: 'object',
+                properties: {
+                    activities: {
+                        type: 'array',
+                        items: {
+                            type: 'string'
+                        }
+                    },
+                    month:{
+                        type: 'string'
+                    }
+                }
+              },
+            },
+          },
+          required: ['name'],
+        },
+      }
+    },
+    required: ['name'],
+    primaryKey: 'name',
+  };
+  
+  export const COLLECTION_V0: IPicsaCollectionCreator<CalendarDataEntry_v0> = {
+    schema: SCHEMA_V0,
+    isUserCollection: false,
+  };
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calender.data.service.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calender.data.service.ts
index 11d06e483..f6dbdbeba 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calender.data.service.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calender.data.service.ts
@@ -1,51 +1,92 @@
 import { Injectable } from '@angular/core';
+import { PicsaDatabase_V2_Service } from '@picsa/shared/services/core/db_v2';
+import { RxCollection, RxDocument, RxQuery } from 'rxdb';
+
+import { CalendarDataEntry,COLLECTION } from '../schema';
 
 @Injectable({
   providedIn: 'root',
 })
-export class DataService {
-
+export class SeasonCalenderService {
+  constructor(private dbService: PicsaDatabase_V2_Service) {}
 
-   calendars= {}; 
+  /** Provide database options tool collection (with typings) */
+  public get dbCollection() {
+    return this.dbService.db.collections['seasonal_calender_tool'] as RxCollection<CalendarDataEntry>;
+  }
+  /** Provide database options tool collection filtered to active user */
+  public get dbUserCollection() {
+    return this.dbService.activeUserQuery(this.dbCollection);
+  }
 
+  /** Initialise collection required for storing data to database */
+  public async initialise() {
+    await this.dbService.ensureCollections({
+      seasonal_calender_tool: COLLECTION,
+    });
+  }
 
-  saveData(data: any) {
-    //save new calender as key for the mean time 
-    const transformedData = {
-      name: data.name,
-      timeAndConditions: data.timeAndConditions,
-      crops: data.crops.map((cropName) => ({
-        name: cropName,
-        months: data.timeAndConditions.map((monthData) => ({
-          month: monthData.month,
-          activities: [], // Initially empty
+  public async addORUpdateData(calender: any,insertionType:string) {
+    try {
+      //handles instertion and update as long as the name is the same.
+      let transformedCalenderData;
+      if(insertionType==='add'){
+       transformedCalenderData = {
+        name: calender.name,
+        timeAndConditions: calender.timeAndConditions,
+        crops: calender.crops.map((cropName) => ({
+          name: cropName,
+          months: calender.timeAndConditions.map((monthData) => ({
+            month: monthData.month,
+            activities: [], // Initially empty
+          })),
+          extraInformation: "",
         })),
-        extraInformation: "",
-      })),
-    };
-    this.calendars[data.name] = transformedData;
-  } 
+      };
+     }else{
+      // the table could be used to edit more information about the calender
+      transformedCalenderData = {
+        name: calender.name,
+        crops: calender.crops,
+        timeAndConditions: calender.timeAndConditions
+      }
+     }
 
-}
-export interface MonthData {
-  month: string;
-  weather: string;
-}
+      const res = await this.dbCollection.incrementalUpsert(transformedCalenderData);
+      console.log('[calender]', res._data);
+    } catch (err) {
+      alert('Failed to add data, please try again');
+      console.error('calender.submit(): error:');
+      throw err;
+    }
+  }
 
-interface CropMonth {
-  month: string;
-  activities: string[];
-}
+  public async deleteCalender(calendar: RxDocument<CalendarDataEntry>) {
+    await calendar.remove();
+  }
 
-export interface Crop {
-  name: string;
-  months: CropMonth[];
-  extraInformation: string;
-}
+  public async getCalenderByName(name: string){
+    try {
+      const result = await this.dbCollection.findOne(
+        {
+          selector: {
+            name: name
+          }
+        }
+      ).exec()   
+      const calendar = result?._data
+      //console.log(calendar)
+      if (calendar) {
+        return calendar;
+      } else {
+        return null; 
+      }
+    } catch (err) {
+      console.error('Failed to get calendar by name:', err);
+      throw err;
+    }
+  }
 
-export interface CalendarData {
-  name: string;
-  timeAndConditions: MonthData[];
-  crops: Crop[];
 }
 
+

From 8cf66d9d846c6d38bfba543a922e94f2aaa99c9a Mon Sep 17 00:00:00 2001
From: khalifan-kfan <khalifanmuwonge@gmail.com>
Date: Tue, 31 Oct 2023 17:01:06 +0300
Subject: [PATCH 15/21] fix: typo and add edit design

---
 .../src/app/components/components.module.ts   |  5 ++--
 .../crop-dialog-component.component.spec.ts   | 12 ++++----
 .../crop-dialog-component.component.ts        |  4 +--
 .../crop-dialog-component.component.html      |  9 ++++++
 .../crop-dialog-component.component.scss      | 12 ++++++++
 .../crop-dialog-component.component.spec.ts   | 22 ++++++++++++++
 .../crop-dialog-component.component.ts        | 29 +++++++++++++++++++
 .../calendar-table.component.html             |  2 +-
 .../calendar-table.component.ts               | 15 ++++++++--
 .../src/app/pages/home/home.component.html    |  5 +++-
 .../src/app/pages/home/home.component.scss    |  7 ++++-
 .../src/app/pages/home/home.component.ts      | 24 +++++++++++----
 12 files changed, 125 insertions(+), 21 deletions(-)
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/components/month-editor-dialog/crop-dialog-component.component.html
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/components/month-editor-dialog/crop-dialog-component.component.scss
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/components/month-editor-dialog/crop-dialog-component.component.spec.ts
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/components/month-editor-dialog/crop-dialog-component.component.ts

diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/components.module.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/components.module.ts
index 85582d13f..15a3d4dce 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/components.module.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/components.module.ts
@@ -7,11 +7,12 @@ import { PicsaCommonComponentsModule } from '@picsa/components';
 import { PicsaTranslateModule } from '@picsa/shared/modules';
 
 import { ActivitiesEditorDialogComponent } from './activities-editor-dialog/activities-editor-dialog.component';
-import { CropDialogComponentComponent  } from './crop-dialog-component/crop-dialog-component.component';
+import { CropDialogComponent  } from './crop-dialog-component/crop-dialog-component.component';
 // Local components
 import { SeasonalCalendarMaterialModule } from './material.module';
+import { MonthDialogComponent } from './month-editor-dialog/crop-dialog-component.component';
 
-const Components = [CropDialogComponentComponent,ActivitiesEditorDialogComponent];
+const Components = [CropDialogComponent,ActivitiesEditorDialogComponent,MonthDialogComponent];
 
 @NgModule({
   imports: [
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/crop-dialog-component/crop-dialog-component.component.spec.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/crop-dialog-component/crop-dialog-component.component.spec.ts
index 434871ce7..69cf49832 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/crop-dialog-component/crop-dialog-component.component.spec.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/crop-dialog-component/crop-dialog-component.component.spec.ts
@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { CropDialogComponentComponent } from './crop-dialog-component.component';
+import { CropDialogComponent } from './crop-dialog-component.component';
 
-describe('CropDialogComponentComponent', () => {
-  let component: CropDialogComponentComponent;
-  let fixture: ComponentFixture<CropDialogComponentComponent>;
+describe('CropDialogComponent', () => {
+  let component: CropDialogComponent;
+  let fixture: ComponentFixture<CropDialogComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [CropDialogComponentComponent],
+      declarations: [CropDialogComponent],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(CropDialogComponentComponent);
+    fixture = TestBed.createComponent(CropDialogComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/crop-dialog-component/crop-dialog-component.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/crop-dialog-component/crop-dialog-component.component.ts
index 43336ec6f..029d71da4 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/crop-dialog-component/crop-dialog-component.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/crop-dialog-component/crop-dialog-component.component.ts
@@ -8,11 +8,11 @@ import { Crop } from '../../schema/schema_v0';
   templateUrl: './crop-dialog-component.component.html',
   styleUrls: ['./crop-dialog-component.component.scss'],
 })
-export class CropDialogComponentComponent {
+export class CropDialogComponent {
   editedExtraInformation: string;
 
   constructor(
-    public dialogRef: MatDialogRef<CropDialogComponentComponent>,
+    public dialogRef: MatDialogRef<CropDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data: Crop
   ) {
     this.editedExtraInformation = data.extraInformation;
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/month-editor-dialog/crop-dialog-component.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/month-editor-dialog/crop-dialog-component.component.html
new file mode 100644
index 000000000..5e9c5f56b
--- /dev/null
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/month-editor-dialog/crop-dialog-component.component.html
@@ -0,0 +1,9 @@
+<div class="dialog-container">
+    <h2 class="dialog-container" >{{ data.name }} Extra information</h2>
+    <p>{{"Please include any information required about farming this crop."}}</p>
+    <input  class="inputField" [(ngModel)]="editedExtraInformation" placeholder="Edit extra information" />
+    <div mat-dialog-actions>
+        <button mat-button (click)="onSave()">Save</button>
+        <button mat-button (click)="onClose()">Close</button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/month-editor-dialog/crop-dialog-component.component.scss b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/month-editor-dialog/crop-dialog-component.component.scss
new file mode 100644
index 000000000..f20e16f2c
--- /dev/null
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/month-editor-dialog/crop-dialog-component.component.scss
@@ -0,0 +1,12 @@
+.dialog-container{
+    width: 25rem;
+    .dialog-container{
+        font-weight: 700;
+    }
+    .inputField{
+        padding: .5rem;
+        width: 14rem;
+        font-size: 16px;
+        border-radius: 5px;
+    }
+}
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/month-editor-dialog/crop-dialog-component.component.spec.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/month-editor-dialog/crop-dialog-component.component.spec.ts
new file mode 100644
index 000000000..3cdd37f0f
--- /dev/null
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/month-editor-dialog/crop-dialog-component.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MonthDialogComponent } from './crop-dialog-component.component';
+
+describe('MonthDialogComponent', () => {
+  let component: MonthDialogComponent;
+  let fixture: ComponentFixture<MonthDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [MonthDialogComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MonthDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/month-editor-dialog/crop-dialog-component.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/month-editor-dialog/crop-dialog-component.component.ts
new file mode 100644
index 000000000..7cb4a4cd6
--- /dev/null
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/month-editor-dialog/crop-dialog-component.component.ts
@@ -0,0 +1,29 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA,MatDialogRef } from '@angular/material/dialog';
+
+import { Crop } from '../../schema/schema_v0';
+
+@Component({
+  selector: 'seasonal-calendar-month-editor',
+  templateUrl: './crop-dialog-component.component.html',
+  styleUrls: ['./crop-dialog-component.component.scss'],
+})
+export class MonthDialogComponent {
+  editedExtraInformation: string;
+
+  constructor(
+    public dialogRef: MatDialogRef<MonthDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: Crop
+  ) {
+    this.editedExtraInformation = data.extraInformation;
+  }
+
+  onClose(): void {
+    this.dialogRef.close();
+  }
+
+  onSave(): void {
+    this.data.extraInformation = this.editedExtraInformation;
+    this.dialogRef.close();
+  }
+}
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html
index eded96c0b..7e1ce244e 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html
@@ -1,7 +1,7 @@
 <div *ngIf="calendarData" class="table-container">
   <div class="header-section" ><h1>{{calendarData?.name}}</h1>  <button class="" mat-button mat-raised-button  (click)="saveCalendar()" color="primary">Save</button> </div>
   <table class="calendar-table">
-    <thead>
+    <thead >
       <tr>
         <th></th>
         <th *ngFor="let month of calendarData.timeAndConditions">
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
index bfd9be876..0579052fc 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
@@ -3,7 +3,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { ActivitiesEditorDialogComponent } from '../../components/activities-editor-dialog/activities-editor-dialog.component';
-import { CropDialogComponentComponent } from '../../components/crop-dialog-component/crop-dialog-component.component';
+import { CropDialogComponent } from '../../components/crop-dialog-component/crop-dialog-component.component';
 import { Crop, MonthData } from '../../schema/schema_v0'
 import {  SeasonCalenderService } from './../../services/calender.data.service';
 
@@ -67,7 +67,18 @@ export class CalendarTableComponent implements OnInit {
     }
   }
   openCropDialog(crop: Crop) {
-    const dialogRef = this.dialog.open(CropDialogComponentComponent, {
+    const dialogRef = this.dialog.open(CropDialogComponent, {
+      data: crop, 
+    });
+  
+    dialogRef.afterClosed().subscribe((result) => {
+      console.log("closed")
+
+    });
+  }
+
+  openMonthHeading(crop: Crop) {
+    const dialogRef = this.dialog.open(CropDialogComponent, {
       data: crop, 
     });
   
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
index ef4fd9319..cf395fe5e 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
@@ -15,7 +15,10 @@ <h2>Calendar Lists</h2>
       <div (click)="redirectToCalendarTable(calendar.name, i)">
         {{ calendar.name }}
       </div>
-       <mat-icon (click)="deleteThisCalender(i)">cancel</mat-icon>
+      <div class="actions-section">
+       <mat-icon >edit</mat-icon> 
+       <mat-icon (click)="promptDelete(i)">cancel</mat-icon>
+      </div>
        <!-- <mat-icon>keyboard_arrow_right</mat-icon> -->
     </div>
   </div>
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.scss b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.scss
index 412225cb7..86348995a 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.scss
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.scss
@@ -49,8 +49,13 @@
       flex-direction: row;
       justify-content: space-between;
       padding-right: 2rem;
+      cursor: pointer;
+    }
+    .actions-section{
+      display: flex;
+      flex-direction: row;
+      gap: 1rem;
     }
-    
   
     
   }
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
index fe2b0bd43..95e59f611 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
@@ -1,5 +1,6 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { NavigationExtras, Router } from '@angular/router';
+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';
 
@@ -16,7 +17,7 @@ export class HomeComponent implements OnDestroy {
   private componentDestroyed$ = new Subject();
   public dbCalendars: RxDocument<CalendarDataEntry>[] = [];
 
-  constructor(private router: Router, private service: SeasonCalenderService) {
+  constructor(private router: Router, private service: SeasonCalenderService,  private dialogService: PicsaDialogService) {
     this.subscribeToDbChanges();
   }
 
@@ -39,10 +40,21 @@ export class HomeComponent implements OnDestroy {
   //  console.log(this.dbCalendars)
   // }
 
-  deleteThisCalender(index: number){
-    this.service.deleteCalender(this.dbCalendars[index]);
-  }
   
+  
+  public async promptDelete(index: number) {
+    const dialog = await this.dialogService.open('delete');
+    dialog.afterClosed().subscribe(async (shouldDelete) => {
+      if (shouldDelete) {
+        //
+        this.service.deleteCalender(this.dbCalendars[index]);
+      }
+    });
+
+    
+  }
+
+
   getCalendarsAsArray(calenderObject): any[] {
     return Object.keys(calenderObject).map((key) => calenderObject[key]);
   }

From 387e5409bec21289f14adee6adf8140ae6a9d5e9 Mon Sep 17 00:00:00 2001
From: khalifan-kfan <khalifanmuwonge@gmail.com>
Date: Tue, 31 Oct 2023 18:33:09 +0300
Subject: [PATCH 16/21] enable weather condition editing

---
 .../crop-dialog-component.component.html               |  6 +++---
 .../crop-dialog-component.component.ts                 | 10 +++++-----
 .../pages/calender-table/calendar-table.component.html |  4 +++-
 .../pages/calender-table/calendar-table.component.ts   |  9 +++++----
 4 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/month-editor-dialog/crop-dialog-component.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/month-editor-dialog/crop-dialog-component.component.html
index 5e9c5f56b..373717fbd 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/month-editor-dialog/crop-dialog-component.component.html
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/month-editor-dialog/crop-dialog-component.component.html
@@ -1,7 +1,7 @@
 <div class="dialog-container">
-    <h2 class="dialog-container" >{{ data.name }} Extra information</h2>
-    <p>{{"Please include any information required about farming this crop."}}</p>
-    <input  class="inputField" [(ngModel)]="editedExtraInformation" placeholder="Edit extra information" />
+    <h2 class="dialog-container" >Edit {{ data.month }} weather condition</h2>
+    <p>{{"Enter the weather condition for this month"}}</p>
+    <input  class="inputField" [(ngModel)]="weather" placeholder="Edit extra information" />
     <div mat-dialog-actions>
         <button mat-button (click)="onSave()">Save</button>
         <button mat-button (click)="onClose()">Close</button>
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/month-editor-dialog/crop-dialog-component.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/month-editor-dialog/crop-dialog-component.component.ts
index 7cb4a4cd6..8706da21c 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/components/month-editor-dialog/crop-dialog-component.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/components/month-editor-dialog/crop-dialog-component.component.ts
@@ -1,7 +1,7 @@
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA,MatDialogRef } from '@angular/material/dialog';
 
-import { Crop } from '../../schema/schema_v0';
+import { MonthData } from '../../schema/schema_v0';
 
 @Component({
   selector: 'seasonal-calendar-month-editor',
@@ -9,13 +9,13 @@ import { Crop } from '../../schema/schema_v0';
   styleUrls: ['./crop-dialog-component.component.scss'],
 })
 export class MonthDialogComponent {
-  editedExtraInformation: string;
+  weather: string;
 
   constructor(
     public dialogRef: MatDialogRef<MonthDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: Crop
+    @Inject(MAT_DIALOG_DATA) public data: MonthData
   ) {
-    this.editedExtraInformation = data.extraInformation;
+    this.weather = data.weather;
   }
 
   onClose(): void {
@@ -23,7 +23,7 @@ export class MonthDialogComponent {
   }
 
   onSave(): void {
-    this.data.extraInformation = this.editedExtraInformation;
+    this.data.weather = this.weather;
     this.dialogRef.close();
   }
 }
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html
index 7e1ce244e..d63b68552 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html
@@ -1,12 +1,14 @@
 <div *ngIf="calendarData" class="table-container">
   <div class="header-section" ><h1>{{calendarData?.name}}</h1>  <button class="" mat-button mat-raised-button  (click)="saveCalendar()" color="primary">Save</button> </div>
   <table class="calendar-table">
-    <thead >
+    <thead>
       <tr>
         <th></th>
         <th *ngFor="let month of calendarData.timeAndConditions">
+          <div (click)="openMonthHeading(month)">
           {{ month.month }} <br />
           ( {{ month.weather }})
+        </div>
         </th>
       </tr>
     </thead>
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
index 0579052fc..541c13b8c 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
@@ -4,6 +4,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 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';
 
@@ -77,15 +78,15 @@ export class CalendarTableComponent implements OnInit {
     });
   }
 
-  openMonthHeading(crop: Crop) {
-    const dialogRef = this.dialog.open(CropDialogComponent, {
-      data: crop, 
+  openMonthHeading(month: MonthData) {
+    const dialogRef = this.dialog.open(MonthDialogComponent, {
+      data: month, 
     });
   
     dialogRef.afterClosed().subscribe((result) => {
       console.log("closed")
-
     });
+    
   }
 
   openAddActivityDialog(crop: Crop, month: MonthData) {

From aebcd8290b864b92b146b0848f46ace76e3ff554 Mon Sep 17 00:00:00 2001
From: khalifan-kfan <khalifanmuwonge@gmail.com>
Date: Tue, 31 Oct 2023 20:50:34 +0300
Subject: [PATCH 17/21] chore: enable name editing and fix schema

---
 .../src/app/pages/home/home.component.html    | 14 ++-
 .../src/app/pages/home/home.component.scss    |  8 +-
 .../src/app/pages/home/home.component.ts      | 32 +++---
 .../src/app/pages/home/home.module.ts         |  3 +-
 .../src/app/schema/index.ts                   |  9 +-
 .../src/app/schema/schema_v1.ts               | 99 +++++++++++++++++++
 .../src/app/services/calender.data.service.ts | 28 +++++-
 7 files changed, 170 insertions(+), 23 deletions(-)
 create mode 100644 apps/picsa-tools/seasonal-calendar-tool/src/app/schema/schema_v1.ts

diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
index cf395fe5e..522fca4a6 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
@@ -12,11 +12,19 @@ <h2>Calendar Lists</h2>
     <!-- map calenders -->
     <div *ngIf="dbCalendars.length > 0" class="items-container" >
     <div *ngFor="let calendar of dbCalendars;  let i = index" class="calendars-display">
-      <div (click)="redirectToCalendarTable(calendar.name, i)">
-        {{ calendar.name }}
+      <div (click)="!editMode ? redirectToCalendarTable(calendar.name, i) : null">
+        <div *ngIf="!editMode; else editField">
+          {{ calendar.name }}
+        </div>
+        <ng-template #editField>
+          <input class="inputField"  type="text" [(ngModel)]="calendar.name"  />
+        </ng-template>
       </div>
       <div class="actions-section">
-       <mat-icon >edit</mat-icon> 
+        <div >
+          <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>
       </div>
        <!-- <mat-icon>keyboard_arrow_right</mat-icon> -->
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.scss b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.scss
index 86348995a..7e35a6c19 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.scss
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.scss
@@ -39,6 +39,7 @@
     .calendars-display {
       width: 90vw;
       padding-left: 1rem;
+      padding-bottom: 0.5rem;
       color: #000; 
       font-size: 23px;
       font-weight: 600;
@@ -56,7 +57,12 @@
       flex-direction: row;
       gap: 1rem;
     }
+    .inputField{
+      padding: .5rem;
+      width: 14rem;
+      font-size: 16px;
+      border-radius: 5px;
+  } 
   
-    
   }
   
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
index 95e59f611..ffef85166 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
@@ -12,12 +12,17 @@ import {  SeasonCalenderService } from './../../services/calender.data.service';
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],
 })
-
 export class HomeComponent implements OnDestroy {
+  editMode = false;
+
   private componentDestroyed$ = new Subject();
-  public dbCalendars: RxDocument<CalendarDataEntry>[] = [];
+  public dbCalendars: any = [];
 
-  constructor(private router: Router, private service: SeasonCalenderService,  private dialogService: PicsaDialogService) {
+  constructor(
+    private router: Router,
+    private service: SeasonCalenderService,
+    private dialogService: PicsaDialogService
+  ) {
     this.subscribeToDbChanges();
   }
 
@@ -26,7 +31,9 @@ export class HomeComponent implements OnDestroy {
 
     const query = this.service.dbUserCollection;
     query.$.pipe(takeUntil(this.componentDestroyed$)).subscribe((docs) => {
-      this.dbCalendars = docs;
+      const extractedData = docs.map((doc) => doc._data);
+      console.log(extractedData);
+      this.dbCalendars = extractedData;
     });
   }
 
@@ -40,27 +47,26 @@ export class HomeComponent implements OnDestroy {
   //  console.log(this.dbCalendars)
   // }
 
-  
-  
   public async promptDelete(index: number) {
     const dialog = await this.dialogService.open('delete');
     dialog.afterClosed().subscribe(async (shouldDelete) => {
       if (shouldDelete) {
-        //
-        this.service.deleteCalender(this.dbCalendars[index]);
+          await this.service.deleteCalenderByName(this.dbCalendars[index].name);
       }
     });
-
-    
   }
 
-
   getCalendarsAsArray(calenderObject): any[] {
     return Object.keys(calenderObject).map((key) => calenderObject[key]);
   }
 
-  redirectToCalendarTable(calendarName: string, index) { 
-    this.router.navigate(['/seasonal-calendar/calendar-table',{calendarName}]);
+  async saveUpdates(calendar:any) {
+    await this.service.addORUpdateData(calendar, 'update');
+    this.editMode = false;
+  }
+
+  redirectToCalendarTable(calendarName: string, index) {
+    this.router.navigate(['/seasonal-calendar/calendar-table', { calendarName }]);
   }
 }
  
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.module.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.module.ts
index 955c9fe8f..c4f9cd8fc 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.module.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.module.ts
@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
 import { SeasonalCalendarToolComponentsModule } from '../../components/components.module';
 import { HomeComponent } from './home.component';
@@ -7,6 +8,6 @@ import { HomeRoutingModule } from './home.routing.module';
 
 @NgModule({
   declarations: [HomeComponent],
-  imports: [CommonModule, HomeRoutingModule, SeasonalCalendarToolComponentsModule ],
+  imports: [CommonModule, HomeRoutingModule, SeasonalCalendarToolComponentsModule,FormsModule ],
 })
 export class HomeModule {}
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/schema/index.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/schema/index.ts
index 5c89eba88..d923c96b9 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/schema/index.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/schema/index.ts
@@ -1,7 +1,8 @@
-import * as schema from './schema_v0';
+// import * as schema from './schema_v0';
+import * as schema_v1 from './schema_v1';
 
-export const COLLECTION = schema.COLLECTION_V0;
-export type CalendarDataEntry = schema.CalendarDataEntry_v0;
-export const SCHEMA = schema.SCHEMA_V0;
+export const COLLECTION = schema_v1.COLLECTION_V1;
+export type CalendarDataEntry = schema_v1.CalendarDataEntry_v1;
+export const SCHEMA = schema_v1.SCHEMA_V1;
 
 
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/schema/schema_v1.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/schema/schema_v1.ts
new file mode 100644
index 000000000..7459e65ba
--- /dev/null
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/schema/schema_v1.ts
@@ -0,0 +1,99 @@
+import { generateID } from '@picsa/shared/services/core/db/db.service';
+import type { IPicsaCollectionCreator } from '@picsa/shared/services/core/db_v2';
+import { RxJsonSchema } from 'rxdb';
+
+import { CalendarDataEntry_v0, COLLECTION_V0, SCHEMA_V0  } from './schema_v0';
+
+/**
+ * ADD ID primary key
+ * */
+export interface CalendarDataEntry_v1 extends Omit<CalendarDataEntry_v0, 'unique_id'> {
+  ID: string;
+}
+
+
+const { ...v1_properties_with_id } = SCHEMA_V0.properties;
+
+export const SCHEMA_V1: RxJsonSchema<CalendarDataEntry_v1> = {
+  ...SCHEMA_V0,
+  version: 2,
+  properties: {
+    ...v1_properties_with_id,
+        ID: {
+            type: 'string'
+        },
+        name: {
+          type: 'string',
+          default: '',
+        },
+        timeAndConditions: {
+          type: 'array',
+          items: {
+            type: 'object',
+            properties: {
+              name: {
+                  type: 'string'
+              },
+              weather: {
+                  type: 'string'
+              }
+            }
+          },
+        },
+        crops: {
+          type: 'array',
+          items: {
+            type: 'object',
+            properties: {
+              name: {
+                type: 'string',
+              },
+              extraInformation: {
+                  type: 'string',
+              },
+              months: {
+                type: 'array',
+                items: {
+                  type: 'object',
+                  properties: {
+                      activities: {
+                          type: 'array',
+                          items: {
+                              type: 'string'
+                          }
+                      },
+                      month:{
+                          type: 'string'
+                      }
+                  }
+                },
+              },
+            },
+            required: ['name'],
+          },
+       },
+     },
+      required: ['name','ID'],
+      primaryKey: 'ID',
+}
+
+export const COLLECTION_V1: IPicsaCollectionCreator<CalendarDataEntry_v1> = {
+  ...COLLECTION_V0,
+  schema: SCHEMA_V1,
+  // Ensure old data can be migrated to new format
+  // https://rxdb.info/data-migration.html
+  migrationStrategies: {
+    ...COLLECTION_V0.migrationStrategies,
+    1: (data: CalendarDataEntry_v0): CalendarDataEntry_v1 => {
+      const { ...data_with_id } = data;
+      return {
+        // rename 'gender' to 'gender_activities' and add 'gender_decisions'
+        ...data_with_id,
+        // add new id
+        ID: generateID(),
+      };
+    },
+  },
+  // HACK - type def issue (not actually changed)
+  conflictHandler: COLLECTION_V0.conflictHandler as any,
+};
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calender.data.service.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calender.data.service.ts
index f6dbdbeba..8e558742a 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calender.data.service.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calender.data.service.ts
@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
+import { generateID } from '@picsa/shared/services/core/db/db.service';
 import { PicsaDatabase_V2_Service } from '@picsa/shared/services/core/db_v2';
-import { RxCollection, RxDocument, RxQuery } from 'rxdb';
+import { RxCollection, RxDocument } from 'rxdb';
 
 import { CalendarDataEntry,COLLECTION } from '../schema';
 
@@ -27,11 +28,14 @@ export class SeasonCalenderService {
   }
 
   public async addORUpdateData(calender: any,insertionType:string) {
+ ;
+
     try {
       //handles instertion and update as long as the name is the same.
       let transformedCalenderData;
       if(insertionType==='add'){
        transformedCalenderData = {
+       ID: generateID(),
         name: calender.name,
         timeAndConditions: calender.timeAndConditions,
         crops: calender.crops.map((cropName) => ({
@@ -46,6 +50,7 @@ export class SeasonCalenderService {
      }else{
       // the table could be used to edit more information about the calender
       transformedCalenderData = {
+        ID: calender.ID,
         name: calender.name,
         crops: calender.crops,
         timeAndConditions: calender.timeAndConditions
@@ -64,6 +69,25 @@ export class SeasonCalenderService {
   public async deleteCalender(calendar: RxDocument<CalendarDataEntry>) {
     await calendar.remove();
   }
+  public async deleteCalenderByName(name: string) {
+    try {
+      const calendar = await this.dbCollection.findOne({
+        selector: {
+          name: name,
+        },
+      }).exec();
+  
+      if (calendar) {
+        await calendar.remove();
+        console.log(`Calendar "${name}" has been deleted.`);
+      } else {
+        console.log(`Calendar "${name}" not found.`);
+      }
+    } catch (err) {
+      console.error(`Failed to delete calendar "${name}":`, err);
+      throw err;
+    }
+  }
 
   public async getCalenderByName(name: string){
     try {
@@ -87,6 +111,8 @@ export class SeasonCalenderService {
     }
   }
 
+ 
+
 }
 
 

From 09b61a0acdf2551bda9dea73afb361632c751d67 Mon Sep 17 00:00:00 2001
From: khalifan-kfan <khalifanmuwonge@gmail.com>
Date: Tue, 31 Oct 2023 22:47:55 +0300
Subject: [PATCH 18/21] chore: add crop adder and remover

---
 .../calendar-table.component.html             | 35 +++++++++++-
 .../calendar-table.component.scss             | 31 ++++++++++-
 .../calendar-table.component.ts               | 53 +++++++++++++++++--
 .../src/app/pages/home/home.component.html    |  3 +-
 .../src/app/pages/home/home.component.scss    |  3 ++
 .../src/app/pages/home/home.component.ts      |  4 +-
 6 files changed, 117 insertions(+), 12 deletions(-)

diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html
index d63b68552..8dd92aeaa 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html
+++ b/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>
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.scss b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.scss
index 04cfc5136..a00cd6774 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.scss
+++ b/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;
+}
  
 }
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
index 541c13b8c..c8c7d1ccb 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
@@ -1,6 +1,7 @@
 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';
@@ -8,8 +9,6 @@ import { MonthDialogComponent } from '../../components/month-editor-dialog/crop-
 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)
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
index 522fca4a6..49f949a55 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
+++ b/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>
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.scss b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.scss
index 7e35a6c19..20a58f213 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.scss
+++ b/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; 
+  }
   
   }
   
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
index ffef85166..e7f12fa92 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
+++ b/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;
     });
   }

From b5c65b7c3d3adc0d2923a014d09c5e792165c7c9 Mon Sep 17 00:00:00 2001
From: khalifan-kfan <khalifanmuwonge@gmail.com>
Date: Tue, 31 Oct 2023 23:05:45 +0300
Subject: [PATCH 19/21] chore: enable month deleting

---
 .../calendar-table.component.html             |  36 +++---
 .../calendar-table.component.ts               | 113 ++++++++++--------
 .../src/app/pages/home/home.component.html    |   8 +-
 .../src/app/pages/home/home.component.ts      |   4 +-
 4 files changed, 94 insertions(+), 67 deletions(-)

diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html
index 8dd92aeaa..20d80a15e 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.html
@@ -1,35 +1,43 @@
 <div *ngIf="calendarData" class="table-container">
-  <div class="header-section" ><h1>{{calendarData?.name}}</h1>  <button class="" mat-button mat-raised-button  (click)="saveCalendar()" color="primary">Save</button> </div>
+  <div class="header-section">
+    <h1>{{calendarData?.name}}</h1> <button class="" mat-button mat-raised-button (click)="saveCalendar()"
+      color="primary">Save</button>
+  </div>
   <table class="calendar-table">
     <thead>
       <tr>
         <th></th>
         <th *ngFor="let month of calendarData.timeAndConditions">
-          <div (click)="openMonthHeading(month)">
-          {{ month.month }} <br />
-          ( {{ month.weather }})
-        </div>
+          <div class="y-axis-header">
+            <div (click)="openMonthHeading(month)">
+              {{ month.month }} <br />
+              ( {{ month.weather }})
+            </div>
+            <mat-icon (click)="deleteMonth(month.month)" class="custom-trash-icon">delete</mat-icon>
+          </div>
         </th>
+
       </tr>
     </thead>
     <tbody>
       <ng-container *ngFor="let crop of calendarData.crops">
         <tr>
-          <td >
+          <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>
+              <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>
-          </div>
           </td>
-          <td class="activities-cell" (click)="openAddActivityDialog(crop, month)" *ngFor="let month of calendarData.timeAndConditions">
+          <td class="activities-cell" (click)="openAddActivityDialog(crop, month)"
+            *ngFor="let month of calendarData.timeAndConditions">
             <div class="user-activity-list">
               <div class="activity" *ngFor="let activity of getActivitiesForMonthAndCrop(month.month, crop).split(',')">
                 <ng-container *ngIf="activity.trim() !== ''">
-                {{ activity }}
-                <mat-icon (click)="deleteActivity(crop, month.month, activity)" color="primary">clear</mat-icon>
+                  {{ activity }}
+                  <mat-icon (click)="deleteActivity(crop, month.month, activity)" color="primary">clear</mat-icon>
                 </ng-container>
               </div>
             </div>
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
index c8c7d1ccb..b80ede74c 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
@@ -17,42 +17,49 @@ 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'];
-  crops: string[] = ["Maize", "Beans", "Peas"];
-  selectedCrop = "";
-  customCrop = ''
+  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()
+  constructor(
+    private route: ActivatedRoute,
+    private dialog: MatDialog,
+    private router: Router,
+    private service: SeasonCalenderService,
+    private dialogService: PicsaDialogService
+  ) {
+    this.initaliseDb();
   }
 
   ngOnInit() {
     this.route.paramMap.subscribe((params) => {
       const calendarName = params.get('calendarName');
       if (calendarName) {
-         this.fetchData(calendarName).then((resData)=>{
-          //console.log(resData)
-          this.calendarData = resData;
-         }).catch(()=>{
-           this.calendarData = null
-         }).finally(()=>{
-          console.log(this.calendarData) 
-          if (!this.calendarData ) {
-            this.router.navigate(['/seasonal-calendar']);
-          }
-         })    
+        this.fetchData(calendarName)
+          .then((resData) => {
+            //console.log(resData)
+            this.calendarData = resData;
+          })
+          .catch(() => {
+            this.calendarData = null;
+          })
+          .finally(() => {
+            console.log(this.calendarData);
+            if (!this.calendarData) {
+              this.router.navigate(['/seasonal-calendar']);
+            }
+          });
       }
     });
   }
-  async fetchData(calendarName: string){
-   return await this.service.getCalenderByName(calendarName);
+  async fetchData(calendarName: string) {
+    return await this.service.getCalenderByName(calendarName);
   }
   private async initaliseDb() {
     await this.service.initialise();
   }
 
-
-
   getActivitiesForMonthAndCrop(monthName: string, crop: Crop): string {
     const selectedMonth = crop.months.find((month) => month.month === monthName);
     if (selectedMonth) {
@@ -68,29 +75,26 @@ export class CalendarTableComponent implements OnInit {
       if (activityIndex !== -1) {
         selectedMonth.activities.splice(activityIndex, 1);
       }
-     
     }
   }
   openCropDialog(crop: Crop) {
     const dialogRef = this.dialog.open(CropDialogComponent, {
-      data: crop, 
+      data: crop,
     });
-  
-    dialogRef.afterClosed().subscribe((result) => {
-      console.log("closed")
 
+    dialogRef.afterClosed().subscribe((result) => {
+      console.log('closed');
     });
   }
 
   openMonthHeading(month: MonthData) {
     const dialogRef = this.dialog.open(MonthDialogComponent, {
-      data: month, 
+      data: month,
     });
-  
+
     dialogRef.afterClosed().subscribe((result) => {
-      console.log("closed")
+      console.log('closed');
     });
-
   }
   toggleCropAdder() {
     this.showCropAdder = !this.showCropAdder;
@@ -100,23 +104,21 @@ export class CalendarTableComponent implements OnInit {
     const dialogRef = this.dialog.open(ActivitiesEditorDialogComponent, {
       data: {
         crop,
-        month
-      }, 
+        month,
+      },
     });
-  
+
     dialogRef.afterClosed().subscribe((result) => {
       if (result) {
         const activityToAdd = result;
         const selectedMonth = crop.months.find((m) => m.month === month.month);
-    
+
         if (selectedMonth) {
           if (!selectedMonth.activities.includes(activityToAdd)) {
             selectedMonth.activities.push(activityToAdd);
-
           } else {
             console.log('Activity already exists in this month.');
           }
-
         }
       }
     });
@@ -127,19 +129,19 @@ export class CalendarTableComponent implements OnInit {
       if (shouldDelete) {
         const cropIndex = this.calendarData.crops.findIndex((c) => c.name === crop.name);
         if (cropIndex !== -1) {
-          this.calendarData.crops.splice(cropIndex, 1); 
+          this.calendarData.crops.splice(cropIndex, 1);
         }
       }
     });
-    
   }
+
   addNewCrop() {
-    let cropName
+    let cropName;
     if (this.selectedCrop === 'Other' && this.customCrop.trim() !== '') {
-      cropName = this.customCrop
-      this.customCrop = ''; 
-    } else if (this.selectedCrop && this.selectedCrop !== 'Other' ) {
-      cropName =  this.selectedCrop
+      cropName = this.customCrop;
+      this.customCrop = '';
+    } else if (this.selectedCrop && this.selectedCrop !== 'Other') {
+      cropName = this.selectedCrop;
     }
     if (!this.isCropNameDuplicate(cropName)) {
       const newCrop: Crop = {
@@ -150,20 +152,37 @@ export class CalendarTableComponent implements OnInit {
         })),
         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)
-    this.service.addORUpdateData(this.calendarData, 'update')
-    this.router.navigate(['/seasonal-calendar']);
+  async deleteMonth(monthName: string) {
+    const dialog = await this.dialogService.open('delete');
+    dialog.afterClosed().subscribe(async (shouldDelete) => {
+      if (shouldDelete) {
+        // Delete the month from timeAndConditions
+        this.calendarData.timeAndConditions = this.calendarData.timeAndConditions.filter(
+          (month) => month.month !== monthName
+        );
+
+        // Delete the month from each crop's months array
+        this.calendarData.crops.forEach((crop) => {
+          crop.months = crop.months.filter((month) => month.month !== monthName);
+        });
+      }
+    });
   }
 
+  saveCalendar() {
+    console.log(this.calendarData);
+    this.service.addORUpdateData(this.calendarData, 'update');
+    this.router.navigate(['/seasonal-calendar']);
+  }
 }
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
index 49f949a55..706264af9 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.html
@@ -12,8 +12,8 @@ <h2>Calendar Lists</h2>
     <!-- map calenders -->
     <div *ngIf="dbCalendars.length > 0" class="items-container" >
     <div *ngFor="let calendar of dbCalendars;  let i = index" class="calendars-display">
-      <div (click)="!editMode ? redirectToCalendarTable(calendar.name, i) : null">
-        <div *ngIf="!editMode; else editField">
+      <div (click)="editMode!==i ? redirectToCalendarTable(calendar.name, i) : null">
+        <div *ngIf="editMode!==i; else editField">
           {{ calendar.name }}
         </div>
         <ng-template #editField>
@@ -22,8 +22,8 @@ <h2>Calendar Lists</h2>
       </div>
       <div class="actions-section">
         <div >
-          <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>
+          <button *ngIf="editMode===i"  (click)="saveUpdates(calendar)"  class="" mat-button mat-raised-button color="primary">Save</button> 
+          <mat-icon (click)="editMode = i" *ngIf="editMode!==i">edit</mat-icon>
         </div>
        <mat-icon class="custom-trash-icon " (click)="promptDelete(i)">delete</mat-icon>
       </div>
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
index e7f12fa92..a38348f0e 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
@@ -11,7 +11,7 @@ import {  SeasonCalenderService } from './../../services/calender.data.service';
   styleUrls: ['./home.component.scss'],
 })
 export class HomeComponent implements OnDestroy {
-  editMode = false;
+  editMode = -1;
 
   private componentDestroyed$ = new Subject();
   public dbCalendars: any = [];
@@ -60,7 +60,7 @@ export class HomeComponent implements OnDestroy {
 
   async saveUpdates(calendar:any) {
     await this.service.addORUpdateData(calendar, 'update');
-    this.editMode = false;
+    this.editMode = -1;
   }
 
   redirectToCalendarTable(calendarName: string, index) {

From 5b45724d06ec95131a4e9203cb823772e68d8f78 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Wed, 8 Nov 2023 14:43:17 -0800
Subject: [PATCH 20/21] refactor: shared crop select

---
 .../src/app/app.module.ts                     | 16 +++++++---
 .../create-calendar.component.html            | 32 +++----------------
 .../create-calendar/create-calendar.module.ts |  5 +--
 3 files changed, 19 insertions(+), 34 deletions(-)

diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/app.module.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/app.module.ts
index 1ff25a9f8..55ce83a44 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/app.module.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/app.module.ts
@@ -3,30 +3,36 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { PicsaCommonComponentsModule } from '@picsa/components';
-import { PicsaDb_V2_Module, PicsaTranslateModule, PicsaTranslateService } from '@picsa/shared/modules';
+import {
+  PicsaDb_V2_Module,
+  PicsaFormsModule,
+  PicsaTranslateModule,
+  PicsaTranslateService,
+} from '@picsa/shared/modules';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { SeasonalCalendarMaterialModule } from './components/material.module';
 
-
 /** Core imports only required when running standalone */
 const StandaloneImports = [
   AppRoutingModule,
   BrowserModule,
   BrowserAnimationsModule,
   NoopAnimationsModule,
-  PicsaTranslateModule.forRoot(),
   PicsaDb_V2_Module.forRoot(),
+  PicsaFormsModule.forRoot(),
+  PicsaTranslateModule.forRoot(),
 ];
 
 /** Common imports used in both standalone and embedded formats */
 export const APP_COMMON_IMPORTS = [
   HttpClientModule,
   SeasonalCalendarMaterialModule,
-  PicsaTranslateModule,
-  PicsaDb_V2_Module,
   PicsaCommonComponentsModule,
+  PicsaDb_V2_Module,
+  PicsaFormsModule,
+  PicsaTranslateModule,
 ];
 
 /*******************************************************************
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.html b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.html
index 74510ae5e..9d55b09b0 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.html
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.html
@@ -10,29 +10,7 @@ <h2>Calender name</h2>
     <h2>Season Crops</h2>
     <div 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)="addCrop()"
-          *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)="addCrop()" *ngIf="selectedCrop === 'Other'">
-          + {{ 'Add' | translate }}
-        </button>
-      </div>
-    </div>
-    <h3 *ngIf="userCrops.length > 0">Selected crops</h3>
-    <div class="user-activity-list">
-      <div *ngFor="let userCrop of userCrops; let i = index" class="activity">
-        {{ userCrop }}
-        <mat-icon (click)="removeCrop(i)" color="primary">clear</mat-icon>
+        <picsa-form-crop-select [(ngModel)]="userCrops"></picsa-form-crop-select>
       </div>
     </div>
   </div>
@@ -53,7 +31,7 @@ <h2>Calendar Time</h2>
         <input type="number" class="inputField" id="numberOfMonths" [(ngModel)]="numMonths" />
       </div>
     </div>
-    <h4 *ngIf="calendarMonths.length > 0">{{"Enter the selected month's weather condition" | translate}}</h4>
+    <h4 *ngIf="calendarMonths.length > 0">{{ "Enter the selected month's weather condition" | translate }}</h4>
     <div class="monthsGrid">
       <div *ngFor="let monthData of calendarMonths" class="month">
         <div>{{ monthData.month }}</div>
@@ -64,9 +42,9 @@ <h4 *ngIf="calendarMonths.length > 0">{{"Enter the selected month's weather cond
     </div>
   </div>
   <div class="submit-button">
-    <button class="" mat-button mat-raised-button (click)="onSubmition()" color="primary">Create  calender</button> 
+    <button class="" mat-button mat-raised-button (click)="onSubmition()" color="primary">Create calender</button>
   </div>
   <div class="flag-message" *ngIf="showMessageFlag">
-    <p>{{message}}</p>
+    <p>{{ message }}</p>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.module.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.module.ts
index 6375ff45a..e74ef3685 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.module.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.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 { CreateCalendarComponent } from './create-calendar.component';
@@ -19,8 +19,9 @@ import { CreateCalendarRoutingModule } from './create-calendar.routing.module';
     SeasonalCalendarMaterialModule,
     FormsModule,
     PicsaVideoPlayerModule,
+    PicsaFormsModule,
     MatButtonModule,
     CreateCalendarRoutingModule,
-  ]
+  ],
 })
 export class CreateCalendarModule {}

From 645b7793745affd98a2df23734811471832cddf2 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Wed, 8 Nov 2023 14:43:44 -0800
Subject: [PATCH 21/21] chore: code tidying

---
 .../calendar-table.component.ts               | 14 +--
 .../create-calendar.component.ts              | 75 ++++++---------
 .../src/app/pages/home/home.component.ts      | 11 +--
 .../src/app/services/calender.data.service.ts | 96 +++++++++----------
 4 files changed, 86 insertions(+), 110 deletions(-)

diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
index b80ede74c..c4941d901 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/calender-table/calendar-table.component.ts
@@ -6,8 +6,8 @@ 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';
+import { Crop, MonthData } from '../../schema/schema_v0';
+import { SeasonCalenderService } from './../../services/calender.data.service';
 
 @Component({
   selector: 'seasonal-calendar-table',
@@ -28,11 +28,10 @@ export class CalendarTableComponent implements OnInit {
     private router: Router,
     private service: SeasonCalenderService,
     private dialogService: PicsaDialogService
-  ) {
-    this.initaliseDb();
-  }
+  ) {}
 
-  ngOnInit() {
+  async ngOnInit() {
+    await this.service.ready();
     this.route.paramMap.subscribe((params) => {
       const calendarName = params.get('calendarName');
       if (calendarName) {
@@ -56,9 +55,6 @@ export class CalendarTableComponent implements OnInit {
   async fetchData(calendarName: string) {
     return await this.service.getCalenderByName(calendarName);
   }
-  private async initaliseDb() {
-    await this.service.initialise();
-  }
 
   getActivitiesForMonthAndCrop(monthName: string, crop: Crop): string {
     const selectedMonth = crop.months.find((month) => month.month === monthName);
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.ts
index 20d127bb8..15afc0c4f 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 
 import { SeasonCalenderService } from './../../services/calender.data.service';
@@ -8,26 +8,22 @@ import { SeasonCalenderService } from './../../services/calender.data.service';
   templateUrl: './create-calendar.component.html',
   styleUrls: ['./create-calendar.component.scss'],
 })
+export class CreateCalendarComponent implements OnInit {
+  data;
 
-
-export class CreateCalendarComponent {
-  data
-  
-  constructor(private router: Router, private dataService: SeasonCalenderService ) {
+  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 = "";
-  crops: string[] = ["Maize", "Beans", "Peas"];
-  //activities: string[] = ["Planting", "Weeding", "Preparation", "Harvesting", "Drying"];
-  selectedCrop = "";
-  selectedActivity = "";
-  customCrop = ''
+  calenderTitle = '';
+  selectedCrop = '';
+  selectedActivity = '';
+  customCrop = '';
 
   userCrops: string[] = [];
-  
-  calendarMonths: {weather:string, month:string}[]= [];
+
+  calendarMonths: { weather: string; month: string }[] = [];
 
   months: string[] = [
     'January',
@@ -41,12 +37,12 @@ export class CreateCalendarComponent {
     'September',
     'October',
     'November',
-    'December'
+    'December',
   ];
 
   message = 'Please fill all the fields.';
- showMessageFlag = false;
- 
+  showMessageFlag = false;
+
   private _numMonths = 0;
   private _startMonth = '';
 
@@ -67,19 +63,8 @@ export class CreateCalendarComponent {
   get startMonth(): string {
     return this._startMonth;
   }
-  
-  addCrop() {
-    if (this.selectedCrop === 'Other' && this.customCrop.trim() !== '') {
-      this.userCrops.push(this.customCrop);
-      this.customCrop = ''; 
-    } else if (this.selectedCrop && this.selectedCrop !== 'Other' &&  !this.userCrops.includes(this.selectedCrop)) {
-      this.userCrops.push(this.selectedCrop);
-    }
-    this.selectedCrop = ''; 
-  }
-
-  removeCrop(index: number) {
-    this.userCrops.splice(index, 1);
+  async ngOnInit() {
+    await this.service.ready();
   }
 
   generateCalendarMonths() {
@@ -87,28 +72,26 @@ export class CreateCalendarComponent {
     this.calendarMonths = [];
     for (let i = 0; i < this.numMonths; i++) {
       const index = (startIndex + i) % 12;
-      this.calendarMonths.push({month:this.months[index],weather:''});
+      this.calendarMonths.push({ month: this.months[index], weather: '' });
     }
   }
 
   getWeatherCondition(month: string): string {
-    const selectedMonth = this.calendarMonths.find(item => item.month === month);
+    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){
-    const data = {
-     name: this.calenderTitle,
-     crops: this.userCrops,
-     timeAndConditions: this.calendarMonths,
+  onSubmition() {
+    if (this.calendarMonths.length > 0 && this.userCrops.length > 0 && this.calenderTitle) {
+      const data = {
+        name: this.calenderTitle,
+        crops: this.userCrops,
+        timeAndConditions: this.calendarMonths,
+      };
+      this.service.addORUpdateData(data, 'add');
+      this.router.navigate(['/seasonal-calendar']);
+    } else {
+      this.showMessageFlag = true;
     }
-    // console.log(data);
-    this.dataService.addORUpdateData(data, 'add');
-    this.router.navigate(['/seasonal-calendar']);
-  }else{
-    this.showMessageFlag = true;
   }
- }
-
 }
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
index a38348f0e..f178bce31 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/pages/home/home.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnDestroy } from '@angular/core';
-import {  Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { PicsaDialogService } from '@picsa/shared/features';
 import { Subject, takeUntil } from 'rxjs';
 
-import {  SeasonCalenderService } from './../../services/calender.data.service';
+import { SeasonCalenderService } from './../../services/calender.data.service';
 
 @Component({
   selector: 'seasonal-calendar-home',
@@ -25,7 +25,7 @@ export class HomeComponent implements OnDestroy {
   }
 
   private async subscribeToDbChanges() {
-    await this.service.initialise();
+    await this.service.ready();
 
     const query = this.service.dbUserCollection;
     query.$.pipe(takeUntil(this.componentDestroyed$)).subscribe((docs) => {
@@ -49,7 +49,7 @@ export class HomeComponent implements OnDestroy {
     const dialog = await this.dialogService.open('delete');
     dialog.afterClosed().subscribe(async (shouldDelete) => {
       if (shouldDelete) {
-          await this.service.deleteCalenderByName(this.dbCalendars[index].name);
+        await this.service.deleteCalenderByName(this.dbCalendars[index].name);
       }
     });
   }
@@ -58,7 +58,7 @@ export class HomeComponent implements OnDestroy {
     return Object.keys(calenderObject).map((key) => calenderObject[key]);
   }
 
-  async saveUpdates(calendar:any) {
+  async saveUpdates(calendar: any) {
     await this.service.addORUpdateData(calendar, 'update');
     this.editMode = -1;
   }
@@ -67,4 +67,3 @@ export class HomeComponent implements OnDestroy {
     this.router.navigate(['/seasonal-calendar/calendar-table', { calendarName }]);
   }
 }
- 
\ No newline at end of file
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calender.data.service.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calender.data.service.ts
index 8e558742a..1e3fc0604 100644
--- a/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calender.data.service.ts
+++ b/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calender.data.service.ts
@@ -1,15 +1,18 @@
 import { Injectable } from '@angular/core';
+import { PicsaAsyncService } from '@picsa/shared/services/asyncService.service';
 import { generateID } from '@picsa/shared/services/core/db/db.service';
 import { PicsaDatabase_V2_Service } from '@picsa/shared/services/core/db_v2';
 import { RxCollection, RxDocument } from 'rxdb';
 
-import { CalendarDataEntry,COLLECTION } from '../schema';
+import { CalendarDataEntry, COLLECTION } from '../schema';
 
 @Injectable({
   providedIn: 'root',
 })
-export class SeasonCalenderService {
-  constructor(private dbService: PicsaDatabase_V2_Service) {}
+export class SeasonCalenderService extends PicsaAsyncService {
+  constructor(private dbService: PicsaDatabase_V2_Service) {
+    super();
+  }
 
   /** Provide database options tool collection (with typings) */
   public get dbCollection() {
@@ -21,47 +24,45 @@ export class SeasonCalenderService {
   }
 
   /** Initialise collection required for storing data to database */
-  public async initialise() {
+  public override async init() {
     await this.dbService.ensureCollections({
       seasonal_calender_tool: COLLECTION,
     });
   }
 
-  public async addORUpdateData(calender: any,insertionType:string) {
- ;
-
+  public async addORUpdateData(calender: any, insertionType: string) {
     try {
       //handles instertion and update as long as the name is the same.
       let transformedCalenderData;
-      if(insertionType==='add'){
-       transformedCalenderData = {
-       ID: generateID(),
-        name: calender.name,
-        timeAndConditions: calender.timeAndConditions,
-        crops: calender.crops.map((cropName) => ({
-          name: cropName,
-          months: calender.timeAndConditions.map((monthData) => ({
-            month: monthData.month,
-            activities: [], // Initially empty
+      if (insertionType === 'add') {
+        transformedCalenderData = {
+          ID: generateID(),
+          name: calender.name,
+          timeAndConditions: calender.timeAndConditions,
+          crops: calender.crops.map((cropName) => ({
+            name: cropName,
+            months: calender.timeAndConditions.map((monthData) => ({
+              month: monthData.month,
+              activities: [], // Initially empty
+            })),
+            extraInformation: '',
           })),
-          extraInformation: "",
-        })),
-      };
-     }else{
-      // the table could be used to edit more information about the calender
-      transformedCalenderData = {
-        ID: calender.ID,
-        name: calender.name,
-        crops: calender.crops,
-        timeAndConditions: calender.timeAndConditions
+        };
+      } else {
+        // the table could be used to edit more information about the calender
+        transformedCalenderData = {
+          ID: calender.ID,
+          name: calender.name,
+          crops: calender.crops,
+          timeAndConditions: calender.timeAndConditions,
+        };
       }
-     }
 
       const res = await this.dbCollection.incrementalUpsert(transformedCalenderData);
       console.log('[calender]', res._data);
     } catch (err) {
       alert('Failed to add data, please try again');
-      console.error('calender.submit(): error:');
+      console.error(err);
       throw err;
     }
   }
@@ -71,12 +72,14 @@ export class SeasonCalenderService {
   }
   public async deleteCalenderByName(name: string) {
     try {
-      const calendar = await this.dbCollection.findOne({
-        selector: {
-          name: name,
-        },
-      }).exec();
-  
+      const calendar = await this.dbCollection
+        .findOne({
+          selector: {
+            name: name,
+          },
+        })
+        .exec();
+
       if (calendar) {
         await calendar.remove();
         console.log(`Calendar "${name}" has been deleted.`);
@@ -89,30 +92,25 @@ export class SeasonCalenderService {
     }
   }
 
-  public async getCalenderByName(name: string){
+  public async getCalenderByName(name: string) {
     try {
-      const result = await this.dbCollection.findOne(
-        {
+      const result = await this.dbCollection
+        .findOne({
           selector: {
-            name: name
-          }
-        }
-      ).exec()   
-      const calendar = result?._data
+            name: name,
+          },
+        })
+        .exec();
+      const calendar = result?._data;
       //console.log(calendar)
       if (calendar) {
         return calendar;
       } else {
-        return null; 
+        return null;
       }
     } catch (err) {
       console.error('Failed to get calendar by name:', err);
       throw err;
     }
   }
-
- 
-
 }
-
-