inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-06-30 18:15:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-2999] readded form validation icon (#3367)

Browse Source 
* [ADF-2999] readded form validation icon

* [ADF-2999] fixed broken test
This commit is contained in:
Vito 2018-05-23 12:01:21 +01:00 committed by Eugenio Romano
parent 86f4c23afa
commit 86ec482843
4 changed files with 212 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
lib/core/form/components/form.component.html
View File

@ -7,6 +7,12 @@
<mat-card-header>
<mat-card-title>
<h4 *ngIf="isTitleEnabled()">
<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 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>

59
lib/core/form/components/form.component.scss
View File

@ -1,25 +1,27 @@
@mixin adf-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: 0px !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);
@ -28,47 +30,58 @@
color: rgba(0, 0, 0, 0.54);
text-transform: uppercase;
}
& .mat-ink-bar {
height: 4px;
}
& .mat-input-wrapper {
margin: 0px 12px 0px 0px;
}
}
}
&-form-title {
font-size: mat-font-size($alfresco-typography, title);
}
&-form-debug-container {
padding: 10px;
}
&-form-debug-container .debug-toggle-text {
padding-left: 15px;
cursor: pointer;
}
&-form-debug-container .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);
& .invalid-color {
color: mat-color($warn);
}
}
&-form-hide-button {
display: none !important;
}
&-task-title {
text-align: center
}
&-label {
width: 32px;
height: 16px;
@ -77,18 +90,18 @@
text-align: left;
white-space: nowrap;
}
&-form-mat-card-actions {
float: right;
padding-bottom: 25px !important;
padding-right: 25px !important;
padding-right: 25px !important;
& .mat-button {
height: 36px;
border-radius: 5px;
}
& .mat-button-wrapper {
width: 58px;
height: 20px;
@ -98,15 +111,15 @@
}
}
}
form-field {
width: 100%;
.mat-input-element {
font-size: mat-font-size($config, body-2);
padding-top: 8px;
line-height: normal;
}
}
}

57
lib/core/form/components/form.component.visibility.spec.ts
View File

@ -22,7 +22,7 @@ import { Observable } from 'rxjs/Observable';
import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { formDefinitionDropdownField, formDefinitionTwoTextFields } from '../../mock';
import { formDefinitionDropdownField, formDefinitionTwoTextFields, formDefinitionRequiredField } from '../../mock';
import { formReadonlyTwoTextFields } from '../../mock';
import { formDefVisibilitiFieldDependsOnNextOne, formDefVisibilitiFieldDependsOnPreviousOne } from '../../mock';
import { FormService } from './../services/form.service';
@ -72,6 +72,45 @@ describe('FormComponent UI and visibility', () => {
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(Observable.of({}));
spyOn(service, 'getTaskForm').and.returnValue(Observable.of(formDefinitionTwoTextFields));
let 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(Observable.of({}));
spyOn(service, 'getTaskForm').and.returnValue(Observable.of(formDefinitionRequiredField));
let 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(Observable.of({}));
spyOn(service, 'getTaskForm').and.returnValue(Observable.of(formDefinitionTwoTextFields));
let 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', () => {
@ -105,16 +144,16 @@ describe('FormComponent UI and visibility', () => {
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];
const optOne = fixture.debugElement.queryAll(By.css('[id="mat-option-1"]'));
const optTwo = fixture.debugElement.queryAll(By.css('[id="mat-option-2"]'));
const optThree = fixture.debugElement.queryAll(By.css('[id="mat-option-3"]'));
expect(optOne.nativeElement.innerText.trim()).toEqual('united kingdom');
expect(optTwo.nativeElement.innerText.trim()).toEqual('italy');
expect(optThree.nativeElement.innerText.trim()).toEqual('france');
expect(optOne[0].nativeElement.innerText.trim()).toEqual('united kingdom');
expect(optTwo[0].nativeElement.innerText.trim()).toEqual('italy');
expect(optThree[0].nativeElement.innerText.trim()).toEqual('france');
optTwo[0].nativeElement.click();
optTwo.nativeElement.click();
fixture.detectChanges();
expect(dropdown[0].nativeElement.innerText.trim()).toEqual('italy');
tick(SELECT_CLOSE_ANIMATION);

122
lib/core/mock/form/formDefinition.mock.ts
View File

@ -281,3 +281,125 @@ export let formDefinitionDropdownField = {
gridsterForm: false,
globalDateFormat: 'D-M-YYYY'
};
export let formDefinitionRequiredField = {
id: 21,
name: 'dropdownDefinition',
processDefinitionId: 'textDefinition:2:163',
processDefinitionName: 'textDefinition',
processDefinitionKey: 'textDefinition',
taskId: '169',
taskDefinitionKey: 'sid-D941F49F-2B04-4FBB-9B49-9E95991993E8',
tabs: [],
fields: [
{
fieldType: 'ContainerRepresentation',
id: '1507046026940',
name: 'Label',
type: 'container',
value: null,
required: false,
readOnly: false,
overrideId: false,
colspan: 1,
placeholder: null,
minLength: 0,
maxLength: 0,
minValue: null,
maxValue: null,
regexPattern: null,
optionType: null,
hasEmptyValue: null,
options: null,
restUrl: null,
restResponsePath: null,
restIdProperty: null,
restLabelProperty: null,
tab: null,
className: null,
dateDisplayFormat: null,
layout: null,
sizeX: 2,
sizeY: 1,
row: -1,
col: -1,
visibilityCondition: null,
numberOfColumns: 2,
fields: {
'1': [
{
fieldType: 'RestFieldRepresentation',
id: 'country',
name: 'country',
type: 'dropdown',
value: 'Choose one...',
required: true,
readOnly: false,
overrideId: false,
colspan: 1,
placeholder: null,
minLength: 0,
maxLength: 0,
minValue: null,
maxValue: null,
regexPattern: null,
optionType: null,
hasEmptyValue: true,
options: [
{
id: 'empty',
name: 'Choose one...'
},
{
id: 'option_1',
name: 'united kingdom'
},
{
id: 'option_2',
name: 'italy'
},
{
id: 'option_3',
name: 'france'
}
],
restUrl: null,
restResponsePath: null,
restIdProperty: null,
restLabelProperty: null,
tab: null,
className: null,
params: {
existingColspan: 1,
maxColspan: 2
},
dateDisplayFormat: null,
layout: {
row: -1,
column: -1,
colspan: 1
},
sizeX: 1,
sizeY: 1,
row: -1,
col: -1,
visibilityCondition: null,
endpoint: null,
requestHeaders: null
}
],
'2': []
}
}
],
outcomes: [],
javascriptEvents: [],
className: '',
style: '',
customFieldTemplates: {},
metadata: {},
variables: [],
customFieldsValueInfo: {},
gridsterForm: false,
globalDateFormat: 'D-M-YYYY'
};