From 8a509e3c31b92d39e362e32821de97107fb69e22 Mon Sep 17 00:00:00 2001
From: Maurizio Vitale <maurizio.vitale@alfresco.com>
Date: Tue, 11 Jul 2017 14:12:54 +0100
Subject: [PATCH] [ADF-971] Create task/process attachment should show the new
 button (#2069)

* Remove the drag and drop
Change the design button
Fix the Event with the name inside the Readme

* Fix unit test

* Rollback id button
---
 ...activiti-process-attachments.component.css |  3 ++
 ...ctiviti-process-attachments.component.html |  2 +-
 .../activiti-process-attachments.component.ts |  1 +
 .../activiti-task-attachments.component.css   |  3 ++
 .../activiti-task-attachments.component.ts    |  1 +
 ...df-create-process-attachment.component.css | 22 +++-----------
 ...f-create-process-attachment.component.html | 29 ++++++++-----------
 ...reate-process-attachment.component.spec.ts | 26 ++---------------
 ...adf-create-process-attachment.component.ts |  8 ++---
 .../adf-create-task-attachment.component.css  | 22 +++-----------
 .../adf-create-task-attachment.component.html | 18 +++++-------
 11 files changed, 42 insertions(+), 93 deletions(-)
 create mode 100644 demo-shell-ng2/app/components/activiti/activiti-process-attachments.component.css
 create mode 100644 demo-shell-ng2/app/components/activiti/activiti-task-attachments.component.css

diff --git a/demo-shell-ng2/app/components/activiti/activiti-process-attachments.component.css b/demo-shell-ng2/app/components/activiti/activiti-process-attachments.component.css
new file mode 100644
index 0000000000..5aadf220a0
--- /dev/null
+++ b/demo-shell-ng2/app/components/activiti/activiti-process-attachments.component.css
@@ -0,0 +1,3 @@
+adf-create-process-attachment >>> button {
+    float: right;
+}
diff --git a/demo-shell-ng2/app/components/activiti/activiti-process-attachments.component.html b/demo-shell-ng2/app/components/activiti/activiti-process-attachments.component.html
index 1b87721be8..2fe07f5a1c 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-process-attachments.component.html
+++ b/demo-shell-ng2/app/components/activiti/activiti-process-attachments.component.html
@@ -13,7 +13,7 @@
 
         <adf-create-process-attachment
             [processInstanceId]="processId"
-            (contentCreated)="onFileUploadComplete($event)">
+            (success)="onFileUploadComplete($event)">
         </adf-create-process-attachment>
 
     </div>
diff --git a/demo-shell-ng2/app/components/activiti/activiti-process-attachments.component.ts b/demo-shell-ng2/app/components/activiti/activiti-process-attachments.component.ts
index 22884f45d0..c682a476a5 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-process-attachments.component.ts
+++ b/demo-shell-ng2/app/components/activiti/activiti-process-attachments.component.ts
@@ -22,6 +22,7 @@ import { UploadService } from 'ng2-alfresco-core';
 @Component({
     selector: 'activiti-process-attachments',
     templateUrl: './activiti-process-attachments.component.html',
+    styleUrls: ['./activiti-process-attachments.component.css'],
     providers: [
         { provide: UploadService, useClass: ProcessUploadService }
     ]
diff --git a/demo-shell-ng2/app/components/activiti/activiti-task-attachments.component.css b/demo-shell-ng2/app/components/activiti/activiti-task-attachments.component.css
new file mode 100644
index 0000000000..b2f8142604
--- /dev/null
+++ b/demo-shell-ng2/app/components/activiti/activiti-task-attachments.component.css
@@ -0,0 +1,3 @@
+adf-create-task-attachment >>> button {
+    float: right;
+}
diff --git a/demo-shell-ng2/app/components/activiti/activiti-task-attachments.component.ts b/demo-shell-ng2/app/components/activiti/activiti-task-attachments.component.ts
index 9cbd8f4871..65de0d49d2 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-task-attachments.component.ts
+++ b/demo-shell-ng2/app/components/activiti/activiti-task-attachments.component.ts
@@ -22,6 +22,7 @@ import { UploadService } from 'ng2-alfresco-core';
 @Component({
     selector: 'activiti-task-attachments',
     templateUrl: './activiti-task-attachments.component.html',
+    styleUrls: ['./activiti-task-attachments.component.css'],
     providers: [
         { provide: UploadService, useClass: ProcessUploadService }
     ]
diff --git a/ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.css b/ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.css
index 7371ee4215..cd8f81bc36 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.css
+++ b/ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.css
@@ -1,19 +1,5 @@
-.upload-attachment-container {
-    border: 1px solid rgb(224, 224, 224);
-    background: #fff;
-    text-align: left;
-    border-top: none;
-    padding: 10px;
-    text-align: center;
+.adf-create-attachment {
+    display: inline-block;
+    line-height: 0px;
+    vertical-align: middle;
 }
-
-.drag-area {
-    border: 1px solid #eee;
-    padding: 100px 10px;
-    margin-bottom: 10px;
-}
-
-.upload-attachment-container button {
-    color: rgb(253, 145, 0);
-    opacity: 0.64;
-}
\ No newline at end of file
diff --git a/ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.html b/ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.html
index e9ce0c521d..7489a6d123 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.html
+++ b/ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.html
@@ -1,17 +1,12 @@
-<div class="upload-attachment-container">
-    <div class="drag-area"
-         id="add_new_process_content_area"
-         (upload-files)="onFileUpload($event)"
-         mode="['click', 'drop']"
-         [adf-upload]="true">
-        {{ 'DETAILS.BUTTON.DRAG-ATTACHMENT' | translate }}
-    </div>
-    <button class="mdl-button mdl-js-button mdl-button--raised"
-            id="add_new_process_content_button"
-            [adf-upload]="true"
-            mode="['click']"
-            [multiple]="true"
-            (upload-files)="onFileUpload($event)">
-        {{ 'DETAILS.BUTTON.UPLOAD-ATTACHMENT' | translate }}
-    </button>
-</div>
+<button
+    id="add_new_process_content_button"
+    md-button
+    md-raised-button
+    md-icon-button
+    class="adf-create-attachment"
+    [adf-upload]="true"
+    mode="['click']"
+    [multiple]="true"
+    (upload-files)="onFileUpload($event)">
+    <md-icon>add</md-icon>
+</button>
diff --git a/ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.spec.ts b/ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.spec.ts
index 424813b0bf..8d0c55336d 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.spec.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.spec.ts
@@ -98,7 +98,7 @@ describe('Activiti Process Create Attachment', () => {
     });
 
     it('should emit content created event when the file is uploaded', async(() => {
-        component.contentCreated.subscribe((res) => {
+        component.success.subscribe((res) => {
             expect(res).toBeDefined();
             expect(res).not.toBeNull();
             expect(res.id).toBe(9999);
@@ -113,34 +113,12 @@ describe('Activiti Process Create Attachment', () => {
         });
     }));
 
-    it('should allow user to drag&drop files', async(() => {
-        let dragArea: HTMLElement = <HTMLElement> element.querySelector('#add_new_process_content_area');
-        expect(dragArea).toBeDefined();
-        expect(dragArea).not.toBeNull();
-
-        component.contentCreated.subscribe((res) => {
-            expect(res).toBeDefined();
-            expect(res).not.toBeNull();
-            expect(res.id).toBe(9999);
-        });
-
-        let dropEvent = new CustomEvent('upload-files', customEvent);
-        dragArea.dispatchEvent(dropEvent);
-        fixture.detectChanges();
-
-        jasmine.Ajax.requests.mostRecent().respondWith({
-            'status': 200,
-            contentType: 'application/json',
-            responseText: JSON.stringify(fakeUploadResponse)
-        });
-    }));
-
     it('should allow user to upload files via button', async(() => {
         let buttonUpload: HTMLElement = <HTMLElement> element.querySelector('#add_new_process_content_button');
         expect(buttonUpload).toBeDefined();
         expect(buttonUpload).not.toBeNull();
 
-        component.contentCreated.subscribe((res) => {
+        component.success.subscribe((res) => {
             expect(res).toBeDefined();
             expect(res).not.toBeNull();
             expect(res.id).toBe(9999);
diff --git a/ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.ts b/ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.ts
index d50c80ecd8..cc0c30bf6f 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.ts
@@ -30,10 +30,10 @@ export class ActivitiCreateProcessAttachmentComponent implements OnChanges {
     processInstanceId: string;
 
     @Output()
-    creationError: EventEmitter<any> = new EventEmitter<any>();
+    error: EventEmitter<any> = new EventEmitter<any>();
 
     @Output()
-    contentCreated: EventEmitter<any> = new EventEmitter<any>();
+    success: EventEmitter<any> = new EventEmitter<any>();
 
     constructor(private translateService: AlfrescoTranslationService,
                 private activitiContentService: ActivitiContentService) {
@@ -59,10 +59,10 @@ export class ActivitiCreateProcessAttachmentComponent implements OnChanges {
             };
             this.activitiContentService.createProcessRelatedContent(this.processInstanceId, file, opts).subscribe(
                 (res) => {
-                    this.contentCreated.emit(res);
+                    this.success.emit(res);
                 },
                 (err) => {
-                    this.creationError.emit(err);
+                    this.error.emit(err);
                 });
         }
     }
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/adf-create-task-attachment.component.css b/ng2-components/ng2-activiti-tasklist/src/components/adf-create-task-attachment.component.css
index 7371ee4215..cd8f81bc36 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/adf-create-task-attachment.component.css
+++ b/ng2-components/ng2-activiti-tasklist/src/components/adf-create-task-attachment.component.css
@@ -1,19 +1,5 @@
-.upload-attachment-container {
-    border: 1px solid rgb(224, 224, 224);
-    background: #fff;
-    text-align: left;
-    border-top: none;
-    padding: 10px;
-    text-align: center;
+.adf-create-attachment {
+    display: inline-block;
+    line-height: 0px;
+    vertical-align: middle;
 }
-
-.drag-area {
-    border: 1px solid #eee;
-    padding: 100px 10px;
-    margin-bottom: 10px;
-}
-
-.upload-attachment-container button {
-    color: rgb(253, 145, 0);
-    opacity: 0.64;
-}
\ No newline at end of file
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/adf-create-task-attachment.component.html b/ng2-components/ng2-activiti-tasklist/src/components/adf-create-task-attachment.component.html
index 97b00ef106..fff3cf9d60 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/adf-create-task-attachment.component.html
+++ b/ng2-components/ng2-activiti-tasklist/src/components/adf-create-task-attachment.component.html
@@ -1,15 +1,11 @@
-<div class="upload-attachment-container">
-    <div class="drag-area"
-    (upload-files)="onFileUpload($event)"
-    mode="['click', 'drop']"
-    [adf-upload]="true">
-        {{ 'TASK_DETAILS.BUTTON.DRAG-ATTACHMENT' | translate }}
-    </div>
-    <button class="mdl-button mdl-js-button mdl-button--raised"
+<button
+    md-button
+    md-raised-button
+    md-icon-button
+    class="adf-create-attachment"
     [adf-upload]="true"
     mode="['click']"
     [multiple]="true"
     (upload-files)="onFileUpload($event)">
-        {{ 'TASK_DETAILS.BUTTON.UPLOAD-ATTACHMENT' | translate }}
-    </button>
-</div>
+    <md-icon>add</md-icon>
+</button>