From b13a5cc2822205a44119863742740ed40c2c38a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rub=C3=A9n=20Barroso?= <1204625+rbarroso@users.noreply.github.com> Date: Wed, 18 May 2022 18:43:59 +0200 Subject: [PATCH] [AAE-8856] Enable left label for form widgets in several widgets (#7640) --- .../widgets/amount/amount.widget.html | 45 +++++------ .../widgets/amount/amount.widget.scss | 4 + .../widgets/amount/amount.widget.spec.ts | 65 ++++++++++++++++ .../widgets/date-time/date-time.widget.html | 45 ++++++----- .../widgets/date-time/date-time.widget.scss | 10 +++ .../date-time/date-time.widget.spec.ts | 72 ++++++++++++++++++ .../widgets/date/date-cloud.widget.html | 60 ++++++++------- .../widgets/date/date-cloud.widget.scss | 10 +++ .../widgets/date/date-cloud.widget.spec.ts | 74 ++++++++++++++++++- .../widgets/group/group-cloud.widget.html | 34 +++++---- .../widgets/group/group-cloud.widget.spec.ts | 63 ++++++++++++++++ .../widgets/people/people-cloud.widget.html | 46 ++++++------ .../people/people-cloud.widget.spec.ts | 63 ++++++++++++++++ 13 files changed, 482 insertions(+), 109 deletions(-) diff --git a/lib/core/form/components/widgets/amount/amount.widget.html b/lib/core/form/components/widgets/amount/amount.widget.html index 63f4322862d..16c8bee0e1f 100644 --- a/lib/core/form/components/widgets/amount/amount.widget.html +++ b/lib/core/form/components/widgets/amount/amount.widget.html @@ -1,26 +1,21 @@
- - - {{ currency }}   - - - - -
+ [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly" + [class.adf-left-label-input-container]="field.leftLabels"> +
+ +
+
+ + {{ currency }}   + + + + +
+ \ No newline at end of file diff --git a/lib/core/form/components/widgets/amount/amount.widget.scss b/lib/core/form/components/widgets/amount/amount.widget.scss index 0c244db504a..8557e21f018 100644 --- a/lib/core/form/components/widgets/amount/amount.widget.scss +++ b/lib/core/form/components/widgets/amount/amount.widget.scss @@ -2,6 +2,10 @@ &-amount-widget { width: 100%; margin-top: 15px; + + .adf-left-label { + line-height: 36px; + } } &-amount-widget__input { diff --git a/lib/core/form/components/widgets/amount/amount.widget.spec.ts b/lib/core/form/components/widgets/amount/amount.widget.spec.ts index 8e842a289d6..76f37bf264d 100644 --- a/lib/core/form/components/widgets/amount/amount.widget.spec.ts +++ b/lib/core/form/components/widgets/amount/amount.widget.spec.ts @@ -118,6 +118,7 @@ describe('AmountWidgetComponent - rendering', () => { let widget: AmountWidgetComponent; let fixture: ComponentFixture; + let element: HTMLElement; setupTestBed({ imports: [ @@ -130,6 +131,7 @@ describe('AmountWidgetComponent - rendering', () => { beforeEach(() => { fixture = TestBed.createComponent(AmountWidgetComponent); widget = fixture.componentInstance; + element = fixture.nativeElement; }); it('[C309692] - Should be possible to set the General Properties for Amount Widget', async () => { @@ -207,6 +209,69 @@ describe('AmountWidgetComponent - rendering', () => { expect(tooltip).toEqual(widget.field.tooltip); }); + + describe('when form model has left labels', () => { + + it('should have left labels classes on leftLabels true', async () => { + widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: true }), { + id: 'amount-id', + name: 'amount-name', + value: '', + type: FormFieldTypes.AMOUNT, + readOnly: false, + required: true + }); + + fixture.detectChanges(); + await fixture.whenStable(); + + const widgetContainer = element.querySelector('.adf-left-label-input-container'); + expect(widgetContainer).not.toBeNull(); + + const adfLeftLabel = element.querySelector('.adf-left-label'); + expect(adfLeftLabel).not.toBeNull(); + }); + + it('should not have left labels classes on leftLabels false', async () => { + widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: false }), { + id: 'amount-id', + name: 'amount-name', + value: '', + type: FormFieldTypes.AMOUNT, + readOnly: false, + required: true + }); + + fixture.detectChanges(); + await fixture.whenStable(); + + const widgetContainer = element.querySelector('.adf-left-label-input-container'); + expect(widgetContainer).toBeNull(); + + const adfLeftLabel = element.querySelector('.adf-left-label'); + expect(adfLeftLabel).toBeNull(); + }); + + it('should not have left labels classes on leftLabels not present', async () => { + widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), { + id: 'amount-id', + name: 'amount-name', + value: '', + type: FormFieldTypes.AMOUNT, + readOnly: false, + required: true + }); + + fixture.detectChanges(); + await fixture.whenStable(); + + const widgetContainer = element.querySelector('.adf-left-label-input-container'); + expect(widgetContainer).toBeNull(); + + const adfLeftLabel = element.querySelector('.adf-left-label'); + expect(adfLeftLabel).toBeNull(); + }); + }); }); describe('AmountWidgetComponent settings', () => { diff --git a/lib/core/form/components/widgets/date-time/date-time.widget.html b/lib/core/form/components/widgets/date-time/date-time.widget.html index 50210dfbed0..f2081c71ad7 100644 --- a/lib/core/form/components/widgets/date-time/date-time.widget.html +++ b/lib/core/form/components/widgets/date-time/date-time.widget.html @@ -1,23 +1,27 @@ -
- - - - - - - - +
+
+ +
+
+ + + + + + + + +
diff --git a/lib/core/form/components/widgets/date-time/date-time.widget.scss b/lib/core/form/components/widgets/date-time/date-time.widget.scss index 9016d14ec19..4ae5337d5e6 100644 --- a/lib/core/form/components/widgets/date-time/date-time.widget.scss +++ b/lib/core/form/components/widgets/date-time/date-time.widget.scss @@ -8,6 +8,16 @@ top: 20px; } } + + &-left-label-input-datepicker { + .mat-form-field-suffix { + top: 0; + } + + .mat-form-field-infix { + width: 100%; + } + } } .mat-datetimepicker-toggle { diff --git a/lib/core/form/components/widgets/date-time/date-time.widget.spec.ts b/lib/core/form/components/widgets/date-time/date-time.widget.spec.ts index 7b2c043b20c..6c5a2ced06a 100644 --- a/lib/core/form/components/widgets/date-time/date-time.widget.spec.ts +++ b/lib/core/form/components/widgets/date-time/date-time.widget.spec.ts @@ -250,4 +250,76 @@ describe('DateTimeWidgetComponent', () => { }); }); }); + + describe('when form model has left labels', () => { + + it('should have left labels classes on leftLabels true', async () => { + widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: true }), { + id: 'datetime-id', + name: 'datetime-name', + value: '', + type: FormFieldTypes.DATETIME, + readOnly: false, + required: true + }); + + fixture.detectChanges(); + await fixture.whenStable(); + + const widgetContainer = element.querySelector('.adf-left-label-input-container'); + expect(widgetContainer).not.toBeNull(); + + const leftDatePicker = element.querySelector('.adf-left-label-input-datepicker'); + expect(leftDatePicker).not.toBeNull(); + + const adfLeftLabel = element.querySelector('.adf-left-label'); + expect(adfLeftLabel).not.toBeNull(); + }); + + it('should not have left labels classes on leftLabels false', async () => { + widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: false }), { + id: 'datetime-id', + name: 'datetime-name', + value: '', + type: FormFieldTypes.DATETIME, + readOnly: false, + required: true + }); + + fixture.detectChanges(); + await fixture.whenStable(); + + const widgetContainer = element.querySelector('.adf-left-label-input-container'); + expect(widgetContainer).toBeNull(); + + const leftDatePicker = element.querySelector('.adf-left-label-input-datepicker'); + expect(leftDatePicker).toBeNull(); + + const adfLeftLabel = element.querySelector('.adf-left-label'); + expect(adfLeftLabel).toBeNull(); + }); + + it('should not have left labels classes on leftLabels not present', async () => { + widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), { + id: 'datetime-id', + name: 'datetime-name', + value: '', + type: FormFieldTypes.DATETIME, + readOnly: false, + required: true + }); + + fixture.detectChanges(); + await fixture.whenStable(); + + const widgetContainer = element.querySelector('.adf-left-label-input-container'); + expect(widgetContainer).toBeNull(); + + const leftDatePicker = element.querySelector('.adf-left-label-input-datepicker'); + expect(leftDatePicker).toBeNull(); + + const adfLeftLabel = element.querySelector('.adf-left-label'); + expect(adfLeftLabel).toBeNull(); + }); + }); }); diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html index b52db10c997..f65fb13fa0c 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html +++ b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html @@ -1,29 +1,35 @@ -
- -
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss index d19b11747a1..d73296ddb66 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss +++ b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss @@ -8,4 +8,14 @@ top: 20px; } } + + &-left-label-input-datepicker { + .mat-form-field-suffix { + top: 0; + } + + .mat-form-field-infix { + width: 100%; + } + } } diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts index 31a09e53a0a..4a670ca92ed 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts @@ -17,7 +17,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { DateCloudWidgetComponent, DATE_FORMAT_CLOUD } from './date-cloud.widget'; -import { setupTestBed, FormFieldModel, FormModel } from '@alfresco/adf-core'; +import { setupTestBed, FormFieldModel, FormModel, FormFieldTypes } from '@alfresco/adf-core'; import moment from 'moment-es6'; import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module'; import { TranslateModule } from '@ngx-translate/core'; @@ -230,4 +230,76 @@ describe('DateWidgetComponent', () => { }); }); + describe('when form model has left labels', () => { + + it('should have left labels classes on leftLabels true', async () => { + widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: true }), { + id: 'date-id', + name: 'date-name', + value: '', + type: FormFieldTypes.DATE, + readOnly: false, + required: true + }); + + fixture.detectChanges(); + await fixture.whenStable(); + + const widgetContainer = element.querySelector('.adf-left-label-input-container'); + expect(widgetContainer).not.toBeNull(); + + const leftDatePicker = element.querySelector('.adf-left-label-input-datepicker'); + expect(leftDatePicker).not.toBeNull(); + + const adfLeftLabel = element.querySelector('.adf-left-label'); + expect(adfLeftLabel).not.toBeNull(); + }); + + it('should not have left labels classes on leftLabels false', async () => { + widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: false }), { + id: 'date-id', + name: 'date-name', + value: '', + type: FormFieldTypes.DATE, + readOnly: false, + required: true + }); + + fixture.detectChanges(); + await fixture.whenStable(); + + const widgetContainer = element.querySelector('.adf-left-label-input-container'); + expect(widgetContainer).toBeNull(); + + const leftDatePicker = element.querySelector('.adf-left-label-input-datepicker'); + expect(leftDatePicker).toBeNull(); + + const adfLeftLabel = element.querySelector('.adf-left-label'); + expect(adfLeftLabel).toBeNull(); + }); + + it('should not have left labels classes on leftLabels not present', async () => { + widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), { + id: 'date-id', + name: 'date-name', + value: '', + type: FormFieldTypes.DATE, + readOnly: false, + required: true + }); + + fixture.detectChanges(); + await fixture.whenStable(); + + const widgetContainer = element.querySelector('.adf-left-label-input-container'); + expect(widgetContainer).toBeNull(); + + const leftDatePicker = element.querySelector('.adf-left-label-input-datepicker'); + expect(leftDatePicker).toBeNull(); + + const adfLeftLabel = element.querySelector('.adf-left-label'); + expect(adfLeftLabel).toBeNull(); + }); + }); + }); diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html index e364b5ca272..c58472b989a 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html +++ b/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html @@ -1,22 +1,26 @@
- + [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly" [class.adf-left-label-input-container]="field.leftLabels"> +
+ +
+
+ [title]="title" + [readOnly]="field.readOnly" + [roles]="roles" + [searchGroupsControl]="search" + [required]="isRequired()" + (changedGroups)="onChangedGroup($event)" + [preSelectGroups]="preSelectGroup" + (blur)="markAsTouched()" + [matTooltip]="field.tooltip" + [matTooltipPosition]="'above'" + [matTooltipShowDelay]="1000"> + required="{{ 'FORM.FIELD.REQUIRED' | translate }}"> +
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.spec.ts b/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.spec.ts index 0359e3a8601..b8c4f3e3c20 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.spec.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.spec.ts @@ -80,4 +80,67 @@ describe('GroupCloudWidgetComponent', () => { expect(element.querySelector('.adf-invalid')).toBeTruthy(); }); }); + + describe('when form model has left labels', () => { + + it('should have left labels classes on leftLabels true', async () => { + widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: true }), { + id: 'group-id', + name: 'group-name', + value: '', + type: FormFieldTypes.GROUP, + readOnly: false, + required: true + }); + + fixture.detectChanges(); + await fixture.whenStable(); + + const widgetContainer = element.querySelector('.adf-left-label-input-container'); + expect(widgetContainer).not.toBeNull(); + + const adfLeftLabel = element.querySelector('.adf-left-label'); + expect(adfLeftLabel).not.toBeNull(); + }); + + it('should not have left labels classes on leftLabels false', async () => { + widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: false }), { + id: 'group-id', + name: 'group-name', + value: '', + type: FormFieldTypes.GROUP, + readOnly: false, + required: true + }); + + fixture.detectChanges(); + await fixture.whenStable(); + + const widgetContainer = element.querySelector('.adf-left-label-input-container'); + expect(widgetContainer).toBeNull(); + + const adfLeftLabel = element.querySelector('.adf-left-label'); + expect(adfLeftLabel).toBeNull(); + }); + + it('should not have left labels classes on leftLabels not present', async () => { + widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), { + id: 'group-id', + name: 'group-name', + value: '', + type: FormFieldTypes.GROUP, + readOnly: false, + required: true + }); + + fixture.detectChanges(); + await fixture.whenStable(); + + const widgetContainer = element.querySelector('.adf-left-label-input-container'); + expect(widgetContainer).toBeNull(); + + const adfLeftLabel = element.querySelector('.adf-left-label'); + expect(adfLeftLabel).toBeNull(); + }); + }); }); diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html index 320167cd723..a95be104114 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html +++ b/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html @@ -1,25 +1,29 @@
- + [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly" [class.adf-left-label-input-container]="field.leftLabels"> +
+ +
+
- - - + [preSelectUsers]="preSelectUsers" + [validate]="true" + [appName]="appName" + [title]="title" + [readOnly]="field.readOnly" + [searchUserCtrl]="search" + [required]="isRequired()" + (changedUsers)="onChangedUser($event)" + [roles]="roles" + [mode]="mode" + [groupsRestriction]="groupsRestriction" + (blur)="markAsTouched()" + [matTooltip]="field.tooltip" + matTooltipPosition="above" + matTooltipShowDelay="1000"> + + + +
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.spec.ts b/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.spec.ts index 07194bd348d..15cea99c191 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.spec.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.spec.ts @@ -99,4 +99,67 @@ describe('PeopleCloudWidgetComponent', () => { expect(element.querySelector('.adf-invalid')).toBeTruthy(); }); }); + + describe('when form model has left labels', () => { + + it('should have left labels classes on leftLabels true', async () => { + widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: true }), { + id: 'people-id', + name: 'people-name', + value: '', + type: FormFieldTypes.PEOPLE, + readOnly: false, + required: true + }); + + fixture.detectChanges(); + await fixture.whenStable(); + + const widgetContainer = element.querySelector('.adf-left-label-input-container'); + expect(widgetContainer).not.toBeNull(); + + const adfLeftLabel = element.querySelector('.adf-left-label'); + expect(adfLeftLabel).not.toBeNull(); + }); + + it('should not have left labels classes on leftLabels false', async () => { + widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: false }), { + id: 'people-id', + name: 'people-name', + value: '', + type: FormFieldTypes.PEOPLE, + readOnly: false, + required: true + }); + + fixture.detectChanges(); + await fixture.whenStable(); + + const widgetContainer = element.querySelector('.adf-left-label-input-container'); + expect(widgetContainer).toBeNull(); + + const adfLeftLabel = element.querySelector('.adf-left-label'); + expect(adfLeftLabel).toBeNull(); + }); + + it('should not have left labels classes on leftLabels not present', async () => { + widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), { + id: 'people-id', + name: 'people-name', + value: '', + type: FormFieldTypes.PEOPLE, + readOnly: false, + required: true + }); + + fixture.detectChanges(); + await fixture.whenStable(); + + const widgetContainer = element.querySelector('.adf-left-label-input-container'); + expect(widgetContainer).toBeNull(); + + const adfLeftLabel = element.querySelector('.adf-left-label'); + expect(adfLeftLabel).toBeNull(); + }); + }); });