diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.css b/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.css index 7d993f6f16..43ebf44d05 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.css +++ b/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); - color: rgba(0,0,0,.26); + border-bottom: 1px dotted rgba(0, 0, 0, .12); + color: rgba(0, 0, 0, .26); } .display-value-widget__dynamic-table table { @@ -23,21 +23,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; } diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.html index 3dcd5372b5..465a98723c 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.html +++ b/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.html @@ -71,7 +71,12 @@
- +
+ +
+
+ +
attachment {{value}} diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.spec.ts index ae7f5824a4..9bf151601e 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.spec.ts +++ b/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 = ''; - 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: ''; 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: '2', name: 'option 2' } + {id: '1', name: 'option 1'}, + {id: '2', name: 'option 2'} ], params: { field: { @@ -253,8 +256,8 @@ describe('DisplayValueWidget', () => { restUrl: null, value: '100', options: [ - { id: '1', name: 'option 1' }, - { id: '2', name: 'option 2' } + {id: '1', name: 'option 1'}, + {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([ - { id: '1', name: 'option 1' }, - { id: '2', name: 'option 2' } - ]); - observer.complete(); + observer.next([ + {id: '1', name: 'option 1'}, + {id: '2', name: 'option 2'} + ]); + observer.complete(); }) ); - let form = new FormModel({ taskId: '' }); + let form = new FormModel({taskId: ''}); widget.field = new FormFieldModel(form, { type: FormFieldTypes.DISPLAY_VALUE, restUrl: '', value: '2', options: [ - { id: '1', name: 'option 1' }, - { id: '2', name: 'option 2' } + {id: '1', name: 'option 1'}, + {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([ - { id: '1', name: 'option 1' }, - { id: '2', name: 'option 2' } - ]); - observer.complete(); - }) + observer.next([ + {id: '1', name: 'option 1'}, + {id: '2', name: 'option 2'} + ]); + observer.complete(); + }) ); - let form = new FormModel({ taskId: '' }); + let form = new FormModel({taskId: ''}); 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.complete(); - }) + observer.next(null); + observer.complete(); + }) ); - let form = new FormModel({ taskId: '' }); + let form = new FormModel({taskId: ''}); 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: '' }); + let form = new FormModel({taskId: ''}); 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 = ''; - let row = { value: { key: value } }; - let column = { id: 'key' }; + let row = {value: {key: value}}; + let column = {id: 'key'}; expect(widget.getCellValue(row, column)).toBe(value); }); it('should retrieve dropdown cell value', () => { - const value = { id: '1', name: 'one' }; - let row = { value: { key: value } }; - let column = { id: 'key', type: 'Dropdown' }; + const value = {id: '1', name: 'one'}; + let row = {value: {key: value}}; + let column = {id: 'key', type: 'Dropdown'}; expect(widget.getCellValue(row, column)).toBe(value.name); }); it('should fallback to empty cell value for dropdown', () => { - let row = { value: {} }; - let column = { id: 'key', type: 'Dropdown' }; + let row = {value: {}}; + let column = {id: 'key', type: 'Dropdown'}; expect(widget.getCellValue(row, column)).toBe(''); }); it('should retrieve boolean cell value', () => { - let row1 = { value: { key: true } }; - let row2 = { value: { key: 'positive' } }; - let row3 = { value: { key: null } }; - let column = { id: 'key', type: 'Boolean' }; + let row1 = {value: {key: true}}; + let row2 = {value: {key: 'positive'}}; + let row3 = {value: {key: null}}; + let column = {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 = { value: { key: value } }; - let column = { id: 'key', type: 'Date' }; + let row = {value: {key: value}}; + let column = {id: 'key', type: 'Date'}; expect(widget.getCellValue(row, column)).toBe('4-10-2016'); }); it('should fallback to empty cell value for date', () => { - let row = { value: {} }; - let column = { id: 'key', type: 'Date' }; + let row = {value: {}}; + let column = {id: 'key', type: 'Date'}; expect(widget.getCellValue(row, column)).toBe(''); }); it('should retrieve empty text cell value', () => { - let row = { value: {} }; - let column = { id: 'key' }; + let row = {value: {}}; + let column = {id: 'key'}; expect(widget.getCellValue(row, column)).toBe(''); }); it('should prepend default amount currency', () => { const value = '10'; - let row = { value: { key: value } }; - let column = { id: 'key', type: 'Amount' }; + let row = {value: {key: value}}; + let column = {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 = { value: { key: value } }; - let column = { id: 'key', type: 'Amount', amountCurrency: currency }; + let row = {value: {key: value}}; + let column = {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 = { value: { key: value } }; - let column = { id: 'key', type: 'Amount', amountCurrency: currency }; + let row = {value: {key: value}}; + let column = {id: 'key', type: 'Amount', amountCurrency: currency}; const expected = `${currency} 0`; expect(widget.getCellValue(row, column)).toBe(expected); diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.ts index cc739c2d7e..7169b7e2eb 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.ts +++ b/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 => { selected: false, value: obj }); + this.rows = json.value.map(obj => {selected: false, value: obj}); } break; default: diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.spec.ts index e54add2cbe..5a2bc669df 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.spec.ts +++ b/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 authService: AlfrescoAuthenticationService; + let formService: FormService; beforeEach(() => { - settingsService = new AlfrescoSettingsService(); - authService = new AlfrescoAuthenticationService(settingsService, new AlfrescoApiService(), new StorageService()); - widget = new UploadWidget(settingsService, authService); + formService = new FormService(null, null); + widget = new UploadWidget(formService); }); 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(); diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.ts index 2dc1868e5b..f9814ba388 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.ts +++ b/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, - private authService: AlfrescoAuthenticationService) { + constructor(private formService: FormService) { super(); } @@ -64,35 +63,15 @@ export class UploadWidget extends WidgetComponent implements OnInit { let file = files[0]; - this.hasFile = true; - this.fileName = encodeURI(file.name); - this.displayText = file.name; - - let formData: FormData = new FormData(); - formData.append('file', file, this.fileName); - - let xhr: XMLHttpRequest = new XMLHttpRequest(); - - 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); + this.formService.createTemporaryRawRelatedContent(file) + .subscribe((response: any) => { + console.log(response); + this.field.value = [response]; + this.field.json.value = [response]; + }, (error: any) => { + console.error(error); + window.alert('Error uploading file. See console output for more details.'); + }); } } diff --git a/ng2-components/ng2-activiti-form/src/services/form.service.ts b/ng2-components/ng2-activiti-form/src/services/form.service.ts index 5370353656..bcb2ae22f2 100644 --- a/ng2-components/ng2-activiti-form/src/services/form.service.ts +++ b/ng2-components/ng2-activiti-form/src/services/form.service.ts @@ -143,7 +143,7 @@ export class FormService { * @returns {Observable} */ saveTaskForm(taskId: string, formValues: FormValues): Observable { - 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} */ completeTaskForm(taskId: string, formValues: FormValues, outcome?: string): Observable { - 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} + */ + createTemporaryRawRelatedContent(file: any): Observable { + return Observable.fromPromise(this.apiService.getInstance().activiti.contentApi.createTemporaryRawRelatedContent(file)); + } + getRestFieldValues(taskId: string, field: string): Observable { let alfrescoApi = this.apiService.getInstance(); return Observable.fromPromise(alfrescoApi.activiti.taskApi.getRestFieldValues(taskId, field));