Database - in place updates to preserve editing flow

src/app/components/editor/database/database.component.html

@@ -38,6 +38,7 @@
       [style]="fullPage ? 'width: 100%; height: 100%;' : 'width: 100%; height: 500px;'"
       [ngClass]="isDark() ? 'ag-theme-balham-dark' : 'ag-theme-balham'"
       [rowData]="rowData"
+      [getRowNodeId]="getRowNodeId"
       [columnDefs]="columnDefs"
       [singleClickEdit]="true"
       [enterMovesDownAfterEdit]="true"

src/app/components/editor/database/database.component.ts

@@ -15,7 +15,7 @@ import {BooleanRendererComponent} from './renderers/boolean-renderer.component';
 import {EditorNodeContract} from '../../nodes/EditorNode.contract';
 import {EditorService} from '../../../service/editor.service';
 import {WysiwygEditorComponent} from './editors/wysiwyg/wysiwyg-editor.component';
-import {debounce, debug} from '../../../utility';
+import {debounce, debug, uuid_v4} from '../../../utility';
 import {DateTimeFilterComponent} from './filters/date-time.filter';
 import {DatabasePageComponent} from './database-page.component';
 import {PageLinkRendererComponent} from './renderers/page-link-renderer.component';
@@ -416,17 +416,40 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
     });
   }
 
+  public getRowNodeId(data: any) {
+    if ( !data.UUID ) {
+      data.UUID = uuid_v4();
+    }
+
+    return data.UUID;
+  }
+
+  protected getAllRows() {
+    const rowData: any[] = [];
+
+    this.agGridElement.api.forEachNode(node => {
+      if ( !node.data.UUID ) {
+        node.data.UUID = uuid_v4();
+      }
+
+      rowData.push(node.data);
+    });
+
+    return rowData;
+  }
+
   public async performSave(): Promise<void> {
     // Save the columns first
     await this.api.saveDatabaseColumns(this.page.UUID, this.node.UUID, this.node.Value.Value, this.getSaveColumns());
 
     // Save the data
-    const rows = await this.api.saveDatabaseEntries(this.page.UUID, this.node.UUID, this.node.Value.Value, this.rowData);
-    this.rowData = rows.map(x => x.RowData);
+    const allRows = this.getAllRows();
+    const rows = await this.api.saveDatabaseEntries(this.page.UUID, this.node.UUID, this.node.Value.Value, allRows);
+    // this.rowData = rows.map(x => x.RowData);
 
     // Dynamically update the row data to avoid breaking open editors
-    const rowUUIDs = this.rowData.map(x => x.UUID);
-    const gridUUIDs = [];
+    const returnedUUIDs = rows.map(x => x.UUID);
+    const existingUUIDs = [];
 
     const rowDataTransaction = {
       add: [],
@@ -436,11 +459,11 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
 
     this.agGridElement.api.forEachNode((rowNode, index) => {
       const data = rowNode.data;
-      if ( !data.UUID || !rowUUIDs.includes(data.UUID) ) {
+      if ( !returnedUUIDs.includes(data.UUID) ) {
         rowDataTransaction.remove.push(rowNode.id);
       } else {
-        gridUUIDs.push(data.UUID);
-        const updatedRow = this.rowData.find(x => x.UUID === data.UUID);
+        existingUUIDs.push(data.UUID);
+        const updatedRow = rows.find(x => x.UUID === data.UUID);
 
         if ( updatedRow ) {
           for ( const prop in updatedRow ) {
@@ -456,11 +479,11 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
       }
     });
 
-    for ( const row of this.rowData ) {
-      if ( !gridUUIDs.includes(row.UUID) ) {
-        rowDataTransaction.add.push(row);
-      }
-    }
+    // for ( const row of rows ) {
+    //   if ( !gridUUIDs.includes(row.UUID) ) {
+    //     rowDataTransaction.add.push(row);
+    //   }
+    // }
 
     // @ts-ignore
     this.agGridElement.api.applyTransaction(rowDataTransaction);

src/app/service/api.service.ts

@@ -1046,7 +1046,7 @@ export class ApiService {
         for ( const row of rowData ) {
           const newDatabaseEntry = new DatabaseEntry(
               DatabaseId,
-              DatabaseEntry.getUUID(),
+              row.UUID || DatabaseEntry.getUUID(),
               JSON.stringify(row),
               true
           );