[25159] Correctly refresh rows in inline-create and -edit

When editing a cell in inline-create or edit and then updating the set of active
columns, the number of columns is not correctly updated in this row.

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

@@ -27,7 +27,7 @@ export class RowRefreshBuilder extends SingleRowBuilder {
     const newCells:HTMLElement[] = [];
 
     this.columns.forEach((column:QueryColumn) => {
-      const oldTd = jRow.find(`td.${column.id}`);
+      const oldTd = cells.filter(`td.${column.id}`);
 
       // Skip the replacement of the column if this is being edited.
       if (this.isColumnBeingEdited(editForm, column)) {

frontend/app/components/wp-inline-create/inline-create-row-builder.ts

@@ -18,11 +18,12 @@ import IScope = angular.IScope;
 import {scopeDestroyed$} from "../../helpers/angular-rx-utils";
 import {WorkPackageTable} from "../wp-fast-table/wp-fast-table";
 import {QueryColumn} from '../api/api-v3/hal-resources/query-resource.service';
+import {RowRefreshBuilder} from "../wp-fast-table/builders/rows/row-refresh-builder";
 
 export const inlineCreateRowClassName = 'wp-inline-create-row';
 export const inlineCreateCancelClassName = 'wp-table--cancel-create-link';
 
-export class InlineCreateRowBuilder extends SingleRowBuilder {
+export class InlineCreateRowBuilder extends RowRefreshBuilder {
   // Injections
   public states:States;
   public wpTableSelection:WorkPackageTableSelection;

frontend/app/components/wp-inline-create/wp-inline-create.directive.ts

@@ -35,11 +35,16 @@ import {WorkPackageResourceInterface} from "../api/api-v3/hal-resources/work-pac
 import {QueryFilterInstanceResource} from '../api/api-v3/hal-resources/query-filter-instance-resource.service';
 import {WorkPackageCreateService} from "../wp-create/wp-create.service";
 import {WorkPackageCacheService} from "../work-packages/work-package-cache.service";
-import {InlineCreateRowBuilder, inlineCreateCancelClassName} from "./inline-create-row-builder";
-import {scopedObservable} from "../../helpers/angular-rx-utils";
+import {
+  InlineCreateRowBuilder, inlineCreateCancelClassName,
+  inlineCreateRowClassName
+} from "./inline-create-row-builder";
+import {scopeDestroyed$, scopedObservable} from "../../helpers/angular-rx-utils";
 import {States} from "../states.service";
 import {WorkPackageEditForm} from "../wp-edit-form/work-package-edit-form";
 import {WorkPackageTable} from "../wp-fast-table/wp-fast-table";
+import {RowRefreshBuilder} from "../wp-fast-table/builders/rows/row-refresh-builder";
+import {WorkPackageTableRow} from "../wp-fast-table/wp-table.interfaces";
 
 export class WorkPackageInlineCreateController {
 
@@ -52,6 +57,7 @@ export class WorkPackageInlineCreateController {
   public text:{ create: string };
 
   private currentWorkPackage:WorkPackageResourceInterface|null;
+  private workPackageEditForm:WorkPackageEditForm|undefined;
   private rowBuilder:InlineCreateRowBuilder;
 
   constructor(
@@ -64,8 +70,6 @@ export class WorkPackageInlineCreateController {
     public wpCreate:WorkPackageCreateService,
     public wpTableColumns:WorkPackageTableColumnsService,
     private wpTableFilters:WorkPackageTableFiltersService,
-    private v3Path:any,
-    private PathHelper:any,
     private AuthorisationService:any,
     private $q:ng.IQService,
     private I18n:op.I18n
@@ -89,6 +93,23 @@ export class WorkPackageInlineCreateController {
         }
     });
 
+    // Watch on this scope when the columns change and refresh this row
+    this.states.table.columns.values$()
+      .filter(() => this.isHidden) // Take only when row is inserted
+      .takeUntil(scopeDestroyed$($scope)).subscribe(() => {
+        const rowElement = this.$element.find(`.${inlineCreateRowClassName}`);
+
+        if (rowElement.length) {
+          const data = {
+            element: rowElement[0],
+            object: this.currentWorkPackage,
+            workPackageId: 'new',
+            position: 0
+          };
+          this.rowBuilder.refreshRow(data as WorkPackageTableRow, this.workPackageEditForm);
+        }
+    });
+
     // Cancel edition of current new row
     this.$element.on('click keydown', `.${inlineCreateCancelClassName}`, (evt) => {
       onClickOrEnter(evt, () => {
@@ -117,12 +138,12 @@ export class WorkPackageInlineCreateController {
       this.applyDefaultsFromFilters(this.currentWorkPackage!).then(() => {
         this.wpCacheService.updateWorkPackage(this.currentWorkPackage!);
 
-        const form = new WorkPackageEditForm('new');
-        const row = this.rowBuilder.buildNew(wp, form);
+        this.workPackageEditForm = new WorkPackageEditForm('new');
+        const row = this.rowBuilder.buildNew(wp, this.workPackageEditForm);
         this.$element.append(row);
 
         this.$timeout(() => {
-          form.activateMissingFields();
+          this.workPackageEditForm!.activateMissingFields();
           this.hideRow();
         });
       });