[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,23 +1,27 @@
<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">
<mat-form-field [hideRequiredMarker]="true"> <label class="adf-left-label" *ngIf="field.leftLabel" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label> <div>
<input matInput <mat-form-field [hideRequiredMarker]="true">
class="adf-input" <label class="adf-label" *ngIf="!field.leftLabel" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span>
type="text" </label>
pattern="-?[0-9]*(\.[0-9]+)?" <input matInput
[id]="field.id" class="adf-input"
[required]="isRequired()" type="text"
[value]="displayValue" pattern="-?[0-9]*(\.[0-9]+)?"
[(ngModel)]="field.value" [id]="field.id"
(ngModelChange)="onFieldChanged(field)" [required]="isRequired()"
[disabled]="field.readOnly" [value]="displayValue"
[placeholder]="field.placeholder" [(ngModel)]="field.value"
[matTooltip]="field.tooltip" (ngModelChange)="onFieldChanged(field)"
(blur)="markAsTouched()" [disabled]="field.readOnly"
matTooltipPosition="above" [placeholder]="field.placeholder"
matTooltipShowDelay="1000"> [matTooltip]="field.tooltip"
</mat-form-field> (blur)="markAsTouched()"
<error-widget [error]="field.validationSummary" ></error-widget> matTooltipPosition="above"
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget> matTooltipShowDelay="1000">
</mat-form-field>
<error-widget [error]="field.validationSummary" class="break"></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 {
width: 100%;
display: flex;
div {
width: 100%;
padding-right: 1%;
}
.mat-form-field-label-wrapper { .mat-form-field-label-wrapper {
top: 20px; top: 20px;

View File

@@ -1,23 +1,26 @@
<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">
<mat-form-field [hideRequiredMarker]="true"> <label class="adf-left-label" *ngIf="field.leftLabel" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label> <div>
<input matInput <mat-form-field [hideRequiredMarker]="true">
class="adf-input" <label class="adf-label" *ngIf="!field.leftLabel" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
type="text" <input matInput
[id]="field.id" class="adf-input"
[required]="isRequired()" type="text"
[value]="field.value" [id]="field.id"
[(ngModel)]="field.value" [required]="isRequired()"
(ngModelChange)="onFieldChanged(field)" [value]="field.value"
[disabled]="field.readOnly || readOnly" [(ngModel)]="field.value"
[textMask]="{mask: mask, isReversed: isMaskReversed}" (ngModelChange)="onFieldChanged(field)"
[placeholder]="placeholder" [disabled]="field.readOnly || readOnly"
[matTooltip]="field.tooltip" [textMask]="{mask: mask, isReversed: isMaskReversed}"
(blur)="markAsTouched()" [placeholder]="placeholder"
matTooltipPosition="above" [matTooltip]="field.tooltip"
matTooltipShowDelay="1000"> (blur)="markAsTouched()"
</mat-form-field> matTooltipPosition="above"
<error-widget [error]="field.validationSummary"></error-widget> matTooltipShowDelay="1000">
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget> </mat-form-field>
<error-widget [error]="field.validationSummary"></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 {
width: 100%;
display: flex;
div {
width: 100%;
padding-right: 1%;
}
.mat-form-field-label-wrapper { .mat-form-field-label-wrapper {
top: 20px; top: 20px;

View File

@@ -1772,81 +1772,377 @@ 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, "id": "7a5cc1aa-b62b-4b49-aaf8-57f725d9e6ea",
fields: { "title": "New Tab",
1: [ "visibilityCondition": null
}
],
"fields": [
{
"id": "1e653ba3-f7bc-473d-91f1-6713022bd24d",
"name": "Label",
"type": "container",
"tab": "b7aaa257-e202-4ce4-87d0-0f87ed50a413",
"numberOfColumns": 2,
"fields": {
"1": [
{ {
fieldType: 'FormFieldRepresentation', "id": "Text0vrwjf",
id: 'texttest', "name": "Text",
name: 'texttest', "type": "text",
type: 'text', "readOnly": false,
value: null, "required": true,
required: false, "colspan": 1,
placeholder: 'text', "rowspan": 1,
params: { "placeholder": null,
existingColspan: 2, "minLength": 0,
maxColspan: 6, "maxLength": 0,
inputMaskReversed: true, "regexPattern": null,
inputMask: '0#', "visibilityCondition": null,
inputMaskPlaceholder: '(0-9)' "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', "id": "People027fto",
name: 'attachfiletest', "name": "People",
type: 'upload', "type": "people",
required: true, "readOnly": false,
colspan: 2, "required": false,
placeholder: 'attachfile', "colspan": 1,
params: { "rowspan": 1,
existingColspan: 2, "optionType": "single",
maxColspan: 2, "visibilityCondition": null,
fileSource: { "params": {
serviceId: 'local-file', "existingColspan": 1,
name: 'Local File' "maxColspan": 2
}, },
multiple: true, "selectLoggedUser": false
link: false
}, },
visibilityCondition: { {
"id": "Amount0bflna",
"name": "Amount",
"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: [], "outcomes": [
metadata: {
property1: 'value1',
property2: 'value2'
},
variables: [
{ {
name: 'variable1', "id": "1cfe6797-7c70-4113-b16d-94a776f03451",
type: 'string', "name": "New Outcome"
value: 'value1'
}, },
{ {
name: 'variable2', "id": "a53a0d3a-09c5-495c-919c-4fd1bf942130",
type: 'string', "name": "New Outcome"
value: 'value2' },
{
"id": "e5eecf9b-e54c-42fe-89bc-dd80593fc369",
"name": "New Outcome"
} }
] ],
"metadata": {},
"variables": []
} }
} }
}; };