inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1231 from Alfresco/dev-mromano-1215

Browse Source 
#1215 use alfresco-js-api for upload file
This commit is contained in:
Denys Vuika
2016-12-13 09:24:02 +00:00
committed by GitHub
parent a161827bed b9b9808dd0
commit 53b23bfd31
7 changed files with 111 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -71,7 +71,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>

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

@@ -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: '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: '<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: '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: '<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.complete();
})
observer.next(null);
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 column = <DynamicTableColumn> { id: 'key' };
let row = <DynamicTableRow> {value: {key: value}};
let column = <DynamicTableColumn> {id: 'key'};
expect(widget.getCellValue(row, column)).toBe(value);
});
it('should retrieve dropdown cell value', () => {
const value = { id: '1', name: 'one' };
let row = <DynamicTableRow> { value: { key: value } };
let column = <DynamicTableColumn> { id: 'key', type: 'Dropdown' };
const value = {id: '1', name: 'one'};
let row = <DynamicTableRow> {value: {key: value}};
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 column = <DynamicTableColumn> { id: 'key', type: 'Dropdown' };
let row = <DynamicTableRow> {value: {}};
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 row2 = <DynamicTableRow> { value: { key: 'positive' } };
let row3 = <DynamicTableRow> { value: { key: null } };
let column = <DynamicTableColumn> { id: 'key', type: 'Boolean' };
let row1 = <DynamicTableRow> {value: {key: true}};
let row2 = <DynamicTableRow> {value: {key: 'positive'}};
let row3 = <DynamicTableRow> {value: {key: null}};
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 column = <DynamicTableColumn> { id: 'key', type: 'Date' };
let row = <DynamicTableRow> {value: {key: value}};
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 column = <DynamicTableColumn> { id: 'key', type: 'Date' };
let row = <DynamicTableRow> {value: {}};
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 column = <DynamicTableColumn> { id: 'key' };
let row = <DynamicTableRow> {value: {}};
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 column = <DynamicTableColumn> { id: 'key', type: 'Amount' };
let row = <DynamicTableRow> {value: {key: value}};
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 column = <DynamicTableColumn> { id: 'key', type: 'Amount', amountCurrency: currency };
let row = <DynamicTableRow> {value: {key: value}};
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 column = <DynamicTableColumn> { id: 'key', type: 'Amount', amountCurrency: currency };
let row = <DynamicTableRow> {value: {key: value}};
let column = <DynamicTableColumn> {id: 'key', type: 'Amount', amountCurrency: currency};
const expected = `${currency} 0`;
expect(widget.getCellValue(row, column)).toBe(expected);

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

@@ -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:

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

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

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

@@ -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.');
});
}
}

13
ng2-components/ng2-activiti-form/src/services/form.service.ts
View File

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