Merge pull request #222 from e-picsa/refactor/seasonal-calendar-data

feat(seasonal-calendar): v2 refactor

.cspell.json

@@ -18,5 +18,5 @@
     "yarn.lock"
   ],
   "words": ["cowpeas", "Chipata", "CLIMWAT", "Cropwat", "e-picsa", "Nkhotakota", "picsa", "sheller", "terciles"],
-  "flagWords": []
+  "flagWords": ["calender"]
 }

.github/pr-labeler.config.yml

@@ -6,20 +6,20 @@
 
 # Tools
 'Tool: Budget':
-  - apps/picsa-apps/budget-tool/**/*
+  - apps/picsa-tools/budget-tool/**/*
 'Tool: Climate':
-  - apps/picsa-apps/climate-tool/**/*
+  - apps/picsa-tools/climate-tool/**/*
 'Tool: Crop Probability':
-  - apps/picsa-apps/crop-probability-tool/**/*
+  - apps/picsa-tools/crop-probability-tool/**/*
 'Tool: Farmer Activity':
-  - apps/picsa-apps/farmer-activity/**/*
+  - apps/picsa-tools/farmer-activity/**/*
 'Tool: Manual':
-  - apps/picsa-apps/manual-tool/**/*
+  - apps/picsa-tools/manual-tool/**/*
 'Tool: Monitoring':
-  - apps/picsa-apps/monitoring-tool/**/*
+  - apps/picsa-tools/monitoring-tool/**/*
 'Tool: Option':
-  - apps/picsa-apps/option-tool/**/*
+  - apps/picsa-tools/option-tool/**/*
 'Tool: Resources':
-  - apps/picsa-apps/resources-tool/**/*
+  - apps/picsa-tools/resources-tool/**/*
 'Tool: Seasonal Calendar':
-  - apps/picsa-apps/seasonal-calendar-tool/**/*
+  - apps/picsa-tools/seasonal-calendar-tool/**/*

apps/picsa-apps/dashboard/src/app/modules/climate-data/climate-data.service.ts

@@ -6,7 +6,7 @@ import { PicsaAsyncService } from '@picsa/shared/services/asyncService.service';
 import { PicsaNotificationService } from '@picsa/shared/services/core/notification.service';
 import { SupabaseService } from '@picsa/shared/services/core/supabase';
 import { IStorageEntry } from '@picsa/shared/services/core/supabase/services/supabase-storage.service';
-import { ngRouterMergedSnapshot$ } from '@picsa/utils';
+import { ngRouterMergedSnapshot$ } from '@picsa/utils/angular';
 
 import { ClimateDataApiService } from './climate-data-api.service';
 

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

@@ -71,6 +71,12 @@ const PAGE_LINKS: IPageLink[] = [
     url: '/option',
     tourId: 'option',
   },
+  {
+    name: translateMarker('Seasonal Calendar'),
+    icon: 'picsa_seasonal_calendar_tool',
+    url: '/seasonal-calendar',
+    tourId: 'seasonal-calendar',
+  },
 
   // {
   //   name: translateMarker('Discussions'),
@@ -86,17 +92,10 @@ const PAGE_LINKS: IPageLink[] = [
 ];
 
 /** Additional links only available when running in non-production */
-const DEV_PAGE_LINKS: IPageLink[] = [
-  {
-    name: translateMarker('Seasonal Calendar'),
-    icon: 'picsa_seasonal_calendar_tool',
-    url: '/seasonal-calendar',
-    tourId: 'seasonal-calendar',
-    devOnly: true,
-  },
-];
+const DEV_PAGE_LINKS: IPageLink[] = [];
 if (!ENVIRONMENT.production) {
   for (const link of DEV_PAGE_LINKS) {
+    link.devOnly = true;
     PAGE_LINKS.push(link);
   }
 }

apps/picsa-tools/budget-tool/src/app/app.module-embedded.ts

@@ -1,7 +1,7 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { Router, RouterModule } from '@angular/router';
 import { PicsaTranslateService } from '@picsa/shared/modules';
-import { registerEmbeddedRoutes } from '@picsa/utils';
+import { registerEmbeddedRoutes } from '@picsa/utils/angular';
 
 import { AppComponentEmbedded } from './app.component';
 import { APP_COMMON_IMPORTS } from './app.module';

apps/picsa-tools/budget-tool/src/app/components/card/budget-card.html

@@ -14,5 +14,5 @@
   class="delete-button"
   (click)="promptCustomDelete($event)"
 >
-  <mat-icon class="delete-button-icon" svgIcon="picsa_delete"></mat-icon>
+  <mat-icon class="delete-button-icon">delete</mat-icon>
 </button>

apps/picsa-tools/budget-tool/src/app/pages/create/budget-create.page.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnIni
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MatStepper } from '@angular/material/stepper';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MONTH_NAMES } from '@picsa/data';
+import { MONTH_DATA } from '@picsa/data';
 import { ANIMATION_DELAYED, FadeInOut } from '@picsa/shared/animations';
 import { map, Subject, switchMap, takeUntil } from 'rxjs';
 
@@ -27,7 +27,7 @@ export class BudgetCreatePage implements OnInit, OnDestroy {
   filteredEnterprises: IBudgetCard[] = [];
   periodScaleOptions: IEnterpriseScaleLentgh[] = ['weeks', 'months'];
   periodTotalOptions = new Array(12).fill(0).map((v, i) => i + 1);
-  periodLabelOptions = [...MONTH_NAMES.map((m) => m.labelShort)];
+  periodLabelOptions = [...MONTH_DATA.map((m) => m.labelShort)];
   enterpriseTypeCards: IBudgetCard[] = [];
   private componentDestroyed$ = new Subject<boolean>();
   @ViewChild('stepper', { static: true }) stepper: MatStepper;

apps/picsa-tools/budget-tool/src/app/store/budget.store.ts

@@ -1,7 +1,7 @@
 import { Injectable, OnDestroy } from '@angular/core';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { ConfigurationService, IConfiguration } from '@picsa/configuration';
-import { MONTH_NAMES } from '@picsa/data';
+import { MONTH_DATA } from '@picsa/data';
 import { APP_VERSION } from '@picsa/environments';
 import { IAppMeta } from '@picsa/models';
 import { PicsaDialogService } from '@picsa/shared/features';
@@ -378,7 +378,7 @@ export class BudgetStore implements OnDestroy {
   // create list of labels depending on scale, total and start, e.g. ['week 1','week 2'] or ['Sep','Oct','Nov']
   private generatePeriodLabels(meta: IBudgetMeta): string[] {
     const { lengthScale, lengthTotal, monthStart = 1 } = meta;
-    const months = MONTH_NAMES.map((m) => m.labelShort);
+    const months = MONTH_DATA.map((m) => m.labelShort);
     if (lengthScale === 'weeks') {
       return new Array(lengthTotal).fill(0).map((_, i) => 'Week ' + (i + 1));
     }

apps/picsa-tools/climate-tool/src/app/app.module-embedded.ts

@@ -1,7 +1,7 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { Router, RouterModule } from '@angular/router';
 import { PicsaTranslateService } from '@picsa/shared/modules';
-import { registerEmbeddedRoutes } from '@picsa/utils';
+import { registerEmbeddedRoutes } from '@picsa/utils/angular';
 
 import { AppComponentEmbedded } from './app.component';
 import { APP_COMMON_IMPORTS } from './app.module';

apps/picsa-tools/climate-tool/src/app/services/climate-chart.service.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { Injectable } from '@angular/core';
-import { MONTH_NAMES } from '@picsa/data';
+import { MONTH_DATA } from '@picsa/data';
 import type { IChartConfig, IChartId, IChartMeta, IStationData, IStationMetaDB } from '@picsa/models';
 import { PicsaChartComponent } from '@picsa/shared/features/charts/chart';
 import { PicsaTranslateService } from '@picsa/shared/modules';
@@ -74,7 +74,7 @@ export class ClimateChartService {
     this.station$.next(station);
     this.stationData = station?.data || [];
     // ensure month names are translated
-    this.monthNames = await this.translateService.translateArray(MONTH_NAMES.map((m) => m.labelShort));
+    this.monthNames = await this.translateService.translateArray(MONTH_DATA.map((m) => m.labelShort));
     return this.station;
   }
 

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

@@ -1,7 +1,7 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { Router, RouterModule } from '@angular/router';
 import { PicsaTranslateService } from '@picsa/shared/modules';
-import { registerEmbeddedRoutes } from '@picsa/utils';
+import { registerEmbeddedRoutes } from '@picsa/utils/angular';
 
 import { AppComponentEmbedded } from './app.component';
 import { APP_COMMON_IMPORTS } from './app.module';

apps/picsa-tools/farmer-activity/src/app/app.module-embedded.ts

@@ -1,7 +1,7 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { Router, RouterModule } from '@angular/router';
 import { PicsaTranslateService } from '@picsa/shared/modules';
-import { registerEmbeddedRoutes } from '@picsa/utils';
+import { registerEmbeddedRoutes } from '@picsa/utils/angular';
 
 import { AppComponentEmbedded } from './app.component';
 import { APP_COMMON_IMPORTS } from './app.module';

apps/picsa-tools/farmer-activity/src/app/data/index.ts

@@ -27,9 +27,9 @@ export const ACTIVITY_DATA: IActivityEntry[] = [
     svgIcon: 'picsa_seasonal_calendar_tool',
     videoId: 'seasonal_calendar',
     id: 'calendar-activity',
-    // tool: {
-    //   url: 'seasonal-calendar',
-    // },
+    tool: {
+      url: 'seasonal-calendar',
+    },
   },
   {
     label: translateMarker('Historic climate'),

apps/picsa-tools/manual-tool/src/app/app.module-embedded.ts

@@ -1,7 +1,7 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { Router, RouterModule } from '@angular/router';
 import { PicsaTranslateService } from '@picsa/shared/modules';
-import { registerEmbeddedRoutes } from '@picsa/utils';
+import { registerEmbeddedRoutes } from '@picsa/utils/angular';
 
 import { AppComponentEmbedded } from './app.component';
 import { APP_COMMON_IMPORTS } from './app.module';

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

@@ -19,7 +19,7 @@ export class ManualToolMaterialModule {
 
   registerIcons() {
     const CUSTOM_ICONS: Record<string, string> = {
-      calender: 'calender',
+      calendar: 'calendar',
       campus: 'campus',
       crop: 'crop',
       livestock: 'livestock',

apps/picsa-tools/manual-tool/src/app/components/stepsContainer/stepsContainer.component.html

@@ -11,7 +11,7 @@ <h2 class="section-label">{{ period.label | translate }}</h2>
       <td style="border-right: none">
         <div class="step-items">
           <div class="step-item" *ngFor="let activity of step.activities">
-            <mat-icon color="primary" svgIcon="{{ activity.svgIcon }}"></mat-icon>
+            <mat-icon color="primary" [svgIcon]="activity.svgIcon"></mat-icon>
             <div class="step-item-label">{{ activity.label }}</div>
           </div>
         </div>

apps/picsa-tools/manual-tool/src/app/data/manual-contents/extension.ts

@@ -52,7 +52,7 @@ export const PICSA_MANUAL_CONTENTS_EXTENSION: IManualPeriodEntry[] = [
           },
           {
             label: translateMarker('Seasonal Calendar'),
-            svgIcon: 'picsa_manual_calender',
+            svgIcon: 'picsa_manual_calendar',
             id: 'calendar-activity',
           },
         ],

apps/picsa-tools/manual-tool/src/app/data/manual-contents/farmer.ts

@@ -37,7 +37,7 @@ export const PICSA_MANUAL_CONTENTS_FARMER: IManualPeriodEntry[] = [
           },
           {
             label: translateMarker('Seasonal Calendar'),
-            svgIcon: 'picsa_manual_calender',
+            svgIcon: 'picsa_manual_calendar',
             id: 'calendar-activity',
           },
         ],

apps/picsa-tools/monitoring-tool/src/app/app.module-embedded.ts

@@ -1,7 +1,7 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { Router, RouterModule } from '@angular/router';
 import { PicsaTranslateService } from '@picsa/shared/modules';
-import { registerEmbeddedRoutes } from '@picsa/utils';
+import { registerEmbeddedRoutes } from '@picsa/utils/angular';
 
 import { AppComponentEmbedded } from './app.component';
 import { APP_COMMON_IMPORTS } from './app.module';

apps/picsa-tools/option-tool/src/app/app.module-embedded.ts

@@ -1,7 +1,7 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { Router, RouterModule } from '@angular/router';
 import { PicsaTranslateService } from '@picsa/shared/modules';
-import { registerEmbeddedRoutes } from '@picsa/utils';
+import { registerEmbeddedRoutes } from '@picsa/utils/angular';
 
 import { AppComponentEmbedded } from './app.component';
 import { APP_COMMON_IMPORTS } from './app.module';

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

@@ -7,7 +7,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatStepperModule } from '@angular/material/stepper';
 import { MatTableModule } from '@angular/material/table';
 import { DomSanitizer } from '@angular/platform-browser';
-import { DataIconRegistry } from '@picsa/data';
+import { DataIconRegistry } from '@picsa/data/iconRegistry';
 
 const COMPONENTS = [MatButtonModule, MatDialogModule, MatIconModule, MatSelectModule, MatStepperModule, MatTableModule];
 // use custom module to make it easier to control what is available through app

apps/picsa-tools/resources-tool/src/app/app.module-embedded.ts

@@ -1,7 +1,7 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { Router, RouterModule } from '@angular/router';
 import { PicsaTranslateService } from '@picsa/shared/modules';
-import { registerEmbeddedRoutes } from '@picsa/utils';
+import { registerEmbeddedRoutes } from '@picsa/utils/angular';
 
 import { AppComponentEmbedded } from './app.component';
 import { APP_COMMON_IMPORTS } from './app.module';

apps/picsa-tools/resources-tool/src/app/pages/downloads/downloads.page.html

@@ -1,47 +1,49 @@
-<table mat-table matSort [dataSource]="fileResourceDocs" class="mat-elevation-z8">
-  <ng-container matColumnDef="mimetype">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'Type' | translate }}</th>
-    <td mat-cell *matCellDef="let doc">
-      <ng-container [ngSwitch]="doc._data.subtype">
-        <mat-icon *ngSwitchCase="'pdf'" svgIcon="picsa_filetype_pdf"></mat-icon>
-        <mat-icon *ngSwitchCase="'video'" svgIcon="picsa_filetype_video"></mat-icon>
-        <mat-icon *ngSwitchDefault svgIcon="picsa_filetype_document"></mat-icon>
-      </ng-container>
-    </td>
-  </ng-container>
+<div class="page-content">
+  <table mat-table matSort [dataSource]="fileResourceDocs" class="mat-elevation-z8">
+    <ng-container matColumnDef="mimetype">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'Type' | translate }}</th>
+      <td mat-cell *matCellDef="let doc">
+        <ng-container [ngSwitch]="doc._data.subtype">
+          <mat-icon *ngSwitchCase="'pdf'" svgIcon="picsa_filetype_pdf"></mat-icon>
+          <mat-icon *ngSwitchCase="'video'" svgIcon="picsa_filetype_video"></mat-icon>
+          <mat-icon *ngSwitchDefault svgIcon="picsa_filetype_document"></mat-icon>
+        </ng-container>
+      </td>
+    </ng-container>
 
-  <ng-container matColumnDef="title">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'Title' | translate }}</th>
-    <td mat-cell *matCellDef="let doc">{{ doc._data.title }}</td>
-  </ng-container>
+    <ng-container matColumnDef="title">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'Title' | translate }}</th>
+      <td mat-cell *matCellDef="let doc">{{ doc._data.title }}</td>
+    </ng-container>
 
-  <ng-container matColumnDef="size_kb">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'Size' | translate }}</th>
-    <td mat-cell *matCellDef="let doc">{{ doc._data.size_kb | sizeMB }}MB</td>
-  </ng-container>
+    <ng-container matColumnDef="size_kb">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'Size' | translate }}</th>
+      <td mat-cell *matCellDef="let doc">{{ doc._data.size_kb | sizeMB }}MB</td>
+    </ng-container>
 
-  <ng-container matColumnDef="download_button">
-    <th mat-header-cell *matHeaderCellDef class="icon-column"></th>
-    <td mat-cell *matCellDef="let doc" class="icon-column">
-      <resource-download [dbDoc]="doc"></resource-download>
-    </td>
-  </ng-container>
+    <ng-container matColumnDef="download_button">
+      <th mat-header-cell *matHeaderCellDef class="icon-column"></th>
+      <td mat-cell *matCellDef="let doc" class="icon-column">
+        <resource-download [dbDoc]="doc"></resource-download>
+      </td>
+    </ng-container>
 
-  <ng-container matColumnDef="menu_options">
-    <th mat-header-cell *matHeaderCellDef class="icon-column"></th>
-    <td mat-cell *matCellDef="let resource" class="icon-column">
-      <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="more options">
-        <mat-icon>more_vert</mat-icon>
-      </button>
-      <mat-menu #menu="matMenu">
-        <button mat-menu-item (click)="deleteDownload(resource)">
-          <mat-icon>delete</mat-icon>
-          <span>Delete</span>
+    <ng-container matColumnDef="menu_options">
+      <th mat-header-cell *matHeaderCellDef class="icon-column"></th>
+      <td mat-cell *matCellDef="let resource" class="icon-column">
+        <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="more options">
+          <mat-icon>more_vert</mat-icon>
         </button>
-      </mat-menu>
-    </td>
-  </ng-container>
+        <mat-menu #menu="matMenu">
+          <button mat-menu-item (click)="deleteDownload(resource)">
+            <mat-icon>delete</mat-icon>
+            <span>Delete</span>
+          </button>
+        </mat-menu>
+      </td>
+    </ng-container>
 
-  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-</table>
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+  </table>
+</div>