[ADF-1431] Destination Picker: Display path of the folder in search results (#2762)

* Add initial implementation with style fixes

* Further style fixes

* Add tests, styling fixes

lib/content-services/content-node-selector/content-node-selector.component.html

@@ -1,31 +1,31 @@
 <header matDialogTitle
-        class="adf-content-node-selector-title"
+    class="adf-content-node-selector-title"
-        data-automation-id="content-node-selector-title">{{title}}
+    data-automation-id="content-node-selector-title">{{title}}
 </header>
 
 <section matDialogContent
-         class="adf-content-node-selector-content"
+    class="adf-content-node-selector-content"
-         (node-select)="onNodeSelect($event)">
+    (node-select)="onNodeSelect($event)">
 
     <mat-form-field floatPlaceholder="never" class="adf-content-node-selector-content-input">
         <input matInput
-               id="searchInput"
+            id="searchInput"
-               [formControl]="searchInput"
+            [formControl]="searchInput"
-               type="text"
+            type="text"
-               placeholder="Search"
+            placeholder="Search"
-               [value]="searchTerm"
+            [value]="searchTerm"
-               data-automation-id="content-node-selector-search-input">
+            data-automation-id="content-node-selector-search-input">
 
         <mat-icon *ngIf="searchTerm.length > 0"
-                  matSuffix (click)="clear()"
+            matSuffix (click)="clear()"
-                  class="adf-content-node-selector-content-input-icon"
+            class="adf-content-node-selector-content-input-icon"
-                  data-automation-id="content-node-selector-search-clear">clear
+            data-automation-id="content-node-selector-search-clear">clear
         </mat-icon>
 
         <mat-icon *ngIf="searchTerm.length === 0"
-                  matSuffix
+            matSuffix
-                  class="adf-content-node-selector-content-input-icon"
+            class="adf-content-node-selector-content-input-icon"
-                  data-automation-id="content-node-selector-search-icon">search
+            data-automation-id="content-node-selector-search-icon">search
         </mat-icon>
 
     </mat-form-field>
@@ -40,20 +40,23 @@
     <adf-toolbar>
         <adf-toolbar-title>
             <adf-dropdown-breadcrumb *ngIf="needBreadcrumbs()"
-                                     class="adf-content-node-selector-content-breadcrumb"
+                class="adf-content-node-selector-content-breadcrumb"
-                                     (navigate)="clear()"
+                (navigate)="clear()"
-                                     [target]="documentList"
+                [target]="documentList"
-                                     [folderNode]="breadcrumbFolderNode"
+                [folderNode]="breadcrumbFolderNode"
-                                     data-automation-id="content-node-selector-content-breadcrumb">
+                data-automation-id="content-node-selector-content-breadcrumb">
             </adf-dropdown-breadcrumb>
         </adf-toolbar-title>
     </adf-toolbar>
 
-    <div class="adf-content-node-selector-content-list" data-automation-id="content-node-selector-content-list">
+    <div 
+        class="adf-content-node-selector-content-list"
+        [class.adf-content-node-selector-content-list-searchLayout]="showingSearchResults"
+        data-automation-id="content-node-selector-content-list">
         <adf-document-list
             #documentList
             adf-highlight
-            adf-highlight-selector=".cell-value adf-datatable-cell .adf-datatable-cell-value"
+            adf-highlight-selector="adf-name-location-cell .adf-name-location-cell-name"
             [node]="nodes"
             [maxItems]="pageSize"
             [skipCount]="skipCount"
@@ -74,6 +77,18 @@
                     <div>{{ 'NODE_SELECTOR.NO_RESULTS' | translate }}</div>
                 </ng-template>
             </empty-folder-content>
+
+            <data-columns>
+                <data-column key="$thumbnail" type="image"></data-column>
+                <data-column key="name" type="text" class="full-width ellipsis-cell">
+                    <ng-template let-context="$implicit">
+                        <adf-name-location-cell [data]="context.data" [column]="context.col" [row]="context.row"></adf-name-location-cell>                        
+                    </ng-template>
+                </data-column>
+                <data-column key="modifiedAt" type="date" format="timeAgo" class="adf-content-selector-modified-cell"></data-column>
+                <data-column key="modifiedByUser.displayName" type="text" class="adf-content-selector-modifier-cell"></data-column>
+            </data-columns>
+
         </adf-document-list>
 
         <adf-infinite-pagination
@@ -91,17 +106,17 @@
 <footer matDialogActions class="adf-content-node-selector-actions">
 
     <button *ngIf="inDialog"
-            mat-button
+        mat-button
-            class="adf-content-node-selector-actions-cancel"
+        class="adf-content-node-selector-actions-cancel"
-            (click)="close()"
+        (click)="close()"
-            data-automation-id="content-node-selector-actions-cancel">{{ 'NODE_SELECTOR.CANCEL' | translate }}
+        data-automation-id="content-node-selector-actions-cancel">{{ 'NODE_SELECTOR.CANCEL' | translate }}
     </button>
 
     <button mat-button
-            [disabled]="!chosenNode"
+        [disabled]="!chosenNode"
-            class="adf-content-node-selector-actions-choose"
+        class="adf-content-node-selector-actions-choose"
-            (click)="choose()"
+        (click)="choose()"
-            data-automation-id="content-node-selector-actions-choose">{{ buttonActionName | translate }}
+        data-automation-id="content-node-selector-actions-choose">{{ buttonActionName | translate }}
     </button>
 
 </footer>

lib/content-services/content-node-selector/content-node-selector.component.scss

@@ -62,6 +62,27 @@
                 .adf-toolbar .mat-toolbar {
                     border-bottom-width: 0;
                     font-size: 14px;
+
+                    &.mat-toolbar-single-row {
+                        height: auto;
+                    }
+                }
+
+                &-breadcrumb {
+                    .adf-dropdown-breadcumb-trigger {
+                        outline: none;
+                        .mat-icon {
+                            color: mat-color($foreground, base, 0.45);
+
+                            &:hover {
+                                color: mat-color($foreground, base, 0.65);
+                            }
+                        }
+                    }
+
+                    .adf-dropddown-breadcrumb-item-chevron {
+                        color: mat-color($foreground, base, 0.45);
+                    }
                 }
 
                 &-list {
@@ -87,9 +108,16 @@
                         .adf-data-table-cell {
                             padding-top: 8px;
                             padding-bottom: 8px;
-                            border-top: none;
                             height: 30px;
 
+                            & .adf-name-location-cell-location {
+                                display: none;
+                            }
+
+                            & .adf-name-location-cell-name {
+                                padding: 0;
+                            }
+
                             &--image {
                                 padding-left: 16px;
                                 padding-right: 8px;                                
@@ -103,6 +131,12 @@
                         tbody tr {
                             height: auto !important;
 
+                            &:first-child {
+                                .adf-data-table-cell {
+                                    border-top: none;
+                                }
+                            }
+
                             &:last-child {
                                 .adf-data-table-cell {
                                     border-bottom: none;
@@ -110,6 +144,32 @@
                             }
                         }
                     }
+
+                    &-searchLayout {
+
+                        .adf-data-table {
+                            .adf-data-table-cell {
+                                height: 56px;
+                                padding-bottom: 24px;
+
+                                & .adf-name-location-cell-location {
+                                    display: block
+                                }
+    
+                                & .adf-name-location-cell-name {
+                                    padding: 18px 0 2px 0;
+                                }
+    
+                                &.adf-content-selector-modified-cell {
+                                    display: none;
+                                }
+
+                                &.adf-content-selector-modifier-cell {
+                                    display: none;
+                                }
+                            }
+                        }
+                    }
                 }
             }
 

lib/content-services/content-node-selector/content-node-selector.module.ts

@@ -25,8 +25,9 @@ import { ContentNodeSelectorComponent } from './content-node-selector.component'
 import { ContentNodeSelectorService } from './content-node-selector.service';
 import { SitesDropdownModule } from '../site-dropdown/sites-dropdown.module';
 import { BreadcrumbModule } from '../breadcrumb/breadcrumb.module';
-import { PaginationModule, ToolbarModule, DirectiveModule } from '@alfresco/adf-core';
+import { PaginationModule, ToolbarModule, DirectiveModule, DataColumnModule, DataTableModule } from '@alfresco/adf-core';
 import { DocumentListModule } from '../document-list/document-list.module';
+import { NameLocationCellComponent } from './name-location-cell/name-location-cell.component';
 
 @NgModule({
     imports: [
@@ -40,6 +41,8 @@ import { DocumentListModule } from '../document-list/document-list.module';
         BreadcrumbModule,
         ToolbarModule,
         DocumentListModule,
+        DataColumnModule,
+        DataTableModule,
         PaginationModule
     ],
     exports: [
@@ -49,7 +52,8 @@ import { DocumentListModule } from '../document-list/document-list.module';
         ContentNodeSelectorComponent
     ],
     declarations: [
-        ContentNodeSelectorComponent
+        ContentNodeSelectorComponent,
+        NameLocationCellComponent
     ],
     providers: [
         ContentNodeSelectorService

lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.scss

@@ -0,0 +1,13 @@
+@mixin adf-name-location-cell-theme($theme) {
+    $foreground: map-get($theme, foreground);
+
+    .adf-name-location-cell {        
+        &-location {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;                
+            color: mat-color($foreground, base, 0.5);
+            font-size: 12px;
+        }
+    }
+}

lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.spec.ts

@@ -0,0 +1,65 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NameLocationCellComponent } from './name-location-cell.component';
+import { By } from '@angular/platform-browser';
+import { DataRow } from '@alfresco/adf-core';
+
+describe('NameLocationCellComponent', () => {
+    let component: NameLocationCellComponent;
+    let fixture: ComponentFixture<NameLocationCellComponent>;
+    let rowData: DataRow;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                NameLocationCellComponent
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(NameLocationCellComponent);
+        component = fixture.componentInstance;
+
+        rowData = <DataRow> {
+            getValue(key) {
+                if (key === 'name') {
+                    return 'file-name';
+                } else if (key === 'path') {
+                    return { name: '/path/to/location' };
+                }
+            }
+        };
+        component.row = rowData;
+        fixture.detectChanges();
+    });
+
+    it('should set fileName and location properly', () => {
+        const fileName = fixture.debugElement.query(By.css('.adf-name-location-cell-name')).nativeElement.innerText;
+        const location = fixture.debugElement.query(By.css('.adf-name-location-cell-location')).nativeElement.innerText;
+        expect(fileName).toBe('file-name');
+        expect(location).toBe('/path/to/location');
+    });
+
+    it('should set tooltip properly', () => {
+        const tooltip = fixture.debugElement.query(By.css('.adf-name-location-cell-location')).nativeElement.getAttribute('title');
+
+        expect(tooltip).toEqual('/path/to/location');
+    });
+});

lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.ts

@@ -0,0 +1,43 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { DataTableCellComponent } from '@alfresco/adf-core';
+
+@Component({
+    selector: 'adf-name-location-cell',
+    template: `
+    <div class="adf-name-location-cell-name">{{ name }}</div>
+    <div class="adf-name-location-cell-location" [title]="path?.name">{{ path?.name }}</div>
+    `,
+    styleUrls: ['./name-location-cell.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: { class: 'adf-name-location-cell' }
+})
+export class NameLocationCellComponent extends DataTableCellComponent implements OnInit {
+
+    path: string = '';
+    name: string = '';
+
+    ngOnInit() {
+        if (this.row) {
+            this.path = this.row.getValue('path');
+            this.name = this.row.getValue('name');
+        }
+    }
+}

lib/content-services/styles/_index.scss

@@ -1,6 +1,7 @@
 @import '../breadcrumb/breadcrumb.component';
 @import '../breadcrumb/dropdown-breadcrumb.component';
 @import '../content-node-selector/content-node-selector.component';
+@import '../content-node-selector/name-location-cell/name-location-cell.component';
 @import '../document-list/components/document-list.component';
 
 @import '../upload/components/file-uploading-list-row.component';
@@ -18,6 +19,7 @@
     @include adf-breadcrumb-theme($theme);
     @include adf-breadcrumb-dropdown-theme($theme);
     @include adf-content-node-selector-theme($theme) ;
+    @include adf-name-location-cell-theme($theme);
     @include adf-document-list-theme($theme) ;
     @include adf-file-uploading-row-theme($theme);
     @include adf-upload-dialog-theme($theme);