Basic SimpleState Editing

src/app/app.module.ts

@@ -46,6 +46,7 @@ import {
   MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
   MatTable
 } from "@angular/material/table";
+import {MatCheckbox} from "@angular/material/checkbox";
 
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -111,7 +112,8 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     MatHeaderRow,
     MatRow,
     MatHeaderRowDef,
-    MatRowDef
+    MatRowDef,
+    MatCheckbox
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.html

@@ -1,14 +1,23 @@
 <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" multiTemplateDataRows>
   <ng-container matColumnDef="name">
     <th mat-header-cell *matHeaderCellDef>Label</th>
-    <td mat-cell *matCellDef="let state">{{state.stateLabel}}</td>
+    <td mat-cell *matCellDef="let state">
+      <span *ngIf="editedElement !== state"> {{state.stateLabel}}</span>
+      <mat-form-field appearance="fill" class="long-form" *ngIf="editedElement === state">
+        <input matInput [(ngModel)]="state.stateLabel">
+      </mat-form-field>
+    </td>
   </ng-container>
 
   <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
   <ng-container matColumnDef="expandedDetail">
     <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
       <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
-        <p>{{element.stateDescription}}</p>
+        <p *ngIf="editedElement !== element">{{element.stateDescription}}</p>
+        <mat-form-field appearance="fill" class="long-form" *ngIf="element === editedElement">
+          <mat-label>Description</mat-label>
+          <textarea matInput [(ngModel)]="element.stateDescription" rows="3"></textarea>
+        </mat-form-field>
       </div>
     </td>
   </ng-container>
@@ -18,15 +27,22 @@
   <ng-container matColumnDef="initial">
     <th mat-header-cell *matHeaderCellDef>Initial</th>
     <td mat-cell *matCellDef="let state">
+      <div *ngIf="editedElement !== state">
         <mat-icon *ngIf="state.initial">done</mat-icon>
         <mat-icon *ngIf="!state.initial">close</mat-icon>
+      </div>
+      <mat-checkbox *ngIf="editedElement === state" [(ngModel)]="state.initial"></mat-checkbox>
+
     </td>
   </ng-container>
 
   <ng-container matColumnDef="edit">
     <th mat-header-cell *matHeaderCellDef></th>
     <td mat-cell *matCellDef="let state">
-      <button mat-icon-button color="primary"><mat-icon>edit</mat-icon></button>
+      <button mat-icon-button color="primary" (click)="editState(state)">
+        <mat-icon *ngIf="editedElement !== state">edit</mat-icon>
+        <mat-icon *ngIf="editedElement === state">done</mat-icon>
+      </button>
     </td>
   </ng-container>
 
@@ -38,7 +54,9 @@
   </ng-container>
 
   <ng-container matColumnDef="expand">
-    <th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th>
+    <th mat-header-cell *matHeaderCellDef aria-label="row actions">
+      <button mat-icon-button><mat-icon>add</mat-icon></button>
+    </th>
     <td mat-cell *matCellDef="let element">
       <button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()">
         @if (expandedElement === element) {

src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.scss

@@ -49,3 +49,7 @@ tr.example-element-row:not(.example-expanded-row):active {
 .mat-column-edit, .mat-column-delete, .mat-column-expand {
   width: 32px;
 }
+
+.long-form {
+  width: 100%;
+}

src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.ts

@@ -22,8 +22,17 @@ export class SimpleStateEditorComponent implements OnInit{
   displayedColumns = ["name", "initial", "edit", "delete"];
   columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];
   expandedElement: SimpleState | null = null;
+  editedElement: SimpleState | null = null;
 
   ngOnInit() {
     this.dataSource.data = this.states;
   }
+
+  editState(state: SimpleState) {
+    if(this.editedElement === state) {
+      this.editedElement = null;
+    } else {
+      this.editedElement = state;
+    }
+  }
 }