[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/document-list-custom-components.module.ts

@@ -29,9 +29,15 @@ import { CustomNameColumnComponent } from './name-column/name-column.component';
 import { LockByComponent } from './locked-by/locked-by.component';
 import { ContentModule } from '@alfresco/adf-content-services';
 import { MaterialModule } from '../../material.module';
+import { CoreModule } from '@alfresco/adf-core';
 
 @NgModule({
-  imports: [BrowserModule, ContentModule, MaterialModule],
+  imports: [
+    BrowserModule,
+    CoreModule.forChild(),
+    ContentModule.forChild(),
+    MaterialModule
+  ],
   declarations: [CustomNameColumnComponent, LockByComponent],
   exports: [CustomNameColumnComponent, LockByComponent],
   entryComponents: [CustomNameColumnComponent, LockByComponent]

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

@@ -0,0 +1,18 @@
+<div
+  class="aca-custom-name-column"
+  [ngClass]="{
+    'aca-name-column-container': isFile() && isFileWriteLocked()
+  }"
+>
+  <span
+    class="adf-datatable-cell-value"
+    title="{{ node | adfNodeNameTooltip }}"
+    (click)="onClick()"
+  >
+    {{ displayText$ | async }}
+  </span>
+
+  <ng-container *ngIf="isFile() && isFileWriteLocked()">
+    <aca-locked-by [context]="context"></aca-locked-by>
+  </ng-container>
+</div>

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: `
+  templateUrl: './name-column.component.html',
-    <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>
-  `,
   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 {
+export class CustomNameColumnComponent extends NameColumnComponent
-  node: NodeEntry;
+  implements OnInit, OnDestroy {
+  private onDestroy$ = new Subject<boolean>();
 
-  @Input()
+  constructor(
-  context: any;
+    element: ElementRef,
-
+    private cd: ChangeDetectorRef,
-  private onDestroy$: Subject<boolean> = new Subject<boolean>();
+    private actions$: Actions,
-
+    private apiService: AlfrescoApiService
-  constructor(private cd: ChangeDetectorRef, private actions$: Actions) {}
+  ) {
-
+    super(element, apiService);
-  ngOnDestroy() {
-    this.onDestroy$.next(true);
-    this.onDestroy$.complete();
   }
 
   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);
   }
 }

src/app/components/search/search-results-row/search-results-row.component.html

@@ -1,12 +1,14 @@
 <div class="line">
-  <span *ngIf="isFile" (click)="showPreview()" class="link"> {{ name }} </span>
+  <span *ngIf="isFile" (click)="showPreview()" class="link">
-  <span *ngIf="!isFile" (click)="navigate()" class="bold link">
+    {{ name$ | async }}
-    {{ name }}
   </span>
-  <span *ngIf="hasTitle && showTitle"> ( {{ title }} ) </span>
+  <span *ngIf="!isFile" (click)="navigate()" class="bold link">
+    {{ name$ | async }}
+  </span>
+  <span>{{ title$ | async }}</span>
 </div>
 
-<div *ngIf="hasDescription" class="line">{{ description }}</div>
+<div *ngIf="description" class="line">{{ description }}</div>
 
 <div class="line">
   {{ 'APP.BROWSE.SEARCH.CUSTOM_ROW.MODIFIED' | translate }}:

src/app/components/search/search-results-row/search-results-row.component.ts

@@ -28,13 +28,16 @@ import {
   Input,
   OnInit,
   ViewEncapsulation,
-  ChangeDetectionStrategy
+  ChangeDetectionStrategy,
+  OnDestroy
 } from '@angular/core';
 import { MinimalNodeEntity } from '@alfresco/js-api';
 import { ViewFileAction } from '../../../store/actions';
 import { Store } from '@ngrx/store';
-import { AppStore } from '../../../store/states/app.state';
 import { NavigateToFolder } from '../../../store/actions';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { AlfrescoApiService } from '@alfresco/adf-core';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'aca-search-results-row',
@@ -44,60 +47,79 @@ import { NavigateToFolder } from '../../../store/actions';
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'aca-search-results-row' }
 })
-export class SearchResultsRowComponent implements OnInit {
+export class SearchResultsRowComponent implements OnInit, OnDestroy {
   private node: MinimalNodeEntity;
+  private onDestroy$ = new Subject<boolean>();
 
   @Input()
   context: any;
 
-  constructor(private store: Store<AppStore>) {}
+  name$ = new BehaviorSubject<string>('');
+  title$ = new BehaviorSubject<string>('');
+
+  constructor(
+    private store: Store<any>,
+    private alfrescoApiService: AlfrescoApiService
+  ) {}
 
   ngOnInit() {
+    this.updateValues();
+
+    this.alfrescoApiService.nodeUpdated
+      .pipe(takeUntil(this.onDestroy$))
+      .subscribe((node: any) => {
+        const row = this.context.row;
+        if (row) {
+          const { entry } = row.node;
+
+          if (entry.id === node.id) {
+            entry.name = node.name;
+            entry.properties = Object.assign({}, node.properties);
+
+            this.updateValues();
+          }
+        }
+      });
+  }
+
+  private updateValues() {
     this.node = this.context.row.node;
+
+    const { name, properties } = this.node.entry;
+    const title = properties ? properties['cm:title'] : '';
+
+    this.name$.next(name);
+
+    if (title !== name) {
+      this.title$.next(title ? `( ${title} )` : '');
+    }
   }
 
-  get name() {
+  ngOnDestroy() {
-    return this.getValue('name');
+    this.onDestroy$.next(true);
+    this.onDestroy$.complete();
   }
 
-  get title() {
+  get description(): string {
-    return this.getValue('properties["cm:title"]');
+    const { properties } = this.node.entry;
+    return properties ? properties['cm:description'] : '';
   }
 
-  get description() {
+  get modifiedAt(): Date {
-    return this.getValue('properties["cm:description"]');
+    return this.node.entry.modifiedAt;
   }
 
-  get modifiedAt() {
+  get size(): number {
-    return this.getValue('modifiedAt');
+    const { content } = this.node.entry;
+    return content ? content.sizeInBytes : null;
   }
 
-  get size() {
+  get user(): string {
-    return this.getValue('content.sizeInBytes');
+    return this.node.entry.modifiedByUser.displayName;
   }
 
-  get user() {
+  get isFile(): boolean {
-    return this.getValue('modifiedByUser.displayName');
+    return this.node.entry.isFile;
-  }
-
-  get hasDescription() {
-    return this.description;
-  }
-
-  get hasTitle() {
-    return this.title;
-  }
-
-  get showTitle() {
-    return this.name !== this.title;
-  }
-
-  get hasSize() {
-    return this.size;
-  }
-
-  get isFile() {
-    return this.getValue('isFile');
   }
 
   showPreview() {
@@ -107,14 +129,4 @@ export class SearchResultsRowComponent implements OnInit {
   navigate() {
     this.store.dispatch(new NavigateToFolder(this.node));
   }
-
-  private getValue(path: string) {
-    return path
-      .replace('["', '.')
-      .replace('"]', '')
-      .replace('[', '.')
-      .replace(']', '')
-      .split('.')
-      .reduce((acc, part) => (acc ? acc[part] : null), this.node.entry);
-  }
 }