diff --git a/packages/angular-sdk-components/src/lib/_components/field/user-reference/user-reference.component.html b/packages/angular-sdk-components/src/lib/_components/field/user-reference/user-reference.component.html
index 4fb2f63f..e09a9236 100644
--- a/packages/angular-sdk-components/src/lib/_components/field/user-reference/user-reference.component.html
+++ b/packages/angular-sdk-components/src/lib/_components/field/user-reference/user-reference.component.html
@@ -40,7 +40,7 @@
(blur)="fieldOnBlur($event)"
/>
-
+
{{ opt.value }}
diff --git a/packages/angular-sdk-components/src/lib/_components/field/user-reference/user-reference.component.ts b/packages/angular-sdk-components/src/lib/_components/field/user-reference/user-reference.component.ts
index 58a7c9d2..888c5167 100644
--- a/packages/angular-sdk-components/src/lib/_components/field/user-reference/user-reference.component.ts
+++ b/packages/angular-sdk-components/src/lib/_components/field/user-reference/user-reference.component.ts
@@ -10,6 +10,7 @@ import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/an
import { Utils } from '../../../_helpers/utils';
import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
import { PConnFieldProps } from '../../../_types/PConnProps.interface';
+import { map, Observable, startWith } from 'rxjs';
const OPERATORS_DP = 'D_pyGetOperatorsForCurrentApplication';
const DROPDOWN_LIST = 'Drop-down list';
@@ -58,6 +59,8 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
helperText: string;
placeholder: string;
displayMode$?: string;
+ filteredOptions: Observable;
+ filterValue = '';
fieldControl = new FormControl('', null);
@@ -66,19 +69,24 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
private utils: Utils
) {}
- ngOnInit(): void {
+ async ngOnInit(): Promise {
// First thing in initialization is registering and subscribing to the AngularPConnect service
this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
this.controlName$ = this.angularPConnect.getComponentID(this);
- this.checkAndUpdate();
+ await this.checkAndUpdate();
if (this.formGroup$) {
// add control to formGroup
this.formGroup$.addControl(this.controlName$, this.fieldControl);
this.fieldControl.setValue(this.value$);
}
+
+ this.filteredOptions = this.fieldControl.valueChanges.pipe(
+ startWith(''),
+ map(value => this._filter(value || ''))
+ );
}
ngOnDestroy() {
@@ -106,22 +114,27 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
}
// Callback passed when subscribing to store change
- onStateChange() {
- this.checkAndUpdate();
+ async onStateChange() {
+ await this.checkAndUpdate();
+ }
+
+ private _filter(value: string): string[] {
+ const filterVal = (value || this.filterValue).toLowerCase();
+ return this.options$?.filter(option => option.value?.toLowerCase().includes(filterVal));
}
- checkAndUpdate() {
+ async checkAndUpdate() {
// Should always check the bridge to see if the component should
// update itself (re-render)
const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
// ONLY call updateSelf when the component should update
if (bUpdateSelf) {
- this.updateSelf();
+ await this.updateSelf();
}
}
- updateSelf() {
+ async updateSelf() {
const props = this.pConn$.getConfigProps() as UserReferenceProps;
this.testId = props.testId;
@@ -160,18 +173,18 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
const queryPayload = {
dataViewName: OPERATORS_DP
};
- PCore.getRestClient()
- .invokeRestApi('getListData', { queryPayload } as any, '') // 3rd arg empty string until typedef marked correctly
- .then((resp: any) => {
+ try {
+ const resp: any = await PCore.getRestClient().invokeRestApi('getListData', { queryPayload } as any, ''); // 3rd arg empty string until typedef marked correctly
+ if (resp?.data) {
const ddDataSource = resp.data.data.map(listItem => ({
key: listItem.pyUserIdentifier,
value: listItem.pyUserName
}));
this.options$ = ddDataSource;
- })
- .catch(err => {
- console.log(err);
- });
+ }
+ } catch (error) {
+ console.log(error);
+ }
}
}
@@ -179,6 +192,9 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
if (event?.value === 'Select') {
event.value = '';
}
+ if (event?.target) {
+ this.filterValue = (event.target as HTMLInputElement).value;
+ }
this.angularPConnectData.actions?.onChange(this, event);
}