Simple native (ng2) document list component

This commit is contained in:
Denys Vuika
2016-04-12 20:18:15 +01:00
parent 13a3f7ae7d
commit 7a36a1a30a
9 changed files with 184 additions and 6 deletions

View File

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

View File

@@ -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');
}
}

View File

@@ -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;
}

View File

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

View File

@@ -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;
}

View File

@@ -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;
}
}

View File

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

View File

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

View File

@@ -28,6 +28,7 @@
<script src="node_modules/rxjs/bundles/Rx.js"></script> <script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script> <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script> <script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>