From 3806e44945184834382bb28880b345b69ca2e087 Mon Sep 17 00:00:00 2001 From: Yubing325 <35515298+Yubing325@users.noreply.github.com> Date: Mon, 6 Jul 2020 15:41:58 -0500 Subject: [PATCH] demo checking --- .../multi-select/multi-select.component.ts | 2 - .../form-group-command-modal.component.ts | 4 +- .../ng-multi-select.component.html | 21 --- .../ng-multi-select.component.scss | 0 .../ng-multi-select.component.spec.ts | 25 --- .../ng-multi-select.component.ts | 97 ------------ .../ng-select/ng-select.component.html | 0 .../ng-select/ng-select.component.scss | 0 .../ng-select/ng-select.component.spec.ts | 25 --- .../ng-select/ng-select.component.ts | 143 ------------------ .../lib/ps-selectors/ps-selectors.module.ts | 20 --- .../poweredsoft/ngx-cdk-ui/src/public-api.ts | 4 - .../command-modal-demo.component.html | 2 +- .../data-grid-demo-home.component.html | 8 +- .../ng-select-demo.component.html | 11 +- .../ng-select-demo.component.ts | 11 +- src/assets/32x32-blue.png | Bin 0 -> 1344 bytes 17 files changed, 23 insertions(+), 350 deletions(-) delete mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.html delete mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.scss delete mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.spec.ts delete mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.ts delete mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.html delete mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.scss delete mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.spec.ts delete mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.ts delete mode 100644 projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ps-selectors.module.ts create mode 100644 src/assets/32x32-blue.png diff --git a/projects/poweredsoft/ng-select/src/lib/ps-ng-selectors/multi-select/multi-select.component.ts b/projects/poweredsoft/ng-select/src/lib/ps-ng-selectors/multi-select/multi-select.component.ts index dd82022..33734e9 100644 --- a/projects/poweredsoft/ng-select/src/lib/ps-ng-selectors/multi-select/multi-select.component.ts +++ b/projects/poweredsoft/ng-select/src/lib/ps-ng-selectors/multi-select/multi-select.component.ts @@ -111,9 +111,7 @@ export class MultiSelectComponent implements OnInit { } get selectedModel() { - return this.selectComponent.selectedItems.map(t => t.value); - //return this.selectComponent.hasValue ? this.selectComponent.selectedItems[0].value : null; } refreshDataSource(searchTerm:any = null, page:number = null, pageSize:number = null){ diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts index fd1766f..b08ce0c 100644 --- a/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts @@ -37,9 +37,9 @@ export class FormGroupCommandModalComponent implements OnInit { ngOnInit(): void { this.errorMessage = null; - // this._notifyMessage = this.dataSource.notifyMessage$.subscribe(message => { + this._notifyMessage = this.dataSource.notifyMessage$.subscribe(message => { - // }); + }); this._validationError = this.dataSource.validationError$.subscribe(validatorErrors => { let validationSummary = ''; diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.html b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.html deleted file mode 100644 index 44df12c..0000000 --- a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.html +++ /dev/null @@ -1,21 +0,0 @@ -

Select multiple elements

- - - - -
- Selected value:
- - - -
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.scss b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.spec.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.spec.ts deleted file mode 100644 index dd1f6e1..0000000 --- a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { NgMultiSelectComponent } from './ng-multi-select.component'; - -describe('NgMultiSelectComponent', () => { - let component: NgMultiSelectComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ NgMultiSelectComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(NgMultiSelectComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.ts deleted file mode 100644 index f56cf51..0000000 --- a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.ts +++ /dev/null @@ -1,97 +0,0 @@ -import { Component, OnInit, Input, ChangeDetectorRef, OnDestroy } from '@angular/core'; -import { Observable, Subscription, Subject } from 'rxjs'; -import { IDataSource, ISimpleFilter } from '@poweredsoft/data'; -import { map, distinctUntilChanged, debounceTime } from 'rxjs/operators'; - -@Component({ - selector: 'ps-ng-multi-select', - templateUrl: './ng-multi-select.component.html', - styleUrls: ['./ng-multi-select.component.scss'] -}) -export class NgMultiSelectComponent implements OnInit, OnDestroy { - - @Input() dataSource: IDataSource; - @Input() searchPath: string; - @Input() searchType: string = "Contains"; - @Input() sortingPath: string; - @Input() disableServer:boolean = false; - @Input() bindLabel:string; - - data$ : Observable; - selectedId:any[]; - isLoading:boolean = false; - searchInput$ = new Subject(); - private _dataSubscription: Subscription; - - constructor(private cdr: ChangeDetectorRef) { - } - - ngOnDestroy(): void { - this._dataSubscription.unsubscribe(); - } - - ngOnInit() { - this.dataFetching(); - this.detectLoading(); - if(!this.disableServer){ - this.searchOnServer(); - }else{ - this.refreshDataSource(); - } - - } - - dataFetching(){ - this.data$ = this.dataSource.data$.pipe( - map(t => { - if (t == null) - return []; - return t.data; - }) - ); - this._dataSubscription = this.dataSource.data$.subscribe(); - } - - detectLoading(){ - this.dataSource.loading$.subscribe(loading => { - this.isLoading = loading; - this.cdr.detectChanges(); - }); - } - - searchOnServer(){ - this.searchInput$.pipe( - distinctUntilChanged(), // emit the difference from previous input - debounceTime(500) // this is for delaying searching speed - ).subscribe(searchTerm => this.refreshDataSource(searchTerm, 1, 50)); // page: 1, pageSize: 100 - - this.refreshDataSource(); //send the query to server to sorting & filtering by default - } - - 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 - value: searchTerm - }] - } - this.dataSource.query({ - page: page, - pageSize: pageSize, - filters:searchfilters, - sorts:[ - {path: this.sortingPath, ascending: true} - ] - }) - } - - clearModel() { - this.selectedId = []; -} - -changeModel() { - this.selectedId = [{ name: 'New person' }]; -} -} 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 deleted file mode 100644 index e69de29..0000000 diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.scss b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.spec.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.spec.ts deleted file mode 100644 index 9dc9b61..0000000 --- a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { NgSelectComponent } from './ng-select.component'; - -describe('NgSelectComponent', () => { - let component: NgSelectComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ NgSelectComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(NgSelectComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); 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 deleted file mode 100644 index 4cb4f62..0000000 --- a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.ts +++ /dev/null @@ -1,143 +0,0 @@ -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, ControlValueAccessor { - - @ContentChild(SelectOptionTemplateDirective) selectTemplate: SelectOptionTemplateDirective; - @ViewChild(SelectComponent, { static: true }) selectComponent: SelectComponent; - @Input() dataSource: IDataSource; - @Input() searchPath: string; - @Input() searchType: string; - @Input() sortingPath: string; - @Input() serverFiltering:boolean; - @Input() bindLabel:string; - @Input() bindValue: string; - - @Output('change') changeEvent = new EventEmitter(); - - trackFn: (item: any) => any; - data$ : Observable; - isLoading:boolean = false; - searchInput$ = new Subject(); - - 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); - } - - ngOnDestroy(): void { - this._loadingSubscription.unsubscribe(); - } - - ngOnInit(): void { - this.dataFetching(); - this.detectLoading(); - - console.log(this.serverFiltering); - - if(this.serverFiltering){ - this.searchOnServer(); - }else{ - this.refreshDataSource(); - } - } - - dataFetching(){ - this.data$ = this.dataSource.data$.pipe( - map(t => { - if (t == null) - return []; - return t.data; - }) - ); - } - - detectLoading(){ - this._loadingSubscription = this.dataSource.loading$.subscribe(loading => { - this.isLoading = loading; - this.cdr.detectChanges(); - }); - } - - searchOnServer(){ - this.searchInput$.pipe( - distinctUntilChanged(), // emit the difference from previous input - debounceTime(500) // this is for delaying searching speed - ).subscribe(searchTerm => this.refreshDataSource(searchTerm, 1, 100)); // page: 1, pageSize: 50 - - this.refreshDataSource(); //send the query to server to sorting & filtering by default - } - - 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 || this.bindLabel, - type: this.searchType || 'Contains', // Default: Contains - value: searchTerm - }] - } - this.dataSource.query({ - page: page, - pageSize: pageSize, - filters:searchfilters, - sorts:[ - {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 deleted file mode 100644 index 20f089f..0000000 --- a/projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ps-selectors.module.ts +++ /dev/null @@ -1,20 +0,0 @@ -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, ReactiveFormsModule } from '@angular/forms'; -import { NgSelectModule } from '@ng-select/ng-select'; - - - - -@NgModule({ - declarations: [NgSelectComponent, NgMultiSelectComponent ], - imports: [ - CommonModule, - FormsModule, - NgSelectModule, - ], - exports:[NgSelectComponent,NgMultiSelectComponent] -}) -export class PsSelectorsModule { } diff --git a/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts b/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts index 0ebdcc6..fc3e30d 100644 --- a/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts +++ b/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts @@ -13,7 +13,3 @@ export * from './lib/data-grid/directives/data-grid-loader.directive'; export * from './lib/data-grid/directives/data-grid-cell-filter.directive'; 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'; diff --git a/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html b/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html index d3bfc3e..b7b4d0f 100644 --- a/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html +++ b/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html @@ -46,7 +46,7 @@ -
+ Name Address diff --git a/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.html b/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.html index c63e8a7..469e013 100644 --- a/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.html +++ b/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.html @@ -4,12 +4,15 @@ - + + + Some header
ID
@@ -27,11 +30,10 @@ Actions - + - Footer works! \ No newline at end of file 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 6e5086a..502d3c0 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,8 +1,7 @@

Single Select Demo | ngModel | option template

- - {{item | json}} + {{ item.name }} - {{ item.address }}
@@ -10,7 +9,7 @@ selected: {{ myValue | json }}

Single Select With Form | formGroup | option template

- +
{{ item.name }} - {{ item.address }}
@@ -20,14 +19,14 @@ selected: {{ myValue | json }} selected: {{ myForm.value | json }}

Single Select Demo | label Template

- +
- Name: {{ item.name }} - Address: {{item.address }} + Name: {{ item.name }} - Address: {{item.address }}

Multi-Select Demo

- + selected: {{ myValue | json }} 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 5ad4d3b..b0f6eaa 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 @@ -14,15 +14,24 @@ import { FormBuilder, FormGroup } from '@angular/forms'; }) export class NgSelectDemoComponent implements OnInit { - merchantDataSource: IDataSource; + merchantDataSource: IDataSource; + merchantDataSource2: IDataSource; + merchantDataSource3: IDataSource; + merchantDataSource4: IDataSource; selectedValue: IMerchant; + selectedValue2: IMerchant; + selectedValue3: IMerchant; + selectedValue4: IMerchant; myForm: FormGroup; myValue: string; constructor(private merchantService: MerchantService, private fb: FormBuilder ) { this.merchantDataSource = merchantService.createDataSource(); //Assign the dataSource + this.merchantDataSource2 = merchantService.createDataSource(); + this.merchantDataSource3 = merchantService.createDataSource(); + this.merchantDataSource4 = merchantService.createDataSource(); this.myForm = fb.group({ 'merchantId': [null, null] }) diff --git a/src/assets/32x32-blue.png b/src/assets/32x32-blue.png new file mode 100644 index 0000000000000000000000000000000000000000..076fcfa36fb5a8703f6a360a3f3b17dcf0f33573 GIT binary patch literal 1344 zcmV-G1;6@k7RCwB~S50gbRUH4%?Ce)tx}Zgh zXt$^V6uWCQ5f7plsL{yBftZ?7|Hpfyan7mU2%pOx!ljc| zHd6R~ncvZzt~IIEA^_mExO|UaoK|OK@OuIzQg=@1bza!Nir`{I@cW?Fgi+^(hPHP$ z>-5|`21P^AAWVdlm$Hn;Zd#Nv`I6T(mMi7?^#=7n5TIuR+W#lp1WbTNGB$lUQ>3f6 zS;O`8<$%AxB}8986qMj2i=1A%Y15inlUlBuwCQ@0Uj4_SNj&e3_~`uhFzsF6Sl^Nz zIEe*&TXdSTIQ66%&6rGD&xJ_FDTC{1kooA7pJssD zBh=Wi7z%&5&!Aoq5XvX=jvGhT`sm8TLF&Rg88|c!A`%=Zt%Yp6CkOVm8`O$?dl!pk zVCBm}ojzUXlZt!(vM2@HNh#bJhV@9$#AZM3m}ZnROLOQg`P>Fi4(x#{F-CHXI1D%u z(P;q-zVJtpQU%=LnQ%qSjU)cAqzcrE@EqM>ICH`rkmHPb3qceyoGb_c5qF{v{5=Gq zj9CJ9z-5eqF@~5-++q%K=FAHs%=Sn?B-mBcSv;aSwLh9=&f>~m2@VhmhI`>e1TIKo z${|)K2^;2suv@smm0B^xMp3ES&2n{(lw?)TTOJ*_w8)^`QIgC%iyT1`l3h}LC%8s? z(V~+oXPgkg0o!94CQ;j6L5-roOd}M-X*3#?Ums%38LzTm0QPV4QwRS4lWS%bN#->P zPocev@!q|LT<{&VUE#!M9RccFXSj(-%84kzhftoUW{VEEOVVQwBvJogVRJbM#iR2+ zI)i4^Jzb#0mLLsm4oL8!zb!W@4ZdLak6ONo)^MJgm_?oY;NwwnO645cO>|%BmT!a>cehhTx-Ukj{05Db}RR zijX9*Rw5RbB+?+U>wHe;%E`x_GeBhn;>s27)q$ZoQ+Bn)W1(si7~eeEB%g_J>^ci4 z&;jFXe5x;0+OI<6jetdOA_*l4*c`)-C(5wr$H zNJMZddL4(BO3R%Pl<$eH!l85+NAAPZiUbmFPm53Xez|Rj^(xD`U9nTH#-Y?Dkw(|M z!f9|@h)$y%OXJv-ial4V#g#W+Z`lMS3AE<1vpG75<98>j;N$5ilJ{C;%FU&j?+ z$cNMc=&r+m@xnI!-?{d>^V!+{xf5?s)|&fIfB^s!+wWgt-5>S<0000