Database - clean up keyboard nav & prevent needless save on load

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

@@ -19,6 +19,7 @@
       [rowData]="rowData"
       [columnDefs]="columnDefs"
       [singleClickEdit]="true"
+      [enterMovesDownAfterEdit]="true"
       suppressMovableColumns="true"
       (rowClicked)="onRowClicked($event)"
       (cellValueChanged)="onCellValueChanged()"

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

@@ -15,6 +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} from '../../../utility';
 
 @Component({
   selector: 'editor-database',
@@ -33,6 +34,14 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
   public dbName = '';
   public notAvailableOffline = false;
   protected dbId!: string;
+  protected isInitialLoad = false;
+  protected triggerSaveDebounce = debounce(() => {
+    if ( this.agGridElement.api.getCellEditorInstances().length < 1 ) {
+      this.editorService.triggerSave();
+    } else {
+      this.triggerSaveDebounce();
+    }
+  }, 1000);
 
   title = 'app';
   columnDefs = [];
@@ -78,8 +87,10 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
   }
 
   onCellValueChanged() {
-    this.dirty = true;
-    this.editorService.triggerSave();
+    if ( !this.isInitialLoad ) {
+      this.dirty = true;
+      this.triggerSaveDebounce();
+    }
   }
 
   async onManageColumns() {
@@ -107,7 +118,7 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
     this.rowData.push({});
     this.agGridElement.api.setRowData(this.rowData);
     this.dirty = true;
-    this.editorService.triggerSave();
+    this.triggerSaveDebounce();
   }
 
   async onRemoveRow() {
@@ -132,7 +143,7 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
             this.agGridElement.api.setRowData(this.rowData);
             this.lastClickRow = -1;
             this.dirty = true;
-            this.editorService.triggerSave();
+            this.triggerSaveDebounce();
           },
         }
       ],
@@ -146,7 +157,7 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
     this.lastClickRow = $event.rowIndex;
   }
 
-  setColumns(data) {
+  setColumns(data, triggerSave = true) {
     this.columnDefs = data.map(x => {
       x.editable = !this.readonly;
       x.minWidth = 150;
@@ -187,8 +198,10 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
     this.agGridElement.api.setColumnDefs([]);
     this.agGridElement.api.setColumnDefs(this.columnDefs);
     this.agGridElement.api.sizeColumnsToFit();
-    this.dirty = true;
-    this.editorService.triggerSave();
+    if ( triggerSave ) {
+      this.dirty = true;
+      this.triggerSaveDebounce();
+    }
   }
 
   public onResized() {
@@ -196,6 +209,8 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
   }
 
   public async performLoad(): Promise<void> {
+    this.isInitialLoad = true;
+
     if ( !this.node.Value ) {
       this.node.Value = {};
     }
@@ -223,7 +238,7 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
 
     // Load the columns
     const columns = await this.api.getDatabaseColumns(this.page.UUID, this.node.UUID, this.node.Value.Value);
-    this.setColumns(columns);
+    this.setColumns(columns, false);
 
     const rows = await this.api.getDatabaseEntries(this.page.UUID, this.node.UUID, this.node.Value.Value);
     this.rowData = rows.map(x => x.RowData);
@@ -231,6 +246,7 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
 
     this.pendingSetup = false;
     this.dirty = false;
+    this.isInitialLoad = false;
   }
 
   public async performDelete(): Promise<void> {
@@ -244,7 +260,49 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
     // 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);
-    this.agGridElement.api.setRowData(this.rowData);
+
+    // Dynamically update the row data to avoid breaking open editors
+    const rowUUIDs = this.rowData.map(x => x.UUID);
+    const gridUUIDs = [];
+
+    const rowDataTransaction = {
+      add: [],
+      remove: [],
+      update: [],
+    };
+
+    this.agGridElement.api.forEachNode((rowNode, index) => {
+      const data = rowNode.data;
+      if ( !data.UUID || !rowUUIDs.includes(data.UUID) ) {
+        rowDataTransaction.remove.push(rowNode.id);
+      } else {
+        gridUUIDs.push(data.UUID);
+        const updatedRow = this.rowData.find(x => x.UUID === data.UUID);
+
+        if ( updatedRow ) {
+          for ( const prop in updatedRow ) {
+            if ( !updatedRow.hasOwnProperty(prop) ) {
+              continue;
+            }
+
+            data[prop] = updatedRow[prop];
+          }
+
+          rowDataTransaction.update.push(data);
+        }
+      }
+    });
+
+    for ( const row of this.rowData ) {
+      if ( !gridUUIDs.includes(row.UUID) ) {
+        rowDataTransaction.add.push(row);
+      }
+    }
+
+    // @ts-ignore
+    this.agGridElement.api.applyTransaction(rowDataTransaction);
+
+    // this.agGridElement.api.setRowData(this.rowData);
 
     // Save the name
     await this.api.saveDatabaseName(this.page.UUID, this.node.UUID, this.node.Value.Value, this.dbName);

src/app/components/editor/database/editors/numeric/numeric-editor.component.ts

@@ -35,7 +35,7 @@ export class NumericEditorComponent implements ICellEditorAngularComp, AfterView
         return this.cancelBeforeStart;
     }
 
-    onKeyDown($event) {
+    onKeyDown($event: KeyboardEvent) {
         if ( !this.isKeyPressedAllowed($event) ) {
             if ($event.preventDefault) {
                 $event.preventDefault();
@@ -64,7 +64,7 @@ export class NumericEditorComponent implements ICellEditorAngularComp, AfterView
             return true;
         } else if ( charStr === '.' && this.value % 1 === 0 ) {
             return true;
-        } else if ( ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight'].includes(event.code) ) {
+        } else if ( ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Enter'].includes(event.code) ) {
             return true;
         } else if ( charStr === 'a' && event.ctrlKey ) {
             return true;