[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/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)="navigate()" class="bold link">
-    {{ name }}
+  <span *ngIf="isFile" (click)="showPreview()" class="link">
+    {{ name$ | async }}
   </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() {
-    return this.getValue('name');
+  ngOnDestroy() {
+    this.onDestroy$.next(true);
+    this.onDestroy$.complete();
   }
 
-  get title() {
-    return this.getValue('properties["cm:title"]');
+  get description(): string {
+    const { properties } = this.node.entry;
+    return properties ? properties['cm:description'] : '';
   }
 
-  get description() {
-    return this.getValue('properties["cm:description"]');
+  get modifiedAt(): Date {
+    return this.node.entry.modifiedAt;
   }
 
-  get modifiedAt() {
-    return this.getValue('modifiedAt');
+  get size(): number {
+    const { content } = this.node.entry;
+    return content ? content.sizeInBytes : null;
   }
 
-  get size() {
-    return this.getValue('content.sizeInBytes');
+  get user(): string {
+    return this.node.entry.modifiedByUser.displayName;
   }
 
-  get user() {
-    return this.getValue('modifiedByUser.displayName');
-  }
-
-  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');
+  get isFile(): boolean {
+    return this.node.entry.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);
-  }
 }