Merge pull request #71 from e-picsa/feat/budget-sharing

Feat/budget sharing

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 3010000
-        versionName "3.10.0"
+        versionCode 3011000
+        versionName "3.11.0"
         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-native/capacitor.config.ts

@@ -34,7 +34,7 @@ const config: CapacitorConfig = {
    * TODO - could create script to automatially toggle when serving native
    **/
   // server: {
-  //   url: 'http://192.168.0.54:4200',
+  //   url: 'http://192.168.50.67:4200',
   //   cleartext: true,
   // },
 };

apps/picsa-tools/budget-tool/src/app/components/balance/balance-dot-value/dot-value.html

@@ -1,4 +1,5 @@
-<img
+<div
+  class="dot-value-image"
   *ngFor="let counter of counterAllocation"
-  [src]="'assets/budget-icons/' + counter.img + '.png'"
-/>
+  [innerHtml]="svgIcons[counter.icon]"
+></div>

apps/picsa-tools/budget-tool/src/app/components/balance/balance-dot-value/dot-value.scss

@@ -6,7 +6,8 @@
 :host(.negative) {
   filter: hue-rotate(200deg);
 }
-img {
-  width: 10px;
-  height: 10px;
+.dot-value-image {
+  width: 14px;
+  height: 12px;
+  display: inline-flex;
 }

apps/picsa-tools/budget-tool/src/app/components/balance/balance-dot-value/dot-value.ts

@@ -1,14 +1,21 @@
 import { Component, Input } from '@angular/core';
 import { IBudgetValueCounters } from '../../../models/budget-tool.models';
+import {
+  BudgetStore,
+  IBudgetCounterSVGIcons,
+} from '../../../store/budget.store';
 
 @Component({
   selector: 'budget-balance-dot-value',
   templateUrl: './dot-value.html',
   styleUrls: ['./dot-value.scss'],
 })
 export class BudgetBalanceDotValueComponent {
-  constructor() {}
-  _value: number = 0;
+  public svgIcons: IBudgetCounterSVGIcons;
+  constructor(private store: BudgetStore) {
+    this.svgIcons = this.store.counterSVGIcons;
+  }
+  _value = 0;
   _valueCounters: IBudgetValueCounters;
   // counter allocation keeps track of both labels and values that
   // make up a value, e.g. 1050 = [[large,500],[large,500],[small,50]]
@@ -31,24 +38,32 @@ export class BudgetBalanceDotValueComponent {
       const val = this._value;
       let allocation: ICounterAllocation[] = [];
       // keep track of how many times each value is multiplied by to make total
+      // TODO - rendering would be more efficient if a single svg rendered, and <use> tag to re-use paths
+      // instead of rendering multiple svgs (would need to handle overflow/scroll however)
       let toAllocate = Math.abs(val);
       divisors.forEach((divisor, i) => {
         const multiples = Math.floor(toAllocate / divisor);
         toAllocate = toAllocate - divisor * multiples;
         allocation = allocation.concat(
           new Array(multiples).fill({
             value: divisor,
-            img: `dot-${labels[i]}`,
+            icon: labels[i],
             isNegative: val < 0,
           })
         );
       });
-      this.counterAllocation = allocation;
+      // Avoid rendering very large number of counters
+      // TODO - show value instead
+      if (allocation.length > 20) {
+        this.counterAllocation = [];
+      } else {
+        this.counterAllocation = allocation;
+      }
     }
   }
 }
 type ICounterAllocation = {
   value: number;
-  img: string;
   isNegative: boolean;
+  icon: string;
 };

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

@@ -4,10 +4,10 @@
 <div style="margin: 10px 0 0 5px">
   <div *ngFor="let label of labels; let i = index">
     <div style="display: flex; font-size: small">
-      <div>
+      <div style="width: 20px; height: 20px">
         <img
           class="dot-value-image"
-          [src]="'assets/budget-icons/dot-' + label + '.png'"
+          [src]="'assets/budget-icons/dot-' + label + '.svg'"
         />
       </div>
       <div>= {{ values[i] | number: '.0' }}</div>

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

@@ -1,62 +1,71 @@
 import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { IonicModule } from '@ionic/angular';
 import { CanvasWhiteboardModule } from 'ng2-canvas-whiteboard';
-import { BudgetCardImageComponent } from './card/card-image/budget-card-image';
-import { BudgetCardComponent } from './card/budget-card';
-import { BudgetCellComponent } from './cell/cell';
-import { BudgetTableComponent } from './table/budget-table';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { MobxAngularModule } from 'mobx-angular';
+import { PicsaDbModule } from '@picsa/shared/modules';
+import { PicsaDialogsModule } from '@picsa/shared/features';
+import { PicsaCommonComponentsModule } from '@picsa/components';
+
 import { BudgetMaterialModule } from '../material.module';
-import {
-  BudgetListItemComponent,
-  BudgetListItemRenameDialog,
-} from './list-item/budget-list-item';
-import { BudgetCellLabourComponent } from './cell/variants/labour/labour';
+
+// Components
 import { BudgetCellEditorComponent } from './_deprecated/cell-editor';
 import { NextButton } from './_deprecated/next-button';
-import { MobxAngularModule } from 'mobx-angular';
-import { PicsaDbModule } from '@picsa/shared/modules';
+import { BudgetBalanceDotValueComponent } from './balance/balance-dot-value/dot-value';
 import {
   BudgetBalanceLegendComponent,
   BudgetBalanceEditorComponent,
 } from './balance/balance-legend/balance-legend';
+import { BudgetCardComponent } from './card/budget-card';
+import { BudgetCardImageComponent } from './card/card-image/budget-card-image';
+import { BudgetCardNew, BudgetCardNewDialog } from './card/card-new/card-new';
+import { BudgetCellComponent } from './cell/cell';
+import { BudgetCellLabourComponent } from './cell/variants/labour/labour';
+import { BudgetCellEditorCardSelectComponent } from './cell-editor/card-select/card-select';
 import { BudgetCellEditorInputValuesComponent } from './cell-editor/input-values/input-values';
-import { BudgetBalanceDotValueComponent } from './balance/balance-dot-value/dot-value';
 import { BudgetCellEditorFamilyLabourComponent } from './cell-editor/family-labour/family-labour';
 import { BudgetCellEditorProduceConsumedComponent } from './cell-editor/produce-consumed/produce-consumed';
-import { BudgetCardNew, BudgetCardNewDialog } from './card/card-new/card-new';
-import { RouterModule } from '@angular/router';
-import { BudgetCellEditorCardSelectComponent } from './cell-editor/card-select/card-select';
-import { BudgetPeriodSummaryComponent } from './summary/period-summary';
-import { PicsaDialogsModule } from '@picsa/shared/features';
-import { PicsaCommonComponentsModule } from '@picsa/components';
 import { BudgetCellInlineEditorComponent } from './cell-inline-editor/cell-inline-editor.component';
+import { BudgetImportDialogComponent } from './import-dialog/import-dialog.component';
+import {
+  BudgetListItemComponent,
+  BudgetListItemRenameDialog,
+} from './list-item/budget-list-item';
+import { BudgetShareDialogComponent } from './share-dialog/share-dialog.component';
+import { BudgetPeriodSummaryComponent } from './summary/period-summary';
+import { BudgetTableComponent } from './table/budget-table';
+
+const components = [
+  BudgetBalanceLegendComponent,
+  BudgetBalanceDotValueComponent,
+  BudgetBalanceEditorComponent,
+  BudgetCardComponent,
+  BudgetCardImageComponent,
+  BudgetCellComponent,
+  BudgetCellEditorComponent,
+  BudgetCellEditorCardSelectComponent,
+  BudgetCellEditorInputValuesComponent,
+  BudgetCellEditorFamilyLabourComponent,
+  BudgetCellEditorProduceConsumedComponent,
+  BudgetCellInlineEditorComponent,
+  BudgetCellLabourComponent,
+  BudgetCardNew,
+  BudgetCardNewDialog,
+  BudgetImportDialogComponent,
+  BudgetListItemComponent,
+  BudgetListItemRenameDialog,
+  BudgetPeriodSummaryComponent,
+  BudgetShareDialogComponent,
+  BudgetTableComponent,
+  NextButton,
+];
 
 @NgModule({
-  declarations: [
-    BudgetBalanceLegendComponent,
-    BudgetBalanceDotValueComponent,
-    BudgetBalanceEditorComponent,
-    BudgetCardComponent,
-    BudgetCardImageComponent,
-    BudgetCellComponent,
-    BudgetCellEditorComponent,
-    BudgetCellEditorCardSelectComponent,
-    BudgetCellEditorInputValuesComponent,
-    BudgetCellEditorFamilyLabourComponent,
-    BudgetCellEditorProduceConsumedComponent,
-    BudgetCellInlineEditorComponent,
-    BudgetCellLabourComponent,
-    BudgetCardNew,
-    BudgetCardNewDialog,
-    BudgetListItemComponent,
-    BudgetListItemRenameDialog,
-    BudgetPeriodSummaryComponent,
-    BudgetTableComponent,
-    NextButton,
-  ],
+  declarations: components,
   imports: [
     IonicModule,
     CommonModule,
@@ -70,25 +79,6 @@ import { BudgetCellInlineEditorComponent } from './cell-inline-editor/cell-inlin
     PicsaDbModule,
     RouterModule,
   ],
-  exports: [
-    BudgetBalanceLegendComponent,
-    BudgetBalanceDotValueComponent,
-    BudgetCardComponent,
-    BudgetCardImageComponent,
-    BudgetCellComponent,
-    BudgetCellEditorComponent,
-    BudgetCellEditorCardSelectComponent,
-    BudgetCellEditorInputValuesComponent,
-    BudgetCellEditorFamilyLabourComponent,
-    BudgetCellEditorProduceConsumedComponent,
-    BudgetCellInlineEditorComponent,
-    BudgetCellLabourComponent,
-    BudgetListItemComponent,
-    BudgetCardNew,
-    BudgetTableComponent,
-    BudgetPeriodSummaryComponent,
-    NextButton,
-    PicsaCommonComponentsModule,
-  ],
+  exports: components,
 })
 export class BudgetToolComponentsModule {}

apps/picsa-tools/budget-tool/src/app/components/import-dialog/import-dialog.component.html

@@ -0,0 +1,33 @@
+<form class="input-container">
+  <mat-form-field
+    class="input-field"
+    *ngFor="let char of importCode; let i = index"
+    appearance="outline"
+  >
+    <input
+      matInput
+      [(ngModel)]="char.value"
+      [id]="char.name"
+      [name]="char.name"
+      class="input"
+      maxlength="1"
+      minlength="1"
+      oninput="this.value = this.value.toUpperCase()"
+      (keyup)="handleKeyup($event, i)"
+      (keydown)="handleKeydown($event, i)"
+      (paste)="handlePaste($event)"
+    />
+  </mat-form-field>
+</form>
+<div class="status-message">{{ status }}</div>
+
+<div mat-dialog-actions>
+  <button mat-button mat-dialog-close>{{ 'Close' | translate }}</button>
+  <button
+    mat-button
+    (click)="handleImport()"
+    [disabled]="importValue.length !== 4 || disabled"
+  >
+    Import
+  </button>
+</div>

apps/picsa-tools/budget-tool/src/app/components/import-dialog/import-dialog.component.scss

@@ -0,0 +1,25 @@
+.input-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  gap: 8px;
+}
+mat-form-field.input-field {
+  width: 55px;
+}
+mat-form-field.input-field .mat-form-field-wrapper {
+  padding-bottom: 0;
+  background-color: yellow;
+}
+input {
+  font-size: 32px;
+}
+
+.status-message {
+  height: 1em;
+  line-height: 1em;
+  text-align: center;
+  color: var(--color-primary);
+  padding: 8px;
+  border-radius: 4px;
+  margin-bottom: -12px;
+}