From befda545b15db9cc55c890b9f0cd96010b641bde Mon Sep 17 00:00:00 2001
From: Nataliia Karmazina <nataliia.karmazina@adesso.de>
Date: Thu, 21 Sep 2023 12:18:42 +0200
Subject: [PATCH] add edit-mode toggle

---
 .../example-table/example-table.component.css | 15 +++++++++++++++
 .../example-table.component.html              | 19 ++++++++++++-------
 .../example-table/example-table.component.ts  | 14 ++++++++++++--
 3 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/example-table/example-table.component.css b/frontend/src/app/example-table/example-table.component.css
index 04f863d36..3a94cc93d 100644
--- a/frontend/src/app/example-table/example-table.component.css
+++ b/frontend/src/app/example-table/example-table.component.css
@@ -115,4 +115,19 @@ th.mat-header-cell:first-of-type, td.mat-cell:first-of-type, td.mat-footer-cell:
   z-index:999;
   left:0;
   background: inherit;
+}
+
+.slide-toggle-container{
+  display: flex;
+  justify-content: center;
+}
+
+.icon{
+  color: var(--ocean-blue);
+}
+
+.edit-mode{
+  font-size: 17px;
+  margin: 2px;
+  margin-right: 5px;
 }
\ No newline at end of file
diff --git a/frontend/src/app/example-table/example-table.component.html b/frontend/src/app/example-table/example-table.component.html
index 3c967d11e..8f99cdeba 100644
--- a/frontend/src/app/example-table/example-table.component.html
+++ b/frontend/src/app/example-table/example-table.component.html
@@ -10,15 +10,20 @@
 
 	<ng-container *ngFor="let column of displayedColumns; let columnIndex = index;  let first = first;" matColumnDef={{column}}> 
 			<th class="headerRow MediumHeadline5" mat-header-cell *matHeaderCellDef scope="col"> 
-				<span *ngIf="first"></span>
+				<span *ngIf="first" class="slide-toggle-container">
+					<label class="edit-mode" [class.icon]="editMode">Edit</label>
+					<mat-slide-toggle [formControl]="toggleControl" [color]="color" title="Switch on/off edit mode"></mat-slide-toggle>
+				</span>
 				<div *ngIf="!first">
 					{{column}}
-					<button id="inputExample" class="scenarioTitle" (click)="renameExample(columnIndex)">
-						<em class="material-icons">edit</em>
-					</button>
-					<button id="inputExample" class="scenarioTitle" (click)="deleteExample($event, columnIndex)">
-						<em class="material-icons">delete</em>
-					</button>
+					<span *ngIf="editMode">
+						<button id="inputExample" class="scenarioTitle" (click)="renameExample(columnIndex)">
+							<em class="material-icons">edit</em>
+						</button>
+						<button id="inputExample" class="scenarioTitle" (click)="deleteExample($event, columnIndex)">
+							<em class="material-icons">delete</em>
+						</button>
+					</span>
 				</div>
 			</th>
 			<td [class.deactivated]="this.selectedScenario.stepDefinitions.example[rowIndex + 1].deactivated" class="valueRow" mat-cell *matCellDef="let element;let rowIndex = index;">
diff --git a/frontend/src/app/example-table/example-table.component.ts b/frontend/src/app/example-table/example-table.component.ts
index 484ee6e6a..7455f8743 100644
--- a/frontend/src/app/example-table/example-table.component.ts
+++ b/frontend/src/app/example-table/example-table.component.ts
@@ -13,6 +13,7 @@ import { ApiService } from '../Services/api.service';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { MatTable } from '@angular/material/table';
 import { StepDefinition } from '../model/StepDefinition';
+import { ThemePalette } from '@angular/material/core';
 
 
 @Component({
@@ -98,14 +99,19 @@ export class ExampleTableComponent implements OnInit {
    * selected Scenario
    */
   selectedScenario: Scenario;
-
+  /**
+   * toggle Edit table mode
+   */
+  color: ThemePalette = 'primary';
+  toggleControl = new UntypedFormControl(false);
+  editMode: boolean;
   /**
    * Boolean if the example table should be shown or not
    */
   exampleThere: boolean = false;
 
   deleteExampleObservable: Subscription;
-
+  toggleObservable: Subscription;
   updateExampleTableObservable: Subscription;
 
   indexOfExampleToDelete;
@@ -152,6 +158,10 @@ export class ExampleTableComponent implements OnInit {
     this.deleteExampleObservable = this.exampleService.deleteExampleEvent.subscribe(() => {this.deleteExampleFunction();});
     //this.lastRow = this.selectedScenario.stepDefinitions.example.slice(-1)[0];
     this.updateExampleTableObservable = this.exampleService.updateExampleTableEvent.subscribe(() =>{this.updateTable();});
+
+    this.toggleObservable = this.toggleControl.valueChanges.subscribe(val => {
+      this.editMode = val;
+    });
   }
  
   // eslint-disable-next-line @angular-eslint/use-lifecycle-interface