[ADF-741] Add the create task attachment component to the demo shell (#1946)

* Add the create task attachment component to the demo shell

* Add translation keys

* Add return to methods

demo-shell-ng2/app/components/activiti/activiti-demo.component.css

@@ -24,3 +24,17 @@
     text-align: left;
     margin-bottom: 5px;
 }
+
+.adf-no-form-container {    
+    text-align: center;
+    font-weight: 600;
+    font-size: 18px;
+    font-family: Muli;
+    padding: 16px;
+}
+
+.action-header {
+    border: 1px solid rgb(224, 224, 224);
+    background: #fff;
+    text-align: left;
+}

demo-shell-ng2/app/components/activiti/activiti-demo.component.html

@@ -73,10 +73,25 @@
                         </activiti-task-details>
                         <hr>
                         <h5>Attachments</h5>
-                        <adf-task-attachment-list *ngIf="currentTaskId"
+                        <div class="adf-no-form-container">
-                          [taskId]="currentTaskId"
+                            <div class="action-header">
-                          (attachmentClick)="onAttachmentClick($event)">
+                                <button class="mdl-button mdl-js-button" (click)="toggleCreateTakAttach()">
-                        </adf-task-attachment-list>
+                                    Attach Document
+                                    <i class="material-icons">add</i>
+                                </button>
+                            </div>
+                            <adf-task-attachment-list #taskAttach
+                                                      *ngIf="currentTaskId"
+                                                      [taskId]="currentTaskId"
+                                                      (attachmentClick)="onAttachmentClick($event)">
+                            </adf-task-attachment-list>
+                            <div *ngIf="isCreateTaskAttachVisible()">
+                                <adf-create-task-attachment *ngIf="currentTaskId"
+                                                            [taskId]="currentTaskId"
+                                                            (success)="onCreateTaskSuccess  ()">
+                                </adf-create-task-attachment>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>

demo-shell-ng2/app/components/activiti/activiti-demo.component.ts

@@ -21,7 +21,8 @@ import {
     ActivitiFilters,
     ActivitiTaskList,
     FilterRepresentationModel,
-    TaskDetailsEvent
+    TaskDetailsEvent,
+    TaskAttachmentListComponent
 } from 'ng2-activiti-tasklist';
 import {
     ActivitiProcessFilters,
@@ -60,6 +61,9 @@ export class ActivitiDemoComponent implements AfterViewInit {
     @ViewChild(ActivitiTaskList)
     taskList: ActivitiTaskList;
 
+    @ViewChild(TaskAttachmentListComponent)
+    taskAttachList: TaskAttachmentListComponent;
+
     @ViewChild(ActivitiProcessFilters)
     activitiprocessfilter: ActivitiProcessFilters;
 
@@ -100,6 +104,7 @@ export class ActivitiDemoComponent implements AfterViewInit {
     sub: Subscription;
     blobFile: any;
     flag: boolean = true;
+    createTaskAttach: boolean = false;
 
     dataTasks: ObjectDataTableAdapter;
     dataProcesses: ObjectDataTableAdapter;
@@ -157,15 +162,15 @@ export class ActivitiDemoComponent implements AfterViewInit {
         this.sub.unsubscribe();
     }
 
-    onTaskFilterClick(filter: FilterRepresentationModel) {
+    onTaskFilterClick(filter: FilterRepresentationModel): void {
         this.applyTaskFilter(filter);
     }
 
-    onReportClick(event: any) {
+    onReportClick(event: any): void {
         this.report = event;
     }
 
-    onSuccessTaskFilterList(event: any) {
+    onSuccessTaskFilterList(event: any): void {
         this.applyTaskFilter(this.activitifilter.getCurrentFilter());
     }
 
@@ -176,7 +181,7 @@ export class ActivitiDemoComponent implements AfterViewInit {
         }
     }
 
-    onStartTaskSuccess(event: any) {
+    onStartTaskSuccess(event: any): void {
         this.activitifilter.selectFilterWithTask(event.id);
         this.currentTaskId = event.id;
     }
@@ -185,88 +190,88 @@ export class ActivitiDemoComponent implements AfterViewInit {
         this.currentTaskId = this.taskList.getCurrentId();
     }
 
-    onProcessFilterClick(event: FilterProcessRepresentationModel) {
+    onProcessFilterClick(event: FilterProcessRepresentationModel): void {
         this.currentProcessInstanceId = null;
         this.processFilter = event;
     }
 
-    onSuccessProcessFilterList() {
+    onSuccessProcessFilterList(): void {
         this.processFilter = this.activitiprocessfilter.getCurrentFilter();
     }
 
-    onSuccessProcessList(event: any) {
+    onSuccessProcessList(event: any): void {
         this.currentProcessInstanceId = this.processList.getCurrentId();
     }
 
-    onTaskRowClick(taskId) {
+    onTaskRowClick(taskId): void {
         this.currentTaskId = taskId;
     }
 
-    onProcessRowClick(processInstanceId) {
+    onProcessRowClick(processInstanceId): void {
         this.currentProcessInstanceId = processInstanceId;
     }
 
-    onEditReport(name: string) {
+    onEditReport(name: string): void {
         this.analyticsreportlist.reload();
     }
 
-    onReportSaved(reportId) {
+    onReportSaved(reportId): void {
         this.analyticsreportlist.reload(reportId);
     }
 
-    onReportDeleted() {
+    onReportDeleted(): void {
         this.analyticsreportlist.reload();
         this.analyticsreportlist.selectReport(null);
     }
 
-    navigateStartProcess() {
+    navigateStartProcess(): void {
         this.resetProcessFilters();
         this.reloadProcessFilters();
         this.currentProcessInstanceId = currentProcessIdNew;
     }
 
-    onStartProcessInstance(instance: ProcessInstance) {
+    onStartProcessInstance(instance: ProcessInstance): void {
         this.currentProcessInstanceId = instance.id;
         this.activitiStartProcess.reset();
         this.resetProcessFilters();
     }
 
-    isStartProcessMode() {
+    isStartProcessMode(): boolean {
         return this.currentProcessInstanceId === currentProcessIdNew;
     }
 
-    processCancelled(data: any) {
+    processCancelled(data: any): void {
         this.currentProcessInstanceId = null;
         this.processList.reload();
     }
 
-    onSuccessNewProcess(data: any) {
+    onSuccessNewProcess(data: any): void {
         this.processList.reload();
     }
 
-    onFormCompleted(form) {
+    onFormCompleted(form): void {
         this.taskList.reload();
         this.currentTaskId = null;
     }
 
-    onFormContentClick(content: any) {
+    onFormContentClick(content: any): void {
         this.fileShowed = true;
         this.content = content.contentBlob;
         this.contentName = content.name;
     }
 
-    onAttachmentClick(content: any) {
+    onAttachmentClick(content: any): void {
         this.fileShowed = true;
         this.content = content.contentBlob;
         this.contentName = content.name;
     }
 
-    onTaskCreated(data: any) {
+    onTaskCreated(data: any): void {
         this.currentTaskId = data.parentTaskId;
         this.taskList.reload();
     }
 
-    onTaskDeleted(data: any) {
+    onTaskDeleted(data: any): void {
         this.taskList.reload();
     }
 
@@ -290,11 +295,11 @@ export class ActivitiDemoComponent implements AfterViewInit {
         });
     }
 
-    onShowProcessDiagram(event: any) {
+    onShowProcessDiagram(event: any): void {
         this.router.navigate(['/activiti/diagram/' + event.value]);
     }
 
-    onProcessDetailsTaskClick(event: TaskDetailsEvent) {
+    onProcessDetailsTaskClick(event: TaskDetailsEvent): void {
         event.preventDefault();
         this.activeTab = 'tasks';
 
@@ -310,20 +315,33 @@ export class ActivitiDemoComponent implements AfterViewInit {
         this.currentTaskId = taskId;
     }
 
-    private resetProcessFilters() {
+    private resetProcessFilters(): void {
         this.processFilter = null;
     }
 
-    private reloadProcessFilters() {
+    private reloadProcessFilters(): void {
         this.activitiprocessfilter.selectFilter(null);
     }
 
-    onRowClick(event) {
+    onRowClick(event): void {
         console.log(event);
     }
 
-    onRowDblClick(event) {
+    onRowDblClick(event): void {
         console.log(event);
     }
 
+    onCreateTaskSuccess(): void {
+        this.taskAttachList.reload();
+        this.toggleCreateTakAttach();
+    }
+
+    toggleCreateTakAttach(): void {
+        this.createTaskAttach = !this.createTaskAttach;
+    }
+
+    isCreateTaskAttachVisible(): boolean {
+        return this.createTaskAttach;
+    }
+
 }

ng2-components/ng2-activiti-tasklist/README.md

@@ -464,9 +464,9 @@ This component displays attached documents on a specified task
 This component displays Upload Component(Drag and Click) to upload the attachment to a specified task
 
 ```html
-<activiti-create-task-attachment [taskId]="YOUR_TASK_ID" 
+<adf-create-task-attachment [taskId]="YOUR_TASK_ID" 
 (error)="YOUR_CREATE_ATTACHMENT_ERROR_HANDLER"
-(success)="YOUR_CREATE_ATTACHMENT_SUCCESS_HANDLER"></activiti-create-task-attachment>
+(success)="YOUR_CREATE_ATTACHMENT_SUCCESS_HANDLER"></adf-create-task-attachment>
 ```
 
 ![task-create-attachment](docs/assets/task-create-attachment.png)

ng2-components/ng2-activiti-tasklist/src/components/adf-create-task-attachment.component.html

@@ -3,13 +3,13 @@
     (upload-files)="onFileUpload($event)"
     mode="['click', 'drop']"
     [adf-upload]="true">
-        Drop Files Here...
+        {{ 'TASK_DETAILS.BUTTON.DRAG-ATTACHMENT' | translate }}
     </div>
     <button class="mdl-button mdl-js-button mdl-button--raised"
     [adf-upload]="true"
     mode="['click']"
     [multiple]="true"
     (upload-files)="onFileUpload($event)">
-        Upload Attachment
+        {{ 'TASK_DETAILS.BUTTON.UPLOAD-ATTACHMENT' | translate }}
     </button>
 </div>

ng2-components/ng2-activiti-tasklist/src/components/adf-create-task-attachment.component.spec.ts

@@ -22,7 +22,7 @@ import { Observable } from 'rxjs/Rx';
 import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core';
 import { ActivitiContentService } from 'ng2-activiti-form';
 
-import { ActivitiCreateTaskAttachmentComponent } from './activiti-create-task-attachment.component';
+import { ActivitiCreateTaskAttachmentComponent } from './adf-create-task-attachment.component';
 
 describe('Activiti Task Create Attachment', () => {
 

ng2-components/ng2-activiti-tasklist/src/components/adf-create-task-attachment.component.ts

@@ -20,9 +20,9 @@ import { AlfrescoTranslationService } from 'ng2-alfresco-core';
 import { ActivitiContentService } from 'ng2-activiti-form';
 
 @Component({
-    selector: 'activiti-create-task-attachment',
+    selector: 'adf-create-task-attachment',
-    styleUrls: ['./activiti-create-task-attachment.component.css'],
+    styleUrls: ['./adf-create-task-attachment.component.css'],
-    templateUrl: './activiti-create-task-attachment.component.html'
+    templateUrl: './adf-create-task-attachment.component.html'
 })
 export class ActivitiCreateTaskAttachmentComponent implements OnChanges {
 

ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.ts

@@ -55,10 +55,14 @@ export class TaskAttachmentListComponent implements OnChanges {
         }
     }
 
-    reset () {
+    reset(): void {
         this.attachments = [];
     }
 
+    reload(): void {
+        this.loadAttachmentsByTaskId(this.taskId);
+    }
+
     private loadAttachmentsByTaskId(taskId: string) {
         if (taskId) {
             this.reset();

ng2-components/ng2-activiti-tasklist/src/components/index.ts

@@ -27,4 +27,4 @@ export * from './activiti-filters.component';
 export * from './activiti-task-details.component';
 export * from './activiti-start-task.component';
 export * from './activiti-people-search.component';
-export * from './activiti-create-task-attachment.component';
+export * from './adf-create-task-attachment.component';

ng2-components/ng2-activiti-tasklist/src/i18n/en.json

@@ -18,7 +18,9 @@
         },
         "BUTTON": {
             "COMPLETE": "Complete",
-            "CLAIM": "Claim"
+            "CLAIM": "Claim",
+            "DRAG-ATTACHMENT": "Drop Files Here...",
+            "UPLOAD-ATTACHMENT": "Upload Attachment"
         },
         "MESSAGES": {
             "NONE": "No task details found.",