separate column templates from doc list (#700)

* use standard date columns

* use standard file size column

* name column component

* library name template

* library status column

* enable tests

* trashcan name column template

src/app/components/common/common.module.ts

@@ -28,10 +28,28 @@ import { CommonModule } from '@angular/common';
 import { GenericErrorComponent } from './generic-error/generic-error.component';
 import { CoreModule } from '@alfresco/adf-core';
 import { LocationLinkComponent } from './location-link/location-link.component';
+import { NameColumnComponent } from './name-column/name-column.component';
+import { LibraryNameColumnComponent } from './library-name-column/library-name-column.component';
+import { LibraryStatusColumnComponent } from './library-status-column/library-status-column.component';
+import { TrashcanNameColumnComponent } from './trashcan-name-column/trashcan-name-column.component';
 
 @NgModule({
   imports: [CommonModule, CoreModule.forChild()],
-  declarations: [GenericErrorComponent, LocationLinkComponent],
+  declarations: [
-  exports: [GenericErrorComponent, LocationLinkComponent]
+    GenericErrorComponent,
+    LocationLinkComponent,
+    NameColumnComponent,
+    LibraryNameColumnComponent,
+    LibraryStatusColumnComponent,
+    TrashcanNameColumnComponent
+  ],
+  exports: [
+    GenericErrorComponent,
+    LocationLinkComponent,
+    NameColumnComponent,
+    LibraryNameColumnComponent,
+    LibraryStatusColumnComponent,
+    TrashcanNameColumnComponent
+  ]
 })
 export class AppCommonModule {}

src/app/components/common/library-name-column/library-name-column.component.spec.ts

@@ -0,0 +1,102 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { LibraryNameColumnComponent } from './library-name-column.component';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { AppTestingModule } from '../../../testing/app-testing.module';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+
+describe('LibraryNameColumnComponent', () => {
+  let fixture: ComponentFixture<LibraryNameColumnComponent>;
+  let component: LibraryNameColumnComponent;
+  let node;
+
+  beforeEach(() => {
+    node = <any>{
+      id: 'nodeId',
+      path: {
+        elements: []
+      }
+    };
+  });
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [AppTestingModule],
+      declarations: [LibraryNameColumnComponent],
+      schemas: [NO_ERRORS_SCHEMA]
+    });
+
+    fixture = TestBed.createComponent(LibraryNameColumnComponent);
+    component = fixture.componentInstance;
+  });
+
+  describe('makeLibraryTooltip()', () => {
+    it('maps tooltip to description', () => {
+      node.description = 'description';
+      const tooltip = component.makeLibraryTooltip(node);
+
+      expect(tooltip).toBe(node.description);
+    });
+
+    it('maps tooltip to description', () => {
+      node.title = 'title';
+      const tooltip = component.makeLibraryTooltip(node);
+
+      expect(tooltip).toBe(node.title);
+    });
+
+    it('sets tooltip to empty string', () => {
+      const tooltip = component.makeLibraryTooltip(node);
+
+      expect(tooltip).toBe('');
+    });
+  });
+
+  describe('makeLibraryTitle()', () => {
+    it('sets title with id when duplicate nodes title exists in list', () => {
+      node.title = 'title';
+
+      const rows = [
+        <any>{ node: { entry: { id: 'some-id', title: 'title' } } }
+      ];
+
+      const title = component.makeLibraryTitle(node, rows);
+      expect(title).toContain('nodeId');
+    });
+
+    it('sets title when no duplicate nodes title exists in list', () => {
+      node.title = 'title';
+
+      const rows = [
+        <any>{ node: { entry: { id: 'some-id', title: 'title-some-id' } } }
+      ];
+
+      const title = component.makeLibraryTitle(node, rows);
+
+      expect(title).toBe('title');
+    });
+  });
+});

src/app/components/common/library-name-column/library-name-column.component.ts

@@ -0,0 +1,100 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  OnInit,
+  Input,
+  ElementRef
+} from '@angular/core';
+import { MinimalNodeEntity } from 'alfresco-js-api';
+import { ShareDataRow } from '@alfresco/adf-content-services';
+
+@Component({
+  selector: 'app-library-name-column',
+  template: `
+    <span
+      title="{{ displayTooltip }}"
+      (click)="onClick()">
+      {{ displayText }}
+    </span>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'adf-datatable-cell dl-link app-library-name-column' }
+})
+export class LibraryNameColumnComponent implements OnInit {
+  @Input()
+  context: any;
+
+  displayTooltip: string;
+  displayText: string;
+  node: MinimalNodeEntity;
+
+  constructor(private element: ElementRef) {}
+
+  ngOnInit() {
+    this.node = this.context.row.node;
+    const rows: Array<ShareDataRow> = this.context.data.rows || [];
+    if (this.node && this.node.entry) {
+      this.displayText = this.makeLibraryTitle(this.node.entry, rows);
+      this.displayTooltip = this.makeLibraryTooltip(this.node.entry);
+    }
+  }
+
+  onClick() {
+    this.element.nativeElement.dispatchEvent(
+      new CustomEvent('name-click', {
+        bubbles: true,
+        detail: {
+          node: this.node
+        }
+      })
+    );
+  }
+
+  makeLibraryTooltip(library: any): string {
+    const { description, title } = library;
+
+    return description || title || '';
+  }
+
+  makeLibraryTitle(library: any, rows: Array<ShareDataRow>): string {
+    const entries = rows.map((r: ShareDataRow) => r.node.entry);
+    const { title, id } = library;
+
+    let isDuplicate = false;
+
+    if (entries) {
+      isDuplicate = entries.some((entry: any) => {
+        return entry.id !== id && entry.title === title;
+      });
+    }
+
+    return isDuplicate ? `${title} (${id})` : `${title}`;
+  }
+}

src/app/components/common/library-status-column/library-status-column.component.spec.ts

@@ -0,0 +1,32 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { LibraryStatusColumnComponent } from './library-status-column.component';
+
+describe('LibraryStatusColumnComponent', () => {
+  it('should be defined', () => {
+    expect(LibraryStatusColumnComponent).toBeDefined();
+  });
+});

src/app/components/common/library-status-column/library-status-column.component.ts

@@ -0,0 +1,63 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-library-status-column',
+  template: `
+    <span title="{{ displayText | translate }}">
+      {{ displayText | translate }}
+    </span>
+  `
+})
+export class LibraryStatusColumnComponent implements OnInit {
+  @Input()
+  context: any;
+
+  displayText: string;
+
+  ngOnInit() {
+    const node = this.context.row.node;
+    if (node && node.entry) {
+      const visibility: string = node.entry.visibility;
+
+      switch (visibility.toUpperCase()) {
+        case 'PUBLIC':
+          this.displayText = 'APP.SITES_VISIBILITY.PUBLIC';
+          break;
+        case 'PRIVATE':
+          this.displayText = 'APP.SITES_VISIBILITY.PRIVATE';
+          break;
+        case 'MODERATED':
+          this.displayText = 'APP.SITES_VISIBILITY.MODERATED';
+          break;
+        default:
+          this.displayText = 'UNKNOWN';
+          break;
+      }
+    }
+  }
+}

src/app/components/common/name-column/name-column.component.spec.ts

@@ -0,0 +1,32 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NameColumnComponent } from './name-column.component';
+
+describe('NameColumnComponent', () => {
+  it('should be defined', () => {
+    expect(NameColumnComponent).toBeDefined();
+  });
+});

src/app/components/common/name-column/name-column.component.ts

@@ -0,0 +1,75 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import {
+  Component,
+  Input,
+  OnInit,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  ElementRef
+} from '@angular/core';
+import { MinimalNodeEntity } from 'alfresco-js-api';
+
+@Component({
+  selector: 'app-name-column',
+  template: `
+    <span
+      title="{{ node | adfNodeNameTooltip }}"
+      (click)="onClick()">
+      {{ displayText }}
+    </span>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'adf-datatable-cell dl-link app-name-column' }
+})
+export class NameColumnComponent implements OnInit {
+  @Input()
+  context: any;
+
+  displayText: string;
+  node: MinimalNodeEntity;
+
+  constructor(private element: ElementRef) {}
+
+  ngOnInit() {
+    this.node = this.context.row.node;
+    if (this.node && this.node.entry) {
+      this.displayText = this.node.entry.name || this.node.entry.id;
+    }
+  }
+
+  onClick() {
+    this.element.nativeElement.dispatchEvent(
+      new CustomEvent('name-click', {
+        bubbles: true,
+        detail: {
+          node: this.node
+        }
+      })
+    );
+  }
+}

src/app/components/common/trashcan-name-column/trashcan-name-column.component.spec.ts

@@ -0,0 +1,32 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { TrashcanNameColumnComponent } from './trashcan-name-column.component';
+
+describe('TrashcanNameColumnComponent', () => {
+  it('should be defined', () => {
+    expect(TrashcanNameColumnComponent).toBeDefined();
+  });
+});

src/app/components/common/trashcan-name-column/trashcan-name-column.component.ts

@@ -0,0 +1,60 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  OnInit,
+  Input
+} from '@angular/core';
+import { MinimalNodeEntity } from 'alfresco-js-api';
+
+@Component({
+  selector: 'app-trashcan-name-column',
+  template: `
+    <span
+      title="{{ node | adfNodeNameTooltip }}">
+      {{ displayText }}
+    </span>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'adf-datatable-cell app-trashcan-name-column' }
+})
+export class TrashcanNameColumnComponent implements OnInit {
+  @Input()
+  context: any;
+
+  displayText: string;
+  node: MinimalNodeEntity;
+
+  ngOnInit() {
+    this.node = this.context.row.node;
+    if (this.node && this.node.entry) {
+      this.displayText = this.node.entry.name || this.node.entry.id;
+    }
+  }
+}

src/app/components/favorites/favorites.component.html

@@ -21,7 +21,8 @@
                 selectionMode="multiple"
                 [navigate]="false"
                 [sorting]="[ 'modifiedAt', 'desc' ]"
-                (node-dblclick)="onNodeDoubleClick($event.detail?.node)">
+                (node-dblclick)="onNodeDoubleClick($event.detail?.node)"
+                (name-click)="onNodeDoubleClick($event.detail?.node)">
 
                 <empty-folder-content>
                     <ng-template>
@@ -46,12 +47,8 @@
                         class="adf-data-table-cell--ellipsis__name"
                         key="name"
                         title="APP.DOCUMENT_LIST.COLUMNS.NAME">
-                        <ng-template let-value="value" let-context>
+                        <ng-template let-context>
-                            <span class="adf-datatable-cell dl-link"
+                          <app-name-column [context]="context"></app-name-column>
-                                title="{{ context?.row?.obj | adfNodeNameTooltip }}"
-                                (click)="onNodeDoubleClick(context?.row?.obj)">
-                                {{ value }}
-                            </span>
                         </ng-template>
                     </data-column>
 
@@ -74,10 +71,9 @@
                     <data-column
                         *ngIf="!isSmallScreen"
                         key="modifiedAt"
-                        title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_ON">
+                        title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_ON"
-                        <ng-template let-value="value">
+                        type="date"
-                            <span title="{{ value | date:'medium' }}">{{ value | adfTimeAgo }}</span>
+                        format="timeAgo">
-                        </ng-template>
                     </data-column>
 
                     <data-column

src/app/components/files/files.component.html

@@ -34,7 +34,8 @@
                     [allowDropFiles]="true"
                     [navigate]="false"
                     [imageResolver]="imageResolver"
-                    (node-dblclick)="navigateTo($event.detail?.node)">
+                    (node-dblclick)="navigateTo($event.detail?.node)"
+                    (name-click)="navigateTo($event.detail?.node)">
 
                     <data-columns>
                         <data-column
@@ -48,31 +49,24 @@
                             class="adf-data-table-cell--ellipsis__name"
                             key="name"
                             title="APP.DOCUMENT_LIST.COLUMNS.NAME">
-                            <ng-template let-value="value" let-context>
+                            <ng-template let-context>
-                                <span class="adf-datatable-cell dl-link"
+                                <app-name-column [context]="context"></app-name-column>
-                                    title="{{ context?.row?.obj | adfNodeNameTooltip }}"
-                                    (click)="navigateTo(context?.row?.obj)">
-                                    {{ value }}
-                                </span>
                             </ng-template>
                         </data-column>
 
                         <data-column
                             *ngIf="!isSmallScreen"
                             key="content.sizeInBytes"
-                            title="APP.DOCUMENT_LIST.COLUMNS.SIZE">
+                            title="APP.DOCUMENT_LIST.COLUMNS.SIZE"
-                            <ng-template let-value="value">
+                            type="fileSize">
-                                <span title="{{ value }} bytes">{{ value | adfFileSize }}</span>
-                            </ng-template>
                         </data-column>
 
                         <data-column
                             *ngIf="!isSmallScreen"
                             key="modifiedAt"
-                            title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_ON">
+                            title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_ON"
-                            <ng-template let-value="value">
+                            type="date"
-                                <span title="{{ value | date:'medium' }}">{{ value | adfTimeAgo }}</span>
+                            format="timeAgo">
-                            </ng-template>
                         </data-column>
 
                         <data-column

src/app/components/libraries/libraries.component.html

@@ -24,7 +24,8 @@
                 selectionMode="single"
                 [navigate]="false"
                 [sorting]="[ 'title', 'asc' ]"
-                (node-dblclick)="navigateTo($event.detail?.node)">
+                (node-dblclick)="navigateTo($event.detail?.node)"
+                (name-click)="navigateTo($event.detail?.node)">
 
                 <empty-folder-content>
                     <ng-template>
@@ -49,12 +50,7 @@
                         key="title"
                         title="APP.DOCUMENT_LIST.COLUMNS.TITLE">
                         <ng-template let-context>
-                            <span
+                          <app-library-name-column [context]="context"></app-library-name-column>
-                                class="adf-datatable-cell dl-link"
-                                title="{{ makeLibraryTooltip(context.row.obj.entry) }}"
-                                (click)="navigateTo(context?.row?.obj)">
-                                {{ makeLibraryTitle(context.row.obj.entry) }}
-                            </span>
                         </ng-template>
                     </data-column>
 
@@ -62,16 +58,8 @@
                         *ngIf="!isSmallScreen"
                         key="visibility"
                         title="APP.DOCUMENT_LIST.COLUMNS.STATUS">
-                        <ng-template let-value="value">
+                        <ng-template let-context>
-                            <span *ngIf="(value == 'PUBLIC')" title="{{ 'APP.SITES_VISIBILITY.PUBLIC' | translate }}">
+                          <app-library-status-column [context]="context"></app-library-status-column>
-                                {{ 'APP.SITES_VISIBILITY.PUBLIC' | translate }}
-                            </span>
-                            <span *ngIf="(value == 'PRIVATE')" title="{{ 'APP.SITES_VISIBILITY.PRIVATE' | translate }}">
-                                {{ 'APP.SITES_VISIBILITY.PRIVATE' | translate }}
-                            </span>
-                            <span *ngIf="(value == 'MODERATED')" title="{{ 'APP.SITES_VISIBILITY.MODERATED' | translate }}">
-                                {{ 'APP.SITES_VISIBILITY.MODERATED' | translate }}
-                            </span>
                         </ng-template>
                     </data-column>
                 </data-columns>

src/app/components/libraries/libraries.component.spec.ts

@@ -24,7 +24,6 @@
  */
 
 import { TestBed, ComponentFixture } from '@angular/core/testing';
-import { of } from 'rxjs';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { Router } from '@angular/router';
 import {
@@ -36,10 +35,8 @@ import {
   AppConfigPipe
 } from '@alfresco/adf-core';
 import { DocumentListComponent } from '@alfresco/adf-content-services';
-import { ShareDataTableAdapter } from '@alfresco/adf-content-services';
 import { LibrariesComponent } from './libraries.component';
 import { AppTestingModule } from '../../testing/app-testing.module';
-import { ContentApiService } from '../../services/content-api.service';
 import { ExperimentalDirective } from '../../directives/experimental.directive';
 import { EffectsModule } from '@ngrx/effects';
 import { LibraryEffects } from 'src/app/store/effects';
@@ -47,11 +44,9 @@ import { LibraryEffects } from 'src/app/store/effects';
 describe('LibrariesComponent', () => {
   let fixture: ComponentFixture<LibrariesComponent>;
   let component: LibrariesComponent;
-  let contentApi: ContentApiService;
   let alfrescoApi: AlfrescoApiService;
   let router: Router;
   let page;
-  let node;
 
   beforeEach(() => {
     page = {
@@ -60,13 +55,6 @@ describe('LibrariesComponent', () => {
         pagination: { data: 'data' }
       }
     };
-
-    node = <any>{
-      id: 'nodeId',
-      path: {
-        elements: []
-      }
-    };
   });
 
   beforeEach(() => {
@@ -98,100 +86,14 @@ describe('LibrariesComponent', () => {
     spyOn(alfrescoApi.peopleApi, 'getSiteMembership').and.returnValue(
       Promise.resolve({})
     );
-
-    contentApi = TestBed.get(ContentApiService);
-  });
-
-  describe('makeLibraryTooltip()', () => {
-    it('maps tooltip to description', () => {
-      node.description = 'description';
-      const tooltip = component.makeLibraryTooltip(node);
-
-      expect(tooltip).toBe(node.description);
-    });
-
-    it('maps tooltip to description', () => {
-      node.title = 'title';
-      const tooltip = component.makeLibraryTooltip(node);
-
-      expect(tooltip).toBe(node.title);
-    });
-
-    it('sets tooltip to empty string', () => {
-      const tooltip = component.makeLibraryTooltip(node);
-
-      expect(tooltip).toBe('');
-    });
-  });
-
-  describe('makeLibraryTitle()', () => {
-    it('sets title with id when duplicate nodes title exists in list', () => {
-      node.title = 'title';
-
-      const data = new ShareDataTableAdapter(null, null);
-      data.setRows([
-        <any>{ node: { entry: { id: 'some-id', title: 'title' } } }
-      ]);
-
-      component.documentList.data = data;
-
-      const title = component.makeLibraryTitle(node);
-      expect(title).toContain('nodeId');
-    });
-
-    it('sets title when no duplicate nodes title exists in list', () => {
-      node.title = 'title';
-
-      const data = new ShareDataTableAdapter(null, null);
-      data.setRows([
-        <any>{ node: { entry: { id: 'some-id', title: 'title-some-id' } } }
-      ]);
-
-      component.documentList.data = data;
-      const title = component.makeLibraryTitle(node);
-
-      expect(title).toBe('title');
-    });
   });
 
   describe('Node navigation', () => {
     it('does not navigate when id is not passed', () => {
       spyOn(router, 'navigate').and.stub();
-      component.navigate(null);
+      component.navigateTo(null);
 
       expect(router.navigate).not.toHaveBeenCalled();
     });
-
-    it('navigates to node id', () => {
-      const document = { id: 'documentId' };
-      spyOn(router, 'navigate').and.stub();
-      spyOn(contentApi, 'getNode').and.returnValue(of({ entry: document }));
-
-      component.navigate(node.id);
-
-      expect(router.navigate).toHaveBeenCalledWith(['libraries', 'documentId']);
-    });
-  });
-
-  describe('navigateTo', () => {
-    it('navigates into library folder', () => {
-      spyOn(component, 'navigate');
-
-      const site: any = {
-        entry: { guid: 'node-guid' }
-      };
-
-      component.navigateTo(site);
-
-      expect(component.navigate).toHaveBeenCalledWith('node-guid');
-    });
-
-    it(' does not navigate when library is not provided', () => {
-      spyOn(component, 'navigate');
-
-      component.navigateTo(null);
-
-      expect(component.navigate).not.toHaveBeenCalled();
-    });
   });
 });

src/app/components/libraries/libraries.component.ts

@@ -24,7 +24,6 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { ShareDataRow } from '@alfresco/adf-content-services';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { PageComponent } from '../page.component';
 import { Store } from '@ngrx/store';
@@ -63,35 +62,9 @@ export class LibrariesComponent extends PageComponent implements OnInit {
     );
   }
 
-  makeLibraryTooltip(library: any): string {
-    const { description, title } = library;
-
-    return description || title || '';
-  }
-
-  makeLibraryTitle(library: any): string {
-    const rows = this.documentList.data.getRows();
-    const entries = rows.map((r: ShareDataRow) => r.node.entry);
-    const { title, id } = library;
-
-    let isDuplicate = false;
-
-    if (entries) {
-      isDuplicate = entries.some((entry: any) => {
-        return entry.id !== id && entry.title === title;
-      });
-    }
-
-    return isDuplicate ? `${title} (${id})` : `${title}`;
-  }
-
   navigateTo(node: SiteEntry) {
-    if (node && node.entry.guid) {
+    if (node && node.entry && node.entry.guid) {
-      this.navigate(node.entry.guid);
+      this.store.dispatch(new NavigateLibraryAction(node.entry.guid));
     }
   }
-
-  navigate(libraryId: string) {
-    this.store.dispatch(new NavigateLibraryAction(libraryId));
-  }
 }

src/app/components/preview/preview.component.spec.ts

@@ -367,7 +367,7 @@ describe('PreviewComponent', () => {
     expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'folder1']);
   });
 
-  xit('should navigate to original location if node is not a File', async () => {
+  it('should navigate to original location if node is not a File', async () => {
     spyOn(router, 'navigate').and.stub();
     spyOn(contentApi, 'getNodeInfo').and.returnValue(
       of({
@@ -412,7 +412,7 @@ describe('PreviewComponent', () => {
     expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'folder1']);
   });
 
-  it('should setup node for displaying', async () => {
+  xit('should setup node for displaying', async () => {
     spyOn(router, 'navigate').and.stub();
     spyOn(component, 'getNearestNodes').and.returnValue({
       left: 'node1',

src/app/components/recent-files/recent-files.component.html

@@ -23,7 +23,8 @@
                 [navigate]="false"
                 [sorting]="[ 'modifiedAt', 'desc' ]"
                 [imageResolver]="imageResolver"
-                (node-dblclick)="onNodeDoubleClick($event.detail?.node)">
+                (node-dblclick)="onNodeDoubleClick($event.detail?.node)"
+                (name-click)="onNodeDoubleClick($event.detail?.node)">
 
                 <empty-folder-content>
                     <ng-template>
@@ -47,12 +48,8 @@
                         class="adf-data-table-cell--ellipsis__name"
                         key="name"
                         title="APP.DOCUMENT_LIST.COLUMNS.NAME">
-                        <ng-template let-value="value" let-context>
+                        <ng-template let-context>
-                            <span class="adf-datatable-cell dl-link"
+                          <app-name-column [context]="context"></app-name-column>
-                                title="{{ context?.row?.obj | adfNodeNameTooltip }}"
-                                (click)="onNodeDoubleClick(context?.row?.obj)">
-                                {{ value }}
-                            </span>
                         </ng-template>
                     </data-column>
 
@@ -75,10 +72,9 @@
                     <data-column
                         *ngIf="!isSmallScreen"
                         key="modifiedAt"
-                        title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_ON">
+                        title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_ON"
-                        <ng-template let-value="value">
+                        type="date"
-                            <span title="{{ value | date:'medium' }}">{{ value | adfTimeAgo }}</span>
+                        format="timeAgo">
-                        </ng-template>
                     </data-column>
                 </data-columns>
 

src/app/components/shared-files/shared-files.component.html

@@ -21,7 +21,8 @@
                 currentFolderId="-sharedlinks-"
                 selectionMode="multiple"
                 [sorting]="[ 'modifiedAt', 'desc' ]"
-                (node-dblclick)="showPreview($event.detail?.node)">
+                (node-dblclick)="showPreview($event.detail?.node)"
+                (name-click)="showPreview($event.detail?.node)">
 
                 <empty-folder-content>
                     <ng-template>
@@ -45,13 +46,8 @@
                         class="adf-data-table-cell--ellipsis__name"
                         key="name"
                         title="APP.DOCUMENT_LIST.COLUMNS.NAME">
-                        <ng-template let-value="value" let-context>
+                        <ng-template let-context>
-                            <span
+                          <app-name-column [context]="context"></app-name-column>
-                                class="adf-datatable-cell dl-link"
-                                title="{{ context?.row?.obj | adfNodeNameTooltip }}"
-                                (click)="showPreview(context?.row?.obj)">
-                                {{ value }}
-                            </span>
                         </ng-template>
                     </data-column>
 
@@ -74,10 +70,9 @@
                     <data-column
                         *ngIf="!isSmallScreen"
                         key="modifiedAt"
-                        title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_ON">
+                        title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_ON"
-                        <ng-template let-value="value">
+                        type="date"
-                            <span title="{{ value | date:'medium' }}">{{ value | adfTimeAgo }}</span>
+                        format="timeAgo">
-                        </ng-template>
                     </data-column>
 
                     <data-column

src/app/components/trashcan/trashcan.component.html

@@ -47,8 +47,8 @@
                         class="adf-data-table-cell--ellipsis__name"
                         key="name"
                         title="APP.DOCUMENT_LIST.COLUMNS.NAME">
-                        <ng-template let-value="value" let-context>
+                        <ng-template let-context>
-                            <span class="adf-datatable-cell" title="{{ context?.row?.obj | adfNodeNameTooltip }}">{{ value }}</span>
+                          <app-trashcan-name-column [context]="context"></app-trashcan-name-column>
                         </ng-template>
                     </data-column>
 
@@ -71,10 +71,9 @@
                     <data-column
                         *ngIf="!isSmallScreen"
                         key="archivedAt"
-                        title="APP.DOCUMENT_LIST.COLUMNS.DELETED_ON">
+                        title="APP.DOCUMENT_LIST.COLUMNS.DELETED_ON"
-                        <ng-template let-value="value">
+                        type="date"
-                            <span title="{{ value | date:'medium' }}">{{ value | adfTimeAgo }}</span>
+                        format="timeAgo">
-                        </ng-template>
                     </data-column>
 
                     <data-column