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

demo commit

Browse Source
This commit is contained in:
Yubing325 2020-07-07 16:36:18 -05:00
parent f4cec5c48f
commit bc4bd55efc
27 changed files with 181 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -24,7 +24,7 @@
"@angular/platform-browser-dynamic": "~9.1.4",
"@angular/router": "~9.1.4",
"@ng-select/ng-select": "^4.0.1",
"@poweredsoft/data": "0.0.26",
"@poweredsoft/data": "0.0.27",
"@poweredsoft/ngx-data": "0.0.13",
"@poweredsoft/ngx-data-apollo": "0.0.8",
"apollo-angular": "^1.8.0",

9
projects/poweredsoft/ng-select/src/lib/ps-ng-selectors/ng-select/ng-select.component.html
View File

@ -23,5 +23,14 @@
index: index
}"></ng-container>
</ng-template>
</ng-container>
<ng-container *ngIf="hasNotFoundTemplate">
<ng-template ng-notfound-tmp let-searchTerm="searchTerm">
<ng-container [ngTemplateOutlet]="selectNotFoundTemplate"
[ngTemplateOutletContext]="{
$implicit: searchTerm
}"></ng-container>
</ng-template>
</ng-container>
</ng-select>

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

@ -6,6 +6,7 @@ import { map, distinctUntilChanged, debounceTime } from 'rxjs/operators';
import { NgSelectComponent as SelectComponent } from '@ng-select/ng-select';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { SelectOptionTemplateDirective } from '../select-option-template.directive';
import { NotFoundTemplateDirective } from '../not-found-template.directive';
@Component({
@ -22,6 +23,8 @@ export class NgSelectComponent implements OnInit {
@ContentChild(SelectOptionTemplateDirective) optionTemplate: SelectOptionTemplateDirective;
@ContentChild(SelectLabelTemplateDirective) labelTemplate: SelectLabelTemplateDirective;
@ContentChild(NotFoundTemplateDirective) notFoundTemplate: NotFoundTemplateDirective;
@ViewChild(SelectComponent, { static: true }) selectComponent: SelectComponent;
@ -154,4 +157,14 @@ export class NgSelectComponent implements OnInit {
return this.labelTemplate.template;
return null;
}
get hasNotFoundTemplate() {
return this.notFoundTemplate ? true : false;
}
get selectNotFoundTemplate(){
if(this.notFoundTemplate)
return this.notFoundTemplate.template;
return null;
}
}

11
projects/poweredsoft/ng-select/src/lib/ps-ng-selectors/not-found-template.directive.ts Normal file
View File

@ -0,0 +1,11 @@
import { Directive, TemplateRef } from '@angular/core';
@Directive({
selector: '[psNgNotFoundTemplate]'
})
export class NotFoundTemplateDirective {
constructor(public template: TemplateRef<any>) { }
}

8
projects/poweredsoft/ng-select/src/lib/ps-ng-selectors/ps-ng-selectors.module.ts
View File

@ -6,11 +6,12 @@ import { FormsModule } from '@angular/forms';
import { NgSelectModule } from '@ng-select/ng-select';
import { SelectLabelTemplateDirective } from './select-label-template.directive';
import { SelectOptionTemplateDirective } from './select-option-template.directive';
import { NotFoundTemplateDirective } from './not-found-template.directive';
@NgModule({
declarations: [NgSelectComponent, MultiSelectComponent, SelectLabelTemplateDirective, SelectOptionTemplateDirective],
declarations: [NgSelectComponent, MultiSelectComponent, SelectLabelTemplateDirective, SelectOptionTemplateDirective, NotFoundTemplateDirective],
imports: [
CommonModule,
FormsModule,
@ -20,7 +21,8 @@ import { SelectOptionTemplateDirective } from './select-option-template.directiv
NgSelectComponent,
MultiSelectComponent,
SelectLabelTemplateDirective,
SelectOptionTemplateDirective
SelectOptionTemplateDirective,
NotFoundTemplateDirective
]
})
export class PsNgSelectorsModule { }
export class PsNgSelectorsModule { }//NGSELECT

3
projects/poweredsoft/ng-select/src/public-api.ts
View File

@ -6,7 +6,8 @@ export * from './lib/ps-ng-selectors/ps-ng-selectors.module';
export * from './lib/ps-ng-selectors/ng-select/ng-select.component';
export * from './lib/ps-ng-selectors/multi-select/multi-select.component';
export * from './lib/ps-ng-selectors/select-label-template.directive';
export * from './lib/ps-ng-selectors/select-option-template.directive'
export * from './lib/ps-ng-selectors/select-option-template.directive';
export * from './lib/ps-ng-selectors/not-found-template.directive';

0
projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/datetime-filter/datetime-filter.component.html → projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/datetime-filter/datetime-filter.component.html
View File

0
projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/datetime-filter/datetime-filter.component.scss → projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/datetime-filter/datetime-filter.component.scss
View File

0
projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/datetime-filter/datetime-filter.component.ts → projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/datetime-filter/datetime-filter.component.ts
View File

2
projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/grid-filter.module.ts → projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/grid-filter.module.ts
View File

@ -24,4 +24,4 @@ import { TooltipModule } from 'ngx-bootstrap/tooltip';
],
exports: [TextFilterComponent, NumberFilterComponent,DatetimeFilterComponent]
})
export class GridFilterModule { }
export class GridFilterModule { } //DS Filter

64
projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/number-filter/number-filter.component.html Normal file
View File

@ -0,0 +1,64 @@
<ng-template #popTemplate>
<form (ngSubmit)="applyFilter()">
<div class="container" >
<div class="row">
<select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType" [ngModelOptions]="{standalone: true}">
<option *ngFor="let filter of filterTypes" [value]="filter.value">{{filter.key}}</option>
</select>
</div>
<div class="row mt-1 mb-1">
<input type="number" class="form-control" placeholder="column value" aria-label="number"
aria-describedby="basic-addon1" [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">
</div>
<button class="btn btn-primary mr-1">Filter</button>
<button type="button" class="btn btn-warning" *ngIf="!isFiltering" (click)="pop.hide()">Hide</button>
<button type="button" class="btn btn-dark" *ngIf="isFiltering" (click)="clearFilter()">Clear</button>
</div>
</form>
</ng-template>
<button [popover]="popTemplate" class="btn btn-default" [(isOpen)]="filterIsOpenned" [outsideClick]="true" #pop="bs-popover">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 477.875 477.875" style="enable-background:new 0 0 477.875 477.875;" xml:space="preserve" fill-opacity="0.5" [tooltip]="showTooltip()" [tooltipEnable]="!filterIsOpenned" width="13px" height="13px" [ngStyle]="{'fill': isFiltering ? 'red': 'black', 'fill-opacity': isFiltering ? '1': '0.5'}">
<g>
<g>
<path d="M460.804,0H17.071C7.645,0,0.004,7.641,0.004,17.067V102.4c-0.004,4.842,2.05,9.458,5.649,12.698l165.018,148.514V460.8
c-0.004,9.426,7.633,17.07,17.059,17.075c2.651,0.001,5.266-0.615,7.637-1.8l102.4-51.2c5.786-2.891,9.441-8.806,9.438-15.275
V263.612l165.018-148.48c3.608-3.247,5.662-7.878,5.649-12.732V17.067C477.871,7.641,470.23,0,460.804,0z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
</button>

0
projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/number-filter/number-filter.component.scss → projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/number-filter/number-filter.component.scss
View File

3
projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/number-filter/number-filter.component.ts → projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/number-filter/number-filter.component.ts
View File

@ -3,7 +3,7 @@ import { IDataSource,IFilter } from '@poweredsoft/data';
import { ISimpleFilter } from '../../models/IFilter';
@Component({
selector: 'psbx-number-filter',
selector: 'psbx-ds-number-filter',
templateUrl: './number-filter.component.html',
styleUrls: ['./number-filter.component.scss']
})
@ -32,6 +32,7 @@ export class NumberFilterComponent implements OnInit {
}
clearFilter() {
this.filterValue = 0;
this.isFiltering = false;
const existingFilter = this.dataSource.filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;
if (existingFilter) {

34
projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/number-filter/number-filter.component.html → projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/text-filter/text-filter.component.html
View File

@ -1,21 +1,25 @@
<ng-template #popTemplate>
<div class="container" >
<div class="row">
<select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType">
<option *ngFor="let filter of filterTypes" [value]="filter.value">{{filter.key}}</option>
</select>
</div>
<div class="row mt-1 mb-1">
<input type="number" class="form-control" placeholder="column value" aria-label="number"
aria-describedby="basic-addon1" [(ngModel)]="filterValue">
</div>
<form (ngSubmit)="applyFilter(pop)">
<button class="btn btn-primary mr-1" (click)="applyFilter()">Filter</button>
<button type="button" class="btn btn-warning" *ngIf="!isFiltering" (click)="pop.hide()">Hide</button>
<button type="button" class="btn btn-dark" *ngIf="isFiltering" (click)="clearFilter()">Clear</button>
<div class="container" >
<div class="row">
<select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType" [ngModelOptions]="{standalone: true}">
<option *ngFor="let filter of filterTypes" [value]="filter.value">{{filter.key}}</option>
</select>
</div>
</div>
<div class="row mt-1 mb-1">
<input type="text" class="form-control" placeholder="column value" aria-label="Username"
aria-describedby="basic-addon1" [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}" >
</div>
<button class="btn btn-primary mr-1" type="submit">Filter</button>
<button type="button" class="btn btn-warning" *ngIf="!isFiltering" (click)="pop.hide()">Hide</button>
<button type="button" class="btn btn-dark" *ngIf="isFiltering" (click)="clearFilter()">Clear</button>
</div>
</form>
</ng-template>
<button [popover]="popTemplate" class="btn btn-default" [(isOpen)]="filterIsOpenned" [outsideClick]="true" #pop="bs-popover">

0
projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/text-filter/text-filter.component.scss → projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/text-filter/text-filter.component.scss
View File

7
projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/text-filter/text-filter.component.ts → projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/text-filter/text-filter.component.ts
View File

@ -1,6 +1,7 @@
import { Component, OnInit, Input } from '@angular/core';
import { IDataSource} from '@poweredsoft/data';
import { ISimpleFilter } from '../../models/IFilter';
import { PopoverDirective } from 'ngx-bootstrap/popover';
@Component({
@ -32,6 +33,7 @@ export class TextFilterComponent implements OnInit {
}
clearFilter() {
this.filterValue = '';
this.isFiltering = false;
const existingFilter = this.dataSource.filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;
if (existingFilter) {
@ -42,7 +44,7 @@ export class TextFilterComponent implements OnInit {
}
}
applyFilter(){
applyFilter(pop: PopoverDirective = null){
this.isFiltering = true;
const filters = this.dataSource.filters;
const existingFilter = filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;
@ -62,6 +64,9 @@ export class TextFilterComponent implements OnInit {
filters: filters,
page: 1
})
if (pop)
pop.hide();
}
showTooltip(){

6
projects/poweredsoft/ngx-bootstrap/src/lib/grid-sorting/grid-sorting.module.ts → projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-sorting/ds-sorting.module.ts
View File

@ -1,14 +1,14 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GridSortingComponent } from './grid-sorting/grid-sorting.component';
import { DataSourceSortingComponent } from './ds-sorting/ds-sorting.component';
@NgModule({
declarations: [GridSortingComponent],
declarations: [DataSourceSortingComponent],
imports: [
CommonModule
],
exports:[GridSortingComponent]
exports:[DataSourceSortingComponent]
})
export class GridSortingModule { }

0
projects/poweredsoft/ngx-bootstrap/src/lib/grid-sorting/grid-sorting/grid-sorting.component.html → projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-sorting/ds-sorting/ds-sorting.component.html
View File

0
projects/poweredsoft/ngx-bootstrap/src/lib/grid-sorting/grid-sorting/grid-sorting.component.scss → projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-sorting/ds-sorting/ds-sorting.component.scss
View File

10
projects/poweredsoft/ngx-bootstrap/src/lib/grid-sorting/grid-sorting/grid-sorting.component.ts → projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-sorting/ds-sorting/ds-sorting.component.ts
View File

@ -2,11 +2,11 @@ import { Component, OnInit, Input } from '@angular/core';
import { IDataSource } from '@poweredsoft/data';
@Component({
selector: 'psbx-grid-sorting',
templateUrl: './grid-sorting.component.html',
styleUrls: ['./grid-sorting.component.scss']
selector: 'psbx-ds-sorting',
templateUrl: './ds-sorting.component.html',
styleUrls: ['./ds-sorting.component.scss']
})
export class GridSortingComponent implements OnInit {
export class DataSourceSortingComponent implements OnInit {
@Input() dataSource : IDataSource<any>;
@Input() path:string;
@ -16,7 +16,7 @@ export class GridSortingComponent implements OnInit {
ngOnInit(): void {
}
sorting(){
this.isSorting = true;
this.isAscending = !this.isAscending;

62
projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/text-filter/text-filter.component.html
View File

@ -1,62 +0,0 @@
<ng-template #popTemplate>
<div class="container" >
<div class="row">
<select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType">
<option *ngFor="let filter of filterTypes" [value]="filter.value">{{filter.key}}</option>
</select>
</div>
<div class="row mt-1 mb-1">
<input type="text" class="form-control" placeholder="column value" aria-label="Username"
aria-describedby="basic-addon1" [(ngModel)]="filterValue">
</div>
<button class="btn btn-primary mr-1" (click)="applyFilter()">Filter</button>
<button type="button" class="btn btn-warning" *ngIf="!isFiltering" (click)="pop.hide()">Hide</button>
<button type="button" class="btn btn-dark" *ngIf="isFiltering" (click)="clearFilter()">Clear</button>
</div>
</ng-template>
<button [popover]="popTemplate" class="btn btn-default" [(isOpen)]="filterIsOpenned" [outsideClick]="true" #pop="bs-popover">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 477.875 477.875" style="enable-background:new 0 0 477.875 477.875;" xml:space="preserve" fill-opacity="0.5" [tooltip]="showTooltip()" [tooltipEnable]="!filterIsOpenned" width="13px" height="13px" [ngStyle]="{'fill': isFiltering ? 'red': 'black', 'fill-opacity': isFiltering ? '1': '0.5'}">
<g>
<g>
<path d="M460.804,0H17.071C7.645,0,0.004,7.641,0.004,17.067V102.4c-0.004,4.842,2.05,9.458,5.649,12.698l165.018,148.514V460.8
c-0.004,9.426,7.633,17.07,17.059,17.075c2.651,0.001,5.266-0.615,7.637-1.8l102.4-51.2c5.786-2.891,9.441-8.806,9.438-15.275
V263.612l165.018-148.48c3.608-3.247,5.662-7.878,5.649-12.732V17.067C477.871,7.641,470.23,0,460.804,0z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
</button>

12
projects/poweredsoft/ngx-bootstrap/src/public-api.ts
View File

@ -13,9 +13,9 @@ export * from './lib/confirm-modal/confirm-modal.service';
export * from './lib/confirm-modal/confirm-modal.directive';
export * from './lib/spinner/spinner.module';
export * from './lib/spinner/spinner/spinner.component';
export * from './lib/grid-filter/grid-filter.module';
export * from './lib/grid-filter/text-filter/text-filter.component';
export * from './lib/grid-filter/number-filter/number-filter.component';
export * from './lib/grid-filter/datetime-filter/datetime-filter.component';
export * from './lib/grid-sorting/grid-sorting.module';
export * from './lib/grid-sorting/grid-sorting/grid-sorting.component';
export * from './lib/dataSource-filter/grid-filter.module';
export * from './lib/dataSource-filter/text-filter/text-filter.component';
export * from './lib/dataSource-filter/number-filter/number-filter.component';
export * from './lib/dataSource-filter/datetime-filter/datetime-filter.component';
export * from './lib/dataSource-sorting/ds-sorting.module';
export * from './lib/dataSource-sorting/ds-sorting/ds-sorting.component';

4
projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html
View File

@ -2,8 +2,8 @@
<table [ngClass]="tableClasses" style="min-height: 300px;">
<thead>
<tr>
<th *ngFor="let header of gridHeaders" [attr.colspan]="columns.length">
<tr *ngFor="let header of gridHeaders" >
<th [attr.colspan]="columns.length">
<ng-container [ngTemplateOutlet]="header.template"></ng-container>
</th>
</tr>

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

@ -4,8 +4,10 @@
<ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns"
tableClasses="table table-sm table-dark table-striped table-bordered">
<ng-container *psDataGridHeader>
<button class="btn-primary btn" psbxCommandModal commandTitle="Adding a new merchant" commandText="Add"
[dataSource]="merchantDataSource" command="addMerchant" [template]="theModal">Create a new record</button>
<button class="btn-primary btn" psbxCommandModal
commandTitle="Adding a new merchant" commandText="Add"
[dataSource]="merchantDataSource" command="addMerchant"
[template]="theModal">Create a new record</button>
</ng-container>
<ng-container psDataGridCol="id">
@ -51,6 +53,8 @@
<input type="text" required [disabled]="loading" name="name" [(ngModel)]="command.name" placeholder="Enter a merchant name" class="form-control" >
Address
<input type="text" required [disabled]="loading" name="address" [(ngModel)]="command.address" placeholder="Enter the merchant's address" class="form-control" >
Date
<input type="text" required [disabled]="loading" name="address" [(ngModel)]="command.address" placeholder="Enter the merchant's address" class="form-control" >
</form>
</ng-template>

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

@ -2,15 +2,9 @@
This is a demo for a grid.
</h1>
<ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns" tableClasses="table table-sm table-bordered" >
<!-- <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> -->
<ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns"
tableClasses="table table-sm table-bordered" >
<ng-container *psDataGridHeader>
Some header
</ng-container>

29
src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.html
View File

@ -13,27 +13,14 @@
<ng-container psDataGridCol="id">
<ng-container *psDataGridColHeader>ID</ng-container>
<psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="id"></psbx-ds-text-filter>
<psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="id"></psbx-grid-sorting>
<ng-container *psDataGridCell="let model">{{model.id}}</ng-container>
<!--<psbx-number-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="id"></psbx-number-filter>-->
<!--<psbx-grid-sorting *psDataGridColSort path="id" [dataSource]="merchantDataSource"></psbx-grid-sorting>-->
<!-- <psfa-ds-sort-icon *psDataGridColSort [sortPath]="id" [dataSource]="merchantDataSource">
</psfa-ds-sort-icon> -->
<!-- <psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource"></psbx-ds-text-filter>
<psdb-ds-date-filter *psDataGridCellFilter></psdb-ds-date-filter>
<psdb-ds-date-range-filter *psDataGridCellFilter></psdb-ds-date-range-filter>
<psbx-ds-number-filter *psDataGridCellFilter></psbx-ds-number-filter>
<psbx-ds-multi-select-filter [dataSource]="merchantDataSource" [selectDataSource]="selectDataSource" [valueField]="id">
<ng-container *psSelectOption="let option">{{ option.name }}</ng-container>
</psbx-ds-multi-select-filter> -->
<psbx-ds-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="id"></psbx-ds-sorting>
<ng-container *psDataGridCell="let model">{{model.id}}</ng-container>
</ng-container>
<ng-container psDataGridCol="name">
<ng-container *psDataGridColHeader>Name</ng-container>
<psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="name"></psbx-ds-text-filter>
<psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="name"></psbx-grid-sorting>
<psbx-ds-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="name"></psbx-ds-sorting>
<ng-container *psDataGridCell="let model">{{model.name}}</ng-container>
</ng-container>
@ -42,15 +29,15 @@
<ng-container *psDataGridCell="let model">{{model.address}}</ng-container>
<psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="address">
</psbx-ds-text-filter>
<psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="address"></psbx-grid-sorting>
<psbx-ds-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="address"></psbx-ds-sorting>
</ng-container>
<ng-container psDataGridCol="ordering">
<ng-container *psDataGridColHeader>Priority</ng-container>
<ng-container *psDataGridCell="let model">{{model.ordering}}</ng-container>
<psbx-number-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="ordering">
</psbx-number-filter>
<psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="ordering"></psbx-grid-sorting>
<psbx-ds-number-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="ordering">
</psbx-ds-number-filter>
<psbx-ds-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="ordering"></psbx-ds-sorting>
</ng-container>
<ng-container psDataGridCol="openDate">
@ -58,7 +45,7 @@
<ng-container *psDataGridCell="let model">{{model.openDate}}</ng-container>
<psbx-datetime-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="openDate">
</psbx-datetime-filter>
<psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="openDate"></psbx-grid-sorting>
<psbx-ds-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="openDate"></psbx-ds-sorting>
</ng-container>
<ng-container psDataGridCol="commands">

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

@ -11,21 +11,34 @@ selected: {{ myValue | json }}
<form #form [formGroup]="myForm">
<ps-ng-select [dataSource]="merchantDataSource2" bindLabel="name" bindValue="id" formControlName="merchantId" [serverFiltering]="true">
<div *psNgSelectOption="let item">
{{ item.name }} - {{ item.address }}
<span>Merchant:</span> {{ item.name }} - <span>Address: </span>{{ item.address }}
</div>
</ps-ng-select>
</form>
selected: {{ myForm.value | json }}
<h2>Single Select Demo | label Template</h2>
<ps-ng-select [dataSource]="merchantDataSource3" bindLabel="name" bindValue="id" [(ngModel)]="myValue3" [serverFiltering]="true">
<div *psNgSelectOption="let item">
<span>Merchant:</span> {{ item.name }} - <span>Address: </span>{{ item.address }}
</div>
<div *psNgSelectLabel="let item">
<img src="assets/32x32-blue.png"><span>Name: </span>{{ item.name }} - <span> Address: </span>{{item.address }}
</div>
</ps-ng-select>
selected: {{ myValue3 | json }}
<h2>Single Select Demo | notFound Template</h2>
<ps-ng-select [dataSource]="merchantDataSource3" bindLabel="name" bindValue="id" [(ngModel)]="myValue2" [serverFiltering]="true">
<div *psNgNotFoundTemplate="let searchTerm">
<div class="ng-option disabled">
No data found for "{{searchTerm}}" <button class="btn btn-success">Create New {{searchTerm}}</button>
</div>
</div>
</ps-ng-select>
selected: {{ myValue2 | json }}
<h2>Multi-Select Demo</h2>
<ps-ng-multi-select [dataSource]="merchantDataSource4" bindLabel="name" bindValue="id" [serverFiltering]="true" [(ngModel)]="myValue4" >
<div *psNgSelectOption="let item">