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}}" <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"> [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly" [class.adf-left-label-input-container]="field.leftLabels">
<div> <div *ngIf="field.leftLabels">
<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> <label class="adf-label adf-left-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
</div> </div>
<div> <div>
<adf-cloud-people <adf-cloud-people
[preSelectUsers]="preSelectUsers" [preSelectUsers]="preSelectUsers"
[appName]="appName" [appName]="appName"
[title]="title" [title]="title"
[readOnly]="field.readOnly" [readOnly]="field.readOnly"
[validate]="validate" [validate]="validate"
[searchUserCtrl]="search" [searchUserCtrl]="search"
[required]="isRequired()" [required]="isRequired()"
(changedUsers)="onChangedUser($event)" (changedUsers)="onChangedUser($event)"
[roles]="roles" [roles]="roles"
[mode]="mode" [mode]="mode"
[groupsRestriction]="groupsRestriction" [groupsRestriction]="groupsRestriction"
(blur)="markAsTouched()" (blur)="markAsTouched()"
[matTooltip]="field.tooltip" [matTooltip]="field.tooltip"
matTooltipPosition="above" matTooltipPosition="above"
matTooltipShowDelay="1000"> matTooltipShowDelay="1000"
</adf-cloud-people> >
<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 [error]="field.validationSummary"></error-widget>
<error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired() && isTouched()" <error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired() && isTouched()"
required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget> 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> <form>
<mat-form-field [floatLabel]="'auto'" class="adf-people-cloud" [class.adf-invalid]="hasError() && isDirty()"> <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-grid #userMultipleChipList [disabled]="isReadonly() || isValidationLoading()" data-automation-id="adf-cloud-people-chip-list">
<mat-chip-row <mat-chip-row
*ngFor="let user of selectedUsers" *ngFor="let user of selectedUsers"
@ -21,6 +21,7 @@
[formControl]="searchUserCtrl" [formControl]="searchUserCtrl"
[matAutocomplete]="auto" [matAutocomplete]="auto"
[matChipInputFor]="userMultipleChipList" [matChipInputFor]="userMultipleChipList"
[placeholder]="title | translate"
[required]="required" [required]="required"
(focus)="setFocus(true)" (focus)="setFocus(true)"
(blur)="setFocus(false); markAsTouched()" (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'; component.title = 'TITLE_KEY';
fixture.detectChanges(); 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', () => { it('should not populate placeholder when title is not present', () => {
fixture.detectChanges(); 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', () => { describe('Search user', () => {