mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-10-08 14:51:32 +00:00
[ADF-2563] Upload new version information dialog (#3235)
* add majorVersion param move common part in base class * refactor upload queue * fix after refactoring * add comment functionality in versioning add minor and major option in versioning add animation in versioning add new functionality in demo shell * add animation test * add missing properties test and base upload class * fix reload after new version upload [ADF-2582] * update documentation * update doc and fix minor style issues * fix tslint error * change cachebuster * ADF-2672 version manager disable buttons * [ADF-2649] hide show actions in version list * fix tests
This commit is contained in:
Eugenio Romano
GitHub
@@ -0,0 +1,268 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component } from '@angular/core';
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { TranslationService, UploadService, setupTestBed, CoreModule, FileModel } from '@alfresco/adf-core';
|
||||
import { UploadBase } from './upload-base';
|
||||
import { TranslationMock } from '@alfresco/adf-core';
|
||||
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-upload-button-test',
|
||||
template: 'test componente';
|
||||
})
|
||||
|
||||
export class UploadTestComponent extends UploadBase {
|
||||
|
||||
constructor(protected uploadService: UploadService,
|
||||
protected translationService: TranslationService) {
|
||||
super(uploadService, translationService);
|
||||
}
|
||||
}
|
||||
|
||||
describe('UploadBase', () => {
|
||||
|
||||
let component: UploadTestComponent;
|
||||
let fixture: ComponentFixture<UploadTestComponent>;
|
||||
let uploadService: UploadService;
|
||||
|
||||
setupTestBed({
|
||||
imports: [
|
||||
NoopAnimationsModule,
|
||||
CoreModule.forRoot()
|
||||
],
|
||||
declarations: [
|
||||
UploadTestComponent
|
||||
],
|
||||
providers: [
|
||||
UploadService,
|
||||
{ provide: TranslationService, useClass: TranslationMock }
|
||||
]
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(UploadTestComponent);
|
||||
uploadService = TestBed.get(UploadService);
|
||||
|
||||
spyOn(FileModel.prototype, 'generateId').and.returnValue('test');
|
||||
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.destroy();
|
||||
TestBed.resetTestingModule();
|
||||
});
|
||||
|
||||
describe('filesize', () => {
|
||||
|
||||
const files: File[] = [
|
||||
<File> { name: 'bigFile.png', size: 1000 },
|
||||
<File> { name: 'smallFile.png', size: 10 }
|
||||
];
|
||||
|
||||
let addToQueueSpy;
|
||||
|
||||
beforeEach(() => {
|
||||
addToQueueSpy = spyOn(uploadService, 'addToQueue');
|
||||
});
|
||||
|
||||
it('should filter out file, which are too big if max file size is set', () => {
|
||||
component.maxFilesSize = 100;
|
||||
|
||||
component.uploadFiles(files);
|
||||
|
||||
const filesCalledWith = addToQueueSpy.calls.mostRecent().args;
|
||||
expect(filesCalledWith.length).toBe(1);
|
||||
expect(filesCalledWith[0].name).toBe('smallFile.png');
|
||||
});
|
||||
|
||||
it('should filter out all files if maxFilesSize is 0', () => {
|
||||
component.maxFilesSize = 0;
|
||||
|
||||
component.uploadFiles(files);
|
||||
|
||||
expect(addToQueueSpy.calls.mostRecent()).toBeUndefined();
|
||||
});
|
||||
|
||||
it('should allow file of 0 size when the max file size is set to 0', () => {
|
||||
const zeroFiles: File[] = [
|
||||
<File> { name: 'zeroFile.png', size: 0 }
|
||||
];
|
||||
component.maxFilesSize = 0;
|
||||
|
||||
component.uploadFiles(zeroFiles);
|
||||
|
||||
expect(addToQueueSpy.calls.mostRecent()).toBeDefined();
|
||||
});
|
||||
|
||||
it('should filter out all files if maxFilesSize is <0', () => {
|
||||
component.maxFilesSize = -2;
|
||||
|
||||
component.uploadFiles(files);
|
||||
|
||||
expect(addToQueueSpy.calls.mostRecent()).toBeUndefined();
|
||||
});
|
||||
|
||||
it('should output an error when you try to upload a file too big', (done) => {
|
||||
component.maxFilesSize = 100;
|
||||
|
||||
component.error.subscribe(() => {
|
||||
done();
|
||||
});
|
||||
|
||||
component.uploadFiles(files);
|
||||
});
|
||||
|
||||
it('should not filter out files if max file size is not set', () => {
|
||||
component.maxFilesSize = null;
|
||||
|
||||
component.uploadFiles(files);
|
||||
|
||||
const filesCalledWith = addToQueueSpy.calls.mostRecent().args;
|
||||
expect(filesCalledWith.length).toBe(2);
|
||||
});
|
||||
});
|
||||
|
||||
describe('uploadFiles', () => {
|
||||
|
||||
const files: File[] = [
|
||||
<File> { name: 'phobos.jpg' },
|
||||
<File> { name: 'deimos.png' },
|
||||
<File> { name: 'ganymede.bmp' }
|
||||
];
|
||||
|
||||
let addToQueueSpy;
|
||||
|
||||
beforeEach(() => {
|
||||
addToQueueSpy = spyOn(uploadService, 'addToQueue');
|
||||
});
|
||||
|
||||
it('should filter out file, which is not part of the acceptedFilesType', () => {
|
||||
component.acceptedFilesType = '.jpg';
|
||||
|
||||
component.uploadFiles(files);
|
||||
|
||||
const filesCalledWith = addToQueueSpy.calls.mostRecent().args;
|
||||
expect(filesCalledWith.length).toBe(1, 'Files should contain only one element');
|
||||
expect(filesCalledWith[0].name).toBe('phobos.jpg', 'png file should be filtered out');
|
||||
});
|
||||
|
||||
it('should filter out files, which are not part of the acceptedFilesType', () => {
|
||||
component.acceptedFilesType = '.jpg,.png';
|
||||
|
||||
component.uploadFiles(files);
|
||||
|
||||
const filesCalledWith = addToQueueSpy.calls.mostRecent().args;
|
||||
expect(filesCalledWith.length).toBe(2, 'Files should contain two elements');
|
||||
expect(filesCalledWith[0].name).toBe('phobos.jpg');
|
||||
expect(filesCalledWith[1].name).toBe('deimos.png');
|
||||
});
|
||||
|
||||
it('should not filter out anything if acceptedFilesType is wildcard', () => {
|
||||
component.acceptedFilesType = '*';
|
||||
|
||||
component.uploadFiles(files);
|
||||
|
||||
const filesCalledWith = addToQueueSpy.calls.mostRecent().args;
|
||||
expect(filesCalledWith.length).toBe(3, 'Files should contain all elements');
|
||||
expect(filesCalledWith[0].name).toBe('phobos.jpg');
|
||||
expect(filesCalledWith[1].name).toBe('deimos.png');
|
||||
expect(filesCalledWith[2].name).toBe('ganymede.bmp');
|
||||
});
|
||||
|
||||
it('should not add any file to que if everything is filtered out', () => {
|
||||
component.acceptedFilesType = 'doc';
|
||||
|
||||
component.uploadFiles(files);
|
||||
|
||||
expect(addToQueueSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Comments', () => {
|
||||
|
||||
let addToQueueSpy;
|
||||
|
||||
const files: File[] = [
|
||||
<File> { name: 'phobos.jpg' }
|
||||
];
|
||||
|
||||
beforeEach(() => {
|
||||
addToQueueSpy = spyOn(uploadService, 'addToQueue');
|
||||
});
|
||||
|
||||
it('should add the comment in the uploaded files', () => {
|
||||
component.comment = 'example-comment';
|
||||
|
||||
component.uploadFiles(files);
|
||||
|
||||
expect(addToQueueSpy).toHaveBeenCalledWith(new FileModel(files[0], {
|
||||
comment: 'example-comment'
|
||||
newVersion: false,
|
||||
majorVersion: false,
|
||||
parentId: '-root-',
|
||||
path: ''
|
||||
}));
|
||||
});
|
||||
});
|
||||
|
||||
describe('Versions', () => {
|
||||
|
||||
let addToQueueSpy;
|
||||
|
||||
const files: File[] = [
|
||||
<File> { name: 'phobos.jpg' }
|
||||
];
|
||||
|
||||
beforeEach(() => {
|
||||
addToQueueSpy = spyOn(uploadService, 'addToQueue');
|
||||
});
|
||||
|
||||
it('should be a mahor version upload if majorVersion is true', () => {
|
||||
component.majorVersion = true;
|
||||
component.versioning = true;
|
||||
|
||||
component.uploadFiles(files);
|
||||
|
||||
expect(addToQueueSpy).toHaveBeenCalledWith(new FileModel(files[0], {
|
||||
comment: undefined,
|
||||
newVersion: true,
|
||||
majorVersion: true,
|
||||
parentId: '-root-',
|
||||
path: ''
|
||||
}));
|
||||
});
|
||||
|
||||
it('should not be a mahor version upload if majorVersion is false', () => {
|
||||
component.majorVersion = false;
|
||||
component.versioning = true;
|
||||
|
||||
component.uploadFiles(files);
|
||||
|
||||
expect(addToQueueSpy).toHaveBeenCalledWith(new FileModel(files[0], {
|
||||
comment: undefined,
|
||||
newVersion: true,
|
||||
majorVersion: false,
|
||||
parentId: '-root-',
|
||||
path: ''
|
||||
}));
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -15,16 +15,98 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { FileModel } from '@alfresco/adf-core';
|
||||
import { Input } from '@angular/core';
|
||||
import { FileModel, FileInfo } from '@alfresco/adf-core';
|
||||
import { EventEmitter, Input, Output } from '@angular/core';
|
||||
import { UploadService, TranslationService } from '@alfresco/adf-core';
|
||||
|
||||
export abstract class UploadBase {
|
||||
|
||||
/** Sets a limit on the maximum size (in bytes) of a file to be uploaded.
|
||||
* Has no effect if undefined.
|
||||
*/
|
||||
@Input()
|
||||
maxFilesSize: number;
|
||||
|
||||
/** The ID of the root. Use the nodeId for
|
||||
* Content Services or the taskId/processId for Process Services.
|
||||
*/
|
||||
@Input()
|
||||
rootFolderId: string = '-root-';
|
||||
|
||||
/** Toggles component disabled state (if there is no node permission checking). */
|
||||
@Input()
|
||||
disabled: boolean = false;
|
||||
|
||||
/** Filter for accepted file types. */
|
||||
@Input()
|
||||
acceptedFilesType: string = '*';
|
||||
|
||||
constructor() {}
|
||||
/** Toggles versioning. */
|
||||
@Input()
|
||||
versioning: boolean = false;
|
||||
|
||||
/** majorVersion boolean field to true to indicate a major version should be created. */
|
||||
@Input()
|
||||
majorVersion: boolean = false;
|
||||
|
||||
/** When you overwrite existing content, you can use the comment field to add a version comment that appears in the version history */
|
||||
@Input()
|
||||
comment: string;
|
||||
|
||||
/** Emitted when the file is uploaded successfully. */
|
||||
@Output()
|
||||
success = new EventEmitter();
|
||||
|
||||
/** @deprecated 2.4.0 */
|
||||
/** Emitted when a folder is created. */
|
||||
@Output()
|
||||
createFolder = new EventEmitter();
|
||||
|
||||
/** Emitted when an error occurs. */
|
||||
@Output()
|
||||
error = new EventEmitter();
|
||||
|
||||
constructor(protected uploadService: UploadService,
|
||||
protected translationService: TranslationService) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Upload a list of file in the specified path
|
||||
* @param files
|
||||
* @param path
|
||||
*/
|
||||
uploadFiles(files: File[]): void {
|
||||
const filteredFiles: FileModel[] = files
|
||||
.map<FileModel>((file: File) => {
|
||||
return this.createFileModel(file, this.rootFolderId, (file.webkitRelativePath || '').replace(/\/[^\/]*$/, ''));
|
||||
});
|
||||
|
||||
this.uploadQueue(filteredFiles);
|
||||
}
|
||||
|
||||
uploadFilesInfo(files: FileInfo[]): void {
|
||||
const filteredFiles: FileModel[] = files
|
||||
.map<FileModel>((fileInfo: FileInfo) => {
|
||||
return this.createFileModel(fileInfo.file, this.rootFolderId, fileInfo.relativeFolder);
|
||||
});
|
||||
|
||||
this.uploadQueue(filteredFiles);
|
||||
}
|
||||
|
||||
private uploadQueue(files: FileModel[]) {
|
||||
let filteredFiles = files
|
||||
.filter(this.isFileAcceptable.bind(this))
|
||||
.filter(this.isFileSizeAcceptable.bind(this));
|
||||
|
||||
if (filteredFiles.length > 0) {
|
||||
this.uploadService.addToQueue(...filteredFiles);
|
||||
this.uploadService.uploadFilesInTheQueue(this.success);
|
||||
this.uploadService.fileUploadError.subscribe((error) => {
|
||||
this.error.emit(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if the given file is allowed by the extension filters
|
||||
*
|
||||
@@ -45,4 +127,56 @@ export abstract class UploadBase {
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates FileModel from File
|
||||
*
|
||||
* @param file
|
||||
*/
|
||||
protected createFileModel(file: File, parentId: string, path: string): FileModel {
|
||||
return new FileModel(file, {
|
||||
comment: this.comment,
|
||||
majorVersion: this.majorVersion,
|
||||
newVersion: this.versioning,
|
||||
parentId: parentId,
|
||||
path: path
|
||||
});
|
||||
}
|
||||
|
||||
protected isFileSizeAllowed(file: FileModel) {
|
||||
let isFileSizeAllowed = true;
|
||||
if (this.isMaxFileSizeDefined()) {
|
||||
isFileSizeAllowed = this.isFileSizeCorrect(file);
|
||||
}
|
||||
|
||||
return isFileSizeAllowed;
|
||||
}
|
||||
|
||||
protected isMaxFileSizeDefined() {
|
||||
return this.maxFilesSize !== undefined && this.maxFilesSize !== null;
|
||||
}
|
||||
|
||||
protected isFileSizeCorrect(file: FileModel) {
|
||||
return this.maxFilesSize >= 0 && file.size <= this.maxFilesSize;
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if the given file is an acceptable size
|
||||
*
|
||||
* @param file FileModel
|
||||
*/
|
||||
private isFileSizeAcceptable(file: FileModel): boolean {
|
||||
let acceptableSize = true;
|
||||
|
||||
if (!this.isFileSizeAllowed(file)) {
|
||||
acceptableSize = false;
|
||||
|
||||
this.translationService.get('FILE_UPLOAD.MESSAGES.EXCEED_MAX_FILE_SIZE', { fileName: file.name }).subscribe((message: string) => {
|
||||
this.error.emit(message);
|
||||
});
|
||||
}
|
||||
|
||||
return acceptableSize;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user