Fix database load issue; start row drag infra

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

@@ -41,11 +41,14 @@
       [columnDefs]="columnDefs"
       [singleClickEdit]="true"
       [enterMovesDownAfterEdit]="true"
+      [rowDragManaged]="true"
+      [suppressMoveWhenRowDragging]="true"
       suppressMovableColumns="true"
       (rowClicked)="onRowClicked($event)"
       (cellValueChanged)="onCellValueChanged()"
       (gridReady)="onGridReady($event)"
       (columnResized)="onColumnResize($event)"
+      (rowDragMove)="onRowDragEnd($event)"
       [frameworkComponents]="frameworkComponents"
       #agGridElement
     ></ag-grid-angular>

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

@@ -54,6 +54,9 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
     }
   }, 1000);
 
+  protected gridReady = false;
+  protected deferredUIActivation = false;
+
   title = 'app';
   columnDefs = [];
   rowData = [];
@@ -114,7 +117,10 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
   }
 
   onGridReady($event) {
-
+    this.gridReady = true;
+    if ( this.deferredUIActivation && !this.pendingSetup ) {
+      this.performUIActivation();
+    }
   }
 
   onColumnResize($event) {
@@ -132,6 +138,14 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
     }
   }
 
+  onRowDragEnd($event) {
+    console.log($event, this);
+    if ( !this.isInitialLoad && this.editorService.canEdit() ) {
+      this.dirty = true;
+      this.triggerSaveDebounce();
+    }
+  }
+
   onCellValueChanged() {
     if ( !this.isInitialLoad ) {
       this.dirty = true;
@@ -216,6 +230,8 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
   setColumns(data, triggerSave = true) {
     this.columnDefs = [{
       width: 20,
+      // rowDrag: !this.readonly,
+      // rowDragText: (params, dragItemCount) => `${dragItemCount} ${dragItemCount === 1 ? 'row' : 'rows'}`,
     }, ...data.map(x => {
       x.editable = !this.readonly;
       x.minWidth = 150;
@@ -375,6 +391,10 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
     this.pendingSetup = false;
     this.dirty = false;
     this.isInitialLoad = false;
+
+    if ( this.deferredUIActivation && this.gridReady ) {
+      await this.performUIActivation();
+    }
   }
 
   public async performDelete(): Promise<void> {
@@ -470,7 +490,15 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
   }
 
   performUIActivation() {
-    return this.openDatabase();
+    if ( this.deferredUIActivation ) {
+      this.deferredUIActivation = false;
+    }
+
+    if ( this.gridReady && !this.pendingSetup ) {
+      return this.openDatabase();
+    } else {
+      this.deferredUIActivation = true;
+    }
   }
 
   dismiss() {