#1215 use alfresco-js-api for upload file

ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.css

@@ -8,8 +8,8 @@
 
 .display-value-widget__dynamic-table .is-disabled {
     background-color: transparent;
-    border-bottom: 1px dotted rgba(0,0,0,.12);
+    border-bottom: 1px dotted rgba(0, 0, 0, .12);
-    color: rgba(0,0,0,.26);
+    color: rgba(0, 0, 0, .26);
 }
 
 .display-value-widget__dynamic-table table {
@@ -17,21 +17,30 @@
 }
 
 .upload-widget {
-    width:100%;
+    width: 100%;
     word-break: break-all;
 }
 
 .upload-widget__icon {
     float: left;
-    color: rgba(0,0,0,.26);
+    color: rgba(0, 0, 0, .26);
 }
 
 .upload-widget__file {
     float: left;
     margin-top: 4px;
-    color: rgba(0,0,0,.26);
+    color: rgba(0, 0, 0, .26);
 }
 
 .upload-widget__label {
-    color: rgba(0,0,0,.26);
+    color: rgba(0, 0, 0, .26);
+}
+
+.img-upload-widget {
+    width: 100px;
+    height: 100px;
+    padding: 2px;
+    border: 1px solid rgba(117, 117, 117, 0.57);
+    box-shadow: 1px 1px 2px #dddddd;
+    background-color: #ffffff;
 }

ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.html

@@ -68,7 +68,12 @@
     </div>
     <div *ngSwitchCase="'upload'">
         <div class="upload-widget" *ngIf="field?.isVisible">
-            <label class="upload-widget__label" [attr.for]="field.id">{{field.name}}</label>
+            <div>
+                <label class="upload-widget__label" [attr.for]="field.id">{{field.name}}</label>
+            </div>
+            <div>
+                <img *ngIf="hasFile" class="img-upload-widget" src="{{settingsService.bpmHost}}/activiti-app/app/rest/content/{{id}}/raw">
+            </div>
             <div>
                 <i *ngIf="hasFile" class="material-icons upload-widget__icon">attachment</i>
                 <span *ngIf="hasFile" class="upload-widget__file">{{value}}</span>

ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.spec.ts

@@ -26,17 +26,20 @@ import { FormFieldTypes } from '../core/form-field-types';
 import { FormModel } from '../core/form.model';
 import { DynamicTableColumn, DynamicTableRow } from './../dynamic-table/dynamic-table.widget.model';
 import { WidgetVisibilityService } from '../../../services/widget-visibility.service';
+import { AlfrescoSettingsService } from 'ng2-alfresco-core';
 
 describe('DisplayValueWidget', () => {
 
     let widget: DisplayValueWidget;
     let formService: FormService;
     let visibilityService: WidgetVisibilityService;
+    let settingsService: AlfrescoSettingsService;
 
     beforeEach(() => {
+        settingsService = new AlfrescoSettingsService();
         formService = new FormService(null, null);
         visibilityService = new WidgetVisibilityService(null, null, null);
-        widget = new DisplayValueWidget(formService, visibilityService);
+        widget = new DisplayValueWidget(formService, visibilityService, settingsService);
     });
 
     it('should require field to setup default value', () => {
@@ -47,7 +50,7 @@ describe('DisplayValueWidget', () => {
 
     it('should take field value on init', () => {
         let value = '<value>';
-        widget.field = new FormFieldModel(null, { value: value });
+        widget.field = new FormFieldModel(null, {value: value});
         widget.field.params = null;
         widget.ngOnInit();
         expect(widget.value).toBe(value);
@@ -83,7 +86,7 @@ describe('DisplayValueWidget', () => {
         expect(widget.value).toBeFalsy();
     });
 
-    it ('should setup [FUNCTIONAL-GROUP] field', () => {
+    it('should setup [FUNCTIONAL-GROUP] field', () => {
         let groupName: '<group>';
         widget.field = new FormFieldModel(null, {
             type: FormFieldTypes.DISPLAY_VALUE,
@@ -147,7 +150,7 @@ describe('DisplayValueWidget', () => {
         widget.field = new FormFieldModel(null, {
             type: FormFieldTypes.DISPLAY_VALUE,
             value: [
-                { name: 'file1' }
+                {name: 'file1'}
             ],
             params: {
                 field: {
@@ -234,8 +237,8 @@ describe('DisplayValueWidget', () => {
             restUrl: null,
             value: '2',
             options: [
-                { id: '1', name: 'option 1' },
+                {id: '1', name: 'option 1'},
-                { id: '2', name: 'option 2' }
+                {id: '2', name: 'option 2'}
             ],
             params: {
                 field: {
@@ -253,8 +256,8 @@ describe('DisplayValueWidget', () => {
             restUrl: null,
             value: '100',
             options: [
-                { id: '1', name: 'option 1' },
+                {id: '1', name: 'option 1'},
-                { id: '2', name: 'option 2' }
+                {id: '2', name: 'option 2'}
             ],
             params: {
                 field: {
@@ -301,23 +304,23 @@ describe('DisplayValueWidget', () => {
     it('should setup rest field values with REST options', () => {
         spyOn(formService, 'getRestFieldValues').and.returnValue(
             Observable.create(observer => {
-                 observer.next([
+                observer.next([
-                    { id: '1', name: 'option 1' },
+                    {id: '1', name: 'option 1'},
-                    { id: '2', name: 'option 2' }
+                    {id: '2', name: 'option 2'}
-                 ]);
+                ]);
-                 observer.complete();
+                observer.complete();
             })
         );
 
-        let form = new FormModel({ taskId: '<id>' });
+        let form = new FormModel({taskId: '<id>'});
 
         widget.field = new FormFieldModel(form, {
             type: FormFieldTypes.DISPLAY_VALUE,
             restUrl: '<url>',
             value: '2',
             options: [
-                { id: '1', name: 'option 1' },
+                {id: '1', name: 'option 1'},
-                { id: '2', name: 'option 2' }
+                {id: '2', name: 'option 2'}
             ],
             params: {
                 field: {
@@ -333,15 +336,15 @@ describe('DisplayValueWidget', () => {
     it('should not setup rest field values with missing REST option', () => {
         spyOn(formService, 'getRestFieldValues').and.returnValue(
             Observable.create(observer => {
-                 observer.next([
+                observer.next([
-                    { id: '1', name: 'option 1' },
+                    {id: '1', name: 'option 1'},
-                    { id: '2', name: 'option 2' }
+                    {id: '2', name: 'option 2'}
-                 ]);
+                ]);
-                 observer.complete();
+                observer.complete();
-             })
+            })
         );
 
-        let form = new FormModel({ taskId: '<id>' });
+        let form = new FormModel({taskId: '<id>'});
 
         widget.field = new FormFieldModel(form, {
             type: FormFieldTypes.DISPLAY_VALUE,
@@ -361,12 +364,12 @@ describe('DisplayValueWidget', () => {
     it('should not setup rest field values with no REST response', () => {
         spyOn(formService, 'getRestFieldValues').and.returnValue(
             Observable.create(observer => {
-                 observer.next(null);
+                observer.next(null);
-                 observer.complete();
+                observer.complete();
-             })
+            })
         );
 
-        let form = new FormModel({ taskId: '<id>' });
+        let form = new FormModel({taskId: '<id>'});
 
         widget.field = new FormFieldModel(form, {
             type: FormFieldTypes.DISPLAY_VALUE,
@@ -391,7 +394,7 @@ describe('DisplayValueWidget', () => {
 
         spyOn(console, 'log').and.stub();
 
-        let form = new FormModel({ taskId: '<id>' });
+        let form = new FormModel({taskId: '<id>'});
 
         widget.field = new FormFieldModel(form, {
             type: FormFieldTypes.DISPLAY_VALUE,
@@ -538,8 +541,7 @@ describe('DisplayValueWidget', () => {
             type: FormFieldTypes.DISPLAY_VALUE,
             value: value,
             params: {
-                field: {
+                field: {}
-                }
             }
         });
         widget.ngOnInit();
@@ -547,7 +549,7 @@ describe('DisplayValueWidget', () => {
     });
 
     it('should setup [DYNAMIC_TABLE] field', () => {
-        let columns = [{ id: '1', visible: false }, { id: '2', visible: true }];
+        let columns = [{id: '1', visible: false}, {id: '2', visible: true}];
         let rows = [{}, {}];
 
         widget.field = new FormFieldModel(null, {
@@ -592,32 +594,32 @@ describe('DisplayValueWidget', () => {
 
     it('should retrieve default cell value', () => {
         const value = '<value>';
-        let row = <DynamicTableRow> { value: { key: value } };
+        let row = <DynamicTableRow> {value: {key: value}};
-        let column = <DynamicTableColumn> { id: 'key' };
+        let column = <DynamicTableColumn> {id: 'key'};
 
         expect(widget.getCellValue(row, column)).toBe(value);
     });
 
     it('should retrieve dropdown cell value', () => {
-        const value = { id: '1', name: 'one' };
+        const value = {id: '1', name: 'one'};
-        let row = <DynamicTableRow> { value: { key: value } };
+        let row = <DynamicTableRow> {value: {key: value}};
-        let column = <DynamicTableColumn> { id: 'key', type: 'Dropdown' };
+        let column = <DynamicTableColumn> {id: 'key', type: 'Dropdown'};
 
         expect(widget.getCellValue(row, column)).toBe(value.name);
     });
 
     it('should fallback to empty cell value for dropdown', () => {
-        let row = <DynamicTableRow> { value: {} };
+        let row = <DynamicTableRow> {value: {}};
-        let column = <DynamicTableColumn> { id: 'key', type: 'Dropdown' };
+        let column = <DynamicTableColumn> {id: 'key', type: 'Dropdown'};
 
         expect(widget.getCellValue(row, column)).toBe('');
     });
 
     it('should retrieve boolean cell value', () => {
-        let row1 = <DynamicTableRow> { value: { key: true } };
+        let row1 = <DynamicTableRow> {value: {key: true}};
-        let row2 = <DynamicTableRow> { value: { key: 'positive' } };
+        let row2 = <DynamicTableRow> {value: {key: 'positive'}};
-        let row3 = <DynamicTableRow> { value: { key: null } };
+        let row3 = <DynamicTableRow> {value: {key: null}};
-        let column = <DynamicTableColumn> { id: 'key', type: 'Boolean' };
+        let column = <DynamicTableColumn> {id: 'key', type: 'Boolean'};
 
         expect(widget.getCellValue(row1, column)).toBe(true);
         expect(widget.getCellValue(row2, column)).toBe(true);
@@ -626,30 +628,30 @@ describe('DisplayValueWidget', () => {
 
     it('should retrieve date cell value', () => {
         const value = '2016-10-04T00:00:00.000Z';
-        let row = <DynamicTableRow> { value: { key: value } };
+        let row = <DynamicTableRow> {value: {key: value}};
-        let column = <DynamicTableColumn> { id: 'key', type: 'Date' };
+        let column = <DynamicTableColumn> {id: 'key', type: 'Date'};
 
         expect(widget.getCellValue(row, column)).toBe('4-10-2016');
     });
 
     it('should fallback to empty cell value for date', () => {
-        let row = <DynamicTableRow> { value: {} };
+        let row = <DynamicTableRow> {value: {}};
-        let column = <DynamicTableColumn> { id: 'key', type: 'Date' };
+        let column = <DynamicTableColumn> {id: 'key', type: 'Date'};
 
         expect(widget.getCellValue(row, column)).toBe('');
     });
 
     it('should retrieve empty text cell value', () => {
-        let row = <DynamicTableRow> { value: {} };
+        let row = <DynamicTableRow> {value: {}};
-        let column = <DynamicTableColumn> { id: 'key' };
+        let column = <DynamicTableColumn> {id: 'key'};
 
         expect(widget.getCellValue(row, column)).toBe('');
     });
 
     it('should prepend default amount currency', () => {
         const value = '10';
-        let row = <DynamicTableRow> { value: { key: value } };
+        let row = <DynamicTableRow> {value: {key: value}};
-        let column = <DynamicTableColumn> { id: 'key', type: 'Amount' };
+        let column = <DynamicTableColumn> {id: 'key', type: 'Amount'};
 
         const expected = `$ ${value}`;
         expect(widget.getCellValue(row, column)).toBe(expected);
@@ -658,8 +660,8 @@ describe('DisplayValueWidget', () => {
     it('should prepend custom amount currency', () => {
         const value = '10';
         const currency = 'GBP';
-        let row = <DynamicTableRow> { value: { key: value } };
+        let row = <DynamicTableRow> {value: {key: value}};
-        let column = <DynamicTableColumn> { id: 'key', type: 'Amount', amountCurrency: currency };
+        let column = <DynamicTableColumn> {id: 'key', type: 'Amount', amountCurrency: currency};
 
         const expected = `${currency} ${value}`;
         expect(widget.getCellValue(row, column)).toBe(expected);
@@ -668,8 +670,8 @@ describe('DisplayValueWidget', () => {
     it('should use zero for missing amount', () => {
         const value = null;
         const currency = 'GBP';
-        let row = <DynamicTableRow> { value: { key: value } };
+        let row = <DynamicTableRow> {value: {key: value}};
-        let column = <DynamicTableColumn> { id: 'key', type: 'Amount', amountCurrency: currency };
+        let column = <DynamicTableColumn> {id: 'key', type: 'Amount', amountCurrency: currency};
 
         const expected = `${currency} 0`;
         expect(widget.getCellValue(row, column)).toBe(expected);

ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.ts

@@ -22,6 +22,7 @@ import { FormService } from '../../../services/form.service';
 import { FormFieldOption } from './../core/form-field-option';
 import { DynamicTableColumn, DynamicTableRow } from './../dynamic-table/dynamic-table.widget.model';
 import { WidgetVisibilityService } from '../../../services/widget-visibility.service';
+import { AlfrescoSettingsService } from 'ng2-alfresco-core';
 
 @Component({
     moduleId: module.id,
@@ -33,6 +34,7 @@ export class DisplayValueWidget extends WidgetComponent implements OnInit, After
 
     value: any;
     fieldType: string;
+    id: any;
 
     // hyperlink
     linkUrl: string;
@@ -47,7 +49,8 @@ export class DisplayValueWidget extends WidgetComponent implements OnInit, After
     hasFile: boolean = false;
 
     constructor(private formService: FormService,
-                private visibilityService: WidgetVisibilityService) {
+                private visibilityService: WidgetVisibilityService,
+                private settingsService: AlfrescoSettingsService) {
         super();
     }
 
@@ -81,6 +84,7 @@ export class DisplayValueWidget extends WidgetComponent implements OnInit, After
                             let files = this.field.value || [];
                             if (files.length > 0) {
                                 this.value = decodeURI(files[0].name);
+                                this.id = files[0].id;
                                 this.hasFile = true;
                             } else {
                                 this.value = null;
@@ -125,7 +129,7 @@ export class DisplayValueWidget extends WidgetComponent implements OnInit, After
                                 this.visibleColumns = this.columns.filter(col => col.visible);
                             }
                             if (json.value) {
-                                this.rows = json.value.map(obj => <DynamicTableRow> { selected: false, value: obj });
+                                this.rows = json.value.map(obj => <DynamicTableRow> {selected: false, value: obj});
                             }
                             break;
                         default:

ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.spec.ts

@@ -16,20 +16,18 @@
  */
 
 import { UploadWidget } from './upload.widget';
-import { AlfrescoSettingsService, AlfrescoAuthenticationService, AlfrescoApiService, StorageService } from 'ng2-alfresco-core';
 import { FormFieldModel } from './../core/form-field.model';
 import { FormFieldTypes } from '../core/form-field-types';
+import { FormService } from '../../../services/form.service';
 
 describe('UploadWidget', () => {
 
     let widget: UploadWidget;
-    let settingsService: AlfrescoSettingsService;
+    let formService: FormService;
-    let authService: AlfrescoAuthenticationService;
 
     beforeEach(() => {
-        settingsService = new AlfrescoSettingsService();
+        formService = new FormService(null, null);
-        authService = new AlfrescoAuthenticationService(settingsService, new AlfrescoApiService(), new StorageService());
+        widget = new UploadWidget(formService);
-        widget = new UploadWidget(settingsService, authService);
     });
 
     it('should setup with field data', () => {
@@ -39,7 +37,7 @@ describe('UploadWidget', () => {
         widget.field = new FormFieldModel(null, {
             type: FormFieldTypes.UPLOAD,
             value: [
-                { name: encodedFileName }
+                {name: encodedFileName}
             ]
         });
 
@@ -73,7 +71,7 @@ describe('UploadWidget', () => {
         widget.field = new FormFieldModel(null, {
             type: FormFieldTypes.UPLOAD,
             value: [
-                { name: 'filename' }
+                {name: 'filename'}
             ]
         });
         widget.reset();

ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.ts

@@ -17,7 +17,7 @@
 
 import { Component, OnInit } from '@angular/core';
 import { WidgetComponent } from './../widget.component';
-import { AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
+import { FormService } from '../../../services/form.service';
 
 @Component({
     moduleId: module.id,
@@ -31,8 +31,7 @@ export class UploadWidget extends WidgetComponent implements OnInit {
     fileName: string;
     displayText: string;
 
-    constructor(private settingsService: AlfrescoSettingsService,
+    constructor(private formService: FormService) {
-                private authService: AlfrescoAuthenticationService) {
         super();
     }
 
@@ -64,35 +63,15 @@ export class UploadWidget extends WidgetComponent implements OnInit {
 
             let file = files[0];
 
-            this.hasFile = true;
+            this.formService.createTemporaryRawRelatedContent(file)
-            this.fileName = encodeURI(file.name);
+                .subscribe((response: any) => {
-            this.displayText = file.name;
+                    console.log(response);
-
+                    this.field.value = [response];
-            let formData: FormData = new FormData();
+                    this.field.json.value = [response];
-            formData.append('file', file, this.fileName);
+                }, (error: any) => {
-
+                    console.error(error);
-            let xhr: XMLHttpRequest = new XMLHttpRequest();
+                    window.alert('Error uploading file. See console output for more details.');
-
+                });
-            xhr.withCredentials = true;
-
-            xhr.onreadystatechange = () => {
-                if (xhr.readyState === 4) {
-                    if (xhr.status === 200) {
-                        let jsonFile = JSON.parse(xhr.response);
-                        console.log(jsonFile);
-                        this.field.value = [jsonFile];
-                        this.field.json.value = [jsonFile];
-                    } else {
-                        console.error(xhr.response);
-                        window.alert('Error uploading file. See console output for more details.');
-                    }
-                }
-            };
-
-            let url = `${this.settingsService.bpmHost}/activiti-app/app/rest/content/raw`;
-            xhr.open('POST', url, true);
-            xhr.setRequestHeader('Authorization', this.authService.getTicketBpm());
-            xhr.send(formData);
         }
     }
 

ng2-components/ng2-activiti-form/src/services/form.service.ts

@@ -143,7 +143,7 @@ export class FormService {
      * @returns {Observable<any>}
      */
     saveTaskForm(taskId: string, formValues: FormValues): Observable<any> {
-        let body = JSON.stringify({ values: formValues });
+        let body = JSON.stringify({values: formValues});
 
         return Observable.fromPromise(this.apiService.getInstance().activiti.taskApi.saveTaskForm(taskId, body))
             .catch(this.handleError);
@@ -157,7 +157,7 @@ export class FormService {
      * @returns {Observable<any>}
      */
     completeTaskForm(taskId: string, formValues: FormValues, outcome?: string): Observable<any> {
-        let data: any = { values: formValues };
+        let data: any = {values: formValues};
         if (outcome) {
             data.outcome = outcome;
         }
@@ -230,6 +230,15 @@ export class FormService {
             .catch(this.handleError);
     }
 
+    /**
+     * Save File
+     * @param file file
+     * @returns {Observable<any>}
+     */
+    createTemporaryRawRelatedContent(file: any): Observable<any> {
+        return Observable.fromPromise(this.apiService.getInstance().activiti.contentApi.createTemporaryRawRelatedContent(file));
+    }
+
     getRestFieldValues(taskId: string, field: string): Observable<any> {
         let alfrescoApi = this.apiService.getInstance();
         return Observable.fromPromise(alfrescoApi.activiti.taskApi.getRestFieldValues(taskId, field));