[AAE-6807] Text and number widgets support left side label

This commit is contained in:
Rubén Barroso
2022-05-05 17:10:26 +02:00
parent 90009d7516
commit bfc76e11ef
8 changed files with 432 additions and 102 deletions

View File

@@ -88,6 +88,12 @@
white-space: nowrap; white-space: nowrap;
} }
&-left-label {
font-size: var(--theme-caption-font-size);
line-height: 64px;
margin-right: 15px;
}
&-form-mat-card-actions { &-form-mat-card-actions {
float: right; float: right;
padding-bottom: 25px !important; padding-bottom: 25px !important;

View File

@@ -76,6 +76,7 @@ export class FormFieldModel extends FormWidgetModel {
rule?: FormFieldRule; rule?: FormFieldRule;
selectLoggedUser: boolean; selectLoggedUser: boolean;
groupsRestriction: string[]; groupsRestriction: string[];
leftLabel: boolean = false;
// container model members // container model members
numberOfColumns: number = 1; numberOfColumns: number = 1;
@@ -219,6 +220,10 @@ export class FormFieldModel extends FormWidgetModel {
} }
} }
if (form.json) {
this.leftLabel = form.json.leftLabel || false;
}
const emptyOption = Array.isArray(this.options) ? this.options.find(({ id }) => id === 'empty') : undefined; const emptyOption = Array.isArray(this.options) ? this.options.find(({ id }) => id === 'empty') : undefined;
if (this.hasEmptyValue === undefined) { if (this.hasEmptyValue === undefined) {
this.hasEmptyValue = json?.hasEmptyValue ?? !!emptyOption; this.hasEmptyValue = json?.hasEmptyValue ?? !!emptyOption;

View File

@@ -32,6 +32,10 @@ ul > li > form-field > .adf-focus {
color: var(--theme-secondary-text-color); color: var(--theme-secondary-text-color);
} }
&-left-label {
color: var(--theme-secondary-text-color);
}
&-asterisk { &-asterisk {
padding-left: 2px; padding-left: 2px;
color: var(--theme-warn-color); color: var(--theme-warn-color);

View File

@@ -1,7 +1,10 @@
<div class="adf-textfield adf-number-widget {{field.className}}" <div class="adf-textfield adf-number-widget {{field.className}}"
[class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly"> [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly">
<label class="adf-left-label" *ngIf="field.leftLabel" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<div>
<mat-form-field [hideRequiredMarker]="true"> <mat-form-field [hideRequiredMarker]="true">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label> <label class="adf-label" *ngIf="!field.leftLabel" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span>
</label>
<input matInput <input matInput
class="adf-input" class="adf-input"
type="text" type="text"
@@ -18,6 +21,7 @@
matTooltipPosition="above" matTooltipPosition="above"
matTooltipShowDelay="1000"> matTooltipShowDelay="1000">
</mat-form-field> </mat-form-field>
<error-widget [error]="field.validationSummary" ></error-widget> <error-widget [error]="field.validationSummary" class="break"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget> <error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div> </div>
</div>

View File

@@ -1,6 +1,12 @@
.adf { .adf {
&-number-widget { &-number-widget {
display: flex;
div {
width: 100%; width: 100%;
padding-right: 1%;
}
.mat-form-field-label-wrapper { .mat-form-field-label-wrapper {
top: 20px; top: 20px;

View File

@@ -1,7 +1,9 @@
<div class="adf-textfield adf-text-widget {{field.className}}" <div class="adf-textfield adf-text-widget {{field.className}}"
[class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly"> [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly">
<label class="adf-left-label" *ngIf="field.leftLabel" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<div>
<mat-form-field [hideRequiredMarker]="true"> <mat-form-field [hideRequiredMarker]="true">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label> <label class="adf-label" *ngIf="!field.leftLabel" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<input matInput <input matInput
class="adf-input" class="adf-input"
type="text" type="text"
@@ -21,3 +23,4 @@
<error-widget [error]="field.validationSummary"></error-widget> <error-widget [error]="field.validationSummary"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget> <error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div> </div>
</div>

View File

@@ -1,6 +1,12 @@
.adf { .adf {
&-text-widget { &-text-widget {
display: flex;
div {
width: 100%; width: 100%;
padding-right: 1%;
}
.mat-form-field-label-wrapper { .mat-form-field-label-wrapper {
top: 20px; top: 20px;

View File

@@ -1772,83 +1772,379 @@ export class DemoForm {
}; };
cloudFormDefinition: any = { cloudFormDefinition: any = {
formRepresentation: { "formRepresentation": {
id: 'text-form', "id": "form-bd97eb82-493a-4f6d-926a-55fa95c19c51",
name: 'test-start-form', "name": "f1",
version: 0, "description": "",
description: '', "version": 0,
formDefinition: { "standAlone": true,
tabs: [], "leftLabel": true,
fields: [ "formDefinition": {
"tabs": [
{ {
id: '1511517333638', "id": "b7aaa257-e202-4ce4-87d0-0f87ed50a413",
type: 'container', "title": "New Tab",
fieldType: 'ContainerRepresentation', "visibilityCondition": null
name: 'Label', },
tab: null,
numberOfColumns: 2,
fields: {
1: [
{ {
fieldType: 'FormFieldRepresentation', "id": "7a5cc1aa-b62b-4b49-aaf8-57f725d9e6ea",
id: 'texttest', "title": "New Tab",
name: 'texttest', "visibilityCondition": null
type: 'text', }
value: null, ],
required: false, "fields": [
placeholder: 'text', {
params: { "id": "1e653ba3-f7bc-473d-91f1-6713022bd24d",
existingColspan: 2, "name": "Label",
maxColspan: 6, "type": "container",
inputMaskReversed: true, "tab": "b7aaa257-e202-4ce4-87d0-0f87ed50a413",
inputMask: '0#', "numberOfColumns": 2,
inputMaskPlaceholder: '(0-9)' "fields": {
"1": [
{
"id": "Text0vrwjf",
"name": "Text",
"type": "text",
"readOnly": false,
"required": true,
"colspan": 1,
"rowspan": 1,
"placeholder": null,
"minLength": 0,
"maxLength": 0,
"regexPattern": null,
"visibilityCondition": null,
"params": {
"existingColspan": 1,
"maxColspan": 2
}
},
{
"id": "Number0au8cm",
"name": "Number",
"type": "integer",
"readOnly": false,
"colspan": 1,
"rowspan": 1,
"placeholder": null,
"minValue": null,
"maxValue": null,
"required": true,
"visibilityCondition": null,
"params": {
"existingColspan": 1,
"maxColspan": 2
}
},
{
"id": "Date06j610",
"name": "Date",
"type": "date",
"readOnly": false,
"required": false,
"colspan": 1,
"rowspan": 1,
"placeholder": null,
"minValue": null,
"maxValue": null,
"visibilityCondition": null,
"params": {
"existingColspan": 1,
"maxColspan": 2
},
"dateDisplayFormat": "YYYY-MM-DD"
},
{
"id": "Dropdown0rk1ud",
"name": "Dropdown",
"type": "dropdown",
"readOnly": false,
"required": false,
"colspan": 1,
"rowspan": 1,
"optionType": "manual",
"options": [],
"authName": null,
"restUrl": null,
"restResponsePath": null,
"restIdProperty": null,
"restLabelProperty": null,
"selectionType": "single",
"visibilityCondition": null,
"params": {
"existingColspan": 1,
"maxColspan": 2
},
"rule": null
},
{
"id": "Radiobuttons0ixsge",
"name": "Radio buttons",
"type": "radio-buttons",
"readOnly": false,
"required": false,
"colspan": 1,
"rowspan": 1,
"optionType": "manual",
"options": [
{
"id": "Id_1",
"name": "Label 1"
},
{
"id": "Id_2",
"name": "Label 2"
}
],
"authName": null,
"restUrl": null,
"restResponsePath": null,
"restIdProperty": null,
"restLabelProperty": null,
"visibilityCondition": null,
"params": {
"existingColspan": 1,
"maxColspan": 2
}
},
{
"id": "Attachfile0le6s4",
"name": "Attach file",
"type": "upload",
"readOnly": false,
"required": false,
"colspan": 1,
"rowspan": 1,
"visibilityCondition": null,
"params": {
"existingColspan": 1,
"maxColspan": 2,
"fileSource": {
"name": "Alfresco Content",
"serviceId": "alfresco-content"
},
"multiple": false,
"link": false,
"menuOptions": {
"show": true,
"download": true,
"retrieveMetadata": false,
"remove": true
},
"displayableCMProperties": []
}
},
{
"id": "Hyperlink081lmk",
"name": "Hyperlink",
"type": "hyperlink",
"colspan": 1,
"rowspan": 1,
"hyperlinkUrl": null,
"displayText": null,
"visibilityCondition": null,
"params": {
"existingColspan": 1,
"maxColspan": 2
}
},
{
"id": "Fileviewer08bizj",
"name": "File viewer",
"type": "file-viewer",
"readOnly": false,
"required": false,
"colspan": 1,
"rowspan": 1,
"visibilityCondition": null,
"params": {
"existingColspan": 1,
"maxColspan": 2
} }
} }
], ],
2: [{ "2": [
fieldType: 'AttachFileFieldRepresentation',
id: 'attachfiletest',
name: 'attachfiletest',
type: 'upload',
required: true,
colspan: 2,
placeholder: 'attachfile',
params: {
existingColspan: 2,
maxColspan: 2,
fileSource: {
serviceId: 'local-file',
name: 'Local File'
},
multiple: true,
link: false
},
visibilityCondition: {
}
}]
}
}
],
outcomes: [],
metadata: {
property1: 'value1',
property2: 'value2'
},
variables: [
{ {
name: 'variable1', "id": "People027fto",
type: 'string', "name": "People",
value: 'value1' "type": "people",
"readOnly": false,
"required": false,
"colspan": 1,
"rowspan": 1,
"optionType": "single",
"visibilityCondition": null,
"params": {
"existingColspan": 1,
"maxColspan": 2
},
"selectLoggedUser": false
}, },
{ {
name: 'variable2', "id": "Amount0bflna",
type: 'string', "name": "Amount",
value: 'value2' "type": "amount",
"readOnly": false,
"required": false,
"colspan": 1,
"rowspan": 1,
"placeholder": "123",
"minValue": null,
"maxValue": null,
"visibilityCondition": null,
"params": {
"existingColspan": 1,
"maxColspan": 2
},
"enableFractions": false,
"currency": "$"
},
{
"id": "Multilinetext0bwk6t",
"name": "Multiline text",
"type": "multi-line-text",
"readOnly": false,
"colspan": 1,
"rowspan": 1,
"placeholder": null,
"minLength": 0,
"maxLength": 0,
"regexPattern": null,
"required": false,
"visibilityCondition": null,
"params": {
"existingColspan": 1,
"maxColspan": 2
}
},
{
"id": "Checkbox04obiv",
"name": "Checkbox",
"type": "boolean",
"readOnly": false,
"required": false,
"colspan": 1,
"rowspan": 1,
"visibilityCondition": null,
"params": {
"existingColspan": 1,
"maxColspan": 2
}
},
{
"id": "Groupofpeople00lqxw",
"name": "Group of people",
"type": "functional-group",
"readOnly": false,
"required": false,
"colspan": 1,
"rowspan": 1,
"optionType": "single",
"visibilityCondition": null,
"params": {
"existingColspan": 1,
"maxColspan": 2
}
},
{
"id": "Dateandtime0pqokp",
"name": "Date and time",
"type": "datetime",
"readOnly": false,
"required": false,
"colspan": 1,
"rowspan": 1,
"placeholder": null,
"minValue": null,
"maxValue": null,
"visibilityCondition": null,
"params": {
"existingColspan": 1,
"maxColspan": 2
},
"dateDisplayFormat": "YYYY-MM-DD HH:mm"
},
{
"id": "Displaytext0o147e",
"name": "Display text",
"type": "readonly-text",
"readOnly": false,
"value": "Display text as part of the form",
"colspan": 1,
"rowspan": 1,
"visibilityCondition": null,
"params": {
"existingColspan": 1,
"maxColspan": 2
}
},
{
"id": "Metadataviewer0rqi1s",
"name": "Metadata viewer",
"type": "properties-viewer",
"readOnly": false,
"required": false,
"colspan": 1,
"rowspan": 1,
"visibilityCondition": null,
"params": {
"existingColspan": 1,
"maxColspan": 2,
"propertiesViewerOptions": {
"displayDefaultProperties": true,
"expanded": true,
"preset": "default",
"displayEmpty": false,
"editable": false,
"multi": false,
"displayAspect": null,
"copyToClipboardAction": true,
"useChipsForMultiValueProperty": true
}
}
},
{
"id": "Displayvalue01ly0f",
"name": "Display value",
"type": "readonly",
"value": "No field selected",
"readOnly": false,
"colspan": 1,
"rowspan": 1,
"visibilityCondition": null,
"params": {
"existingColspan": 1,
"maxColspan": 2,
"field": {
"id": "Displayvalue01ly0f",
"name": "Display value",
"type": "text"
},
"responseVariable": true
}
} }
] ]
} }
} }
],
"outcomes": [
{
"id": "1cfe6797-7c70-4113-b16d-94a776f03451",
"name": "New Outcome"
},
{
"id": "a53a0d3a-09c5-495c-919c-4fd1bf942130",
"name": "New Outcome"
},
{
"id": "e5eecf9b-e54c-42fe-89bc-dd80593fc369",
"name": "New Outcome"
}
],
"metadata": {},
"variables": []
}
}
}; };
getEasyForm(): any { getEasyForm(): any {