Merge pull request #225 from e-picsa/refactor/crop-data

Refactor: shared icons and data

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

@@ -54,11 +54,9 @@
             "input": "apps/picsa-tools/budget-tool/src/assets",
             "output": "assets"
           },
-          {
-            "glob": "**/*",
-            "input": "libs/shared-assets/svgs/crops/",
-            "output": "assets/budget-cards/"
-          },
+
+          { "glob": "*.svg", "input": "libs/data/crops/svgs", "output": "assets/budget-cards" },
+          { "glob": "*.svg", "input": "libs/data/crops/svgs", "output": "assets/svgs/crops" },
           { "glob": "*.svg", "input": "libs/data/weather/svgs", "output": "assets/svgs/weather" },
           { "glob": "*.svg", "input": "libs/data/crop_activity/svgs", "output": "assets/svgs/crop_activity" },
           {

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

@@ -19,29 +19,29 @@ export class ExtensionToolkitMaterialModule {
     this.registerIcons();
   }
   registerIcons() {
-    const icons = {
+    const icons = [
       // TODO - climate and budget icons should register in lazy-loaded material module
-      budget_tool: 'budget_tool',
-      climate_tool: 'climate_tool',
-      data_collection: 'data_collection',
-      discussions: 'discussions',
-      manual_tool: 'manual_tool',
-      option_tool: 'option_tool',
-      play_store: 'play_store',
-      probability_tool: 'probability_tool',
-      resources_tool: 'resources_tool',
-      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(
-        `picsa_${key}`,
-        this.domSanitizer.bypassSecurityTrustResourceUrl(
-          // NOTE - svgs are imported from shared lib (see angular.json for config)
-          `assets/svgs/${value}.svg`
-        )
+      'budget_tool',
+      'climate_tool',
+      'data_collection',
+      'discussions',
+      'manual_tool',
+      'option_tool',
+      'play_store',
+      'probability_tool',
+      'resources_tool',
+      'seasonal_calendar_tool',
+      'tutorial',
+      'whatsapp',
+      'farmer_activity',
+    ];
+
+    for (const icon of icons) {
+      // NOTE - svgs are imported from shared lib (see angular.json for config)
+      this.matIconRegistry.addSvgIconInNamespace(
+        'extension_app',
+        icon,
+        this.domSanitizer.bypassSecurityTrustResourceUrl(`assets/svgs/${icon}.svg`)
       );
     }
   }

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

@@ -13,7 +13,7 @@
       (click)="linkClicked(link)"
     >
       <div style="text-align: center">
-        <mat-icon [svgIcon]="link.icon" class="nav-icon"></mat-icon>
+        <mat-icon [svgIcon]="link.svgIcon" class="nav-icon"></mat-icon>
         <div class="nav-text">{{ link.name | translate }}</div>
       </div>
       @if (link.tourId==='monitoring' && monitoringService.pendingSyncCount>0) {
@@ -23,7 +23,7 @@
     }
     <div class="grid-tile" (click)="startTour()" style="position: relative">
       <div style="text-align: center">
-        <mat-icon svgIcon="picsa_tutorial" class="nav-icon"></mat-icon>
+        <mat-icon svgIcon="extension_app:tutorial" class="nav-icon"></mat-icon>
         <div class="nav-text">{{ 'Take App Tour' | translate }}</div>
       </div>
     </div>

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

@@ -14,7 +14,7 @@ import { HOME_TOUR } from './home.tour';
 
 interface IPageLink {
   name: string;
-  icon: string;
+  svgIcon: string;
   url: string;
   /** Element ID used in tours */
   tourId: string;
@@ -25,68 +25,68 @@ interface IPageLink {
 const PAGE_LINKS: IPageLink[] = [
   {
     name: translateMarker('Manual'),
-    icon: 'picsa_manual_tool',
+    svgIcon: 'extension_app:manual_tool',
     url: '/manual',
     tourId: 'manual',
   },
   {
     name: translateMarker('Farmer Activities'),
-    icon: 'picsa_farmer_activity',
+    svgIcon: 'extension_app:farmer_activity',
     url: '/farmer-activity',
     tourId: 'farmer',
   },
   {
     name: translateMarker('Resources'),
-    icon: 'picsa_resources_tool',
+    svgIcon: 'extension_app:resources_tool',
     url: '/resources',
     tourId: 'resources',
   },
   {
     name: translateMarker('Monitoring'),
-    icon: 'picsa_data_collection',
+    svgIcon: 'extension_app:data_collection',
     url: '/monitoring',
     tourId: 'monitoring',
   },
   {
     name: translateMarker('Climate'),
-    icon: 'picsa_climate_tool',
+    svgIcon: 'extension_app:climate_tool',
     url: '/climate',
     tourId: 'climate',
   },
   {
     name: translateMarker('Budget'),
-    icon: 'picsa_budget_tool',
+    svgIcon: 'extension_app:budget_tool',
     url: '/budget',
     tourId: 'budget',
   },
   {
     name: translateMarker('Probability'),
-    icon: 'picsa_probability_tool',
+    svgIcon: 'extension_app:probability_tool',
     url: '/crop-probability',
     tourId: 'crop-probability',
   },
   {
     name: translateMarker('Options'),
-    icon: 'picsa_option_tool',
+    svgIcon: 'extension_app:option_tool',
     url: '/option',
     tourId: 'option',
   },
   {
     name: translateMarker('Seasonal Calendar'),
-    icon: 'picsa_seasonal_calendar_tool',
+    svgIcon: 'extension_app:seasonal_calendar_tool',
     url: '/seasonal-calendar',
     tourId: 'seasonal-calendar',
   },
 
   // {
   //   name: translateMarker('Discussions'),
-  //   icon: 'picsa_discussions',
+  //   svgIcon: 'picsa_discussions',
   //   url: '/discussions',
   // },
 
   // {
   //   name: 'Settings',
-  //   icon: 'picsa_settings',
+  //   svgIcon: 'picsa_settings',
   //   url: '/settings'
   // }
 ];

apps/picsa-tools/budget-tool/project.json

@@ -27,7 +27,7 @@
           "apps/picsa-tools/budget-tool/src/assets",
           {
             "glob": "**/*",
-            "input": "libs/shared-assets/svgs/crops/",
+            "input": "libs/data/crops/svgs/",
             "output": "assets/budget-cards/"
           }
         ],

apps/picsa-tools/budget-tool/src/app/data/cards.ts

@@ -1,6 +1,7 @@
 import type { IBudgetCard } from '../schema/cards';
 
 // This data is automatically populated on first load and update from live when available
+// TODO - migrate to use svgIcon property and existing iconsets, e.g. `svgIcon: picsa_crop:maize`
 export const BUDGET_CARDS: IBudgetCard[] = [
   {
     type: 'activities',

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

@@ -8,11 +8,9 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
-import { MatIconRegistry } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import { DomSanitizer } from '@angular/platform-browser';
 
 // also other deps from: https://material.angular.io/guide/getting-started
 // https://github.com/angular/components/issues/4278 and also load in app.module.ts
@@ -37,25 +35,5 @@ const modules = [
   exports: modules,
 })
 export class PicsaClimateMaterialModule {
-  constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer) {
-    this.registerIcons();
-  }
-
-  registerIcons() {
-    const CLIMATE_ICONS = {
-      station: 'station',
-      chart: 'chart',
-      download: 'download',
-      controls: 'controls',
-    };
-    for (const [key, value] of Object.entries(CLIMATE_ICONS)) {
-      this.matIconRegistry.addSvgIcon(
-        `picsa_${key}`,
-        this.domSanitizer.bypassSecurityTrustResourceUrl(
-          // NOTE - svgs are imported from shared lib (see angular.json for config)
-          `assets/images/${value}.svg`
-        )
-      );
-    }
-  }
+  constructor() {}
 }

apps/picsa-tools/crop-probability-tool/project.json

@@ -17,12 +17,7 @@
         "inlineStyleLanguage": "scss",
         "assets": [
           "apps/picsa-tools/crop-probability-tool/src/favicon.ico",
-          "apps/picsa-tools/crop-probability-tool/src/assets",
-          {
-            "glob": "**/*",
-            "input": "libs/shared-assets/svgs/crops/",
-            "output": "assets/svgs/crops/"
-          }
+          "apps/picsa-tools/crop-probability-tool/src/assets"
         ],
         "styles": ["apps/picsa-tools/crop-probability-tool/src/styles.scss", "libs/theme/src/_index.scss"],
         "scripts": []

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

@@ -1,5 +1,5 @@
 <crop-probability-crop-select
-  [crops]="cropIcons"
+  [options]="cropOptions"
   selectDefault="maize"
   [stationId]="station.id"
   (cropSelected)="filterData($event)"

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

@@ -20,7 +20,7 @@ export class CropProbabilityTableComponent {
   public dataSource: MatTableDataSource<ITableRow>;
   public station: IStationCropInformation;
   public selectedCropName?: string;
-  public cropIcons: ICropData[] = [];
+  public cropOptions: ICropData[] = [];
 
   private tableData: ITableRow[] = [];
 
@@ -42,7 +42,7 @@ export class CropProbabilityTableComponent {
     const dataSource = new MatTableDataSource(this.tableData);
     // apply custom filter to avoid partial matches (e.g. soya-beans matching beans)
     dataSource.filterPredicate = (data, filter) => data.crop.toLowerCase() === filter;
-    this.cropIcons = this.generateCropFilters(this.station.station_data);
+    this.cropOptions = this.generateCropFilters(this.station.station_data);
     if (cropName) {
       dataSource.filter = cropName.toLowerCase();
     }

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

@@ -1,7 +1,12 @@
 <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" [attr.data-tour-id]="crop.name">
-      <mat-icon [svgIcon]="'picsa_crop_' + crop.name"></mat-icon>
+  <div ngClass="filter-icons" *ngFor="let crop of options">
+    <div
+      (click)="handleCropSelected(crop.name)"
+      ngClass="icon"
+      [attr.data-selected]="crop.name === selected"
+      [attr.data-tour-id]="crop.name"
+    >
+      <mat-icon [svgIcon]="'picsa_crops:' + crop.svgIcon"></mat-icon>
       <div ngClass="name">{{ crop.label | translate }}</div>
     </div>
   </div>

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

@@ -1,14 +1,13 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-
-import { ICropData } from '../../data/crops';
+import { ICropData } from '@picsa/data/crops';
 
 @Component({
   selector: 'crop-probability-crop-select',
   templateUrl: './crop-select.component.html',
   styleUrls: ['./crop-select.component.scss'],
 })
 export class CropSelectComponent implements OnInit {
-  @Input() crops: ICropData[];
+  @Input() options: ICropData[];
 
   /** Default crop to select on init */
   @Input() selectDefault: string;
@@ -24,7 +23,6 @@ export class CropSelectComponent implements OnInit {
   public selected = '';
 
   ngOnInit(): void {
-    console.log('hello crop select', this.selectDefault);
     if (this.selectDefault) {
       this.handleCropSelected(this.selectDefault);
     }

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

@@ -3,12 +3,10 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
 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 '@picsa/data';
 
 const MODULES = [
   MatButtonModule,
@@ -27,15 +25,4 @@ const MODULES = [
   imports: MODULES,
   exports: MODULES,
 })
-export class CropProbabilityMaterialModule {
-  constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer) {
-    this.registerIcons();
-  }
-
-  registerIcons() {
-    for (const { icon, name } of Object.values(CROPS_DATA)) {
-      const iconUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(icon);
-      this.matIconRegistry.addSvgIcon(`picsa_crop_${name}`, iconUrl);
-    }
-  }
-}
+export class CropProbabilityMaterialModule {}

apps/picsa-tools/crop-probability-tool/src/app/models/index.ts

@@ -1,4 +1,4 @@
-import type { ICropName } from '../data/crops';
+import { ICropName } from '@picsa/data';
 
 export interface IStationCropInformation {
   id: string;

apps/picsa-tools/crop-probability-tool/src/assets/svgs/crops/README.md

@@ -1,2 +1,2 @@
-Assets will be populated here from the `libs/shared-assets` folder
+Assets will be populated here from the `libs/data` folder
 See code in tool project.json for assets copied