[ADF-1045] Process Attachments List - Improve the component (#2067)

* Create two different ProcessUpload service on for task one for process because the API are different
Move the attachment task list and process list in different component outside the activiti demo component

* Move the create task/process attachment in the child component
This commit is contained in:
Maurizio Vitale
2017-07-11 10:21:04 +01:00
committed by Eugenio Romano
parent 2a16bf2f34
commit 50fef106a8
14 changed files with 252 additions and 105 deletions

View File

@@ -53,6 +53,8 @@ import {
SearchBarComponent,
LoginDemoComponent,
ActivitiDemoComponent,
ActivitiTaskAttachmentsComponent,
ActivitiProcessAttachmentsComponent,
ActivitiShowDiagramComponent,
ActivitiAppsView,
FormViewer,
@@ -106,6 +108,8 @@ if (process.env.ENV === 'production') {
SearchBarComponent,
LoginDemoComponent,
ActivitiDemoComponent,
ActivitiTaskAttachmentsComponent,
ActivitiProcessAttachmentsComponent,
ActivitiShowDiagramComponent,
ActivitiAppsView,
FormViewer,

View File

@@ -72,30 +72,9 @@
(taskDeleted)="onTaskDeleted($event)">
</activiti-task-details>
<hr>
<div id="attachment-task-list" *ngIf="currentTaskId">
<h5>Attachments</h5>
<div class="adf-no-form-container">
<div class="action-header">
<button [attr.disabled]="isTaskCompleted()" class="mdl-button mdl-js-button" (click)="toggleCreateTakAttach()">
Attach Document
<i class="material-icons">add</i>
</button>
</div>
<adf-upload-drag-area [parentId]="currentTaskId">
<adf-task-attachment-list #taskAttach
*ngIf="currentTaskId"
[taskId]="currentTaskId"
(attachmentClick)="onAttachmentClick($event)">
</adf-task-attachment-list>
</adf-upload-drag-area>
<div *ngIf="isCreateTaskAttachVisible()">
<adf-create-task-attachment *ngIf="currentTaskId"
[taskId]="currentTaskId"
(success)="onFileUploadComplete($event)">
</adf-create-task-attachment>
</div>
</div>
</div>
<activiti-task-attachments
[taskId]="currentTaskId">
</activiti-task-attachments>
</div>
</div>
</div>
@@ -158,25 +137,9 @@
(taskClick)="onProcessDetailsTaskClick($event)">
</activiti-process-instance-details>
<hr>
<div id="attachment-process-list" *ngIf="currentProcessInstanceId">
<h5>Attachments</h5>
<div class="action-header">
<button id="show_process_attach" class="mdl-button mdl-js-button" (click)="toggleCreateProcessAttach()">
Attach Document
<i class="material-icons">add</i>
</button>
</div>
<adf-process-attachment-list *ngIf="currentProcessInstanceId"
[processInstanceId]="currentProcessInstanceId"
(attachmentClick)="onAttachmentClick($event)">
</adf-process-attachment-list>
<div *ngIf="isCreateProcessAttachVisible()">
<adf-create-process-attachment *ngIf="currentProcessInstanceId"
[processInstanceId]="currentProcessInstanceId"
(contentCreated)="onContentCreated()">
</adf-create-process-attachment>
</div>
</div>
<activiti-process-attachments
[processId]="currentProcessInstanceId">
</activiti-process-attachments>
</div>
<div class="mdl-cell mdl-cell--10-col task-column mdl-shadow--2dp" *ngIf="isStartProcessMode()">
<activiti-start-process [appId]="appId" (start)="onStartProcessInstance($event)"></activiti-start-process>

View File

@@ -22,8 +22,7 @@ import {
ActivitiTaskList,
ActivitiTaskDetails,
FilterRepresentationModel,
TaskDetailsEvent,
TaskAttachmentListComponent
TaskDetailsEvent
} from 'ng2-activiti-tasklist';
import {
ActivitiProcessFilters,
@@ -31,8 +30,7 @@ import {
ActivitiProcessInstanceListComponent,
ActivitiStartProcessInstance,
FilterProcessRepresentationModel,
ProcessInstance,
ActivitiProcessAttachmentListComponent
ProcessInstance
} from 'ng2-activiti-processlist';
import { AnalyticsReportListComponent } from 'ng2-activiti-analytics';
import { ActivatedRoute, Router } from '@angular/router';
@@ -42,8 +40,8 @@ import {
ObjectDataRow,
DataSorting
} from 'ng2-alfresco-datatable';
import { AlfrescoApiService, UploadService } from 'ng2-alfresco-core';
import { FormService, FormRenderingService, FormEvent, FormFieldEvent, ProcessUploadService } from 'ng2-activiti-form';
import { AlfrescoApiService } from 'ng2-alfresco-core';
import { FormService, FormRenderingService, FormEvent, FormFieldEvent } from 'ng2-activiti-form';
import { /*CustomEditorComponent*/ CustomStencil01 } from './custom-editor/custom-editor.component';
declare var componentHandler;
@@ -53,10 +51,7 @@ const currentProcessIdNew = '__NEW__';
@Component({
selector: 'activiti-demo',
templateUrl: './activiti-demo.component.html',
styleUrls: ['./activiti-demo.component.css'],
providers: [
{ provide: UploadService, useClass: ProcessUploadService }
]
styleUrls: ['./activiti-demo.component.css']
})
export class ActivitiDemoComponent implements AfterViewInit {
@@ -66,9 +61,6 @@ export class ActivitiDemoComponent implements AfterViewInit {
@ViewChild(ActivitiTaskList)
taskList: ActivitiTaskList;
@ViewChild(TaskAttachmentListComponent)
taskAttachList: TaskAttachmentListComponent;
@ViewChild(ActivitiProcessFilters)
activitiprocessfilter: ActivitiProcessFilters;
@@ -81,9 +73,6 @@ export class ActivitiDemoComponent implements AfterViewInit {
@ViewChild(ActivitiTaskDetails)
activitidetails: ActivitiTaskDetails;
@ViewChild(ActivitiProcessAttachmentListComponent)
processAttachList: ActivitiProcessAttachmentListComponent;
@ViewChild(ActivitiStartProcessInstance)
activitiStartProcess: ActivitiStartProcessInstance;
@@ -115,8 +104,6 @@ export class ActivitiDemoComponent implements AfterViewInit {
sub: Subscription;
blobFile: any;
flag: boolean = true;
createTaskAttach: boolean = false;
createProcessAttach: boolean = false;
dataTasks: ObjectDataTableAdapter;
dataProcesses: ObjectDataTableAdapter;
@@ -125,7 +112,6 @@ export class ActivitiDemoComponent implements AfterViewInit {
private route: ActivatedRoute,
private router: Router,
private apiService: AlfrescoApiService,
private uploadService: UploadService,
private formRenderingService: FormRenderingService,
private formService: FormService) {
this.dataTasks = new ObjectDataTableAdapter();
@@ -175,8 +161,6 @@ export class ActivitiDemoComponent implements AfterViewInit {
});
this.layoutType = ActivitiApps.LAYOUT_GRID;
this.uploadService.fileUploadComplete.subscribe(value => this.onFileUploadComplete(value.data));
}
ngOnDestroy() {
@@ -281,16 +265,6 @@ export class ActivitiDemoComponent implements AfterViewInit {
this.contentName = content.name;
}
onFileUploadComplete(content: any) {
this.taskAttachList.add(content);
}
onAttachmentClick(content: any): void {
this.fileShowed = true;
this.content = content.contentBlob;
this.contentName = content.name;
}
onTaskCreated(data: any): void {
this.currentTaskId = data.parentTaskId;
this.taskList.reload();
@@ -356,32 +330,6 @@ export class ActivitiDemoComponent implements AfterViewInit {
console.log(event);
}
onCreateTaskSuccess(): void {
this.taskAttachList.reload();
this.toggleCreateTakAttach();
}
onContentCreated() {
this.processAttachList.reload();
this.toggleCreateProcessAttach();
}
toggleCreateTakAttach(): void {
this.createTaskAttach = !this.createTaskAttach;
}
isCreateTaskAttachVisible(): boolean {
return this.createTaskAttach;
}
toggleCreateProcessAttach(): void {
this.createProcessAttach = !this.createProcessAttach;
}
isCreateProcessAttachVisible(): boolean {
return this.createProcessAttach;
}
isTaskCompleted(): boolean {
return this.activitidetails.isCompletedTask();
}

View File

@@ -0,0 +1,29 @@
<div id="attachment-process-list" *ngIf="processId">
<h5>Attachments</h5>
<div class="adf-no-form-container">
<adf-upload-drag-area
[parentId]="processId"
[showNotificationBar]="false">
<adf-process-attachment-list #processAttachList
*ngIf="processId"
[processInstanceId]="processId"
(attachmentClick)="onAttachmentClick($event)">
</adf-process-attachment-list>
</adf-upload-drag-area>
<adf-create-process-attachment
[processInstanceId]="processId"
(contentCreated)="onFileUploadComplete($event)">
</adf-create-process-attachment>
</div>
</div>
<div *ngIf="fileShowed">
<alfresco-viewer
[(showViewer)]="fileShowed"
[blobFile]="content"
[displayName]="contentName"
[overlayMode]="true">
</alfresco-viewer>
</div>

View File

@@ -0,0 +1,60 @@
/*!
* @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, ViewChild, Input } from '@angular/core';
import { ActivitiProcessAttachmentListComponent, ProcessUploadService } from 'ng2-activiti-processlist';
import { UploadService } from 'ng2-alfresco-core';
@Component({
selector: 'activiti-process-attachments',
templateUrl: './activiti-process-attachments.component.html',
providers: [
{ provide: UploadService, useClass: ProcessUploadService }
]
})
export class ActivitiProcessAttachmentsComponent {
@Input()
processId: string;
@ViewChild(ActivitiProcessAttachmentListComponent)
processAttachList: ActivitiProcessAttachmentListComponent;
fileShowed: boolean = false;
content: Blob;
contentName: string;
constructor(private uploadService: UploadService) {
}
ngOnInit() {
this.uploadService.fileUploadComplete.subscribe(value => this.onFileUploadComplete(value.data));
}
onFileUploadComplete(content: any) {
this.processAttachList.add(content);
}
onAttachmentClick(content: any): void {
this.fileShowed = true;
this.content = content.contentBlob;
this.contentName = content.name;
}
}

View File

@@ -0,0 +1,29 @@
<div id="attachment-task-list" *ngIf="taskId">
<h5>Attachments</h5>
<div class="adf-no-form-container">
<adf-upload-drag-area
[parentId]="taskId"
[showNotificationBar]="false">
<adf-task-attachment-list #taskAttachList
*ngIf="taskId"
[taskId]="taskId"
(attachmentClick)="onAttachmentClick($event)">
</adf-task-attachment-list>
</adf-upload-drag-area>
<adf-create-task-attachment
[taskId]="taskId"
(success)="onFileUploadComplete($event)">
</adf-create-task-attachment>
</div>
</div>
<div *ngIf="fileShowed">
<alfresco-viewer
[(showViewer)]="fileShowed"
[blobFile]="content"
[displayName]="contentName"
[overlayMode]="true">
</alfresco-viewer>
</div>

View File

@@ -0,0 +1,60 @@
/*!
* @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, ViewChild, Input } from '@angular/core';
import { TaskAttachmentListComponent, ProcessUploadService } from 'ng2-activiti-tasklist';
import { UploadService } from 'ng2-alfresco-core';
@Component({
selector: 'activiti-task-attachments',
templateUrl: './activiti-task-attachments.component.html',
providers: [
{ provide: UploadService, useClass: ProcessUploadService }
]
})
export class ActivitiTaskAttachmentsComponent {
@Input()
taskId: string;
@ViewChild(TaskAttachmentListComponent)
taskAttachList: TaskAttachmentListComponent;
fileShowed: boolean = false;
content: Blob;
contentName: string;
constructor(private uploadService: UploadService) {
}
ngOnInit() {
this.uploadService.fileUploadComplete.subscribe(value => this.onFileUploadComplete(value.data));
}
onFileUploadComplete(content: any) {
this.taskAttachList.add(content);
}
onAttachmentClick(content: any): void {
this.fileShowed = true;
this.content = content.contentBlob;
this.contentName = content.name;
}
}

View File

@@ -21,6 +21,8 @@ export { SearchComponent } from './search/search.component';
export { SearchBarComponent } from './search/search-bar.component';
export { LoginDemoComponent } from './login/login-demo.component';
export { ActivitiDemoComponent } from './activiti/activiti-demo.component';
export { ActivitiTaskAttachmentsComponent } from './activiti/activiti-task-attachments.component';
export { ActivitiProcessAttachmentsComponent } from './activiti/activiti-process-attachments.component';
export { ActivitiShowDiagramComponent } from './activiti/activiti-show-diagram.component';
export { FormViewer } from './activiti/form-viewer.component';
export { WebscriptComponent } from './webscript/webscript.component';