Simple native (ng2) document list component

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

@@ -53,9 +53,9 @@
             <li [class.active]="isActive(['Child2'])">
                 <a [routerLink]="['Child2']">Child 2</a>
             </li>
-
+            -->
             <li [class.active]="isActive(['Page1'])">
-                <a [routerLink]="['Page1']">Page 1</a>
+                <a [routerLink]="['Page1']">Native</a>
             </li>
             <li [class.active]="isActive(['Page2'])">
                 <a [routerLink]="['Page2']">Page 2</a>
@@ -63,8 +63,6 @@
             <li [class.active]="isActive(['Forms'])">
                 <a [routerLink]="['Forms']">Forms</a>
             </li>
-
-            -->
         </ul>
 
         <form class="navbar-form navbar-left" role="search">

demo-shell-ng2/app/components/alfresco.service.ts

@@ -0,0 +1,32 @@
+import {Injectable} from 'angular2/core';
+import {Http, Response, RequestOptions, Headers} from 'angular2/http';
+import {Observable} from 'rxjs/Observable';
+import {FolderEntity} from "./core/entities/folder.entity";
+
+@Injectable()
+export class AlfrescoService {
+    constructor(private http: Http) {}
+
+    private _host: string = 'http://192.168.99.100:8080';
+    private _baseUrl: string = this._host + '/alfresco/service/slingshot/doclib/doclist/all/site/';
+
+    getFolder(folder: string) {
+        let headers = new Headers({
+            'Content-Type': 'application/json',
+            'Authorization': 'Basic ' + btoa('admin:admin')
+        });
+        let options = new RequestOptions({ headers: headers });
+        return this.http
+            .get(this._baseUrl + folder, options)
+            .map(res => <FolderEntity> res.json())
+            .do(data => console.log(data)) // eyeball results in the console
+            .catch(this.handleError);
+    }
+
+    private handleError (error: Response) {
+        // in a real world app, we may send the error to some remote logging infrastructure
+        // instead of just logging it to the console
+        console.error(error);
+        return Observable.throw(error.json().error || 'Server error');
+    }
+}

demo-shell-ng2/app/components/core/entities/document.entity.ts

@@ -0,0 +1,33 @@
+// contains only limited subset of available fields
+import {LocationEntity} from "./location.entity";
+
+export class DocumentEntity {
+    nodeRef: string;
+    nodeType: string;
+    type: string;
+    mimetype: string;
+    isFolder: boolean;
+    isLink: boolean;
+    fileName: string;
+    displayName: string;
+    status: string;
+    title: string;
+    description: string;
+    author: string;
+    createdOn: string;
+    createdBy: string;
+    createdByUser: string;
+    modifiedOn: string;
+    modifiedBy: string;
+    modifiedByUser: string;
+    lockedBy: string;
+    lockedByUser: string;
+    size: number;
+    version: string;
+    contentUrl: string;
+    webdavUrl: string;
+    actionSet: string;
+    tags: string[];
+    activeWorkflows: string;
+    location: LocationEntity;
+}

demo-shell-ng2/app/components/core/entities/folder.entity.ts

@@ -0,0 +1,6 @@
+import {DocumentEntity} from "./document.entity";
+
+// contains only limited subset of available fields
+export class FolderEntity {
+    items: DocumentEntity[];
+}

demo-shell-ng2/app/components/core/entities/location.entity.ts

@@ -0,0 +1,14 @@
+// contains only limited subset of available fields
+export class LocationEntity {
+    repositoryId: string;
+    site: string;
+    siteTitle: string;
+    container: string;
+    path: string;
+    file: string;
+    parent: LocationParentEntity;
+}
+
+export class LocationParentEntity {
+    nodeRef: string;
+}

demo-shell-ng2/app/components/document-list.component.ts

@@ -0,0 +1,90 @@
+import {Component, OnInit, Input} from "angular2/core";
+import {AlfrescoService} from "./alfresco.service";
+import {FolderEntity} from "./core/entities/folder.entity";
+import {DocumentEntity} from "./core/entities/document.entity";
+
+@Component({
+    selector: 'alfresco-document-list',
+    template: `
+        <div *ngIf="folder" class="list-group">
+            <a href="#" *ngIf="canNavigateParent()" (click)="onNavigateParentClick($event)" class="list-group-item">
+                <i class="fa fa-level-up"></i> ...
+            </a>
+            <a href="#" *ngFor="#document of folder.items" (click)="onItemClick(document, $event)" class="list-group-item">
+                <i *ngIf="document.isFolder" class="fa fa-folder-o"></i>
+                {{document.displayName}}
+            </a>
+        </div>
+    `,
+    providers: [AlfrescoService]
+})
+export class DocumentList implements OnInit {
+
+    // example: <alfresco-document-list [navigate]="false"></alfresco-document-list>
+    @Input() navigate: boolean = true;
+    
+    rootFolderPath: string = 'swsdp/documentLibrary';
+    currentFolderPath: string = 'swsdp/documentLibrary';
+    folder: FolderEntity;
+    errorMessage;
+
+    private route: string[] = [];
+
+    canNavigateParent(): boolean {
+        return this.currentFolderPath !== this.rootFolderPath;
+    }
+
+    constructor (
+        private _alfrescoService: AlfrescoService
+    ) {}
+
+    ngOnInit() {
+        this.route.push(this.rootFolderPath);
+        this.displayFolderContent(this.rootFolderPath);
+    }
+
+    private displayFolderContent(path) {
+        this.currentFolderPath = path;
+        this._alfrescoService
+            .getFolder(path)
+            .subscribe(
+                folder => this.folder = folder,
+                error => this.errorMessage = <any>error
+            );
+    }
+
+    onNavigateParentClick($event) {
+        if ($event) {
+            $event.preventDefault();
+        }
+
+        if (this.navigate) {
+            this.route.pop();
+            var parent = this.route.length > 0 ? this.route[this.route.length - 1] : this.rootFolderPath;
+            if (parent) {
+                this.displayFolderContent(parent);
+            }
+        }
+    }
+
+    onItemClick(item: DocumentEntity, $event) {
+        if ($event) {
+            $event.preventDefault();
+        }
+
+        if (this.navigate && item) {
+            if (item.isFolder) {
+                var path = this.getItemPath(item);
+                this.route.push(path);
+                this.displayFolderContent(path);
+            }
+        }
+    }
+
+    private getItemPath(item: DocumentEntity):string {
+        var container = item.location.container;
+        var path = item.location.path !== '/' ? (item.location.path + '/' ) : '/';
+        var relativePath = container + path + item.fileName;
+        return item.location.site + '/' + relativePath;
+    }
+}

demo-shell-ng2/app/components/page1.view.ts

@@ -1,13 +1,15 @@
 import {Component} from "angular2/core";
+import {DocumentList} from "./document-list.component";
 @Component({
     selector: 'page1-view',
     template: `
         <div class="container">
             <div class="row">
-                <h1>Page 1</h1>
+                <alfresco-document-list></alfresco-document-list>
             </div>
         </div>
-    `
+    `,
+    directives: [DocumentList]
 })
 export class Page1View {
     

demo-shell-ng2/app/main.ts

@@ -1,9 +1,11 @@
 import {bootstrap}    from 'angular2/platform/browser';
 import {AppComponent} from './app.component';
 import {ROUTER_PROVIDERS} from "angular2/router";
+import {HTTP_PROVIDERS}    from 'angular2/http';
 import {Authentication} from "./services/authentication";
 
 bootstrap(AppComponent, [
     ROUTER_PROVIDERS,
+    HTTP_PROVIDERS,
     Authentication
 ]);