Merge branch 'main' into feat-seasonal-calender

apps/picsa-apps/extension-app-native/android/app/build.gradle

@@ -7,8 +7,8 @@ android {
         applicationId "io.picsa.extension"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 3036002
-        versionName "3.36.2"
+        versionCode 3037003
+        versionName "3.37.3"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

apps/picsa-apps/extension-app/project.json

@@ -64,6 +64,11 @@
             "input": "apps/picsa-tools/climate-tool/src/assets",
             "output": "assets"
           },
+          {
+            "glob": "**/*",
+            "input": "apps/picsa-tools/farmer-activity/src/assets",
+            "output": "assets"
+          },
           {
             "glob": "**/*",
             "input": "apps/picsa-tools/manual-tool/src/assets",

apps/picsa-apps/extension-app/src/app/app-routing.module.ts

@@ -4,6 +4,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { BudgetToolModule } from '@picsa/budget/src/app/app.module-embedded';
 import { ClimateToolModule } from '@picsa/climate/src/app/app.module-embedded';
 import { CropProbabilityToolModule } from '@picsa/crop-probability/src/app/app.module-embedded';
+import { FarmerActivityModule } from '@picsa/farmer-activity/src/app/app.module-embedded';
 import { ManualToolModule } from '@picsa/manual/src/app/app.module-embedded';
 import { MonitoringToolModule } from '@picsa/monitoring/src/app/app.module-embedded';
 import { OptionsToolModule } from '@picsa/option/src/app/app.module-embedded';
@@ -26,6 +27,11 @@ const routes: Routes = [
     loadChildren: () =>
       import('@picsa/crop-probability/src/app/app.module-embedded').then((mod) => mod.CropProbabilityToolModule),
   },
+  {
+    path: 'farmer-activity',
+    loadChildren: () =>
+      import('@picsa/farmer-activity/src/app/app.module-embedded').then((mod) => mod.FarmerActivityModule),
+  },
   {
     path: 'monitoring',
     loadChildren: () => import('@picsa/monitoring/src/app/app.module-embedded').then((mod) => mod.MonitoringToolModule),
@@ -73,6 +79,8 @@ const routes: Routes = [
     OptionsToolModule.forRoot({ urlPrefix: 'option' }),
     ResourcesToolModule.forRoot({ urlPrefix: 'resources' }),
     SeasonalCalendarToolModule.forRoot({ urlPrefix: 'seasonal-calendar' }),
+    // NOTE - the farmer-activity module should be registered last to reuse routes from other tools
+    FarmerActivityModule.forRoot({ urlPrefix: 'farmer-activity' }),
   ],
   exports: [RouterModule],
 })

apps/picsa-apps/extension-app/src/app/material.module.ts

@@ -33,6 +33,7 @@ export class ExtensionToolkitMaterialModule {
       seasonal_calendar_tool: 'seasonal_calendar_tool',
       tutorial: 'tutorial',
       whatsapp: 'whatsapp',
+      farmer_activity: 'farmer_activity',
     };
     for (const [key, value] of Object.entries(icons)) {
       this.matIconRegistry.addSvgIcon(

apps/picsa-apps/extension-app/src/app/pages/home/home.page.ts

@@ -1,10 +1,10 @@
+/* eslint-disable @nx/enforce-module-boundaries */
 import { DomPortal } from '@angular/cdk/portal';
 import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { marker as translateMarker } from '@biesbjerg/ngx-translate-extract-marker';
 import { PicsaCommonComponentsService } from '@picsa/components/src';
 import { APP_VERSION, ENVIRONMENT } from '@picsa/environments';
-// eslint-disable-next-line @nx/enforce-module-boundaries
 import { MonitoringToolService } from '@picsa/monitoring/src/app/services/monitoring-tool.service';
 import { TourService } from '@picsa/shared/services/core/tour.service';
 import { CommunicationService } from '@picsa/shared/services/promptToHomePageService.service';
@@ -29,6 +29,12 @@ const PAGE_LINKS: IPageLink[] = [
     url: '/manual',
     tourId: 'manual',
   },
+  {
+    name: translateMarker('Farmer Activities'),
+    icon: 'picsa_farmer_activity',
+    url: '/farmer-activity',
+    tourId: 'farmer',
+  },
   {
     name: translateMarker('Resources'),
     icon: 'picsa_resources_tool',

apps/picsa-apps/extension-app/src/app/pages/home/home.tour.ts

@@ -24,6 +24,7 @@ export const HOME_TOUR: ITourStep[] = [
   {
     id: 'crop-probability',
     text: 'This is the crop-probability tool. It provides immediate calculations on which crops and varieties have the best chance to succeed, according to regions.',
+    position: 'left',
   },
   {
     id: 'option',

apps/picsa-tools/crop-probability-tool/src/app/components/components.module.ts

@@ -12,7 +12,7 @@ const components = [CropProbabilityStationSelectComponent, CropProbabilityTableC
 
 @NgModule({
   imports: [CommonModule, FormsModule, CropProbabilityMaterialModule, PicsaTranslateModule],
-  exports: components,
+  exports: [...components, CropProbabilityMaterialModule],
   declarations: components,
   providers: [],
 })

apps/picsa-tools/crop-probability-tool/src/app/components/crop-probability-table/crop-probability-table.component.html

@@ -3,7 +3,7 @@
   selectDefault="maize"
   [stationId]="station.id"
   (cropSelected)="filterData($event)"
-  style="padding: 1rem"
+  style="margin: 1rem"
 ></crop-probability-crop-select>
 
 <section class="table-container mat-mdc-table">
@@ -46,11 +46,19 @@
     <!-- This allows for the floating probability section -->
     <ng-container matColumnDef="title-column">
       <th mat-header-cell *matHeaderCellDef [attr.colspan]="4">
-        <h2 style="flex: 1">{{ 'Crop Information' | translate }} - {{ station.station_name }}</h2>
+        <h2 style="flex: 1" data-tour-id="table-title">
+          {{ 'Crop Information' | translate }} - {{ station.station_name }}
+        </h2>
       </th>
     </ng-container>
     <ng-container matColumnDef="season-start-summary-column">
-      <td mat-header-cell *matHeaderCellDef [attr.colspan]="probabilityColumns.length" style="padding: 0">
+      <td
+        mat-header-cell
+        *matHeaderCellDef
+        [attr.colspan]="probabilityColumns.length"
+        style="padding: 0"
+        data-tour-id="season-start"
+      >
         <table #startProbabilities style="table-layout: fixed" class="border-left">
           <tr>
             <td *ngFor="let column of probabilityColumns" class="border-bottom border-top border-right">

apps/picsa-tools/crop-probability-tool/src/app/components/crop-probability-table/crop-probability-table.component.ts

@@ -1,9 +1,9 @@
 import { Component, Input } from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
+import { CROPS_DATA, ICropData } from '@picsa/data';
 import { arrayToHashmap } from '@picsa/utils';
 
-import { CROPS_DATA, ICropData } from '../../data/crops';
 import { IStationCropData, IStationCropDataItem, IStationCropInformation } from '../../models';
 
 @Component({

apps/picsa-tools/crop-probability-tool/src/app/components/crop-select/crop-select.component.html

@@ -1,6 +1,6 @@
 <div ngClass="icons-container">
   <div ngClass="filter-icons" *ngFor="let crop of crops">
-    <div (click)="handleCropSelected(crop.name)" ngClass="icon" [attr.data-selected]="crop.name === selected">
+    <div (click)="handleCropSelected(crop.name)" ngClass="icon" [attr.data-selected]="crop.name === selected" [attr.data-tour-id]="crop.name">
       <mat-icon [svgIcon]="'picsa_crop_' + crop.name"></mat-icon>
       <div ngClass="name">{{ crop.label | translate }}</div>
     </div>

apps/picsa-tools/crop-probability-tool/src/app/components/material.module.ts

@@ -8,12 +8,12 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTableModule } from '@angular/material/table';
 import { DomSanitizer } from '@angular/platform-browser';
-
-import { CROPS_DATA } from '../data/crops';
+import { CROPS_DATA } from '@picsa/data';
 
 const MODULES = [
   MatButtonModule,
   MatInputModule,
+  MatIconModule,
   MatTableModule,
   MatFormFieldModule,
   MatIconModule,

apps/picsa-tools/crop-probability-tool/src/app/components/station-select/station-select.component.html

@@ -1,7 +1,9 @@
 <!-- Station Filter -->
-<mat-form-field style="width: 250px" class="no-hint">
+<mat-form-field style="width: 250px" class="no-hint" data-tour-id="station">
   <mat-label>{{ 'Station' | translate }}</mat-label>
   <mat-select [value]="selectedStationId" (selectionChange)="handleStationChange($event.value)" #stationSelect>
-    <mat-option *ngFor="let station of stations" [value]="station.id">{{ station.station_name }}</mat-option>
+    <mat-option *ngFor="let station of stations" [value]="station.id" [attr.data-tour-id]="station.id">{{
+      station.station_name
+    }}</mat-option>
   </mat-select>
 </mat-form-field>

apps/picsa-tools/crop-probability-tool/src/app/components/station-select/station-select.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { TourService } from '@picsa/shared/services/core/tour.service';
 
 import { STATION_CROP_DATA } from '../../data/mock';
 import { IStationRouteQueryParams } from '../../models';
@@ -14,7 +15,7 @@ export class CropProbabilityStationSelectComponent {
 
   @Input() selectedStationId?: string;
 
-  constructor(private router: Router, private route: ActivatedRoute) {}
+  constructor(private router: Router, private route: ActivatedRoute, private tourService: TourService) {}
 
   /** When station changes update route query params so that parent can handle updates */
   public handleStationChange(stationId: string) {

apps/picsa-tools/crop-probability-tool/src/app/data/tour.ts

@@ -0,0 +1,108 @@
+import { marker as translateMarker } from '@biesbjerg/ngx-translate-extract-marker';
+import type { ITourStep } from '@picsa/shared/services/core/tour.service';
+import { _wait } from '@picsa/utils';
+
+/**
+ * Example tour to select a site from list
+ * Includes route listeners to automatically trigger table tour once table loaded
+ */
+export const CROP_PROBABILITY_SELECT_TOUR: ITourStep[] = [
+  {
+    id: 'station',
+    text: 'Tap here to choose a station',
+
+    tourOptions: {
+      showBullets: false,
+      showButtons: false,
+    },
+    // When user clicks on the station select suspend the tour so that the user can
+    // interact with the select popup
+    clickEvents: {
+      handler: (service) => {
+        service.pauseTour();
+      },
+    },
+    // Resume the tour once the user has navigated to a station
+    routeEvents: {
+      handler: ({ queryParams }, service) => {
+        if (queryParams.stationId) {
+          _wait(500).then(() => {
+            service.startTour(CROP_PROBABILITY_TABLE_TOUR);
+          });
+          return true;
+        }
+        return false;
+      },
+    },
+  },
+];
+
+/**
+ * Example tour to interact with crop probability table
+ * Steps are independent of station select tour to make it easier to handle tables that
+ * will be loaded dynamically
+ */
+export const CROP_PROBABILITY_TABLE_TOUR: ITourStep[] = [
+  {
+    customElement: {
+      selector: 'section.table-container',
+    },
+    text: translateMarker(
+      'In the crop information table, you will be able to see the probabilities for different crops through the different seasons.'
+    ),
+  },
+
+  {
+    id: 'season-start',
+    text: translateMarker(
+      'Crop probabilities depend on when the season starts.\nHere you can see the probabilities of the season starting at different dates'
+    ),
+  },
+  {
+    customElement: {
+      selector: 'tr[mat-header-row]:last-of-type',
+    },
+    text: translateMarker(
+      'Each row contains information about crop, variety, days to maturity and water requirement. Probabilities of receiving requirements are shown for different planting dates'
+    ),
+  },
+  {
+    customElement: {
+      autoScroll: false,
+      selector: 'tbody>tr>td:nth-of-type(2)',
+    },
+    text: translateMarker('Here we can see information for a specific crop variety'),
+  },
+  {
+    customElement: {
+      autoScroll: false,
+      selector: 'tbody>tr>td:nth-of-type(3)',
+    },
+    text: translateMarker('This is the number of days to maturity for the variety'),
+  },
+  {
+    customElement: {
+      autoScroll: false,
+      selector: 'tbody>tr>td:nth-of-type(4)',
+    },
+    text: translateMarker('This is water requirement for the variety'),
+  },
+  {
+    customElement: {
+      autoScroll: false,
+      selector: 'tbody>tr>td:nth-of-type(5)',
+    },
+    text: translateMarker(
+      'The maturity and water requirements can be used to calculate the chance of satisfying these conditions for a specific planting date'
+    ),
+  },
+  {
+    customElement: {
+      selector: 'crop-probability-crop-select',
+    },
+    text: translateMarker('The crop filter shows more information for specific crops'),
+  },
+  {
+    text: translateMarker('Now you are ready to explore the crop information tool'),
+  },
+];

apps/picsa-tools/crop-probability-tool/src/app/pages/home/home.component.html

@@ -1,5 +1,12 @@
-<crop-probability-station-select
-  [selectedStationId]="activeStation?.id"
-  style="padding: 1em"
-></crop-probability-station-select>
+<div style="display: flex; flex-direction: row; align-items: center; justify-content: flex-start">
+  <crop-probability-station-select
+    [selectedStationId]="activeStation?.id"
+    style="padding: 1em; margin-top: 1em"
+    data-tour-id="station-select"
+  ></crop-probability-station-select>
+  <button mat-button class="tour-button" color="primary" (click)="startTour()">
+    <mat-icon class="tour-icon mat-elevation-z4">question_mark</mat-icon>
+    <span>{{ 'Demo' | translate }}</span>
+  </button>
+</div>
 <crop-probability-table [activeStation]="activeStation" *ngIf="activeStation"></crop-probability-table>