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

sorting & filtering 1st version done

Browse Source
This commit is contained in:
Yubing325 2020-06-23 15:14:07 -05:00
parent c7584f250a
commit e018d4f961
22 changed files with 327 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/number-filter/number-filter.component.html
View File

@ -1 +1,57 @@
<p>number-filter works!</p>
<ng-template #popTemplate>
<select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType">
<option *ngFor="let filter of filterTypes">{{filter}}</option>
</select>
<input type="text" class="form-control" placeholder="column value" aria-label="Username"
aria-describedby="basic-addon1" [(ngModel)]="filterValue">
<button class="btn btn-primary" (click)="applyFilter()">Filter</button>
</ng-template>
<button [popover]="popTemplate" popoverTitle="Template ref content inside" [outsideClick]="true" >
<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"
width="13px" height="13px">
<g>
<g>
<path d="M460.804,0H17.071C7.645,0,0.004,7.641,0.004,17.067V102.4c0.001,4.836,2.054,9.445,5.649,12.681l165.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.595l165.018-148.48c3.604-3.243,5.658-7.866,5.649-12.715V17.067C477.871,7.641,470.23,0,460.804,0z M443.737,94.805
L278.72,243.285c-3.604,3.243-5.657,7.866-5.649,12.715v143.053l-68.267,34.133V256c-0.001-4.836-2.054-9.445-5.649-12.68
L34.137,94.805V34.133h409.6V94.805z" />
</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>{{columnName}}

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

@ -1,4 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { IDataSource,IFilter } from '@poweredsoft/data';
import { ISimpleFilter } from '../../models/IFilter';
@Component({
selector: 'psbx-number-filter',
@ -6,10 +8,30 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./number-filter.component.scss']
})
export class NumberFilterComponent implements OnInit {
@Input() dataSource : IDataSource<any>;
@Output() onFilter: EventEmitter<IFilter> = new EventEmitter();
@Input() columnName:string;
filterType: string = 'Contains';
filterValue: string = null;
get filterTypes(){
return ["contains","equals","startsWith","GreaterThan","LessThan"]
}
constructor() { }
ngOnInit(): void {
}
}
applyFilter(){
this.onFilter.emit(<ISimpleFilter>{
path: this.columnName,
value: this.filterValue,
type: this.filterType,
and: true
});
}
}

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

@ -1,15 +1,24 @@
<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">{{filter}}</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">
<button class="btn btn-primary" (click)="applyFilter()">Filter</button>
</div>
<button class="btn btn-primary mr-1" (click)="applyFilter()">Filter</button>
<button type="button" class="btn btn-warning" (click)="pop.hide()">
Hide
</button>
</div>
</ng-template>
<span [popover]="popTemplate" popoverTitle="Template ref content inside">
<button [popover]="popTemplate" [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"
width="13px" height="13px">
@ -54,4 +63,4 @@
</g>
</svg>
</span>
</button>

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

@ -1,7 +1,6 @@
import { Component, OnInit, Input, OnDestroy, Output,EventEmitter } from '@angular/core';
import { IDataSource, IQueryExecutionResult, IQueryExecutionGroupResult } from '@poweredsoft/data';
import { Subscription } from 'rxjs';
import { IFilter, ISimpleFilter } from '../../models/IFilter';
import { Component, OnInit, Input } from '@angular/core';
import { IDataSource} from '@poweredsoft/data';
import { ISimpleFilter } from '../../models/IFilter';
@Component({
@ -12,18 +11,11 @@ import { IFilter, ISimpleFilter } from '../../models/IFilter';
export class TextFilterComponent implements OnInit {
@Input() dataSource : IDataSource<any>;
@Output() onFilter: EventEmitter<IFilter> = new EventEmitter();
title = 'Welcome word';
content = 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.';
private _searchTerm: string;
@Input() path:string;
filterType: string = 'Contains';
filterValue: string = null;
get filterTypes(){
return ["contains","equals","startsWith"]
}
filterTypes = ['contains', 'equal', 'startsWith','endsWith'];
constructor() { }
@ -32,12 +24,35 @@ export class TextFilterComponent implements OnInit {
}
clearFilter() {
const existingFilter = this.dataSource.filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;
if (existingFilter) {
this.dataSource.query({
page: 1,
filters: this.dataSource.filters.filter(t => t != existingFilter)
})
}
}
applyFilter(){
this.onFilter.emit(<ISimpleFilter>{
path: "name",
value: this.filterValue,
const filters = this.dataSource.filters;
const existingFilter = filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;
if (existingFilter) {
existingFilter.type = this.filterType;
existingFilter.value = this.filterValue;
} else {
filters.push(<ISimpleFilter>{
and: true,
type: this.filterType,
and: true
});
path: this.path,
value: this.filterValue
})
}
this.dataSource.query({
filters: filters,
page: 1
})
}
}

14
projects/poweredsoft/ngx-bootstrap/src/lib/grid-sorting/grid-sorting.module.ts Normal file
View File

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

4
projects/poweredsoft/ngx-bootstrap/src/lib/grid-sorting/grid-sorting/grid-sorting.component.html Normal file
View File

@ -0,0 +1,4 @@
<div>
<span class="caret dropdown-toggle" [class.not-sorting-state]="!isAscending" (click)="ascending()"></span>
<span class="caret dropdown-toggle sort-asc" [class.not-sorting-state]="!isDescending" style="transform: rotate(180deg)" (click)="descending()"></span>
</div>

16
projects/poweredsoft/ngx-bootstrap/src/lib/grid-sorting/grid-sorting/grid-sorting.component.scss Normal file
View File

@ -0,0 +1,16 @@
:host span.dropdown-toggle.sort-asc{
transform: rotate(180deg);
display: inline-block;
}
:host span{
margin: 10px;
}
:host .not-sorting-state{
opacity: 0.3;
}
:host .not-sorting-state:hover{
opacity: 1;
}

60
projects/poweredsoft/ngx-bootstrap/src/lib/grid-sorting/grid-sorting/grid-sorting.component.ts Normal file
View File

@ -0,0 +1,60 @@
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']
})
export class GridSortingComponent implements OnInit {
@Input() dataSource : IDataSource<any>;
@Input() path:string;
isAscending:boolean;
isDescending:boolean;
constructor() { }
ngOnInit(): void {
}
ascending(){
this.isAscending = true;
console.log("ascending result...")
const existingSort = this.dataSource.sorts.find(t => t.path == this.path);
if (existingSort){
existingSort.ascending = true;
}else{
this.dataSource.sorts.push({
path: this.path,
ascending:true
})
}
this.dataSource.query({
sorts: this.dataSource.sorts,
page: 1
})
this.isDescending = false;
}
descending(){
this.isDescending = true;
console.log("descending result...")
const existingSort = this.dataSource.sorts.find(t => t.path == this.path);
if (existingSort){
existingSort.ascending = false;
}else{
this.dataSource.sorts.push({
path: this.path,
ascending:false
})
}
this.dataSource.query({
sorts: this.dataSource.sorts,
page: 1
})
this.isAscending = false;
}
}

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

@ -17,3 +17,5 @@ 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';

5
projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid.module.ts
View File

@ -8,6 +8,7 @@ import { DataGridFooterDirective } from './directives/data-grid-footer.directive
import { DataGridHeaderDirective } from './directives/data-grid-header.directive';
import { DataGridLoaderDirective } from './directives/data-grid-loader.directive';
import { DataGridCellFilterDirective } from './directives/data-grid-cell-filter.directive';
import { DataGridColSortDirective } from './directives/data-grid-col-sort.directive';
@ -17,7 +18,7 @@ import { DataGridCellFilterDirective } from './directives/data-grid-cell-filter.
declarations: [
DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,
DataGridCellDirective, DataGridFooterDirective, DataGridHeaderDirective,
DataGridLoaderDirective, DataGridCellFilterDirective,
DataGridLoaderDirective, DataGridCellFilterDirective, DataGridColSortDirective,
],
imports: [
@ -26,6 +27,6 @@ import { DataGridCellFilterDirective } from './directives/data-grid-cell-filter.
exports: [
DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,
DataGridCellDirective,DataGridFooterDirective, DataGridHeaderDirective,
DataGridLoaderDirective,DataGridCellFilterDirective]
DataGridLoaderDirective,DataGridCellFilterDirective,DataGridColSortDirective]
})
export class DataGridModule { }

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

@ -9,14 +9,27 @@
</tr>
<tr>
<th *ngFor="let column of columns">
<div class="flex-container">
<div class="flex-item">
<ng-container *ngIf="hasHeaderTemplate(column)" >
<ng-container
[ngTemplateOutlet]="getColumnHeaderTemplate(column)"
></ng-container>
<ng-container *ngFor="let filter of filters" >
<ng-container [ngTemplateOutlet]="filter.template"></ng-container>
</ng-container>
</div>
<div class="flex-item">
<ng-container *ngIf="hasFilterTemplate(column)">
<ng-container [ngTemplateOutlet]="getFilterTemplate(column)"></ng-container>
</ng-container>
</div>
<div class="flex-item">
<ng-container *ngIf="hasSortingTemplate(column)">
<ng-container [ngTemplateOutlet]="getSortingTemplate(column)"></ng-container>
</ng-container>
</div>
</div>
</th>
</tr>
</thead>

8
projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.scss
View File

@ -0,0 +1,8 @@
:host .flex-container{
display: flex;
justify-content: flex-start;
}
:host .flex-item{
margin-right: 1px;
}

29
projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.ts
View File

@ -6,6 +6,7 @@ import { DataGridFooterDirective } from '../directives/data-grid-footer.directiv
import { DataGridLoaderDirective } from '../directives/data-grid-loader.directive';
import { Subscription } from 'rxjs';
import { DataGridCellFilterDirective } from '../directives/data-grid-cell-filter.directive';
import { DataGridColSortDirective } from '../directives/data-grid-col-sort.directive';
@Component({
selector: 'ps-data-grid',
@ -21,7 +22,6 @@ export class DataGridComponent implements OnInit, OnDestroy {
@ContentChildren(DataGridHeaderDirective) gridHeaders: QueryList<DataGridHeaderDirective>;
@ContentChildren(DataGridFooterDirective) gridFooters: QueryList<DataGridFooterDirective>;
@ContentChildren(DataGridLoaderDirective) loaders: QueryList<DataGridLoaderDirective>;
@ContentChildren(DataGridCellFilterDirective) filters: QueryList<DataGridCellFilterDirective>;
@Input() dataSource: IDataSource<any>;
@Input() tableClasses: any;
@ -32,6 +32,8 @@ export class DataGridComponent implements OnInit, OnDestroy {
private _dataSubscription: Subscription;
private _loadingSubscription: Subscription;
_fiters:any
@Input() set columns(value: string[]) {
this._columns = value;
this.columnsChange.emit(value);
@ -75,6 +77,22 @@ export class DataGridComponent implements OnInit, OnDestroy {
}
getSortingTemplate(columnName){
const ret = this.getColumn(columnName);
if (ret && ret.sortTemplate)
return ret.sortTemplate.template;
return null;
}
getFilterTemplate(columnName){
const ret = this.getColumn(columnName);
if (ret && ret.filterTemplate)
return ret.filterTemplate.template;
return null;
}
getColumn(columnName: string) {
if (!this.columnDefinitions)
@ -88,6 +106,7 @@ export class DataGridComponent implements OnInit, OnDestroy {
return ret;
}
getColumnHeaderTemplate(columnName: string) {
const ret = this.getColumn(columnName);
if (ret && ret.headerTemplate)
@ -112,5 +131,13 @@ export class DataGridComponent implements OnInit, OnDestroy {
return this.getColumnCellTemplate(columnName) ? true :false;
}
hasFilterTemplate(columnName: string) {
return this.getFilterTemplate(columnName) ? true :false;
}
hasSortingTemplate(columnName: string) {
return this.getSortingTemplate(columnName) ? true :false;
}
}

10
projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-col-sort.directive.ts Normal file
View File

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

7
projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-col.directive.ts
View File

@ -1,6 +1,9 @@
import { Directive, Input, ContentChild } from '@angular/core';
import { Directive, Input, ContentChild, ContentChildren } from '@angular/core';
import { DataGridColHeaderDirective } from './data-grid-col-header.directive';
import { DataGridCellDirective } from './data-grid-cell.directive';
import { DataGridCellFilterDirective } from './data-grid-cell-filter.directive';
import { DataGridColSortDirective } from './data-grid-col-sort.directive';
@Directive({
selector: '[psDataGridCol]'
@ -10,6 +13,8 @@ export class DataGridColDirective {
@Input('psDataGridCol') columnName:string;
@ContentChild(DataGridColHeaderDirective) headerTemplate:DataGridColHeaderDirective;
@ContentChild(DataGridCellDirective) cellTemplate:DataGridCellDirective;
@ContentChild(DataGridCellFilterDirective) filterTemplate: DataGridCellFilterDirective;
@ContentChild(DataGridColSortDirective) sortTemplate: DataGridColSortDirective;
constructor() { }

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

@ -11,3 +11,4 @@ export * from './lib/data-grid/directives/data-grid-header.directive';
export * from './lib/data-grid/directives/data-grid-footer.directive';
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';

2
src/app/app-routing.module.ts
View File

@ -30,7 +30,7 @@ const routes: Routes = [
},
{
path: 'grid-filter',
loadChildren: ()=> import('./grid-filter-demo/grid-filter-demo.module').then(m => m.GridFilterDemoModule)
loadChildren: ()=> import('./grid-filter&sorting-demo/grid-filter-demo.module').then(m => m.GridFilterDemoModule)
}
];

0
src/app/grid-filter-demo/grid-filter-demo-routing.module.ts → src/app/grid-filter&sorting-demo/grid-filter-demo-routing.module.ts
View File

5
src/app/grid-filter-demo/grid-filter-demo.module.ts → src/app/grid-filter&sorting-demo/grid-filter-demo.module.ts
View File

@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
import { GridFilterDemoRoutingModule } from './grid-filter-demo-routing.module';
import { GridFilterDemoComponent } from './grid-filter-demo/grid-filter-demo.component';
import { GridFilterModule, psbxPaginationModule, CommandModalModule, ConfirmModalModule, SpinnerModule } from '@poweredsoft/ngx-bootstrap';
import { GridFilterModule, psbxPaginationModule, CommandModalModule, ConfirmModalModule, SpinnerModule, GridSortingModule } from '@poweredsoft/ngx-bootstrap';
import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
import { FormsModule } from '@angular/forms';
@ -18,7 +18,8 @@ import { FormsModule } from '@angular/forms';
CommandModalModule,
ConfirmModalModule,
FormsModule,
SpinnerModule
SpinnerModule,
GridSortingModule
]
})
export class GridFilterDemoModule { }

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

@ -14,8 +14,11 @@
<ng-container psDataGridCol="id">
<div *psDataGridColHeader>ID</div>
<psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="id"></psbx-ds-text-filter>
<psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="id"></psbx-grid-sorting>
<div *psDataGridCell="let model">{{model.id}}</div>
<psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" (onFilter)="filterMerchants($event)" ></psbx-ds-text-filter>
<!--<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> -->
@ -31,12 +34,16 @@
<ng-container psDataGridCol="name">
<div *psDataGridColHeader>Name</div>
<psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="name"></psbx-ds-text-filter>
<psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="name"></psbx-grid-sorting>
<div *psDataGridCell="let model">{{model.name}}</div>
</ng-container>
<ng-container psDataGridCol="address">
<div *psDataGridColHeader>Address</div>
<div *psDataGridCell="let model">{{model.address}}</div>
<psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="address"></psbx-ds-text-filter>
<psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="address"></psbx-grid-sorting>
</ng-container>
<ng-container psDataGridCol="commands">
<ng-container *psDataGridColHeader>Actions</ng-container>
@ -54,6 +61,7 @@
<ng-template #confirm>
<div class="modal-body text-center">
<p>Do you want to confirm?</p>

0
src/app/grid-filter-demo/grid-filter-demo/grid-filter-demo.component.scss → src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.scss
View File

8
src/app/grid-filter-demo/grid-filter-demo/grid-filter-demo.component.ts → src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { IDataSource } from '@poweredsoft/data';
import { IDataSource, ISimpleFilter } from '@poweredsoft/data';
import { IMerchant } from 'src/app/data/services/IMerchant';
import { MerchantService } from 'src/app/data/services/merchant.service';
import { ConfirmModalService } from '@poweredsoft/ngx-bootstrap';
@ -32,9 +32,5 @@ export class GridFilterDemoComponent implements OnInit {
}
filterMerchants(event){
this.somefilter = event;
this.merchantDataSource.filters[0]=this.somefilter;
this.merchantDataSource.refresh();
}
}