Feat seasonal calender

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

@@ -7,6 +7,16 @@ export const ROUTES_COMMON: Routes = [
     loadChildren: () => import('./pages/home/home.module').then((m) => m.HomeModule),
     title: 'Seasonal Calendar',
   },
+  {
+    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: '' }];

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,

apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.html

@@ -0,0 +1,22 @@
+<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>
+

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;
+      }
+    }
+  }
+

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();
+  });
+});

apps/picsa-tools/seasonal-calendar-tool/src/app/components/activities-editor-dialog/activities-editor-dialog.component.ts

@@ -0,0 +1,37 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA,MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'seasonal-calendar-editor-dialog',
+  templateUrl: './activities-editor-dialog.component.html',
+  styleUrls: ['./activities-editor-dialog.component.scss'],
+})
+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();
+  }
+
+
+}

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

@@ -6,10 +6,13 @@ import { RouterModule } from '@angular/router';
 import { PicsaCommonComponentsModule } from '@picsa/components';
 import { PicsaTranslateModule } from '@picsa/shared/modules';
 
+import { ActivitiesEditorDialogComponent } from './activities-editor-dialog/activities-editor-dialog.component';
+import { CropDialogComponent  } from './crop-dialog-component/crop-dialog-component.component';
 // Local components
 import { SeasonalCalendarMaterialModule } from './material.module';
+import { MonthDialogComponent } from './month-editor-dialog/crop-dialog-component.component';
 
-const Components = [];
+const Components = [CropDialogComponent,ActivitiesEditorDialogComponent,MonthDialogComponent];
 
 @NgModule({
   imports: [

apps/picsa-tools/seasonal-calendar-tool/src/app/components/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>

apps/picsa-tools/seasonal-calendar-tool/src/app/components/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;
+    }
+}

apps/picsa-tools/seasonal-calendar-tool/src/app/components/crop-dialog-component/crop-dialog-component.component.spec.ts

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

apps/picsa-tools/seasonal-calendar-tool/src/app/components/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 '../../schema/schema_v0';
+
+@Component({
+  selector: 'seasonal-calendar-dialog-component',
+  templateUrl: './crop-dialog-component.component.html',
+  styleUrls: ['./crop-dialog-component.component.scss'],
+})
+export class CropDialogComponent {
+  editedExtraInformation: string;
+
+  constructor(
+    public dialogRef: MatDialogRef<CropDialogComponent>,
+    @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();
+  }
+}

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({

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" >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>
+    </div>
+</div>

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;
+    }
+}

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();
+  });
+});

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 { MonthData } 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 {
+  weather: string;
+
+  constructor(
+    public dialogRef: MatDialogRef<MonthDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: MonthData
+  ) {
+    this.weather = data.weather;
+  }
+
+  onClose(): void {
+    this.dialogRef.close();
+  }
+
+  onSave(): void {
+    this.data.weather = this.weather;
+    this.dialogRef.close();
+  }
+}