Make object selection reference deletable

src/app/components/data-page/data-page.component.ts

@@ -197,6 +197,13 @@ export class DataPageComponent implements OnInit, OnDestroy {
           this.data[object.propertyPrefixToOverwrite + '.' + newProperty] =
             newObjectFlattened[newProperty];
         }
+      } else if (selectedObject === null) {
+        this.data[object.propertyNameOfReferenceId] = null;
+        for (const prop in this.data) {
+          if (prop.startsWith(object.propertyPrefixToOverwrite)) {
+           this.data[prop] = null;
+          }
+        }
       }
     });
   }

src/app/components/select-object-dialog/select-object-dialog.component.html

@@ -10,7 +10,19 @@
     (selectedElementChange)="onObjectClicked($event)"
   ></app-autocomplete-select>
 
-  <span>aktuell ausgewählt: <b>{{getSelectedObjectName()}}</b></span>
+  <span
+    >aktuell ausgewählt: <b>{{ getSelectedObjectName() }}</b></span
+  >
+  <button
+    mat-button
+    *ngIf="!!getSelectedObject()"
+    matSuffix
+    mat-icon-button
+    aria-label="Clear"
+    (click)="onObjectClicked(null)"
+  >
+    <mat-icon>close</mat-icon>
+  </button>
 </div>
 
 <div mat-dialog-actions>

src/app/components/select-object-dialog/select-object-dialog.component.ts

@@ -15,10 +15,13 @@ export class SelectObjectDialogComponent implements OnInit {
   ngOnInit(): void {}
 
   onObjectClicked(object: any) {
-    this.data.currentlySelectedObjectId = object.id;
+    this.data.currentlySelectedObjectId = object?.id || null;
   }
 
   getSelectedObject() {
+    if (this.data.currentlySelectedObjectId === null) {
+      return null;
+    }
     return this.data.possibleObjects.find(
       (object) => object.id === this.data.currentlySelectedObjectId
     );

src/app/components/table/table.component.ts

@@ -357,15 +357,22 @@ export class TableComponent implements AfterViewInit {
       },
     });
     dialogRef.afterClosed().subscribe((selectedObject) => {
+      console.log(selectedObject);
       if (selectedObject) {
         row[column.propertyNameOfReferenceId] = selectedObject.id;
-        //row[column.dataPath] = column.valueToOverwriteDataPath(selectedObject);
+        const newObjectFlattened = flatten(selectedObject);
-      }
-      const newObjectFlattened = flatten(selectedObject);
         for (const newProperty in newObjectFlattened) {
           row[column.propertyPrefixToOverwrite + '.' + newProperty] =
             newObjectFlattened[newProperty];
         }
+      } else if (selectedObject === null) {
+        row[column.propertyNameOfReferenceId] = null;
+        for (const prop in row) {
+          if (prop.startsWith(column.propertyPrefixToOverwrite)) {
+            row[prop] = null;
+          }
+        }
+      }
     });
   }