diff --git a/demo-shell-ng2/app/app.component.html b/demo-shell-ng2/app/app.component.html index a2f7802341..47978f9fda 100644 --- a/demo-shell-ng2/app/app.component.html +++ b/demo-shell-ng2/app/app.component.html @@ -20,6 +20,7 @@ Home DocumentList Process Services + Form Login Settings diff --git a/demo-shell-ng2/app/app.module.ts b/demo-shell-ng2/app/app.module.ts index d11bc58579..fbef11c1c8 100644 --- a/demo-shell-ng2/app/app.module.ts +++ b/demo-shell-ng2/app/app.module.ts @@ -60,7 +60,8 @@ import { AboutComponent, FilesComponent, FormNodeViewer, - SettingsComponent + SettingsComponent, + FormDemoComponent } from './components/index'; let appConfigFile = 'app.config-dev.json'; @@ -113,7 +114,8 @@ if (process.env.ENV === 'production') { FilesComponent, FormNodeViewer, CreateFolderDialog, - SettingsComponent + SettingsComponent, + FormDemoComponent ], providers: [ { provide: AppConfigService, useClass: DebugAppConfigService } diff --git a/demo-shell-ng2/app/app.routes.ts b/demo-shell-ng2/app/app.routes.ts index 768b151259..b8dc4a14b9 100644 --- a/demo-shell-ng2/app/app.routes.ts +++ b/demo-shell-ng2/app/app.routes.ts @@ -34,7 +34,8 @@ import { AboutComponent, FormViewer, FormNodeViewer, - SettingsComponent + SettingsComponent, + FormDemoComponent } from './components/index'; import { UploadButtonComponent } from 'ng2-alfresco-upload'; @@ -130,7 +131,8 @@ export const appRoutes: Routes = [ canActivate: [AuthGuardEcm] }, { path: 'about', component: AboutComponent }, - { path: 'settings', component: SettingsComponent } + { path: 'settings', component: SettingsComponent }, + { path: 'form', component: FormDemoComponent } ]; export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); diff --git a/demo-shell-ng2/app/components/form/demo-form.ts b/demo-shell-ng2/app/components/form/demo-form.ts new file mode 100644 index 0000000000..5e58ce8e5b --- /dev/null +++ b/demo-shell-ng2/app/components/form/demo-form.ts @@ -0,0 +1,1121 @@ +/*! + * @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. + */ + +export class DemoForm { + + static getDefinition(): any { + return { + 'id': 3003, + 'name': 'demo-01', + 'taskId': '7501', + 'taskName': 'Demo Form 01', + 'tabs': [ + { + 'id': 'tab1', + 'title': 'Text', + 'visibilityCondition': null + }, + { + 'id': 'tab2', + 'title': 'Misc', + 'visibilityCondition': null + } + ], + 'fields': [ + { + 'fieldType': 'ContainerRepresentation', + 'id': '1488274019966', + 'name': 'Label', + 'type': 'container', + 'value': null, + 'required': false, + 'readOnly': false, + 'overrideId': false, + 'colspan': 1, + 'placeholder': null, + 'minLength': 0, + 'maxLength': 0, + 'minValue': null, + 'maxValue': null, + 'regexPattern': null, + 'optionType': null, + 'hasEmptyValue': null, + 'options': null, + 'restUrl': null, + 'restResponsePath': null, + 'restIdProperty': null, + 'restLabelProperty': null, + 'tab': null, + 'className': null, + 'dateDisplayFormat': null, + 'layout': null, + 'sizeX': 2, + 'sizeY': 1, + 'row': -1, + 'col': -1, + 'visibilityCondition': null, + 'numberOfColumns': 2, + 'fields': { + '1': [], + '2': [] + } + }, + { + 'fieldType': 'ContainerRepresentation', + 'id': 'section4', + 'name': 'Section 4', + 'type': 'group', + 'value': null, + 'required': false, + 'readOnly': false, + 'overrideId': false, + 'colspan': 1, + 'placeholder': null, + 'minLength': 0, + 'maxLength': 0, + 'minValue': null, + 'maxValue': null, + 'regexPattern': null, + 'optionType': null, + 'hasEmptyValue': null, + 'options': null, + 'restUrl': null, + 'restResponsePath': null, + 'restIdProperty': null, + 'restLabelProperty': null, + 'tab': 'tab2', + 'className': null, + 'dateDisplayFormat': null, + 'layout': { + 'row': -1, + 'column': -1, + 'colspan': 2 + }, + 'sizeX': 2, + 'sizeY': 1, + 'row': -1, + 'col': -1, + 'visibilityCondition': null, + 'numberOfColumns': 2, + 'fields': { + '1': [ + { + 'fieldType': 'FormFieldRepresentation', + 'id': 'label8', + 'name': 'Label8', + 'type': 'people', + 'value': null, + 'required': false, + 'readOnly': false, + 'overrideId': false, + 'colspan': 1, + 'placeholder': null, + 'minLength': 0, + 'maxLength': 0, + 'minValue': null, + 'maxValue': null, + 'regexPattern': null, + 'optionType': null, + 'hasEmptyValue': null, + 'options': null, + 'restUrl': null, + 'restResponsePath': null, + 'restIdProperty': null, + 'restLabelProperty': null, + 'tab': 'tab2', + 'className': null, + 'params': { + 'existingColspan': 1, + 'maxColspan': 2 + }, + 'dateDisplayFormat': null, + 'layout': { + 'row': -1, + 'column': -1, + 'colspan': 1 + }, + 'sizeX': 1, + 'sizeY': 1, + 'row': -1, + 'col': -1, + 'visibilityCondition': null + }, + { + 'fieldType': 'FormFieldRepresentation', + 'id': 'label13', + 'name': 'Label13', + 'type': 'functional-group', + 'value': null, + 'required': false, + 'readOnly': false, + 'overrideId': false, + 'colspan': 1, + 'placeholder': null, + 'minLength': 0, + 'maxLength': 0, + 'minValue': null, + 'maxValue': null, + 'regexPattern': null, + 'optionType': null, + 'hasEmptyValue': null, + 'options': null, + 'restUrl': null, + 'restResponsePath': null, + 'restIdProperty': null, + 'restLabelProperty': null, + 'tab': 'tab2', + 'className': null, + 'params': { + 'existingColspan': 1, + 'maxColspan': 2 + }, + 'dateDisplayFormat': null, + 'layout': { + 'row': -1, + 'column': -1, + 'colspan': 1 + }, + 'sizeX': 1, + 'sizeY': 1, + 'row': -1, + 'col': -1, + 'visibilityCondition': null + }, + { + 'fieldType': 'FormFieldRepresentation', + 'id': 'label18', + 'name': 'Label18', + 'type': 'readonly', + 'value': null, + 'required': false, + 'readOnly': false, + 'overrideId': false, + 'colspan': 1, + 'placeholder': null, + 'minLength': 0, + 'maxLength': 0, + 'minValue': null, + 'maxValue': null, + 'regexPattern': null, + 'optionType': null, + 'hasEmptyValue': null, + 'options': null, + 'restUrl': null, + 'restResponsePath': null, + 'restIdProperty': null, + 'restLabelProperty': null, + 'tab': 'tab2', + 'className': null, + 'params': { + 'existingColspan': 1, + 'maxColspan': 2 + }, + 'dateDisplayFormat': null, + 'layout': { + 'row': -1, + 'column': -1, + 'colspan': 1 + }, + 'sizeX': 1, + 'sizeY': 1, + 'row': -1, + 'col': -1, + 'visibilityCondition': null + }, + { + 'fieldType': 'FormFieldRepresentation', + 'id': 'label19', + 'name': 'Label19', + 'type': 'readonly-text', + 'value': 'Display text as part of the form', + 'required': false, + 'readOnly': false, + 'overrideId': false, + 'colspan': 1, + 'placeholder': null, + 'minLength': 0, + 'maxLength': 0, + 'minValue': null, + 'maxValue': null, + 'regexPattern': null, + 'optionType': null, + 'hasEmptyValue': null, + 'options': null, + 'restUrl': null, + 'restResponsePath': null, + 'restIdProperty': null, + 'restLabelProperty': null, + 'tab': 'tab2', + 'className': null, + 'params': { + 'existingColspan': 1, + 'maxColspan': 2 + }, + 'dateDisplayFormat': null, + 'layout': { + 'row': -1, + 'column': -1, + 'colspan': 1 + }, + 'sizeX': 1, + 'sizeY': 1, + 'row': -1, + 'col': -1, + 'visibilityCondition': null + } + ], + '2': [ + { + 'fieldType': 'HyperlinkRepresentation', + 'id': 'label15', + 'name': 'Label15', + 'type': 'hyperlink', + 'value': null, + 'required': false, + 'readOnly': false, + 'overrideId': false, + 'colspan': 1, + 'placeholder': null, + 'minLength': 0, + 'maxLength': 0, + 'minValue': null, + 'maxValue': null, + 'regexPattern': null, + 'optionType': null, + 'hasEmptyValue': null, + 'options': null, + 'restUrl': null, + 'restResponsePath': null, + 'restIdProperty': null, + 'restLabelProperty': null, + 'tab': 'tab2', + 'className': null, + 'params': { + 'existingColspan': 1, + 'maxColspan': 1 + }, + 'dateDisplayFormat': null, + 'layout': { + 'row': -1, + 'column': -1, + 'colspan': 1 + }, + 'sizeX': 1, + 'sizeY': 1, + 'row': -1, + 'col': -1, + 'visibilityCondition': null, + 'hyperlinkUrl': 'www.google.com', + 'displayText': null + }, + { + 'fieldType': 'AttachFileFieldRepresentation', + 'id': 'label16', + 'name': 'Label16', + 'type': 'upload', + 'value': [], + 'required': false, + 'readOnly': false, + 'overrideId': false, + 'colspan': 1, + 'placeholder': null, + 'minLength': 0, + 'maxLength': 0, + 'minValue': null, + 'maxValue': null, + 'regexPattern': null, + 'optionType': null, + 'hasEmptyValue': null, + 'options': null, + 'restUrl': null, + 'restResponsePath': null, + 'restIdProperty': null, + 'restLabelProperty': null, + 'tab': 'tab2', + 'className': null, + 'params': { + 'existingColspan': 1, + 'maxColspan': 1, + 'fileSource': { + 'serviceId': 'all-file-sources', + 'name': 'All file sources' + } + }, + 'dateDisplayFormat': null, + 'layout': { + 'row': -1, + 'column': -1, + 'colspan': 1 + }, + 'sizeX': 1, + 'sizeY': 1, + 'row': -1, + 'col': -1, + 'visibilityCondition': null, + 'metaDataColumnDefinitions': null + }, + { + 'fieldType': 'FormFieldRepresentation', + 'id': 'label17', + 'name': 'Label17', + 'type': 'select-folder', + 'value': null, + 'required': false, + 'readOnly': false, + 'overrideId': false, + 'colspan': 1, + 'placeholder': null, + 'minLength': 0, + 'maxLength': 0, + 'minValue': null, + 'maxValue': null, + 'regexPattern': null, + 'optionType': null, + 'hasEmptyValue': null, + 'options': null, + 'restUrl': null, + 'restResponsePath': null, + 'restIdProperty': null, + 'restLabelProperty': null, + 'tab': 'tab2', + 'className': null, + 'params': { + 'existingColspan': 1, + 'maxColspan': 1, + 'folderSource': { + 'serviceId': 'alfresco-1', + 'name': 'Alfresco 5.2 Local', + 'metaDataAllowed': true + } + }, + 'dateDisplayFormat': null, + 'layout': { + 'row': -1, + 'column': -1, + 'colspan': 1 + }, + 'sizeX': 1, + 'sizeY': 1, + 'row': -1, + 'col': -1, + 'visibilityCondition': null + } + ] + } + }, + { + 'fieldType': 'DynamicTableRepresentation', + 'id': 'label14', + 'name': 'Label14', + 'type': 'dynamic-table', + 'value': null, + 'required': false, + 'readOnly': false, + 'overrideId': false, + 'colspan': 1, + 'placeholder': null, + 'minLength': 0, + 'maxLength': 0, + 'minValue': null, + 'maxValue': null, + 'regexPattern': null, + 'optionType': null, + 'hasEmptyValue': null, + 'options': null, + 'restUrl': null, + 'restResponsePath': null, + 'restIdProperty': null, + 'restLabelProperty': null, + 'tab': 'tab2', + 'className': null, + 'params': { + 'existingColspan': 1, + 'maxColspan': 1 + }, + 'dateDisplayFormat': null, + 'layout': { + 'row': -1, + 'column': -1, + 'colspan': 2 + }, + 'sizeX': 2, + 'sizeY': 2, + 'row': -1, + 'col': -1, + 'visibilityCondition': null, + 'columnDefinitions': [ + { + 'id': 'id', + 'name': 'id', + 'type': 'String', + 'value': null, + 'optionType': null, + 'options': null, + 'restResponsePath': null, + 'restUrl': null, + 'restIdProperty': null, + 'restLabelProperty': null, + 'amountCurrency': null, + 'amountEnableFractions': false, + 'required': true, + 'editable': true, + 'sortable': true, + 'visible': true, + 'endpoint': null, + 'requestHeaders': null + }, + { + 'id': 'name', + 'name': 'name', + 'type': 'String', + 'value': null, + 'optionType': null, + 'options': null, + 'restResponsePath': null, + 'restUrl': null, + 'restIdProperty': null, + 'restLabelProperty': null, + 'amountCurrency': null, + 'amountEnableFractions': false, + 'required': true, + 'editable': true, + 'sortable': true, + 'visible': true, + 'endpoint': null, + 'requestHeaders': null + } + ] + }, + { + 'fieldType': 'ContainerRepresentation', + 'id': 'section1', + 'name': 'Section 1', + 'type': 'group', + 'value': null, + 'required': false, + 'readOnly': false, + 'overrideId': false, + 'colspan': 1, + 'placeholder': null, + 'minLength': 0, + 'maxLength': 0, + 'minValue': null, + 'maxValue': null, + 'regexPattern': null, + 'optionType': null, + 'hasEmptyValue': null, + 'options': null, + 'restUrl': null, + 'restResponsePath': null, + 'restIdProperty': null, + 'restLabelProperty': null, + 'tab': 'tab1', + 'className': null, + 'dateDisplayFormat': null, + 'layout': { + 'row': -1, + 'column': -1, + 'colspan': 2 + }, + 'sizeX': 2, + 'sizeY': 1, + 'row': -1, + 'col': -1, + 'visibilityCondition': null, + 'numberOfColumns': 2, + 'fields': { + '1': [ + { + 'fieldType': 'FormFieldRepresentation', + 'id': 'label1', + 'name': 'Label1', + 'type': 'text', + 'value': null, + 'required': false, + 'readOnly': false, + 'overrideId': false, + 'colspan': 1, + 'placeholder': null, + 'minLength': 0, + 'maxLength': 0, + 'minValue': null, + 'maxValue': null, + 'regexPattern': null, + 'optionType': null, + 'hasEmptyValue': null, + 'options': null, + 'restUrl': null, + 'restResponsePath': null, + 'restIdProperty': null, + 'restLabelProperty': null, + 'tab': 'tab1', + 'className': null, + 'params': { + 'existingColspan': 1, + 'maxColspan': 2 + }, + 'dateDisplayFormat': null, + 'layout': { + 'row': -1, + 'column': -1, + 'colspan': 1 + }, + 'sizeX': 1, + 'sizeY': 1, + 'row': -1, + 'col': -1, + 'visibilityCondition': null + }, + { + 'fieldType': 'FormFieldRepresentation', + 'id': 'label3', + 'name': 'Label3', + 'type': 'text', + 'value': null, + 'required': false, + 'readOnly': false, + 'overrideId': false, + 'colspan': 1, + 'placeholder': null, + 'minLength': 0, + 'maxLength': 0, + 'minValue': null, + 'maxValue': null, + 'regexPattern': null, + 'optionType': null, + 'hasEmptyValue': null, + 'options': null, + 'restUrl': null, + 'restResponsePath': null, + 'restIdProperty': null, + 'restLabelProperty': null, + 'tab': 'tab1', + 'className': null, + 'params': { + 'existingColspan': 1, + 'maxColspan': 2 + }, + 'dateDisplayFormat': null, + 'layout': { + 'row': -1, + 'column': -1, + 'colspan': 1 + }, + 'sizeX': 1, + 'sizeY': 1, + 'row': -1, + 'col': -1, + 'visibilityCondition': null + } + ], + '2': [ + { + 'fieldType': 'FormFieldRepresentation', + 'id': 'label2', + 'name': 'Label2', + 'type': 'multi-line-text', + 'value': null, + 'required': false, + 'readOnly': false, + 'overrideId': false, + 'colspan': 1, + 'placeholder': null, + 'minLength': 0, + 'maxLength': 0, + 'minValue': null, + 'maxValue': null, + 'regexPattern': null, + 'optionType': null, + 'hasEmptyValue': null, + 'options': null, + 'restUrl': null, + 'restResponsePath': null, + 'restIdProperty': null, + 'restLabelProperty': null, + 'tab': 'tab1', + 'className': null, + 'params': { + 'existingColspan': 1, + 'maxColspan': 1 + }, + 'dateDisplayFormat': null, + 'layout': { + 'row': -1, + 'column': -1, + 'colspan': 1 + }, + 'sizeX': 1, + 'sizeY': 2, + 'row': -1, + 'col': -1, + 'visibilityCondition': null + } + ] + } + }, + { + 'fieldType': 'ContainerRepresentation', + 'id': 'section2', + 'name': 'Section 2', + 'type': 'group', + 'value': null, + 'required': false, + 'readOnly': false, + 'overrideId': false, + 'colspan': 1, + 'placeholder': null, + 'minLength': 0, + 'maxLength': 0, + 'minValue': null, + 'maxValue': null, + 'regexPattern': null, + 'optionType': null, + 'hasEmptyValue': null, + 'options': null, + 'restUrl': null, + 'restResponsePath': null, + 'restIdProperty': null, + 'restLabelProperty': null, + 'tab': 'tab1', + 'className': null, + 'dateDisplayFormat': null, + 'layout': { + 'row': -1, + 'column': -1, + 'colspan': 2 + }, + 'sizeX': 2, + 'sizeY': 1, + 'row': -1, + 'col': -1, + 'visibilityCondition': null, + 'numberOfColumns': 2, + 'fields': { + '1': [ + { + 'fieldType': 'FormFieldRepresentation', + 'id': 'label4', + 'name': 'Label4', + 'type': 'integer', + 'value': null, + 'required': false, + 'readOnly': false, + 'overrideId': false, + 'colspan': 1, + 'placeholder': null, + 'minLength': 0, + 'maxLength': 0, + 'minValue': null, + 'maxValue': null, + 'regexPattern': null, + 'optionType': null, + 'hasEmptyValue': null, + 'options': null, + 'restUrl': null, + 'restResponsePath': null, + 'restIdProperty': null, + 'restLabelProperty': null, + 'tab': 'tab1', + 'className': null, + 'params': { + 'existingColspan': 1, + 'maxColspan': 2 + }, + 'dateDisplayFormat': null, + 'layout': { + 'row': -1, + 'column': -1, + 'colspan': 1 + }, + 'sizeX': 1, + 'sizeY': 1, + 'row': -1, + 'col': -1, + 'visibilityCondition': null + }, + { + 'fieldType': 'FormFieldRepresentation', + 'id': 'label7', + 'name': 'Label7', + 'type': 'date', + 'value': null, + 'required': false, + 'readOnly': false, + 'overrideId': false, + 'colspan': 1, + 'placeholder': null, + 'minLength': 0, + 'maxLength': 0, + 'minValue': null, + 'maxValue': null, + 'regexPattern': null, + 'optionType': null, + 'hasEmptyValue': null, + 'options': null, + 'restUrl': null, + 'restResponsePath': null, + 'restIdProperty': null, + 'restLabelProperty': null, + 'tab': 'tab1', + 'className': null, + 'params': { + 'existingColspan': 1, + 'maxColspan': 2 + }, + 'dateDisplayFormat': null, + 'layout': { + 'row': -1, + 'column': -1, + 'colspan': 1 + }, + 'sizeX': 1, + 'sizeY': 1, + 'row': -1, + 'col': -1, + 'visibilityCondition': null + } + ], + '2': [ + { + 'fieldType': 'FormFieldRepresentation', + 'id': 'label5', + 'name': 'Label5', + 'type': 'boolean', + 'value': null, + 'required': false, + 'readOnly': false, + 'overrideId': false, + 'colspan': 1, + 'placeholder': null, + 'minLength': 0, + 'maxLength': 0, + 'minValue': null, + 'maxValue': null, + 'regexPattern': null, + 'optionType': null, + 'hasEmptyValue': null, + 'options': null, + 'restUrl': null, + 'restResponsePath': null, + 'restIdProperty': null, + 'restLabelProperty': null, + 'tab': 'tab1', + 'className': null, + 'params': { + 'existingColspan': 1, + 'maxColspan': 1 + }, + 'dateDisplayFormat': null, + 'layout': { + 'row': -1, + 'column': -1, + 'colspan': 1 + }, + 'sizeX': 1, + 'sizeY': 1, + 'row': -1, + 'col': -1, + 'visibilityCondition': null + }, + { + 'fieldType': 'FormFieldRepresentation', + 'id': 'label6', + 'name': 'Label6', + 'type': 'boolean', + 'value': null, + 'required': false, + 'readOnly': false, + 'overrideId': false, + 'colspan': 1, + 'placeholder': null, + 'minLength': 0, + 'maxLength': 0, + 'minValue': null, + 'maxValue': null, + 'regexPattern': null, + 'optionType': null, + 'hasEmptyValue': null, + 'options': null, + 'restUrl': null, + 'restResponsePath': null, + 'restIdProperty': null, + 'restLabelProperty': null, + 'tab': 'tab1', + 'className': null, + 'params': { + 'existingColspan': 1, + 'maxColspan': 1 + }, + 'dateDisplayFormat': null, + 'layout': { + 'row': -1, + 'column': -1, + 'colspan': 1 + }, + 'sizeX': 1, + 'sizeY': 1, + 'row': -1, + 'col': -1, + 'visibilityCondition': null + }, + { + 'fieldType': 'AmountFieldRepresentation', + 'id': 'label11', + 'name': 'Label11', + 'type': 'amount', + 'value': null, + 'required': false, + 'readOnly': false, + 'overrideId': false, + 'colspan': 1, + 'placeholder': null, + 'minLength': 0, + 'maxLength': 0, + 'minValue': null, + 'maxValue': null, + 'regexPattern': null, + 'optionType': null, + 'hasEmptyValue': null, + 'options': null, + 'restUrl': null, + 'restResponsePath': null, + 'restIdProperty': null, + 'restLabelProperty': null, + 'tab': 'tab1', + 'className': null, + 'params': { + 'existingColspan': 1, + 'maxColspan': 1 + }, + 'dateDisplayFormat': null, + 'layout': { + 'row': -1, + 'column': -1, + 'colspan': 1 + }, + 'sizeX': 1, + 'sizeY': 1, + 'row': -1, + 'col': -1, + 'visibilityCondition': null, + 'enableFractions': false, + 'currency': null + } + ] + } + }, + { + 'fieldType': 'ContainerRepresentation', + 'id': 'section3', + 'name': 'Section 3', + 'type': 'group', + 'value': null, + 'required': false, + 'readOnly': false, + 'overrideId': false, + 'colspan': 1, + 'placeholder': null, + 'minLength': 0, + 'maxLength': 0, + 'minValue': null, + 'maxValue': null, + 'regexPattern': null, + 'optionType': null, + 'hasEmptyValue': null, + 'options': null, + 'restUrl': null, + 'restResponsePath': null, + 'restIdProperty': null, + 'restLabelProperty': null, + 'tab': 'tab1', + 'className': null, + 'dateDisplayFormat': null, + 'layout': { + 'row': -1, + 'column': -1, + 'colspan': 2 + }, + 'sizeX': 2, + 'sizeY': 1, + 'row': -1, + 'col': -1, + 'visibilityCondition': null, + 'numberOfColumns': 2, + 'fields': { + '1': [ + { + 'fieldType': 'RestFieldRepresentation', + 'id': 'label9', + 'name': 'Label9', + 'type': 'dropdown', + 'value': 'Choose one...', + 'required': false, + 'readOnly': false, + 'overrideId': false, + 'colspan': 1, + 'placeholder': null, + 'minLength': 0, + 'maxLength': 0, + 'minValue': null, + 'maxValue': null, + 'regexPattern': null, + 'optionType': null, + 'hasEmptyValue': true, + 'options': [ + { + 'id': 'empty', + 'name': 'Choose one...' + } + ], + 'restUrl': null, + 'restResponsePath': null, + 'restIdProperty': null, + 'restLabelProperty': null, + 'tab': 'tab1', + 'className': null, + 'params': { + 'existingColspan': 1, + 'maxColspan': 2 + }, + 'dateDisplayFormat': null, + 'layout': { + 'row': -1, + 'column': -1, + 'colspan': 1 + }, + 'sizeX': 1, + 'sizeY': 1, + 'row': -1, + 'col': -1, + 'visibilityCondition': null, + 'endpoint': null, + 'requestHeaders': null + }, + { + 'fieldType': 'RestFieldRepresentation', + 'id': 'label12', + 'name': 'Label12', + 'type': 'radio-buttons', + 'value': null, + 'required': false, + 'readOnly': false, + 'overrideId': false, + 'colspan': 1, + 'placeholder': null, + 'minLength': 0, + 'maxLength': 0, + 'minValue': null, + 'maxValue': null, + 'regexPattern': null, + 'optionType': null, + 'hasEmptyValue': null, + 'options': [ + { + 'id': 'option_1', + 'name': 'Option 1' + }, + { + 'id': 'option_2', + 'name': 'Option 2' + } + ], + 'restUrl': null, + 'restResponsePath': null, + 'restIdProperty': null, + 'restLabelProperty': null, + 'tab': 'tab1', + 'className': null, + 'params': { + 'existingColspan': 1, + 'maxColspan': 2 + }, + 'dateDisplayFormat': null, + 'layout': { + 'row': -1, + 'column': -1, + 'colspan': 1 + }, + 'sizeX': 1, + 'sizeY': 1, + 'row': -1, + 'col': -1, + 'visibilityCondition': null, + 'endpoint': null, + 'requestHeaders': null + } + ], + '2': [ + { + 'fieldType': 'RestFieldRepresentation', + 'id': 'label10', + 'name': 'Label10', + 'type': 'typeahead', + 'value': null, + 'required': false, + 'readOnly': false, + 'overrideId': false, + 'colspan': 1, + 'placeholder': null, + 'minLength': 0, + 'maxLength': 0, + 'minValue': null, + 'maxValue': null, + 'regexPattern': null, + 'optionType': null, + 'hasEmptyValue': null, + 'options': null, + 'restUrl': null, + 'restResponsePath': null, + 'restIdProperty': null, + 'restLabelProperty': null, + 'tab': 'tab1', + 'className': null, + 'params': { + 'existingColspan': 1, + 'maxColspan': 1 + }, + 'dateDisplayFormat': null, + 'layout': { + 'row': -1, + 'column': -1, + 'colspan': 1 + }, + 'sizeX': 1, + 'sizeY': 1, + 'row': -1, + 'col': -1, + 'visibilityCondition': null, + 'endpoint': null, + 'requestHeaders': null + } + ] + } + } + ], + 'outcomes': [], + 'javascriptEvents': [], + 'className': '', + 'style': '', + 'customFieldTemplates': {}, + 'metadata': {}, + 'variables': [], + 'gridsterForm': false, + 'globalDateFormat': 'D-M-YYYY' + }; + } + +} diff --git a/demo-shell-ng2/app/components/form/form-demo.component.css b/demo-shell-ng2/app/components/form/form-demo.component.css new file mode 100644 index 0000000000..3608df8b91 --- /dev/null +++ b/demo-shell-ng2/app/components/form/form-demo.component.css @@ -0,0 +1,3 @@ +.form-container { + padding: 10px; +} diff --git a/demo-shell-ng2/app/components/form/form-demo.component.html b/demo-shell-ng2/app/components/form/form-demo.component.html new file mode 100644 index 0000000000..8193f015fe --- /dev/null +++ b/demo-shell-ng2/app/components/form/form-demo.component.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/demo-shell-ng2/app/components/form/form-demo.component.ts b/demo-shell-ng2/app/components/form/form-demo.component.ts new file mode 100644 index 0000000000..5ad24ab3f4 --- /dev/null +++ b/demo-shell-ng2/app/components/form/form-demo.component.ts @@ -0,0 +1,46 @@ +/*! + * @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 { FormModel, FormService } from 'ng2-activiti-form'; +import { DemoForm } from './demo-form'; + +@Component({ + selector: 'form-demo', + templateUrl: 'form-demo.component.html', + styleUrls: [ + 'form-demo.component.css' + ] +}) +export class FormDemoComponent implements OnInit { + + form: FormModel; + + constructor(private formService: FormService) { + formService.executeOutcome.subscribe(e => { + e.preventDefault(); + console.log(e.outcome); + }); + } + + ngOnInit() { + let formDefinitionJSON: any = DemoForm.getDefinition(); + let form = this.formService.parseForm(formDefinitionJSON); + console.log(form); + this.form = form; + } +} diff --git a/demo-shell-ng2/app/components/index.ts b/demo-shell-ng2/app/components/index.ts index 23bc19021b..8b968f8e75 100644 --- a/demo-shell-ng2/app/components/index.ts +++ b/demo-shell-ng2/app/components/index.ts @@ -31,3 +31,4 @@ export { FilesComponent } from './files/files.component'; export { FormNodeViewer } from './activiti/form-node-viewer.component'; export { ActivitiAppsView } from './activiti/apps.view'; export { SettingsComponent } from './settings/settings.component'; +export { FormDemoComponent } from './form/form-demo.component'; diff --git a/ng2-components/ng2-activiti-form/src/components/activiti-form.component.ts b/ng2-components/ng2-activiti-form/src/components/activiti-form.component.ts index 8f8cd1abcb..c7293759bc 100644 --- a/ng2-components/ng2-activiti-form/src/components/activiti-form.component.ts +++ b/ng2-components/ng2-activiti-form/src/components/activiti-form.component.ts @@ -40,6 +40,9 @@ export class ActivitiForm implements OnInit, AfterViewChecked, OnChanges { static START_PROCESS_OUTCOME_ID: string = '$startProcess'; static CUSTOM_OUTCOME_ID: string = '$custom'; + @Input() + form: FormModel; + @Input() taskId: string; @@ -103,8 +106,6 @@ export class ActivitiForm implements OnInit, AfterViewChecked, OnChanges { @Output() onError: EventEmitter = new EventEmitter(); - form: FormModel; - debugMode: boolean = false; constructor(protected formService: FormService, 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 16ea51d9a2..2de3c04359 100644 --- a/ng2-components/ng2-activiti-form/src/services/form.service.ts +++ b/ng2-components/ng2-activiti-form/src/services/form.service.ts @@ -18,7 +18,7 @@ import { Injectable } from '@angular/core'; import { Observable, Subject } from 'rxjs/Rx'; import { AlfrescoApiService, LogService } from 'ng2-alfresco-core'; -import { FormValues, FormOutcomeEvent } from './../components/widgets/core/index'; +import { FormModel, FormValues, FormOutcomeEvent, FormOutcomeModel } from './../components/widgets/core/index'; import { FormDefinitionModel } from '../models/form-definition.model'; import { EcmModelService } from './ecm-model.service'; import { GroupModel } from './../components/widgets/core/group.model'; @@ -47,6 +47,23 @@ export class FormService { private logService: LogService) { } + parseForm(json: any, data?: FormValues, readOnly: boolean = false): FormModel { + if (json) { + let form = new FormModel(json, data, readOnly, this); + if (!json.fields) { + form.outcomes = [ + new FormOutcomeModel(form, { + id: '$custom', + name: FormOutcomeModel.SAVE_ACTION, + isSystem: true + }) + ]; + } + return form; + } + return null; + } + /** * Create a Form with a fields for each metadata properties * @returns {Observable}