From 58f2ec48d01ee783a2638c0010ac557eebb70794 Mon Sep 17 00:00:00 2001 From: Yubing325 <35515298+Yubing325@users.noreply.github.com> Date: Mon, 6 Jul 2020 10:25:52 -0500 Subject: [PATCH] temp commit the ng-select before removing --- .../ng-select/ng-select.component.html | 22 +++-- .../ng-select/ng-select.component.ts | 86 +++++++++++++++---- .../lib/ps-selectors/ps-selectors.module.ts | 7 +- .../select-option-template.directive.ts | 10 +++ .../poweredsoft/ngx-cdk-ui/src/public-api.ts | 3 +- .../ng-select-demo/ng-select-demo.module.ts | 3 +- .../ng-select-demo.component.html | 35 +++++++- .../ng-select-demo.component.ts | 9 +- 8 files changed, 143 insertions(+), 32 deletions(-) create mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/select-option-template.directive.ts diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.html b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.html index 2423cae..feb5be1 100644 --- a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.html +++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.html @@ -1,9 +1,17 @@ - + [typeahead] = "searchInput$" + [trackByFn]="trackFn" + (change)="valueChanged($event)"> + + + + + - -
Selected: {{selectedId | json }} \ No newline at end of file diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.ts index 7bce209..4cb4f62 100644 --- a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.ts +++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.ts @@ -1,47 +1,86 @@ -import { Component, OnInit, Input, ChangeDetectorRef, OnDestroy } from '@angular/core'; +import { Component, OnInit, Input, ChangeDetectorRef, OnDestroy, ContentChild, QueryList, ContentChildren, ViewChild, forwardRef, EventEmitter, Output } from '@angular/core'; import { IDataSource, ISimpleFilter } from '@poweredsoft/data'; import { Observable, Subject, Subscription } from 'rxjs'; import { distinctUntilChanged, debounceTime, map } from 'rxjs/operators'; +import { SelectOptionTemplateDirective } from '../select-option-template.directive'; +import { NgSelectComponent as SelectComponent } from '@ng-select/ng-select'; +import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; @Component({ selector: 'ps-ng-select', templateUrl: './ng-select.component.html', + providers: [{ + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => NgSelectComponent), + multi: true +}], styleUrls: ['./ng-select.component.scss'] }) -export class NgSelectComponent implements OnInit, OnDestroy { +export class NgSelectComponent implements OnInit, OnDestroy, ControlValueAccessor { + @ContentChild(SelectOptionTemplateDirective) selectTemplate: SelectOptionTemplateDirective; + @ViewChild(SelectComponent, { static: true }) selectComponent: SelectComponent; @Input() dataSource: IDataSource; @Input() searchPath: string; - @Input() searchType: string = "Contains"; + @Input() searchType: string; @Input() sortingPath: string; - @Input() disableServer:boolean = false; - + @Input() serverFiltering:boolean; @Input() bindLabel:string; + @Input() bindValue: string; + @Output('change') changeEvent = new EventEmitter(); + trackFn: (item: any) => any; data$ : Observable; - selectedId:any; isLoading:boolean = false; searchInput$ = new Subject(); - private _dataSubscription: Subscription; + private _loadingSubscription: Subscription; + + constructor(private cdr: ChangeDetectorRef) { + this.trackFn = this.trackBy.bind(this); + + } + + valueChanged(event) { + this.changeEvent.emit(event); + } + + writeValue(obj: any): void { + this.selectComponent.writeValue(obj); + } + registerOnChange(fn: any): void { + this.selectComponent.registerOnChange(fn); + } + registerOnTouched(fn: any): void { + this.selectComponent.registerOnTouched(fn); + } + setDisabledState?(isDisabled: boolean): void { + if (this.selectComponent.setDisabledState) + this.selectComponent.setDisabledState(isDisabled); + } + + trackBy(item: any) { + return this.dataSource.resolveIdField(item); + } - constructor(private cdr: ChangeDetectorRef) { } ngOnDestroy(): void { - this._dataSubscription.unsubscribe(); + this._loadingSubscription.unsubscribe(); } ngOnInit(): void { this.dataFetching(); this.detectLoading(); - if(!this.disableServer){ + + console.log(this.serverFiltering); + + if(this.serverFiltering){ this.searchOnServer(); }else{ this.refreshDataSource(); } } - dataFetching(){ this.data$ = this.dataSource.data$.pipe( map(t => { @@ -50,11 +89,10 @@ export class NgSelectComponent implements OnInit, OnDestroy { return t.data; }) ); - this._dataSubscription = this.dataSource.data$.subscribe(); } detectLoading(){ - this.dataSource.loading$.subscribe(loading => { + this._loadingSubscription = this.dataSource.loading$.subscribe(loading => { this.isLoading = loading; this.cdr.detectChanges(); }); @@ -69,12 +107,16 @@ export class NgSelectComponent implements OnInit, OnDestroy { this.refreshDataSource(); //send the query to server to sorting & filtering by default } - refreshDataSource(searchTerm:any = null, page:number=null, pageSize:number=null){ + get selectedModel() { + return this.selectComponent.hasValue ? this.selectComponent.selectedItems[0].value : null; + } + + refreshDataSource(searchTerm:any = null, page:number = null, pageSize:number = null){ let searchfilters:ISimpleFilter[] = null; if(searchTerm){ searchfilters = [{ - path: this.searchPath, - type: this.searchType, // Default: Contains + path: this.searchPath || this.bindLabel, + type: this.searchType || 'Contains', // Default: Contains value: searchTerm }] } @@ -83,9 +125,19 @@ export class NgSelectComponent implements OnInit, OnDestroy { pageSize: pageSize, filters:searchfilters, sorts:[ - {path: this.sortingPath, ascending: true} + {path: this.sortingPath || this.bindLabel, ascending: true} ] }) } + get hasOptionTemplate() { + return this.selectTemplate ? true : false; + } + + get selectOptionTemplate(){ + if (this.selectTemplate) + return this.selectTemplate.template; + return null; + } + } diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ps-selectors.module.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ps-selectors.module.ts index dc35df7..e399722 100644 --- a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ps-selectors.module.ts +++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ps-selectors.module.ts @@ -2,18 +2,19 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { NgSelectComponent } from './ng-select/ng-select.component'; import { NgMultiSelectComponent } from './ng-multi-select/ng-multi-select.component'; -import { FormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { NgSelectModule } from '@ng-select/ng-select'; +import { SelectOptionTemplateDirective } from './select-option-template.directive'; @NgModule({ - declarations: [NgSelectComponent, NgMultiSelectComponent], + declarations: [NgSelectComponent, NgMultiSelectComponent, SelectOptionTemplateDirective], imports: [ CommonModule, FormsModule, NgSelectModule, ], - exports:[NgSelectComponent,NgMultiSelectComponent] + exports:[NgSelectComponent,NgMultiSelectComponent,SelectOptionTemplateDirective] }) export class PsSelectorsModule { } diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/select-option-template.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/select-option-template.directive.ts new file mode 100644 index 0000000..ef1381d --- /dev/null +++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/select-option-template.directive.ts @@ -0,0 +1,10 @@ +import { Directive, TemplateRef } from '@angular/core'; + +@Directive({ + selector: '[psSelectOptionTemplate]' +}) +export class SelectOptionTemplateDirective { + + constructor(public template: TemplateRef) { } + +} diff --git a/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts b/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts index d8531dd..04015df 100644 --- a/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts +++ b/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts @@ -16,4 +16,5 @@ export * from './lib/data-grid/directives/data-grid-col-sort.directive'; //ng selects export * from './lib/ps-selectors/ps-selectors.module'; export * from './lib/ps-selectors/ng-select/ng-select.component'; -export * from './lib/ps-selectors/ng-multi-select/ng-multi-select.component'; \ No newline at end of file +export * from './lib/ps-selectors/ng-multi-select/ng-multi-select.component'; +export * from './lib/ps-selectors/select-option-template.directive'; \ No newline at end of file diff --git a/src/app/ng-select-demo/ng-select-demo.module.ts b/src/app/ng-select-demo/ng-select-demo.module.ts index 59b05bc..ffa7b5e 100644 --- a/src/app/ng-select-demo/ng-select-demo.module.ts +++ b/src/app/ng-select-demo/ng-select-demo.module.ts @@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common'; import { NgSelectDemoComponent } from './ng-select-demo/ng-select-demo.component'; import { NgSelectDemoRoutingModule } from './ng-select-demo-routing.module'; import { NgSelectModule } from '@ng-select/ng-select'; -import { FormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { PsSelectorsModule } from '@poweredsoft/ngx-cdk-ui'; @@ -14,6 +14,7 @@ import { PsSelectorsModule } from '@poweredsoft/ngx-cdk-ui'; CommonModule, NgSelectModule, FormsModule, + ReactiveFormsModule, NgSelectDemoRoutingModule, PsSelectorsModule //our ng select module ] diff --git a/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.html b/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.html index bd5c98c..9cf5f05 100644 --- a/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.html +++ b/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.html @@ -1,6 +1,37 @@

Single Select Demo

- + +
+ {{ item.name }} - {{ item.address }} +
+

Multi-Select Demo

- \ No newline at end of file + + + + +
+ +
+ {{ item.name }} - {{ item.address }} +
+ +
+ +{{ myForm.value | json }} + + + +
+ {{ item.name }} - {{ item.address }} +
+ + +{{ myValue | json }} \ No newline at end of file diff --git a/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.ts b/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.ts index 6e9d72e..5ad4d3b 100644 --- a/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.ts +++ b/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.ts @@ -5,6 +5,7 @@ import { IMerchant } from 'src/app/data/services/IMerchant'; import { Observable, Subject } from 'rxjs'; import { map, distinctUntilChanged, debounceTime } from 'rxjs/operators'; import { IDataSource, ISimpleFilter } from '@poweredsoft/data'; +import { FormBuilder, FormGroup } from '@angular/forms'; @Component({ selector: 'ps-ng-select-demo', @@ -15,10 +16,16 @@ export class NgSelectDemoComponent implements OnInit { merchantDataSource: IDataSource; + selectedValue: IMerchant; + myForm: FormGroup; + myValue: string; - constructor(private merchantService: MerchantService, + constructor(private merchantService: MerchantService, private fb: FormBuilder ) { this.merchantDataSource = merchantService.createDataSource(); //Assign the dataSource + this.myForm = fb.group({ + 'merchantId': [null, null] + }) } ngOnInit(): void {