[ADF-1711] The <adf-task-attachment-list component displays drag-and-… (#2716)

* [ADF-1711] The <adf-task-attachment-list component displays drag-and-drop area that is not working

* fix test for remove upload deprecated properties

* remove duplicate identifier
This commit is contained in:
Eugenio Romano
2017-11-23 17:15:01 +00:00
committed by Maurizio Vitale
parent 083f40192c
commit dd7a6565e3
11 changed files with 40 additions and 147 deletions

View File

@@ -3,8 +3,7 @@
<div class="adf-no-form-container"> <div class="adf-no-form-container">
<adf-upload-drag-area <adf-upload-drag-area
[parentId]="processInstanceId" [parentId]="processInstanceId"
[disabled]="isCompletedProcess()" [disabled]="isCompletedProcess()">
[showNotificationBar]="false">
<adf-process-attachment-list #processAttachList <adf-process-attachment-list #processAttachList
*ngIf="processInstanceId" *ngIf="processInstanceId"
[disabled]="isCompletedProcess()" [disabled]="isCompletedProcess()"

View File

@@ -17,16 +17,13 @@
import { Component, Input, OnChanges, OnInit, ViewChild } from '@angular/core'; import { Component, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
import { ProcessInstance, ProcessService , import { ProcessInstance, ProcessService ,
ProcessAttachmentListComponent, ProcessUploadService } from '@alfresco/adf-process-services'; ProcessAttachmentListComponent } from '@alfresco/adf-process-services';
import { UploadService } from '@alfresco/adf-core'; import { UploadService } from '@alfresco/adf-core';
@Component({ @Component({
selector: 'app-process-attachments', selector: 'app-process-attachments',
templateUrl: './process-attachments.component.html', templateUrl: './process-attachments.component.html',
styleUrls: ['./process-attachments.component.css'], styleUrls: ['./process-attachments.component.css']
providers: [
{provide: UploadService, useClass: ProcessUploadService}
]
}) })
export class ProcessAttachmentsComponent implements OnInit, OnChanges { export class ProcessAttachmentsComponent implements OnInit, OnChanges {

View File

@@ -50,7 +50,6 @@ import {
TaskFiltersComponent, TaskFiltersComponent,
TaskListComponent, TaskListComponent,
TaskListService, TaskListService,
TaskAttachmentListComponent,
ProcessUploadService ProcessUploadService
} from '@alfresco/adf-process-services'; } from '@alfresco/adf-process-services';
import { LogService } from '@alfresco/adf-core'; import { LogService } from '@alfresco/adf-core';
@@ -72,8 +71,8 @@ const currentTaskIdNew = '__NEW__';
templateUrl: './process-service.component.html', templateUrl: './process-service.component.html',
styleUrls: ['./process-service.component.scss'], styleUrls: ['./process-service.component.scss'],
providers: [ providers: [
{ provide: UploadService, useClass: ProcessUploadService } { provide: UploadService, useClass: ProcessUploadService }
], ],
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None
}) })
export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit { export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit {
@@ -84,9 +83,6 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
@ViewChild(TaskListComponent) @ViewChild(TaskListComponent)
taskList: TaskListComponent; taskList: TaskListComponent;
@ViewChild(TaskAttachmentListComponent)
taskAttachList: TaskAttachmentListComponent;
@ViewChild(ProcessFiltersComponent) @ViewChild(ProcessFiltersComponent)
activitiprocessfilter: ProcessFiltersComponent; activitiprocessfilter: ProcessFiltersComponent;
@@ -155,8 +151,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
private apiService: AlfrescoApiService, private apiService: AlfrescoApiService,
private logService: LogService, private logService: LogService,
formRenderingService: FormRenderingService, formRenderingService: FormRenderingService,
formService: FormService, formService: FormService) {
private uploadService: UploadService) {
this.dataTasks = new ObjectDataTableAdapter(); this.dataTasks = new ObjectDataTableAdapter();
this.dataTasks.setSorting(new DataSorting('created', 'desc')); this.dataTasks.setSorting(new DataSorting('created', 'desc'));
@@ -256,8 +251,6 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
this.currentProcessInstanceId = null; this.currentProcessInstanceId = null;
}); });
this.layoutType = AppsListComponent.LAYOUT_GRID; this.layoutType = AppsListComponent.LAYOUT_GRID;
this.uploadService.fileUploadComplete.subscribe(value => this.onTaskFileUploadComplete(value.data));
} }
ngOnDestroy() { ngOnDestroy() {
@@ -378,10 +371,6 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
this.processList.reload(); this.processList.reload();
} }
onSuccessNewProcess(data: any): void {
this.processList.reload();
}
onFormCompleted(form): void { onFormCompleted(form): void {
this.currentTaskId = null; this.currentTaskId = null;
this.taskPagination.totalItems--; this.taskPagination.totalItems--;
@@ -482,16 +471,9 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
this.logService.log(event); this.logService.log(event);
} }
isTaskCompleted(): boolean {
return this.activitidetails.isCompletedTask();
}
onAssignTask() { onAssignTask() {
this.taskList.reload(); this.taskList.reload();
this.currentTaskId = null; this.currentTaskId = null;
} }
onTaskFileUploadComplete(content: any) {
this.taskAttachList.add(content);
}
} }

View File

@@ -1,13 +1,12 @@
<div id="attachment-task-list" *ngIf="taskId"> <div id="attachment-task-list" *ngIf="taskId">
<div class="adf-no-form-container"> <div class="adf-no-form-container">
<adf-upload-drag-area <adf-upload-drag-area
[parentId]="currentTaskId" [parentId]="taskId">
[showNotificationBar]="false">
<adf-task-attachment-list #taskAttachList <adf-task-attachment-list #taskAttachList
[disabled]="isCompletedTask()" [disabled]="isCompletedTask()"
(attachmentClick)="onAttachmentClick($event)" (attachmentClick)="onAttachmentClick($event)"
[taskId]="currentTaskId"> [taskId]="taskId">
<div adf-empty-list> <div adf-empty-list>
<div adf-empty-list-header class="adf-empty-list-header"> {{'ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER' | translate}} </div> <div adf-empty-list-header class="adf-empty-list-header"> {{'ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER' | translate}} </div>
<div adf-empty-list-body> <div adf-empty-list-body>

View File

@@ -16,26 +16,23 @@
*/ */
import { Component, Input, OnChanges, OnInit, ViewChild } from '@angular/core'; import { Component, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
import { ProcessUploadService, TaskListService, TaskAttachmentListComponent } from '@alfresco/adf-process-services'; import { TaskListService, TaskAttachmentListComponent } from '@alfresco/adf-process-services';
import { UploadService } from '@alfresco/adf-core'; import { UploadService } from '@alfresco/adf-core';
@Component({ @Component({
selector: 'app-task-attachments', selector: 'app-task-attachments',
templateUrl: './task-attachments.component.html', templateUrl: './task-attachments.component.html',
styleUrls: ['./task-attachments.component.css'], styleUrls: ['./task-attachments.component.css']
providers: [
{ provide: UploadService, useClass: ProcessUploadService }
]
}) })
export class TaskAttachmentsComponent implements OnInit, OnChanges { export class TaskAttachmentsComponent implements OnInit, OnChanges {
@Input()
taskId: string;
@ViewChild(TaskAttachmentListComponent) @ViewChild(TaskAttachmentListComponent)
taskAttachList: TaskAttachmentListComponent; taskAttachList: TaskAttachmentListComponent;
@Input()
taskId: string;
fileShowed: boolean = false; fileShowed: boolean = false;
content: Blob; content: Blob;
contentName: string; contentName: string;
@@ -73,4 +70,5 @@ export class TaskAttachmentsComponent implements OnInit, OnChanges {
isCompletedTask(): boolean { isCompletedTask(): boolean {
return this.taskDetails && this.taskDetails.endDate !== undefined && this.taskDetails.endDate !== null; return this.taskDetails && this.taskDetails.endDate !== undefined && this.taskDetails.endDate !== null;
} }
} }

View File

@@ -40,10 +40,7 @@ export class AppComponent {
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| disabled | boolean | false | Toggle component disabled state | | disabled | boolean | false | Toggle component disabled state |
| **(deprecated)** enabled | boolean | true | Toggle component enabled state |
| **(deprecated)** showNotificationBar | boolean | true | Hide/show notification bar. **Deprecated in 1.6.0: use UploadService events and NotificationService api instead.** |
| rootFolderId | string | '-root-' | The ID of the root folder node. | | rootFolderId | string | '-root-' | The ID of the root folder node. |
| **(deprecated)** currentFolderPath | string | '/' | define the path where the files are uploaded. **Deprecated in 1.6.0: use rootFolderId instead.** |
| versioning | boolean | false | Versioning false is the default uploader behaviour and it renames the file using an integer suffix if there is a name clash. Versioning true to indicate that a major version should be created | | versioning | boolean | false | Versioning false is the default uploader behaviour and it renames the file using an integer suffix if there is a name clash. Versioning true to indicate that a major version should be created |
### Events ### Events

View File

@@ -90,7 +90,7 @@ describe('UploadDragAreaComponent', () => {
describe('When disabled', () => { describe('When disabled', () => {
it('should NOT upload the list of files dropped', () => { it('should NOT upload the list of files dropped', () => {
component.enabled = false; component.disabled = true;
spyOn(uploadService, 'addToQueue'); spyOn(uploadService, 'addToQueue');
spyOn(uploadService, 'uploadFilesInTheQueue'); spyOn(uploadService, 'uploadFilesInTheQueue');
fixture.detectChanges(); fixture.detectChanges();
@@ -104,7 +104,7 @@ describe('UploadDragAreaComponent', () => {
}); });
it('should NOT upload the file dropped', () => { it('should NOT upload the file dropped', () => {
component.enabled = false; component.disabled = true;
spyOn(uploadService, 'addToQueue'); spyOn(uploadService, 'addToQueue');
spyOn(uploadService, 'uploadFilesInTheQueue'); spyOn(uploadService, 'uploadFilesInTheQueue');
fixture.detectChanges(); fixture.detectChanges();
@@ -126,7 +126,7 @@ describe('UploadDragAreaComponent', () => {
}); });
it('should NOT upload the folder dropped', (done) => { it('should NOT upload the folder dropped', (done) => {
component.enabled = false; component.disabled = true;
spyOn(uploadService, 'addToQueue'); spyOn(uploadService, 'addToQueue');
spyOn(uploadService, 'uploadFilesInTheQueue'); spyOn(uploadService, 'uploadFilesInTheQueue');
fixture.detectChanges(); fixture.detectChanges();
@@ -151,7 +151,7 @@ describe('UploadDragAreaComponent', () => {
}); });
it('should NOT upload the files', () => { it('should NOT upload the files', () => {
component.enabled = false; component.disabled = true;
spyOn(uploadService, 'addToQueue'); spyOn(uploadService, 'addToQueue');
spyOn(uploadService, 'uploadFilesInTheQueue'); spyOn(uploadService, 'uploadFilesInTheQueue');
@@ -178,9 +178,7 @@ describe('UploadDragAreaComponent', () => {
}); });
it('should upload the list of files dropped', (done) => { it('should upload the list of files dropped', (done) => {
component.currentFolderPath = '/root-fake-/sites-fake/folder-fake';
component.success = null; component.success = null;
component.showNotificationBar = false;
uploadService.uploadFilesInTheQueue = jasmine.createSpy('uploadFilesInTheQueue'); uploadService.uploadFilesInTheQueue = jasmine.createSpy('uploadFilesInTheQueue');
fixture.detectChanges(); fixture.detectChanges();
@@ -195,24 +193,7 @@ describe('UploadDragAreaComponent', () => {
component.onFilesDropped(filesList); component.onFilesDropped(filesList);
}); });
it('should show the loading messages in the notification bar when the files are dropped', () => {
component.currentFolderPath = '/root-fake-/sites-fake/folder-fake';
component.success = null;
component.showNotificationBar = true;
uploadService.uploadFilesInTheQueue = jasmine.createSpy('uploadFilesInTheQueue');
component.showUndoNotificationBar = jasmine.createSpy('_showUndoNotificationBar');
fixture.detectChanges();
let fileFake = <File> {name: 'fake-name-1', size: 10, webkitRelativePath: 'fake-folder1/fake-name-1.json'};
let filesList = [fileFake];
component.onFilesDropped(filesList);
expect(uploadService.uploadFilesInTheQueue).toHaveBeenCalledWith(null);
expect(component.showUndoNotificationBar).toHaveBeenCalled();
});
it('should upload a file when dropped', () => { it('should upload a file when dropped', () => {
component.currentFolderPath = '/root-fake-/sites-fake/document-library-fake';
component.success = null; component.success = null;
fixture.detectChanges(); fixture.detectChanges();
@@ -234,8 +215,6 @@ describe('UploadDragAreaComponent', () => {
}); });
it('should upload a file with a custom root folder ID when dropped', () => { it('should upload a file with a custom root folder ID when dropped', () => {
component.currentFolderPath = '/root-fake-/sites-fake/document-library-fake';
component.rootFolderId = '-my-';
component.success = null; component.success = null;
fixture.detectChanges(); fixture.detectChanges();
@@ -257,10 +236,6 @@ describe('UploadDragAreaComponent', () => {
}); });
it('should upload a file when user has create permission on target folder', async(() => { it('should upload a file when user has create permission on target folder', async(() => {
component.currentFolderPath = '/root-fake-/sites-fake/document-library-fake';
component.rootFolderId = '-my-';
component.enabled = false;
let fakeItem = { let fakeItem = {
fullPath: '/folder-fake/file-fake.png', fullPath: '/folder-fake/file-fake.png',
isDirectory: false, isDirectory: false,
@@ -287,29 +262,4 @@ describe('UploadDragAreaComponent', () => {
component.onUploadFiles(fakeCustomEvent); component.onUploadFiles(fakeCustomEvent);
})); }));
it('should show notification bar when a file is dropped', () => {
component.currentFolderPath = '/root-fake-/sites-fake/document-library-fake';
component.rootFolderId = '-my-';
component.success = null;
fixture.detectChanges();
spyOn(uploadService, 'uploadFilesInTheQueue');
let itemEntity = {
fullPath: '/folder-fake/file-fake.png',
isDirectory: false,
isFile: true,
name: 'file-fake.png',
file: (callbackFile) => {
let fileFake = new File(['fakefake'], 'file-fake.png', {type: 'image/png'});
callbackFile(fileFake);
}
};
component.onFilesEntityDropped(itemEntity);
fixture.detectChanges();
expect(document.querySelector('snack-bar-container > simple-snack-bar')).not.toBeNull();
});
}); });

View File

@@ -38,31 +38,6 @@ import { Component, EventEmitter, forwardRef, Input, Output, ViewEncapsulation }
}) })
export class UploadDragAreaComponent implements NodePermissionSubject { export class UploadDragAreaComponent implements NodePermissionSubject {
/** @deprecated Deprecated in favor of disabled input property */
@Input()
set enabled(enabled: boolean) {
console.warn('Deprecated: enabled input property should not be used for UploadDragAreaComponent. Please use disabled instead.');
this.disabled = !enabled;
}
/** @deprecated Deprecated in favor of disabled input property */
get enabled(): boolean {
console.warn('Deprecated: enabled input property should not be used for UploadDragAreaComponent. Please use disabled instead.');
return !this.disabled;
}
/** @deprecated Deprecated in 1.6.0, you can use UploadService events and NotificationService api instead. */
@Input()
showNotificationBar: boolean = true;
/** @deprecated Deprecated in 1.6.0, this property is not used for couple of releases already. Use rootFolderId instead. */
@Input()
currentFolderPath: string = '/';
/** @deprecated Deprecated in 1.6.2, this property is not used for couple of releases already. Use parentId instead. */
@Input()
rootFolderId: string = '-root-';
@Input() @Input()
disabled: boolean = false; disabled: boolean = false;
@@ -90,14 +65,10 @@ export class UploadDragAreaComponent implements NodePermissionSubject {
const fileModels = files.map(file => new FileModel(file, { const fileModels = files.map(file => new FileModel(file, {
newVersion: this.versioning, newVersion: this.versioning,
path: '/', path: '/',
parentId: this.parentId || this.rootFolderId parentId: this.parentId
})); }));
this.uploadService.addToQueue(...fileModels); this.uploadService.addToQueue(...fileModels);
this.uploadService.uploadFilesInTheQueue(this.success); this.uploadService.uploadFilesInTheQueue(this.success);
let latestFilesAdded = this.uploadService.getQueue();
if (this.showNotificationBar) {
this.showUndoNotificationBar(latestFilesAdded);
}
} }
} }
@@ -111,15 +82,12 @@ export class UploadDragAreaComponent implements NodePermissionSubject {
item.file((file: File) => { item.file((file: File) => {
const fileModel = new FileModel(file, { const fileModel = new FileModel(file, {
newVersion: this.versioning, newVersion: this.versioning,
parentId: this.parentId || this.rootFolderId, parentId: this.parentId,
path: item.fullPath.replace(item.name, '') path: item.fullPath.replace(item.name, '')
}); });
this.uploadService.addToQueue(fileModel); this.uploadService.addToQueue(fileModel);
this.uploadService.uploadFilesInTheQueue(this.success); this.uploadService.uploadFilesInTheQueue(this.success);
}); });
if (this.showNotificationBar) {
this.showUndoNotificationBar(item);
}
} }
} }
@@ -134,16 +102,11 @@ export class UploadDragAreaComponent implements NodePermissionSubject {
let files = entries.map(entry => { let files = entries.map(entry => {
return new FileModel(entry.file, { return new FileModel(entry.file, {
newVersion: this.versioning, newVersion: this.versioning,
parentId: this.parentId || this.rootFolderId, parentId: this.parentId,
path: entry.relativeFolder path: entry.relativeFolder
}); });
}); });
this.uploadService.addToQueue(...files); this.uploadService.addToQueue(...files);
/* @deprecated in 1.6.0 */
if (this.showNotificationBar) {
let latestFilesAdded = this.uploadService.getQueue();
this.showUndoNotificationBar(latestFilesAdded);
}
this.uploadService.uploadFilesInTheQueue(this.success); this.uploadService.uploadFilesInTheQueue(this.success);
}); });
} }
@@ -191,9 +154,9 @@ export class UploadDragAreaComponent implements NodePermissionSubject {
if (isAllowed) { if (isAllowed) {
let files: FileInfo[] = event.detail.files; let files: FileInfo[] = event.detail.files;
if (files && files.length > 0) { if (files && files.length > 0) {
let parentId = this.parentId || this.rootFolderId; let parentId = this.parentId;
if (event.detail.data && event.detail.data.obj.entry.isFolder) { if (event.detail.data && event.detail.data.obj.entry.isFolder) {
parentId = event.detail.data.obj.entry.id || this.parentId || this.rootFolderId; parentId = event.detail.data.obj.entry.id || this.parentId;
} }
const fileModels = files.map(fileInfo => new FileModel(fileInfo.file, { const fileModels = files.map(fileInfo => new FileModel(fileInfo.file, {
newVersion: this.versioning, newVersion: this.versioning,
@@ -214,10 +177,6 @@ export class UploadDragAreaComponent implements NodePermissionSubject {
if (files.length) { if (files.length) {
this.uploadService.addToQueue(...files); this.uploadService.addToQueue(...files);
this.uploadService.uploadFilesInTheQueue(this.success); this.uploadService.uploadFilesInTheQueue(this.success);
let latestFilesAdded = this.uploadService.getQueue();
if (this.showNotificationBar) {
this.showUndoNotificationBar(latestFilesAdded);
}
} }
} }

View File

@@ -17,12 +17,16 @@
import { ContentService, ThumbnailService } from '@alfresco/adf-core'; import { ContentService, ThumbnailService } from '@alfresco/adf-core';
import { Component, EventEmitter, Input, NgZone, OnChanges, Output, SimpleChanges } from '@angular/core'; import { Component, EventEmitter, Input, NgZone, OnChanges, Output, SimpleChanges } from '@angular/core';
import { ProcessContentService } from '@alfresco/adf-core'; import { ProcessContentService, UploadService } from '@alfresco/adf-core';
import { ProcessUploadService } from '../task-list/services/process-upload.service';
@Component({ @Component({
selector: 'adf-process-attachment-list', selector: 'adf-process-attachment-list',
styleUrls: ['./process-attachment-list.component.scss'], styleUrls: ['./process-attachment-list.component.scss'],
templateUrl: './process-attachment-list.component.html' templateUrl: './process-attachment-list.component.html',
providers: [
{ provide: UploadService, useClass: ProcessUploadService }
]
}) })
export class ProcessAttachmentListComponent implements OnChanges { export class ProcessAttachmentListComponent implements OnChanges {

View File

@@ -17,13 +17,17 @@
import { ContentService, ThumbnailService } from '@alfresco/adf-core'; import { ContentService, ThumbnailService } from '@alfresco/adf-core';
import { AfterViewInit, Component, ElementRef, EventEmitter, Input, NgZone, OnChanges, Output, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core'; import { AfterViewInit, Component, ElementRef, EventEmitter, Input, NgZone, OnChanges, Output, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
import { ProcessContentService } from '@alfresco/adf-core'; import { ProcessContentService, UploadService } from '@alfresco/adf-core';
import { ProcessUploadService } from '../task-list/services/process-upload.service';
@Component({ @Component({
selector: 'adf-task-attachment-list', selector: 'adf-task-attachment-list',
styleUrls: ['./task-attachment-list.component.scss'], styleUrls: ['./task-attachment-list.component.scss'],
templateUrl: './task-attachment-list.component.html', templateUrl: './task-attachment-list.component.html',
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None,
providers: [
{ provide: UploadService, useClass: ProcessUploadService }
]
}) })
export class TaskAttachmentListComponent implements OnChanges, AfterViewInit { export class TaskAttachmentListComponent implements OnChanges, AfterViewInit {

View File

@@ -35,7 +35,11 @@ export class ProcessUploadService extends UploadService {
isRelatedContent: true isRelatedContent: true
}; };
let taskId = file.options.parentId; let taskId = file.options.parentId;
return this.instanceApi.getInstance().activiti.contentApi.createRelatedContentOnTask(taskId, file.file, opts).catch(err => this.handleError(err)); let promise = this.instanceApi.getInstance().activiti.contentApi.createRelatedContentOnTask(taskId, file.file, opts);
promise.catch(err => this.handleError(err));
return promise;
} }
private handleError(error: any) { private handleError(error: any) {