mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-3797] Task management view - Task with Form (#4534)
* [ADF-4248] Created form cloud service * [ADF-4248] Created form cloud model * [ADF-4248] Created new cloud form * [ADF-4248] Exported cloud from module * [ADF-4248] Added form saving feature * [ADF-4248] Added form to task details * [ADF-4248] Added services to save form * [ADF-4248] Added data support * [ADF-4248] Added outcome support in form model * [ADF-4248] Modified demo component to show form * [ADF-4248] Copied tests * [ADF-4248] Added form parsing service * [ADF-4248] Added form cloud demo * [ADF-4248] Added form input to fom-cloud * [ADF-4248] Added tests for form cloud model * [ADF-4248] Improved form model json parsing * [ADF-4248] Added test for form could * [ADF-4248] Refactored types in the form model * [ADF-4248] Improved tests * [ADF-4248] Added tests for form cloud service * [ADF-4248] Added tests for form services * [ADF-4248] Refactored form services * [ADF-4248] Handled form events in demo shell * [ADF-4248] Improved form value parsing * [ADF-4248] Added form-cloud demo to routing * [ADF-4248] Added field validation without handler * [ADF-4248] Added task variable model * [ADF-4248] Added adf-cloud prefix to css classes * [ADF-4248] Translated name of nameless task * [ADF-4248] Added docs for cloud form component * [ADF-4248] Added docs for cloud form service * create base component * [ADF-4248] Created formBase and formModelbase * [ADF-4248] Used base classes in cloud package * Update form-cloud.component.md * Update form-cloud.service.md * [ADF-4248] Created form cloud service * [ADF-4248] Created form cloud model * [ADF-4248] Created new cloud form * [ADF-4248] Exported cloud from module * [ADF-4248] Added form saving feature * [ADF-4248] Added form to task details * [ADF-4248] Added services to save form * [ADF-4248] Added data support * [ADF-4248] Added outcome support in form model * [ADF-4248] Modified demo component to show form * [ADF-4248] Copied tests * [ADF-4248] Added form parsing service * [ADF-4248] Added form cloud demo * [ADF-4248] Added form input to fom-cloud * [ADF-4248] Added tests for form cloud model * [ADF-4248] Improved form model json parsing * [ADF-4248] Added test for form could * [ADF-4248] Refactored types in the form model * [ADF-4248] Improved tests * [ADF-4248] Added tests for form cloud service * [ADF-4248] Added tests for form services * [ADF-4248] Refactored form services * [ADF-4248] Handled form events in demo shell * [ADF-4248] Improved form value parsing * [ADF-4248] Added form-cloud demo to routing * [ADF-4248] Added field validation without handler * [ADF-4248] Added task variable model * [ADF-4248] Added adf-cloud prefix to css classes * [ADF-4248] Translated name of nameless task * [ADF-4248] Added docs for cloud form component * [ADF-4248] Added docs for cloud form service * create base component * [ADF-4248] Created formBase and formModelbase * [ADF-4248] Used base classes in cloud package * [ADF-4248] Moved documentation to process services * [ADF-4248] Removed duplicate import * [ADF-4248] Fixed wrong imports * [ADF-4248] Renamed form renderer input * [ADF-4248] Show translated name for nameless form * Enable the uploadWidget * Make the form great again! * Move the class style on the parent * Fix the debugMode
This commit is contained in:
Deepak Paul
committed by
Eugenio Romano
Eugenio Romano
parent
61ee1f1d53
commit
558ee4c031
46
lib/process-services/form/form.component.html
Normal file
46
lib/process-services/form/form.component.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<div *ngIf="!hasForm()">
|
||||
<ng-content select="[empty-form]">
|
||||
</ng-content>
|
||||
</div>
|
||||
|
||||
<div *ngIf="hasForm()" class="adf-form-container">
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>
|
||||
<h4>
|
||||
<div *ngIf="showValidationIcon" class="adf-form-validation-button">
|
||||
<i id="adf-valid-form-icon" class="material-icons"
|
||||
*ngIf="form.isValid; else no_valid_form">check_circle</i>
|
||||
<ng-template #no_valid_form>
|
||||
<i id="adf-invalid-form-icon" class="material-icons adf-invalid-color">error</i>
|
||||
</ng-template>
|
||||
</div>
|
||||
<div *ngIf="showRefreshButton" class="adf-form-reload-button">
|
||||
<button mat-icon-button (click)="onRefreshClicked()">
|
||||
<mat-icon>refresh</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<span *ngIf="isTitleEnabled()" class="adf-form-title">
|
||||
{{form.taskName}}
|
||||
<ng-container *ngIf="!form.taskName">
|
||||
{{'FORM.FORM_RENDERER.NAMELESS_TASK' | translate}}
|
||||
</ng-container>
|
||||
</span>
|
||||
|
||||
</h4>
|
||||
</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<adf-form-renderer [formDefinition]="form">
|
||||
</adf-form-renderer>
|
||||
</mat-card-content>
|
||||
<mat-card-actions *ngIf="form.hasOutcomes()" class="adf-form-mat-card-actions">
|
||||
<button [id]="'adf-form-'+ outcome.name | formatSpace" *ngFor="let outcome of form.outcomes"
|
||||
[color]="getColorForOutcome(outcome.name)" mat-button [disabled]="!isOutcomeButtonEnabled(outcome)"
|
||||
[class.adf-form-hide-button]="!isOutcomeButtonVisible(outcome, form.readOnly)"
|
||||
(click)="onOutcomeClicked(outcome)">
|
||||
{{outcome.name | translate | uppercase }}
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</div>
|
||||
855
lib/process-services/form/form.component.spec.ts
Normal file
855
lib/process-services/form/form.component.spec.ts
Normal file
@@ -0,0 +1,855 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 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 { SimpleChange } from '@angular/core';
|
||||
import { Observable, of, throwError } from 'rxjs';
|
||||
import { FormFieldModel, FormFieldTypes, FormModel, FormOutcomeEvent, FormOutcomeModel,
|
||||
FormService, WidgetVisibilityService, NodeService, LogService, ContainerModel, fakeForm, FormRenderingService } from '@alfresco/adf-core';
|
||||
|
||||
import { FormComponent } from './form.component';
|
||||
|
||||
describe('FormComponent', () => {
|
||||
|
||||
let formService: FormService;
|
||||
let formComponent: FormComponent;
|
||||
let visibilityService: WidgetVisibilityService;
|
||||
let nodeService: NodeService;
|
||||
let logService: LogService;
|
||||
let formRenderingService: FormRenderingService;
|
||||
|
||||
beforeEach(() => {
|
||||
logService = new LogService(null);
|
||||
visibilityService = new WidgetVisibilityService(null, logService);
|
||||
spyOn(visibilityService, 'refreshVisibility').and.stub();
|
||||
formService = new FormService(null, null, logService);
|
||||
nodeService = new NodeService(null);
|
||||
formRenderingService = new FormRenderingService();
|
||||
formComponent = new FormComponent(formService, visibilityService, null, nodeService, formRenderingService);
|
||||
});
|
||||
|
||||
it('should check form', () => {
|
||||
expect(formComponent.hasForm()).toBeFalsy();
|
||||
formComponent.form = new FormModel();
|
||||
expect(formComponent.hasForm()).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should allow title if task name available', () => {
|
||||
const formModel = new FormModel();
|
||||
formComponent.form = formModel;
|
||||
|
||||
expect(formComponent.showTitle).toBeTruthy();
|
||||
expect(formModel.taskName).toBe(FormModel.UNSET_TASK_NAME);
|
||||
expect(formComponent.isTitleEnabled()).toBeTruthy();
|
||||
|
||||
formComponent.form = null;
|
||||
|
||||
expect(formComponent.isTitleEnabled()).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should not allow title', () => {
|
||||
const formModel = new FormModel();
|
||||
|
||||
formComponent.form = formModel;
|
||||
formComponent.showTitle = false;
|
||||
|
||||
expect(formModel.taskName).toBe(FormModel.UNSET_TASK_NAME);
|
||||
expect(formComponent.isTitleEnabled()).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should return primary color for complete button', () => {
|
||||
expect(formComponent.getColorForOutcome('COMPLETE')).toBe('primary');
|
||||
});
|
||||
|
||||
it('should not enable outcome button when model missing', () => {
|
||||
expect(formComponent.isOutcomeButtonVisible(null, false)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should enable custom outcome buttons', () => {
|
||||
const formModel = new FormModel();
|
||||
formComponent.form = formModel;
|
||||
const outcome = new FormOutcomeModel(formModel, { id: 'action1', name: 'Action 1' });
|
||||
expect(formComponent.isOutcomeButtonVisible(outcome, formComponent.form.readOnly)).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should allow controlling [complete] button visibility', () => {
|
||||
const formModel = new FormModel();
|
||||
formComponent.form = formModel;
|
||||
const outcome = new FormOutcomeModel(formModel, { id: '$save', name: FormOutcomeModel.SAVE_ACTION });
|
||||
|
||||
formComponent.showSaveButton = true;
|
||||
expect(formComponent.isOutcomeButtonVisible(outcome, formComponent.form.readOnly)).toBeTruthy();
|
||||
|
||||
formComponent.showSaveButton = false;
|
||||
expect(formComponent.isOutcomeButtonVisible(outcome, formComponent.form.readOnly)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should show only [complete] button with readOnly form ', () => {
|
||||
const formModel = new FormModel();
|
||||
formModel.readOnly = true;
|
||||
formComponent.form = formModel;
|
||||
const outcome = new FormOutcomeModel(formModel, { id: '$complete', name: FormOutcomeModel.COMPLETE_ACTION });
|
||||
|
||||
formComponent.showCompleteButton = true;
|
||||
expect(formComponent.isOutcomeButtonVisible(outcome, formComponent.form.readOnly)).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should not show [save] button with readOnly form ', () => {
|
||||
const formModel = new FormModel();
|
||||
formModel.readOnly = true;
|
||||
formComponent.form = formModel;
|
||||
const outcome = new FormOutcomeModel(formModel, { id: '$save', name: FormOutcomeModel.SAVE_ACTION });
|
||||
|
||||
formComponent.showSaveButton = true;
|
||||
expect(formComponent.isOutcomeButtonVisible(outcome, formComponent.form.readOnly)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should show [custom-outcome] button with readOnly form and selected custom-outcome', () => {
|
||||
const formModel = new FormModel({ selectedOutcome: 'custom-outcome' });
|
||||
formModel.readOnly = true;
|
||||
formComponent.form = formModel;
|
||||
let outcome = new FormOutcomeModel(formModel, { id: '$customoutome', name: 'custom-outcome' });
|
||||
|
||||
formComponent.showCompleteButton = true;
|
||||
formComponent.showSaveButton = true;
|
||||
expect(formComponent.isOutcomeButtonVisible(outcome, formComponent.form.readOnly)).toBeTruthy();
|
||||
|
||||
outcome = new FormOutcomeModel(formModel, { id: '$customoutome2', name: 'custom-outcome2' });
|
||||
expect(formComponent.isOutcomeButtonVisible(outcome, formComponent.form.readOnly)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should allow controlling [save] button visibility', () => {
|
||||
const formModel = new FormModel();
|
||||
formModel.readOnly = false;
|
||||
formComponent.form = formModel;
|
||||
const outcome = new FormOutcomeModel(formModel, { id: '$save', name: FormOutcomeModel.COMPLETE_ACTION });
|
||||
|
||||
formComponent.showCompleteButton = true;
|
||||
expect(formComponent.isOutcomeButtonVisible(outcome, formComponent.form.readOnly)).toBeTruthy();
|
||||
|
||||
formComponent.showCompleteButton = false;
|
||||
expect(formComponent.isOutcomeButtonVisible(outcome, formComponent.form.readOnly)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should load form on refresh', () => {
|
||||
spyOn(formComponent, 'loadForm').and.stub();
|
||||
|
||||
formComponent.onRefreshClicked();
|
||||
expect(formComponent.loadForm).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should get form by task id on load', () => {
|
||||
spyOn(formComponent, 'getFormByTaskId').and.stub();
|
||||
|
||||
const taskId = '123';
|
||||
|
||||
formComponent.taskId = taskId;
|
||||
formComponent.loadForm();
|
||||
|
||||
expect(formComponent.getFormByTaskId).toHaveBeenCalledWith(taskId);
|
||||
});
|
||||
|
||||
it('should get process variable if is a process task', () => {
|
||||
spyOn(formService, 'getTaskForm').and.callFake((currentTaskId) => {
|
||||
return new Observable((observer) => {
|
||||
observer.next({ taskId: currentTaskId });
|
||||
observer.complete();
|
||||
});
|
||||
});
|
||||
|
||||
spyOn(visibilityService, 'getTaskProcessVariable').and.returnValue(of({}));
|
||||
spyOn(formService, 'getTask').and.callFake((currentTaskId) => {
|
||||
return new Observable((observer) => {
|
||||
observer.next({ taskId: currentTaskId, processDefinitionId: '10201' });
|
||||
observer.complete();
|
||||
});
|
||||
});
|
||||
const taskId = '123';
|
||||
|
||||
formComponent.taskId = taskId;
|
||||
formComponent.loadForm();
|
||||
|
||||
expect(visibilityService.getTaskProcessVariable).toHaveBeenCalledWith(taskId);
|
||||
});
|
||||
|
||||
it('should not get process variable if is not a process task', () => {
|
||||
spyOn(formService, 'getTaskForm').and.callFake((currentTaskId) => {
|
||||
return new Observable((observer) => {
|
||||
observer.next({ taskId: currentTaskId });
|
||||
observer.complete();
|
||||
});
|
||||
});
|
||||
|
||||
spyOn(visibilityService, 'getTaskProcessVariable').and.returnValue(of({}));
|
||||
spyOn(formService, 'getTask').and.callFake((currentTaskId) => {
|
||||
return new Observable((observer) => {
|
||||
observer.next({ taskId: currentTaskId, processDefinitionId: 'null' });
|
||||
observer.complete();
|
||||
});
|
||||
});
|
||||
const taskId = '123';
|
||||
|
||||
formComponent.taskId = taskId;
|
||||
formComponent.loadForm();
|
||||
|
||||
expect(visibilityService.getTaskProcessVariable).toHaveBeenCalledWith(taskId);
|
||||
});
|
||||
|
||||
it('should get form definition by form id on load', () => {
|
||||
spyOn(formComponent, 'getFormDefinitionByFormId').and.stub();
|
||||
const formId = 123;
|
||||
|
||||
formComponent.formId = formId;
|
||||
formComponent.loadForm();
|
||||
|
||||
expect(formComponent.getFormDefinitionByFormId).toHaveBeenCalledWith(formId);
|
||||
});
|
||||
|
||||
it('should refresh visibility when the form is loaded', () => {
|
||||
spyOn(formService, 'getFormDefinitionById').and.returnValue(of(JSON.parse(JSON.stringify(fakeForm))));
|
||||
const formId = 123;
|
||||
|
||||
formComponent.formId = formId;
|
||||
formComponent.loadForm();
|
||||
|
||||
expect(formService.getFormDefinitionById).toHaveBeenCalledWith(formId);
|
||||
expect(visibilityService.refreshVisibility).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should get form definition by form name on load', () => {
|
||||
spyOn(formComponent, 'getFormDefinitionByFormName').and.stub();
|
||||
const formName = '<form>';
|
||||
|
||||
formComponent.formName = formName;
|
||||
formComponent.loadForm();
|
||||
|
||||
expect(formComponent.getFormDefinitionByFormName).toHaveBeenCalledWith(formName);
|
||||
});
|
||||
|
||||
it('should reload form by task id on binding changes', () => {
|
||||
spyOn(formComponent, 'getFormByTaskId').and.stub();
|
||||
const taskId = '<task id>';
|
||||
|
||||
const change = new SimpleChange(null, taskId, true);
|
||||
formComponent.ngOnChanges({ 'taskId': change });
|
||||
|
||||
expect(formComponent.getFormByTaskId).toHaveBeenCalledWith(taskId);
|
||||
});
|
||||
|
||||
it('should reload form definition by form id on binding changes', () => {
|
||||
spyOn(formComponent, 'getFormDefinitionByFormId').and.stub();
|
||||
const formId = '123';
|
||||
|
||||
const change = new SimpleChange(null, formId, true);
|
||||
formComponent.ngOnChanges({ 'formId': change });
|
||||
|
||||
expect(formComponent.getFormDefinitionByFormId).toHaveBeenCalledWith(formId);
|
||||
});
|
||||
|
||||
it('should reload form definition by name on binding changes', () => {
|
||||
spyOn(formComponent, 'getFormDefinitionByFormName').and.stub();
|
||||
const formName = '<form>';
|
||||
|
||||
const change = new SimpleChange(null, formName, true);
|
||||
formComponent.ngOnChanges({ 'formName': change });
|
||||
|
||||
expect(formComponent.getFormDefinitionByFormName).toHaveBeenCalledWith(formName);
|
||||
});
|
||||
|
||||
it('should not get form on load', () => {
|
||||
spyOn(formComponent, 'getFormByTaskId').and.stub();
|
||||
spyOn(formComponent, 'getFormDefinitionByFormId').and.stub();
|
||||
spyOn(formComponent, 'getFormDefinitionByFormName').and.stub();
|
||||
|
||||
formComponent.taskId = null;
|
||||
formComponent.formId = null;
|
||||
formComponent.formName = null;
|
||||
formComponent.loadForm();
|
||||
|
||||
expect(formComponent.getFormByTaskId).not.toHaveBeenCalled();
|
||||
expect(formComponent.getFormDefinitionByFormId).not.toHaveBeenCalled();
|
||||
expect(formComponent.getFormDefinitionByFormName).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should not reload form on binding changes', () => {
|
||||
spyOn(formComponent, 'getFormByTaskId').and.stub();
|
||||
spyOn(formComponent, 'getFormDefinitionByFormId').and.stub();
|
||||
spyOn(formComponent, 'getFormDefinitionByFormName').and.stub();
|
||||
|
||||
formComponent.ngOnChanges({ 'tag': new SimpleChange(null, 'hello world', true) });
|
||||
|
||||
expect(formComponent.getFormByTaskId).not.toHaveBeenCalled();
|
||||
expect(formComponent.getFormDefinitionByFormId).not.toHaveBeenCalled();
|
||||
expect(formComponent.getFormDefinitionByFormName).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should complete form on custom outcome click', () => {
|
||||
const formModel = new FormModel();
|
||||
const outcomeName = 'Custom Action';
|
||||
const outcome = new FormOutcomeModel(formModel, { id: 'custom1', name: outcomeName });
|
||||
|
||||
let saved = false;
|
||||
formComponent.form = formModel;
|
||||
formComponent.formSaved.subscribe((v) => saved = true);
|
||||
spyOn(formComponent, 'completeTaskForm').and.stub();
|
||||
|
||||
const result = formComponent.onOutcomeClicked(outcome);
|
||||
expect(result).toBeTruthy();
|
||||
expect(saved).toBeTruthy();
|
||||
expect(formComponent.completeTaskForm).toHaveBeenCalledWith(outcomeName);
|
||||
});
|
||||
|
||||
it('should save form on [save] outcome click', () => {
|
||||
const formModel = new FormModel();
|
||||
const outcome = new FormOutcomeModel(formModel, {
|
||||
id: FormComponent.SAVE_OUTCOME_ID,
|
||||
name: 'Save',
|
||||
isSystem: true
|
||||
});
|
||||
|
||||
formComponent.form = formModel;
|
||||
spyOn(formComponent, 'saveTaskForm').and.stub();
|
||||
|
||||
const result = formComponent.onOutcomeClicked(outcome);
|
||||
expect(result).toBeTruthy();
|
||||
expect(formComponent.saveTaskForm).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should complete form on [complete] outcome click', () => {
|
||||
const formModel = new FormModel();
|
||||
const outcome = new FormOutcomeModel(formModel, {
|
||||
id: FormComponent.COMPLETE_OUTCOME_ID,
|
||||
name: 'Complete',
|
||||
isSystem: true
|
||||
});
|
||||
|
||||
formComponent.form = formModel;
|
||||
spyOn(formComponent, 'completeTaskForm').and.stub();
|
||||
|
||||
const result = formComponent.onOutcomeClicked(outcome);
|
||||
expect(result).toBeTruthy();
|
||||
expect(formComponent.completeTaskForm).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should emit form saved event on custom outcome click', () => {
|
||||
const formModel = new FormModel();
|
||||
const outcome = new FormOutcomeModel(formModel, {
|
||||
id: FormComponent.CUSTOM_OUTCOME_ID,
|
||||
name: 'Custom',
|
||||
isSystem: true
|
||||
});
|
||||
|
||||
let saved = false;
|
||||
formComponent.form = formModel;
|
||||
formComponent.formSaved.subscribe((v) => saved = true);
|
||||
|
||||
const result = formComponent.onOutcomeClicked(outcome);
|
||||
expect(result).toBeTruthy();
|
||||
expect(saved).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should do nothing when clicking outcome for readonly form', () => {
|
||||
const formModel = new FormModel();
|
||||
const outcomeName = 'Custom Action';
|
||||
const outcome = new FormOutcomeModel(formModel, { id: 'custom1', name: outcomeName });
|
||||
|
||||
formComponent.form = formModel;
|
||||
spyOn(formComponent, 'completeTaskForm').and.stub();
|
||||
|
||||
expect(formComponent.onOutcomeClicked(outcome)).toBeTruthy();
|
||||
formComponent.readOnly = true;
|
||||
expect(formComponent.onOutcomeClicked(outcome)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should require outcome model when clicking outcome', () => {
|
||||
formComponent.form = new FormModel();
|
||||
formComponent.readOnly = false;
|
||||
expect(formComponent.onOutcomeClicked(null)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should require loaded form when clicking outcome', () => {
|
||||
const formModel = new FormModel();
|
||||
const outcomeName = 'Custom Action';
|
||||
const outcome = new FormOutcomeModel(formModel, { id: 'custom1', name: outcomeName });
|
||||
|
||||
formComponent.readOnly = false;
|
||||
formComponent.form = null;
|
||||
expect(formComponent.onOutcomeClicked(outcome)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should not execute unknown system outcome', () => {
|
||||
const formModel = new FormModel();
|
||||
const outcome = new FormOutcomeModel(formModel, { id: 'unknown', name: 'Unknown', isSystem: true });
|
||||
|
||||
formComponent.form = formModel;
|
||||
expect(formComponent.onOutcomeClicked(outcome)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should require custom action name to complete form', () => {
|
||||
const formModel = new FormModel();
|
||||
let outcome = new FormOutcomeModel(formModel, { id: 'custom' });
|
||||
|
||||
formComponent.form = formModel;
|
||||
expect(formComponent.onOutcomeClicked(outcome)).toBeFalsy();
|
||||
|
||||
outcome = new FormOutcomeModel(formModel, { id: 'custom', name: 'Custom' });
|
||||
spyOn(formComponent, 'completeTaskForm').and.stub();
|
||||
expect(formComponent.onOutcomeClicked(outcome)).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should fetch and parse form by task id', (done) => {
|
||||
spyOn(formService, 'getTask').and.returnValue(of({}));
|
||||
spyOn(formService, 'getTaskForm').and.callFake((currentTaskId) => {
|
||||
return new Observable((observer) => {
|
||||
observer.next({ taskId: currentTaskId });
|
||||
observer.complete();
|
||||
});
|
||||
});
|
||||
|
||||
const taskId = '456';
|
||||
formComponent.formLoaded.subscribe(() => {
|
||||
expect(formService.getTaskForm).toHaveBeenCalledWith(taskId);
|
||||
expect(formComponent.form).toBeDefined();
|
||||
expect(formComponent.form.taskId).toBe(taskId);
|
||||
done();
|
||||
});
|
||||
|
||||
expect(formComponent.form).toBeUndefined();
|
||||
formComponent.getFormByTaskId(taskId);
|
||||
});
|
||||
|
||||
it('should handle error when getting form by task id', (done) => {
|
||||
const error = 'Some error';
|
||||
|
||||
spyOn(formService, 'getTask').and.returnValue(of({}));
|
||||
spyOn(formComponent, 'handleError').and.stub();
|
||||
spyOn(formService, 'getTaskForm').and.callFake((taskId) => {
|
||||
return throwError(error);
|
||||
});
|
||||
|
||||
formComponent.getFormByTaskId('123').then((_) => {
|
||||
expect(formComponent.handleError).toHaveBeenCalledWith(error);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('should apply readonly state when getting form by task id', (done) => {
|
||||
spyOn(formService, 'getTask').and.returnValue(of({}));
|
||||
spyOn(formService, 'getTaskForm').and.callFake((taskId) => {
|
||||
return new Observable((observer) => {
|
||||
observer.next({ taskId: taskId });
|
||||
observer.complete();
|
||||
});
|
||||
});
|
||||
|
||||
formComponent.readOnly = true;
|
||||
formComponent.getFormByTaskId('123').then((_) => {
|
||||
expect(formComponent.form).toBeDefined();
|
||||
expect(formComponent.form.readOnly).toBe(true);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('should fetch and parse form definition by id', () => {
|
||||
spyOn(formService, 'getFormDefinitionById').and.callFake((currentFormId) => {
|
||||
return new Observable((observer) => {
|
||||
observer.next({ id: currentFormId });
|
||||
observer.complete();
|
||||
});
|
||||
});
|
||||
|
||||
const formId = 456;
|
||||
let loaded = false;
|
||||
formComponent.formLoaded.subscribe(() => loaded = true);
|
||||
|
||||
expect(formComponent.form).toBeUndefined();
|
||||
formComponent.getFormDefinitionByFormId(formId);
|
||||
|
||||
expect(loaded).toBeTruthy();
|
||||
expect(formComponent.form).toBeDefined();
|
||||
expect(formComponent.form.id).toBe(formId);
|
||||
});
|
||||
|
||||
it('should handle error when getting form by definition id', () => {
|
||||
const error = 'Some error';
|
||||
|
||||
spyOn(formComponent, 'handleError').and.stub();
|
||||
spyOn(formService, 'getFormDefinitionById').and.callFake(() => throwError(error));
|
||||
|
||||
formComponent.getFormDefinitionByFormId(123);
|
||||
expect(formComponent.handleError).toHaveBeenCalledWith(error);
|
||||
});
|
||||
|
||||
it('should fetch and parse form definition by form name', () => {
|
||||
spyOn(formService, 'getFormDefinitionByName').and.callFake((currentFormName) => {
|
||||
return new Observable((observer) => {
|
||||
observer.next(currentFormName);
|
||||
observer.complete();
|
||||
});
|
||||
});
|
||||
|
||||
spyOn(formService, 'getFormDefinitionById').and.callFake((currentFormName) => {
|
||||
return new Observable((observer) => {
|
||||
observer.next({ name: currentFormName });
|
||||
observer.complete();
|
||||
});
|
||||
});
|
||||
|
||||
const formName = '<form>';
|
||||
let loaded = false;
|
||||
formComponent.formLoaded.subscribe(() => loaded = true);
|
||||
|
||||
expect(formComponent.form).toBeUndefined();
|
||||
formComponent.getFormDefinitionByFormName(formName);
|
||||
|
||||
expect(loaded).toBeTruthy();
|
||||
expect(formService.getFormDefinitionByName).toHaveBeenCalledWith(formName);
|
||||
expect(formComponent.form).toBeDefined();
|
||||
expect(formComponent.form.name).toBe(formName);
|
||||
});
|
||||
|
||||
it('should save task form and raise corresponding event', () => {
|
||||
spyOn(formService, 'saveTaskForm').and.callFake(() => {
|
||||
return new Observable((observer) => {
|
||||
observer.next();
|
||||
observer.complete();
|
||||
});
|
||||
});
|
||||
|
||||
let saved = false;
|
||||
let savedForm = null;
|
||||
formComponent.formSaved.subscribe((form) => {
|
||||
saved = true;
|
||||
savedForm = form;
|
||||
});
|
||||
|
||||
const formModel = new FormModel({
|
||||
taskId: '123',
|
||||
fields: [
|
||||
{ id: 'field1' },
|
||||
{ id: 'field2' }
|
||||
]
|
||||
});
|
||||
formComponent.form = formModel;
|
||||
formComponent.saveTaskForm();
|
||||
|
||||
expect(formService.saveTaskForm).toHaveBeenCalledWith(formModel.taskId, formModel.values);
|
||||
expect(saved).toBeTruthy();
|
||||
expect(savedForm).toEqual(formModel);
|
||||
});
|
||||
|
||||
it('should handle error during form save', () => {
|
||||
const error = 'Error';
|
||||
spyOn(formService, 'saveTaskForm').and.callFake(() => throwError(error));
|
||||
spyOn(formComponent, 'handleError').and.stub();
|
||||
|
||||
formComponent.form = new FormModel({ taskId: '123' });
|
||||
formComponent.saveTaskForm();
|
||||
|
||||
expect(formComponent.handleError).toHaveBeenCalledWith(error);
|
||||
});
|
||||
|
||||
it('should require form with task id to save', () => {
|
||||
spyOn(formService, 'saveTaskForm').and.stub();
|
||||
|
||||
formComponent.form = null;
|
||||
formComponent.saveTaskForm();
|
||||
|
||||
formComponent.form = new FormModel();
|
||||
formComponent.saveTaskForm();
|
||||
|
||||
expect(formService.saveTaskForm).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should require form with task id to complete', () => {
|
||||
spyOn(formService, 'completeTaskForm').and.stub();
|
||||
|
||||
formComponent.form = null;
|
||||
formComponent.completeTaskForm('save');
|
||||
|
||||
formComponent.form = new FormModel();
|
||||
formComponent.completeTaskForm('complete');
|
||||
|
||||
expect(formService.completeTaskForm).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should complete form form and raise corresponding event', () => {
|
||||
spyOn(formService, 'completeTaskForm').and.callFake(() => {
|
||||
return new Observable((observer) => {
|
||||
observer.next();
|
||||
observer.complete();
|
||||
});
|
||||
});
|
||||
|
||||
const outcome = 'complete';
|
||||
let completed = false;
|
||||
formComponent.formCompleted.subscribe(() => completed = true);
|
||||
|
||||
const formModel = new FormModel({
|
||||
taskId: '123',
|
||||
fields: [
|
||||
{ id: 'field1' },
|
||||
{ id: 'field2' }
|
||||
]
|
||||
});
|
||||
|
||||
formComponent.form = formModel;
|
||||
formComponent.completeTaskForm(outcome);
|
||||
|
||||
expect(formService.completeTaskForm).toHaveBeenCalledWith(formModel.taskId, formModel.values, outcome);
|
||||
expect(completed).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should require json to parse form', () => {
|
||||
expect(formComponent.parseForm(null)).toBeNull();
|
||||
});
|
||||
|
||||
it('should parse form from json', () => {
|
||||
const form = formComponent.parseForm({
|
||||
id: 1,
|
||||
fields: [
|
||||
{ id: 'field1', type: FormFieldTypes.CONTAINER }
|
||||
]
|
||||
});
|
||||
|
||||
expect(form).toBeDefined();
|
||||
expect(form.id).toBe(1);
|
||||
expect(form.fields.length).toBe(1);
|
||||
expect(form.fields[0].id).toBe('field1');
|
||||
});
|
||||
|
||||
it('should provide outcomes for form definition', () => {
|
||||
spyOn(formComponent, 'getFormDefinitionOutcomes').and.callThrough();
|
||||
|
||||
const form = formComponent.parseForm({ id: 1 });
|
||||
expect(formComponent.getFormDefinitionOutcomes).toHaveBeenCalledWith(form);
|
||||
});
|
||||
|
||||
it('should prevent default outcome execution', () => {
|
||||
|
||||
const outcome = new FormOutcomeModel(new FormModel(), {
|
||||
id: FormComponent.CUSTOM_OUTCOME_ID,
|
||||
name: 'Custom'
|
||||
});
|
||||
|
||||
formComponent.form = new FormModel();
|
||||
formComponent.executeOutcome.subscribe((event: FormOutcomeEvent) => {
|
||||
expect(event.outcome).toBe(outcome);
|
||||
event.preventDefault();
|
||||
expect(event.defaultPrevented).toBeTruthy();
|
||||
});
|
||||
|
||||
const result = formComponent.onOutcomeClicked(outcome);
|
||||
expect(result).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should not prevent default outcome execution', () => {
|
||||
const outcome = new FormOutcomeModel(new FormModel(), {
|
||||
id: FormComponent.CUSTOM_OUTCOME_ID,
|
||||
name: 'Custom'
|
||||
});
|
||||
|
||||
formComponent.form = new FormModel();
|
||||
formComponent.executeOutcome.subscribe((event: FormOutcomeEvent) => {
|
||||
expect(event.outcome).toBe(outcome);
|
||||
expect(event.defaultPrevented).toBeFalsy();
|
||||
});
|
||||
|
||||
spyOn(formComponent, 'completeTaskForm').and.callThrough();
|
||||
|
||||
const result = formComponent.onOutcomeClicked(outcome);
|
||||
expect(result).toBeTruthy();
|
||||
|
||||
expect(formComponent.completeTaskForm).toHaveBeenCalledWith(outcome.name);
|
||||
});
|
||||
|
||||
it('should check visibility only if field with form provided', () => {
|
||||
|
||||
formComponent.checkVisibility(null);
|
||||
expect(visibilityService.refreshVisibility).not.toHaveBeenCalled();
|
||||
|
||||
let field = new FormFieldModel(null);
|
||||
formComponent.checkVisibility(field);
|
||||
expect(visibilityService.refreshVisibility).not.toHaveBeenCalled();
|
||||
|
||||
field = new FormFieldModel(new FormModel());
|
||||
formComponent.checkVisibility(field);
|
||||
expect(visibilityService.refreshVisibility).toHaveBeenCalledWith(field.form);
|
||||
});
|
||||
|
||||
it('should load form for ecm node', () => {
|
||||
const metadata = {};
|
||||
spyOn(nodeService, 'getNodeMetadata').and.returnValue(
|
||||
new Observable((observer) => {
|
||||
observer.next({ metadata: metadata });
|
||||
observer.complete();
|
||||
})
|
||||
);
|
||||
spyOn(formComponent, 'loadFormFromActiviti').and.stub();
|
||||
|
||||
const nodeId = '<id>';
|
||||
const change = new SimpleChange(null, nodeId, false);
|
||||
formComponent.ngOnChanges({ 'nodeId': change });
|
||||
|
||||
expect(nodeService.getNodeMetadata).toHaveBeenCalledWith(nodeId);
|
||||
expect(formComponent.loadFormFromActiviti).toHaveBeenCalled();
|
||||
expect(formComponent.data).toBe(metadata);
|
||||
});
|
||||
|
||||
it('should disable outcome buttons for readonly form', () => {
|
||||
const formModel = new FormModel();
|
||||
formModel.readOnly = true;
|
||||
formComponent.form = formModel;
|
||||
|
||||
const outcome = new FormOutcomeModel(new FormModel(), {
|
||||
id: FormComponent.CUSTOM_OUTCOME_ID,
|
||||
name: 'Custom'
|
||||
});
|
||||
|
||||
expect(formComponent.isOutcomeButtonEnabled(outcome)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should require outcome to eval button state', () => {
|
||||
formComponent.form = new FormModel();
|
||||
expect(formComponent.isOutcomeButtonEnabled(null)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should always enable save outcome for writeable form', () => {
|
||||
const formModel = new FormModel();
|
||||
|
||||
const field = new FormFieldModel(formModel, {
|
||||
type: 'text',
|
||||
value: null,
|
||||
required: true
|
||||
});
|
||||
|
||||
const containerModel = new ContainerModel(field);
|
||||
formModel.fields.push(containerModel);
|
||||
formComponent.form = formModel;
|
||||
formModel.onFormFieldChanged(field);
|
||||
|
||||
expect(formModel.isValid).toBeFalsy();
|
||||
|
||||
const outcome = new FormOutcomeModel(new FormModel(), {
|
||||
id: FormComponent.SAVE_OUTCOME_ID,
|
||||
name: FormOutcomeModel.SAVE_ACTION
|
||||
});
|
||||
|
||||
formComponent.readOnly = true;
|
||||
expect(formComponent.isOutcomeButtonEnabled(outcome)).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should disable outcome buttons for invalid form', () => {
|
||||
const formModel = new FormModel();
|
||||
const field = new FormFieldModel(formModel, {
|
||||
type: 'text',
|
||||
value: null,
|
||||
required: true
|
||||
});
|
||||
|
||||
const containerModel = new ContainerModel(field);
|
||||
formModel.fields.push(containerModel);
|
||||
formComponent.form = formModel;
|
||||
formModel.onFormFieldChanged(field);
|
||||
|
||||
expect(formModel.isValid).toBeFalsy();
|
||||
|
||||
const outcome = new FormOutcomeModel(new FormModel(), {
|
||||
id: FormComponent.CUSTOM_OUTCOME_ID,
|
||||
name: 'Custom'
|
||||
});
|
||||
|
||||
expect(formComponent.isOutcomeButtonEnabled(outcome)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should disable complete outcome button when disableCompleteButton is true', () => {
|
||||
const formModel = new FormModel();
|
||||
formComponent.form = formModel;
|
||||
formComponent.disableCompleteButton = true;
|
||||
|
||||
expect(formModel.isValid).toBeTruthy();
|
||||
const completeOutcome = formComponent.form.outcomes.find((outcome) => outcome.name === FormOutcomeModel.COMPLETE_ACTION);
|
||||
|
||||
expect(formComponent.isOutcomeButtonEnabled(completeOutcome)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should disable start process outcome button when disableStartProcessButton is true', () => {
|
||||
const formModel = new FormModel();
|
||||
formComponent.form = formModel;
|
||||
formComponent.disableStartProcessButton = true;
|
||||
|
||||
expect(formModel.isValid).toBeTruthy();
|
||||
const startProcessOutcome = formComponent.form.outcomes.find((outcome) => outcome.name === FormOutcomeModel.START_PROCESS_ACTION);
|
||||
|
||||
expect(formComponent.isOutcomeButtonEnabled(startProcessOutcome)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should raise [executeOutcome] event for formService', (done) => {
|
||||
formService.executeOutcome.subscribe(() => {
|
||||
done();
|
||||
});
|
||||
|
||||
const outcome = new FormOutcomeModel(new FormModel(), {
|
||||
id: FormComponent.CUSTOM_OUTCOME_ID,
|
||||
name: 'Custom'
|
||||
});
|
||||
|
||||
formComponent.form = new FormModel();
|
||||
formComponent.onOutcomeClicked(outcome);
|
||||
});
|
||||
|
||||
it('should refresh form values when data is changed', () => {
|
||||
formComponent.form = new FormModel(JSON.parse(JSON.stringify(fakeForm)));
|
||||
let formFields = formComponent.form.getFormFields();
|
||||
|
||||
let labelField = formFields.find((field) => field.id === 'label');
|
||||
let radioField = formFields.find((field) => field.id === 'radio');
|
||||
expect(labelField.value).toBe('empty');
|
||||
expect(radioField.value).toBeNull();
|
||||
|
||||
const formValues: any = {};
|
||||
formValues.label = {
|
||||
id: 'option_2',
|
||||
name: 'test2'
|
||||
};
|
||||
formValues.radio = { id: 'option_2', name: 'Option 2' };
|
||||
const change = new SimpleChange(null, formValues, false);
|
||||
formComponent.data = formValues;
|
||||
formComponent.ngOnChanges({ 'data': change });
|
||||
|
||||
formFields = formComponent.form.getFormFields();
|
||||
labelField = formFields.find((field) => field.id === 'label');
|
||||
radioField = formFields.find((field) => field.id === 'radio');
|
||||
expect(labelField.value).toBe('option_2');
|
||||
expect(radioField.value).toBe('option_2');
|
||||
});
|
||||
|
||||
it('should refresh radio buttons value when id is given to data', () => {
|
||||
formComponent.form = new FormModel(JSON.parse(JSON.stringify(fakeForm)));
|
||||
let formFields = formComponent.form.getFormFields();
|
||||
let radioFieldById = formFields.find((field) => field.id === 'radio');
|
||||
|
||||
const formValues: any = {};
|
||||
formValues.radio = 'option_3';
|
||||
const change = new SimpleChange(null, formValues, false);
|
||||
formComponent.data = formValues;
|
||||
formComponent.ngOnChanges({ 'data': change });
|
||||
|
||||
formFields = formComponent.form.getFormFields();
|
||||
radioFieldById = formFields.find((field) => field.id === 'radio');
|
||||
expect(radioFieldById.value).toBe('option_3');
|
||||
});
|
||||
});
|
||||
409
lib/process-services/form/form.component.ts
Normal file
409
lib/process-services/form/form.component.ts
Normal file
@@ -0,0 +1,409 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 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, EventEmitter, Input, Output, ViewEncapsulation, SimpleChanges, OnInit, OnDestroy, OnChanges
|
||||
} from '@angular/core';
|
||||
import { AttachFileWidgetComponent, AttachFolderWidgetComponent } from '../content-widget';
|
||||
import { EcmModelService, NodeService, WidgetVisibilityService,
|
||||
FormService, FormRenderingService, FormBaseComponent, FormOutcomeModel,
|
||||
ValidateFormEvent, FormEvent, FormErrorEvent, FormFieldModel,
|
||||
FormModel, FormOutcomeEvent, FormValues, ContentLinkModel } from '@alfresco/adf-core';
|
||||
|
||||
import { Observable, of, Subscription } from 'rxjs';
|
||||
import { switchMap } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-form',
|
||||
templateUrl: './form.component.html',
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class FormComponent extends FormBaseComponent implements OnInit, OnDestroy, OnChanges {
|
||||
|
||||
/** Underlying form model instance. */
|
||||
@Input()
|
||||
form: FormModel;
|
||||
|
||||
/** Task id to fetch corresponding form and values. */
|
||||
@Input()
|
||||
taskId: string;
|
||||
|
||||
/** Content Services node ID for the form metadata. */
|
||||
@Input()
|
||||
nodeId: string;
|
||||
|
||||
/** The id of the form definition to load and display with custom values. */
|
||||
@Input()
|
||||
formId: number;
|
||||
|
||||
/** Name of the form definition to load and display with custom values. */
|
||||
@Input()
|
||||
formName: string;
|
||||
|
||||
/** Toggle saving of form metadata. */
|
||||
@Input()
|
||||
saveMetadata: boolean = false;
|
||||
|
||||
/** Custom form values map to be used with the rendered form. */
|
||||
@Input()
|
||||
data: FormValues;
|
||||
|
||||
/** Emitted when the form is submitted with the `Save` or custom outcomes. */
|
||||
@Output()
|
||||
formSaved: EventEmitter<FormModel> = new EventEmitter<FormModel>();
|
||||
|
||||
/** Emitted when the form is submitted with the `Complete` outcome. */
|
||||
@Output()
|
||||
formCompleted: EventEmitter<FormModel> = new EventEmitter<FormModel>();
|
||||
|
||||
/** Emitted when form content is clicked. */
|
||||
@Output()
|
||||
formContentClicked: EventEmitter<ContentLinkModel> = new EventEmitter<ContentLinkModel>();
|
||||
|
||||
/** Emitted when the form is loaded or reloaded. */
|
||||
@Output()
|
||||
formLoaded: EventEmitter<FormModel> = new EventEmitter<FormModel>();
|
||||
|
||||
/** Emitted when form values are refreshed due to a data property change. */
|
||||
@Output()
|
||||
formDataRefreshed: EventEmitter<FormModel> = new EventEmitter<FormModel>();
|
||||
|
||||
debugMode: boolean = false;
|
||||
|
||||
protected subscriptions: Subscription[] = [];
|
||||
|
||||
constructor(protected formService: FormService,
|
||||
protected visibilityService: WidgetVisibilityService,
|
||||
protected ecmModelService: EcmModelService,
|
||||
protected nodeService: NodeService,
|
||||
protected formRenderingService: FormRenderingService) {
|
||||
super();
|
||||
this.formRenderingService.setComponentTypeResolver('upload', () => AttachFileWidgetComponent, true);
|
||||
this.formRenderingService.setComponentTypeResolver('select-folder', () => AttachFolderWidgetComponent, true);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.subscriptions.push(
|
||||
this.formService.formContentClicked.subscribe((content: ContentLinkModel) => {
|
||||
this.formContentClicked.emit(content);
|
||||
}),
|
||||
this.formService.validateForm.subscribe((validateFormEvent: ValidateFormEvent) => {
|
||||
if (validateFormEvent.errorsField.length > 0) {
|
||||
this.formError.next(validateFormEvent.errorsField);
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.subscriptions.forEach((subscription) => subscription.unsubscribe());
|
||||
this.subscriptions = [];
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
const taskId = changes['taskId'];
|
||||
if (taskId && taskId.currentValue) {
|
||||
this.getFormByTaskId(taskId.currentValue);
|
||||
return;
|
||||
}
|
||||
|
||||
const formId = changes['formId'];
|
||||
if (formId && formId.currentValue) {
|
||||
this.getFormDefinitionByFormId(formId.currentValue);
|
||||
return;
|
||||
}
|
||||
|
||||
const formName = changes['formName'];
|
||||
if (formName && formName.currentValue) {
|
||||
this.getFormDefinitionByFormName(formName.currentValue);
|
||||
return;
|
||||
}
|
||||
|
||||
const nodeId = changes['nodeId'];
|
||||
if (nodeId && nodeId.currentValue) {
|
||||
this.loadFormForEcmNode(nodeId.currentValue);
|
||||
return;
|
||||
}
|
||||
|
||||
const data = changes['data'];
|
||||
if (data && data.currentValue) {
|
||||
this.refreshFormData();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Invoked when user clicks form refresh button.
|
||||
*/
|
||||
onRefreshClicked() {
|
||||
this.loadForm();
|
||||
}
|
||||
|
||||
loadForm() {
|
||||
if (this.taskId) {
|
||||
this.getFormByTaskId(this.taskId);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.formId) {
|
||||
this.getFormDefinitionByFormId(this.formId);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.formName) {
|
||||
this.getFormDefinitionByFormName(this.formName);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
findProcessVariablesByTaskId(taskId: string): Observable<any> {
|
||||
return this.formService.getTask(taskId).pipe(
|
||||
switchMap((task: any) => {
|
||||
if (this.isAProcessTask(task)) {
|
||||
return this.visibilityService.getTaskProcessVariable(taskId);
|
||||
} else {
|
||||
return of({});
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
isAProcessTask(taskRepresentation) {
|
||||
return taskRepresentation.processDefinitionId && taskRepresentation.processDefinitionDeploymentId !== 'null';
|
||||
}
|
||||
|
||||
getFormByTaskId(taskId: string): Promise<FormModel> {
|
||||
return new Promise<FormModel>((resolve, reject) => {
|
||||
this.findProcessVariablesByTaskId(taskId).subscribe((processVariables) => {
|
||||
this.formService
|
||||
.getTaskForm(taskId)
|
||||
.subscribe(
|
||||
(form) => {
|
||||
const parsedForm = this.parseForm(form);
|
||||
this.visibilityService.refreshVisibility(parsedForm);
|
||||
parsedForm.validateForm();
|
||||
this.form = parsedForm;
|
||||
this.onFormLoaded(this.form);
|
||||
resolve(this.form);
|
||||
},
|
||||
(error) => {
|
||||
this.handleError(error);
|
||||
// reject(error);
|
||||
resolve(null);
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
getFormDefinitionByFormId(formId: number) {
|
||||
this.formService
|
||||
.getFormDefinitionById(formId)
|
||||
.subscribe(
|
||||
(form) => {
|
||||
this.formName = form.name;
|
||||
this.form = this.parseForm(form);
|
||||
this.visibilityService.refreshVisibility(this.form);
|
||||
this.form.validateForm();
|
||||
this.onFormLoaded(this.form);
|
||||
},
|
||||
(error) => {
|
||||
this.handleError(error);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
getFormDefinitionByFormName(formName: string) {
|
||||
this.formService
|
||||
.getFormDefinitionByName(formName)
|
||||
.subscribe(
|
||||
(id) => {
|
||||
this.formService.getFormDefinitionById(id).subscribe(
|
||||
(form) => {
|
||||
this.form = this.parseForm(form);
|
||||
this.visibilityService.refreshVisibility(this.form);
|
||||
this.form.validateForm();
|
||||
this.onFormLoaded(this.form);
|
||||
},
|
||||
(error) => {
|
||||
this.handleError(error);
|
||||
}
|
||||
);
|
||||
},
|
||||
(error) => {
|
||||
this.handleError(error);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
saveTaskForm() {
|
||||
if (this.form && this.form.taskId) {
|
||||
this.formService
|
||||
.saveTaskForm(this.form.taskId, this.form.values)
|
||||
.subscribe(
|
||||
() => {
|
||||
this.onTaskSaved(this.form);
|
||||
this.storeFormAsMetadata();
|
||||
},
|
||||
(error) => this.onTaskSavedError(this.form, error)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
completeTaskForm(outcome?: string) {
|
||||
if (this.form && this.form.taskId) {
|
||||
this.formService
|
||||
.completeTaskForm(this.form.taskId, this.form.values, outcome)
|
||||
.subscribe(
|
||||
() => {
|
||||
this.onTaskCompleted(this.form);
|
||||
this.storeFormAsMetadata();
|
||||
},
|
||||
(error) => this.onTaskCompletedError(this.form, error)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
handleError(err: any): any {
|
||||
this.error.emit(err);
|
||||
}
|
||||
|
||||
parseForm(json: any): FormModel {
|
||||
if (json) {
|
||||
const form = new FormModel(json, this.data, this.readOnly, this.formService);
|
||||
if (!json.fields) {
|
||||
form.outcomes = this.getFormDefinitionOutcomes(form);
|
||||
}
|
||||
if (this.fieldValidators && this.fieldValidators.length > 0) {
|
||||
form.fieldValidators = this.fieldValidators;
|
||||
}
|
||||
return form;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get custom set of outcomes for a Form Definition.
|
||||
* @param form Form definition model.
|
||||
*/
|
||||
getFormDefinitionOutcomes(form: FormModel): FormOutcomeModel[] {
|
||||
return [
|
||||
new FormOutcomeModel(form, { id: '$save', name: FormOutcomeModel.SAVE_ACTION, isSystem: true })
|
||||
];
|
||||
}
|
||||
|
||||
checkVisibility(field: FormFieldModel) {
|
||||
if (field && field.form) {
|
||||
this.visibilityService.refreshVisibility(field.form);
|
||||
}
|
||||
}
|
||||
|
||||
private refreshFormData() {
|
||||
this.form = this.parseForm(this.form.json);
|
||||
this.onFormLoaded(this.form);
|
||||
this.onFormDataRefreshed(this.form);
|
||||
}
|
||||
|
||||
private loadFormForEcmNode(nodeId: string): void {
|
||||
this.nodeService.getNodeMetadata(nodeId).subscribe((data) => {
|
||||
this.data = data.metadata;
|
||||
this.loadFormFromActiviti(data.nodeType);
|
||||
},
|
||||
this.handleError);
|
||||
}
|
||||
|
||||
loadFormFromActiviti(nodeType: string): any {
|
||||
this.formService.searchFrom(nodeType).subscribe(
|
||||
(form) => {
|
||||
if (!form) {
|
||||
this.formService.createFormFromANode(nodeType).subscribe((formMetadata) => {
|
||||
this.loadFormFromFormId(formMetadata.id);
|
||||
});
|
||||
} else {
|
||||
this.loadFormFromFormId(form.id);
|
||||
}
|
||||
},
|
||||
(error) => {
|
||||
this.handleError(error);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
private loadFormFromFormId(formId: number) {
|
||||
this.formId = formId;
|
||||
this.loadForm();
|
||||
}
|
||||
|
||||
protected storeFormAsMetadata() {
|
||||
if (this.saveMetadata) {
|
||||
this.ecmModelService.createEcmTypeForActivitiForm(this.formName, this.form).subscribe((type) => {
|
||||
this.nodeService.createNodeMetadata(type.nodeType || type.entry.prefixedName, EcmModelService.MODEL_NAMESPACE, this.form.values, this.path, this.nameNode);
|
||||
},
|
||||
(error) => {
|
||||
this.handleError(error);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
protected onFormLoaded(form: FormModel) {
|
||||
this.formLoaded.emit(form);
|
||||
this.formService.formLoaded.next(new FormEvent(form));
|
||||
}
|
||||
|
||||
protected onFormDataRefreshed(form: FormModel) {
|
||||
this.formDataRefreshed.emit(form);
|
||||
this.formService.formDataRefreshed.next(new FormEvent(form));
|
||||
}
|
||||
|
||||
protected onTaskSaved(form: FormModel) {
|
||||
this.formSaved.emit(form);
|
||||
this.formService.taskSaved.next(new FormEvent(form));
|
||||
}
|
||||
|
||||
protected onTaskSavedError(form: FormModel, error: any) {
|
||||
this.handleError(error);
|
||||
this.formService.taskSavedError.next(new FormErrorEvent(form, error));
|
||||
}
|
||||
|
||||
protected onTaskCompleted(form: FormModel) {
|
||||
this.formCompleted.emit(form);
|
||||
this.formService.taskCompleted.next(new FormEvent(form));
|
||||
}
|
||||
|
||||
protected onTaskCompletedError(form: FormModel, error: any) {
|
||||
this.handleError(error);
|
||||
this.formService.taskCompletedError.next(new FormErrorEvent(form, error));
|
||||
}
|
||||
|
||||
protected onExecuteOutcome(outcome: FormOutcomeModel): boolean {
|
||||
const args = new FormOutcomeEvent(outcome);
|
||||
|
||||
this.formService.executeOutcome.next(args);
|
||||
if (args.defaultPrevented) {
|
||||
return false;
|
||||
}
|
||||
|
||||
this.executeOutcome.emit(args);
|
||||
if (args.defaultPrevented) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
}
|
||||
244
lib/process-services/form/form.component.visibility.spec.ts
Normal file
244
lib/process-services/form/form.component.visibility.spec.ts
Normal file
@@ -0,0 +1,244 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 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 { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { SimpleChange } from '@angular/core';
|
||||
import { of } from 'rxjs';
|
||||
|
||||
import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
|
||||
import { By } from '@angular/platform-browser';
|
||||
|
||||
import { formDefinitionDropdownField, formDefinitionTwoTextFields,
|
||||
formDefinitionRequiredField, FormService, setupTestBed, CoreModule,
|
||||
formDefVisibilitiFieldDependsOnNextOne, formDefVisibilitiFieldDependsOnPreviousOne,
|
||||
formReadonlyTwoTextFields } from '@alfresco/adf-core';
|
||||
import { FormComponent } from './form.component';
|
||||
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
|
||||
|
||||
/** Duration of the select opening animation. */
|
||||
const SELECT_OPEN_ANIMATION = 200;
|
||||
|
||||
/** Duration of the select closing animation and the timeout interval for the backdrop. */
|
||||
const SELECT_CLOSE_ANIMATION = 500;
|
||||
|
||||
describe('FormComponent UI and visibility', () => {
|
||||
let component: FormComponent;
|
||||
let service: FormService;
|
||||
let fixture: ComponentFixture<FormComponent>;
|
||||
|
||||
function openSelect() {
|
||||
let trigger: HTMLElement;
|
||||
trigger = fixture.debugElement.query(By.css('[class="mat-select-trigger"]')).nativeElement;
|
||||
trigger.click();
|
||||
fixture.detectChanges();
|
||||
}
|
||||
|
||||
setupTestBed({
|
||||
imports: [
|
||||
NoopAnimationsModule,
|
||||
CoreModule.forRoot()
|
||||
],
|
||||
declarations: [
|
||||
FormComponent
|
||||
],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(FormComponent);
|
||||
component = fixture.componentInstance;
|
||||
service = TestBed.get(FormService);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.destroy();
|
||||
TestBed.resetTestingModule();
|
||||
});
|
||||
|
||||
it('should create instance of FormComponent', () => {
|
||||
expect(fixture.componentInstance instanceof FormComponent).toBe(true, 'should create FormComponent');
|
||||
});
|
||||
|
||||
describe('Validation icon', () => {
|
||||
|
||||
it('should display valid icon for valid form', () => {
|
||||
spyOn(service, 'getTask').and.returnValue(of({}));
|
||||
spyOn(service, 'getTaskForm').and.returnValue(of(formDefinitionTwoTextFields));
|
||||
|
||||
const change = new SimpleChange(null, 1, true);
|
||||
component.ngOnChanges({ 'taskId': change });
|
||||
fixture.detectChanges();
|
||||
expect(fixture.debugElement.query(By.css('#adf-valid-form-icon'))).toBeDefined();
|
||||
expect(fixture.debugElement.query(By.css('#adf-valid-form-icon'))).not.toBeNull();
|
||||
expect(fixture.debugElement.query(By.css('#adf-invalid-form-icon'))).toBeNull();
|
||||
});
|
||||
|
||||
it('should display invalid icon for valid form', () => {
|
||||
spyOn(service, 'getTask').and.returnValue(of({}));
|
||||
spyOn(service, 'getTaskForm').and.returnValue(of(formDefinitionRequiredField));
|
||||
|
||||
const change = new SimpleChange(null, 1, true);
|
||||
component.ngOnChanges({ 'taskId': change });
|
||||
fixture.detectChanges();
|
||||
expect(fixture.debugElement.query(By.css('#adf-valid-form-icon'))).toBeNull();
|
||||
expect(fixture.debugElement.query(By.css('#adf-invalid-form-icon'))).toBeDefined();
|
||||
expect(fixture.debugElement.query(By.css('#adf-invalid-form-icon'))).not.toBeNull();
|
||||
});
|
||||
|
||||
it('should NOT display validation icon when [showValidationIcon] is false', () => {
|
||||
spyOn(service, 'getTask').and.returnValue(of({}));
|
||||
spyOn(service, 'getTaskForm').and.returnValue(of(formDefinitionTwoTextFields));
|
||||
|
||||
const change = new SimpleChange(null, 1, true);
|
||||
component.ngOnChanges({ 'taskId': change });
|
||||
component.showValidationIcon = false;
|
||||
fixture.detectChanges();
|
||||
expect(fixture.debugElement.query(By.css('#adf-valid-form-icon'))).toBeNull();
|
||||
expect(fixture.debugElement.query(By.css('#adf-invalid-form-icon'))).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('form definition', () => {
|
||||
|
||||
it('should display two text fields form definition', () => {
|
||||
spyOn(service, 'getTask').and.returnValue(of({}));
|
||||
spyOn(service, 'getTaskForm').and.returnValue(of(formDefinitionTwoTextFields));
|
||||
|
||||
const change = new SimpleChange(null, 1, true);
|
||||
component.ngOnChanges({ 'taskId': change });
|
||||
fixture.detectChanges();
|
||||
|
||||
const firstNameEl = fixture.debugElement.query(By.css('#firstname'));
|
||||
expect(firstNameEl).not.toBeNull();
|
||||
expect(firstNameEl).toBeDefined();
|
||||
|
||||
const lastNameEl = fixture.debugElement.query(By.css('#lastname'));
|
||||
expect(lastNameEl).not.toBeNull();
|
||||
expect(lastNameEl).toBeDefined();
|
||||
});
|
||||
|
||||
it('should display dropdown field', fakeAsync(() => {
|
||||
spyOn(service, 'getTask').and.returnValue(of({}));
|
||||
spyOn(service, 'getTaskForm').and.returnValue(of(formDefinitionDropdownField));
|
||||
|
||||
const change = new SimpleChange(null, 1, true);
|
||||
component.ngOnChanges({ 'taskId': change });
|
||||
fixture.detectChanges();
|
||||
|
||||
openSelect();
|
||||
tick(SELECT_OPEN_ANIMATION);
|
||||
|
||||
const dropdown = fixture.debugElement.queryAll(By.css('#country'));
|
||||
expect(dropdown).toBeDefined();
|
||||
expect(dropdown).not.toBeNull();
|
||||
const options = fixture.debugElement.queryAll(By.css('mat-option'));
|
||||
const optOne = options[1];
|
||||
const optTwo = options[2];
|
||||
const optThree = options[3];
|
||||
|
||||
expect(optOne.nativeElement.innerText.trim()).toEqual('united kingdom');
|
||||
expect(optTwo.nativeElement.innerText.trim()).toEqual('italy');
|
||||
expect(optThree.nativeElement.innerText.trim()).toEqual('france');
|
||||
|
||||
optTwo.nativeElement.click();
|
||||
fixture.detectChanges();
|
||||
expect(dropdown[0].nativeElement.innerText.trim()).toEqual('italy');
|
||||
tick(SELECT_CLOSE_ANIMATION);
|
||||
}));
|
||||
|
||||
describe('Visibility conditions', () => {
|
||||
|
||||
it('should hide the field based on the next one', () => {
|
||||
spyOn(service, 'getTask').and.returnValue(of({}));
|
||||
spyOn(service, 'getTaskForm').and.returnValue(of(formDefVisibilitiFieldDependsOnNextOne));
|
||||
|
||||
const change = new SimpleChange(null, 1, true);
|
||||
component.ngOnChanges({ 'taskId': change });
|
||||
fixture.detectChanges();
|
||||
|
||||
const firstEl = fixture.debugElement.query(By.css('#field-country-container'));
|
||||
expect(firstEl.nativeElement.hidden).toBeTruthy();
|
||||
|
||||
const secondEl = fixture.debugElement.query(By.css('#name'));
|
||||
expect(secondEl).not.toBeNull();
|
||||
expect(secondEl).toBeDefined();
|
||||
expect(fixture.nativeElement.querySelector('#field-name-container').hidden).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should hide the field based on the previous one', () => {
|
||||
spyOn(service, 'getTask').and.returnValue(of({}));
|
||||
spyOn(service, 'getTaskForm').and.returnValue(of(formDefVisibilitiFieldDependsOnPreviousOne));
|
||||
|
||||
const change = new SimpleChange(null, 1, true);
|
||||
component.ngOnChanges({ 'taskId': change });
|
||||
fixture.detectChanges();
|
||||
|
||||
const firstEl = fixture.debugElement.query(By.css('#name'));
|
||||
expect(firstEl).not.toBeNull();
|
||||
expect(firstEl).toBeDefined();
|
||||
expect(fixture.nativeElement.querySelector('#field-name-container').hidden).toBeFalsy();
|
||||
|
||||
const secondEl = fixture.debugElement.query(By.css('#field-country-container'));
|
||||
expect(secondEl.nativeElement.hidden).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should show the hidden field when the visibility condition change to true', () => {
|
||||
spyOn(service, 'getTask').and.returnValue(of({}));
|
||||
spyOn(service, 'getTaskForm').and.returnValue(of(formDefVisibilitiFieldDependsOnNextOne));
|
||||
|
||||
const change = new SimpleChange(null, 1, true);
|
||||
component.ngOnChanges({ 'taskId': change });
|
||||
fixture.detectChanges();
|
||||
|
||||
let firstEl = fixture.debugElement.query(By.css('#field-country-container'));
|
||||
expect(firstEl.nativeElement.hidden).toBeTruthy();
|
||||
|
||||
const secondEl = fixture.debugElement.query(By.css('#field-name-container'));
|
||||
expect(secondEl.nativeElement.hidden).toBeFalsy();
|
||||
|
||||
const inputElement = fixture.nativeElement.querySelector('#name');
|
||||
inputElement.value = 'italy';
|
||||
inputElement.dispatchEvent(new Event('input'));
|
||||
fixture.detectChanges();
|
||||
|
||||
firstEl = fixture.debugElement.query(By.css('#field-country-container'));
|
||||
expect(firstEl.nativeElement.hidden).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Readonly Form', () => {
|
||||
it('should display two text fields readonly', () => {
|
||||
spyOn(service, 'getTask').and.returnValue(of({}));
|
||||
spyOn(service, 'getTaskForm').and.returnValue(of(formReadonlyTwoTextFields));
|
||||
|
||||
const change = new SimpleChange(null, 1, true);
|
||||
component.ngOnChanges({ 'taskId': change });
|
||||
fixture.detectChanges();
|
||||
|
||||
const firstNameEl = fixture.debugElement.query(By.css('#firstname'));
|
||||
expect(firstNameEl).not.toBeNull();
|
||||
expect(firstNameEl).toBeDefined();
|
||||
expect(firstNameEl.nativeElement.value).toEqual('fakeFirstName');
|
||||
|
||||
const lastNameEl = fixture.debugElement.query(By.css('#lastname'));
|
||||
expect(lastNameEl).not.toBeNull();
|
||||
expect(lastNameEl).toBeDefined();
|
||||
expect(lastNameEl.nativeElement.value).toEqual('fakeLastName');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
38
lib/process-services/form/form.module.ts
Normal file
38
lib/process-services/form/form.module.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 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 { NgModule } from '@angular/core';
|
||||
import { MaterialModule } from '../material.module';
|
||||
import { CoreModule } from '@alfresco/adf-core';
|
||||
import { FormComponent } from './form.component';
|
||||
import { StartFormComponent } from './start-form.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CoreModule.forChild(),
|
||||
MaterialModule
|
||||
],
|
||||
declarations: [
|
||||
FormComponent,
|
||||
StartFormComponent
|
||||
],
|
||||
exports: [
|
||||
FormComponent,
|
||||
StartFormComponent
|
||||
]
|
||||
})
|
||||
export class FormModule {}
|
||||
18
lib/process-services/form/index.ts
Normal file
18
lib/process-services/form/index.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 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 * from './public-api';
|
||||
20
lib/process-services/form/public-api.ts
Normal file
20
lib/process-services/form/public-api.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 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 * from './form.component';
|
||||
export * from './start-form.component';
|
||||
export * from './form.module';
|
||||
40
lib/process-services/form/start-form.component.html
Normal file
40
lib/process-services/form/start-form.component.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<div class="adf-start-form-container" *ngIf="hasForm()">
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>
|
||||
<h2 *ngIf="isTitleEnabled()" class="mdl-card__title-text">{{form.taskName}}</h2>
|
||||
</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div *ngIf="form.hasTabs()">
|
||||
<tabs-widget [tabs]="form.tabs" (formTabChanged)="checkVisibility($event);"></tabs-widget>
|
||||
</div>
|
||||
|
||||
<div *ngIf="!form.hasTabs() && form.hasFields()">
|
||||
<div *ngFor="let field of form.fields">
|
||||
<adf-form-field [field]="field.field"></adf-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
<mat-card-content class="adf-start-form-actions" *ngIf="showOutcomeButtons && form.hasOutcomes()"
|
||||
#outcomesContainer>
|
||||
<ng-content select="[adf-form-custom-button], [form-custom-button]"></ng-content>
|
||||
|
||||
<button *ngFor="let outcome of form.outcomes"
|
||||
mat-button
|
||||
[attr.data-automation-id]="'adf-form-' + outcome.name | lowercase"
|
||||
[disabled]="!isOutcomeButtonEnabled(outcome)"
|
||||
[class.mdl-button--colored]="!outcome.isSystem"
|
||||
[class.adf-form-hide-button]="!isOutcomeButtonVisible(outcome, form.readOnly)"
|
||||
(click)="onOutcomeClicked(outcome)">
|
||||
{{ outcome.name | uppercase | translate | uppercase }}
|
||||
</button>
|
||||
</mat-card-content>
|
||||
<mat-card-actions *ngIf="showRefreshButton">
|
||||
<button mat-button
|
||||
(click)="onRefreshClicked()">
|
||||
<mat-icon>refresh</mat-icon>
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</div>
|
||||
125
lib/process-services/form/start-form.component.scss
Normal file
125
lib/process-services/form/start-form.component.scss
Normal file
@@ -0,0 +1,125 @@
|
||||
@mixin adf-start-form-component-theme($theme) {
|
||||
|
||||
$config: mat-typography-config();
|
||||
$warn: map-get($theme, warn);
|
||||
$accent: map-get($theme, accent);
|
||||
|
||||
.adf {
|
||||
&-form-container {
|
||||
max-width: 100% !important;
|
||||
max-height: 100% !important;
|
||||
|
||||
& .mat-card {
|
||||
padding: 16px 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
& .mat-card-header-text {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
& .mat-tab-body-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
& .mat-tab-label {
|
||||
font-size: mat-font-size($config, subheading-2);
|
||||
line-height: mat-line-height($config, headline);
|
||||
letter-spacing: -0.4px;
|
||||
text-align: left;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
& .mat-ink-bar {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
& .mat-form-field-wrapper {
|
||||
margin: 0 12px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-form-title {
|
||||
font-size: mat-font-size($alfresco-typography, title);
|
||||
}
|
||||
|
||||
&-form-debug-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
&-form-debug-container .adf-debug-toggle-text {
|
||||
padding-left: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-form-debug-container .adf-debug-toggle-text:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&-form-reload-button {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
&-form-validation-button {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
top: 39px;
|
||||
color: mat-color($accent);
|
||||
|
||||
& .adf-invalid-color {
|
||||
color: mat-color($warn);
|
||||
}
|
||||
}
|
||||
|
||||
&-form-hide-button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&-task-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-label {
|
||||
width: 32px;
|
||||
height: 16px;
|
||||
font-size: mat-font-size($config, caption);
|
||||
line-height: mat-line-height($config, headline);
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&-form-mat-card-actions {
|
||||
float: right;
|
||||
padding-bottom: 25px !important;
|
||||
padding-right: 25px !important;
|
||||
|
||||
& .mat-button {
|
||||
height: 36px;
|
||||
border-radius: 5px;
|
||||
|
||||
}
|
||||
|
||||
& .mat-button-wrapper {
|
||||
width: 58px;
|
||||
height: 20px;
|
||||
opacity: 0.54;
|
||||
font-size: mat-font-size($config, body-2);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form-field {
|
||||
width: 100%;
|
||||
|
||||
.mat-input-element {
|
||||
font-size: mat-font-size($config, body-2);
|
||||
padding-top: 8px;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
440
lib/process-services/form/start-form.component.spec.ts
Normal file
440
lib/process-services/form/start-form.component.spec.ts
Normal file
@@ -0,0 +1,440 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 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 { CUSTOM_ELEMENTS_SCHEMA, SimpleChange } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { of, throwError } from 'rxjs';
|
||||
import { startFormDateWidgetMock, startFormDropdownDefinitionMock, startFormTextDefinitionMock, startMockForm, startMockFormWithTab } from '../../core/mock';
|
||||
import { startFormAmountWidgetMock, startFormNumberWidgetMock, startFormRadioButtonWidgetMock } from '../../core/mock';
|
||||
import { StartFormComponent } from './start-form.component';
|
||||
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { FormService, WidgetVisibilityService, setupTestBed, CoreModule, FormModel, FormOutcomeModel } from '@alfresco/adf-core';
|
||||
|
||||
describe('StartFormComponent', () => {
|
||||
|
||||
let formService: FormService;
|
||||
let component: StartFormComponent;
|
||||
let fixture: ComponentFixture<StartFormComponent>;
|
||||
let getStartFormSpy: jasmine.Spy;
|
||||
let visibilityService: WidgetVisibilityService;
|
||||
|
||||
const exampleId1 = 'my:process1';
|
||||
const exampleId2 = 'my:process2';
|
||||
|
||||
setupTestBed({
|
||||
imports: [
|
||||
NoopAnimationsModule,
|
||||
CoreModule.forRoot()
|
||||
],
|
||||
declarations: [
|
||||
StartFormComponent
|
||||
],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(StartFormComponent);
|
||||
component = fixture.componentInstance;
|
||||
formService = TestBed.get(FormService);
|
||||
visibilityService = TestBed.get(WidgetVisibilityService);
|
||||
|
||||
getStartFormSpy = spyOn(formService, 'getStartFormDefinition').and.returnValue(of({
|
||||
processDefinitionName: 'my:process'
|
||||
}));
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.destroy();
|
||||
});
|
||||
|
||||
it('should load start form on change if processDefinitionId defined', () => {
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
expect(formService.getStartFormDefinition).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should load start form when processDefinitionId changed', () => {
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
expect(formService.getStartFormDefinition).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should check visibility when the start form is loaded', () => {
|
||||
spyOn(visibilityService, 'refreshVisibility');
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
expect(formService.getStartFormDefinition).toHaveBeenCalled();
|
||||
expect(visibilityService.refreshVisibility).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should not load start form when changes notified but no change to processDefinitionId', () => {
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.ngOnChanges({ otherProp: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
expect(formService.getStartFormDefinition).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should consume errors encountered when loading start form', () => {
|
||||
getStartFormSpy.and.returnValue(throwError({}));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.ngOnInit();
|
||||
});
|
||||
|
||||
it('should show outcome buttons by default', () => {
|
||||
getStartFormSpy.and.returnValue(of({
|
||||
id: '1',
|
||||
processDefinitionName: 'my:process',
|
||||
outcomes: [{
|
||||
id: 'approve',
|
||||
name: 'Approve'
|
||||
}]
|
||||
}));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.ngOnInit();
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
fixture.detectChanges();
|
||||
expect(component.outcomesContainer).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should show outcome buttons if showOutcomeButtons is true', () => {
|
||||
getStartFormSpy.and.returnValue(of({
|
||||
id: '1',
|
||||
processDefinitionName: 'my:process',
|
||||
outcomes: [{
|
||||
id: 'approve',
|
||||
name: 'Approve'
|
||||
}]
|
||||
}));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.showOutcomeButtons = true;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
fixture.detectChanges();
|
||||
expect(component.outcomesContainer).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should fetch start form details by processDefinitionId ', () => {
|
||||
getStartFormSpy.and.returnValue(of(startMockForm));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.showOutcomeButtons = true;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
fixture.detectChanges();
|
||||
expect(component.outcomesContainer).toBeTruthy();
|
||||
expect(getStartFormSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
describe('Display widgets', () => {
|
||||
|
||||
it('should be able to display a textWidget from a process definition', () => {
|
||||
getStartFormSpy.and.returnValue(of(startFormTextDefinitionMock));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.showOutcomeButtons = true;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
const formFields = component.form.getFormFields();
|
||||
const labelField = formFields.find((field) => field.id === 'mocktext');
|
||||
const textWidget = fixture.debugElement.nativeElement.querySelector('text-widget');
|
||||
const textWidgetLabel = fixture.debugElement.nativeElement.querySelector('.adf-label');
|
||||
expect(labelField.type).toBe('text');
|
||||
expect(textWidget).toBeDefined();
|
||||
expect(textWidgetLabel.innerText).toBe('mockText');
|
||||
});
|
||||
});
|
||||
|
||||
it('should be able to display a radioButtonWidget from a process definition', () => {
|
||||
getStartFormSpy.and.returnValue(of(startFormRadioButtonWidgetMock));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.showOutcomeButtons = true;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
const formFields = component.form.getFormFields();
|
||||
const labelField = formFields.find((field) => field.id === 'radio-but');
|
||||
const radioButtonWidget = fixture.debugElement.nativeElement.querySelector('radio-buttons-widget');
|
||||
const radioButtonWidgetLabel = fixture.debugElement.nativeElement.querySelector('.adf-input');
|
||||
expect(labelField.type).toBe('radio-buttons');
|
||||
expect(radioButtonWidget).toBeDefined();
|
||||
expect(radioButtonWidgetLabel.innerText).toBe('radio-buttons');
|
||||
});
|
||||
});
|
||||
|
||||
it('should be able to display a amountWidget from a process definition', () => {
|
||||
getStartFormSpy.and.returnValue(of(startFormAmountWidgetMock));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.showOutcomeButtons = true;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
const formFields = component.form.getFormFields();
|
||||
const labelField = formFields.find((field) => field.id === 'amount');
|
||||
const amountWidget = fixture.debugElement.nativeElement.querySelector('amount-widget');
|
||||
const amountWidgetLabel = fixture.debugElement.nativeElement.querySelector('.adf-input');
|
||||
expect(labelField.type).toBe('amount');
|
||||
expect(amountWidget).toBeDefined();
|
||||
expect(amountWidgetLabel.innerText).toBe('amount');
|
||||
});
|
||||
});
|
||||
|
||||
it('should be able to display a numberWidget from a process definition', () => {
|
||||
getStartFormSpy.and.returnValue(of(startFormNumberWidgetMock));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.showOutcomeButtons = true;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
const formFields = component.form.getFormFields();
|
||||
const labelField = formFields.find((field) => field.id === 'number');
|
||||
const numberWidget = fixture.debugElement.nativeElement.querySelector('number-widget');
|
||||
expect(labelField.type).toBe('integer');
|
||||
expect(numberWidget).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
||||
it('should be able to display a dropDown Widget from a process definition', () => {
|
||||
getStartFormSpy.and.returnValue(of(startFormDropdownDefinitionMock));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.showOutcomeButtons = true;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
const formFields = component.form.getFormFields();
|
||||
const labelField = formFields.find((field) => field.id === 'mockTypeDropDown');
|
||||
const dropDownWidget = fixture.debugElement.nativeElement.querySelector('dropdown-widget');
|
||||
const selectElement = fixture.debugElement.nativeElement.querySelector('.adf-dropdown-widget>mat-select .mat-select-trigger');
|
||||
selectElement.click();
|
||||
expect(selectElement).toBeDefined();
|
||||
expect(dropDownWidget).toBeDefined();
|
||||
expect(selectElement.innerText).toBe('Choose one...');
|
||||
expect(labelField.type).toBe('dropdown');
|
||||
expect(labelField.options[0].name).toBe('Chooseone...');
|
||||
expect(labelField.options[1].name).toBe('Option-1');
|
||||
expect(labelField.options[2].name).toBe('Option-2');
|
||||
});
|
||||
});
|
||||
|
||||
it('should be able to display a date Widget from a process definition', () => {
|
||||
getStartFormSpy.and.returnValue(of(startFormDateWidgetMock));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.showOutcomeButtons = true;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
const formFields = component.form.getFormFields();
|
||||
const labelField = formFields.find((field) => field.id === 'date');
|
||||
const dateWidget = fixture.debugElement.nativeElement.querySelector('dropdown-widget');
|
||||
const dateLabelElement = fixture.debugElement.nativeElement.querySelector('#data-widget .mat-form-field-infix> .adf-label');
|
||||
expect(dateWidget).toBeDefined();
|
||||
expect(labelField.type).toBe('date');
|
||||
expect(dateLabelElement.innerText).toBe('date (D-M-YYYY)');
|
||||
});
|
||||
});
|
||||
|
||||
it('should fetch and define form fields with proper type', () => {
|
||||
getStartFormSpy.and.returnValue(of(startMockForm));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.showOutcomeButtons = true;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
const formFields = component.form.getFormFields();
|
||||
|
||||
const labelField = formFields.find((field) => field.id === 'billdate');
|
||||
expect(labelField.type).toBe('date');
|
||||
|
||||
const formFields1 = component.form.getFormFields();
|
||||
const labelField1 = formFields1.find((field) => field.id === 'claimtype');
|
||||
expect(labelField1.type).toBe('dropdown');
|
||||
});
|
||||
|
||||
it('should show dropdown options', () => {
|
||||
getStartFormSpy.and.returnValue(of(startMockForm));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.showOutcomeButtons = true;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
const formFields = component.form.getFormFields();
|
||||
const labelField = formFields.find((field) => field.id === 'claimtype');
|
||||
expect(labelField.type).toBe('dropdown');
|
||||
expect(labelField.options[0].name).toBe('Chooseone...');
|
||||
expect(labelField.options[1].name).toBe('Cashless');
|
||||
expect(labelField.options[2].name).toBe('Reimbursement');
|
||||
});
|
||||
});
|
||||
|
||||
it('should display start form with fields ', async(() => {
|
||||
getStartFormSpy.and.returnValue(of(startMockForm));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.showOutcomeButtons = true;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
const formFieldsWidget = fixture.debugElement.nativeElement.querySelector('form-field');
|
||||
const inputElement = fixture.debugElement.nativeElement.querySelector('.adf-input');
|
||||
const inputLabelElement = fixture.debugElement.nativeElement.querySelector('.mat-form-field-infix > .adf-label');
|
||||
const dateElement = fixture.debugElement.nativeElement.querySelector('#billdate');
|
||||
const dateLabelElement = fixture.debugElement.nativeElement.querySelector('#data-widget .mat-form-field-infix> .adf-label');
|
||||
const selectElement = fixture.debugElement.nativeElement.querySelector('#claimtype');
|
||||
const selectLabelElement = fixture.debugElement.nativeElement.querySelector('.adf-dropdown-widget > .adf-label');
|
||||
expect(formFieldsWidget).toBeDefined();
|
||||
expect(inputElement).toBeDefined();
|
||||
expect(dateElement).toBeDefined();
|
||||
expect(selectElement).toBeDefined();
|
||||
expect(inputLabelElement.innerText).toBe('ClientName*');
|
||||
expect(dateLabelElement.innerText).toBe('BillDate (D-M-YYYY)');
|
||||
expect(selectLabelElement.innerText).toBe('ClaimType');
|
||||
});
|
||||
}));
|
||||
|
||||
it('should refresh start form on click of refresh button ', async(() => {
|
||||
getStartFormSpy.and.returnValue(of(startMockForm));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.showOutcomeButtons = true;
|
||||
component.showRefreshButton = true;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
const refreshElement = fixture.debugElement.nativeElement.querySelector('.mat-card-actions>button');
|
||||
refreshElement.click();
|
||||
fixture.detectChanges();
|
||||
/* cspell:disable-next-line */
|
||||
const selectElement = fixture.debugElement.nativeElement.querySelector('#claimtype');
|
||||
const selectLabelElement = fixture.debugElement.nativeElement.querySelector('.adf-dropdown-widget > .adf-label');
|
||||
expect(refreshElement).toBeDefined();
|
||||
expect(selectElement).toBeDefined();
|
||||
expect(selectLabelElement.innerText).toBe('ClaimType');
|
||||
});
|
||||
}));
|
||||
|
||||
it('should define custom-tabs ', async(() => {
|
||||
getStartFormSpy.and.returnValue(of(startMockFormWithTab));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.showOutcomeButtons = true;
|
||||
component.showRefreshButton = true;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
const formTabs = component.form.tabs;
|
||||
const tabField1 = formTabs.find((tab) => tab.id === 'form1');
|
||||
const tabField2 = formTabs.find((tab) => tab.id === 'form2');
|
||||
const tabsWidgetElement = fixture.debugElement.nativeElement.querySelector('tabs-widget');
|
||||
expect(tabField1.name).toBe('Tab 1');
|
||||
expect(tabField2.name).toBe('Tab 2');
|
||||
expect(tabsWidgetElement).toBeDefined();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should define title and [custom-action-buttons]', async(() => {
|
||||
getStartFormSpy.and.returnValue(of(startMockFormWithTab));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.showOutcomeButtons = true;
|
||||
component.showRefreshButton = true;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
const titleIcon = fixture.debugElement.nativeElement.querySelector('mat-card-title>mat-icon');
|
||||
const titleElement = fixture.debugElement.nativeElement.querySelector('mat-card-title>h2');
|
||||
const actionButtons = fixture.debugElement.nativeElement.querySelectorAll('.mat-button');
|
||||
expect(titleIcon).toBeDefined();
|
||||
expect(titleElement).toBeDefined();
|
||||
expect(actionButtons.length).toBe(4);
|
||||
expect(actionButtons[0].innerText).toBe('Save');
|
||||
expect(actionButtons[0].disabled).toBeFalsy();
|
||||
expect(actionButtons[1].innerText).toBe('Approve');
|
||||
expect(actionButtons[1].disabled).toBeTruthy();
|
||||
expect(actionButtons[2].innerText).toBe('Complete');
|
||||
expect(actionButtons[2].disabled).toBeTruthy();
|
||||
});
|
||||
}));
|
||||
});
|
||||
|
||||
describe('OutCome Actions', () => {
|
||||
|
||||
it('should not enable outcome button when model missing', () => {
|
||||
expect(component.isOutcomeButtonVisible(null, false)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should enable custom outcome buttons', () => {
|
||||
const formModel = new FormModel();
|
||||
component.form = formModel;
|
||||
const outcome = new FormOutcomeModel(formModel, { id: 'action1', name: 'Action 1' });
|
||||
expect(component.isOutcomeButtonVisible(outcome, component.form.readOnly)).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should allow controlling [complete] button visibility', () => {
|
||||
const formModel = new FormModel();
|
||||
component.form = formModel;
|
||||
const outcome = new FormOutcomeModel(formModel, { id: '$save', name: FormOutcomeModel.SAVE_ACTION });
|
||||
|
||||
component.showSaveButton = true;
|
||||
expect(component.isOutcomeButtonVisible(outcome, component.form.readOnly)).toBeTruthy();
|
||||
|
||||
component.showSaveButton = false;
|
||||
expect(component.isOutcomeButtonVisible(outcome, component.form.readOnly)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should show only [complete] button with readOnly form ', () => {
|
||||
const formModel = new FormModel();
|
||||
formModel.readOnly = true;
|
||||
component.form = formModel;
|
||||
const outcome = new FormOutcomeModel(formModel, { id: '$complete', name: FormOutcomeModel.COMPLETE_ACTION });
|
||||
|
||||
component.showCompleteButton = true;
|
||||
expect(component.isOutcomeButtonVisible(outcome, component.form.readOnly)).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should not show [save] button with readOnly form ', () => {
|
||||
const formModel = new FormModel();
|
||||
formModel.readOnly = true;
|
||||
component.form = formModel;
|
||||
const outcome = new FormOutcomeModel(formModel, { id: '$save', name: FormOutcomeModel.SAVE_ACTION });
|
||||
|
||||
component.showSaveButton = true;
|
||||
expect(component.isOutcomeButtonVisible(outcome, component.form.readOnly)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should show [custom-outcome] button with readOnly form and selected custom-outcome', () => {
|
||||
const formModel = new FormModel({ selectedOutcome: 'custom-outcome' });
|
||||
formModel.readOnly = true;
|
||||
component.form = formModel;
|
||||
const outcome = new FormOutcomeModel(formModel, { id: '$customoutome', name: 'custom-outcome' });
|
||||
|
||||
component.showCompleteButton = true;
|
||||
component.showSaveButton = true;
|
||||
expect(component.isOutcomeButtonVisible(outcome, component.form.readOnly)).toBeTruthy();
|
||||
|
||||
const outcome1 = new FormOutcomeModel(formModel, { id: '$customoutome2', name: 'custom-outcome2' });
|
||||
expect(component.isOutcomeButtonVisible(outcome1, component.form.readOnly)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should allow controlling [save] button visibility', () => {
|
||||
const formModel = new FormModel();
|
||||
formModel.readOnly = false;
|
||||
component.form = formModel;
|
||||
const outcome = new FormOutcomeModel(formModel, { id: '$save', name: FormOutcomeModel.COMPLETE_ACTION });
|
||||
|
||||
component.showCompleteButton = true;
|
||||
expect(component.isOutcomeButtonVisible(outcome, component.form.readOnly)).toBeTruthy();
|
||||
|
||||
component.showCompleteButton = false;
|
||||
expect(component.isOutcomeButtonVisible(outcome, component.form.readOnly)).toBeFalsy();
|
||||
});
|
||||
});
|
||||
});
|
||||
182
lib/process-services/form/start-form.component.ts
Normal file
182
lib/process-services/form/start-form.component.ts
Normal file
@@ -0,0 +1,182 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 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,
|
||||
ElementRef,
|
||||
EventEmitter,
|
||||
Input,
|
||||
OnChanges,
|
||||
OnInit,
|
||||
Output,
|
||||
SimpleChanges,
|
||||
ViewChild,
|
||||
ViewEncapsulation,
|
||||
OnDestroy
|
||||
} from '@angular/core';
|
||||
import { FormComponent } from './form.component';
|
||||
import { ContentLinkModel, FormService, WidgetVisibilityService, FormRenderingService, ValidateFormEvent, FormOutcomeModel } from '@alfresco/adf-core';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-start-form',
|
||||
templateUrl: './start-form.component.html',
|
||||
styleUrls: ['./start-form.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class StartFormComponent extends FormComponent implements OnChanges, OnInit, OnDestroy {
|
||||
|
||||
/** Definition ID of the process to start. */
|
||||
@Input()
|
||||
processDefinitionId: string;
|
||||
|
||||
/** Process ID of the process to start. */
|
||||
@Input()
|
||||
processId: string;
|
||||
|
||||
/** Should form outcome buttons be shown? */
|
||||
@Input()
|
||||
showOutcomeButtons: boolean = true;
|
||||
|
||||
/** Should the refresh button be shown? */
|
||||
@Input()
|
||||
showRefreshButton: boolean = true;
|
||||
|
||||
/** Is the form read-only (ie, can't be edited)? */
|
||||
@Input()
|
||||
readOnlyForm: boolean = false;
|
||||
|
||||
/** Emitted when the user clicks one of the outcome buttons that completes the form. */
|
||||
@Output()
|
||||
outcomeClick: EventEmitter<any> = new EventEmitter<any>();
|
||||
|
||||
/** Emitted when a field of the form is clicked. */
|
||||
@Output()
|
||||
formContentClicked: EventEmitter<ContentLinkModel> = new EventEmitter<ContentLinkModel>();
|
||||
|
||||
@ViewChild('outcomesContainer', {})
|
||||
outcomesContainer: ElementRef = null;
|
||||
|
||||
constructor(formService: FormService,
|
||||
visibilityService: WidgetVisibilityService,
|
||||
formRenderingService: FormRenderingService) {
|
||||
super(formService, visibilityService, null, null, formRenderingService);
|
||||
this.showTitle = false;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.subscriptions.push(
|
||||
this.formService.formContentClicked.subscribe((content) => {
|
||||
this.formContentClicked.emit(content);
|
||||
}),
|
||||
this.formService.validateForm.subscribe((validateFormEvent: ValidateFormEvent) => {
|
||||
if (validateFormEvent.errorsField.length > 0) {
|
||||
this.formError.next(validateFormEvent.errorsField);
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.subscriptions.forEach((subscription) => subscription.unsubscribe());
|
||||
this.subscriptions = [];
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
const processDefinitionId = changes['processDefinitionId'];
|
||||
if (processDefinitionId && processDefinitionId.currentValue) {
|
||||
this.visibilityService.cleanProcessVariable();
|
||||
this.getStartFormDefinition(processDefinitionId.currentValue);
|
||||
return;
|
||||
}
|
||||
|
||||
const processId = changes['processId'];
|
||||
if (processId && processId.currentValue) {
|
||||
this.visibilityService.cleanProcessVariable();
|
||||
this.loadStartForm(processId.currentValue);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
loadStartForm(processId: string) {
|
||||
this.formService.getProcessInstance(processId)
|
||||
.subscribe((instance: any) => {
|
||||
this.formService
|
||||
.getStartFormInstance(processId)
|
||||
.subscribe(
|
||||
(form) => {
|
||||
this.formName = form.name;
|
||||
if (instance.variables) {
|
||||
form.processVariables = instance.variables;
|
||||
}
|
||||
this.form = this.parseForm(form);
|
||||
this.visibilityService.refreshVisibility(this.form);
|
||||
this.form.validateForm();
|
||||
this.form.readOnly = this.readOnlyForm;
|
||||
this.onFormLoaded(this.form);
|
||||
},
|
||||
(error) => this.handleError(error)
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
getStartFormDefinition(processId: string) {
|
||||
this.formService
|
||||
.getStartFormDefinition(processId)
|
||||
.subscribe(
|
||||
(form) => {
|
||||
this.formName = form.processDefinitionName;
|
||||
this.form = this.parseForm(form);
|
||||
this.visibilityService.refreshVisibility(this.form);
|
||||
this.form.validateForm();
|
||||
this.form.readOnly = this.readOnlyForm;
|
||||
this.onFormLoaded(this.form);
|
||||
},
|
||||
(error) => this.handleError(error)
|
||||
);
|
||||
}
|
||||
|
||||
/** @override */
|
||||
isOutcomeButtonVisible(outcome: FormOutcomeModel, isFormReadOnly: boolean): boolean {
|
||||
if (outcome && outcome.isSystem && (outcome.name === FormOutcomeModel.SAVE_ACTION ||
|
||||
outcome.name === FormOutcomeModel.COMPLETE_ACTION)) {
|
||||
return false;
|
||||
} else if (outcome && outcome.name === FormOutcomeModel.START_PROCESS_ACTION) {
|
||||
return true;
|
||||
}
|
||||
return super.isOutcomeButtonVisible(outcome, isFormReadOnly);
|
||||
}
|
||||
|
||||
/** @override */
|
||||
saveTaskForm() {
|
||||
// do nothing
|
||||
}
|
||||
|
||||
/** @override */
|
||||
onRefreshClicked() {
|
||||
if (this.processDefinitionId) {
|
||||
this.visibilityService.cleanProcessVariable();
|
||||
this.getStartFormDefinition(this.processDefinitionId);
|
||||
} else if (this.processId) {
|
||||
this.visibilityService.cleanProcessVariable();
|
||||
this.loadStartForm(this.processId);
|
||||
}
|
||||
}
|
||||
|
||||
completeTaskForm(outcome?: string) {
|
||||
this.outcomeClick.emit(outcome);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user