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

#612 simple upload widget (activiti form)

Browse Source
This commit is contained in:
Denys Vuika
2016-08-24 21:50:50 +01:00
parent aa4b78e95f
commit 57faab7b5b
7 changed files with 179 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.html
View File

@@ -43,6 +43,9 @@
<div *ngSwitchCase="'readonly-text'">
<display-text-widget [field]="field" (fieldChanged)="fieldChanged($event);"></display-text-widget>
</div>
<div *ngSwitchCase="'upload'">
<upload-widget [field]="field" (fieldChanged)="fieldChanged($event);"></upload-widget>
</div>
<div *ngSwitchDefault>
<span>UNKNOWN WIDGET TYPE: {{field.type}}</span>
</div>

1
ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-types.ts
View File

@@ -23,6 +23,7 @@ export class FormFieldTypes {
static RADIO_BUTTONS: string = 'radio-buttons';
static DISPLAY_VALUE: string = 'readonly';
static READONLY_TEXT: string = 'readonly-text';
static UPLOAD: string = 'upload';
static READONLY_TYPES: string[] = [
FormFieldTypes.HYPERLINK,

57
ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.ts
View File

@@ -129,33 +129,48 @@ export class FormFieldModel extends FormWidgetModel {
}
updateForm() {
if (this.type === FormFieldTypes.DROPDOWN) {
/*
This is needed due to Activiti reading dropdown values as string
but saving back as object: { id: <id>, name: <name> }
*/
if (this.value === 'empty' || this.value === '') {
this.form.values[this.id] = {};
} else {
switch (this.type) {
case FormFieldTypes.DROPDOWN: {
/*
This is needed due to Activiti reading dropdown values as string
but saving back as object: { id: <id>, name: <name> }
*/
if (this.value === 'empty' || this.value === '') {
this.form.values[this.id] = {};
} else {
let entry: FormFieldOption[] = this.options.filter(opt => opt.id === this.value);
if (entry.length > 0) {
this.form.values[this.id] = entry[0];
}
}
break;
}
case FormFieldTypes.RADIO_BUTTONS: {
/*
This is needed due to Activiti issue related to reading radio button values as value string
but saving back as object: { id: <id>, name: <name> }
*/
let entry: FormFieldOption[] = this.options.filter(opt => opt.id === this.value);
if (entry.length > 0) {
this.form.values[this.id] = entry[0];
} else if (this.options.length > 0) {
this.form.values[this.id] = this.options[0];
}
break;
}
} else if (this.type === FormFieldTypes.RADIO_BUTTONS) {
/*
This is needed due to Activiti issue related to reading radio button values as value string
but saving back as object: { id: <id>, name: <name> }
*/
let entry: FormFieldOption[] = this.options.filter(opt => opt.id === this.value);
if (entry.length > 0) {
this.form.values[this.id] = entry[0];
} else if (this.options.length > 0) {
this.form.values[this.id] = this.options[0];
case FormFieldTypes.UPLOAD: {
if (this.value && this.value.length > 0) {
this.form.values[this.id] = `${this.value[0].id}`;
} else {
this.form.values[this.id] = null;
}
break;
}
} else {
if (!FormFieldTypes.isReadOnlyType(this.type)) {
this.form.values[this.id] = this.value;
default: {
if (!FormFieldTypes.isReadOnlyType(this.type)) {
this.form.values[this.id] = this.value;
}
}
}
}

5
ng2-components/ng2-activiti-form/src/components/widgets/index.ts
View File

@@ -27,6 +27,7 @@ import { HyperlinkWidget } from './hyperlink/hyperlink.widget';
import { RadioButtonsWidget } from './radio-buttons/radio-buttons.widget';
import { DisplayValueWidget } from './display-value/display-value.widget';
import { DisplayTextWidget } from './display-text/display-text.widget';
import { UploadWidget } from './upload/upload.widget';
// core
export * from './widget.component';
@@ -46,6 +47,7 @@ export * from './hyperlink/hyperlink.widget';
export * from './radio-buttons/radio-buttons.widget';
export * from './display-value/display-value.widget';
export * from './display-text/display-text.widget';
export * from './upload/upload.widget';
export const CONTAINER_WIDGET_DIRECTIVES: [any] = [
TabsWidget,
@@ -61,7 +63,8 @@ export const PRIMITIVE_WIDGET_DIRECTIVES: [any] = [
HyperlinkWidget,
RadioButtonsWidget,
DisplayValueWidget,
DisplayTextWidget
DisplayTextWidget,
UploadWidget
];

17
ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.css Normal file
View File

@@ -0,0 +1,17 @@
.upload-widget {
width:100%
}
.upload-widget__icon {
float: left;
}
.upload-widget__file {
float: left;
margin-top: 4px;
}
.upload-widget__reset {
float: left;
margin-top: 4px;
}

15
ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.html Normal file
View File

@@ -0,0 +1,15 @@
<div class="upload-widget">
<label [attr.for]="field.id">{{field.name}}</label>
<div>
<i class="material-icons upload-widget__icon">image</i>
<span *ngIf="hasFile" class="upload-widget__file">{{getUploadedFileName()}}</span>
<input *ngIf="!hasFile"
#file
type="file"
[attr.id]="field.id"
class="upload-widget__file"
(change)="onFileChanged($event)">
<button *ngIf="hasFile" (click)="reset(file);" class="upload-widget__reset">X</button>
</div>
</div>

103
ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.ts Normal file
View File

@@ -0,0 +1,103 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Component, OnInit } from '@angular/core';
import { WidgetComponent } from './../widget.component';
import { AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
declare let __moduleName: string;
declare var componentHandler;
@Component({
moduleId: __moduleName,
selector: 'upload-widget',
templateUrl: './upload.widget.html',
styleUrls: ['./upload.widget.css']
})
export class UploadWidget extends WidgetComponent implements OnInit {
constructor(private settingsService: AlfrescoSettingsService,
private authService: AlfrescoAuthenticationService) {
super();
}
hasFile: boolean;
fileName: string;
ngOnInit() {
if (this.field &&
this.field.value &&
this.field.value.length > 0) {
this.hasFile = true;
}
}
getUploadedFileName(): string {
let result = this.fileName;
if (this.field &&
this.field.value &&
this.field.value.length > 0) {
let file = this.field.value[0];
result = file.name;
}
return result;
}
reset() {
this.field.value = null;
this.field.json.value = null;
this.hasFile = false;
}
onFileChanged(event: any) {
let files = event.srcElement.files;
if (files && files.length > 0) {
let file = files[0];
this.hasFile = true;
this.fileName = file.name;
let formData: FormData = new FormData();
formData.append("file", file, file.name);
let xhr: XMLHttpRequest = new XMLHttpRequest();
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);
}
}
}