Edit ItemProperties of Item

src/app/editor/inventory-item-editor/item-property-editor/item-property-editor.component.html

@@ -3,6 +3,10 @@
     <th mat-header-cell *matHeaderCellDef>Name</th>
     <td mat-cell *matCellDef="let itemProperty">
       <span *ngIf="editedItemProperty !== itemProperty"> {{itemProperty.propertyName}}</span>
+      <mat-form-field appearance="fill" *ngIf="editedItemProperty === itemProperty">
+        <mat-label>Name</mat-label>
+        <input matInput [(ngModel)]="itemProperty.propertyName">
+      </mat-form-field>
     </td>
   </ng-container>
 
@@ -10,7 +14,11 @@
   <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.propertyDescription}}</p>
+        <p *ngIf="editedItemProperty !== element">{{element.propertyDescription}}</p>
+        <mat-form-field appearance="fill" class="long-form" *ngIf="editedItemProperty === element">
+          <mat-label>Description</mat-label>
+          <textarea matInput [(ngModel)]="element.propertyDescription" rows="3"></textarea>
+        </mat-form-field>
       </div>
     </td>
   </ng-container>
@@ -20,17 +28,22 @@
   <ng-container matColumnDef="property">
     <th mat-header-cell *matHeaderCellDef>Value</th>
     <td mat-cell *matCellDef="let itemProperty">
-      <p>{{itemProperty.property}}</p>
+      <p *ngIf="itemProperty !== editedItemProperty">{{itemProperty.property}}</p>
+      <mat-form-field appearance="fill" *ngIf="itemProperty === editedItemProperty">
+        <mat-label>Value</mat-label>
+        <input matInput [(ngModel)]="itemProperty.property" type="number">
+      </mat-form-field>
     </td>
   </ng-container>
 
-  <!--<ng-container matColumnDef="edit">
+  <ng-container matColumnDef="edit">
     <th mat-header-cell *matHeaderCellDef></th>
-    <td mat-cell *matCellDef="let state">
+    <td mat-cell *matCellDef="let itemProperty">
-      <button mat-icon-button class="icon-btn-primary" *ngIf="editedElement !== state" (click)="editState(state)" [disabled]="editedElement !== null"><mat-icon>edit</mat-icon></button>
+      <button mat-icon-button class="icon-btn-primary" *ngIf="editedItemProperty !== itemProperty"
-      <button mat-icon-button class="icon-btn-primary" (click)="finishEditing()" *ngIf="editedElement === state"><mat-icon>done</mat-icon></button>
+              (click)="editItemProperty(itemProperty)" [disabled]="editedItemProperty !== undefined"><mat-icon>edit</mat-icon></button>
+      <button mat-icon-button class="icon-btn-primary" (click)="finishEditing()" *ngIf="editedItemProperty === itemProperty"><mat-icon>done</mat-icon></button>
     </td>
-  </ng-container>-->
+  </ng-container>
 
   <ng-container matColumnDef="delete">
     <th mat-header-cell *matHeaderCellDef></th>

src/app/editor/inventory-item-editor/item-property-editor/item-property-editor.component.ts

@@ -3,6 +3,7 @@ import {Item} from "../../../project/game-model/inventory/Item";
 import {MatTableDataSource} from "@angular/material/table";
 import {ItemProperty} from "../../../project/game-model/inventory/ItemProperty";
 import {animate, state, style, transition, trigger} from "@angular/animations";
+import {MatSnackBar} from "@angular/material/snack-bar";
 
 @Component({
   selector: 'app-item-property-editor',
@@ -22,11 +23,14 @@ export class ItemPropertyEditorComponent implements OnInit{
   editedItemProperty: ItemProperty | undefined
   expandedElement: ItemProperty | undefined
 
-  displayedColumns: string[] = ['name', 'property', 'delete']
+  displayedColumns: string[] = ['name', 'property', 'edit', 'delete']
   columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];
 
   datasource: MatTableDataSource<ItemProperty> = new MatTableDataSource<ItemProperty>();
 
+  constructor(private snackbar: MatSnackBar) {
+  }
+
   ngOnInit() {
     this.datasource.data = this.item!.itemProperties
   }
@@ -35,4 +39,17 @@ export class ItemPropertyEditorComponent implements OnInit{
     this.item!.itemProperties = this.item!.itemProperties.filter(property => property.propertyName !== itemProperty.propertyName)
     this.datasource.data = this.item!.itemProperties
   }
+
+  editItemProperty(itemProperty: ItemProperty) {
+    this.editedItemProperty = itemProperty
+  }
+
+  finishEditing() {
+    if(this.editedItemProperty!.propertyName.length < 1) {
+      this.snackbar.open("PropertyName cannout be empty", "", {duration: 2000});
+    } else {
+      this.editedItemProperty = undefined
+    }
+
+  }
 }