Merge pull request #117 from e-picsa/fix/option-tool-stepper

Enable editing of a single option row

apps/picsa-tools/option-tool/src/app/components/editor/editor.component.html

@@ -1,6 +1,7 @@
 
 <div class="dialog-content"> 
       <div class="warningText">{{warningText}}</div>
+      <button *ngIf="editMode" class="saveButtonPosition" mat-button mat-raised-button (click)="submitForm()" color="primary">Save Changes</button>
     <mat-stepper [linear]="isLinear" #stepper>
       <mat-step matStepContent>
           <ng-template matStepLabel>Practice</ng-template>
@@ -186,7 +187,7 @@
         <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)="finishProcess()" 
+        [disabled]="!risk" (click)="submitForm()" 
         style="background-color: #ccc; margin-left: 1rem;" mat-button>finish</button>
 
       </div>

apps/picsa-tools/option-tool/src/app/components/editor/editor.component.scss

@@ -1,78 +1,90 @@
-
 .mat-stepper-horizontal {
-    margin-top: 8px;
-  }
-
-  .mat-mdc-form-field {
-    margin-top: 16px;
+  margin-top: 8px;
+}
+
+.mat-mdc-form-field {
+  margin-top: 16px;
+}
+
+.warningText {
+  text-align: center;
+  color: red;
+  font-size: 12px;
+}
+
+
+.dialog-content {
+  .saveButtonPosition {
+    position: absolute;
+    left: 20px;
+    top: 20px
   }
 
-  .warningText{
-    text-align: center;
-    color: red;
-    font-size: 12px;
+  .StepTitle {
+    display: flex;
+    justify-content: center;
+    font-size: medium;
+    font-weight: bold;
   }
 
-  .dialog-content{
-
-    .StepTitle{
-      display: flex;
-      justify-content: center;
-      font-size: medium;
-      font-weight: bold;
-    }
-    .StepContainer{
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      width: 50%;
-      gap: .4rem;
-
-    .StepContent{
+  .StepContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 50%;
+    gap: .4rem;
+
+    .StepContent {
       display: flex;
       align-items: center;
       justify-content: center;
       flex-direction: column;
+
       .form-group {
         // width: 500px;
-         padding-top: 10px;
-         padding-bottom: 20px;
+        padding-top: 10px;
+        padding-bottom: 20px;
       }
+
       label {
         font-size: 14px;
         font-weight: 400;
         margin-right: 10px;
       }
+
       input.form-control {
         font-size: 16px;
         outline-color: #8a2644;
         padding: 10px;
         width: 90%;
       }
-      .ButtonSection{
+
+      .ButtonSection {
         width: 15rem;
 
       }
     }
-    }
-    .genderDiv{
-      display: flex;
-      align-items: center;
-      gap: 5px;
-      margin-top: 1rem;
-      margin-bottom: 1rem;
-      flex-direction: row;
-    }
-    .genderType{
-      width: 5rem;
-      height: 5rem;
-      font-weight: 700;
-      display: flex;
-      border-radius: 5px;
-      margin: 2px;
-      align-items: center;
-      justify-content: center;
-      text-align: center;
-    }
-
   }
+
+  .genderDiv {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    flex-direction: row;
+  }
+
+  .genderType {
+    width: 5rem;
+    height: 5rem;
+    font-weight: 700;
+    display: flex;
+    border-radius: 5px;
+    margin: 2px;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+
+}

apps/picsa-tools/option-tool/src/app/components/editor/editor.component.ts

@@ -1,6 +1,15 @@
 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};
+  time: string;
+  risk: string;
+}
 @Component({
   selector: 'option-editor',
   templateUrl: './editor.component.html',
@@ -19,6 +28,8 @@ export class EditorComponent implements OnInit {
   benefitsStartTime: string;
   risk:string;
   isLinear = false;
+  editMode= false
+  editIndex:number;
 
   @ViewChild(MatStepper) stepper: MatStepper;
 
@@ -40,7 +51,9 @@ export class EditorComponent implements OnInit {
   this.perfomanceValues= {lowRf:"", midRf:"",  highRf:""};  
   this.investmentValues={money:"", time:""};  
   this.benefitsStartTime ="";
-  this.risk="" 
+  this.risk="";
+  this.editIndex = -1;
+
   }
 
   handleGender(gender:string){
@@ -68,6 +81,7 @@ export class EditorComponent implements OnInit {
       beneficiary:[]
     })
   }
+
   onlyNumbers(event): boolean {
     const charCode = (event.which) ? event.which : event.keyCode;
     if (charCode > 31 && (charCode < 48 || charCode > 57)) {
@@ -76,22 +90,25 @@ export class EditorComponent implements OnInit {
     return true;
   }
 
-  async finishProcess  (){
+  async submitForm  (){
     //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
-    }
-    this.dataTransfer.emit(finalObject);
+    },
+    index:this.editIndex
+  }
+     this.dataTransfer.emit(finalObject);
      this.resetVariables()
      this.resetStepper()
     }else{
@@ -115,16 +132,26 @@ export class EditorComponent implements OnInit {
   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;
+
+  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();
   }
-  submitForm() {
-    console.log('Form submitted!');
-  }
-  // ngOnDestroy() {
-  //   // Reset variables when the component is destroyed.
-
-  // }
-
 }

apps/picsa-tools/option-tool/src/app/pages/home/home.component.html

@@ -76,15 +76,15 @@
     </ng-container>
 
   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; index as i; columns: displayedColumns"  (click)="onRowClicked(row, i)" ></tr>
 </table>
-<button (click)="openDialog()" mat-button mat-raised-button color="primary">
+<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>
+   <option-editor  (dataTransfer)="onDataTransfer($event)"></option-editor>
 </div>
   <button class="buttonposition" mat-button mat-raised-button (click)="closeDialog()" color="primary">Close</button>
 </div>

apps/picsa-tools/option-tool/src/app/pages/home/home.component.ts

@@ -1,4 +1,5 @@
-import { Component  } from '@angular/core';
+import { Component,ViewChild  } from '@angular/core';
+import { EditorComponent } from '../../components/editor/editor.component';
 
 export interface IOptionData {
   practice: string;
@@ -20,6 +21,9 @@ export class HomeComponent {
   public dataSource: IOptionData[]  = [];
   public displayedColumns: string[] = ['practice', 'gender', 'benefits', 
   'performance','investment','time','risk' ];
+
+  @ViewChild(EditorComponent) editorComponent: EditorComponent;
+
 
   matStepperOpen = false;
 
@@ -29,11 +33,30 @@ export class HomeComponent {
   public closeDialog(){
     this.matStepperOpen = false
   }
-  onDataTransfer(data: IOptionData) {
+  onDataTransfer(data:{data:IOptionData,index:number}) {
     console.log('Received data from editor:', data);
     // close the child component
-    this.dataSource = [...this.dataSource, 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];
+    }
+    //detect change for the case of editing a raw
     this.matStepperOpen = false;
   }
+  openNewDialog(){
+    this.editorComponent.resetVariables();
+    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()
+  }
 
 }