#9 new 'folderChange' event

- introduce new ‘folderChange’ event
- deprecated ‘folderClick’ event
- improved automation-id generation for cells

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

@@ -1,9 +1,12 @@
-<alfresco-upload-drag-area [showUploadDialog]="true" currentFolderPath="{{absolutePath}}" uploaddirectory="{{relativePath}}"
+<alfresco-upload-drag-area
+        [showUploadDialog]="true"
+        currentFolderPath="{{absolutePath}}"
+        uploaddirectory="{{relativePath}}"
         (onSuccess)="refreshDocumentList($event)">
     <alfresco-document-list 
-            (folderClick)="refreshDirectyory($event)"
-            currentFolderPath="{{absolutePath}}"
-            [breadcrumb]="breadcrumb">
+            [currentFolderPath]="absolutePath"
+            [breadcrumb]="breadcrumb"
+            (folderChange)="onFolderChanged($event)">
         <content-columns>
             <content-column source="$thumbnail"></content-column>
             <content-column
@@ -96,6 +99,13 @@
     </label>
 </div>
 
+<div class="p-10">
+    <ul>
+        <li>Relative path: {{relativePath}}</li>
+        <li>Absolute path: {{absolutePath}}</li>
+    </ul>
+</div>
+
 <h5>Single file upload</h5>
 <alfresco-upload-button data-automation-id="single-file-upload" uploaddirectory="{{relativePath}}" currentFolderPath="{{absolutePath}}"
                          (onSuccess)="refreshDocumentList($event)"></alfresco-upload-button>

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

@@ -38,7 +38,6 @@ declare let __moduleName: string;
 export class FilesComponent {
     breadcrumb: boolean = false;
     navigation: boolean = true;
-    events: any[] = [];
     absolutePath: string = '/Sites/swsdp/documentLibrary';
     relativePath: string = '';
 
@@ -60,20 +59,14 @@ export class FilesComponent {
         alert('Custom folder action for ' + event.value.displayName);
     }
 
-    refreshDirectyory(event: any) {
-        this.absolutePath = event.value;
-        this.relativePath = this.getRelativeDirectory(this.absolutePath);
-    }
-
-    refreshDocumentList(event: Object) {
+    refreshDocumentList() {
         this.absolutePath += '/';
     }
 
-    getRelativeDirectory(currentFolderPath: string): string {
-        if (currentFolderPath.indexOf('/Sites/swsdp/documentLibrary/') !== -1) {
-            return currentFolderPath.replace('/Sites/swsdp/documentLibrary/', '');
-        } else {
-            return currentFolderPath.replace('/Sites/swsdp/documentLibrary', '');
+    onFolderChanged(event?: any) {
+        if (event) {
+            this.absolutePath = event.absolutePath;
+            this.relativePath = event.relativePath;
         }
     }
 }

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

@@ -39,7 +39,7 @@
         <td *ngFor="#col of columns" [ngSwitch]="col.source"
             class="mdl-data-table__cell--non-numeric {{content.entry.isFolder ? 'folder-row-cell' : 'document-row-cell'}} {{col.cssClass}}"
             (click)="onItemClick(content, $event)"
-            [attr.data-automation-id]="col.source === '$thumbnail' ? '$thumbnail' : getObjectValue(content.entry, col.source)">
+            [attr.data-automation-id]="col.source === '$thumbnail' ? '$thumbnail' : col.source + '_' + getObjectValue(content.entry, col.source)">
             <div *ngSwitchWhen="'$thumbnail'">
                 <div *ngIf="content.entry.isFolder">
                     <i class="material-icons folder-thumbnail">{{folderIcon || 'folder_open'}}</i>

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

@@ -57,7 +57,7 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit
     itemClick: EventEmitter<any> = new EventEmitter();
 
     @Output()
-    folderClick: EventEmitter<any> = new EventEmitter();
+    folderChange: EventEmitter<any> = new EventEmitter();
 
     rootFolder = {
         name: '',
@@ -67,14 +67,30 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit
     @Input()
     currentFolderPath: string = '';
 
-    folder: NodePaging;
     errorMessage;
-
     route: any[] = [];
 
     actions: ContentActionModel[] = [];
     columns: ContentColumnModel[] = [];
 
+    private _folder: NodePaging;
+
+    get folder(): NodePaging {
+        return this._folder;
+    }
+
+    set folder(value: NodePaging) {
+        let isChanged = this._folder !== value;
+        this._folder = value;
+        if (isChanged) {
+            this.folderChange.emit({
+                value: value,
+                absolutePath: this.currentFolderPath,
+                relativePath: this.getRelativePath(this.currentFolderPath)
+            });
+        }
+    }
+
     sorting: ColumnSortingModel = {
         key: 'name',
         direction: 'asc'
@@ -158,9 +174,6 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit
             this.route.pop();
             let parent = this.route.length > 0 ? this.route[this.route.length - 1] : this.rootFolder;
             if (parent) {
-                this.folderClick.emit({
-                    value: parent.path
-                });
                 this.displayFolderContent(parent.path);
             }
         }
@@ -183,11 +196,6 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit
         if (this.navigate && item && item.entry) {
             if (item.entry.isFolder) {
                 let path = this.getNodePath(item);
-
-                this.folderClick.emit({
-                    value: path
-                });
-
                 this.route.push({
                     name: item.entry.name,
                     path: path
@@ -376,4 +384,12 @@ 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', '');
+        }
+    }
 }