inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-19 17:14:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-21697 Fix people form widget style (#9555)

Browse Source
This commit is contained in:
Diogo Bastos 2024-04-15 14:53:23 +01:00 committed by VitoAlbano
parent fb9a5fc380
commit c4c72e3088
3 changed files with 26 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,26 +1,28 @@
<div class="adf-dropdown-widget {{field.className}}"
[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 *ngIf="field.leftLabels">
<label class="adf-label adf-left-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
</div>
<div>
<adf-cloud-people
[preSelectUsers]="preSelectUsers"
[appName]="appName"
[title]="title"
[readOnly]="field.readOnly"
[validate]="validate"
[searchUserCtrl]="search"
[required]="isRequired()"
(changedUsers)="onChangedUser($event)"
[roles]="roles"
[mode]="mode"
[groupsRestriction]="groupsRestriction"
(blur)="markAsTouched()"
[matTooltip]="field.tooltip"
matTooltipPosition="above"
matTooltipShowDelay="1000">
</adf-cloud-people>
[preSelectUsers]="preSelectUsers"
[appName]="appName"
[title]="title"
[readOnly]="field.readOnly"
[validate]="validate"
[searchUserCtrl]="search"
[required]="isRequired()"
(changedUsers)="onChangedUser($event)"
[roles]="roles"
[mode]="mode"
[groupsRestriction]="groupsRestriction"
(blur)="markAsTouched()"
[matTooltip]="field.tooltip"
matTooltipPosition="above"
matTooltipShowDelay="1000"
>
<label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id" label>{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
</adf-cloud-people>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired() && isTouched()"
required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>

3
lib/process-services-cloud/src/lib/people/components/people-cloud.component.html
View File

@ -1,6 +1,6 @@
<form>
<mat-form-field [floatLabel]="'auto'" class="adf-people-cloud" [class.adf-invalid]="hasError() && isDirty()">
<mat-label *ngIf="!isReadonly()" id="adf-people-cloud-title-id">{{ title | translate }}</mat-label>
<ng-content select="[label]"></ng-content>
<mat-chip-grid #userMultipleChipList [disabled]="isReadonly() || isValidationLoading()" data-automation-id="adf-cloud-people-chip-list">
<mat-chip-row
*ngFor="let user of selectedUsers"
@ -21,6 +21,7 @@
[formControl]="searchUserCtrl"
[matAutocomplete]="auto"
[matChipInputFor]="userMultipleChipList"
[placeholder]="title | translate"
[required]="required"
(focus)="setFocus(true)"
(blur)="setFocus(false); markAsTouched()"

8
lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts
View File

@ -96,17 +96,17 @@ describe('PeopleCloudComponent', () => {
component.title = 'TITLE_KEY';
fixture.detectChanges();
const matLabel = element.querySelector<HTMLInputElement>('#adf-people-cloud-title-id');
const inputElement = element.querySelector<HTMLInputElement>('[data-automation-id="adf-people-cloud-search-input"]');
expect(matLabel.textContent).toEqual('TITLE_KEY');
expect(inputElement.placeholder).toEqual('TITLE_KEY');
});
it('should not populate placeholder when title is not present', () => {
fixture.detectChanges();
const matLabel = element.querySelector<HTMLInputElement>('#adf-people-cloud-title-id');
const inputElement = element.querySelector<HTMLInputElement>('[data-automation-id="adf-people-cloud-search-input"]');
expect(matLabel.textContent).toEqual('');
expect(inputElement.placeholder).toEqual('');
});
describe('Search user', () => {