inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-21703 Fix group widget style (#9612)

Browse Source 
* AAE-21703 Fix group form widget style

* AAE-21703 Improve tests
This commit is contained in:
Diogo Bastos
2024-04-29 12:33:38 +01:00
committed by VitoAlbano
parent b821332b9b
commit 30026c7829
3 changed files with 33 additions and 23 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()"

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

@@ -18,7 +18,6 @@
import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser'; import { By } from '@angular/platform-browser';
import { of } from 'rxjs'; import { of } from 'rxjs';
import { ProcessServiceCloudTestingModule } from './../../testing/process-service-cloud.testing.module';
import { GroupCloudModule } from '../group-cloud.module'; import { GroupCloudModule } from '../group-cloud.module';
import { GroupCloudComponent } from './group-cloud.component'; import { GroupCloudComponent } from './group-cloud.component';
import { CoreTestingModule } from '@alfresco/adf-core'; import { CoreTestingModule } from '@alfresco/adf-core';
@@ -73,7 +72,7 @@ describe('GroupCloudComponent', () => {
beforeEach(() => { beforeEach(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
imports: [CoreTestingModule, ProcessServiceCloudTestingModule, GroupCloudModule] imports: [CoreTestingModule, GroupCloudModule]
}); });
fixture = TestBed.createComponent(GroupCloudComponent); fixture = TestBed.createComponent(GroupCloudComponent);
component = fixture.componentInstance; component = fixture.componentInstance;
@@ -83,13 +82,22 @@ describe('GroupCloudComponent', () => {
loader = TestbedHarnessEnvironment.loader(fixture); loader = TestbedHarnessEnvironment.loader(fixture);
}); });
it('should populate placeholder when title is present', () => { it('should populate placeholder when title is present', async () => {
component.title = 'TITLE_KEY'; component.title = 'TITLE_KEY';
fixture.detectChanges(); fixture.detectChanges();
const matLabel = element.querySelector<HTMLInputElement>('#adf-group-cloud-title-id'); const inputElement = await loader.getHarness(MatInputHarness.with({ selector: '[data-automation-id="adf-cloud-group-search-input"]' }));
expect(matLabel.textContent).toEqual('TITLE_KEY');
expect(await inputElement.getPlaceholder()).toEqual('TITLE_KEY');
});
it('should not populate placeholder when title is not present', async () => {
fixture.detectChanges();
const inputElement = await loader.getHarness(MatInputHarness.with({ selector: '[data-automation-id="adf-cloud-group-search-input"]' }));
expect(await inputElement.getPlaceholder()).toEqual('');
}); });
describe('Search group', () => { describe('Search group', () => {