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

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',
    styles: [
        `
            :host .breadcrumb {
                margin-bottom: 4px;
            }
            
            :host .folder-icon {
                float: left;
                margin-right: 10px;
            }
            
            :host .file-icon {
                width: 52px;
                height: 52px;
                float: left;
                margin-right: 10px;
            }
            
            :host .document-header:hover {
                text-decoration: underline;
            }
        `
    ],
    template: `
        <ol *ngIf="breadcrumb" class="breadcrumb">
            <li *ngFor="#r of route; #last = last" [class.active]="last" [ngSwitch]="last">
                <span *ngSwitchWhen="true">{{r.name}}</span>
                <a *ngSwitchDefault href="#" (click)="goToRoute(r, $event)">{{r.name}}</a>
            </li>
        </ol>
        <div *ngIf="folder" class="list-group">
            <a href="#" *ngIf="!breadcrumb && 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 clearfix">
                <i *ngIf="thumbnails && document.isFolder" class="folder-icon {{folderIconClass}}"></i>
                <img *ngIf="thumbnails && !document.isFolder" class="file-icon" src="{{getDocumentThumbnailUrl(document)}}">
                <h4 class="list-group-item-heading document-header">
                    {{document.displayName}}
                </h4>
                <p class="list-group-item-text">{{document.description}}</p>
                <small>
                    Modified {{document.modifiedOn}} by {{document.modifiedBy}}
                </small>
            </a>
        </div>
    `,
    providers: [AlfrescoService]
})
export class DocumentList implements OnInit {

    // example: <alfresco-document-list [navigate]="false"></alfresco-document-list>
    @Input() navigate: boolean = true;
    // example: <alfresco-document-list [breadcrumb]="true"></alfresco-document-list>
    @Input() breadcrumb: boolean = false;
    // example: <alfresco-document-list folder-icon-class="fa fa-folder fa-4x"></alfresco-document-list>
    @Input('folder-icon-class') folderIconClass: string = 'fa fa-folder-o fa-4x';
    // example: <alfresco-document-list #list [thumbnails]="false"></alfresco-document-list>
    @Input() thumbnails: boolean = true;

    rootFolder = {
        name: 'Document Library',
        path: 'swsdp/documentLibrary'
    };
    currentFolderPath: string = 'swsdp/documentLibrary';
    folder: FolderEntity;
    errorMessage;

    route: any[] = [];

    canNavigateParent(): boolean {
        return this.currentFolderPath !== this.rootFolder.path;
    }

    constructor (
        private _alfrescoService: AlfrescoService
    ) {}

    ngOnInit() {
        this.route.push(this.rootFolder);
        this.displayFolderContent(this.rootFolder.path);
    }

    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.rootFolder;
            if (parent) {
                this.displayFolderContent(parent.path);
            }
        }
    }

    onItemClick(item: DocumentEntity, $event) {
        if ($event) {
            $event.preventDefault();
        }

        if (this.navigate && item) {
            if (item.isFolder) {
                var path = this.getItemPath(item);
                this.route.push({
                    name: item.displayName,
                    path: path
                });
                this.displayFolderContent(path);
            }
        }
    }

    goToRoute(r, $event) {
        if ($event) {
            $event.preventDefault();
        }

        var idx = this.route.indexOf(r);
        if (idx > -1) {
            this.route.splice(idx + 1);
            this.displayFolderContent(r.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;
    }
    
    getDocumentThumbnailUrl(document:  DocumentEntity) {
        return this._alfrescoService.getDocumentThumbnailUrl(document);
    }
}