[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
2025-07-24 17:32:15 +00:00 · 2017-12-05 01:09:40 +00:00
parent f341137b06
commit cb06c8a963
7 changed files with 236 additions and 34 deletions
--- a/lib/content-services/content-node-selector/content-node-selector.component.html
+++ b/lib/content-services/content-node-selector/content-node-selector.component.html
@@ -1,31 +1,31 @@
 <header matDialogTitle
-        class="adf-content-node-selector-title"
-        data-automation-id="content-node-selector-title">{{title}}
+    class="adf-content-node-selector-title"
+    data-automation-id="content-node-selector-title">{{title}}
 </header>

 <section matDialogContent
-         class="adf-content-node-selector-content"
-         (node-select)="onNodeSelect($event)">
+    class="adf-content-node-selector-content"
+    (node-select)="onNodeSelect($event)">

    <mat-form-field floatPlaceholder="never" class="adf-content-node-selector-content-input">
        <input matInput
-               id="searchInput"
-               [formControl]="searchInput"
-               type="text"
-               placeholder="Search"
-               [value]="searchTerm"
-               data-automation-id="content-node-selector-search-input">
+            id="searchInput"
+            [formControl]="searchInput"
+            type="text"
+            placeholder="Search"
+            [value]="searchTerm"
+            data-automation-id="content-node-selector-search-input">

        <mat-icon *ngIf="searchTerm.length > 0"
-                  matSuffix (click)="clear()"
-                  class="adf-content-node-selector-content-input-icon"
-                  data-automation-id="content-node-selector-search-clear">clear
+            matSuffix (click)="clear()"
+            class="adf-content-node-selector-content-input-icon"
+            data-automation-id="content-node-selector-search-clear">clear
        </mat-icon>

        <mat-icon *ngIf="searchTerm.length === 0"
-                  matSuffix
-                  class="adf-content-node-selector-content-input-icon"
-                  data-automation-id="content-node-selector-search-icon">search
+            matSuffix
+            class="adf-content-node-selector-content-input-icon"
+            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"
-                                     (navigate)="clear()"
-                                     [target]="documentList"
-                                     [folderNode]="breadcrumbFolderNode"
-                                     data-automation-id="content-node-selector-content-breadcrumb">
+                class="adf-content-node-selector-content-breadcrumb"
+                (navigate)="clear()"
+                [target]="documentList"
+                [folderNode]="breadcrumbFolderNode"
+                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
-            class="adf-content-node-selector-actions-cancel"
-            (click)="close()"
-            data-automation-id="content-node-selector-actions-cancel">{{ 'NODE_SELECTOR.CANCEL' | translate }}
+        mat-button
+        class="adf-content-node-selector-actions-cancel"
+        (click)="close()"
+        data-automation-id="content-node-selector-actions-cancel">{{ 'NODE_SELECTOR.CANCEL' | translate }}
    </button>

    <button mat-button
-            [disabled]="!chosenNode"
-            class="adf-content-node-selector-actions-choose"
-            (click)="choose()"
-            data-automation-id="content-node-selector-actions-choose">{{ buttonActionName | translate }}
+        [disabled]="!chosenNode"
+        class="adf-content-node-selector-actions-choose"
+        (click)="choose()"
+        data-automation-id="content-node-selector-actions-choose">{{ buttonActionName | translate }}
    </button>

 </footer>
--- a/lib/content-services/content-node-selector/content-node-selector.component.scss
+++ b/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;
+                                }
+                            }
+                        }
+                    }
                }
            }

--- a/lib/content-services/content-node-selector/content-node-selector.module.ts
+++ b/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
--- a/lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.scss
+++ b/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;
+        }
+    }
+}
--- a/lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.spec.ts
+++ b/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');
+    });
+});
--- a/lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.ts
+++ b/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');
+        }
+    }
+}