enable translation in seasonal calender

apps/picsa-tools/seasonal-calendar-tool/project.json

@@ -17,7 +17,12 @@
         "tsConfig": "apps/picsa-tools/seasonal-calendar-tool/tsconfig.app.json",
         "assets": [
           "apps/picsa-tools/seasonal-calendar-tool/src/favicon.ico",
-          "apps/picsa-tools/seasonal-calendar-tool/src/assets"
+          "apps/picsa-tools/seasonal-calendar-tool/src/assets",
+          {
+            "glob": "*.json",
+            "input": "libs/i18n/assets",
+            "output": "assets/i18n"
+          }
         ],
         "styles": ["apps/picsa-tools/seasonal-calendar-tool/src/styles.scss", "libs/theme/src/_index.scss"],
         "scripts": []

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

@@ -1,22 +1,22 @@
 <div class="table-container">
-    <h2 class="dialog-title">Add Activity</h2>
+    <h2 class="dialog-title">{{'Add Activity' | translate}}</h2>
     <div class="dialog-body">
       <mat-form-field>
-        <mat-label>Select Activity</mat-label>
+        <mat-label>{{'Select Activity' | translate}}</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>
+        <h4>{{'Type other activity' | translate}}</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>
+      <button mat-button class="add-button" (click)="onSave()" [mat-dialog-close]="selectedActivity || customActivity" [disabled]="!(selectedActivity || customActivity)">{{'Add' | translate}}</button>
+      <button mat-button class="cancel-button" (click)="onClose()">{{'Cancel' | translate}}</button>
     </div>
 </div>
 

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

@@ -1,9 +1,9 @@
 <div class="dialog-container">
-    <h2 class="dialog-container" >{{ data.name }} Extra information</h2>
+    <h2 class="dialog-container" >{{ data.name }} {{'Extra information' | translate}}</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>
+        <button mat-button (click)="onSave()">{{'Save'|translate}}</button>
+        <button mat-button (click)="onClose()">{{'Close'|translate}}</button>
     </div>
 </div>

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

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

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

@@ -1,9 +1,9 @@
 <div class="dialog-container">
-    <h2 class="dialog-container" >Edit {{ data.month }} weather condition</h2>
+    <h2 class="dialog-container" >{{ 'Edit' | translate }} {{ data.month }} {{'weather condition' | translate}}</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>
+        <button mat-button (click)="onSave()">{{'Save' | translate}}</button>
+        <button mat-button (click)="onClose()">{{'Close' | translate}}</button>
     </div>
 </div>

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>
+      color="primary">{{'Save' | translate}}</button>
   </div>
   <table class="calendar-table">
     <thead>
@@ -10,13 +10,12 @@ <h1>{{calendarData?.name}}</h1> <button class="" mat-button mat-raised-button (c
         <th *ngFor="let month of calendarData.timeAndConditions">
           <div class="y-axis-header">
             <div (click)="openMonthHeading(month)">
-              {{ month.month }} <br />
-              ( {{ month.weather }})
+              {{ month.month | translate }} <br />
+              ( {{ month.weather  | translate}})
             </div>
             <mat-icon (click)="deleteMonth(month.month)" class="custom-trash-icon">delete</mat-icon>
           </div>
         </th>
-
       </tr>
     </thead>
     <tbody>

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

@@ -17,7 +17,7 @@ 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'];
+  // crops: string[] = ['Maize', 'Beans', 'Peas'];
   selectedCrop = '';
   customCrop = '';
   showCropAdder = false;

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

@@ -1,15 +1,15 @@
 <div class="container">
-  <h2>Crops Seasonal calender</h2>
+  <h2>{{'Crops Seasonal calender' | translate }}</h2>
   <div class="box">
-    <h2>Calender name</h2>
-    <input class="inputField"  [(ngModel)]="calenderTitle"  placeholder="Season of 85" />
+    <h2>{{'Calender name' | translate}}</h2>
+    <input class="inputField"  [(ngModel)]="calenderTitle"  placeholder={{Season of 85}} />
     <seasonal-calendar-error-display [displayError]="showMessageFlag && calenderTitle===''" errorMsg="Please add the calender title">
     </seasonal-calendar-error-display>
   </div>
 
   <!-- Crops -->
   <div class="box">
-    <h2>Season Crops</h2>
+    <h2>{{"Season Crops" | translate}}</h2>
     <div class="select-box">
       <div class="select-input-field">
         <picsa-form-crop-select [(ngModel)]="userCrops"></picsa-form-crop-select>
@@ -21,13 +21,13 @@ <h2>Season Crops</h2>
 
   <!-- Calendar Time -->
   <div>
-    <h2>Calendar Time</h2>
+    <h2>{{'Calendar Time' | translate}}</h2>
     <div class="calender-box">
       <div>
       <div class="form-group">
-        <label for="startMonth">Start Month:</label>
+        <label for="startMonth">{{'Start Month '| translate}} :</label>
         <select  id="startMonth" [(ngModel)]="startMonth">
-          <option value="" disabled selected>Select start month</option>
+          <option value="" disabled selected>{{'Select start month' | translate}}</option>
           <option *ngFor="let month of months" [value]="month">{{ month }}</option>
         </select>
       </div>
@@ -36,7 +36,7 @@ <h2>Calendar Time</h2>
     </div>
     <div>
       <div class="form-group">
-        <label for="numberOfMonths">Number of Months Needed:</label>
+        <label for="numberOfMonths">{{ 'Number of Months Needed' | translate }}:</label>
         <input type="number" class="inputField" id="numberOfMonths" [(ngModel)]="numMonths" />
       </div>
       <seasonal-calendar-error-display [displayError]="showMessageFlag && numMonths <1 " errorMsg="Please enter the required number of months">
@@ -46,17 +46,17 @@ <h2>Calendar Time</h2>
     <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>{{ monthData.month | translate }}</div>
         <div>
           <input placeholder="wet,dry..." type="text" class="inputField" [(ngModel)]="monthData.weather" />
         </div>
       </div>
     </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 '| translate }}</button>
   </div>
   <div class="flag-message" *ngIf="showMessageFlag">
-    <p>{{ message }}</p>
+    <p>{{ message | translate }}</p>
   </div>
 </div>

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

@@ -1,5 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { PicsaTranslateService } from '@picsa/shared/modules';
 
 import { SeasonCalenderService } from './../../services/calender.data.service';
 
@@ -11,7 +12,7 @@ import { SeasonCalenderService } from './../../services/calender.data.service';
 export class CreateCalendarComponent implements OnInit {
   data;
 
-  constructor(private router: Router, private service: SeasonCalenderService) {
+  constructor(private router: Router, private service: SeasonCalenderService, translateService:PicsaTranslateService) {
     this.generateCalendarMonths();
     this.data = this.router?.getCurrentNavigation()?.extras?.state;
     //console.log(this.data);

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

@@ -1,14 +1,14 @@
 <div class="page-content">
   <div class="create-button">
-    <button mat-raised-button routerLink="create" color="primary">Create new calender</button>
+    <button class="" mat-button mat-raised-button  routerLink="create" color="primary">{{ 'Create new calender' | translate}}</button> 
   </div>
-  <h2>Categories</h2>
+  <h2>{{ 'Categories' | translate }}</h2>
   <div class="categories-list">
-    <div class="categories-item">Crops</div>
+    <div class="categories-item">{{'Crops' | translate }}</div>
   </div>
-  <h2>Calendar Lists</h2>
+  <h2>{{'Calendar Lists' | translate}}</h2>
   <div class="calendar-list">
-    <div class="feedbackMessage" *ngIf="dbCalendars.length === 0">No available calendars</div>
+    <div class="feedbackMessage" *ngIf="dbCalendars.length === 0">{{ 'No available calendars' | translate}}</div>
     <!-- map calenders -->
     <div *ngIf="dbCalendars.length > 0" class="items-container">
       <div *ngFor="let calendar of dbCalendars; let i = index" class="calendars-display">
@@ -20,23 +20,18 @@ <h2>Calendar Lists</h2>
             <input class="inputField" type="text" [(ngModel)]="calendar.name" />
           </ng-template>
         </div>
-        <div class="actions-section">
-          <div>
-            <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>
+        <ng-template #editField>
+          <input class="inputField"  type="text" [(ngModel)]="calendar.name"  />
+        </ng-template>
+
+      <div class="actions-section">
+        <div >
+          <button *ngIf="editMode===i"  (click)="saveUpdates(calendar)"  class="" mat-button mat-raised-button color="primary">{{'Save'| translate}}</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>
     </div>
+    </div>
   </div>
 </div>

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

@@ -1,13 +1,14 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { PicsaTranslateModule } from '@picsa/shared/modules/translate';
 
 import { SeasonalCalendarToolComponentsModule } from '../../components/components.module';
 import { HomeComponent } from './home.component';
 import { HomeRoutingModule } from './home.routing.module';
 
 @NgModule({
   declarations: [HomeComponent],
-  imports: [CommonModule, HomeRoutingModule, SeasonalCalendarToolComponentsModule,FormsModule ],
+  imports: [CommonModule, HomeRoutingModule, SeasonalCalendarToolComponentsModule,FormsModule,PicsaTranslateModule ],
 })
 export class HomeModule {}