From 9a069d4c46f3e5cab10cfae79fa36e0ea8ef11d5 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Thu, 14 Sep 2023 11:16:32 -0700
Subject: [PATCH] chore: code tidying

---
 .../src/app/components/components.module.ts   |   3 +-
 .../components/editor/editor.component.html   | 107 ++--------
 .../components/editor/editor.component.scss   |  51 +++--
 .../app/components/editor/editor.component.ts | 188 +++++++++---------
 .../src/app/pages/home/home.component.html    |  62 +-----
 5 files changed, 147 insertions(+), 264 deletions(-)

diff --git a/apps/picsa-tools/option-tool/src/app/components/components.module.ts b/apps/picsa-tools/option-tool/src/app/components/components.module.ts
index f3c2f54e6..171b86355 100644
--- a/apps/picsa-tools/option-tool/src/app/components/components.module.ts
+++ b/apps/picsa-tools/option-tool/src/app/components/components.module.ts
@@ -9,10 +9,11 @@ import { PicsaTranslateModule } from '@picsa/shared/modules';
 // Local components
 import { EditorComponent } from './editor/editor.component';
 import { GenderInputComponent } from './editor/inputs/gender/gender-input';
+import { InvestmentInputComponent } from './editor/inputs/investment/investment-input';
 import { PerformanceInputComponent } from './editor/inputs/performance/performance-input';
 import { OptionMaterialModule } from './material.module';
 
-const Components = [EditorComponent, GenderInputComponent, PerformanceInputComponent];
+const Components = [EditorComponent, GenderInputComponent, InvestmentInputComponent, PerformanceInputComponent];
 
 @NgModule({
   imports: [
diff --git a/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.html b/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.html
index f23d00afc..d6a009489 100644
--- a/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.html
+++ b/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.html
@@ -1,4 +1,4 @@
-<div class="dialog-content">
+<div class="editor-container">
   <button mat-mini-fab color="primary" (click)="submitForm()" class="closeButton">
     <mat-icon>close</mat-icon>
   </button>
@@ -65,8 +65,8 @@ <h3 class="StepTitle">{{ step.title | translate }}</h3>
 
     <!-- 4. Benefits -->
     <ng-template #benefitsInput>
-      <div style="margin-bottom: 1.5rem; padding: 2px; margin-top: 2rem">
-        <div *ngFor="let benefit of values.benefits; index as i">
+      <div class="entry-rows">
+        <div class="entry-row-item" *ngFor="let benefit of values.benefits; index as i">
           <div style="display: flex; flex-direction: row; gap: 3px; padding-bottom: 3px">
             <input [(ngModel)]="benefit.benefit" class="form-control" />
             <option-gender-input [(ngModel)]="values.benefits[i].beneficiary"></option-gender-input>
@@ -75,9 +75,10 @@ <h3 class="StepTitle">{{ step.title | translate }}</h3>
             </button>
           </div>
         </div>
-        <!-- Only enable adding more benefits when previous are validated -->
+        <!-- Only enable adding more benefits when previous are validated
+            TODO would be easier to manage all validation if using formgroups -->
         <button
-          style="float: left; margin-top: 7px"
+          style="margin-bottom: 16px; margin-top: -16px"
           (click)="handleMoreBenefits()"
           mat-button
           [disabled]="
@@ -89,6 +90,7 @@ <h3 class="StepTitle">{{ step.title | translate }}</h3>
           + {{ 'Add benefit' | translate }}
         </button>
       </div>
+
       <ng-container
         [ngTemplateOutlet]="stepButtons"
         [ngTemplateOutletContext]="{ nextDisabled: values.benefits.length === 0 }"
@@ -97,11 +99,11 @@ <h3 class="StepTitle">{{ step.title | translate }}</h3>
 
     <!-- 5. Performance -->
     <ng-template #performanceInput>
-      <div class="performance-container">
-        <div class="performence-item-container" *ngFor="let condition of performanceConditions">
-          <div class="performenceItem">
-            <div class="performenceHeading">{{ condition.label | translate }}</div>
-            <div class="rainIconContainer">
+      <div class="entry-rows">
+        <div class="entry-row-item" *ngFor="let condition of performanceConditions">
+          <div class="icon-with-heading">
+            <div class="icon-heading">{{ condition.label | translate }}</div>
+            <div class="icon-container">
               <mat-icon [svgIcon]="condition.svgIcon"></mat-icon>
             </div>
           </div>
@@ -119,87 +121,16 @@ <h3 class="StepTitle">{{ step.title | translate }}</h3>
 
     <!-- 6. Investment -->
     <ng-template #investmentInput>
-      <div class="investmentsContentContainer">
-        <!-- <div class="performenceItem">
-          <div class="performenceHeading">
-            {{ 'Money' | translate }}
-          </div>
-          <mat-icon style="color: #8a2644; font-size: 20px">payments</mat-icon>
-          <div class="emoji-wrapper">
-            <div class="emojiTextContainer">
-              <mat-icon
-                [ngStyle]="{ opacity: values.investment.money !== 'low' ? '0.3' : '1' }"
-                svgIcon="picsa_options_thumbs_up"
-                class="emoji_size"
-              ></mat-icon>
-              <div class="guideText">{{ 'Low' | translate }}</div>
-            </div>
-            <div class="emojiTextContainer">
-              <mat-icon
-                [ngStyle]="{ opacity: values.investment.money !== 'mid' ? '0.3' : '1' }"
-                svgIcon="picsa_options_fist_bump"
-                class="emoji_size"
-              ></mat-icon>
-              <div class="guideText">{{ 'Mid' | translate }}</div>
-            </div>
-            <div class="emojiTextContainer">
-              <mat-icon
-                [ngStyle]="{ opacity: values.investment.money !== 'high' ? '0.3' : '1' }"
-                svgIcon="picsa_options_thumbs_down"
-                class="emoji_size"
-              ></mat-icon>
-              <div class="guideText">{{ 'High' | translate }}</div>
+      <div class="entry-rows">
+        <div *ngFor="let investment of investmentTypes" class="entry-row-item">
+          <div class="icon-with-heading">
+            <div class="icon-heading">{{ investment.label | translate }}</div>
+            <div class="icon-container">
+              <mat-icon style="color: #8a2644; font-size: 36px">{{ investment.matIcon }}</mat-icon>
             </div>
           </div>
-          <input
-            type="range"
-            min="0"
-            max="2"
-            [ngModel]="values.investment.money === 'low' ? 0 : values.investment.money === 'mid' ? 1 : 2"
-            (input)="updateInvestmentEffort($event, 'money')"
-            class="guideText"
-          />
+          <option-investment-input [(ngModel)]="values.investment[investment.id]"></option-investment-input>
         </div>
-        <div class="performenceItem">
-          <div style="font-weight: 700">
-            {{ 'Time' | translate }}
-          </div>
-          <mat-icon style="color: #8a2644; font-size: 20px">schedule</mat-icon>
-          <div class="emoji-wrapper">
-            <div class="emojiTextContainer">
-              <mat-icon
-                [ngStyle]="{ opacity: values.investment.time !== 'low' ? '0.3' : '1' }"
-                svgIcon="picsa_options_thumbs_up"
-                class="emoji_size"
-              ></mat-icon>
-              <div class="guideText">{{ 'Low' | translate }}</div>
-            </div>
-            <div class="emojiTextContainer">
-              <mat-icon
-                [ngStyle]="{ opacity: values.investment.time !== 'mid' ? '0.3' : '1' }"
-                svgIcon="picsa_options_fist_bump"
-                class="emoji_size"
-              ></mat-icon>
-              <div class="guideText">{{ 'Mid' | translate }}</div>
-            </div>
-            <div class="emojiTextContainer">
-              <mat-icon
-                [ngStyle]="{ opacity: values.investment.time !== 'high' ? '0.3' : '1' }"
-                svgIcon="picsa_options_thumbs_down"
-                class="emoji_size"
-              ></mat-icon>
-              <div class="guideText">{{ 'High' | translate }}</div>
-            </div>
-          </div>
-          <input
-            type="range"
-            min="0"
-            max="2"
-            [ngModel]="values.investment.time === 'low' ? 0 : values.investment.time === 'mid' ? 1 : 2"
-            (input)="updateInvestmentEffort($event, 'time')"
-            class="guideText"
-          />
-        </div> -->
       </div>
       <ng-container
         [ngTemplateOutlet]="stepButtons"
diff --git a/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.scss b/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.scss
index 619fe9f3d..16216b1a4 100644
--- a/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.scss
+++ b/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.scss
@@ -1,6 +1,10 @@
 :host {
   display: block;
 }
+.editor-container {
+  position: relative;
+  padding-bottom: 2rem;
+}
 // ***************************************************************************************
 // Stepper - General
 // ***************************************************************************************
@@ -97,16 +101,18 @@ h3.StepTitle {
 }
 
 // ***************************************************************************************
-// Steps - Performance
+// Steps - Multiple row entries
+// Display as rows with light border, and content in a row
+//
 // ***************************************************************************************
-$rain-icon-size: 64px;
-.performance-container {
+
+.entry-rows {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }
-.performence-item-container {
+.entry-row-item {
   display: flex;
   gap: 1rem;
   width: 100%;
@@ -118,17 +124,20 @@ $rain-icon-size: 64px;
     border-bottom: none;
   }
 }
-.performenceItem {
+
+// Rows also use text and icon at start of the row to help identifiy input requirements
+$entry-icon-size: 64px;
+.icon-with-heading {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
 }
 
-.performenceHeading {
+.icon-heading {
   font-weight: 700;
   text-align: center;
-  width: calc($rain-icon-size + 16px);
+  width: calc($entry-icon-size + 16px);
   background: var(--color-primary);
   margin-bottom: -10px;
   padding: 4px;
@@ -137,42 +146,30 @@ $rain-icon-size: 64px;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
 }
-.rainIconContainer {
-  width: calc($rain-icon-size + 8px - 2px); // include padding and border in width
+.icon-container {
+  width: calc($entry-icon-size + 8px - 2px); // include padding and border in width
   text-align: center;
   background-color: #ffffff;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   padding: 8px;
+  // Styles need to accomodate slightly different variations depending if regular mat-icon or svgIcon used
   mat-icon {
-    width: calc($rain-icon-size);
-    height: calc($rain-icon-size);
+    width: 100%;
+    height: 100%;
+    max-height: $entry-icon-size;
+    max-width: $entry-icon-size;
   }
   border: 1px solid var(--color-primary);
 }
 
 // ***************************************************************************************
-// Steps - To sort
+// Inputs - General
 // ***************************************************************************************
 .mat-mdc-form-field {
   margin-top: 16px;
 }
 
-.dialog-content {
-  position: relative;
-  padding-bottom: 2rem;
-}
-
-.investmentsContentContainer {
-  display: flex;
-  justify-content: space-evenly;
-  gap: 1rem;
-  width: 100%;
-  flex-direction: row;
-  margin-bottom: 1.5rem;
-  margin-top: 2rem;
-}
-
 label {
   font-size: 14px;
   font-weight: 400;
diff --git a/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.ts b/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.ts
index 4fbf5b2e2..c79b47761 100644
--- a/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.ts
+++ b/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.ts
@@ -5,97 +5,107 @@ import { PicsaDialogService } from '@picsa/shared/features';
 
 import { ENTRY_TEMPLATE, IOptionsToolEntry } from '../../schemas';
 
+const PERFORMANCE_CONDITIONS = [
+  {
+    id: 'lowRf',
+    label: translateMarker('Low'),
+    svgIcon: 'picsa_options_rain_low',
+  },
+  {
+    id: 'midRf',
+    label: translateMarker('Mid'),
+    svgIcon: 'picsa_options_rain_medium',
+  },
+  {
+    id: 'highRf',
+    label: translateMarker('High'),
+    svgIcon: 'picsa_options_rain_high',
+  },
+];
+
+const INVESTMENT_TYPES = [
+  {
+    id: 'money',
+    label: translateMarker('Money'),
+    matIcon: 'payments',
+  },
+  {
+    id: 'time',
+    label: translateMarker('Time'),
+    matIcon: 'schedule',
+  },
+];
+
+const STEPPER_STEPS = [
+  {
+    id: 'practice',
+    label: translateMarker('Practice'),
+    title: translateMarker('Name of practice'),
+  },
+  {
+    id: 'gender_decisions',
+    label: translateMarker('Decisions'),
+    title: translateMarker('Who makes decisions'),
+  },
+  {
+    id: 'gender_activities',
+    label: translateMarker('Activities'),
+    title: translateMarker('Who does the activity'),
+  },
+  {
+    id: 'benefits',
+    label: translateMarker('Benefits'),
+    title: translateMarker('Benefits and who'),
+  },
+  {
+    id: 'performance',
+    label: translateMarker('Performance'),
+    title: translateMarker('Performance in high, mid and low rainfall'),
+  },
+  {
+    id: 'investment',
+    label: translateMarker('Investment'),
+    title: translateMarker('Investment in terms of money and time'),
+  },
+  {
+    id: 'time',
+    label: translateMarker('Time'),
+    title: translateMarker('Time to start benefiting'),
+  },
+  {
+    id: 'risk',
+    label: translateMarker('Risk'),
+    title: translateMarker('Risk of practice (disadvantage)'),
+  },
+];
+
 @Component({
   selector: 'option-editor',
   templateUrl: './editor.component.html',
   styleUrls: ['./editor.component.scss'],
 })
 export class EditorComponent {
-  values = ENTRY_TEMPLATE();
-
-  public performanceConditions = [
-    {
-      id: 'lowRf',
-      label: 'Low',
-      svgIcon: 'picsa_options_rain_low',
-    },
-    {
-      id: 'midRf',
-      label: 'Mid',
-      svgIcon: 'picsa_options_rain_medium',
-    },
-    {
-      id: 'highRf',
-      label: 'High',
-      svgIcon: 'picsa_options_rain_high',
-    },
-  ];
-
-  investmentOptions: string[] = ['low', 'mid', 'high'];
-
-  /** */
-  public stepperSteps = [
-    {
-      id: 'practice',
-      label: translateMarker('Practice'),
-      title: translateMarker('Name of practice'),
-    },
-    {
-      id: 'gender_decisions',
-      label: translateMarker('Decisions'),
-      title: translateMarker('Who makes decisions'),
-    },
-    {
-      id: 'gender_activities',
-      label: translateMarker('Activities'),
-      title: translateMarker('Who does the activity'),
-    },
-    {
-      id: 'benefits',
-      label: translateMarker('Benefits'),
-      title: translateMarker('Benefits and who'),
-    },
-    {
-      id: 'performance',
-      label: translateMarker('Performance'),
-      title: translateMarker('Performance in high, mid and low rainfall'),
-    },
-    {
-      id: 'investment',
-      label: translateMarker('Investment'),
-      title: translateMarker('Investment in terms of money and time'),
-    },
-    {
-      id: 'time',
-      label: translateMarker('Time'),
-      title: translateMarker('Time to start benefiting'),
-    },
-    {
-      id: 'risk',
-      label: translateMarker('Risk'),
-      title: translateMarker('Risk of practice (disadvantage)'),
-    },
-  ];
+  public values = ENTRY_TEMPLATE();
+  public performanceConditions = PERFORMANCE_CONDITIONS;
+  public investmentTypes = INVESTMENT_TYPES;
+  public stepperSteps = STEPPER_STEPS;
 
   @ViewChild(MatStepper) stepper: MatStepper;
   @Output() dataTransfer = new EventEmitter<IOptionsToolEntry | null>();
 
   constructor(private dialog: PicsaDialogService) {}
 
-  handleBenficiaryGender(index: number, value: string[]) {
-    this.values.benefits[index].beneficiary = value;
-  }
-  handleRemovingBenefits(index: number) {
+  public handleRemovingBenefits(index: number) {
     this.values.benefits.splice(index, 1);
   }
-  handleMoreBenefits() {
+  public handleMoreBenefits() {
     this.values.benefits.push({
       benefit: '',
       beneficiary: [],
     });
   }
 
-  async submitForm() {
+  public async submitForm() {
     // minimum for auto save should be at least a name
     if (!this.values.practice) {
       this.dataTransfer.emit(null);
@@ -105,34 +115,11 @@ export class EditorComponent {
     this.resetVariables();
     this.resetStepper();
   }
-  resetVariables() {
-    this.values = ENTRY_TEMPLATE();
-  }
-  //incase of edits
-  presetVariables(rowData: IOptionsToolEntry) {
+  // Allow update from home copmonent
+  public presetVariables(rowData: IOptionsToolEntry) {
     this.values = rowData;
   }
-  resetStepper(): void {
-    this.stepper.reset();
-  }
-
-  updateInvestmentEffort(event: any, investment: string) {
-    const selectedValue = event.target.value;
-    if (investment === 'time') {
-      this.values.investment = {
-        ...this.values.investment,
-        time: this.investmentOptions[selectedValue],
-      };
-    }
-    if (investment === 'money') {
-      this.values.investment = {
-        ...this.values.investment,
-        money: this.investmentOptions[selectedValue],
-      };
-    }
-  }
-
-  async promptDelete() {
+  public async promptDelete() {
     const dialogRef = await this.dialog.open('delete');
     dialogRef.afterClosed().subscribe((shouldDelete) => {
       if (shouldDelete) {
@@ -140,4 +127,11 @@ export class EditorComponent {
       }
     });
   }
+  private resetVariables() {
+    this.values = ENTRY_TEMPLATE();
+  }
+
+  private resetStepper(): void {
+    this.stepper.reset();
+  }
 }
diff --git a/apps/picsa-tools/option-tool/src/app/pages/home/home.component.html b/apps/picsa-tools/option-tool/src/app/pages/home/home.component.html
index d5994ec9e..985f24f80 100644
--- a/apps/picsa-tools/option-tool/src/app/pages/home/home.component.html
+++ b/apps/picsa-tools/option-tool/src/app/pages/home/home.component.html
@@ -69,57 +69,17 @@
       <!-- Investment Column -->
       <ng-container matColumnDef="investment">
         <th mat-header-cell *matHeaderCellDef>{{ 'Investment' | translate }}</th>
-        <td mat-cell *matCellDef="let element">
-          <!-- <div
-            style="
-              display: flex;
-              flex-direction: row;
-              padding: 4px;
-              max-width: 14rem;
-              justify-content: space-between;
-              align-items: flex-start;
-            "
-          >
-            <div class="performance-container">
-              <mat-icon style="color: #8a2644; font-size: 20px">payments</mat-icon>
-              <mat-icon
-                *ngIf="element._data.investment.money === 'low'"
-                svgIcon="picsa_options_thumbs_up"
-                class="emoji_size"
-              ></mat-icon>
-              <mat-icon
-                *ngIf="element._data.investment.money === 'mid'"
-                svgIcon="picsa_options_fist_bump"
-                class="emoji_size"
-              ></mat-icon>
-              <mat-icon
-                *ngIf="element._data.investment.money === 'high'"
-                svgIcon="picsa_options_thumbs_down"
-                class="emoji_size"
-              ></mat-icon>
-              <div class="weatherValue">{{ element._data.investment.money | translate }}</div>
-            </div>
-            <div class="vertical-line"></div>
-            <div class="performance-container">
-              <mat-icon style="color: #8a2644; font-size: 20px">schedule</mat-icon>
-              <mat-icon
-                *ngIf="element._data.investment.time === 'low'"
-                svgIcon="picsa_options_thumbs_up"
-                class="emoji_size"
-              ></mat-icon>
-              <mat-icon
-                *ngIf="element._data.investment.time === 'mid'"
-                svgIcon="picsa_options_fist_bump"
-                class="emoji_size"
-              ></mat-icon>
-              <mat-icon
-                *ngIf="element._data.investment.time === 'high'"
-                svgIcon="picsa_options_thumbs_down"
-                class="emoji_size"
-              ></mat-icon>
-              <div class="weatherValue">{{ element._data.investment.time | translate }}</div>
-            </div>
-          </div> -->
+        <td mat-cell *matCellDef="let element" class="split-values">
+          <div>
+            <option-investment-input
+              [(ngModel)]="element._data.investment.money"
+              [options]="{ readonly: true }"
+            ></option-investment-input>
+            <option-investment-input
+              [(ngModel)]="element._data.investment.time"
+              [options]="{ readonly: true }"
+            ></option-investment-input>
+          </div>
         </td>
       </ng-container>