Merge pull request #329 from e-picsa/feat/farmer-content-improvements

Feat: farmer content improvements
e-picsa · Oct 1, 2024 · 9be7e1c · 9be7e1c
2 parents 100c29f + cb4b1c1
commit 9be7e1c
Show file tree

Hide file tree

Showing 68 changed files with 917 additions and 503 deletions.
diff --git a/.gitignore b/.gitignore
@@ -23,6 +23,7 @@ node_modules
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
+!.vscode/tailwind.json
 
 # misc
 /.sass-cache
@@ -58,6 +59,7 @@ libs/**/*.ngsummary.json
 libs/environments/environment.prod.ts
 libs/environments/firebase/config.prod.ts
 
+!libs/theme/src/tailwind.config.js
 !libs/webcomponents/**
 
 # map tiles   

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -13,5 +13,6 @@
   ],
   "deno.unstable": true,
   "deno.config": "apps/picsa-server/supabase/functions/deno.jsonc",
-  "angular.enable-strict-mode-prompt": false
+  "angular.enable-strict-mode-prompt": false,
+  "css.customData": [".vscode/tailwind.json"]
 }
diff --git a/.vscode/tailwind.json b/.vscode/tailwind.json
@@ -0,0 +1,55 @@
+{
+  "version": 1.1,
+  "atDirectives": [
+    {
+      "name": "@tailwind",
+      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+        }
+      ]
+    },
+    {
+      "name": "@apply",
+      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+        }
+      ]
+    },
+    {
+      "name": "@responsive",
+      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+        }
+      ]
+    },
+    {
+      "name": "@screen",
+      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+        }
+      ]
+    },
+    {
+      "name": "@variants",
+      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+        }
+      ]
+    }
+  ]
+}
diff --git a/apps/picsa-apps/extension-app-native/android/.idea/misc.xml b/apps/picsa-apps/extension-app-native/android/.idea/misc.xml
diff --git a/apps/picsa-apps/extension-app-native/android/app/build.gradle b/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 3045000
-        versionName "3.45.0"
+        versionCode 3046000
+        versionName "3.46.0"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

diff --git a/apps/picsa-apps/extension-app-native/capacitor.config.ts b/apps/picsa-apps/extension-app-native/capacitor.config.ts
@@ -5,6 +5,7 @@ const config: CapacitorConfig = {
   appName: 'PICSA Extension',
   webDir: '../../../dist/apps/picsa-apps/extension-app',
   bundledWebRuntime: false,
+  zoomEnabled:true,
   // manually include plugins here as top-level package.json not checked correctly
   // note - see which plugins are detected via `npx cap ls`
   includePlugins: [

diff --git a/apps/picsa-apps/extension-app-native/project.json b/apps/picsa-apps/extension-app-native/project.json
@@ -21,6 +21,7 @@
       "executor": "nx:run-commands",
       "description": "Serve extension app in external mode to support live-reload",
       "dependsOn": ["^build"],
+      "inputs": ["{projectRoot}/capacitor.config.ts","{projectRoot}/.env.local"],
       "options": {
         "commands": ["npx cap sync && nx run picsa-apps-extension-app:serve --configuration=external"],
         "cwd": "apps/picsa-apps/extension-app-native",

diff --git a/apps/picsa-apps/extension-app/src/app/components/layout.html b/apps/picsa-apps/extension-app/src/app/components/layout.html
@@ -30,15 +30,7 @@
   </mat-drawer>
   <mat-drawer-content>
     <div class="page">
-      <picsa-header>
-        @if(showMenuButton()){
-        <button id="menuButton" mat-icon-button (click)="drawer.toggle()" class="menu-button">
-          <mat-icon id="menuIcon">menu</mat-icon>
-        </button>
-        <!-- NOTE - back button currently handled in header itself -->
-
-        }
-      </picsa-header>
+      <picsa-header> </picsa-header>
       @if(ready){
       <router-outlet></router-outlet>
       }
@@ -51,3 +43,12 @@
     }
   </mat-drawer-content>
 </mat-drawer-container>
+
+<!-- Inject menu toggle into global header when enabled -->
+<ng-template #menuButtonTemplate>
+  @if(showMenuButton()){
+  <button id="menuButton" mat-icon-button (click)="drawer.toggle()" class="menu-button">
+    <mat-icon id="menuIcon">menu</mat-icon>
+  </button>
+  }
+</ng-template>
diff --git a/apps/picsa-apps/extension-app/src/app/components/layout.ts b/apps/picsa-apps/extension-app/src/app/components/layout.ts
@@ -1,12 +1,13 @@
+import { TemplatePortal } from '@angular/cdk/portal';
 import { CommonModule } from '@angular/common';
-import { Component, computed, Input, viewChild } from '@angular/core';
+import { Component, computed, effect, Input, TemplateRef, viewChild, ViewContainerRef } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListItem, MatNavList } from '@angular/material/list';
 import { MatDrawer, MatSidenavModule } from '@angular/material/sidenav';
 import { NavigationEnd, Router, RouterModule, RouterOutlet } from '@angular/router';
-import { PicsaCommonComponentsModule } from '@picsa/components';
+import { PicsaCommonComponentsModule, PicsaCommonComponentsService } from '@picsa/components';
 import { ConfigurationService } from '@picsa/configuration/src';
 import { APP_VERSION } from '@picsa/environments';
 import { PicsaLoadingComponent } from '@picsa/shared/features/loading/loading';
@@ -35,6 +36,7 @@ import { filter, map } from 'rxjs';
 export class AppLayoutComponent {
   @Input() showLoader: boolean;
   @Input() ready: boolean;
+  menuButtonTemplate = viewChild.required<TemplateRef<HTMLElement>>('menuButtonTemplate');
   public drawer = viewChild.required(MatDrawer);
   public showMenuButton = toSignal(
     this.router.events.pipe(
@@ -46,7 +48,31 @@ export class AppLayoutComponent {
   public userType = computed(() => this.configurationService.userSettings().user_type);
   public version = APP_VERSION;
 
-  constructor(private router: Router, private configurationService: ConfigurationService) {}
+  constructor(
+    private router: Router,
+    private configurationService: ConfigurationService,
+    componentService: PicsaCommonComponentsService,
+    viewContainer: ViewContainerRef
+  ) {
+    effect(
+      () => {
+        // Inject menu button into global header when on farmer or extension home
+        const { cdkPortalStart } = componentService.headerOptions();
+        if (this.showMenuButton()) {
+          if (!cdkPortalStart) {
+            componentService.patchHeader({
+              cdkPortalStart: new TemplatePortal(this.menuButtonTemplate(), viewContainer),
+            });
+          }
+        } else {
+          if (cdkPortalStart) {
+            componentService.patchHeader({ cdkPortalStart: undefined });
+          }
+        }
+      },
+      { allowSignalWrites: true }
+    );
+  }
 
   public toggleUserType() {
     const targetType = this.userType() === 'extension' ? 'farmer' : 'extension';

diff --git a/apps/picsa-apps/extension-app/tailwind.config.js b/apps/picsa-apps/extension-app/tailwind.config.js
@@ -0,0 +1,3 @@
+const generateSharedTailwindConfig = require('../../../libs/theme/src/tailwind.config');
+
+module.exports = generateSharedTailwindConfig(__dirname);
diff --git a/apps/picsa-tools/budget-tool/src/app/components/card/budget-card.scss b/apps/picsa-tools/budget-tool/src/app/components/card/budget-card.scss
@@ -1,5 +1,4 @@
 :host {
-  margin: 10px;
   display: inline-block;
   cursor: pointer;
   text-align: center;
@@ -9,7 +8,7 @@
 }
 
 mat-card.budget-card {
-  width: 110px;
+  width: 100px;
   padding: 0;
 }
 

diff --git a/apps/picsa-tools/budget-tool/src/app/components/card/card-new/card-new-dialog.scss b/apps/picsa-tools/budget-tool/src/app/components/card/card-new/card-new-dialog.scss
@@ -2,7 +2,7 @@
   display: block;
 }
 .budget-card {
-  width: 110px;
+  width: 100px;
   margin-bottom: 1rem;
 }
 .card-title {

diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/card-select.scss b/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/card-select.scss
@@ -0,0 +1,7 @@
+:host {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 6px;
+  justify-content: center;
+}
diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.scss b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.scss
@@ -22,29 +22,29 @@
   border-bottom: 1px solid var(--color-black);
 }
 .type-label {
-  width: 100px;
+  @apply w-20 p-1 sm:w-28 sm:p-2;
   border-right: 1px solid var(--color-black);
-  padding: 8px;
 }
 
 #cardsList {
-  height: calc(100% - 16px);
-  width: calc(100% - 16px);
+  height: 100%;
   background: white;
   display: flex;
   flex-direction: column;
-  padding: 8px;
+  @apply sm:p-4;
 }
 
 .selected-summary {
   flex: 1;
   min-height: 140px;
+  // HACK - assign width to prevent expanding over title column
+  min-width: 0px;
 }
 .selected-cards-container {
   display: grid;
-  padding: 10px;
+  padding: 8px;
   gap: 8px;
-  grid-template-columns: repeat(auto-fit, 128px);
+  grid-template-columns: repeat(auto-fit, 120px);
   // arrange input and output into larger grid for values editor
   &[data-type='inputs'],
   &[data-type='outputs'] {

diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.ts b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.ts
@@ -67,11 +67,7 @@ export class BudgetEditorComponent implements OnDestroy {
     this.periodType$.next(type);
 
     this.dialog.open(this.cardsListDialog, {
-      width: '90vw',
-      height: '90vh',
-      maxWidth: '90vw',
-      maxHeight: '90vh',
-      panelClass: 'no-padding',
+      panelClass: 'budget-dialog',
     });
     // scroll existing dialog to top if exists as dialog opens
     setTimeout(() => {

diff --git a/...limate-tool/src/app/components/climate-chart-options/climate-chart-options.component.html b/...limate-tool/src/app/components/climate-chart-options/climate-chart-options.component.html
@@ -5,8 +5,3 @@ <h3>{{ 'Chart' | translate }}</h3>
 <mat-divider></mat-divider>
 <h3>{{ 'Tools' | translate }}</h3>
 <climate-tool-select></climate-tool-select>
-<mat-divider></mat-divider>
-<picsa-configuration-summary style="margin-top: auto; margin-bottom: 8px"></picsa-configuration-summary>
-<!-- <details>
-  <summary>{{ 'Advanced' | translate }}</summary>
-</details> -->
diff --git a/apps/picsa-tools/climate-tool/src/app/pages/site-select/site-select.page.ts b/apps/picsa-tools/climate-tool/src/app/pages/site-select/site-select.page.ts
@@ -52,7 +52,7 @@ export class SiteSelectPage implements OnInit {
 
   goToSite(site: IStationMeta) {
     // record current map bound positions for returning back
-    const mapBounds = this.picsaMap.map.getBounds();
+    const mapBounds = this.picsaMap.map().getBounds();
     localStorage.setItem('picsaSiteSelectBounds', JSON.stringify([mapBounds.getSouthWest(), mapBounds.getNorthEast()]));
     // navigate
     this.router.navigate(['./', 'site', site.id], {

diff --git a/apps/picsa-tools/climate-tool/src/app/pages/site-view/site-view.page.html b/apps/picsa-tools/climate-tool/src/app/pages/site-view/site-view.page.html
@@ -9,7 +9,7 @@
     </button>
     <!-- Use a hidden select that opens from button (instead of using full select form component) -->
     <mat-select
-      style="width: 250px; position: absolute; right: 0; visibility: hidden"
+      style="width: 200px; position: absolute; right: 0; top: 18px; visibility: hidden"
       #select
       (selectionChange)="handleStationSelect(select.value)"
       [value]="chartService.station?.id"
@@ -37,20 +37,8 @@
       [definition]="chartService.chartDefinition"
     ></climate-chart-layout>
   </picsa-sidenav-layout>
-
-  <!-- Main content -->
-
-  <!-- reports -->
-  <!-- <div *ngIf="activeView === 'cropAnalysis'" style="flex: 1">
-        <climate-crop-analysis></climate-crop-analysis>
-      </div> -->
-  <!-- <climate-combined-probability></climate-combined-probability> -->
 </div>
 
-<picsa-animation
-  name="rotate-phone"
-  *ngIf="showRotateAnimation"
-  [loops]="2"
-  position="float"
-  [delay]="2000"
-></picsa-animation>
+<!-- @if(showRotateAnimation()){
+<picsa-animation name="rotate-phone" [loops]="2" [delay]="2000"></picsa-animation>
+} -->