From eae55eb49cbff9bf58b347ad15f6ddc1e6c5007c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= <uqpko@student.kit.edu>
Date: Wed, 8 May 2024 08:01:04 +0200
Subject: [PATCH] Visualize Characteristics and their Values

---
 ...-item-characteristic-editor.component.html | 22 ++++++++++++++++++-
 ...-item-characteristic-editor.component.scss |  3 +++
 ...ed-item-characteristic-editor.component.ts |  1 +
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/app/editor/items/item-editor/inherited-item-characteristic-editor/inherited-item-characteristic-editor.component.html b/src/app/editor/items/item-editor/inherited-item-characteristic-editor/inherited-item-characteristic-editor.component.html
index b1f08c6..16da5d6 100644
--- a/src/app/editor/items/item-editor/inherited-item-characteristic-editor/inherited-item-characteristic-editor.component.html
+++ b/src/app/editor/items/item-editor/inherited-item-characteristic-editor/inherited-item-characteristic-editor.component.html
@@ -1 +1,21 @@
-<p>inherited-item-characteristic-editor works!</p>
+<table mat-table [dataSource]="datasource" class="mat-elevation-z8">
+  <ng-container matColumnDef="characteristic">
+    <th mat-header-cell *matHeaderCellDef>Characteristic</th>
+    <td mat-cell *matCellDef="let characteristicValue">{{characteristicValue.key.characteristicName}}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="value">
+    <th mat-header-cell *matHeaderCellDef>Value</th>
+    <td mat-cell *matCellDef="let characteristicValue">{{characteristicValue.value}}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="edit">
+    <th mat-header-cell *matHeaderCellDef></th>
+    <td mat-cell *matCellDef="let characteristicValue">
+      <button mat-icon-button><mat-icon>edit</mat-icon></button>
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>
diff --git a/src/app/editor/items/item-editor/inherited-item-characteristic-editor/inherited-item-characteristic-editor.component.scss b/src/app/editor/items/item-editor/inherited-item-characteristic-editor/inherited-item-characteristic-editor.component.scss
index e69de29..80c8212 100644
--- a/src/app/editor/items/item-editor/inherited-item-characteristic-editor/inherited-item-characteristic-editor.component.scss
+++ b/src/app/editor/items/item-editor/inherited-item-characteristic-editor/inherited-item-characteristic-editor.component.scss
@@ -0,0 +1,3 @@
+.mat-column-edit {
+  width: 32px;
+}
diff --git a/src/app/editor/items/item-editor/inherited-item-characteristic-editor/inherited-item-characteristic-editor.component.ts b/src/app/editor/items/item-editor/inherited-item-characteristic-editor/inherited-item-characteristic-editor.component.ts
index a344aa5..3369926 100644
--- a/src/app/editor/items/item-editor/inherited-item-characteristic-editor/inherited-item-characteristic-editor.component.ts
+++ b/src/app/editor/items/item-editor/inherited-item-characteristic-editor/inherited-item-characteristic-editor.component.ts
@@ -15,6 +15,7 @@ export class InheritedItemCharacteristicEditorComponent implements OnInit{
   @Input() item: Item | undefined
 
   datasource: MatTableDataSource<ItemgroupCharacteristicValue> = new MatTableDataSource<ItemgroupCharacteristicValue>();
+  displayedColumns: string[] = ['characteristic', 'value', 'edit']
 
   ngOnInit() {
     this.item!.initializeItemCharacteristics();