From a13657d5e86c838097ffe8c10dcde15edb52c8c0 Mon Sep 17 00:00:00 2001
From: khaifan-kfan <khalifanmuwonge@gmail.com>
Date: Thu, 13 Apr 2023 16:30:59 -0700
Subject: [PATCH 1/4] enable auto save

---
 .../components/editor/editor.component.html   |  13 +-
 .../components/editor/editor.component.scss   |  14 +-
 .../app/components/editor/editor.component.ts | 203 +++++++++---------
 .../src/app/pages/home/home.component.html    |   4 +-
 .../src/app/pages/home/home.component.scss    |   2 +
 .../src/app/pages/home/home.component.ts      |  10 +-
 yarn.lock                                     |   2 +-
 7 files changed, 139 insertions(+), 109 deletions(-)

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 c78426605..93365caef 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,7 +1,13 @@
 <div class="dialog-content">
   <div class="warningText">{{warningText}}</div>
-  <button *ngIf="editMode" class="saveButtonPosition" mat-button mat-raised-button (click)="submitForm()"
+  <button *ngIf="editMode" class="saveButtonPosition" mat-button mat-raised-button (click)="submitForm('save')"
     color="primary">Save Changes</button>
+  <div class="closeButtonsPosition" >
+  <button *ngIf="!editMode"  mat-button mat-raised-button (click)="submitForm('save')"
+    color="primary">Save & Close</button>
+  <button  mat-button mat-raised-button (click)="submitForm('exit')"
+    color="primary">Cancel</button>
+  </div>
   <mat-stepper [linear]="isLinear" #stepper>
     <mat-step matStepContent>
       <ng-template matStepLabel>Practice</ng-template>
@@ -197,9 +203,8 @@
         <div class="ButtonSection">
           <button style="background-color: #ccc;" matStepperPrevious mat-button>Back</button>
           <button style="background-color: #ccc; margin-left: 1rem;" mat-button (click)="stepper.reset()">Reset</button>
-          <button [style.opacity]="risk ? 1 : 0.5" [disabled]="!risk" (click)="submitForm()"
-            style="background-color: #ccc; margin-left: 1rem;" mat-button>finish</button>
-
+          <!-- <button [style.opacity]="risk ? 1 : 0.5" [disabled]="!risk" (click)="submitForm('save')"
+            style="background-color: #ccc; margin-left: 1rem;" mat-button>finish</button> -->
         </div>
       </div>
     </mat-step>
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 5f4fd5a75..ed908eecf 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,5 +1,5 @@
 .mat-stepper-horizontal {
-  margin-top: 8px;
+  margin-top: 27px;
 }
 
 .mat-mdc-form-field {
@@ -18,7 +18,17 @@
   .saveButtonPosition {
     position: absolute;
     left: 20px;
-    top: 20px
+    top: 20px;
+  }
+  .closeButtonsPosition{
+    position: absolute;
+    right:20px;
+    top: 20px;
+    display: flex;
+    flex-direction: row;
+    
+    gap: 3rem;
+    justify-content: flex-end;
   }
 
   .StepTitle {
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 271b740a6..9b2ea226d 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
@@ -1,12 +1,12 @@
-import {Component,EventEmitter, OnInit, Output ,ViewChild} from '@angular/core';
+import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
 import { MatStepper } from '@angular/material/stepper'
 
 export interface IOptionData {
   practice: string;
-  gender: string [];
-  benefits: {benefit:string, beneficiary:string[]} [];
-  performance:{lowRf:string, midRf:string,  highRf:string};
-  investment: {money:string, time:string};
+  gender: string[];
+  benefits: { benefit: string, beneficiary: string[] }[];
+  performance: { lowRf: string, midRf: string, highRf: string };
+  investment: { money: string, time: string };
   time: string;
   risk: string;
 }
@@ -19,17 +19,17 @@ export class EditorComponent implements OnInit {
   // stepCounter: number;
   warningText: string;
   practiceEntry: string;
-  gender: string [];
-  benefits: {benefit:string, beneficiary:string[]} [];
-  perfomanceValues: {lowRf:string, midRf:string,  highRf:string};  
-  performanceOptions: string[]=['good','ok','bad']
-  investmentValues: {money:string, time:string};  
-  investmentOptions: string[]=['high','mid','low']
+  gender: string[];
+  benefits: { benefit: string, beneficiary: string[] }[];
+  perfomanceValues: { lowRf: string, midRf: string, highRf: string };
+  performanceOptions: string[] = ['good', 'ok', 'bad']
+  investmentValues: { money: string, time: string };
+  investmentOptions: string[] = ['high', 'mid', 'low']
   benefitsStartTime: string;
-  risk:string;
+  risk: string;
   isLinear = false;
-  editMode= false
-  editIndex:number;
+  editMode = false
+  editIndex: number;
 
   @ViewChild(MatStepper) stepper: MatStepper;
 
@@ -37,48 +37,48 @@ export class EditorComponent implements OnInit {
 
   ngOnInit(): void {
     // this.stepCounter = 1;
-    this.gender=[],
-    this.benefits=[{
-      benefit:'',
-      beneficiary:[]
-    },
-  ]
-  this.perfomanceValues = { lowRf:"ok",midRf:"ok",highRf:"ok"}
-  this.investmentValues = {money:'high', time:'high'}
-  this.warningText='';
-  this.practiceEntry='';
-  this.gender= [];
-  this.perfomanceValues= {lowRf:"", midRf:"",  highRf:""};  
-  this.investmentValues={money:"", time:""};  
-  this.benefitsStartTime ="";
-  this.risk="";
-  this.editIndex = -1;
-  
+    this.gender = [],
+      this.benefits = [{
+        benefit: '',
+        beneficiary: []
+      },
+      ]
+    this.perfomanceValues = { lowRf: "ok", midRf: "ok", highRf: "ok" }
+    this.investmentValues = { money: 'high', time: 'high' }
+    this.warningText = '';
+    this.practiceEntry = '';
+    this.gender = [];
+    this.perfomanceValues = { lowRf: "", midRf: "", highRf: "" };
+    this.investmentValues = { money: "", time: "" };
+    this.benefitsStartTime = "";
+    this.risk = "";
+    this.editIndex = -1;
+
   }
-  
-  handleGender(gender:string){
-    if(!this.gender.includes(gender)){
+
+  handleGender(gender: string) {
+    if (!this.gender.includes(gender)) {
       this.gender.push(gender)
-    }else{
-     const index = this.gender.indexOf(gender)
-     this.gender.splice(index, 1);
+    } else {
+      const index = this.gender.indexOf(gender)
+      this.gender.splice(index, 1);
     }
   }
-  handleBenficiaryGender(index:number, gender:string){
-    if(!this.benefits[index].beneficiary.includes(gender)){
+  handleBenficiaryGender(index: number, gender: string) {
+    if (!this.benefits[index].beneficiary.includes(gender)) {
       this.benefits[index].beneficiary.push(gender)
-    }else{
+    } else {
       const itemIndex = this.benefits[index].beneficiary.indexOf(gender)
       this.benefits[index].beneficiary.splice(itemIndex, 1);
     }
   }
-  handleRemovingBenefits(index:number){
+  handleRemovingBenefits(index: number) {
     this.benefits.splice(index, 1);
   }
-  handleMoreBenefits(){
+  handleMoreBenefits() {
     this.benefits.push({
-      benefit:'',
-      beneficiary:[]
+      benefit: '',
+      beneficiary: []
     })
   }
 
@@ -90,66 +90,75 @@ export class EditorComponent implements OnInit {
     return true;
   }
 
-  async submitForm  (){
+  async submitForm(action: string) {
     //compile collected data
-    if(this.practiceEntry &&
-      this.gender.length > 0 &&
-      this.benefitsStartTime &&
-      this.risk){
-    const finalObject = {
-      data:{
-      practice:this.practiceEntry,
-      gender: this.gender,
-      benefits:this.benefits,
-      performance:this.perfomanceValues,
-      investment:this.investmentValues,
-      time:this.benefitsStartTime,
-      risk:this.risk
-    },
-    index:this.editIndex
-  }
-     this.dataTransfer.emit(finalObject);
-     this.resetVariables()
-     this.resetStepper()
-    }else{
-      this.warningText = "Please fill all the fields"
+    // minimum for auto save should be at least a name
+    if (action === 'save') {
+      if (this.practiceEntry && (
+        this.gender.length > 0 ||
+        this.benefitsStartTime ||
+        this.risk || this.benefits.length > 0
+      )
+      ) {
+        const finalObject = {
+          data: {
+            practice: this.practiceEntry,
+            gender: this.gender,
+            benefits: this.benefits,
+            performance: this.perfomanceValues,
+            investment: this.investmentValues,
+            time: this.benefitsStartTime,
+            risk: this.risk
+          },
+          index: this.editIndex
+        }
+        this.dataTransfer.emit(finalObject);
+        this.resetVariables()
+        this.resetStepper()
+      } else {
+        this.warningText = "Fill atleast the name feild to save"
+      }
+    } else if (action === 'exit') {
+      this.dataTransfer.emit(null);
+      this.resetVariables()
+      this.resetStepper()
     }
   }
-  resetVariables(){
+  resetVariables() {
     // Reset variables when the component is destroyed.
-    this.gender=[],
-    this.benefits=[{
-      benefit:'',
-      beneficiary:[]
-    },
-  ]
-  this.perfomanceValues = { lowRf:"ok",midRf:"ok",highRf:"ok"}
-  this.investmentValues = {money:'high', time:'high'}
-  this.warningText='';
-  this.practiceEntry='';
-  this.gender= [];
-  this.perfomanceValues= {lowRf:"", midRf:"",  highRf:""};  
-  this.investmentValues={money:"", time:""};  
-  this.benefitsStartTime ="";
-  this.risk=""
-  this.editIndex=-1
-  this.editMode=false
+    this.gender = [],
+      this.benefits = [{
+        benefit: '',
+        beneficiary: []
+      },
+      ]
+    this.perfomanceValues = { lowRf: "ok", midRf: "ok", highRf: "ok" }
+    this.investmentValues = { money: 'high', time: 'high' }
+    this.warningText = '';
+    this.practiceEntry = '';
+    this.gender = [];
+    this.perfomanceValues = { lowRf: "", midRf: "", highRf: "" };
+    this.investmentValues = { money: "", time: "" };
+    this.benefitsStartTime = "";
+    this.risk = ""
+    this.editIndex = -1
+    this.editMode = false
   }
   //incase of edits
-  presetVariables(rowData:IOptionData,index:number){
-  //remove all warinings 
-  this.warningText='';
-  //editor
-  this.editMode =true;
-  this.editIndex =index;
+  presetVariables(rowData: IOptionData, index: number) {
+    //remove all warinings 
+    this.warningText = '';
+    //editor
+    this.editMode = true;
+    this.editIndex = index;
 
-  this.benefits= rowData.benefits
-  this.perfomanceValues = rowData.performance
-  this.investmentValues = rowData.investment
-  this.practiceEntry=rowData.practice
-  this.gender= rowData.gender;  
-  this.benefitsStartTime =rowData.time
-  this.risk=rowData.risk
+    this.benefits = rowData.benefits
+    this.perfomanceValues = rowData.performance
+    this.investmentValues = rowData.investment
+    this.practiceEntry = rowData.practice
+    this.gender = rowData.gender;
+    this.benefitsStartTime = rowData.time
+    this.risk = rowData.risk
   }
   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 3ef3416f0..c98867063 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
@@ -84,8 +84,8 @@
 </div>
 <div  class="slide-in container" [class.active]="matStepperOpen">
   <div>
-   <option-editor  (dataTransfer)="onDataTransfer($event)"></option-editor>
+   <option-editor (dataTransfer)="onDataTransfer($event)"></option-editor>
 </div>
-  <button class="buttonposition" mat-button mat-raised-button (click)="closeDialog()" color="primary">Close</button>
+  <!-- <button class="buttonposition" mat-button mat-raised-button (click)="closeButtonAction()" color="primary">Close</button> -->
 </div>
 </div>
\ No newline at end of file
diff --git a/apps/picsa-tools/option-tool/src/app/pages/home/home.component.scss b/apps/picsa-tools/option-tool/src/app/pages/home/home.component.scss
index ec7260397..26f982b83 100644
--- a/apps/picsa-tools/option-tool/src/app/pages/home/home.component.scss
+++ b/apps/picsa-tools/option-tool/src/app/pages/home/home.component.scss
@@ -31,9 +31,11 @@ th {
 .slide-in {
   position: absolute;
   bottom: 0;
+  display: none;
   transition: transform 0.3s ease-in-out;
   transform: translateY(100%);
 }
 .slide-in.active {
   transform: translateY(0);
+  display: block;
 }
\ No newline at end of file
diff --git a/apps/picsa-tools/option-tool/src/app/pages/home/home.component.ts b/apps/picsa-tools/option-tool/src/app/pages/home/home.component.ts
index 5b167e4e7..a2d13cc7e 100644
--- a/apps/picsa-tools/option-tool/src/app/pages/home/home.component.ts
+++ b/apps/picsa-tools/option-tool/src/app/pages/home/home.component.ts
@@ -33,9 +33,10 @@ export class HomeComponent {
   public closeDialog(){
     this.matStepperOpen = false
   }
-  onDataTransfer(data:{data:IOptionData,index:number}) {
+  onDataTransfer(data:{data:IOptionData, index:number} | null ) {
     console.log('Received data from editor:', data);
     // close the child component
+    if(data){
     if(data.index > -1){
     this.dataSource[data.index]=data.data
     //invoke change detaction
@@ -43,8 +44,11 @@ export class HomeComponent {
     }else{
     this.dataSource = [...this.dataSource, data.data];
     }
-    //detect change for the case of editing a raw
-    this.matStepperOpen = false;
+    this.closeDialog()
+    }else {
+      this.closeDialog()
+    }
+
   }
   openNewDialog(){
     this.editorComponent.resetVariables();
diff --git a/yarn.lock b/yarn.lock
index 3f0a6a9bc..8979edff7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14242,7 +14242,7 @@ __metadata:
 "leaflet-draw@github:enketo/Leaflet.draw#ff73078, leaflet-draw@github:enketo/Leaflet.draw#ff730785db7fcccbf2485ffcf4dffe1238a7c617":
   version: 1.0.4
   resolution: "leaflet-draw@https://github.com/enketo/Leaflet.draw.git#commit=ff730785db7fcccbf2485ffcf4dffe1238a7c617"
-  checksum: b08b88994769667f11f2b6a8937656c89cea34dafd4661abab0b48b4b97f3bddbdce7b23ddfdb8d7c6335e065530e32a70e281314afa34afa134bf68597945fc
+  checksum: 3355536876801db43416148550fbdce61064a366c15815b2f031251cd8c764493646cae62eeb5c038f9e6f4ef8207e6efad34cefd87d4f161e1fbacd94b70e91
   languageName: node
   linkType: hard
 

From dbe45924cbb8ecc6e85e5971ae9d8b9a18ae3196 Mon Sep 17 00:00:00 2001
From: khaifan-kfan <khalifanmuwonge@gmail.com>
Date: Thu, 13 Apr 2023 17:41:03 -0700
Subject: [PATCH 2/4] new yarn lock

---
 yarn.lock | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 6ab417681..8979edff7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14242,7 +14242,7 @@ __metadata:
 "leaflet-draw@github:enketo/Leaflet.draw#ff73078, leaflet-draw@github:enketo/Leaflet.draw#ff730785db7fcccbf2485ffcf4dffe1238a7c617":
   version: 1.0.4
   resolution: "leaflet-draw@https://github.com/enketo/Leaflet.draw.git#commit=ff730785db7fcccbf2485ffcf4dffe1238a7c617"
-  checksum: b2280f200f5ea410e33cc5feb500d67d86cb5f16b294eea1306da055614ffc906be7de6dbc9bbf4db6e6e5d27d0396e4701a3b6c4c920548d2aac94b8223879f
+  checksum: 3355536876801db43416148550fbdce61064a366c15815b2f031251cd8c764493646cae62eeb5c038f9e6f4ef8207e6efad34cefd87d4f161e1fbacd94b70e91
   languageName: node
   linkType: hard
 
@@ -20567,4 +20567,4 @@ __metadata:
     tslib: ^2.3.0
   checksum: 59ec5450a9059b9b549125cfb9c5b7d6dd0b5116503e198610cfc52d93e2da586b6c84f4506ef9260261a24714fe9d9a14be27e902e78b88085f7b42ffcd0aad
   languageName: node
-  linkType: hard
\ No newline at end of file
+  linkType: hard

From fd6359c9f37bba9671797f9aaf1394dc1846da11 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Fri, 14 Apr 2023 18:55:35 -0700
Subject: [PATCH 3/4] chore: code tidying

---
 .../components/editor/editor.component.html   | 242 +++++++++++-------
 .../components/editor/editor.component.scss   |  41 +--
 .../app/components/editor/editor.component.ts | 163 ++++++------
 .../src/app/pages/home/home.component.html    | 146 +++++------
 .../src/app/pages/home/home.component.ts      |  67 +++--
 5 files changed, 329 insertions(+), 330 deletions(-)

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 93365caef..4ea5e609f 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,14 +1,7 @@
 <div class="dialog-content">
-  <div class="warningText">{{warningText}}</div>
-  <button *ngIf="editMode" class="saveButtonPosition" mat-button mat-raised-button (click)="submitForm('save')"
-    color="primary">Save Changes</button>
-  <div class="closeButtonsPosition" >
-  <button *ngIf="!editMode"  mat-button mat-raised-button (click)="submitForm('save')"
-    color="primary">Save & Close</button>
-  <button  mat-button mat-raised-button (click)="submitForm('exit')"
-    color="primary">Cancel</button>
-  </div>
+  <button class="saveButtonPosition" mat-button mat-raised-button (click)="submitForm()" color="primary">Close</button>
   <mat-stepper [linear]="isLinear" #stepper>
+    <!-- Practice -->
     <mat-step matStepContent>
       <ng-template matStepLabel>Practice</ng-template>
       <div class="StepContainer">
@@ -16,108 +9,156 @@
         <div class="StepContent">
           <div class="form-group">
             <label>Practice Name</label>
-            <input [(ngModel)]="practiceEntry" class="form-control">
+            <input [(ngModel)]="practiceEntry" class="form-control" />
           </div>
         </div>
         <div>
-          <button [style.opacity]="practiceEntry ? 1 : 0.5" [disabled]="!practiceEntry" style="background-color: #ccc;"
-            mat-button mat-button matStepperNext>Next</button>
+          <button mat-raised-button color="primary" [disabled]="!practiceEntry" matStepperNext>Next</button>
         </div>
+        <button mat-stroked-button style="margin-top: 3em" (click)="promptDelete()" [disabled]="!practiceEntry">
+          <mat-icon name="delete">delete</mat-icon>Delete
+        </button>
       </div>
     </mat-step>
 
+    <!-- Who does it -->
     <mat-step matStepContent label="Gender ">
       <div class="StepContainer">
         <div class="StepTitle">Who does the practice?</div>
         <div class="StepContent">
           <div class="genderDiv">
-            <div class="genderType" style="color: #800080;" (click)="handleGender('female')"
-              [ngStyle]="{'background-color': gender.includes('female') ? 'pink' : 'lightgray'}">Female 
-              <!-- <img
-                *ngIf="femaleIcon" [src]="femaleIcon" /> -->
-                <mat-icon svgIcon="picsa_options_female"></mat-icon>
-              </div>
-            <div class="genderType" (click)="handleGender('male')" style="color: #008066;"
-              [ngStyle]="{'background-color': gender.includes('male') ? 'pink' : 'lightgray'}">Male
-              <!-- <img *ngIf="maleIcon" [src]="maleIcon" /> -->
+            <div
+              class="genderType"
+              style="color: #800080"
+              (click)="handleGender('female')"
+              [ngStyle]="{
+                'background-color': gender.includes('female') ? 'wheat' : 'lightgray'
+              }"
+            >
+              Female
+              <mat-icon svgIcon="picsa_options_female"></mat-icon>
+            </div>
+            <div
+              class="genderType"
+              (click)="handleGender('male')"
+              style="color: #008066"
+              [ngStyle]="{
+                'background-color': gender.includes('male') ? 'wheat' : 'lightgray'
+              }"
+            >
+              Male
               <mat-icon svgIcon="picsa_options_male"></mat-icon>
             </div>
           </div>
-          <div style="height: 1rem;"> {{gender.length>1 ? gender.join(" and "): gender[0]}} </div>
+          <div style="height: 1rem">
+            {{ gender.length > 1 ? gender.join(' and ') : gender[0] }}
+          </div>
         </div>
         <div class="ButtonSection">
-          <button style="background-color: #ccc;" mat-button matStepperPrevious>Back</button>
-          <button [style.opacity]="(gender.length>0) ? 1 : 0.5" [disabled]="!(gender.length>0)"
-            style="background-color: #ccc; margin-left: 2rem;" mat-button matStepperNext>Next</button>
+          <button mat-button matStepperPrevious>Back</button>
+          <button mat-raised-button color="primary" [disabled]="!(gender.length > 0)" matStepperNext>Next</button>
         </div>
       </div>
     </mat-step>
 
+    <!-- Benefits -->
     <mat-step matStepContent label="Benefits ">
       <div class="StepContainer">
         <div class="StepTitle">Benefits and who?</div>
         <div class="StepContent">
-          <div style="margin-bottom: 1.5rem; padding: 2px; margin-top: 2rem;">
-            <div *ngFor="let benefit of benefits; index as i ">
-              <div style="display: flex; flex-direction: row; gap: 3px; padding-bottom: 3px;">
-                <textarea [(ngModel)]="benefit.benefit" class="form-control" ></textarea>
-                <div class="genderType" style="color: #800080; padding: 3px; height: 6rem;  "
-                  (click)="handleBenficiaryGender(i,'female')"
-                  [ngStyle]="{'background-color': benefit.beneficiary.includes('female') ? 'pink' : 'lightgray'}">Female
-                  <!-- <img *ngIf="femaleIcon" [src]="femaleIcon" /> -->
+          <div style="margin-bottom: 1.5rem; padding: 2px; margin-top: 2rem">
+            <div *ngFor="let benefit of benefits; index as i">
+              <div style="display: flex; flex-direction: row; gap: 3px; padding-bottom: 3px">
+                <textarea [(ngModel)]="benefit.benefit" class="form-control"></textarea>
+                <div
+                  class="genderType"
+                  style="color: #800080; padding: 3px; height: 6rem"
+                  (click)="handleBenficiaryGender(i, 'female')"
+                  [ngStyle]="{
+                    'background-color': benefit.beneficiary.includes('female') ? 'wheat' : 'lightgray'
+                  }"
+                >
+                  Female
                   <mat-icon svgIcon="picsa_options_female"></mat-icon>
                 </div>
-                <div class="genderType" (click)="handleBenficiaryGender(i,'male')"
-                  style="color: #008066; padding: 3px;  height: 6rem;"
-                  [ngStyle]="{'background-color': benefit.beneficiary.includes('male') ? 'pink' : 'lightgray'}">Male
-                  <!-- <img
-                    *ngIf="maleIcon" [src]="maleIcon" /> -->
-                    <mat-icon svgIcon="picsa_options_male"></mat-icon>
-                  </div>
-                <div class="delete-button" (click)="handleRemovingBenefits(i)" mat-button>Delete <mat-icon>delete</mat-icon></div>
+                <div
+                  class="genderType"
+                  (click)="handleBenficiaryGender(i, 'male')"
+                  style="color: #008066; padding: 3px; height: 6rem"
+                  [ngStyle]="{
+                    'background-color': benefit.beneficiary.includes('male') ? 'wheat' : 'lightgray'
+                  }"
+                >
+                  Male
+                  <mat-icon svgIcon="picsa_options_male"></mat-icon>
+                </div>
+                <button
+                  mat-button
+                  color="primary"
+                  (click)="handleRemovingBenefits(i)"
+                  [disabled]="!benefits[i] || !benefits[i].benefit"
+                >
+                  <mat-icon>close</mat-icon>
+                </button>
               </div>
             </div>
-            <button style="background-color: #ccc; float: left; margin-top: 7px;" (click)="handleMoreBenefits()"
-              mat-button>+ Add benefit </button>
+            <button style="float: left; margin-top: 7px" (click)="handleMoreBenefits()" mat-button>
+              + Add benefit
+            </button>
           </div>
         </div>
         <div class="ButtonSection">
-          <button style="background-color: #ccc;" matStepperPrevious mat-button>Back</button>
-          <button [style.opacity]="(benefits.length>0) ? 1 : 0.5" [disabled]="!(benefits.length>0)"
-            style="background-color: #ccc; margin-left: 2rem;" mat-button matStepperNext>Next</button>
+          <button matStepperPrevious mat-button>Back</button>
+          <button mat-raised-button color="primary" [disabled]="!(benefits.length > 0)" matStepperNext>Next</button>
         </div>
       </div>
     </mat-step>
 
+    <!-- Performance -->
     <mat-step matStepContent label="Perfomence">
       <div class="StepContainer">
         <div class="StepTitle">Performence in high, mid and low RF (rainfall)?</div>
         <div class="StepContent">
-          <mat-icon style="color:  #4FC3F7; font-size: 27px;" >water_drop</mat-icon>
+          <mat-icon style="color: #4fc3f7; font-size: 27px">water_drop</mat-icon>
           <div
-            style="display: flex; gap: 1rem; justify-content: space-evenly; width: 100%; flex-direction: row; margin-bottom: 1.5rem; margin-top: 2rem;">
+            style="
+              display: flex;
+              gap: 1rem;
+              justify-content: space-evenly;
+              width: 100%;
+              flex-direction: row;
+              margin-bottom: 1.5rem;
+              margin-top: 2rem;
+            "
+          >
             <div class="performenceItem">
-              <div style="font-weight: 700;  ">High RF</div>
-              <select style="width: 5rem; height: 2rem; font-size:14px; margin-top: 5px; outline-color:#8a2644"
-                [(ngModel)]="perfomanceValues.highRf">
+              <div style="font-weight: 700">High RF</div>
+              <select
+                style="width: 5rem; height: 2rem; font-size: 14px; margin-top: 5px; outline-color: #8a2644"
+                [(ngModel)]="perfomanceValues.highRf"
+              >
                 <option *ngFor="let option of performanceOptions" [value]="option">
                   {{ option }}
                 </option>
               </select>
             </div>
             <div class="performenceItem">
-              <div style="font-weight: 700; ">Mid RF</div>
-              <select style="width: 5rem; height: 2rem; font-size:14px; margin-top: 5px; outline-color:#8a2644"
-                [(ngModel)]="perfomanceValues.midRf">
+              <div style="font-weight: 700">Mid RF</div>
+              <select
+                style="width: 5rem; height: 2rem; font-size: 14px; margin-top: 5px; outline-color: #8a2644"
+                [(ngModel)]="perfomanceValues.midRf"
+              >
                 <option *ngFor="let option of performanceOptions" [value]="option">
                   {{ option }}
                 </option>
               </select>
             </div>
             <div class="performenceItem">
-              <div style="font-weight: 700; ">Low RF</div>
-              <select style="width: 5rem; height: 2rem; font-size:14px; margin-top: 5px; outline-color:#8a2644"
-                [(ngModel)]="perfomanceValues.lowRf">
+              <div style="font-weight: 700">Low RF</div>
+              <select
+                style="width: 5rem; height: 2rem; font-size: 14px; margin-top: 5px; outline-color: #8a2644"
+                [(ngModel)]="perfomanceValues.lowRf"
+              >
                 <option *ngFor="let option of performanceOptions" [value]="option">
                   {{ option }}
                 </option>
@@ -126,34 +167,58 @@
           </div>
         </div>
         <div class="ButtonSection">
-          <button style="background-color: #ccc;" mat-button matStepperPrevious>Back</button>
+          <button mat-button matStepperPrevious>Back</button>
           <button
-            [style.opacity]="(perfomanceValues.lowRf && perfomanceValues.midRf && perfomanceValues.highRf) ? 1 : 0.5"
+            mat-raised-button
+            color="primary"
             [disabled]="!(perfomanceValues.lowRf && perfomanceValues.midRf && perfomanceValues.highRf)"
-            style="background-color: #ccc; margin-left: 2rem;" matStepperNext mat-button>Next</button>
+            matStepperNext
+          >
+            Next
+          </button>
         </div>
       </div>
     </mat-step>
 
+    <!-- Investment -->
     <mat-step matStepContent label="Investment">
       <div class="StepContainer">
         <div class="StepTitle">Investment in terms of money and time?</div>
         <div class="StepContent">
           <div
-            style="display: flex; justify-content: space-evenly; gap: 1rem; width: 100%; flex-direction: row; margin-bottom: 1.5rem; margin-top: 2rem;">
+            style="
+              display: flex;
+              justify-content: space-evenly;
+              gap: 1rem;
+              width: 100%;
+              flex-direction: row;
+              margin-bottom: 1.5rem;
+              margin-top: 2rem;
+            "
+          >
             <div class="performenceItem">
-              <div style="font-weight: 700; display: flex; flex-direction: row; justify-content: space-between;">Money <mat-icon style="color:#8a2644; font-size: 20px;">attach_money</mat-icon></div>
-              <select style="width: 5rem; height: 2rem; font-size:14px; margin-top: 9px; outline-color:#8a2644"
-                [(ngModel)]="investmentValues.money">
+              <div style="font-weight: 700; display: flex; flex-direction: row; justify-content: space-between">
+                Money
+                <mat-icon style="color: #8a2644; font-size: 20px">attach_money</mat-icon>
+              </div>
+              <select
+                style="width: 5rem; height: 2rem; font-size: 14px; margin-top: 9px; outline-color: #8a2644"
+                [(ngModel)]="investmentValues.money"
+              >
                 <option *ngFor="let option of investmentOptions" [value]="option">
                   {{ option }}
                 </option>
               </select>
             </div>
             <div class="performenceItem">
-              <div style="font-weight: 700; display: flex; flex-direction: row; justify-content: space-between;">Time  <mat-icon style="color:#8a2644; font-size: 20px;">access_time</mat-icon></div>
-              <select style="width: 5rem; height: 2rem; font-size:14px; margin-top: 9px; outline-color:#8a2644"
-                [(ngModel)]="investmentValues.time">
+              <div style="font-weight: 700; display: flex; flex-direction: row; justify-content: space-between">
+                Time
+                <mat-icon style="color: #8a2644; font-size: 20px">access_time</mat-icon>
+              </div>
+              <select
+                style="width: 5rem; height: 2rem; font-size: 14px; margin-top: 9px; outline-color: #8a2644"
+                [(ngModel)]="investmentValues.time"
+              >
                 <option *ngFor="let option of investmentOptions" [value]="option">
                   {{ option }}
                 </option>
@@ -162,52 +227,55 @@
           </div>
         </div>
         <div class="ButtonSection">
-          <button style="background-color: #ccc;" mat-button matStepperPrevious>Back</button>
-          <button [style.opacity]="(investmentValues.money && investmentValues.time) ? 1 : 0.5"
+          <button mat-button matStepperPrevious>Back</button>
+          <button
+            mat-raised-button
+            color="primary"
             [disabled]="!(investmentValues.money && investmentValues.time)"
-            style="background-color: #ccc; margin-left: 2rem;" mat-button matStepperNext>Next</button>
+            matStepperNext
+          >
+            Next
+          </button>
         </div>
       </div>
     </mat-step>
 
+    <!-- Time -->
     <mat-step matStepContent label="Time">
       <div class="StepContainer">
         <div class="StepTitle">Time to start benefiting</div>
         <div class="StepContent">
-          
           <div class="form-group">
-            <label style="font-weight: 700; display: flex; flex-direction: row; justify-content: space-between;">Time (months) <mat-icon style="color:#8a2644; font-size: 20px;" >date_range</mat-icon></label>
-            <input [(ngModel)]="benefitsStartTime" (keypress)="onlyNumbers($event)" class="form-control">
+            <label style="font-weight: 700; display: flex; flex-direction: row; justify-content: space-between"
+              >Time (months) <mat-icon style="color: #8a2644; font-size: 20px">date_range</mat-icon></label
+            >
+            <input [(ngModel)]="benefitsStartTime" (keypress)="onlyNumbers($event)" class="form-control" />
           </div>
-
         </div>
         <div class="ButtonSection">
-          <button style="background-color: #ccc; " matStepperPrevious mat-button>Back</button>
-          <button [style.opacity]="benefitsStartTime ? 1 : 0.5" [disabled]="!benefitsStartTime"
-            style="background-color: #ccc; margin-left: 2rem;" matStepperNext mat-button>Next</button>
+          <button matStepperPrevious mat-button>Back</button>
+          <button mat-raised-button color="primary" [disabled]="!benefitsStartTime" matStepperNext>Next</button>
         </div>
       </div>
     </mat-step>
 
+    <!-- Risk -->
     <mat-step matStepContent label="Risk">
-
       <div class="StepContainer">
         <div class="StepTitle">Risk of practice (disadvantage)</div>
         <div class="StepContent">
           <div class="form-group">
-            <label style="font-weight: 700; display: flex; flex-direction: row; justify-content: space-between;">Risk<mat-icon style="color:#e71236; font-size: 20px;" >warning</mat-icon></label>
-            <input style="margin-left: 4px;" [(ngModel)]="risk" class="form-control">
+            <label style="font-weight: 700; display: flex; flex-direction: row; justify-content: space-between"
+              >Risk<mat-icon style="color: #e71236; font-size: 20px">warning</mat-icon></label
+            >
+            <input style="margin-left: 4px" [(ngModel)]="risk" class="form-control" />
           </div>
-
         </div>
         <div class="ButtonSection">
-          <button style="background-color: #ccc;" matStepperPrevious mat-button>Back</button>
-          <button style="background-color: #ccc; margin-left: 1rem;" mat-button (click)="stepper.reset()">Reset</button>
-          <!-- <button [style.opacity]="risk ? 1 : 0.5" [disabled]="!risk" (click)="submitForm('save')"
-            style="background-color: #ccc; margin-left: 1rem;" mat-button>finish</button> -->
+          <button matStepperPrevious mat-button>Back</button>
+          <button mat-raised-button color="primary" [disabled]="!risk" (click)="submitForm()">Finish</button>
         </div>
       </div>
     </mat-step>
-
   </mat-stepper>
-</div>
\ No newline at end of file
+</div>
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 ed908eecf..b2a50d2ea 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
@@ -12,24 +12,13 @@
   font-size: 12px;
 }
 
-
 .dialog-content {
   padding-bottom: 2rem;
   .saveButtonPosition {
     position: absolute;
-    left: 20px;
+    right: 20px;
     top: 20px;
   }
-  .closeButtonsPosition{
-    position: absolute;
-    right:20px;
-    top: 20px;
-    display: flex;
-    flex-direction: row;
-    
-    gap: 3rem;
-    justify-content: flex-end;
-  }
 
   .StepTitle {
     display: flex;
@@ -43,7 +32,7 @@
     flex-direction: column;
     align-items: flex-start;
     width: 50%;
-    gap: .4rem;
+    gap: 0.4rem;
 
     .StepContent {
       display: flex;
@@ -77,30 +66,13 @@
         font-size: 16px;
         outline-color: #8a2644;
         padding: 5px;
-        white-space: pre-wrap; 
-        word-wrap: break-word; 
-        vertical-align: top; 
-      }
-      .delete-button{
-        color: red; 
-        background-color: white;
-        padding: 3px; 
-        height: 6rem;
-        width: 4rem;
-        font-weight: 700;
-        display: flex;
-        border-radius: 5px;
-        gap: 5px;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        border: 1px solid red;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        vertical-align: top;
       }
-      
 
       .ButtonSection {
         width: 15rem;
-
       }
     }
   }
@@ -126,5 +98,4 @@
     justify-content: center;
     text-align: center;
   }
-
-}
\ No newline at end of file
+}
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 9b2ea226d..ac6bcf452 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
@@ -1,12 +1,13 @@
 import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
-import { MatStepper } from '@angular/material/stepper'
+import { MatStepper } from '@angular/material/stepper';
+import { PicsaDialogService } from '@picsa/shared/features';
 
 export interface IOptionData {
   practice: string;
   gender: string[];
-  benefits: { benefit: string, beneficiary: string[] }[];
-  performance: { lowRf: string, midRf: string, highRf: string };
-  investment: { money: string, time: string };
+  benefits: { benefit: string; beneficiary: string[] }[];
+  performance: { lowRf: string; midRf: string; highRf: string };
+  investment: { money: string; time: string };
   time: string;
   risk: string;
 }
@@ -16,59 +17,53 @@ export interface IOptionData {
   styleUrls: ['./editor.component.scss'],
 })
 export class EditorComponent implements OnInit {
-  // stepCounter: number;
-  warningText: string;
   practiceEntry: string;
   gender: string[];
-  benefits: { benefit: string, beneficiary: string[] }[];
-  perfomanceValues: { lowRf: string, midRf: string, highRf: string };
-  performanceOptions: string[] = ['good', 'ok', 'bad']
-  investmentValues: { money: string, time: string };
-  investmentOptions: string[] = ['high', 'mid', 'low']
+  benefits: { benefit: string; beneficiary: string[] }[];
+  perfomanceValues: { lowRf: string; midRf: string; highRf: string };
+  performanceOptions: string[] = ['good', 'ok', 'bad'];
+  investmentValues: { money: string; time: string };
+  investmentOptions: string[] = ['high', 'mid', 'low'];
   benefitsStartTime: string;
   risk: string;
   isLinear = false;
-  editMode = false
-  editIndex: number;
 
   @ViewChild(MatStepper) stepper: MatStepper;
+  @Output() dataTransfer = new EventEmitter<IOptionData | null>();
 
-  @Output() dataTransfer = new EventEmitter();
+  constructor(private dialog: PicsaDialogService) {}
 
   ngOnInit(): void {
-    // this.stepCounter = 1;
-    this.gender = [],
-      this.benefits = [{
+    this.gender = [];
+    this.benefits = [
+      {
         benefit: '',
-        beneficiary: []
+        beneficiary: [],
       },
-      ]
-    this.perfomanceValues = { lowRf: "ok", midRf: "ok", highRf: "ok" }
-    this.investmentValues = { money: 'high', time: 'high' }
-    this.warningText = '';
+    ];
+    this.perfomanceValues = { lowRf: 'ok', midRf: 'ok', highRf: 'ok' };
+    this.investmentValues = { money: 'high', time: 'high' };
     this.practiceEntry = '';
     this.gender = [];
-    this.perfomanceValues = { lowRf: "", midRf: "", highRf: "" };
-    this.investmentValues = { money: "", time: "" };
-    this.benefitsStartTime = "";
-    this.risk = "";
-    this.editIndex = -1;
-
+    this.perfomanceValues = { lowRf: '', midRf: '', highRf: '' };
+    this.investmentValues = { money: '', time: '' };
+    this.benefitsStartTime = '';
+    this.risk = '';
   }
 
   handleGender(gender: string) {
     if (!this.gender.includes(gender)) {
-      this.gender.push(gender)
+      this.gender.push(gender);
     } else {
-      const index = this.gender.indexOf(gender)
+      const index = this.gender.indexOf(gender);
       this.gender.splice(index, 1);
     }
   }
   handleBenficiaryGender(index: number, gender: string) {
     if (!this.benefits[index].beneficiary.includes(gender)) {
-      this.benefits[index].beneficiary.push(gender)
+      this.benefits[index].beneficiary.push(gender);
     } else {
-      const itemIndex = this.benefits[index].beneficiary.indexOf(gender)
+      const itemIndex = this.benefits[index].beneficiary.indexOf(gender);
       this.benefits[index].beneficiary.splice(itemIndex, 1);
     }
   }
@@ -78,89 +73,75 @@ export class EditorComponent implements OnInit {
   handleMoreBenefits() {
     this.benefits.push({
       benefit: '',
-      beneficiary: []
-    })
+      beneficiary: [],
+    });
   }
 
   onlyNumbers(event): boolean {
-    const charCode = (event.which) ? event.which : event.keyCode;
+    const charCode = event.which ? event.which : event.keyCode;
     if (charCode > 31 && (charCode < 48 || charCode > 57)) {
       return false;
     }
     return true;
   }
 
-  async submitForm(action: string) {
-    //compile collected data
+  async submitForm() {
     // minimum for auto save should be at least a name
-    if (action === 'save') {
-      if (this.practiceEntry && (
-        this.gender.length > 0 ||
-        this.benefitsStartTime ||
-        this.risk || this.benefits.length > 0
-      )
-      ) {
-        const finalObject = {
-          data: {
-            practice: this.practiceEntry,
-            gender: this.gender,
-            benefits: this.benefits,
-            performance: this.perfomanceValues,
-            investment: this.investmentValues,
-            time: this.benefitsStartTime,
-            risk: this.risk
-          },
-          index: this.editIndex
-        }
-        this.dataTransfer.emit(finalObject);
-        this.resetVariables()
-        this.resetStepper()
-      } else {
-        this.warningText = "Fill atleast the name feild to save"
-      }
-    } else if (action === 'exit') {
+    if (!this.practiceEntry) {
       this.dataTransfer.emit(null);
-      this.resetVariables()
-      this.resetStepper()
+      return;
     }
+    const data: IOptionData = {
+      practice: this.practiceEntry,
+      gender: this.gender,
+      benefits: this.benefits,
+      performance: this.perfomanceValues,
+      investment: this.investmentValues,
+      time: this.benefitsStartTime,
+      risk: this.risk,
+    };
+    this.dataTransfer.emit(data);
+    this.resetVariables();
+    this.resetStepper();
   }
   resetVariables() {
     // Reset variables when the component is destroyed.
-    this.gender = [],
-      this.benefits = [{
+    this.gender = [];
+    this.benefits = [
+      {
         benefit: '',
-        beneficiary: []
+        beneficiary: [],
       },
-      ]
-    this.perfomanceValues = { lowRf: "ok", midRf: "ok", highRf: "ok" }
-    this.investmentValues = { money: 'high', time: 'high' }
-    this.warningText = '';
+    ];
+    this.perfomanceValues = { lowRf: 'ok', midRf: 'ok', highRf: 'ok' };
+    this.investmentValues = { money: 'high', time: 'high' };
     this.practiceEntry = '';
     this.gender = [];
-    this.perfomanceValues = { lowRf: "", midRf: "", highRf: "" };
-    this.investmentValues = { money: "", time: "" };
-    this.benefitsStartTime = "";
-    this.risk = ""
-    this.editIndex = -1
-    this.editMode = false
+    this.perfomanceValues = { lowRf: '', midRf: '', highRf: '' };
+    this.investmentValues = { money: '', time: '' };
+    this.benefitsStartTime = '';
+    this.risk = '';
   }
   //incase of edits
-  presetVariables(rowData: IOptionData, index: number) {
-    //remove all warinings 
-    this.warningText = '';
-    //editor
-    this.editMode = true;
-    this.editIndex = index;
-
-    this.benefits = rowData.benefits
-    this.perfomanceValues = rowData.performance
-    this.investmentValues = rowData.investment
-    this.practiceEntry = rowData.practice
+  presetVariables(rowData: IOptionData) {
+    this.benefits = rowData.benefits;
+    this.perfomanceValues = rowData.performance;
+    this.investmentValues = rowData.investment;
+    this.practiceEntry = rowData.practice;
     this.gender = rowData.gender;
-    this.benefitsStartTime = rowData.time
-    this.risk = rowData.risk
+    this.benefitsStartTime = rowData.time;
+    this.risk = rowData.risk;
   }
   resetStepper(): void {
     this.stepper.reset();
   }
+
+  async promptDelete() {
+    const dialogRef = await this.dialog.open('delete');
+    dialogRef.afterClosed().subscribe((shouldDelete) => {
+      if (shouldDelete) {
+        this.dataTransfer.emit(null);
+      }
+    });
+  }
 }
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 c98867063..c65f00e8a 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
@@ -1,91 +1,77 @@
 <div class="HomeContainer">
-<div>
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
-  <!--- Note that these columns can be defined in any order.
+  <div>
+    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+      <!--- Note that these columns can be defined in any order.
           The actual rendered columns are set as a property on the row definition" -->
 
-  <!-- Practice Column -->
-  <ng-container matColumnDef="practice">
-    <th mat-header-cell *matHeaderCellDef>Practice</th>
-    <td mat-cell *matCellDef="let element">{{ element.practice }}</td>
-  </ng-container>
+      <!-- Practice Column -->
+      <ng-container matColumnDef="practice">
+        <th mat-header-cell *matHeaderCellDef>Practice</th>
+        <td mat-cell *matCellDef="let element">{{ element.practice }}</td>
+      </ng-container>
 
-  <!-- gender Column -->
-  <ng-container matColumnDef="gender">
-    <th mat-header-cell *matHeaderCellDef>Who does it</th>
-    <td mat-cell *matCellDef="let element">{{ element.gender.join(',') }}</td>
-  </ng-container>
+      <!-- gender Column -->
+      <ng-container matColumnDef="gender">
+        <th mat-header-cell *matHeaderCellDef>Who does it</th>
+        <td mat-cell *matCellDef="let element">{{ element.gender.join(',') }}</td>
+      </ng-container>
 
-  <!-- Benefits Column -->
-  <ng-container matColumnDef="benefits">
-    <th mat-header-cell *matHeaderCellDef>Benefits and who</th>
-    <td mat-cell *matCellDef="let element">
-      <ol *ngFor="let benefit of element.benefits; index as i">
-        <li>
-        {{benefit.benefit}} 
-        <div>{{benefit.beneficiary.join(',')}}</div>
-        </li>
-      </ol>
-    </td>
-  </ng-container>
+      <!-- Benefits Column -->
+      <ng-container matColumnDef="benefits">
+        <th mat-header-cell *matHeaderCellDef>Benefits and who</th>
+        <td mat-cell *matCellDef="let element">
+          <ol *ngFor="let benefit of element.benefits; index as i">
+            <li>
+              {{ benefit.benefit }}
+              <div>{{ benefit.beneficiary.join(',') }}</div>
+            </li>
+          </ol>
+        </td>
+      </ng-container>
 
-  <!-- Perfomence Column -->
-  <ng-container matColumnDef="performance">
-    <th mat-header-cell *matHeaderCellDef>Perfomence</th>
-    <td mat-cell *matCellDef="let element">
-      <ol style="display: flex; flex-direction: column; gap:3px">
-        <li>
-          High(Rf):  {{ element.performance.highRf }}
-        </li>
-        <li>
-          Mid(Rf):  {{ element.performance.midRf }}
-        </li>
-        <li>
-          low(Rf): {{ element.performance.lowRf }}
-        </li>
-      </ol>
-    </td>
-  </ng-container>
+      <!-- Perfomence Column -->
+      <ng-container matColumnDef="performance">
+        <th mat-header-cell *matHeaderCellDef>Perfomence</th>
+        <td mat-cell *matCellDef="let element">
+          <ol style="display: flex; flex-direction: column; gap: 3px">
+            <li>High(Rf): {{ element.performance.highRf }}</li>
+            <li>Mid(Rf): {{ element.performance.midRf }}</li>
+            <li>low(Rf): {{ element.performance.lowRf }}</li>
+          </ol>
+        </td>
+      </ng-container>
 
-  <!-- Investment Column -->
-  <ng-container matColumnDef="investment">
-    <th mat-header-cell *matHeaderCellDef>Investment</th>
-    <td mat-cell *matCellDef="let element">
-      <ol style="display: flex; flex-direction: column; gap:3px">
-        <li>
-          Money:  {{ element.investment.money }}
-        </li>
-        <li>
-          Time:  {{ element.investment.time }}
-        </li>
-      </ol>
-    
-    </td>
-  </ng-container>
+      <!-- Investment Column -->
+      <ng-container matColumnDef="investment">
+        <th mat-header-cell *matHeaderCellDef>Investment</th>
+        <td mat-cell *matCellDef="let element">
+          <ol style="display: flex; flex-direction: column; gap: 3px">
+            <li>Money: {{ element.investment.money }}</li>
+            <li>Time: {{ element.investment.time }}</li>
+          </ol>
+        </td>
+      </ng-container>
 
-   <!-- Time Column -->
-   <ng-container matColumnDef="time">
-    <th mat-header-cell *matHeaderCellDef>Time</th>
-    <td mat-cell *matCellDef="let element">{{ element.time }}</td>
-  </ng-container>
+      <!-- Time Column -->
+      <ng-container matColumnDef="time">
+        <th mat-header-cell *matHeaderCellDef>Time</th>
+        <td mat-cell *matCellDef="let element">{{ element.time }}</td>
+      </ng-container>
 
-    <!-- Risks Column -->
-    <ng-container matColumnDef="risk">
-      <th mat-header-cell *matHeaderCellDef>Risks</th>
-      <td mat-cell *matCellDef="let element">{{ element.risk }}</td>
-    </ng-container>
+      <!-- Risks Column -->
+      <ng-container matColumnDef="risk">
+        <th mat-header-cell *matHeaderCellDef>Risks</th>
+        <td mat-cell *matCellDef="let element">{{ element.risk }}</td>
+      </ng-container>
 
-  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; index as i; columns: displayedColumns"  (click)="onRowClicked(row, i)" ></tr>
-</table>
-<button (click)="openNewDialog()" mat-button mat-raised-button color="primary">
-  Add New Option
-</button>
-</div>
-<div  class="slide-in container" [class.active]="matStepperOpen">
-  <div>
-   <option-editor (dataTransfer)="onDataTransfer($event)"></option-editor>
-</div>
-  <!-- <button class="buttonposition" mat-button mat-raised-button (click)="closeButtonAction()" color="primary">Close</button> -->
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; index as i; columns: displayedColumns" (click)="onRowClicked(row, i)"></tr>
+    </table>
+    <button (click)="openNewDialog()" mat-button mat-raised-button color="primary">Add New Option</button>
+  </div>
+  <div class="slide-in container" [class.active]="matStepperOpen">
+    <div>
+      <option-editor (dataTransfer)="onDataTransfer($event)"></option-editor>
+    </div>
+  </div>
 </div>
-</div>
\ No newline at end of file
diff --git a/apps/picsa-tools/option-tool/src/app/pages/home/home.component.ts b/apps/picsa-tools/option-tool/src/app/pages/home/home.component.ts
index a2d13cc7e..2cbd38c8b 100644
--- a/apps/picsa-tools/option-tool/src/app/pages/home/home.component.ts
+++ b/apps/picsa-tools/option-tool/src/app/pages/home/home.component.ts
@@ -1,12 +1,12 @@
-import { Component,ViewChild  } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { EditorComponent } from '../../components/editor/editor.component';
 
 export interface IOptionData {
   practice: string;
-  gender: string [];
-  benefits: {benefit:string, beneficiary:string[]} [];
-  performance:{lowRf:string, midRf:string,  highRf:string};
-  investment: {money:string, time:string};
+  gender: string[];
+  benefits: { benefit: string; beneficiary: string[] }[];
+  performance: { lowRf: string; midRf: string; highRf: string };
+  investment: { money: string; time: string };
   time: string;
   risk: string;
 }
@@ -15,52 +15,45 @@ export interface IOptionData {
   selector: 'option-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],
-  
 })
 export class HomeComponent {
-  public dataSource: IOptionData[]  = [];
-  public displayedColumns: string[] = ['practice', 'gender', 'benefits', 
-  'performance','investment','time','risk' ];
+  public dataSource: IOptionData[] = [];
+  public displayedColumns: string[] = ['practice', 'gender', 'benefits', 'performance', 'investment', 'time', 'risk'];
+
+  private editorIndex = 0;
 
   @ViewChild(EditorComponent) editorComponent: EditorComponent;
 
-    
   matStepperOpen = false;
 
   public openDialog() {
-    this.matStepperOpen = true
+    this.matStepperOpen = true;
   }
-  public closeDialog(){
-    this.matStepperOpen = false
+  public closeDialog() {
+    this.matStepperOpen = false;
   }
-  onDataTransfer(data:{data:IOptionData, index:number} | null ) {
-    console.log('Received data from editor:', data);
-    // close the child component
-    if(data){
-    if(data.index > -1){
-    this.dataSource[data.index]=data.data
-    //invoke change detaction
-    this.dataSource=[...this.dataSource]
-    }else{
-    this.dataSource = [...this.dataSource, data.data];
-    }
-    this.closeDialog()
-    }else {
-      this.closeDialog()
+  onDataTransfer(data: IOptionData | null) {
+    // create a deep clone of data source to allow change detection for nested array objects
+    const allData = JSON.parse(JSON.stringify(this.dataSource));
+    if (data) {
+      allData[this.editorIndex] = data;
+    } else {
+      // remove any existing entry entry if no data passed back
+      if (allData[this.editorIndex]) {
+        allData.splice(this.editorIndex, 1);
+      }
     }
-
+    this.dataSource = allData;
+    this.closeDialog();
   }
-  openNewDialog(){
+  openNewDialog() {
+    this.editorIndex = this.dataSource.length;
     this.editorComponent.resetVariables();
-    this.openDialog()
+    this.openDialog();
   }
   onRowClicked(row: IOptionData, index: number) {
-    // console.log('Row clicked', row);
-    // console.log('Index of the Row', index)
-    // open stepper with this data
-    // since it is already running with the current home page
-    this.editorComponent.presetVariables(row,index);
-    this.openDialog()
+    this.editorIndex = index;
+    this.editorComponent.presetVariables(row);
+    this.openDialog();
   }
-
 }

From 1f5c2788d491574f89843bba9181e2a73595d074 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Fri, 14 Apr 2023 22:17:54 -0700
Subject: [PATCH 4/4] chore: build fixes

---
 apps/picsa-apps/farmer-app-e2e/tsconfig.json             | 2 +-
 apps/picsa-apps/farmer-app/tsconfig.json                 | 2 +-
 apps/picsa-tools/crop-probability-tool-e2e/tsconfig.json | 2 +-
 apps/picsa-tools/crop-probability-tool/tsconfig.json     | 2 +-
 apps/picsa-tools/monitoring-tool-e2e/tsconfig.json       | 2 +-
 apps/picsa-tools/option-tool-e2e/tsconfig.json           | 2 +-
 apps/picsa-tools/option-tool/tsconfig.json               | 2 +-
 libs/webcomponents-ngx/tsconfig.json                     | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/picsa-apps/farmer-app-e2e/tsconfig.json b/apps/picsa-apps/farmer-app-e2e/tsconfig.json
index ab8db0c13..2a431ff19 100644
--- a/apps/picsa-apps/farmer-app-e2e/tsconfig.json
+++ b/apps/picsa-apps/farmer-app-e2e/tsconfig.json
@@ -8,7 +8,7 @@
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
+    "noPropertyAccessFromIndexSignature": false,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true
   },
diff --git a/apps/picsa-apps/farmer-app/tsconfig.json b/apps/picsa-apps/farmer-app/tsconfig.json
index 52eb4f718..316c8f8ba 100644
--- a/apps/picsa-apps/farmer-app/tsconfig.json
+++ b/apps/picsa-apps/farmer-app/tsconfig.json
@@ -18,7 +18,7 @@
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
+    "noPropertyAccessFromIndexSignature": false,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true
   },
diff --git a/apps/picsa-tools/crop-probability-tool-e2e/tsconfig.json b/apps/picsa-tools/crop-probability-tool-e2e/tsconfig.json
index 0f3eb22c9..2b6ac459e 100644
--- a/apps/picsa-tools/crop-probability-tool-e2e/tsconfig.json
+++ b/apps/picsa-tools/crop-probability-tool-e2e/tsconfig.json
@@ -8,7 +8,7 @@
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
+    "noPropertyAccessFromIndexSignature": false,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true
   },
diff --git a/apps/picsa-tools/crop-probability-tool/tsconfig.json b/apps/picsa-tools/crop-probability-tool/tsconfig.json
index e85865cf5..fbdce5d97 100644
--- a/apps/picsa-tools/crop-probability-tool/tsconfig.json
+++ b/apps/picsa-tools/crop-probability-tool/tsconfig.json
@@ -5,7 +5,7 @@
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
+    "noPropertyAccessFromIndexSignature": false,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true
   },
diff --git a/apps/picsa-tools/monitoring-tool-e2e/tsconfig.json b/apps/picsa-tools/monitoring-tool-e2e/tsconfig.json
index ab8db0c13..2a431ff19 100644
--- a/apps/picsa-tools/monitoring-tool-e2e/tsconfig.json
+++ b/apps/picsa-tools/monitoring-tool-e2e/tsconfig.json
@@ -8,7 +8,7 @@
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
+    "noPropertyAccessFromIndexSignature": false,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true
   },
diff --git a/apps/picsa-tools/option-tool-e2e/tsconfig.json b/apps/picsa-tools/option-tool-e2e/tsconfig.json
index 0f3eb22c9..2b6ac459e 100644
--- a/apps/picsa-tools/option-tool-e2e/tsconfig.json
+++ b/apps/picsa-tools/option-tool-e2e/tsconfig.json
@@ -8,7 +8,7 @@
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
+    "noPropertyAccessFromIndexSignature": false,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true
   },
diff --git a/apps/picsa-tools/option-tool/tsconfig.json b/apps/picsa-tools/option-tool/tsconfig.json
index e85865cf5..fbdce5d97 100644
--- a/apps/picsa-tools/option-tool/tsconfig.json
+++ b/apps/picsa-tools/option-tool/tsconfig.json
@@ -5,7 +5,7 @@
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
+    "noPropertyAccessFromIndexSignature": false,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true
   },
diff --git a/libs/webcomponents-ngx/tsconfig.json b/libs/webcomponents-ngx/tsconfig.json
index 1c995b83b..c5e4eb765 100644
--- a/libs/webcomponents-ngx/tsconfig.json
+++ b/libs/webcomponents-ngx/tsconfig.json
@@ -15,7 +15,7 @@
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
+    "noPropertyAccessFromIndexSignature": false,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true
   },