Skip to content

Commit

Permalink
Phone and Autocomplete bug fix (#58)
Browse files Browse the repository at this point in the history 
Co-authored-by: mohas22 <[email protected]>
  • Loading branch information
@samhere06
samhere06 and mohas22 authored Sep 21, 2023
1 parent 2da8bb3 commit 17088a9
Show file tree
Hide file tree
Showing 6 changed files with 359 additions and 71 deletions.
3 changes: 2 additions & 1 deletion ...gular-sdk-components/src/app/_components/field/auto-complete/auto-complete.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@
(blur)="fieldOnBlur($event)"
/>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="optionChanged($event)">
<mat-option *ngFor="let opt of options$" [value]="opt.value">
<mat-option *ngFor="let opt of filteredOptions | async" [value]="opt.value">
<!-- <mat-option *ngFor="let opt of options$" [value]="opt.value"> -->
<span>{{ opt.value }}</span>
</mat-option>
</mat-autocomplete>
Expand Down
58 changes: 38 additions & 20 deletions ...angular-sdk-components/src/app/_components/field/auto-complete/auto-complete.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import { Utils } from '../../../_helpers/utils';
import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
import { DatapageService } from '../../../_services/datapage.service';
import { handleEvent } from '../../../_helpers/event-util';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';

@Component({
selector: 'app-auto-complete',
Expand Down Expand Up @@ -54,6 +56,7 @@ export class AutoCompleteComponent implements OnInit {
fieldControl = new FormControl('', null);
parameters: {};
hideLabel: any;
filteredOptions: Observable<Array<string>>;

constructor(
private angularPConnect: AngularPConnectService,
Expand All @@ -62,7 +65,7 @@ export class AutoCompleteComponent implements OnInit {
private dataPageService: DatapageService
) {}

ngOnInit(): void {
async ngOnInit(): Promise<void> {
// 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);
Expand All @@ -74,7 +77,7 @@ export class AutoCompleteComponent implements OnInit {

// call updateSelf when initializing
//this.updateSelf();
this.checkAndUpdate();
await this.checkAndUpdate();

if (this.formGroup$ != null) {
// add control to formGroup
Expand All @@ -85,6 +88,12 @@ export class AutoCompleteComponent implements OnInit {
this.bReadonly$ = true;
this.bHasForm$ = false;
}

this.filteredOptions = this.fieldControl.valueChanges.pipe(
startWith(''),
map(value => this._filter(value || '')),
);

}

ngOnDestroy(): void {
Expand All @@ -97,24 +106,29 @@ export class AutoCompleteComponent implements OnInit {
}
}

private _filter(value: string): Array<string> {
const filterValue = value.toLowerCase();
return this.options$?.filter(option => option.value.toLowerCase().includes(filterValue));
}

// Callback passed when subscribing to store change
onStateChange() {
this.checkAndUpdate();
async onStateChange() {
await this.checkAndUpdate();
}

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
updateSelf(): void {
async updateSelf(): Promise<void> {
// starting very simple...

// moved this from ngOnInit() and call this from there instead...
Expand All @@ -133,7 +147,8 @@ export class AutoCompleteComponent implements OnInit {
let datasource = this.configProps$['datasource'];
let columns = this.configProps$['columns'];
this.hideLabel = this.configProps$['hideLabel'];
const { deferDatasource, datasourceMetadata } = this.configProps$;
//const { deferDatasource, datasourceMetadata } = this.configProps$;
const { deferDatasource, datasourceMetadata } = this.pConn$.getConfigProps();
this.helperText = this.configProps$['helperText'];
this.parameters = this.configProps$?.parameters;
const context = this.pConn$.getContextName();
Expand Down Expand Up @@ -199,18 +214,8 @@ export class AutoCompleteComponent implements OnInit {
}

if (!displayMode && this.listType !== 'associated') {
this.dataPageService.getDataPageData(datasource, this.parameters, context).then((results: any) => {
const optionsData: Array<any> = [];
const displayColumn = this.getDisplayFieldsMetaData(this.columns);
results?.forEach((element) => {
const obj = {
key: element[displayColumn.key] || element.pyGUID,
value: element[displayColumn.primary]?.toString()
};
optionsData.push(obj);
});
this.options$ = optionsData;
});
const results = await this.dataPageService.getDataPageData(datasource, this.parameters, context);
this.fillOptions(results);
}

// trigger display of error message with field control
Expand All @@ -224,6 +229,19 @@ export class AutoCompleteComponent implements OnInit {
}
}

fillOptions(results: any){
const optionsData: Array<any> = [];
const displayColumn = this.getDisplayFieldsMetaData(this.columns);
results?.forEach((element) => {
const obj = {
key: element[displayColumn.key] || element.pyGUID,
value: element[displayColumn.primary]?.toString()
};
optionsData.push(obj);
});
this.options$ = optionsData;
}

flattenParameters(params = {}) {
const flatParams = {};
Object.keys(params).forEach((key) => {
Expand Down
9 changes: 5 additions & 4 deletions packages/angular-sdk-components/src/app/_components/field/phone/phone.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
</div>
<ng-template #noDisplayMode>
<div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
<div #f="ngForm" [formGroup]="formGroup$">
<div class="psdk-full-width">
<div #f="ngForm" [formGroup]="formGroup$" *ngIf="bVisible$">
<!-- <div class="psdk-full-width"> -->
<mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
<ngx-mat-intl-tel-input
[attr.data-test-id]="testId"
Expand All @@ -16,9 +16,10 @@
(blur)="fieldOnBlur($event)"
>
</ngx-mat-intl-tel-input>
<mat-error *ngIf="fieldControl.invalid && afterBlur">{{ getErrorMessage() }}</mat-error>
<mat-label>{{ label$ }}</mat-label>
<mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
</mat-form-field>
</div>
<!-- </div> -->
</div>
</div>
</ng-template>
Expand Down
92 changes: 46 additions & 46 deletions packages/angular-sdk-components/src/app/_components/field/phone/phone.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,58 +24,58 @@
font-size: 0.7rem;
}

::ng-deep .iti {
display: block !important;
margin-bottom: 20px;
// ::ng-deep .iti {
// display: block !important;
// margin-bottom: 20px;

.dropdown-menu.country-dropdown {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-color: #c7cace;
margin-top: -1px;
}
// .dropdown-menu.country-dropdown {
// border-top-left-radius: 0px;
// border-top-right-radius: 0px;
// border-color: #c7cace;
// margin-top: -1px;
// }

.iti__country-list {
box-shadow: none;
font-size: 14px;
margin-left: 0;
width: 244px;
max-height: 170px;
}
// .iti__country-list {
// box-shadow: none;
// font-size: 14px;
// margin-left: 0;
// width: 244px;
// max-height: 170px;
// }

.search-container input {
font-size: 14px;
border-color: #c7cace;
border-radius: 0;
padding: 5px 10px;
}
// .search-container input {
// font-size: 14px;
// border-color: #c7cace;
// border-radius: 0;
// padding: 5px 10px;
// }

.search-container input:focus {
outline: none;
}
}
// .search-container input:focus {
// outline: none;
// }
// }

::ng-deep .iti__flag-container.open + input {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
// ::ng-deep .iti__flag-container.open + input {
// border-bottom-left-radius: 0px;
// border-bottom-right-radius: 0px;
// }

::ng-deep ngx-mat-intl-tel-input {
.country-selector {
opacity: 1 !important;
bottom: 8px !important;
}
// ::ng-deep ngx-mat-intl-tel-input {
// .country-selector {
// opacity: 1 !important;
// bottom: 8px !important;
// }

input:not(.country-search) {
bottom: 3px;
left: 10px;
}
// input:not(.country-search) {
// bottom: 3px;
// left: 10px;
// }

.country-list-button {
font-size: 0.8rem !important;
}
// .country-list-button {
// font-size: 0.8rem !important;
// }

.mat-menu-content:not(:empty) {
max-height: 250px;
}
}
// .mat-menu-content:not(:empty) {
// max-height: 250px;
// }
// }
Loading

0 comments on commit 17088a9

Please sign in to comment.