#242 Reworked breadcrumb, deprecated up button

- reworked breadcrumb
- deprecated up button in favour of external implementations
- removed hardcoded “document library” path from document list (always
start with root)
- always dealing with ‘absolute’ paths
- simplified upload demo

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

@@ -1,12 +1,11 @@
 <alfresco-upload-drag-area
         [showUploadDialog]="true"
-        currentFolderPath="{{absolutePath}}"
-        uploaddirectory="{{relativePath}}"
-        (onSuccess)="refreshDocumentList($event)">
+        [currentFolderPath]="currentPath"
+        [uploaddirectory]="currentPath"
+        (onSuccess)="documentList.reload()">
     <alfresco-document-list
             #documentList
-            [currentFolderPath]="absolutePath"
-            [breadcrumb]="breadcrumb"
+            [currentFolderPath]="currentPath"
             (preview)="showFile($event)"
             (folderChange)="onFolderChanged($event)">
         <!--
@@ -113,23 +112,12 @@
 
 <context-menu-holder></context-menu-holder>
 
-<div class="p-10">
-    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
-        <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" [(ngModel)]="breadcrumb">
-        <span class="mdl-checkbox__label">Breadcrumb</span>
-    </label>
-</div>
-
 <div class="p-10">
     <ul>
-        <li>Current relative path: {{relativePath}}</li>
-        <li>Current absolute path: {{absolutePath}}</li>
+        <li>Current path: {{documentList.currentFolderPath}}</li>
         <li>
             <button (click)="documentList.changePath('/Sites/swsdp/documentLibrary/Agency Files/Contracts')">Go to agency contracts</button>
         </li>
-        <li>
-            <button (click)="documentList.changePath('')">Got to site root</button>
-        </li>
         <li>
             <button (click)="documentList.changePath('/')">Go to root</button>
         </li>
@@ -139,20 +127,35 @@
 
 
 <h5>Single file upload</h5>
-<alfresco-upload-button data-automation-id="single-file-upload" uploaddirectory="{{relativePath}}" currentFolderPath="{{absolutePath}}"
-                         (onSuccess)="refreshDocumentList($event)"></alfresco-upload-button>
+<alfresco-upload-button data-automation-id="single-file-upload"
+                        [uploaddirectory]="currentPath"
+                        [currentFolderPath]="currentPath"
+                        (onSuccess)="documentList.reload()">
+</alfresco-upload-button>
+
 <h5>Folder upload</h5>
-<alfresco-upload-button data-automation-id="folder-upload" uploaddirectory="{{relativePath}}" currentFolderPath="{{absolutePath}}"
+<alfresco-upload-button data-automation-id="folder-upload"
+                        [uploaddirectory]="currentPath"
+                        [currentFolderPath]="currentPath"
                         [uploadFolders]="true"
-                        (onSuccess)="refreshDocumentList($event)"></alfresco-upload-button>
+                        (onSuccess)="documentList.reload()">
+</alfresco-upload-button>
+
 <h5>Multiple file upload</h5>
 <input type="text" data-automation-id="accepted-files-type" [(ngModel)]="acceptedFilesType">
-<alfresco-upload-button data-automation-id="multiple-file-upload" uploaddirectory="{{relativePath}}" currentFolderPath="{{absolutePath}}"
+<alfresco-upload-button data-automation-id="multiple-file-upload"
+                        [uploaddirectory]="currentPath"
+                        [currentFolderPath]="currentPath"
                         acceptedFilesType="{{acceptedFilesType}}"
                         [multipleFiles]="true"
-                        (onSuccess)="refreshDocumentList($event)"></alfresco-upload-button>
+                        (onSuccess)="documentList.reload()">
+</alfresco-upload-button>
 
-<alfresco-viewer [(showViewer)]="fileShowed" [urlFile]="urlFile" [fileName]="fileName" [mimeType]="mimeType" [overlayMode]="true">
+<alfresco-viewer [(showViewer)]="fileShowed"
+                 [urlFile]="urlFile"
+                 [fileName]="fileName"
+                 [mimeType]="mimeType"
+                 [overlayMode]="true">
     <div class="mdl-spinner mdl-js-spinner is-active"></div>
 </alfresco-viewer>
 <file-uploading-dialog></file-uploading-dialog>

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

@@ -48,10 +48,7 @@ declare let __moduleName: string;
     pipes: [AlfrescoPipeTranslate]
 })
 export class FilesComponent {
-    breadcrumb: boolean = false;
-    navigation: boolean = true;
-    absolutePath: string = '/Sites/swsdp/documentLibrary';
-    relativePath: string = '';
+    currentPath: string = '/Sites/swsdp/documentLibrary';
 
     urlFile: string;
     fileName: string;
@@ -78,10 +75,6 @@ export class FilesComponent {
         alert('Custom folder action for ' + event.value.entry.name);
     }
 
-    refreshDocumentList() {
-        this.absolutePath += '/';
-    }
-
     showFile(event) {
         if (event.value.entry.isFile) {
             this.fileName = event.value.entry.name;
@@ -95,8 +88,7 @@ export class FilesComponent {
 
     onFolderChanged(event?: any) {
         if (event) {
-            this.absolutePath = event.absolutePath;
-            this.relativePath = event.relativePath;
+            this.currentPath = event.path;
         }
     }
 }

ng2-components/ng2-alfresco-documentlist/src/components/document-list.html

@@ -25,18 +25,6 @@
     </tr>
     </thead>
     <tbody>
-    <tr *ngIf="canNavigateParent()"
-        data-automation-id="folder_up_row"
-        class="parent-folder-link"
-        (click)="onNavigateParentClick($event)"
-        (dblclick)="onNavigateParentDblClick($event)">
-        <td [attr.colspan]="1 + columns?.length" class="non-selectable">
-            <button class="mdl-button mdl-js-button mdl-button--icon">
-                <i data-automation-id="folder_up_icon" class="material-icons">arrow_upward</i>
-            </button>
-        </td>
-    </tr>
-
     <tr *ngFor="let content of folder.list.entries; let idx = index"
         [attr.data-automation-id]="getObjectValue(content.entry, 'name')">
         <!-- Columns -->

ng2-components/ng2-alfresco-documentlist/src/components/document-list.spec.ts

@@ -316,21 +316,6 @@ describe('DocumentList', () => {
         expect(documentList.getNodePath(null)).toBe(null);
     });
 
-    /*
-    it('should get node path', () => {
-        let location = new LocationEntity();
-        location.site = 'swsdp';
-        location.container = 'documentLibrary';
-        location.path = '\/';
-
-        let node = new DocumentEntity();
-        node.fileName = 'fileName';
-        node.location = location;
-
-        expect(documentList.getNodePath(node)).toBe('swsdp/documentLibrary/fileName');
-    });
-    */
-
     it('should return root object value', () => {
         let target = {
             key1: 'value1'

ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts

@@ -51,7 +51,7 @@ declare let __moduleName: string;
 })
 export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit, OnChanges {
 
-    DEFAULT_ROOT_FOLDER: string = '/Sites/swsdp/documentLibrary';
+    DEFAULT_ROOT_FOLDER: string = '/';
 
     baseComponentPath = __moduleName.replace('/components/document-list.js', '');
 
@@ -62,7 +62,7 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit,
     navigationMode: string = 'dblclick'; // click|dblclick
 
     @Input()
-    breadcrumb: boolean = false;
+    breadcrumb: boolean = true;
 
     @Input()
     thumbnails: boolean = false;
@@ -80,15 +80,15 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit,
     preview: EventEmitter<any> = new EventEmitter();
 
     rootFolder = {
-        name: '',
-        path: ''
+        name: 'Root',
+        path: '/'
     };
 
     @Input()
-    currentFolderPath: string = '';
+    currentFolderPath: string = this.DEFAULT_ROOT_FOLDER;
 
     errorMessage;
-    route: any[] = [];
+    route: { name: string, path: string }[] = [];
 
     actions: ContentActionModel[] = [];
     columns: ContentColumnModel[] = [];
@@ -106,8 +106,7 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit,
         if (isChanged) {
             this.folderChange.emit({
                 value: value,
-                absolutePath: this.currentFolderPath,
-                relativePath: this.getRelativePath(this.currentFolderPath)
+                path: this.currentFolderPath
             });
         }
     }
@@ -157,15 +156,6 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit,
         }
     }
 
-    /**
-     * Determines whether navigation to parent folder is available.
-     * @returns {boolean}
-     */
-    canNavigateParent(): boolean {
-        return this.navigate && !this.breadcrumb &&
-            this.currentFolderPath !== this.rootFolder.path;
-    }
-
     ngOnInit() {
         this.changePath(this.currentFolderPath);
         this.contextActionHandler.subscribe(val => this.contextActionCallback(val));
@@ -190,9 +180,8 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit,
 
     changePath(path: string) {
         this.currentFolderPath = path || this.DEFAULT_ROOT_FOLDER;
-        this.rootFolder = this._createRootFolder(this.currentFolderPath);
-        this.route = [this.rootFolder];
-        this.displayFolderContent(this.rootFolder.path);
+        this.route = this.parsePath(this.currentFolderPath);
+        this.displayFolderContent(this.currentFolderPath);
     }
 
     /**
@@ -215,30 +204,6 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit,
         return [];
     }
 
-    /**
-     * Invoked when 'parent folder' element is clicked.
-     * @param e DOM event
-     */
-    onNavigateParentClick(e?: Event) {
-        if (e) {
-            e.preventDefault();
-        }
-
-        if (this.navigate && this.navigationMode === 'click') {
-            this.navigateToParent();
-        }
-    }
-
-    onNavigateParentDblClick(e?: Event) {
-        if (e) {
-            e.preventDefault();
-        }
-
-        if (this.navigate && this.navigationMode === 'dblclick') {
-            this.navigateToParent();
-        }
-    }
-
     /**
      * Invoked when list row is clicked.
      * @param item Underlying node item
@@ -309,14 +274,6 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit,
         }
     }
 
-    navigateToParent() {
-        this.route.pop();
-        let parent = this.route.length > 0 ? this.route[this.route.length - 1] : this.rootFolder;
-        if (parent) {
-            this.displayFolderContent(parent.path);
-        }
-    }
-
     /**
      * Invoked when a breadcrumb route is clicked.
      * @param r Route to navigate to
@@ -526,14 +483,29 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit,
         return val;
     }
 
-    private _createRootFolder(path: string): any {
-        let parts =  path.split('/');
-        let namePart = parts[parts.length - 1];
-        return {
-            name: namePart,
-            path: path
-        };
-    }
+    private parsePath(path: string): { name: string, path: string }[] {
+        let parts = path.split('/').filter(val => val ? true : false);
+
+        let result = [
+            this.rootFolder
+        ];
+
+        let parentPath: string = this.rootFolder.path;
+
+        for (let i = 0; i < parts.length; i++) {
+            if (!parentPath.endsWith('/')) {
+                parentPath += '/';
+            }
+            parentPath += parts[i];
+
+            result.push({
+                name: parts[i],
+                path: parentPath
+            });
+        }
+
+        return result;
+    };
 
     private _hasEntries(node: NodePaging): boolean {
         return (node && node.list && node.list.entries && node.list.entries.length > 0);
@@ -542,14 +514,4 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit,
     private _isSortableColumn(column: ContentColumnModel) {
         return column && column.source && !column.source.startsWith('$');
     }
-
-    private getRelativePath(path: string): string {
-        if (path.indexOf('/Sites/swsdp/documentLibrary/') !== -1) {
-            return path.replace('/Sites/swsdp/documentLibrary/', '');
-        } else {
-            return path.replace('/Sites/swsdp/documentLibrary', '');
-        }
-    }
 }
-
-