Open-Harbor/ngx-data-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

demo checking

Browse Source
This commit is contained in:
Yubing325 2020-07-06 15:41:58 -05:00
parent 0f031101c9
commit 3806e44945
17 changed files with 23 additions and 350 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
projects/poweredsoft/ng-select/src/lib/ps-ng-selectors/multi-select/multi-select.component.ts
View File

@ -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){

4
projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts
View File

@ -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 = '';

21
projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.html
View File

@ -1,21 +0,0 @@
<p>Select multiple elements</p>
<ng-select
[items]="data$ | async"
[multiple]="true"
[closeOnSelect]="false"
[searchable]="true"
[bindLabel]="bindLabel"
[typeahead] = "searchInput$"
placeholder="Select people"
[(ngModel)]="selectedId">
</ng-select>
<div class="mt-3">
Selected value: <br/>
<ul>
<li *ngFor="let item of selectedId">{{item.name}}</li>
</ul>
<button (click)="clearModel()" class="btn btn-secondary btn-sm">Clear model</button>
<button (click)="changeModel()" class="btn btn-secondary btn-sm">Change model</button>
</div>

0
projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.scss
View File

25
projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.spec.ts
View File

@ -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<NgMultiSelectComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ NgMultiSelectComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(NgMultiSelectComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

97
projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-multi-select/ng-multi-select.component.ts
View File

@ -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<any>;
@Input() searchPath: string;
@Input() searchType: string = "Contains";
@Input() sortingPath: string;
@Input() disableServer:boolean = false;
@Input() bindLabel:string;
data$ : Observable<any[]>;
selectedId:any[];
isLoading:boolean = false;
searchInput$ = new Subject<string>();
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 = [<ISimpleFilter>{
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' }];
}
}

0
projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.html
View File

0
projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.scss
View File

25
projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.spec.ts
View File

@ -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<NgSelectComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ NgSelectComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(NgSelectComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

143
projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ng-select/ng-select.component.ts
View File

@ -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<any>;
@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<any[]>;
isLoading:boolean = false;
searchInput$ = new Subject<string>();
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 = [<ISimpleFilter>{
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;
}
}

20
projects/poweredsoft/ngx-cdk-ui/src/lib/ps-selectors/ps-selectors.module.ts
View File

@ -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 { }

4
projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
View File

@ -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';

2
src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html
View File

@ -46,7 +46,7 @@
</ng-template>
<ng-template #theModal let-command let-loading="loading">
<form ngNativeValidate >
<form >
Name
<input type="text" required [disabled]="loading" name="name" [(ngModel)]="command.name" placeholder="Enter a merchant name" class="form-control" >
Address

8
src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.html
View File

@ -4,12 +4,15 @@
<ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns" tableClasses="table table-sm table-bordered" >
<ng-container *psDataGridHeader>
<!-- <ng-container *psDataGridHeader>
<h1>Hey! </h1>
<p>Welcome to my Grid!</p>
<label>New merchant name</label>
<input class="form-control" #newMerchantName/>
<button class="btn btn-primary btn-sm" (click)="newMerchant(newMerchantName.value)">Add</button>
</ng-container> -->
<ng-container *psDataGridHeader>
Some header
</ng-container>
<ng-container psDataGridCol="id">
<div *psDataGridColHeader>ID</div>
@ -27,11 +30,10 @@
<ng-container psDataGridCol="commands">
<ng-container *psDataGridColHeader>Actions</ng-container>
<ng-container *psDataGridCell="let model">
<button class="btn btn-primary mr-2">{{model.name}}</button>
<button class="btn btn-primary mr-2">Some Actions</button>
</ng-container>
</ng-container>
<ng-container *psDataGridFooter>
<strong>Footer works!</strong>
</ng-container>
</ps-data-grid>

11
src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.html
View File

@ -1,8 +1,7 @@
<h2>Single Select Demo | ngModel | option template</h2>
<ps-ng-select [dataSource]="merchantDataSource" bindLabel="name" bindValue="id" [(ngModel)]="myValue">
<div *psNgSelectOption="let item">
<!-- {{ item.name }} - {{ item.address }} -->
{{item | json}}
{{ item.name }} - {{ item.address }}
</div>
</ps-ng-select>
@ -10,7 +9,7 @@ selected: {{ myValue | json }}
<h2>Single Select With Form | formGroup | option template</h2>
<form #form [formGroup]="myForm">
<ps-ng-select [dataSource]="merchantDataSource" bindLabel="name" bindValue="id" formControlName="merchantId" [serverFiltering]="true">
<ps-ng-select [dataSource]="merchantDataSource2" bindLabel="name" bindValue="id" formControlName="merchantId" [serverFiltering]="true">
<div *psNgSelectOption="let item">
{{ item.name }} - {{ item.address }}
</div>
@ -20,14 +19,14 @@ selected: {{ myValue | json }}
selected: {{ myForm.value | json }}
<h2>Single Select Demo | label Template</h2>
<ps-ng-select [dataSource]="merchantDataSource" bindLabel="name" bindValue="id" [(ngModel)]="myValue" [serverFiltering]="true">
<ps-ng-select [dataSource]="merchantDataSource3" bindLabel="name" bindValue="id" [(ngModel)]="myValue3" [serverFiltering]="true">
<div *psNgSelectLabel="let item">
<span>Name: </span>{{ item.name }} - <img src="/src/assets/avatar.png"><span> Address: </span>{{item.address }}
<img src="assets/32x32-blue.png"><span>Name: </span>{{ item.name }} - <span> Address: </span>{{item.address }}
</div>
</ps-ng-select>
<h2>Multi-Select Demo</h2>
<ps-ng-multi-select [dataSource]="merchantDataSource" bindLabel="name" bindValue="id" [serverFiltering]="true" [(ngModel)]="myValue" >
<ps-ng-multi-select [dataSource]="merchantDataSource4" bindLabel="name" bindValue="id" [serverFiltering]="true" [(ngModel)]="myValue4" >
</ps-ng-multi-select>
selected: {{ myValue | json }}

9
src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.ts
View File

@ -15,14 +15,23 @@ import { FormBuilder, FormGroup } from '@angular/forms';
export class NgSelectDemoComponent implements OnInit {
merchantDataSource: IDataSource<IMerchant>;
merchantDataSource2: IDataSource<IMerchant>;
merchantDataSource3: IDataSource<IMerchant>;
merchantDataSource4: IDataSource<IMerchant>;
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]
})

BIN
src/assets/32x32-blue.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB