location link component

src/app/app.module.ts

@@ -42,6 +42,7 @@ import { CurrentUserComponent } from './components/current-user/current-user.com
 import { SearchComponent } from './components/search/search.component';
 import { SidenavComponent } from './components/sidenav/sidenav.component';
 import { AboutComponent } from './components/about/about.component';
+import { LocationLinkComponent } from './components/location-link/location-link.component';
 
 @NgModule({
     imports: [
@@ -69,7 +70,8 @@ import { AboutComponent } from './components/about/about.component';
         SharedFilesComponent,
         TrashcanComponent,
         PreviewComponent,
-        AboutComponent
+        AboutComponent,
+        LocationLinkComponent
     ],
     providers: [
         {

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

@@ -117,9 +117,10 @@
 
                 <data-column
                     key="path"
-                    title="APP.DOCUMENT_LIST.COLUMNS.LOCATION"
+                    title="APP.DOCUMENT_LIST.COLUMNS.LOCATION">
-                    type="location"
+                    <ng-template let-context>
-                    format="/personal-files">
+                        <app-location-link [context]="context"></app-location-link>
+                    </ng-template>
                 </data-column>
 
                 <data-column

src/app/components/location-link/location-link.component.ts

@@ -0,0 +1,84 @@
+import { Component, Input, ChangeDetectionStrategy, OnInit, ViewEncapsulation } from '@angular/core';
+import { DataColumn, DataRow, DataTableAdapter } from 'ng2-alfresco-datatable';
+import { PathInfoEntity } from 'alfresco-js-api';
+
+@Component({
+    selector: 'app-location-link',
+    template: `
+        <a href="" [title]="tooltip" [routerLink]="link">
+            {{ displayText }}
+        </a>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    // tslint:disable-next-line:use-host-property-decorator
+    host: {
+        'class': 'app-location-link'
+    }
+})
+export class LocationLinkComponent implements OnInit {
+
+    @Input()
+    context: any;
+
+    @Input()
+    link: any[];
+
+    @Input()
+    displayText = '';
+
+    @Input()
+    tooltip = '';
+
+    ngOnInit() {
+        if (this.context) {
+            const data: DataTableAdapter = this.context.data;
+            const col: DataColumn = this.context.col;
+            const row: DataRow = this.context.row;
+            const value: PathInfoEntity = data.getValue(row, col);
+
+            if (value.name && value.elements) {
+                const isLibraryPath = this.isLibraryContent(value);
+
+                this.displayText = this.getDisplayText(value);
+                this.tooltip = this.getTooltip(value);
+
+                const parent = value.elements[value.elements.length - 1];
+                const area = isLibraryPath ? '/libraries' : '/personal-files';
+
+                this.link = [ area, parent.id ];
+            }
+        }
+    }
+
+    private isLibraryContent(path: PathInfoEntity): boolean {
+        if (path && path.elements.length >= 2 && path.elements[1].name === 'Sites') {
+            return true;
+        }
+        return false;
+    }
+
+    private getDisplayText(path: PathInfoEntity): string {
+        let result = path.elements[path.elements.length - 1].name;
+
+        if (result === 'documentLibrary') {
+            result = path.elements[path.elements.length - 2].name;
+        }
+
+        result = result.replace('Company Home', 'Personal Files');
+
+        return result;
+    }
+
+    // todo: review once 5.2.3 is out
+    private getTooltip(path: PathInfoEntity): string {
+        let result = path.name;
+
+        result = result.replace('documentLibrary/', '');
+        result = result.replace('/documentLibrary', '');
+        result = result.replace('/Company Home/Sites', 'File Libraries');
+        result = result.replace('/Company Home', 'Personal Files');
+
+        return result;
+    }
+}

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

@@ -109,9 +109,10 @@
 
                 <data-column
                     key="path"
-                    title="APP.DOCUMENT_LIST.COLUMNS.LOCATION"
+                    title="APP.DOCUMENT_LIST.COLUMNS.LOCATION">
-                    type="location"
+                    <ng-template let-context>
-                    format="/personal-files">
+                        <app-location-link [context]="context"></app-location-link>
+                    </ng-template>
                 </data-column>
 
                 <data-column

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

@@ -107,11 +107,13 @@
 
                 <data-column
                     key="path"
-                    title="APP.DOCUMENT_LIST.COLUMNS.LOCATION"
+                    title="APP.DOCUMENT_LIST.COLUMNS.LOCATION">
-                    type="location"
+                    <ng-template let-context>
-                    format="/personal-files">
+                        <app-location-link [context]="context"></app-location-link>
+                    </ng-template>
                 </data-column>
 
+
                 <data-column
                     key="content.sizeInBytes"
                     title="APP.DOCUMENT_LIST.COLUMNS.SIZE"

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

@@ -66,27 +66,24 @@
                 </data-column>
 
                 <data-column
-                    key="path.name"
+                    key="path"
                     title="APP.DOCUMENT_LIST.COLUMNS.LOCATION">
-                    <ng-template let-value="value">
+                    <ng-template let-context>
-                        <span title="{{ value }}">{{ (value || '').split('/').pop() }}</span>
+                        <app-location-link [context]="context"></app-location-link>
                     </ng-template>
                 </data-column>
 
                 <data-column
                     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
                     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

src/app/ui/overrides/_alfresco-document-list.scss

@@ -89,6 +89,7 @@ adf-document-list {
         }
     }
 
+    .app-location-link,
     .adf-location-cell {
         a {
             text-decoration: none;