inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'development' into dev-denys-dts

Browse Source 
# Conflicts:
#	demo-shell-ng2/systemjs.config.js
#	ng2-components/ng2-alfresco-upload/src/services/upload.service.spec.ts
#	ng2-components/ng2-alfresco-upload/src/services/upload.service.ts
#
ng2-components/ng2-alfresco-viewer/src/componets/viewer.component.spec.t
s
#	ng2-components/ng2-alfresco-viewer/src/componets/viewer.component.ts
This commit is contained in:
Denys Vuika
2016-09-05 09:10:08 +01:00
parent 3c662de36d 3ee567ff65
commit c037b91c9c
176 changed files with 4641 additions and 1173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
ng2-components/ng2-alfresco-upload/README.md
View File

@@ -91,6 +91,8 @@ Also make sure you include these dependencies in your .html page:
[uploadFolders]="true"
[multipleFiles]="false"
[acceptedFilesType]=".jpg,.gif,.png,.svg"
[currentFolderPath]="/Sites/swsdp/documentLibrary"
[versioning]="false"
(onSuccess)="customMethod($event)">
</alfresco-upload-button>
<file-uploading-dialog></file-uploading-dialog>
@@ -137,14 +139,22 @@ bootstrap(MyDemoApp, [
```
#### Events
**onSuccess**: The event is emitted when the file is uploaded<br />
Attribute | Description
--- | ---
`onSuccess` | The event is emitted when the file is uploaded
#### Options
**showUdoNotificationBar**: {boolean} (optional) default true. Hide/show notification bar.<br />
**uploadFolders**: {boolean} (optional) default false. Allow/disallow upload folders (only for chrome).<br />
**multipleFiles**: {boolean} (optional) default false. Allow/disallow multiple files.<br />
**acceptedFilesType**: {string} (optional) default "*". array of allowed file extensions , example: ".jpg,.gif,.png,.svg" .<br />
Attribute | Options | Default | Description | Mandatory
--- | --- | --- | --- | ---
`showUdoNotificationBar` | *boolean* | true | Hide/show notification bar |
`uploadFolders` | *boolean* | false | Allow/disallow upload folders (only for chrome) |
`multipleFiles` | *boolean* | false | Allow/disallow multiple files |
`acceptedFilesType` | *string* | * | array of allowed file extensions , example: ".jpg,.gif,.png,.svg" |
`currentFolderPath` | *string* | '/Sites/swsdp/documentLibrary' | define the path where the files are uploaded |
`versioning` | *boolean* | false | Versioning false is the default uploader behaviour and it rename using an integer suffix if there is a name clash. Versioning true to indicate that a major version should be created |
### Drag and drop
This component, provide a drag and drop are to upload files to alfresco.
@@ -195,8 +205,20 @@ bootstrap(MyDemoApp, [
]);
```
#### Events
**onSuccess**: The event is emitted when the file is uploaded<br />
Attribute | Description
--- | ---
`onSuccess` | The event is emitted when the file is uploaded
#### Options
Attribute | Options | Default | Description | Mandatory
--- | --- | --- | --- | ---
`showUdoNotificationBar` | *boolean* | true | Hide/show notification bar |
`currentFolderPath` | *string* | '/Sites/swsdp/documentLibrary' | define the path where the files are uploaded |
`versioning` | *boolean* | false | Versioning false is the default uploader behaviour and it rename using an integer suffix if there is a name clash. Versioning true to indicate that a major version should be created |
### Files Dialog
This component provides a dialog that shows all the files uploaded

4
ng2-components/ng2-alfresco-upload/demo/package.json
View File

@@ -67,8 +67,8 @@
"material-design-lite": "1.1.3",
"alfresco-js-api": "^0.3.0",
"ng2-alfresco-core": "^0.1.36",
"ng2-alfresco-upload": "^0.1.49"
"ng2-alfresco-core": "^0.3.0",
"ng2-alfresco-upload": "^0.3.0"
},
"devDependencies": {
"concurrently": "2.0.0",

133
ng2-components/ng2-alfresco-upload/demo/src/main.ts
View File

@@ -28,37 +28,74 @@ import { ALFRESCO_ULPOAD_COMPONENTS, UploadService } from 'ng2-alfresco-upload';
@Component({
selector: 'my-app',
template: `<label for="token"><b>Insert a valid access token / ticket:</b></label><br>
<input id="token" type="text" size="48" (change)="updateToken()" [(ngModel)]="token"><br>
<label for="token"><b>Insert the ip of your Alfresco instance:</b></label><br>
<input id="token" type="text" size="48" (change)="updateHost()" [(ngModel)]="host"><br><br>
template: `<label for="ticket"><b>Insert a valid access ticket / ticket:</b></label><br>
<input id="ticket" type="text" size="48" (change)="updateTicket()" [(ngModel)]="ticket"><br>
<label for="host"><b>Insert the ip of your Alfresco instance:</b></label><br>
<input id="host" type="text" size="48" (change)="updateHost()" [(ngModel)]="ecmHost"><br><br>
<div *ngIf="!authenticated" style="color:#FF2323">
Authentication failed to ip {{ host }} with user: admin, admin, you can still try to add a valid token to perform
Authentication failed to ip {{ host }} with user: admin, admin, you can still try to add a valid ticket to perform
operations.
</div>
<hr>
<alfresco-upload-button [showUdoNotificationBar]="true"
[uploadFolders]="false"
[multipleFiles]="false"
(onSuccess)="customMethod($event)">
</alfresco-upload-button>
<br><br>
<alfresco-upload-button [showUdoNotificationBar]="true"
[uploadFolders]="true"
[multipleFiles]="false"
(onSuccess)="customMethod($event)">
</alfresco-upload-button>
<br><br>
<alfresco-upload-button [showUdoNotificationBar]="true"
[uploadFolders]="false"
[multipleFiles]="true"
(onSuccess)="customMethod($event)">
</alfresco-upload-button>
<h5>Upload</h5>
<br>
<div *ngIf="acceptedFilesTypeShow">
<span class="mdl-input__label">Extension accepted</span>
<input type="text" data-automation-id="accepted-files-type" [(ngModel)]="acceptedFilesType">
<br/>
</div>
<div *ngIf="!acceptedFilesTypeShow">
<alfresco-upload-button data-automation-id="multiple-file-upload"
[uploaddirectory]="currentPath"
[currentFolderPath]="currentPath"
[multipleFiles]="multipleFileUpload"
[uploadFolders]="folderUpload"
[versioning] = "versioning"
(onSuccess)="documentList.reload()">
<div class="mdl-spinner mdl-js-spinner is-active"></div>
</alfresco-upload-button>
</div>
<div *ngIf="acceptedFilesTypeShow">
<alfresco-upload-button data-automation-id="multiple-file-upload"
[uploaddirectory]="currentPath"
[currentFolderPath]="currentPath"
acceptedFilesType="{{acceptedFilesType}}"
[multipleFiles]="multipleFileUpload"
[uploadFolders]="folderUpload"
[versioning] = "versioning"
(onSuccess)="documentList.reload()">
<div class="mdl-spinner mdl-js-spinner is-active"></div>
</alfresco-upload-button>
</div>
<p style="width:250px;margin: 20px;">
<label for="switch-multiple-file" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch-multiple-file" class="mdl-switch__input" (change)="toggleMultipleFileUpload()" >
<span class="mdl-switch__label">Multiple File Upload</span>
</label>
</p>
<p style="width:250px;margin: 20px;">
<label for="switch-folder-upload" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch-folder-upload" class="mdl-switch__input" (change)="toggleFolder()">
<span class="mdl-switch__label">Folder Upload</span>
</label>
</p>
<p style="width:250px;margin: 20px;">
<label for="switch-accepted-file-type" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch-accepted-file-type" class="mdl-switch__input" (change)="toggleAcceptedFilesType()">
<span class="mdl-switch__label">Filter extension</span>
</label>
</p>
<p style="width:250px;margin: 20px;">
<label for="switch-versioning" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch-versioning" class="mdl-switch__input" (change)="toggleVersioning()">
<span class="mdl-switch__label">Versioning</span>
</label>
</p>
<br><br>
<alfresco-upload-drag-area (onSuccess)="customMethod($event)" class="upload-border">
@@ -78,18 +115,24 @@ export class MyDemoApp implements OnInit {
public ecmHost: string = 'http://devproducts-platform.alfresco.me';
token: string;
multipleFileUpload: boolean = false;
folderUpload: boolean = false;
acceptedFilesTypeShow: boolean = false;
versioning: boolean = false;
ticket: string;
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = this.ecmHost;
settingsService.setProviders('ECM');
if (this.authService.getTicket()) {
this.token = this.authService.getTicket();
if (this.authService.getTicketEcm()) {
this.ticket = this.authService.getTicketEcm();
}
}
public updateToken(): void {
localStorage.setItem('token', this.token);
public updateTicket(): void {
localStorage.setItem('ticket-ECM', this.ticket);
}
public updateHost(): void {
@@ -107,9 +150,9 @@ export class MyDemoApp implements OnInit {
login() {
this.authService.login('admin', 'admin').subscribe(
token => {
console.log(token);
this.token = token;
ticket => {
console.log(ticket);
this.ticket = this.authService.getTicketEcm();
this.authenticated = true;
},
error => {
@@ -117,6 +160,28 @@ export class MyDemoApp implements OnInit {
this.authenticated = false;
});
}
toggleMultipleFileUpload() {
this.multipleFileUpload = !this.multipleFileUpload;
return this.multipleFileUpload;
}
toggleFolder() {
this.multipleFileUpload = false;
this.folderUpload = !this.folderUpload;
return this.folderUpload;
}
toggleAcceptedFilesType() {
this.acceptedFilesTypeShow = !this.acceptedFilesTypeShow;
return this.acceptedFilesTypeShow;
}
toggleVersioning() {
this.versioning = !this.versioning;
return this.versioning;
}
}
bootstrap(MyDemoApp, [

2
ng2-components/ng2-alfresco-upload/demo/tslint.json
View File

@@ -26,7 +26,7 @@
"label-undefined": true,
"max-line-length": [
true,
140
180
],
"member-ordering": [
true,

4
ng2-components/ng2-alfresco-upload/package.json
View File

@@ -1,7 +1,7 @@
{
"name": "ng2-alfresco-upload",
"description": "Alfresco Angular2 Upload Component",
"version": "0.2.0",
"version": "0.3.0",
"author": "Alfresco Software, Ltd.",
"scripts": {
"postinstall": "typings install",
@@ -72,7 +72,7 @@
"zone.js": "0.6.12",
"ng2-translate": "2.2.2",
"alfresco-js-api": "^0.3.0",
"ng2-alfresco-core": "0.2.0"
"ng2-alfresco-core": "0.3.0"
},
"peerDependencies": {
"material-design-icons": "^2.2.3",

3
ng2-components/ng2-alfresco-upload/src/components/upload-button.component.css
View File

@@ -7,7 +7,6 @@
top: 0;
width: 300px;
z-index: 4;
background-color: rgb(255,152,0);
}
.mdl-textfield--file .mdl-textfield__input {
@@ -17,4 +16,4 @@
.mdl-textfield--file .mdl-button--file {
right: 0;
}
}

42
ng2-components/ng2-alfresco-upload/src/components/upload-button.component.ts
View File

@@ -38,10 +38,11 @@ const ERROR_FOLDER_ALREADY_EXIST = 409;
* This component, provide a set of buttons to upload files to alfresco.
*
* @InputParam {boolean} [true] showUdoNotificationBar - hide/show notification bar.
* @InputParam {boolean} [false] versioning - true to indicate that a major version should be created
* @InputParam {boolean} [false] uploadFolders - allow/disallow upload folders (only for chrome).
* @InputParam {boolean} [false] multipleFiles - allow/disallow multiple files.
* @InputParam {string} [*] acceptedFilesType - array of allowed file extensions.
*
* @InputParam {boolean} [false] versioning - true to indicate that a major version should be created
* @Output - onSuccess - The event is emitted when the file is uploaded
*
* @returns {UploadDragAreaComponent} .
@@ -67,6 +68,9 @@ export class UploadButtonComponent {
@Input()
multipleFiles: boolean = false;
@Input()
versioning: boolean = false;
@Input()
acceptedFilesType: string = '*';
@@ -85,16 +89,16 @@ export class UploadButtonComponent {
translate: AlfrescoTranslationService;
constructor(public el: ElementRef,
private _uploaderService: UploadService,
translate: AlfrescoTranslationService) {
let formFields = this.createFormFields();
this._uploaderService.setOptions(formFields);
constructor(public el: ElementRef, private _uploaderService: UploadService, translate: AlfrescoTranslationService) {
this.translate = translate;
this.translate.addTranslationFolder('node_modules/ng2-alfresco-upload/dist/src');
}
ngOnChanges(changes) {
let formFields = this.createFormFields();
this._uploaderService.setOptions(formFields, this.versioning);
}
/**
* Method called when files are dropped in the drag area.
*
@@ -123,21 +127,21 @@ export class UploadButtonComponent {
this._uploaderService.createFolder(absolutePath, directoryName)
.subscribe(
res => {
let relativeDir = this.currentFolderPath + '/' + directoryPath;
this.uploadFiles(relativeDir, filesDir);
},
let relativeDir = this.currentFolderPath + '/' + directoryPath;
this.uploadFiles(relativeDir, filesDir);
},
error => {
let errorMessagePlaceholder = this.getErrorMessage(error.response);
if (errorMessagePlaceholder) {
this.onError.emit({value: errorMessagePlaceholder});
let errorMessage = this.formatString(errorMessagePlaceholder, [directoryName]);
if (errorMessage) {
this._showErrorNotificationBar(errorMessage);
let errorMessagePlaceholder = this.getErrorMessage(error.response);
if (errorMessagePlaceholder) {
this.onError.emit({value: errorMessagePlaceholder});
let errorMessage = this.formatString(errorMessagePlaceholder, [directoryName]);
if (errorMessage) {
this._showErrorNotificationBar(errorMessage);
}
}
console.log(error);
}
console.log(error);
}
);
);
});
// reset the value of the input file
$event.target.value = '';

17
ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.ts
View File

@@ -51,6 +51,9 @@ export class UploadDragAreaComponent {
@Input()
showUdoNotificationBar: boolean = true;
@Input()
versioning: boolean = false;
@Input()
currentFolderPath: string = '/Sites/swsdp/documentLibrary';
@@ -59,16 +62,16 @@ export class UploadDragAreaComponent {
translate: AlfrescoTranslationService;
constructor(private _uploaderService: UploadService,
translate: AlfrescoTranslationService) {
let formFields = this.createFormFields();
this._uploaderService.setOptions(formFields);
constructor(private _uploaderService: UploadService, translate: AlfrescoTranslationService) {
this.translate = translate;
this.translate.addTranslationFolder('node_modules/ng2-alfresco-upload/dist/src');
}
ngOnChanges(changes) {
let formFields = this.createFormFields();
this._uploaderService.setOptions(formFields, this.versioning);
}
/**
* Method called when files are dropped in the drag area.
*
@@ -227,7 +230,7 @@ export class UploadDragAreaComponent {
* @returns {string}
*/
private getErrorMessage(response: any): string {
if (response.body.error.statusCode === ERROR_FOLDER_ALREADY_EXIST ) {
if (response.body.error.statusCode === ERROR_FOLDER_ALREADY_EXIST) {
let errorMessage: any;
errorMessage = this.translate.get('FILE_UPLOAD.MESSAGES.FOLDER_ALREADY_EXIST');
return errorMessage.value;

28
ng2-components/ng2-alfresco-upload/src/services/upload.service.spec.ts
View File

@@ -87,7 +87,7 @@ describe('AlfrescoUploadService', () => {
service.uploadFilesInTheQueue('fake-dir', emitter);
let request = jasmine.Ajax.requests.mostRecent();
expect(request.url).toBe('http://127.0.0.1:8080/alfresco/api/-default-/public/alfresco/versions/1/nodes/-root-/children');
expect(request.url).toBe('http://localhost:8080/alfresco/api/-default-/public/alfresco/versions/1/nodes/-root-/children?autoRename=true');
expect(request.method).toBe('POST');
jasmine.Ajax.requests.mostRecent().respondWith({
@@ -109,7 +109,8 @@ describe('AlfrescoUploadService', () => {
service.addToQueue(filesFake);
service.uploadFilesInTheQueue('', emitter);
expect(jasmine.Ajax.requests.mostRecent().url)
.toBe('http://127.0.0.1:8080/alfresco/api/-default-/public/alfresco/versions/1/nodes/-root-/children');
.toBe('http://localhost:8080/alfresco/api/-default-/public/alfresco/versions/1/nodes/-root-/children?autoRename=true');
jasmine.Ajax.requests.mostRecent().respondWith({
'status': 404,
contentType: 'text/plain',
@@ -158,7 +159,7 @@ describe('AlfrescoUploadService', () => {
};
let filesFake = [{name: 'fake-name', size: 10}];
service.addToQueue(filesFake);
service.filesUpload$.subscribe( (file) => {
service.filesUpload$.subscribe((file) => {
expect(file).toBeDefined();
expect(file[0]).toBeDefined();
expect(file[0].progress).toEqual(fakeProgress);
@@ -171,7 +172,7 @@ describe('AlfrescoUploadService', () => {
file[0].emitProgres(fakeProgress);
});
it('should make XHR done request after the folder is created', (done) => {
it('should make XHR done request after the folder is created', (done) => {
let fakeRest = {
entry: {
isFile: false,
@@ -192,7 +193,7 @@ describe('AlfrescoUploadService', () => {
});
});
it('should throws an exception when a folder already exist', (done) => {
it('should throws an exception when a folder already exist', (done) => {
let fakeRest = {
response: {
body: {
@@ -210,13 +211,26 @@ describe('AlfrescoUploadService', () => {
let defaultPath = '';
let folderName = 'folder-duplicate-fake';
service.createFolder(defaultPath, folderName).subscribe(
res => {
res => {
},
error => {
error => {
expect(error).toEqual(fakeRest);
done();
}
);
});
it('If versioning is true autoRename should not be present and majorVersion should be a param', () => {
let emitter = new EventEmitter();
let enableVersioning = true;
service.setOptions(options, enableVersioning);
let filesFake = [{name: 'fake-name', size: 10}];
service.addToQueue(filesFake);
service.uploadFilesInTheQueue('', emitter);
console.log(jasmine.Ajax.requests.mostRecent().url);
expect(jasmine.Ajax.requests.mostRecent().url.endsWith('autoRename=true')).toBe(false);
expect(jasmine.Ajax.requests.mostRecent().params.has('majorVersion')).toBe(true);
});
});

30
ng2-components/ng2-alfresco-upload/src/services/upload.service.ts
View File

@@ -20,6 +20,7 @@ import { Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';
import { AlfrescoApiService } from 'ng2-alfresco-core';
import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { FileModel } from '../models/file.model';
/**
@@ -34,6 +35,8 @@ export class UploadService {
private formFields: Object = {};
private queue: FileModel[] = [];
private versioning: boolean = false;
private filesUploadObserverProgressBar: Observer<FileModel[]>;
private totalCompletedObserver: Observer<number>;
@@ -42,19 +45,21 @@ export class UploadService {
filesUpload$: Observable<FileModel[]>;
totalCompleted$: Observable<any>;
constructor(private apiService: AlfrescoApiService) {
this.filesUpload$ = new Observable<FileModel[]>(observer => this.filesUploadObserverProgressBar = observer).share();
this.totalCompleted$ = new Observable<number>(observer => this.totalCompletedObserver = observer).share();
constructor(private authService: AlfrescoAuthenticationService) {
this.filesUpload$ = new Observable<FileModel[]>(observer => this.filesUploadObserverProgressBar = observer).share();
this.totalCompleted$ = new Observable<number>(observer => this.totalCompletedObserver = observer).share();
}
/**
* Configure the service
*
* @param {Object} - options to init the object
* @param {Object} - options formFields to init the object
* @param {boolean} - versioning true to indicate that a major version should be created
*
*/
public setOptions(options: any): void {
public setOptions(options: any, versioning: boolean): void {
this.formFields = options.formFields != null ? options.formFields : this.formFields;
this.versioning = versioning != null ? versioning : this.versioning;
}
/**
@@ -88,11 +93,20 @@ export class UploadService {
return !uploadingFileModel.uploading && !uploadingFileModel.done && !uploadingFileModel.abort && !uploadingFileModel.error;
});
let opts: any = {};
opts.renditions = 'doclib';
if (this.versioning) {
opts.overwrite = true;
opts.majorVersion = true;
} else {
opts.autoRename = true;
}
filesToUpload.forEach((uploadingFileModel: FileModel) => {
uploadingFileModel.setUploading();
let promiseUpload = this.apiService.getInstance().
upload.uploadFile(uploadingFileModel.file, directory, null, null, {renditions: 'doclib'})
let promiseUpload = this.authService.getAlfrescoApi().upload.uploadFile(uploadingFileModel.file, directory, null, null, opts)
.on('progress', (progress: any) => {
uploadingFileModel.setProgres(progress);
this.updateFileListStream(this.queue);
@@ -111,7 +125,7 @@ export class UploadService {
})
.on('success', (data: any) => {
elementEmit.emit({
value: 'File uploaded'
value: data
});
uploadingFileModel.onFinished(
data.status,