demo commit
This commit is contained in:
parent
f4cec5c48f
commit
bc4bd55efc
@ -24,7 +24,7 @@
|
|||||||
"@angular/platform-browser-dynamic": "~9.1.4",
|
"@angular/platform-browser-dynamic": "~9.1.4",
|
||||||
"@angular/router": "~9.1.4",
|
"@angular/router": "~9.1.4",
|
||||||
"@ng-select/ng-select": "^4.0.1",
|
"@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": "0.0.13",
|
||||||
"@poweredsoft/ngx-data-apollo": "0.0.8",
|
"@poweredsoft/ngx-data-apollo": "0.0.8",
|
||||||
"apollo-angular": "^1.8.0",
|
"apollo-angular": "^1.8.0",
|
||||||
|
@ -23,5 +23,14 @@
|
|||||||
index: index
|
index: index
|
||||||
}"></ng-container>
|
}"></ng-container>
|
||||||
</ng-template>
|
</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-container>
|
||||||
</ng-select>
|
</ng-select>
|
||||||
|
@ -6,6 +6,7 @@ import { map, distinctUntilChanged, debounceTime } from 'rxjs/operators';
|
|||||||
import { NgSelectComponent as SelectComponent } from '@ng-select/ng-select';
|
import { NgSelectComponent as SelectComponent } from '@ng-select/ng-select';
|
||||||
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
||||||
import { SelectOptionTemplateDirective } from '../select-option-template.directive';
|
import { SelectOptionTemplateDirective } from '../select-option-template.directive';
|
||||||
|
import { NotFoundTemplateDirective } from '../not-found-template.directive';
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@ -22,6 +23,8 @@ export class NgSelectComponent implements OnInit {
|
|||||||
|
|
||||||
@ContentChild(SelectOptionTemplateDirective) optionTemplate: SelectOptionTemplateDirective;
|
@ContentChild(SelectOptionTemplateDirective) optionTemplate: SelectOptionTemplateDirective;
|
||||||
@ContentChild(SelectLabelTemplateDirective) labelTemplate: SelectLabelTemplateDirective;
|
@ContentChild(SelectLabelTemplateDirective) labelTemplate: SelectLabelTemplateDirective;
|
||||||
|
@ContentChild(NotFoundTemplateDirective) notFoundTemplate: NotFoundTemplateDirective;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ViewChild(SelectComponent, { static: true }) selectComponent: SelectComponent;
|
@ViewChild(SelectComponent, { static: true }) selectComponent: SelectComponent;
|
||||||
@ -154,4 +157,14 @@ export class NgSelectComponent implements OnInit {
|
|||||||
return this.labelTemplate.template;
|
return this.labelTemplate.template;
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get hasNotFoundTemplate() {
|
||||||
|
return this.notFoundTemplate ? true : false;
|
||||||
|
}
|
||||||
|
|
||||||
|
get selectNotFoundTemplate(){
|
||||||
|
if(this.notFoundTemplate)
|
||||||
|
return this.notFoundTemplate.template;
|
||||||
|
return null;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -0,0 +1,11 @@
|
|||||||
|
import { Directive, TemplateRef } from '@angular/core';
|
||||||
|
|
||||||
|
|
||||||
|
@Directive({
|
||||||
|
selector: '[psNgNotFoundTemplate]'
|
||||||
|
})
|
||||||
|
export class NotFoundTemplateDirective {
|
||||||
|
|
||||||
|
constructor(public template: TemplateRef<any>) { }
|
||||||
|
|
||||||
|
}
|
@ -6,11 +6,12 @@ import { FormsModule } from '@angular/forms';
|
|||||||
import { NgSelectModule } from '@ng-select/ng-select';
|
import { NgSelectModule } from '@ng-select/ng-select';
|
||||||
import { SelectLabelTemplateDirective } from './select-label-template.directive';
|
import { SelectLabelTemplateDirective } from './select-label-template.directive';
|
||||||
import { SelectOptionTemplateDirective } from './select-option-template.directive';
|
import { SelectOptionTemplateDirective } from './select-option-template.directive';
|
||||||
|
import { NotFoundTemplateDirective } from './not-found-template.directive';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [NgSelectComponent, MultiSelectComponent, SelectLabelTemplateDirective, SelectOptionTemplateDirective],
|
declarations: [NgSelectComponent, MultiSelectComponent, SelectLabelTemplateDirective, SelectOptionTemplateDirective, NotFoundTemplateDirective],
|
||||||
imports: [
|
imports: [
|
||||||
CommonModule,
|
CommonModule,
|
||||||
FormsModule,
|
FormsModule,
|
||||||
@ -20,7 +21,8 @@ import { SelectOptionTemplateDirective } from './select-option-template.directiv
|
|||||||
NgSelectComponent,
|
NgSelectComponent,
|
||||||
MultiSelectComponent,
|
MultiSelectComponent,
|
||||||
SelectLabelTemplateDirective,
|
SelectLabelTemplateDirective,
|
||||||
SelectOptionTemplateDirective
|
SelectOptionTemplateDirective,
|
||||||
|
NotFoundTemplateDirective
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class PsNgSelectorsModule { }
|
export class PsNgSelectorsModule { }//NGSELECT
|
||||||
|
@ -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/ng-select/ng-select.component';
|
||||||
export * from './lib/ps-ng-selectors/multi-select/multi-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-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';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -24,4 +24,4 @@ import { TooltipModule } from 'ngx-bootstrap/tooltip';
|
|||||||
],
|
],
|
||||||
exports: [TextFilterComponent, NumberFilterComponent,DatetimeFilterComponent]
|
exports: [TextFilterComponent, NumberFilterComponent,DatetimeFilterComponent]
|
||||||
})
|
})
|
||||||
export class GridFilterModule { }
|
export class GridFilterModule { } //DS Filter
|
@ -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>
|
@ -3,7 +3,7 @@ import { IDataSource,IFilter } from '@poweredsoft/data';
|
|||||||
import { ISimpleFilter } from '../../models/IFilter';
|
import { ISimpleFilter } from '../../models/IFilter';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'psbx-number-filter',
|
selector: 'psbx-ds-number-filter',
|
||||||
templateUrl: './number-filter.component.html',
|
templateUrl: './number-filter.component.html',
|
||||||
styleUrls: ['./number-filter.component.scss']
|
styleUrls: ['./number-filter.component.scss']
|
||||||
})
|
})
|
||||||
@ -32,6 +32,7 @@ export class NumberFilterComponent implements OnInit {
|
|||||||
}
|
}
|
||||||
|
|
||||||
clearFilter() {
|
clearFilter() {
|
||||||
|
this.filterValue = 0;
|
||||||
this.isFiltering = false;
|
this.isFiltering = false;
|
||||||
const existingFilter = this.dataSource.filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;
|
const existingFilter = this.dataSource.filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;
|
||||||
if (existingFilter) {
|
if (existingFilter) {
|
@ -1,21 +1,25 @@
|
|||||||
<ng-template #popTemplate>
|
<ng-template #popTemplate>
|
||||||
<div class="container" >
|
|
||||||
<div class="row">
|
<form (ngSubmit)="applyFilter(pop)">
|
||||||
<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>
|
|
||||||
|
|
||||||
<button class="btn btn-primary mr-1" (click)="applyFilter()">Filter</button>
|
<div class="container" >
|
||||||
<button type="button" class="btn btn-warning" *ngIf="!isFiltering" (click)="pop.hide()">Hide</button>
|
<div class="row">
|
||||||
<button type="button" class="btn btn-dark" *ngIf="isFiltering" (click)="clearFilter()">Clear</button>
|
<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>
|
</ng-template>
|
||||||
|
|
||||||
<button [popover]="popTemplate" class="btn btn-default" [(isOpen)]="filterIsOpenned" [outsideClick]="true" #pop="bs-popover">
|
<button [popover]="popTemplate" class="btn btn-default" [(isOpen)]="filterIsOpenned" [outsideClick]="true" #pop="bs-popover">
|
@ -1,6 +1,7 @@
|
|||||||
import { Component, OnInit, Input } from '@angular/core';
|
import { Component, OnInit, Input } from '@angular/core';
|
||||||
import { IDataSource} from '@poweredsoft/data';
|
import { IDataSource} from '@poweredsoft/data';
|
||||||
import { ISimpleFilter } from '../../models/IFilter';
|
import { ISimpleFilter } from '../../models/IFilter';
|
||||||
|
import { PopoverDirective } from 'ngx-bootstrap/popover';
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@ -32,6 +33,7 @@ export class TextFilterComponent implements OnInit {
|
|||||||
}
|
}
|
||||||
|
|
||||||
clearFilter() {
|
clearFilter() {
|
||||||
|
this.filterValue = '';
|
||||||
this.isFiltering = false;
|
this.isFiltering = false;
|
||||||
const existingFilter = this.dataSource.filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;
|
const existingFilter = this.dataSource.filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;
|
||||||
if (existingFilter) {
|
if (existingFilter) {
|
||||||
@ -42,7 +44,7 @@ export class TextFilterComponent implements OnInit {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
applyFilter(){
|
applyFilter(pop: PopoverDirective = null){
|
||||||
this.isFiltering = true;
|
this.isFiltering = true;
|
||||||
const filters = this.dataSource.filters;
|
const filters = this.dataSource.filters;
|
||||||
const existingFilter = filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;
|
const existingFilter = filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;
|
||||||
@ -62,6 +64,9 @@ export class TextFilterComponent implements OnInit {
|
|||||||
filters: filters,
|
filters: filters,
|
||||||
page: 1
|
page: 1
|
||||||
})
|
})
|
||||||
|
|
||||||
|
if (pop)
|
||||||
|
pop.hide();
|
||||||
}
|
}
|
||||||
|
|
||||||
showTooltip(){
|
showTooltip(){
|
@ -1,14 +1,14 @@
|
|||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { GridSortingComponent } from './grid-sorting/grid-sorting.component';
|
import { DataSourceSortingComponent } from './ds-sorting/ds-sorting.component';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [GridSortingComponent],
|
declarations: [DataSourceSortingComponent],
|
||||||
imports: [
|
imports: [
|
||||||
CommonModule
|
CommonModule
|
||||||
],
|
],
|
||||||
exports:[GridSortingComponent]
|
exports:[DataSourceSortingComponent]
|
||||||
})
|
})
|
||||||
export class GridSortingModule { }
|
export class GridSortingModule { }
|
@ -2,11 +2,11 @@ import { Component, OnInit, Input } from '@angular/core';
|
|||||||
import { IDataSource } from '@poweredsoft/data';
|
import { IDataSource } from '@poweredsoft/data';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'psbx-grid-sorting',
|
selector: 'psbx-ds-sorting',
|
||||||
templateUrl: './grid-sorting.component.html',
|
templateUrl: './ds-sorting.component.html',
|
||||||
styleUrls: ['./grid-sorting.component.scss']
|
styleUrls: ['./ds-sorting.component.scss']
|
||||||
})
|
})
|
||||||
export class GridSortingComponent implements OnInit {
|
export class DataSourceSortingComponent implements OnInit {
|
||||||
|
|
||||||
@Input() dataSource : IDataSource<any>;
|
@Input() dataSource : IDataSource<any>;
|
||||||
@Input() path:string;
|
@Input() path:string;
|
||||||
@ -16,7 +16,7 @@ export class GridSortingComponent implements OnInit {
|
|||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
}
|
}
|
||||||
|
|
||||||
sorting(){
|
sorting(){
|
||||||
this.isSorting = true;
|
this.isSorting = true;
|
||||||
this.isAscending = !this.isAscending;
|
this.isAscending = !this.isAscending;
|
@ -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>
|
|
@ -13,9 +13,9 @@ export * from './lib/confirm-modal/confirm-modal.service';
|
|||||||
export * from './lib/confirm-modal/confirm-modal.directive';
|
export * from './lib/confirm-modal/confirm-modal.directive';
|
||||||
export * from './lib/spinner/spinner.module';
|
export * from './lib/spinner/spinner.module';
|
||||||
export * from './lib/spinner/spinner/spinner.component';
|
export * from './lib/spinner/spinner/spinner.component';
|
||||||
export * from './lib/grid-filter/grid-filter.module';
|
export * from './lib/dataSource-filter/grid-filter.module';
|
||||||
export * from './lib/grid-filter/text-filter/text-filter.component';
|
export * from './lib/dataSource-filter/text-filter/text-filter.component';
|
||||||
export * from './lib/grid-filter/number-filter/number-filter.component';
|
export * from './lib/dataSource-filter/number-filter/number-filter.component';
|
||||||
export * from './lib/grid-filter/datetime-filter/datetime-filter.component';
|
export * from './lib/dataSource-filter/datetime-filter/datetime-filter.component';
|
||||||
export * from './lib/grid-sorting/grid-sorting.module';
|
export * from './lib/dataSource-sorting/ds-sorting.module';
|
||||||
export * from './lib/grid-sorting/grid-sorting/grid-sorting.component';
|
export * from './lib/dataSource-sorting/ds-sorting/ds-sorting.component';
|
@ -2,8 +2,8 @@
|
|||||||
|
|
||||||
<table [ngClass]="tableClasses" style="min-height: 300px;">
|
<table [ngClass]="tableClasses" style="min-height: 300px;">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr *ngFor="let header of gridHeaders" >
|
||||||
<th *ngFor="let header of gridHeaders" [attr.colspan]="columns.length">
|
<th [attr.colspan]="columns.length">
|
||||||
<ng-container [ngTemplateOutlet]="header.template"></ng-container>
|
<ng-container [ngTemplateOutlet]="header.template"></ng-container>
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -4,8 +4,10 @@
|
|||||||
<ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns"
|
<ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns"
|
||||||
tableClasses="table table-sm table-dark table-striped table-bordered">
|
tableClasses="table table-sm table-dark table-striped table-bordered">
|
||||||
<ng-container *psDataGridHeader>
|
<ng-container *psDataGridHeader>
|
||||||
<button class="btn-primary btn" psbxCommandModal commandTitle="Adding a new merchant" commandText="Add"
|
<button class="btn-primary btn" psbxCommandModal
|
||||||
[dataSource]="merchantDataSource" command="addMerchant" [template]="theModal">Create a new record</button>
|
commandTitle="Adding a new merchant" commandText="Add"
|
||||||
|
[dataSource]="merchantDataSource" command="addMerchant"
|
||||||
|
[template]="theModal">Create a new record</button>
|
||||||
|
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<ng-container psDataGridCol="id">
|
<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" >
|
<input type="text" required [disabled]="loading" name="name" [(ngModel)]="command.name" placeholder="Enter a merchant name" class="form-control" >
|
||||||
Address
|
Address
|
||||||
<input type="text" required [disabled]="loading" name="address" [(ngModel)]="command.address" placeholder="Enter the merchant's address" class="form-control" >
|
<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>
|
</form>
|
||||||
|
|
||||||
</ng-template>
|
</ng-template>
|
@ -2,15 +2,9 @@
|
|||||||
This is a demo for a grid.
|
This is a demo for a grid.
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns" tableClasses="table table-sm table-bordered" >
|
<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> -->
|
|
||||||
<ng-container *psDataGridHeader>
|
<ng-container *psDataGridHeader>
|
||||||
Some header
|
Some header
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
@ -13,27 +13,14 @@
|
|||||||
<ng-container psDataGridCol="id">
|
<ng-container psDataGridCol="id">
|
||||||
<ng-container *psDataGridColHeader>ID</ng-container>
|
<ng-container *psDataGridColHeader>ID</ng-container>
|
||||||
<psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="id"></psbx-ds-text-filter>
|
<psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="id"></psbx-ds-text-filter>
|
||||||
<psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="id"></psbx-grid-sorting>
|
<psbx-ds-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="id"></psbx-ds-sorting>
|
||||||
<ng-container *psDataGridCell="let model">{{model.id}}</ng-container>
|
<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> -->
|
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
<ng-container psDataGridCol="name">
|
<ng-container psDataGridCol="name">
|
||||||
<ng-container *psDataGridColHeader>Name</ng-container>
|
<ng-container *psDataGridColHeader>Name</ng-container>
|
||||||
<psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="name"></psbx-ds-text-filter>
|
<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 *psDataGridCell="let model">{{model.name}}</ng-container>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
@ -42,15 +29,15 @@
|
|||||||
<ng-container *psDataGridCell="let model">{{model.address}}</ng-container>
|
<ng-container *psDataGridCell="let model">{{model.address}}</ng-container>
|
||||||
<psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="address">
|
<psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="address">
|
||||||
</psbx-ds-text-filter>
|
</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>
|
||||||
|
|
||||||
<ng-container psDataGridCol="ordering">
|
<ng-container psDataGridCol="ordering">
|
||||||
<ng-container *psDataGridColHeader>Priority</ng-container>
|
<ng-container *psDataGridColHeader>Priority</ng-container>
|
||||||
<ng-container *psDataGridCell="let model">{{model.ordering}}</ng-container>
|
<ng-container *psDataGridCell="let model">{{model.ordering}}</ng-container>
|
||||||
<psbx-number-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="ordering">
|
<psbx-ds-number-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="ordering">
|
||||||
</psbx-number-filter>
|
</psbx-ds-number-filter>
|
||||||
<psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="ordering"></psbx-grid-sorting>
|
<psbx-ds-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="ordering"></psbx-ds-sorting>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
<ng-container psDataGridCol="openDate">
|
<ng-container psDataGridCol="openDate">
|
||||||
@ -58,7 +45,7 @@
|
|||||||
<ng-container *psDataGridCell="let model">{{model.openDate}}</ng-container>
|
<ng-container *psDataGridCell="let model">{{model.openDate}}</ng-container>
|
||||||
<psbx-datetime-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="openDate">
|
<psbx-datetime-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="openDate">
|
||||||
</psbx-datetime-filter>
|
</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>
|
||||||
|
|
||||||
<ng-container psDataGridCol="commands">
|
<ng-container psDataGridCol="commands">
|
||||||
|
@ -11,21 +11,34 @@ selected: {{ myValue | json }}
|
|||||||
<form #form [formGroup]="myForm">
|
<form #form [formGroup]="myForm">
|
||||||
<ps-ng-select [dataSource]="merchantDataSource2" 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">
|
<div *psNgSelectOption="let item">
|
||||||
{{ item.name }} - {{ item.address }}
|
<span>Merchant:</span> {{ item.name }} - <span>Address: </span>{{ item.address }}
|
||||||
</div>
|
</div>
|
||||||
</ps-ng-select>
|
</ps-ng-select>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
selected: {{ myForm.value | json }}
|
selected: {{ myForm.value | json }}
|
||||||
|
|
||||||
<h2>Single Select Demo | label Template</h2>
|
<h2>Single Select Demo | label Template</h2>
|
||||||
<ps-ng-select [dataSource]="merchantDataSource3" bindLabel="name" bindValue="id" [(ngModel)]="myValue3" [serverFiltering]="true">
|
<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">
|
<div *psNgSelectLabel="let item">
|
||||||
<img src="assets/32x32-blue.png"><span>Name: </span>{{ item.name }} - <span> Address: </span>{{item.address }}
|
<img src="assets/32x32-blue.png"><span>Name: </span>{{ item.name }} - <span> Address: </span>{{item.address }}
|
||||||
</div>
|
</div>
|
||||||
</ps-ng-select>
|
</ps-ng-select>
|
||||||
selected: {{ myValue3 | json }}
|
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>
|
<h2>Multi-Select Demo</h2>
|
||||||
<ps-ng-multi-select [dataSource]="merchantDataSource4" bindLabel="name" bindValue="id" [serverFiltering]="true" [(ngModel)]="myValue4" >
|
<ps-ng-multi-select [dataSource]="merchantDataSource4" bindLabel="name" bindValue="id" [serverFiltering]="true" [(ngModel)]="myValue4" >
|
||||||
<div *psNgSelectOption="let item">
|
<div *psNgSelectOption="let item">
|
||||||
|
Loading…
Reference in New Issue
Block a user