[ADF-3794] Update individual rows without reloading DocumentList (#4213)

* reload table cells on node updates

* update unit tests

* update dynamic columns

* fix value type

* fix tests

* update code as per review

* update variable name

* test fixes, core automation service

* fix test

lib/core/datatable/components/datatable/datatable-cell.component.spec.ts

@@ -16,15 +16,18 @@
  */
 
 import { DateCellComponent } from './date-cell.component';
+import { Subject } from 'rxjs';
 
 describe('DataTableCellComponent', () => {
     it('should use medium format by default', () => {
-        const component = new DateCellComponent(null);
+        const component = new DateCellComponent(null, null);
         expect(component.format).toBe('medium');
     });
 
     it('should use column format', () => {
-        const component = new DateCellComponent(null);
+        const component = new DateCellComponent(null, <any> {
+            nodeUpdated: new Subject<any>()
+        });
         component.column = {
             key: 'created',
             type: 'date',

lib/core/datatable/components/datatable/datatable-cell.component.ts

@@ -15,23 +15,38 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    Input,
+    OnInit,
+    ViewEncapsulation,
+    OnDestroy
+} from '@angular/core';
 import { DataColumn } from '../../data/data-column.model';
 import { DataRow } from '../../data/data-row.model';
 import { DataTableAdapter } from '../../data/datatable-adapter';
+import { AlfrescoApiService } from '../../../services/alfresco-api.service';
+import { Subscription, BehaviorSubject } from 'rxjs';
+import { Node } from '@alfresco/js-api';
 
 @Component({
     selector: 'adf-datatable-cell',
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <ng-container>
-            <span [attr.aria-label]="value" [title]="tooltip" class="adf-datatable-cell-value">{{value}}</span>
-        </ng-container>`,
+            <span
+                [attr.aria-label]="value$ | async"
+                [title]="tooltip"
+                class="adf-datatable-cell-value"
+                >{{ value$ | async }}</span
+            >
+        </ng-container>
+    `,
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-datatable-cell' }
 })
-export class DataTableCellComponent implements OnInit {
-
+export class DataTableCellComponent implements OnInit, OnDestroy {
     @Input()
     data: DataTableAdapter;
 
@@ -41,20 +56,46 @@ export class DataTableCellComponent implements OnInit {
     @Input()
     row: DataRow;
 
-    @Input()
-    value: any;
+    value$ = new BehaviorSubject<any>('');
 
     @Input()
     tooltip: string;
 
+    private sub: Subscription;
+
+    constructor(protected alfrescoApiService: AlfrescoApiService) {}
+
     ngOnInit() {
-        if (!this.value && this.column && this.column.key && this.row && this.data) {
-            this.value = this.data.getValue(this.row, this.column);
+        this.updateValue();
+
+        this.sub = this.alfrescoApiService.nodeUpdated.subscribe((node: Node) => {
+            if (this.row) {
+                const { entry } = this.row['node'];
+
+                if (entry === node) {
+                    this.row['node'] = { entry };
+                    this.updateValue();
+                }
+            }
+        });
+    }
+
+    protected updateValue() {
+        if (this.column && this.column.key && this.row && this.data) {
+            const value = this.data.getValue(this.row, this.column);
+
+            this.value$.next(value);
 
             if (!this.tooltip) {
-                this.tooltip = this.value;
+                this.tooltip = value;
             }
         }
     }
 
+    ngOnDestroy() {
+        if (this.sub) {
+            this.sub.unsubscribe();
+            this.sub = null;
+        }
+    }
 }

lib/core/datatable/components/datatable/date-cell.component.ts

@@ -21,19 +21,27 @@ import {
     UserPreferencesService,
     UserPreferenceValues
 } from '../../../services/user-preferences.service';
+import { AlfrescoApiService } from '../../../services/alfresco-api.service';
 
 @Component({
     selector: 'adf-date-cell',
 
     template: `
         <ng-container>
-            <span title="{{ tooltip | date:'medium' }}" *ngIf="format === 'timeAgo' else standard_date" [attr.aria-label]=" value | adfTimeAgo: currentLocale ">
-                {{ value | adfTimeAgo: currentLocale }}
+            <span
+                [attr.aria-label]="value$ | async | adfTimeAgo: currentLocale"
+                title="{{ tooltip | date: 'medium' }}"
+                *ngIf="format === 'timeAgo'; else standard_date"
+            >
+                {{ value$ | async | adfTimeAgo: currentLocale }}
             </span>
         </ng-container>
         <ng-template #standard_date>
-            <span [attr.aria-label]=" value | date:format " title="{{ tooltip | date:format }}">
-                {{ value | date:format }}
+            <span
+                title="{{ tooltip | date: format }}"
+                [attr.aria-label]="value$ | async | date: format"
+            >
+                {{ value$ | async | date: format }}
             </span>
         </ng-template>
     `,
@@ -41,7 +49,7 @@ import {
     host: { class: 'adf-date-cell' }
 })
 export class DateCellComponent extends DataTableCellComponent {
-    currentLocale;
+    currentLocale: string;
 
     get format(): string {
         if (this.column) {
@@ -50,8 +58,11 @@ export class DateCellComponent extends DataTableCellComponent {
         return 'medium';
     }
 
-    constructor(userPreferenceService: UserPreferencesService) {
-        super();
+    constructor(
+        userPreferenceService: UserPreferencesService,
+        alfrescoApiService: AlfrescoApiService
+    ) {
+        super(alfrescoApiService);
 
         if (userPreferenceService) {
             userPreferenceService

lib/core/datatable/components/datatable/filesize-cell.component.ts

@@ -17,15 +17,24 @@
 
 import { Component, ViewEncapsulation } from '@angular/core';
 import { DataTableCellComponent } from './datatable-cell.component';
+import { AlfrescoApiService } from '../../../services/alfresco-api.service';
 
 @Component({
     selector: 'adf-filesize-cell',
     template: `
         <ng-container>
-            <span [attr.aria-label]=" value | adfFileSize " [title]="tooltip">{{ value | adfFileSize }}</span>
+            <span
+                [title]="tooltip"
+                [attr.aria-label]="value$ | async | adfFileSize"
+                >{{ value$ | async | adfFileSize }}</span
+            >
         </ng-container>
     `,
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-filesize-cell' }
 })
-export class FileSizeCellComponent extends DataTableCellComponent {}
+export class FileSizeCellComponent extends DataTableCellComponent {
+    constructor(alfrescoApiService: AlfrescoApiService) {
+        super(alfrescoApiService);
+    }
+}

lib/core/datatable/components/datatable/location-cell.component.spec.ts

@@ -69,12 +69,6 @@ describe('LocationCellComponent', () => {
         fixture.destroy();
     });
 
-    it('should set displayText', () => {
-        fixture.detectChanges();
-
-        expect(component.displayText).toBe('location');
-    });
-
     it('should set tooltip', () => {
         fixture.detectChanges();
 
@@ -87,24 +81,32 @@ describe('LocationCellComponent', () => {
         expect(component.link).toEqual([ columnData.format , rowData.path.elements[2].id ]);
     });
 
-    it('should not setup cell when path has no data', () => {
+    it('should not setup cell when path has no data', (done) => {
         rowData.path = {};
 
         fixture.detectChanges();
 
-        expect(component.displayText).toBe('');
         expect(component.tooltip).toBeUndefined();
         expect(component.link).toEqual([]);
+        component.value$.subscribe((value) => {
+            expect(value).toBe('');
+            done();
+        });
+
     });
 
-    it('should not setup cell when path is missing required properties', () => {
+    it('should not setup cell when path is missing required properties', (done) => {
         rowData.path = { someProp: '' };
 
         fixture.detectChanges();
 
-        expect(component.displayText).toBe('');
         expect(component.tooltip).toBeUndefined();
         expect(component.link).toEqual([]);
+
+        component.value$.subscribe((value) => {
+            expect(value).toBe('');
+            done();
+        });
     });
 
     it('should not setup cell when path data is missing one of the property', () => {
@@ -112,9 +114,15 @@ describe('LocationCellComponent', () => {
             name: 'some-name'
         };
 
+        let value = '';
+
+        component.value$.subscribe((val) => {
+            value = val;
+        });
+
         fixture.detectChanges();
 
-        expect(component.displayText).toBe('');
+        expect(value).toBe('');
         expect(component.tooltip).toBeUndefined();
         expect(component.link).toEqual([]);
 
@@ -124,7 +132,7 @@ describe('LocationCellComponent', () => {
 
         fixture.detectChanges();
 
-        expect(component.displayText).toBe('');
+        expect(value).toBe('');
         expect(component.tooltip).toBeUndefined();
         expect(component.link).toEqual([]);
     });

lib/core/datatable/components/datatable/location-cell.component.ts

@@ -15,9 +15,16 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    Input,
+    OnInit,
+    ViewEncapsulation
+} from '@angular/core';
 import { PathInfoEntity } from '@alfresco/js-api';
 import { DataTableCellComponent } from './datatable-cell.component';
+import { AlfrescoApiService } from '../../../services/alfresco-api.service';
 
 @Component({
     selector: 'adf-location-cell',
@@ -25,7 +32,7 @@ import { DataTableCellComponent } from './datatable-cell.component';
     template: `
         <ng-container>
             <a href="" [title]="tooltip" [routerLink]="link">
-                {{ displayText }}
+                {{ value$ | async }}
             </a>
         </ng-container>
     `,
@@ -33,28 +40,30 @@ import { DataTableCellComponent } from './datatable-cell.component';
     host: { class: 'adf-location-cell' }
 })
 export class LocationCellComponent extends DataTableCellComponent implements OnInit {
-
     @Input()
     link: any[];
 
-    @Input()
-    displayText: string = '';
+    constructor(alfrescoApiService: AlfrescoApiService) {
+        super(alfrescoApiService);
+    }
 
     /** @override */
     ngOnInit() {
-        if (!this.value && this.column && this.column.key && this.row && this.data) {
-            const path: PathInfoEntity = this.data.getValue(this.row, this.column);
+        if (this.column && this.column.key && this.row && this.data) {
+            const path: PathInfoEntity = this.data.getValue(
+                this.row,
+                this.column
+            );
 
             if (path && path.name && path.elements) {
-                this.value = path;
-                this.displayText = path.name.split('/').pop();
+                this.value$.next(path.name.split('/').pop());
 
                 if (!this.tooltip) {
                     this.tooltip = path.name;
                 }
 
                 const parent = path.elements[path.elements.length - 1];
-                this.link = [ this.column.format, parent.id ];
+                this.link = [this.column.format, parent.id];
             }
         }
     }