Files and search component fix with routing support (#2191)

demo-shell-ng2/app/components/files/files.component.html

@@ -88,6 +88,7 @@
                 (error)="onNavigationError($event)"
                 (success)="resetError()"
                 (preview)="showFile($event)"
+                (folderChange)="onFolderChange($event)"
                 (permissionError)="handlePermissionError($event)">
             <data-columns>
                 <data-column

demo-shell-ng2/app/components/files/files.component.ts

@@ -17,7 +17,7 @@
 
 import { ChangeDetectorRef, Component, Input, OnInit, Optional, ViewChild } from '@angular/core';
 import { MdDialog } from '@angular/material';
-import { ActivatedRoute, Params } from '@angular/router';
+import { ActivatedRoute, Params, Router } from '@angular/router';
 import { MinimalNodeEntity } from 'alfresco-js-api';
 import {
     AlfrescoApiService, AlfrescoContentService, AlfrescoTranslationService, FileUploadCompleteEvent,
@@ -90,6 +90,7 @@ export class FilesComponent implements OnInit {
                 private contentService: AlfrescoContentService,
                 private dialog: MdDialog,
                 private translateService: AlfrescoTranslationService,
+                private router: Router,
                 @Optional() private route: ActivatedRoute) {
     }
 
@@ -102,6 +103,10 @@ export class FilesComponent implements OnInit {
         }
     }
 
+    onFolderChange($event) {
+        this.router.navigate(['/files', $event.value.id]);
+    }
+
     toggleFolder() {
         this.multipleFileUpload = false;
         this.folderUpload = !this.folderUpload;

demo-shell-ng2/app/components/search/search.component.html

@@ -1,6 +1,8 @@
 <div class="search-results-container">
     <h1>Search results</h1>
-    <alfresco-search (preview)="showFile($event)"></alfresco-search>
+    <alfresco-search
+        [navigate]="false"
+        (nodeDbClick)="nodeDbClick($event)"></alfresco-search>
 </div>
 
 <div *ngIf="fileShowed">

demo-shell-ng2/app/components/search/search.component.ts

@@ -52,9 +52,17 @@ export class SearchComponent {
     constructor(public router: Router) {
     }
 
-    showFile(event) {
-        if (event.value.entry.isFile) {
-            this.fileNodeId = event.value.entry.id;
+    nodeDbClick($event: any) {
+        if ($event.value.entry.isFolder) {
+            this.router.navigate(['/files', $event.value.entry.id]);
+        } else {
+            this.showFile($event);
+        }
+    }
+
+    showFile($event) {
+        if ($event.value.entry.isFile) {
+            this.fileNodeId = $event.value.entry.id;
             this.fileShowed = true;
         } else {
             this.fileShowed = false;

ng2-components/ng2-alfresco-search/README.md

@@ -88,20 +88,22 @@ results page will be shown.
 
 ### Properties
 
-| Name | Type | Optional | Default | Description |
-| --- | --- | --- | --- | --- |
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
 | searchTerm | string | | Search term to use when executing the search. Updating this value will run a new search and update the results  |
 | rootNodeId | string | "-root-" | NodeRef or node name where the search should start. |
 | resultType | string | | Node type to filter search results by, e.g. 'cm:content', 'cm:folder' if you want only the files. |
-| maxResults | number  | 20  | Maximum number of results to show in the search. |
+| maxResults | number  | 20 | Maximum number of results to show in the search. |
 | resultSort | string  | | Criteria to sort search results by, must be one of "name" , "modifiedAt" or "createdAt" |
-| navigationMode | string  | "dblclick" | Event used to initiate a navigation action to a specific result, one of "click" or "dblclick" |
+| navigationMode | string | "dblclick" | Event used to initiate a navigation action to a specific result, one of "click" or "dblclick" |
+| navigate | boolean | true | Allow documentlist to navigate or not. For more information see documentlist component's documentation |
 
 ### Events
 
 | Name | Description |
 | --- | --- |
 | preview | Emitted when user acts upon files with either single or double click (depends on `navigation-mode`), recommended for Viewer components integration  |
+| nodeDbClick | Emitted when user acts upon files or folders with double click **only when `navigation-mode` is set to false**, giving more freedom then just simply previewing the file |
 | resultsLoad | Emitted when search results have fully loaded |
 
 ## Build from sources

ng2-components/ng2-alfresco-search/src/components/search.component.html

@@ -8,7 +8,9 @@
             [creationMenuActions]="false"
             [contentActions]="true"
             [navigationMode]="navigationMode"
+            [navigate]="navigate"
             [enablePagination]="false"
+            (nodeDblClick)="onDoubleClick($event)"
             (preview)="onPreviewFile($event)">
             <empty-folder-content>
                 <ng-template>

ng2-components/ng2-alfresco-search/src/components/search.component.ts

@@ -49,6 +49,9 @@ export class SearchComponent implements OnChanges, OnInit {
     @Input()
     navigationMode: string = SearchComponent.DOUBLE_CLICK_NAVIGATION; // click|dblclick
 
+    @Input()
+    navigate: boolean = true;
+
     @Input()
     emptyFolderImageUrl: string = require('../assets/images/empty_doc_lib.svg');
 
@@ -58,6 +61,9 @@ export class SearchComponent implements OnChanges, OnInit {
     @Output()
     preview: EventEmitter<any> = new EventEmitter<any>();
 
+    @Output()
+    nodeDbClick: EventEmitter<any> = new EventEmitter<any>();
+
     pagination: Pagination;
     errorMessage;
     queryParamName = 'q';
@@ -93,11 +99,15 @@ export class SearchComponent implements OnChanges, OnInit {
         }
     }
 
+    onDoubleClick($event: any) {
+        if (!this.navigate && $event.value) {
+            this.nodeDbClick.emit({ value: $event.value });
+        }
+    }
+
     onPreviewFile(event: any) {
         if (event.value) {
-            this.preview.emit({
-                value: event.value
-            });
+            this.preview.emit({ value: event.value });
         }
     }