[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

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

@@ -0,0 +1,3 @@
+adf-create-process-attachment >>> button {
+    float: right;
+}

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>

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 }
     ]

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

@@ -0,0 +1,3 @@
+adf-create-task-attachment >>> button {
+    float: right;
+}

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 }
     ]

ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.css

@@ -1,19 +1,5 @@
-.upload-attachment-container {
+.adf-create-attachment {
-    border: 1px solid rgb(224, 224, 224);
+    display: inline-block;
-    background: #fff;
+    line-height: 0px;
-    text-align: left;
+    vertical-align: middle;
-    border-top: none;
-    padding: 10px;
-    text-align: center;
 }
-
-.drag-area {
-    border: 1px solid #eee;
-    padding: 100px 10px;
-    margin-bottom: 10px;
-}
-
-.upload-attachment-container button {
-    color: rgb(253, 145, 0);
-    opacity: 0.64;
-}

ng2-components/ng2-activiti-processlist/src/components/adf-create-process-attachment.component.html

@@ -1,17 +1,12 @@
-<div class="upload-attachment-container">
+<button
-    <div class="drag-area"
+    id="add_new_process_content_button"
-         id="add_new_process_content_area"
+    md-button
-         (upload-files)="onFileUpload($event)"
+    md-raised-button
-         mode="['click', 'drop']"
+    md-icon-button
-         [adf-upload]="true">
+    class="adf-create-attachment"
-        {{ 'DETAILS.BUTTON.DRAG-ATTACHMENT' | translate }}
+    [adf-upload]="true"
-    </div>
+    mode="['click']"
-    <button class="mdl-button mdl-js-button mdl-button--raised"
+    [multiple]="true"
-            id="add_new_process_content_button"
+    (upload-files)="onFileUpload($event)">
-            [adf-upload]="true"
+    <md-icon>add</md-icon>
-            mode="['click']"
+</button>
-            [multiple]="true"
-            (upload-files)="onFileUpload($event)">
-        {{ 'DETAILS.BUTTON.UPLOAD-ATTACHMENT' | translate }}
-    </button>
-</div>

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);

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);
                 });
         }
     }

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

@@ -1,19 +1,5 @@
-.upload-attachment-container {
+.adf-create-attachment {
-    border: 1px solid rgb(224, 224, 224);
+    display: inline-block;
-    background: #fff;
+    line-height: 0px;
-    text-align: left;
+    vertical-align: middle;
-    border-top: none;
-    padding: 10px;
-    text-align: center;
 }
-
-.drag-area {
-    border: 1px solid #eee;
-    padding: 100px 10px;
-    margin-bottom: 10px;
-}
-
-.upload-attachment-container button {
-    color: rgb(253, 145, 0);
-    opacity: 0.64;
-}

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

@@ -1,15 +1,11 @@
-<div class="upload-attachment-container">
+<button
-    <div class="drag-area"
+    md-button
-    (upload-files)="onFileUpload($event)"
+    md-raised-button
-    mode="['click', 'drop']"
+    md-icon-button
-    [adf-upload]="true">
+    class="adf-create-attachment"
-        {{ '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)">
-        {{ 'TASK_DETAILS.BUTTON.UPLOAD-ATTACHMENT' | translate }}
+    <md-icon>add</md-icon>
-    </button>
+</button>
-</div>