mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-09-17 14:21:29 +00:00
celan components
This commit is contained in:
Mario Romano
@@ -1,8 +0,0 @@
|
||||
npm-debug.log
|
||||
node_modules
|
||||
jspm_packages
|
||||
.idea
|
||||
lib
|
||||
build
|
||||
!make.js
|
||||
node_modules/
|
||||
@@ -1,4 +0,0 @@
|
||||
/typings
|
||||
/src
|
||||
/node_modules
|
||||
gulpfile.js
|
||||
@@ -1,44 +0,0 @@
|
||||
# Alfresco Components for Angular 2
|
||||
|
||||
Components included:
|
||||
|
||||
* Document List Component
|
||||
* Hello World component
|
||||
* Alfresco Service
|
||||
|
||||
### Document List Component
|
||||
|
||||
```ts
|
||||
export class MyView {
|
||||
thumbnails: boolean = true;
|
||||
breadcrumb: boolean = false;
|
||||
navigation: boolean = true;
|
||||
downloads: boolean = true;
|
||||
|
||||
events: any[] = [];
|
||||
|
||||
onItemClick($event) {
|
||||
console.log($event.value);
|
||||
this.events.push({
|
||||
name: 'Item Clicked',
|
||||
value: $event.value
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<alfresco-document-list
|
||||
#list
|
||||
[thumbnails]="thumbnails"
|
||||
[breadcrumb]="breadcrumb"
|
||||
[navigate]="navigation"
|
||||
[downloads]="downloads"
|
||||
(itemClick)="onItemClick($event)">
|
||||
</alfresco-document-list>
|
||||
```
|
||||
|
||||
### Build
|
||||
|
||||
npm install
|
||||
gulp build
|
||||
@@ -1,40 +0,0 @@
|
||||
const gulp = require('gulp');
|
||||
const del = require('del');
|
||||
const typescript = require('gulp-typescript');
|
||||
const tscConfig = require('./tsconfig.json');
|
||||
const sourcemaps = require('gulp-sourcemaps');
|
||||
const tslint = require('gulp-tslint');
|
||||
const tsconfig = require('tsconfig-glob');
|
||||
|
||||
// clean the contents of the distribution directory
|
||||
gulp.task('clean', function () {
|
||||
return del('dist/**/*');
|
||||
});
|
||||
|
||||
// linting
|
||||
gulp.task('tslint', function () {
|
||||
return gulp.src('app/**/*.ts')
|
||||
.pipe(tslint())
|
||||
.pipe(tslint.report('verbose'));
|
||||
});
|
||||
|
||||
// TypeScript compile
|
||||
gulp.task('compile', ['clean'], function () {
|
||||
return gulp
|
||||
.src(tscConfig.files)
|
||||
.pipe(sourcemaps.init())
|
||||
.pipe(typescript(tscConfig.compilerOptions))
|
||||
.pipe(sourcemaps.write('.'))
|
||||
.pipe(gulp.dest('dist'));
|
||||
});
|
||||
|
||||
// update the tsconfig files based on the glob pattern
|
||||
gulp.task('tsconfig-glob', function () {
|
||||
return tsconfig({
|
||||
configPath: '.',
|
||||
indent: 2
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task('build', ['tslint', 'clean', 'compile']);
|
||||
gulp.task('default', ['build']);
|
||||
@@ -1,15 +0,0 @@
|
||||
import { HelloWorld } from './src/HelloWorld';
|
||||
import { DocumentList } from "./src/document-list.component.ts";
|
||||
import { AlfrescoService } from "./src/alfresco.service.ts";
|
||||
|
||||
export * from './src/HelloWorld';
|
||||
export * from './src/document-list.component.ts';
|
||||
export * from './src/alfresco.service.ts';
|
||||
|
||||
declare var _default: {
|
||||
directives: (typeof HelloWorld | typeof DocumentList)[];
|
||||
providers: typeof AlfrescoService[];
|
||||
};
|
||||
export default _default;
|
||||
export declare const ALFRESCO_DIRECTIVES: [any];
|
||||
export declare const ALFRESCO_PROVIDERS: [any];
|
||||
@@ -1,12 +0,0 @@
|
||||
import {HelloWorld} from './src/HelloWorld';
|
||||
import {DocumentList} from './src/document-list.component';
|
||||
import {AlfrescoService} from './src/alfresco.service';
|
||||
|
||||
|
||||
export default {
|
||||
directives: [HelloWorld, DocumentList],
|
||||
providers: [AlfrescoService]
|
||||
}
|
||||
|
||||
export const ALFRESCO_DIRECTIVES: [any] = [HelloWorld, DocumentList];
|
||||
export const ALFRESCO_PROVIDERS: [any] = [AlfrescoService];
|
||||
@@ -1,39 +0,0 @@
|
||||
{
|
||||
"name": "ng2-alfresco-documentslist",
|
||||
"version": "0.1.0",
|
||||
"description": "Alfresco Document list - Angular 2 Component",
|
||||
"license": "GNU",
|
||||
"main": "ng2-alfresco-documentslist.ts",
|
||||
"contributors": [
|
||||
{
|
||||
"name": "Denys Vuika",
|
||||
"email": "denis.vuyka@gmail.com"
|
||||
},
|
||||
{
|
||||
"name": "Mario Romano",
|
||||
"email": "mario.romano83@gmail.com"
|
||||
}
|
||||
],
|
||||
"dependencies": {
|
||||
"angular2": "2.0.0-beta.15",
|
||||
"browser-sync": "^2.10.0",
|
||||
"concurrently": "^2.0.0",
|
||||
"del": "^2.1.0",
|
||||
"es6-shim": "^0.35.0",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-sourcemaps": "^1.6.0",
|
||||
"gulp-tslint": "^3.6.0",
|
||||
"gulp-typescript": "^2.8.0",
|
||||
"jasmine-core": "2.4.1",
|
||||
"lite-server": "^2.2.0",
|
||||
"live-server": "^0.9.2",
|
||||
"reflect-metadata": "0.1.2",
|
||||
"rxjs": "5.0.0-beta.2",
|
||||
"systemjs": "0.19.26",
|
||||
"systemjs-builder": "^0.15.14",
|
||||
"tsconfig-glob": "^0.3.3",
|
||||
"typescript": "^1.8.10",
|
||||
"typings": "^0.7.12",
|
||||
"zone.js": "0.6.10"
|
||||
}
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
export declare class HelloWorld {
|
||||
message: string;
|
||||
onClick(): void;
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
import {Component} from 'angular2/core';
|
||||
|
||||
@Component({
|
||||
selector: 'hello-world',
|
||||
styles: [`
|
||||
h1 {
|
||||
color: blue;
|
||||
}
|
||||
`],
|
||||
template: `<div>
|
||||
<h1 (click)="onClick()">{{message}}</h1>
|
||||
</div>`
|
||||
})
|
||||
export class HelloWorld {
|
||||
|
||||
message = "Click Me ...";
|
||||
|
||||
onClick() {
|
||||
this.message = "Hello World!";
|
||||
console.log(this.message);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
import { Http } from 'angular2/http';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import { FolderEntity } from "./core/entities/folder.entity";
|
||||
import { DocumentEntity } from "./core/entities/document.entity";
|
||||
export declare class AlfrescoService {
|
||||
private http;
|
||||
constructor(http: Http);
|
||||
private _host;
|
||||
private _baseUrlPath;
|
||||
host: string;
|
||||
private getBaseUrl();
|
||||
getFolder(folder: string): Observable<FolderEntity>;
|
||||
getDocumentThumbnailUrl(document: DocumentEntity): string;
|
||||
getContentUrl(document: DocumentEntity): string;
|
||||
private handleError(error);
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
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";
|
||||
import {DocumentEntity} from "./core/entities/document.entity";
|
||||
|
||||
@Injectable()
|
||||
export class AlfrescoService {
|
||||
constructor(private http: Http) {}
|
||||
|
||||
private _host: string = 'http://127.0.0.1:8080';
|
||||
private _baseUrlPath: string = '/alfresco/service/slingshot/doclib/doclist/all/site/';
|
||||
|
||||
public get host():string {
|
||||
return this._host;
|
||||
}
|
||||
|
||||
public set host(value:string) {
|
||||
this._host = value;
|
||||
}
|
||||
|
||||
private getBaseUrl():string {
|
||||
return this.host + this._baseUrlPath;
|
||||
}
|
||||
|
||||
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.getBaseUrl() + folder, options)
|
||||
.map(res => <FolderEntity> res.json())
|
||||
.do(data => console.log(data)) // eyeball results in the console
|
||||
.catch(this.handleError);
|
||||
}
|
||||
|
||||
getDocumentThumbnailUrl(document: DocumentEntity) {
|
||||
return this._host + '/alfresco/service/api/node/' + document.nodeRef.replace('://', '/') + '/content/thumbnails/doclib?c=queue&ph=true&lastModified=1';
|
||||
}
|
||||
|
||||
getContentUrl(document: DocumentEntity) {
|
||||
return this._host + '/alfresco/service/' + document.contentUrl;
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
import { LocationEntity } from "./location.entity";
|
||||
export declare 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;
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
// 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;
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
import { DocumentEntity } from "./document.entity";
|
||||
export declare class FolderEntity {
|
||||
items: DocumentEntity[];
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
import {DocumentEntity} from "./document.entity";
|
||||
|
||||
// contains only limited subset of available fields
|
||||
export class FolderEntity {
|
||||
items: DocumentEntity[];
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
export declare class LocationEntity {
|
||||
repositoryId: string;
|
||||
site: string;
|
||||
siteTitle: string;
|
||||
container: string;
|
||||
path: string;
|
||||
file: string;
|
||||
parent: LocationParentEntity;
|
||||
}
|
||||
export declare class LocationParentEntity {
|
||||
nodeRef: string;
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
// 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;
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
import { OnInit, EventEmitter } from "angular2/core";
|
||||
import { AlfrescoService } from "./alfresco.service";
|
||||
import { FolderEntity } from "./core/entities/folder.entity";
|
||||
import { DocumentEntity } from "./core/entities/document.entity";
|
||||
export declare class DocumentList implements OnInit {
|
||||
private _alfrescoService;
|
||||
navigate: boolean;
|
||||
breadcrumb: boolean;
|
||||
folderIconClass: string;
|
||||
thumbnails: boolean;
|
||||
downloads: boolean;
|
||||
itemClick: EventEmitter<any>;
|
||||
rootFolder: {
|
||||
name: string;
|
||||
path: string;
|
||||
};
|
||||
currentFolderPath: string;
|
||||
folder: FolderEntity;
|
||||
errorMessage: any;
|
||||
route: any[];
|
||||
canNavigateParent(): boolean;
|
||||
constructor(_alfrescoService: AlfrescoService);
|
||||
ngOnInit(): void;
|
||||
private displayFolderContent(path);
|
||||
onNavigateParentClick($event: any): void;
|
||||
onDownloadClick(event: any): void;
|
||||
onItemClick(item: DocumentEntity, $event: any): void;
|
||||
goToRoute(r: any, $event: any): void;
|
||||
private getItemPath(item);
|
||||
getContentUrl(document: DocumentEntity): string;
|
||||
getDocumentThumbnailUrl(document: DocumentEntity): string;
|
||||
}
|
||||
@@ -1,186 +0,0 @@
|
||||
import {Component, OnInit, Input, Output, EventEmitter} 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;
|
||||
}
|
||||
|
||||
:host .download-button {
|
||||
color: #777;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
:host .download-button:hover {
|
||||
color: #555;
|
||||
}
|
||||
`
|
||||
],
|
||||
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="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">
|
||||
<a *ngIf="downloads && !document.isFolder" href="{{getContentUrl(document)}}" (click)="onDownloadClick($event)" class="download-button pull-right" download target="_blank">
|
||||
<i class="fa fa-download fa-2x"></i>
|
||||
</a>
|
||||
<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;
|
||||
// example: <alfresco-document-list #list [downloads]="false"></alfresco-document-list>
|
||||
@Input() downloads: boolean = true;
|
||||
|
||||
@Output() itemClick: EventEmitter<any> = new EventEmitter();
|
||||
|
||||
rootFolder = {
|
||||
name: 'Document Library',
|
||||
path: 'swsdp/documentLibrary'
|
||||
};
|
||||
currentFolderPath: string = 'swsdp/documentLibrary';
|
||||
folder: FolderEntity;
|
||||
errorMessage;
|
||||
|
||||
route: any[] = [];
|
||||
|
||||
canNavigateParent(): boolean {
|
||||
return this.navigate &&
|
||||
!this.breadcrumb &&
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onDownloadClick(event) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
onItemClick(item: DocumentEntity, $event) {
|
||||
if ($event) {
|
||||
$event.preventDefault();
|
||||
}
|
||||
|
||||
this.itemClick.emit({
|
||||
value: item
|
||||
});
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
if (this.navigate) {
|
||||
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;
|
||||
}
|
||||
|
||||
getContentUrl(document: DocumentEntity) {
|
||||
return this._alfrescoService.getContentUrl(document);
|
||||
}
|
||||
|
||||
getDocumentThumbnailUrl(document: DocumentEntity) {
|
||||
return this._alfrescoService.getDocumentThumbnailUrl(document);
|
||||
}
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"declaration": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"mapRoot": "",
|
||||
"module": "system",
|
||||
"moduleResolution": "node",
|
||||
"noEmitOnError": true,
|
||||
"noImplicitAny": false,
|
||||
"rootDir": ".",
|
||||
"sourceMap": true,
|
||||
"target": "es5",
|
||||
"outDir": "dist"
|
||||
},
|
||||
"filesGlob": [
|
||||
"node_modules/angular2/typings/browser.d.ts"
|
||||
],
|
||||
"files": [
|
||||
"node_modules/angular2/typings/browser.d.ts",
|
||||
"*.ts",
|
||||
"src/**/*.ts"
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user