Merge pull request #116 from e-picsa/feat/budget-tool-ui

Feat(budget): Editor Improvements

.eslintrc.json

@@ -1,7 +1,7 @@
 {
   "root": true,
   "ignorePatterns": ["**/*"],
-  "plugins": ["@nrwl/nx"],
+  "plugins": ["@nrwl/nx", "simple-import-sort"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
@@ -27,7 +27,9 @@
         "@typescript-eslint/no-unused-vars": ["warn"],
         "no-loss-of-precision": "off",
         "no-prototype-builtins": "off",
-        "no-unused-vars": "off"
+        "no-unused-vars": "off",
+        "simple-import-sort/imports": "off",
+        "simple-import-sort/exports": "off"
       }
     },
     {

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 3018000
-        versionName "3.18.0"
+        versionCode 3019000
+        versionName "3.19.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-tools/budget-tool/.eslintrc.json

@@ -1,31 +1,31 @@
 {
   "extends": ["../../../.eslintrc.json"],
   "ignorePatterns": ["!**/*"],
+
   "overrides": [
     {
       "files": ["*.ts"],
-      "extends": [
-        "plugin:@nrwl/nx/angular",
-        "plugin:@angular-eslint/template/process-inline-templates"
-      ],
+      "extends": ["plugin:@nrwl/nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
       "rules": {
         "@angular-eslint/directive-selector": [
           "warn",
           {
             "type": "attribute",
-            "prefix": "picsa",
+            "prefix": "budget",
             "style": "camelCase"
           }
         ],
         "@angular-eslint/component-selector": [
           "warn",
           {
             "type": "element",
-            "prefix": "picsa",
+            "prefix": "budget",
             "style": "kebab-case"
           }
         ],
-        "@angular-eslint/component-class-suffix": ["warn"]
+        "@angular-eslint/component-class-suffix": ["warn"],
+        "simple-import-sort/imports": "warn",
+        "simple-import-sort/exports": "warn"
       }
     },
     {

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

@@ -24,13 +24,17 @@ import { BudgetCardComponent } from './card/budget-card';
 import { BudgetCardImageComponent } from './card/card-image/budget-card-image';
 import { BudgetCardNew } from './card/card-new/card-new';
 import { BudgetCardNewDialog } from './card/card-new/card-new-dialog';
+import { BudgetCardPlaceholderComponent } from './card/card-placeholder/card-placeholder.component';
 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 { BudgetCellEditorFamilyLabourComponent } from './cell-editor/family-labour/family-labour';
-import { BudgetCellEditorProduceConsumedComponent } from './cell-editor/produce-consumed/produce-consumed';
-import { BudgetCellInlineEditorComponent } from './cell-inline-editor/cell-inline-editor.component';
+
+import { BudgetCardEditorComponent } from './editor/card-editor/card-editor.component';
+import { BudgetCellEditorCardSelectComponent } from './editor/card-select/card-select';
+import { BudgetCellEditorInputValuesComponent } from './_deprecated/input-values/input-values';
+import { BudgetCellEditorFamilyLabourComponent } from './editor/card-select/family-labour/family-labour';
+import { BudgetCellEditorProduceConsumedComponent } from './editor/card-select/produce-consumed/produce-consumed';
+import { BudgetEditorComponent } from './editor/editor.component';
+
 import { BudgetImportDialogComponent } from './import-dialog/import-dialog.component';
 import {
   BudgetListItemComponent,
@@ -45,14 +49,16 @@ const components = [
   BudgetBalanceDotValueComponent,
   BudgetBalanceEditorComponent,
   BudgetCardComponent,
+  BudgetCardEditorComponent,
   BudgetCardImageComponent,
+  BudgetCardPlaceholderComponent,
   BudgetCellComponent,
   BudgetCellEditorComponent,
   BudgetCellEditorCardSelectComponent,
   BudgetCellEditorInputValuesComponent,
   BudgetCellEditorFamilyLabourComponent,
   BudgetCellEditorProduceConsumedComponent,
-  BudgetCellInlineEditorComponent,
+  BudgetEditorComponent,
   BudgetCellLabourComponent,
   BudgetCardNew,
   BudgetCardNewDialog,

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

@@ -5,14 +5,6 @@
   [attr.selected]="selected"
   *ngIf="!card._deleted"
 >
-  <button
-    mat-button
-    *ngIf="card.customMeta && !selected"
-    class="delete-button"
-    (click)="promptCustomDelete($event)"
-  >
-    <mat-icon svgIcon="picsa_delete"></mat-icon>
-  </button>
   <budget-card-image [card]="card"></budget-card-image>
   <div [class]="'card-title ' + card.id">{{ card.label | translate }}</div>
 </mat-card>

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

@@ -1,24 +1,17 @@
 :host {
-  margin-right: 10px;
-  margin-bottom: 10px;
+  margin: 10px;
   display: inline-block;
   cursor: pointer;
   text-align: center;
   // prevent strange offset
   vertical-align: bottom;
+  position: relative;
 }
 
 mat-card.budget-card {
   width: 110px;
   padding: 0;
 }
-.delete-button {
-  position: absolute;
-  right: 0;
-  min-width: 24px;
-  padding: 0 4px;
-  color: var(--color-light);
-}
 
 .budget-card[selected='true'] {
   font-weight: bold;

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

@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { IBudgetCard, IBudgetCardDB } from '../../models/budget-tool.models';
-import { PicsaDialogService } from '@picsa/shared/features';
+import { IBudgetCard } from '../../models/budget-tool.models';
 import { BudgetStore } from '../../store/budget.store';
 
 @Component({
@@ -16,18 +15,5 @@ export class BudgetCardComponent {
   @Input() card: IBudgetCard;
   @Input() selected: boolean;
 
-  constructor(private dialog: PicsaDialogService, public store: BudgetStore) {}
-
-  async promptCustomDelete(e: Event) {
-    e.stopPropagation();
-    const dialogRef = await this.dialog.open('delete');
-    dialogRef.afterClosed().subscribe((v) => {
-      if (v) {
-        this.store.deleteCustomCard(this.card as IBudgetCardDB);
-        // HACK - instead of refreshing from store just mark
-        // as deleted to hide (will be gone next refresh)
-        this.card['_deleted'] = true;
-      }
-    });
-  }
+  constructor(public store: BudgetStore) {}
 }

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

@@ -0,0 +1,5 @@
+<mat-card appearance="outlined" mat-elevation-z4 class="budget-card">
+  <button id="addCardButton" mat-button>
+    <mat-icon id="addCardButtonIcon">add</mat-icon>
+  </button>
+</mat-card>

apps/picsa-tools/budget-tool/src/app/components/card/card-placeholder/card-placeholder.component.scss

@@ -0,0 +1,15 @@
+.budget-card {
+  height: 100%;
+  border-style: dashed;
+  border-color: #848484;
+}
+#addCardButton {
+  height: 100%;
+  min-height: 120px;
+}
+#addCardButtonIcon {
+  height: 36px;
+  font-size: 36px;
+  width: 36px;
+  color: var(--color-black);
+}

apps/picsa-tools/budget-tool/src/app/components/card/card-placeholder/card-placeholder.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BudgetCardPlaceholderComponent } from './card-placeholder.component';
+
+describe('BudgetCardPlaceholderComponent', () => {
+  let component: BudgetCardPlaceholderComponent;
+  let fixture: ComponentFixture<BudgetCardPlaceholderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [BudgetCardPlaceholderComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BudgetCardPlaceholderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'budget-card-placeholder',
+  templateUrl: './card-placeholder.component.html',
+  styleUrls: ['./card-placeholder.component.scss', '../budget-card.scss'],
+})
+export class BudgetCardPlaceholderComponent {}