inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-09-10 14:11:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-21703 Fix group form widget style

Browse Source
This commit is contained in:
Diogo Bastos
2024-04-17 14:50:30 +01:00
parent 2b67b36c52
commit ac7d1823b3
3 changed files with 31 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,23 +1,25 @@
<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" <label class="adf-label adf-left-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
*ngIf="isRequired()">*</span></label>
</div> </div>
<div> <div>
<adf-cloud-group [mode]="mode" <adf-cloud-group
[title]="title" [mode]="mode"
[readOnly]="field.readOnly" [title]="title"
[validate]="validate" [readOnly]="field.readOnly"
[roles]="roles" [validate]="validate"
[searchGroupsControl]="search" [roles]="roles"
[required]="isRequired()" [searchGroupsControl]="search"
(changedGroups)="onChangedGroup($event)" [required]="isRequired()"
[preSelectGroups]="preSelectGroup" (changedGroups)="onChangedGroup($event)"
(blur)="markAsTouched()" [preSelectGroups]="preSelectGroup"
[matTooltip]="field.tooltip" (blur)="markAsTouched()"
[matTooltipPosition]="'above'" [matTooltip]="field.tooltip"
[matTooltipShowDelay]="1000"> [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-group> </adf-cloud-group>
<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()"

4
lib/process-services-cloud/src/lib/group/components/group-cloud.component.html
View File

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

13
lib/process-services-cloud/src/lib/group/components/group-cloud.component.spec.ts
View File

@@ -89,8 +89,17 @@ describe('GroupCloudComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
const matLabel = element.querySelector<HTMLInputElement>('#adf-group-cloud-title-id'); const inputElement = element.querySelector<HTMLInputElement>('[data-automation-id="adf-cloud-group-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 inputElement = element.querySelector<HTMLInputElement>('[data-automation-id="adf-cloud-group-search-input"]');
expect(inputElement.placeholder).toEqual('');
}); });
describe('Search group', () => { describe('Search group', () => {