[ACA-1288] dynamic name cells (#1059)

* dynamic name cells

* search results

* fix size value

* update code

* check for node properties

* conditionally show title

* Update src/app/components/dl-custom-components/name-column/name-column.component.ts

Co-Authored-By: DenysVuika <denys.vuika@gmail.com>

src/app/components/dl-custom-components/name-column/name-column.component.ts

@@ -15,57 +15,61 @@
  * limitations under the License.
  */
 
+import { NameColumnComponent } from '@alfresco/adf-content-services';
+import { AlfrescoApiService } from '@alfresco/adf-core';
 import {
-  Component,
-  Input,
-  OnInit,
-  ViewEncapsulation,
   ChangeDetectorRef,
-  OnDestroy
+  Component,
+  ElementRef,
+  OnDestroy,
+  OnInit,
+  ViewEncapsulation
 } from '@angular/core';
 import { Actions, ofType } from '@ngrx/effects';
-import { EDIT_OFFLINE } from '../../../store/actions';
-import { NodeEntry } from '@alfresco/js-api';
 import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
+import { EDIT_OFFLINE } from '../../../store/actions';
 import { isLocked } from '../../../utils/node.utils';
 
 @Component({
   selector: 'aca-custom-name-column',
-  template: `
-    <div
-      class="aca-custom-name-column"
-      [ngClass]="{
-        'aca-name-column-container': isFile() && isFileWriteLocked()
-      }"
-    >
-      <adf-name-column [context]="context"></adf-name-column>
-
-      <ng-container *ngIf="isFile() && isFileWriteLocked()">
-        <aca-locked-by [context]="context"></aca-locked-by>
-      </ng-container>
-    </div>
-  `,
+  templateUrl: './name-column.component.html',
   styleUrls: ['name-column.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'adf-datatable-cell adf-datatable-link adf-name-column' }
 })
-export class CustomNameColumnComponent implements OnInit, OnDestroy {
-  node: NodeEntry;
+export class CustomNameColumnComponent extends NameColumnComponent
+  implements OnInit, OnDestroy {
+  private onDestroy$ = new Subject<boolean>();
 
-  @Input()
-  context: any;
-
-  private onDestroy$: Subject<boolean> = new Subject<boolean>();
-
-  constructor(private cd: ChangeDetectorRef, private actions$: Actions) {}
-
-  ngOnDestroy() {
-    this.onDestroy$.next(true);
-    this.onDestroy$.complete();
+  constructor(
+    element: ElementRef,
+    private cd: ChangeDetectorRef,
+    private actions$: Actions,
+    private apiService: AlfrescoApiService
+  ) {
+    super(element, apiService);
   }
 
   ngOnInit() {
-    this.node = this.context.row.node;
+    this.updateValue();
+
+    this.apiService.nodeUpdated
+      .pipe(takeUntil(this.onDestroy$))
+      .subscribe((node: any) => {
+        const row = this.context.row;
+        if (row) {
+          const { entry } = row.node;
+          const currentId = entry.nodeId || entry.id;
+          const updatedId = node.nodeId || node.id;
+
+          if (currentId === updatedId) {
+            entry.name = node.name;
+            row.node = { entry };
+            this.updateValue();
+          }
+        }
+      });
 
     this.actions$
       .pipe(
@@ -80,11 +84,18 @@ export class CustomNameColumnComponent implements OnInit, OnDestroy {
       });
   }
 
-  isFile() {
+  ngOnDestroy() {
+    super.ngOnDestroy();
+
+    this.onDestroy$.next(true);
+    this.onDestroy$.complete();
+  }
+
+  isFile(): boolean {
     return this.node && this.node.entry && this.node.entry.isFile;
   }
 
-  isFileWriteLocked() {
+  isFileWriteLocked(): boolean {
     return isLocked(this.node);
   }
 }