add edit-mode toggle

adessoSE · Sep 21, 2023 · befda54 · befda54
1 parent 2a7932a
commit befda54
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 9 deletions.
diff --git 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;
 }
diff --git 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
@@ -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