mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-19 17:14:57 +00:00
[MNT-21705] - fixed column display for fields (#6078)
* [MNT-21705] - fixed column display for fields * [MNT-21705] - fixed unit test * [MNT-21636] - adding flag for enable-disable column * [MNT-21705] - fixed broken unit test * [MNT-21705] - added documentation for extra form input field Co-authored-by: Vito Albano <vitoalbano@vitoalbano-mbp-0120.local>
This commit is contained in:
parent
80a3618ca8
commit
ffe04120a8
docs/process-services/components
lib
@ -73,6 +73,7 @@ Any content in the body of `<adf-form>` will be shown when no form definition is
|
||||
| showTitle | `boolean` | true | Toggle rendering of the form title. |
|
||||
| showValidationIcon | `boolean` | true | Toggle rendering of the validation icon next to the form title. |
|
||||
| taskId | `string` | | Task id to fetch corresponding form and values. |
|
||||
| enableFixedSpacedForm | `boolean` | true | The form will set a prefixed space for invisible fields |
|
||||
|
||||
### Events
|
||||
|
||||
|
@ -320,17 +320,17 @@ describe('Form Renderer Component', () => {
|
||||
});
|
||||
|
||||
it('[C309654] - Should display Number widget spans on 2 columns when colspan is set to 2', async () => {
|
||||
formRendererComponent.formDefinition = formService.parseForm(colspanForm.formRepresentation.formDefinition);
|
||||
formRendererComponent.formDefinition = formService.parseForm(colspanForm.formRepresentation.formDefinition, null , false, false);
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
const formSizedElement = fixture.nativeElement.querySelector('#field-2bc275fb-e113-4d7d-885f-6e74a7332d40-container section.adf-grid-list');
|
||||
const formSizedElement = fixture.nativeElement.querySelector('#field-2bc275fb-e113-4d7d-885f-6e74a7332d40-container section.adf-grid-list-column-view');
|
||||
expectElementToBeVisible(formSizedElement);
|
||||
const sectionGridElement: HTMLElement[] = fixture.nativeElement.querySelectorAll('#field-2bc275fb-e113-4d7d-885f-6e74a7332d40-container section .adf-grid-list-item');
|
||||
const sectionGridElement: HTMLElement[] = fixture.nativeElement.querySelectorAll('#field-2bc275fb-e113-4d7d-885f-6e74a7332d40-container section .adf-grid-list-single-column');
|
||||
sectionGridElement.forEach((element) => {
|
||||
expect(element.style['width']).toBe('50%', 'Elemens is wrong sized for this section');
|
||||
});
|
||||
|
||||
const fullWidthElement = fixture.nativeElement.querySelector('#field-d52ada4e-cbdc-4f0c-a480-5b85fa00e4f8-container section.adf-grid-list .adf-grid-list-item');
|
||||
const fullWidthElement = fixture.nativeElement.querySelector('#field-d52ada4e-cbdc-4f0c-a480-5b85fa00e4f8-container section.adf-grid-list-column-view .adf-grid-list-single-column');
|
||||
expect(fullWidthElement.style['width']).toBe('100%');
|
||||
});
|
||||
|
||||
|
@ -11,10 +11,22 @@
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<section class="adf-grid-list" *ngIf="content?.isExpanded">
|
||||
<div class="adf-grid-list-item" *ngFor="let field of fields" [style.width]="getColumnWith(field)">
|
||||
<adf-form-field *ngIf="field" [field]="field"></adf-form-field>
|
||||
</div>
|
||||
</section>
|
||||
<div *ngIf="field?.form?.enableFixedSpace else fixingTemplate">
|
||||
<section class="adf-grid-list" *ngIf="content?.isExpanded">
|
||||
<div class="adf-grid-list-item" *ngFor="let field of fields" [style.width.%]="getColumnWith(field)">
|
||||
<adf-form-field *ngIf="field" [field]="field"></adf-form-field>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<ng-template #fixingTemplate>
|
||||
<section class="adf-grid-list-column-view" *ngIf="content?.isExpanded">
|
||||
<div class="adf-grid-list-single-column" *ngFor="let column of content?.columns" [style.width.%]="getColumnWith(field)">
|
||||
<div class="adf-grid-list-column-view-item" *ngFor="let field of column?.fields">
|
||||
<adf-form-field *ngIf="field" [field]="field"></adf-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</ng-template>
|
||||
|
||||
|
||||
|
@ -35,6 +35,27 @@
|
||||
}
|
||||
|
||||
container-widget {
|
||||
.adf-grid-list-column-view {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-right: -1%;
|
||||
}
|
||||
|
||||
.adf-grid-list-single-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.adf-grid-list-column-view-item {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
box-sizing: border-box;
|
||||
padding-left: 1%;
|
||||
padding-right: 1%;
|
||||
}
|
||||
|
||||
.adf-grid-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@ -53,6 +74,18 @@
|
||||
.adf-grid-list-item {
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
|
||||
.adf-grid-list--column-view {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.adf-grid-list-single-column {
|
||||
width: 90% !important;
|
||||
}
|
||||
|
||||
.adf-grid-list-column-view-item {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-form-field {
|
||||
|
@ -160,9 +160,9 @@ describe('ContainerWidgetComponent', () => {
|
||||
const container = new ContainerWidgetComponentModel(new FormFieldModel(new FormModel(), { numberOfColumns: 4 }));
|
||||
widget.content = container;
|
||||
|
||||
expect(widget.getColumnWith(undefined)).toBe('25%');
|
||||
expect(widget.getColumnWith(<FormFieldModel> { colspan: 1 })).toBe('25%');
|
||||
expect(widget.getColumnWith(<FormFieldModel> { colspan: 3 })).toBe('75%');
|
||||
expect(widget.getColumnWith(undefined)).toBe('25');
|
||||
expect(widget.getColumnWith(<FormFieldModel> { colspan: 1 })).toBe('25');
|
||||
expect(widget.getColumnWith(<FormFieldModel> { colspan: 3 })).toBe('75');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -92,6 +92,6 @@ export class ContainerWidgetComponent extends WidgetComponent implements OnInit,
|
||||
*/
|
||||
getColumnWith(field: FormFieldModel): string {
|
||||
const colspan = field ? field.colspan : 1;
|
||||
return (100 / this.content.json.numberOfColumns) * colspan + '%';
|
||||
return (100 / this.content.json.numberOfColumns) * colspan + '';
|
||||
}
|
||||
}
|
||||
|
@ -67,6 +67,7 @@ export class FormModel {
|
||||
readonly taskName = FormModel.UNSET_TASK_NAME;
|
||||
readonly processDefinitionId: string;
|
||||
readonly selectedOutcome: string;
|
||||
readonly enableFixedSpace: boolean;
|
||||
|
||||
json: any;
|
||||
nodeId: string;
|
||||
@ -83,7 +84,7 @@ export class FormModel {
|
||||
processVariables: ProcessVariableModel[] = [];
|
||||
variables: FormVariableModel[] = [];
|
||||
|
||||
constructor(json?: any, formValues?: FormValues, readOnly: boolean = false, protected formService?: FormService) {
|
||||
constructor(json?: any, formValues?: FormValues, readOnly: boolean = false, protected formService?: FormService, enableFixedSpace?: boolean) {
|
||||
this.readOnly = readOnly;
|
||||
this.json = json;
|
||||
|
||||
@ -98,6 +99,7 @@ export class FormModel {
|
||||
this.className = json.className || '';
|
||||
this.variables = json.variables || [];
|
||||
this.processVariables = json.processVariables || [];
|
||||
this.enableFixedSpace = enableFixedSpace;
|
||||
|
||||
const tabCache: FormWidgetModelCache<TabModel> = {};
|
||||
|
||||
|
@ -102,9 +102,9 @@ export class FormService {
|
||||
* @param readOnly Should the form fields be read-only?
|
||||
* @returns Form model created from input data
|
||||
*/
|
||||
parseForm(json: any, data?: FormValues, readOnly: boolean = false): FormModel {
|
||||
parseForm(json: any, data?: FormValues, readOnly: boolean = false, fixedSpace?: boolean): FormModel {
|
||||
if (json) {
|
||||
const form = new FormModel(json, data, readOnly, this);
|
||||
const form = new FormModel(json, data, readOnly, this, fixedSpace);
|
||||
if (!json.fields) {
|
||||
form.outcomes = [
|
||||
new FormOutcomeModel(<any> form, {
|
||||
|
@ -58,6 +58,9 @@ export class FormComponent extends FormBaseComponent implements OnInit, OnDestro
|
||||
@Input()
|
||||
data: FormValues;
|
||||
|
||||
@Input()
|
||||
enableFixedSpacedForm: boolean = true;
|
||||
|
||||
/** Emitted when the form is submitted with the `Save` or custom outcomes. */
|
||||
@Output()
|
||||
formSaved: EventEmitter<FormModel> = new EventEmitter<FormModel>();
|
||||
@ -277,7 +280,7 @@ export class FormComponent extends FormBaseComponent implements OnInit, OnDestro
|
||||
|
||||
parseForm(formRepresentationJSON: any): FormModel {
|
||||
if (formRepresentationJSON) {
|
||||
const form = new FormModel(formRepresentationJSON, this.data, this.readOnly, this.formService);
|
||||
const form = new FormModel(formRepresentationJSON, this.data, this.readOnly, this.formService, this.enableFixedSpacedForm);
|
||||
if (!formRepresentationJSON.fields) {
|
||||
form.outcomes = this.getFormDefinitionOutcomes(form);
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user