Merge pull request #6108 from opf/fix/26848/refresh-open-changeset-columns-in-table

[268489] Use existing cells from the table to render active changes

frontend/app/components/wp-edit-form/work-package-changeset.ts

@@ -88,6 +88,14 @@ export class WorkPackageChangeset {
     return _.isEmpty(this.changes);
   }
 
+  /**
+   * Get attributes
+   * @returns {string[]}
+   */
+  public get changedAttributes() {
+    return _.keys(this.changes);
+  }
+
   /**
    * Retrieve the editing value for the given attribute
    *

frontend/app/components/wp-fast-table/builders/rows/single-row-builder.ts

@@ -9,6 +9,8 @@ import {RelationCellbuilder} from '../relation-cell-builder';
 import {WorkPackageChangeset} from '../../../wp-edit-form/work-package-changeset';
 import {ContextLinkIconBuilder} from "../context-link-icon-builder";
 import {$injectFields} from "../../../angular/angular-injector-bridge.functions";
+import {locateTableRowByIdentifier} from 'core-components/wp-fast-table/helpers/wp-table-row-helpers';
+import {debugLog} from '../../../../helpers/debug_output';
 
 // Work package table row entries
 export const tableRowClassName = 'wp-table--row';
@@ -135,11 +137,29 @@ export class SingleRowBuilder {
   }
 
   protected buildEmptyRow(workPackage:WorkPackageResourceInterface, row:HTMLElement):[HTMLElement, boolean] {
-    let cell = null;
+    const changeset = this.workPackageTable.editing.changeset(workPackage.id);
+    let cells:{ [attribute:string]:JQuery } = {};
+
+    if (changeset && !changeset.empty) {
+      // Try to find an old instance of this row
+      const oldRow = locateTableRowByIdentifier(this.classIdentifier(workPackage));
+
+      changeset.changedAttributes.forEach((attribute:string) => {
+        cells[attribute] = oldRow.find(`.${wpCellTdClassName}.${attribute}`);
+      });
+    }
 
     this.augmentedColumns.forEach((column:QueryColumn) => {
-      cell = this.buildCell(workPackage, column);
-      row.appendChild(cell);
+      let cell:Element;
+      let oldCell:JQuery|undefined = cells[column.id];
+
+      if (oldCell && oldCell.length) {
+        debugLog(`Rendering previous open column ${column.id} on ${workPackage.id}`);
+        jQuery(row).append(oldCell);
+      } else {
+        cell = this.buildCell(workPackage, column);
+        row.appendChild(cell);
+      }
     });
 
     // Set the row selection state

frontend/app/components/wp-fast-table/helpers/wp-table-row-helpers.ts

@@ -10,6 +10,10 @@ export function locateTableRow(workPackageId:string):JQuery {
   return jQuery('.' + rowId(workPackageId));
 }
 
+export function locateTableRowByIdentifier(identifier:string) {
+  return jQuery(`.${identifier}-table`);
+}
+
 export function scrollTableRowIntoView(workPackageId:string):void {
   try {
     const element = locateTableRow(workPackageId);

frontend/app/components/wp-fast-table/wp-table-editing.ts

@@ -3,6 +3,7 @@ import {WorkPackageEditForm} from "../wp-edit-form/work-package-edit-form";
 import {TableRowEditContext} from "../wp-edit-form/table-row-edit-context";
 import {WorkPackageEditingService} from "../wp-edit-form/work-package-editing-service";
 import {$injectFields} from "../angular/angular-injector-bridge.functions";
+import {WorkPackageChangeset} from 'core-components/wp-edit-form/work-package-changeset';
 
 export class WorkPackageTableEditingContext {
   public wpEditing:WorkPackageEditingService;
@@ -18,6 +19,10 @@ export class WorkPackageTableEditingContext {
     this.forms = {};
   }
 
+  public changeset(workPackageId:string):WorkPackageChangeset|undefined {
+    return this.wpEditing.state(workPackageId).value;
+  }
+
   public stopEditing(workPackageId:string) {
     this.wpEditing.stopEditing(workPackageId);