inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-21392 Fix dropdown cloud widget style

Browse Source
This commit is contained in:
Diogo Bastos
2024-03-25 11:47:55 +00:00
parent 219f239eee
commit 10a5bf2e68
3 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html
+6 -9
View File
@@ -1,16 +1,12 @@
<div class="adf-dropdown-widget {{field.className}}" <div class="adf-dropdown-widget {{field.className}}"
[class.adf-invalid]="(!field.isValid && isTouched()) || isRestApiFailed" [class.adf-readonly]="field.readOnly" [class.adf-left-label-input-container]="field.leftLabels"> [class.adf-invalid]="(!field.isValid && isTouched()) || isRestApiFailed" [class.adf-readonly]="field.readOnly" [class.adf-left-label-input-container]="field.leftLabels">
<div class="adf-dropdown-widget-top-labels">
<label class="adf-label" [attr.for]="field.id" [class.adf-left-label]="field.leftLabels">{{field.name | translate }}<span class="adf-asterisk"
*ngIf="isRequired()">*</span>
</label>
</div>
<div> <div>
<mat-form-field> <mat-form-field>
<mat-label *ngIf="getDefaultOption(list$ | async) as defaultOption"> <label class="adf-label" [attr.for]="field.id" [class.adf-left-label]="field.leftLabels">{{field.name | translate }}<span class="adf-asterisk"
{{ defaultOption.name }} *ngIf="isRequired()">*</span>
</mat-label> </label>
<mat-select class="adf-select" <mat-select class="adf-select"
*ngIf="list$ | async as options"
[id]="field.id" [id]="field.id"
[(ngModel)]="field.value" [(ngModel)]="field.value"
[disabled]="field.readOnly" [disabled]="field.readOnly"
@@ -22,10 +18,11 @@
(blur)="markAsTouched()" (blur)="markAsTouched()"
matTooltipPosition="above" matTooltipPosition="above"
matTooltipShowDelay="1000" matTooltipShowDelay="1000"
[placeholder]="defaultOption?.name"
[multiple]="field.hasMultipleValues"> [multiple]="field.hasMultipleValues">
<adf-select-filter-input *ngIf="showInputFilter" (change)="filter$.next($event)"></adf-select-filter-input> <adf-select-filter-input *ngIf="showInputFilter" (change)="filter$.next($event)"></adf-select-filter-input>
<mat-option *ngFor="let opt of list$ | async" <mat-option *ngFor="let opt of options"
[value]="getOptionValue(opt, field.value)" [value]="getOptionValue(opt, field.value)"
[id]="opt.id">{{opt.name}} [id]="opt.id">{{opt.name}}
</mat-option> </mat-option>
lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts
+2 -2
View File
@@ -298,10 +298,10 @@ describe('DropdownCloudWidgetComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
await fixture.whenStable(); await fixture.whenStable();
const dropdownLabel = fixture.debugElement.query(By.css('.adf-dropdown-widget mat-label')); const placeholderElement = fixture.debugElement.query(By.css('.mat-mdc-select-placeholder'));
selectedValueElement = fixture.debugElement.query(By.css('.mat-mdc-select-value-text')); selectedValueElement = fixture.debugElement.query(By.css('.mat-mdc-select-value-text'));
expect(dropdownLabel.nativeNode.innerText).toEqual('This is a mock none option'); expect(placeholderElement.nativeNode.innerText).toEqual('This is a mock none option');
expect(widget.fieldValue).toEqual(undefined); expect(widget.fieldValue).toEqual(undefined);
expect(selectedValueElement).toBeFalsy(); expect(selectedValueElement).toBeFalsy();
}); });
lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts
+5 -1
View File
@@ -29,7 +29,7 @@ import {
} from '@alfresco/adf-core'; } from '@alfresco/adf-core';
import { FormCloudService } from '../../../services/form-cloud.service'; import { FormCloudService } from '../../../services/form-cloud.service';
import { BehaviorSubject, combineLatest, Observable, of, Subject } from 'rxjs'; import { BehaviorSubject, combineLatest, Observable, of, Subject } from 'rxjs';
import { filter, map, takeUntil } from 'rxjs/operators'; import { filter, map, takeUntil, tap } from 'rxjs/operators';
import { TaskVariableCloud } from '../../../models/task-variable-cloud.model'; import { TaskVariableCloud } from '../../../models/task-variable-cloud.model';
export const DEFAULT_OPTION = { export const DEFAULT_OPTION = {
@@ -66,6 +66,7 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
restApiHostName: string; restApiHostName: string;
list$: Observable<FormFieldOption[]>; list$: Observable<FormFieldOption[]>;
filter$ = new BehaviorSubject<string>(''); filter$ = new BehaviorSubject<string>('');
defaultOption: FormFieldOption;
private readonly defaultVariableOptionId = 'id'; private readonly defaultVariableOptionId = 'id';
private readonly defaultVariableOptionLabel = 'name'; private readonly defaultVariableOptionLabel = 'name';
@@ -403,6 +404,9 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
} }
return items.filter(({ name }) => name.toLowerCase().includes(search.toLowerCase())); return items.filter(({ name }) => name.toLowerCase().includes(search.toLowerCase()));
}), }),
tap(items => {
this.defaultOption = this.getDefaultOption(items);
}),
takeUntil(this.onDestroy$) takeUntil(this.onDestroy$)
); );
} }