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

[AAE-8856] Enable left label for form widgets in several widgets (#7640)

Browse Source
This commit is contained in:
Rubén Barroso 2022-05-18 18:43:59 +02:00 committed by GitHub
parent d4779360d8
commit b13a5cc282
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 482 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
lib/core/form/components/widgets/amount/amount.widget.html
View File

@ -1,26 +1,21 @@
<div class="adf-amount-widget__container adf-amount-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"
[class.adf-left-label-input-container]="field.leftLabels">
<div>
<label class="adf-label"
[attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
[class.adf-left-label]="field.leftLabels" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
</div>
<div>
<mat-form-field class="adf-amount-widget__input" [hideRequiredMarker]="true">
<span matPrefix class="adf-amount-widget__prefix-spacing">{{ currency }} &nbsp;</span>
<input matInput
[matTooltip]="field.tooltip"
matTooltipPosition="above"
matTooltipShowDelay="1000"
class="adf-input"
type="text"
[id]="field.id"
[required]="isRequired()"
[placeholder]="placeholder"
[value]="field.value"
[(ngModel)]="field.value"
(ngModelChange)="onFieldChanged(field)"
[disabled]="field.readOnly"
<input matInput [matTooltip]="field.tooltip" matTooltipPosition="above" matTooltipShowDelay="1000"
class="adf-input" type="text" [id]="field.id" [required]="isRequired()"
[placeholder]="placeholder" [value]="field.value" [(ngModel)]="field.value"
(ngModelChange)="onFieldChanged(field)" [disabled]="field.readOnly"
(blur)="markAsTouched()">
</mat-form-field>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()"
required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>
</div>

4
lib/core/form/components/widgets/amount/amount.widget.scss
View File

@ -2,6 +2,10 @@
&-amount-widget {
width: 100%;
margin-top: 15px;
.adf-left-label {
line-height: 36px;
}
}
&-amount-widget__input {

65
lib/core/form/components/widgets/amount/amount.widget.spec.ts
View File

@ -118,6 +118,7 @@ describe('AmountWidgetComponent - rendering', () => {
let widget: AmountWidgetComponent;
let fixture: ComponentFixture<AmountWidgetComponent>;
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', () => {

11
lib/core/form/components/widgets/date-time/date-time.widget.html
View File

@ -1,6 +1,10 @@
<div class="{{field.className}}" id="data-time-widget" [class.adf-invalid]="!field.isValid && isTouched()">
<mat-form-field class="adf-date-time-widget" [hideRequiredMarker]="true">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }} ({{field.dateDisplayFormat}})<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<div class="{{field.className}}" id="data-time-widget" [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-left-label-input-container]="field.leftLabels">
<div *ngIf="field.leftLabels">
<label class="adf-label adf-left-label" [attr.for]="field.id">{{field.name | translate }} ({{field.dateDisplayFormat}})<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
</div>
<div>
<mat-form-field class="adf-date-time-widget" [class.adf-left-label-input-datepicker]="field.leftLabels" [hideRequiredMarker]="true">
<label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">{{field.name | translate }} ({{field.dateDisplayFormat}})<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<input matInput
[id]="field.id"
[value]="field.value"
@ -27,3 +31,4 @@
[disabled]="field.readOnly"
(dateInput)="onDateChanged($any($event).targetElement.value)">
</div>
</div>

10
lib/core/form/components/widgets/date-time/date-time.widget.scss
View File

@ -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 {

72
lib/core/form/components/widgets/date-time/date-time.widget.spec.ts
View File

@ -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();
});
});
});

12
lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html
View File

@ -1,6 +1,11 @@
<div class="{{field.className}}" id="data-widget" [class.adf-invalid]="!field.isValid && isTouched()">
<mat-form-field class="adf-date-widget" [hideRequiredMarker]="true">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }} ({{field.dateDisplayFormat}})<span class="adf-asterisk"
<div class="{{field.className}}" id="data-widget" [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-left-label-input-container]="field.leftLabels">
<div *ngIf="field.leftLabels">
<label class="adf-label adf-left-label" [attr.for]="field.id">{{field.name | translate }} ({{field.dateDisplayFormat}})<span class="adf-asterisk"
*ngIf="isRequired()">*</span></label>
</div>
<div>
<mat-form-field class="adf-date-widget" [class.adf-left-label-input-datepicker]="field.leftLabels" [hideRequiredMarker]="true">
<label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">{{field.name | translate }} ({{field.dateDisplayFormat}})<span class="adf-asterisk"
*ngIf="isRequired()">*</span></label>
<input matInput
[id]="field.id"
@ -27,3 +32,4 @@
[disabled]="field.readOnly"
(dateInput)="onDateChanged($any($event).targetElement.value)">
</div>
</div>

10
lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss
View File

@ -8,4 +8,14 @@
top: 20px;
}
}
&-left-label-input-datepicker {
.mat-form-field-suffix {
top: 0;
}
.mat-form-field-infix {
width: 100%;
}
}
}

74
lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts
View File

@ -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();
});
});
});

8
lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html
View File

@ -1,7 +1,10 @@
<div class="adf-dropdown-widget {{field.className}}"
[class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk"
[class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly" [class.adf-left-label-input-container]="field.leftLabels">
<div>
<label class="adf-label" [class.adf-left-label]="field.leftLabels" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk"
*ngIf="isRequired()">*</span></label>
</div>
<div>
<adf-cloud-group [mode]="mode"
[title]="title"
[readOnly]="field.readOnly"
@ -19,4 +22,5 @@
<error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired() && isTouched()"
required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>
</div>

63
lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.spec.ts
View File

@ -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();
});
});
});

8
lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html
View File

@ -1,6 +1,9 @@
<div class="adf-dropdown-widget {{field.className}}"
[class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
[class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly" [class.adf-left-label-input-container]="field.leftLabels">
<div>
<label class="adf-label" [class.adf-left-label]="field.leftLabels" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
</div>
<div>
<adf-cloud-people
[preSelectUsers]="preSelectUsers"
[validate]="true"
@ -22,4 +25,5 @@
<error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired() && isTouched()"
required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>
</div>

63
lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.spec.ts
View File

@ -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();
});
});
});