Merge pull request #129 from e-picsa/feat/profile-select

Feat: User Profiles
e-picsa · May 2, 2023 · 2ae6d3b · 2ae6d3b
2 parents 4b3b1cd + b6c4eeb
commit 2ae6d3b
Show file tree

Hide file tree

Showing 36 changed files with 813 additions and 247 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,4 +1,5 @@
 {
   "java.configuration.updateBuildConfiguration": "automatic",
-  "cSpell.enabled": false
+  "cSpell.enabled": false,
+  "eslint.runtime": "node"
 }
diff --git a/apps/picsa-apps/extension-app-native/android/app/build.gradle b/apps/picsa-apps/extension-app-native/android/app/build.gradle
@@ -6,8 +6,8 @@ android {
         applicationId "io.picsa.extension"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 3019001
-        versionName "3.19.1"
+        versionCode 3020000
+        versionName "3.20.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/src/app/pages/home/home.page.html b/apps/picsa-apps/extension-app/src/app/pages/home/home.page.html
@@ -1,3 +1,7 @@
+<div #headerContent style="margin-right: 8px; display: flex; justify-content: flex-end">
+  <picsa-profile-select></picsa-profile-select>
+</div>
+
 <div class="page-content background-image">
   <mat-grid-list [cols]="columns" style="flex: 1" gutterSize="8">
     <mat-grid-tile
@@ -15,12 +19,12 @@
     </mat-grid-tile>
   </mat-grid-list>
   <footer>
-    <div class="version-info">v{{ version.number }}</div>
-    <a routerLink="privacy" class="privacy-policy">{{'Privacy Policy' | translate}}</a>
     <picsa-configuration-select></picsa-configuration-select>
-    <button mat-flat-button color="primary" (click)="shareApp()" class="share-button" [disabled]="isPreparingShare">
+    <a routerLink="privacy" class="privacy-policy">{{'Privacy Policy' | translate}}</a>
+    <div class="version-info">v{{ version.number }}</div>
+    <!-- <button mat-flat-button color="primary" (click)="shareApp()" class="share-button" [disabled]="isPreparingShare">
       <mat-icon>share</mat-icon>
       {{ 'Share App' | translate }}
-    </button>
+    </button> -->
   </footer>
 </div>
diff --git a/apps/picsa-apps/extension-app/src/app/pages/home/home.page.scss b/apps/picsa-apps/extension-app/src/app/pages/home/home.page.scss
@@ -50,6 +50,7 @@ footer {
   width: calc(100% - 10px);
   left: 0;
   background: var(--color-primary);
+  align-items: center;
 }
 
 .nav-icon {
@@ -65,13 +66,7 @@ footer {
 .version-info,
 .privacy-policy {
   color: rgba(255, 255, 255, 0.7);
-  position: absolute;
-  top: -24px;
 }
 .privacy-policy {
-  right: 8px;
   text-decoration: none;
 }
-.version-info {
-  left: 8px;
-}
diff --git a/apps/picsa-apps/extension-app/src/app/pages/home/home.page.ts b/apps/picsa-apps/extension-app/src/app/pages/home/home.page.ts
@@ -1,31 +1,37 @@
-import { Component, HostListener, OnInit } from '@angular/core';
+import { Component, ElementRef, HostListener, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { marker as translateMarker } from '@biesbjerg/ngx-translate-extract-marker';
 import { Platform } from '@ionic/angular';
 import { APP_VERSION } from '@picsa/environments';
 import { PicsaFileService } from '@picsa/shared/services/native';
 
 import { UserStore } from '../../store/user.store';
+import { DomPortal } from '@angular/cdk/portal';
+import { PicsaCommonComponentsService } from '@picsa/components/src';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.page.html',
   styleUrls: ['./home.page.scss'],
 })
-export class HomePage implements OnInit {
+export class HomePage implements OnInit, OnDestroy {
   links: ILink[];
   name: string;
   version = APP_VERSION;
   subtitle = 'Extension';
   columns: number;
   isPreparingShare = false;
 
+  @ViewChild('headerContent')
+  headerContent: ElementRef<HTMLElement>;
+
   constructor(
     private router: Router,
     public store: UserStore,
     // TODO - refactor to separate store
     private platform: Platform,
-    private fileService: PicsaFileService
+    private fileService: PicsaFileService,
+    private componentsService: PicsaCommonComponentsService
   ) {
     this.links = [
       {
@@ -74,6 +80,14 @@ export class HomePage implements OnInit {
   ngOnInit() {
     this.columns = this._calculateColumns(window.innerWidth);
   }
+  ngOnDestroy(): void {
+    this.componentsService.patchHeader({ endContent: undefined });
+  }
+  ngAfterViewInit() {
+    this.componentsService.patchHeader({
+      endContent: new DomPortal(this.headerContent),
+    });
+  }
   async shareApp() {
     if (this.platform.is('cordova')) {
       this.isPreparingShare = true;

diff --git a/apps/picsa-tools/budget-tool/src/app/components/_deprecated/input-values/input-values.html b/apps/picsa-tools/budget-tool/src/app/components/_deprecated/input-values/input-values.html
@@ -7,23 +7,11 @@
   <div class="input-details">
     <mat-form-field class="card-input-field quantity">
       <mat-label>{{'Quantity' | translate}}</mat-label>
-      <input
-        matInput
-        class="input-editable"
-        [value]="card.values.quantity"
-        type="number"
-        (change)="setValue($event, 'quantity', i)"
-      />
+      <input matInput [value]="card.values.quantity" type="number" (change)="setValue($event, 'quantity', i)" />
     </mat-form-field>
     <mat-form-field class="card-input-field cost">
       <mat-label>{{'Cost' | translate}}</mat-label>
-      <input
-        matInput
-        class="input-editable"
-        [value]="card.values.cost"
-        type="number"
-        (change)="setValue($event, 'cost', i)"
-      />
+      <input matInput [value]="card.values.cost" type="number" (change)="setValue($event, 'cost', i)" />
       <span matTextPrefix>{{ currency }} &nbsp;</span>
     </mat-form-field>
     <div style="display: flex; align-items: flex-end; box-sizing: border-box">

diff --git a/apps/picsa-tools/budget-tool/src/app/components/card/card-new/card-new-dialog.html b/apps/picsa-tools/budget-tool/src/app/components/card/card-new/card-new-dialog.html
@@ -3,7 +3,7 @@
   <div [class]="'card-title ' + card.id">{{ card.label | translate }}</div>
 </mat-card>
 <mat-form-field>
-  <input matInput [(ngModel)]="card.label" class="input-editable" />
+  <input matInput [(ngModel)]="card.label" />
 </mat-form-field>
 <button mat-stroked-button (click)="save()" [disabled]="card.label === ''" style="margin-top: 1em; width: 70%">
   <mat-icon>check</mat-icon>{{ 'Save' | translate }}

diff --git a/.../picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.html b/.../picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.html
@@ -11,23 +11,11 @@
   <div class="input-values" *ngIf="card.type === 'inputs' || card.type === 'outputs'">
     <mat-form-field class="card-input-field quantity" style="margin-right: 8px">
       <mat-label>{{ 'Quantity' | translate }}</mat-label>
-      <input
-        matInput
-        class="input-editable"
-        [value]="card.values.quantity"
-        type="number"
-        (change)="setValue($event, 'quantity')"
-      />
+      <input matInput [value]="card.values.quantity" type="number" (change)="setValue($event, 'quantity')" />
     </mat-form-field>
     <mat-form-field class="card-input-field cost">
       <mat-label>{{ 'Cost' | translate }}</mat-label>
-      <input
-        matInput
-        class="input-editable"
-        [value]="card.values.cost"
-        type="number"
-        (change)="setValue($event, 'cost')"
-      />
+      <input matInput [value]="card.values.cost" type="number" (change)="setValue($event, 'cost')" />
       <span matTextPrefix>{{ currency }} &nbsp;</span>
     </mat-form-field>
     <div style="display: flex; align-items: flex-end; box-sizing: border-box">
@@ -48,7 +36,6 @@
       <mat-label>{{ 'Days' | translate }}</mat-label>
       <input
         matInput
-        class="input-editable"
         [value]="card.values ? card.values.quantity : null"
         type="number"
         (change)="setValue($event, 'quantity')"
@@ -62,7 +49,6 @@
       <mat-label>{{ 'Quantity' | translate }}</mat-label>
       <input
         matInput
-        class="input-editable"
         [value]="card.values ? card.values.quantity : null"
         type="number"
         (change)="setProduceConsumed($event)"

diff --git a/...-tools/budget-tool/src/app/components/editor/card-select/family-labour/family-labour.html b/...-tools/budget-tool/src/app/components/editor/card-select/family-labour/family-labour.html
@@ -8,7 +8,6 @@
       <mat-label>{{'Days' | translate}}</mat-label>
       <input
         matInput
-        class="input-editable"
         [value]="familyCard.values ? familyCard.values.quantity : null"
         type="number"
         (change)="setValue($event, i)"

diff --git a/.../budget-tool/src/app/components/editor/card-select/produce-consumed/produce-consumed.html b/.../budget-tool/src/app/components/editor/card-select/produce-consumed/produce-consumed.html
@@ -9,13 +9,7 @@ <h3>Outputs</h3>
   <div class="input-values-container">
     <mat-form-field class="card-input-field quantity">
       <mat-label>{{'Consumed' | translate}}</mat-label>
-      <input
-        matInput
-        class="input-editable"
-        [value]="card.values.quantity"
-        type="number"
-        (change)="setValue($event,  i)"
-      />
+      <input matInput [value]="card.values.quantity" type="number" (change)="setValue($event,  i)" />
     </mat-form-field>
     <div style="display: flex; margin-left: 10px; font-size: 0.75em; color: rgba(0, 0, 0, 0.38)">
       <div style="flex: 1">

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
@@ -1,6 +1,6 @@
 import { Component, ElementRef, EventEmitter, Input, Output, TemplateRef, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { ANIMATION_DELAYED, FadeInOut } from '@picsa/shared/animations';
+import { FadeInOut } from '@picsa/shared/animations';
 import { _wait } from '@picsa/utils';
 
 import {
@@ -23,7 +23,7 @@ const EDITOR_STEPS: { type: IBudgetPeriodType; label: string }[] = [
   selector: 'budget-editor',
   templateUrl: './editor.component.html',
   styleUrls: ['./editor.component.scss'],
-  animations: [FadeInOut(ANIMATION_DELAYED)],
+  animations: [FadeInOut({})],
 })
 export class BudgetEditorComponent {
   /** View reference to ng-template content shown in dialog */

diff --git a/apps/picsa-tools/crop-probability-tool/project.json b/apps/picsa-tools/crop-probability-tool/project.json
@@ -28,7 +28,7 @@
             {
               "type": "initial",
               "maximumWarning": "500kb",
-              "maximumError": "2mb"
+              "maximumError": "3mb"
             },
             {
               "type": "anyComponentStyle",

diff --git a/apps/picsa-tools/monitoring-tool/project.json b/apps/picsa-tools/monitoring-tool/project.json
@@ -24,7 +24,7 @@
             {
               "type": "initial",
               "maximumWarning": "500kb",
-              "maximumError": "2mb"
+              "maximumError": "3mb"
             },
             {
               "type": "anyComponentStyle",

diff --git a/apps/picsa-tools/option-tool/project.json b/apps/picsa-tools/option-tool/project.json
@@ -15,12 +15,14 @@
         "polyfills": ["zone.js"],
         "tsConfig": "apps/picsa-tools/option-tool/tsconfig.app.json",
         "inlineStyleLanguage": "scss",
-        "assets": ["apps/picsa-tools/option-tool/src/favicon.ico", "apps/picsa-tools/option-tool/src/assets",
-        {
-          "glob": "*.json",
-          "input": "libs/i18n/assets",
-          "output": "assets/i18n"
-        }
+        "assets": [
+          "apps/picsa-tools/option-tool/src/favicon.ico",
+          "apps/picsa-tools/option-tool/src/assets",
+          {
+            "glob": "*.json",
+            "input": "libs/i18n/assets",
+            "output": "assets/i18n"
+          }
         ],
         "styles": ["apps/picsa-tools/option-tool/src/styles.scss", "libs/theme/src/_index.scss"],
         "scripts": []
@@ -31,7 +33,7 @@
             {
               "type": "initial",
               "maximumWarning": "500kb",
-              "maximumError": "2mb"
+              "maximumError": "3mb"
             },
             {
               "type": "anyComponentStyle",

diff --git a/libs/components/src/components/configuration-select/configuration-select-dialog.html b/libs/components/src/components/configuration-select/configuration-select-dialog.html
@@ -1,3 +1,4 @@
+<button mat-icon-button mat-dialog-close class="close-button"><mat-icon>close</mat-icon></button>
 <h2 style="margin-top: 0">{{'Select Country' | translate}}</h2>
 <div class="country-select-container">
   <div
@@ -11,15 +12,14 @@ <h2 style="margin-top: 0">{{'Select Country' | translate}}</h2>
   </div>
 </div>
 
-<h2>Select Language</h2>
-
+<h2>{{'Select Language' | translate}}</h2>
 <div class="language-select-container" *ngIf="selected.language">
   <div
     *ngFor="let language of selected.language.options"
     class="select-option language"
     [class.selected]="selected.language.selected?.code ===language.code ? true : undefined"
     (click)="setLanguage(language)"
   >
-    <div>{{ language.label }}</div>
+    <div>{{ language.label | translate }}</div>
   </div>
 </div>
diff --git a/libs/components/src/components/configuration-select/configuration-select-dialog.scss b/libs/components/src/components/configuration-select/configuration-select-dialog.scss
@@ -36,3 +36,8 @@ img.language-select-flag {
   color: white;
   font-weight: bold;
 }
+.close-button {
+  position: absolute;
+  right: 0;
+  top: 0px;
+}
diff --git a/libs/components/src/components/picsa-header.component.scss b/libs/components/src/components/picsa-header.component.scss
@@ -14,10 +14,20 @@ header[data-style='inverted'] {
   color: var(--color-primary);
   background-color: white;
 }
-h1 {
+.start-content {
   flex: 1;
-  font-size: 2rem;
+  text-align: left;
+}
+.end-content {
+  flex: 1;
+  text-align: right;
+}
+.central-content {
+  flex: 2;
   text-align: center;
-  margin-right: 70px;
+}
+h1 {
+  font-size: 2rem;
+
   padding: 0;
 }
diff --git a/libs/components/src/components/picsa-header.component.ts b/libs/components/src/components/picsa-header.component.ts
@@ -16,11 +16,15 @@ import { PicsaCommonComponentsService } from '../services/components.service';
   selector: 'picsa-header',
   template: `
     <header [attr.data-style]="style">
-      <back-button [style.visibility]="hideBackButton ? 'hidden' : 'visible'"></back-button>
-      <h1>
+      <div class="start-content">
+        <back-button [style.visibility]="hideBackButton ? 'hidden' : 'visible'"></back-button>
+      </div>
+      <h1 class="central-content">
         <span>{{ title | translate }}</span>
       </h1>
-      <ng-template [cdkPortalOutlet]="endPortal"></ng-template>
+      <div class="end-content">
+        <ng-template [cdkPortalOutlet]="endPortal"></ng-template>
+      </div>
     </header>
     <picsa-breadcrumbs> </picsa-breadcrumbs>
   `,