From 9e02901937726eec09bb726658de62ebe022dd36 Mon Sep 17 00:00:00 2001 From: Yubing325 <35515298+Yubing325@users.noreply.github.com> Date: Mon, 29 Jun 2020 15:29:13 -0500 Subject: [PATCH] number filter & datetime filter --- .../datetime-filter.component.html | 86 ++++++++++---- .../datetime-filter.component.ts | 40 ++++++- .../number-filter.component.html | 109 +++++++++--------- .../number-filter/number-filter.component.ts | 63 +++++++--- .../text-filter/text-filter.component.html | 2 +- .../text-filter/text-filter.component.ts | 8 +- .../grid-sorting/grid-sorting.component.html | 2 +- .../grid-sorting/grid-sorting.component.ts | 5 +- ...meCommand.ts => IChangeMerchantCommand.ts} | 4 +- src/app/data/services/IMerchant.ts | 2 + src/app/data/services/merchant.service.ts | 16 +-- .../grid-filter-demo.component.html | 79 ++++++++----- .../grid-filter-demo.component.ts | 2 +- 13 files changed, 281 insertions(+), 137 deletions(-) rename src/app/data/services/{IChangeMerchantNameCommand.ts => IChangeMerchantCommand.ts} (69%) diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/datetime-filter/datetime-filter.component.html b/projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/datetime-filter/datetime-filter.component.html index 0d17cb1..ac319c2 100644 --- a/projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/datetime-filter/datetime-filter.component.html +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/datetime-filter/datetime-filter.component.html @@ -1,24 +1,66 @@ -
-
- -
-
- -
+ +
+
+
+ +
+
+
+ +
+
+ + + +
+ - \ No newline at end of file + \ No newline at end of file diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/datetime-filter/datetime-filter.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/datetime-filter/datetime-filter.component.ts index 13ddad5..4b6ce79 100644 --- a/projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/datetime-filter/datetime-filter.component.ts +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/datetime-filter/datetime-filter.component.ts @@ -1,4 +1,5 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Input } from '@angular/core'; +import { IDataSource, ISimpleFilter } from '@poweredsoft/data'; @Component({ selector: 'psbx-datetime-filter', @@ -7,6 +8,17 @@ import { Component, OnInit } from '@angular/core'; }) export class DatetimeFilterComponent { + @Input() path: string; + @Input() dataSource : IDataSource; + filterPopUpOpened: boolean = false; + isFiltering: boolean; + filterValue: Date = null; + filterType: string = 'Equal'; + filterTypes = [ + {key:'equal', value: 'Equal'}, + ]; + + bsInlineValue = new Date(); bsInlineRangeValue: Date[]; maxDate = new Date(); @@ -15,5 +27,31 @@ export class DatetimeFilterComponent { this.maxDate.setDate(this.maxDate.getDate() + 7); this.bsInlineRangeValue = [this.bsInlineValue, this.maxDate]; } + showTooltip(){ + return "Filter by "+ this.path; + } + + applyFilter(){debugger; + this.isFiltering = true; + 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.toString() + } else { + filters.push({ + and: true, + type: this.filterType, + path: this.path, + value: this.filterValue.toString() + }) + } + + this.dataSource.query({ + filters: filters, + page: 1 + }) + } + } diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/number-filter/number-filter.component.html b/projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/number-filter/number-filter.component.html index 20d809a..8e56f6e 100644 --- a/projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/number-filter/number-filter.component.html +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/number-filter/number-filter.component.html @@ -1,57 +1,62 @@ - - - +
+ +
+ +
+ - +
+ + + + + +
- -{{columnName}} \ No newline at end of file + 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"/> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/number-filter/number-filter.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/number-filter/number-filter.component.ts index 1e46f80..048d11b 100644 --- a/projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/number-filter/number-filter.component.ts +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/number-filter/number-filter.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { Component, OnInit, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core'; import { IDataSource,IFilter } from '@poweredsoft/data'; import { ISimpleFilter } from '../../models/IFilter'; @@ -9,29 +9,62 @@ import { ISimpleFilter } from '../../models/IFilter'; }) export class NumberFilterComponent implements OnInit { @Input() dataSource : IDataSource; - @Output() onFilter: EventEmitter = new EventEmitter(); - @Input() columnName:string; + @Input() path:string; - filterType: string = 'Contains'; - filterValue: string = null; - - get filterTypes(){ - return ["contains","equals","startsWith","GreaterThan","LessThan"] - } + filterType: string = 'Equals'; + filterValue: number = 0; + isFiltering: boolean; + filterTypes = [ + {key:'Equals', value: 'Equal'}, + {key:'Greater Than', value: 'GreaterThan'}, + {key:'Less Than', value: 'LessThan'}, + {key:'Greater Than Equal', value: 'GreaterThanOrEqual'}, + {key:'Less Than Equal', value: 'LessThanOrEqual'}, + ]; + filterIsOpenned: boolean = false; constructor() { } ngOnInit(): void { + } + clearFilter() { + this.isFiltering = false; + 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({ - path: this.columnName, - value: this.filterValue, - type: this.filterType, - and: true - }); + this.isFiltering = true; + 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.toString(); + } else { + filters.push({ + and: true, + type: this.filterType, + path: this.path, + value: this.filterValue.toString() + }) + } + + this.dataSource.query({ + filters: filters, + page: 1 + }) + } + + showTooltip(){ + return "Filter by "+ this.path; } } diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/text-filter/text-filter.component.html b/projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/text-filter/text-filter.component.html index 03b072a..ec73531 100644 --- a/projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/text-filter/text-filter.component.html +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/text-filter/text-filter.component.html @@ -2,7 +2,7 @@
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/text-filter/text-filter.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/text-filter/text-filter.component.ts index 4c9b9ed..e2b8181 100644 --- a/projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/text-filter/text-filter.component.ts +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/text-filter/text-filter.component.ts @@ -17,10 +17,10 @@ export class TextFilterComponent implements OnInit { filterValue: string = null; isFiltering: boolean; filterTypes = [ - {key:'contains', value: 'Contains'}, - {key:'equal', value: 'Equal'}, - {key:'startsWith', value: 'Starts With'}, - {key:'endsWith', value: 'Ends With'} + {key:'Contains', value: 'Contains'}, + {key:'Equals', value: 'Equal'}, + {key:'Starts With', value: 'startsWith'}, + {key:'Ends With', value: 'endsWith'} ]; filterIsOpenned: boolean = false; diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/grid-sorting/grid-sorting/grid-sorting.component.html b/projects/poweredsoft/ngx-bootstrap/src/lib/grid-sorting/grid-sorting/grid-sorting.component.html index 1ae48d3..b9e62bb 100644 --- a/projects/poweredsoft/ngx-bootstrap/src/lib/grid-sorting/grid-sorting/grid-sorting.component.html +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/grid-sorting/grid-sorting/grid-sorting.component.html @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/grid-sorting/grid-sorting/grid-sorting.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/grid-sorting/grid-sorting/grid-sorting.component.ts index 3a6f873..5043d26 100644 --- a/projects/poweredsoft/ngx-bootstrap/src/lib/grid-sorting/grid-sorting/grid-sorting.component.ts +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/grid-sorting/grid-sorting/grid-sorting.component.ts @@ -17,10 +17,9 @@ export class GridSortingComponent implements OnInit { ngOnInit(): void { } - ascending(){ - this.isSorting = !this.isSorting; + sorting(){ + this.isSorting = true; this.isAscending = !this.isAscending; - console.log("ascending result...") const existingSort = this.dataSource.sorts.find(t => t.path == this.path); if (existingSort){ existingSort.ascending = (this.isAscending)? true : false; diff --git a/src/app/data/services/IChangeMerchantNameCommand.ts b/src/app/data/services/IChangeMerchantCommand.ts similarity index 69% rename from src/app/data/services/IChangeMerchantNameCommand.ts rename to src/app/data/services/IChangeMerchantCommand.ts index 4cc391d..6a5d769 100644 --- a/src/app/data/services/IChangeMerchantNameCommand.ts +++ b/src/app/data/services/IChangeMerchantCommand.ts @@ -1,11 +1,13 @@ -export interface IChangeMerchantNameCommand { +export interface IChangeMerchantCommand { id: string; name: string; address: string; + ordering: number; } export interface IAddMerchantCommand { name: string; address: string; + ordering: number; } export interface IRemoveMerchantCommand { diff --git a/src/app/data/services/IMerchant.ts b/src/app/data/services/IMerchant.ts index 98cd34f..7785995 100644 --- a/src/app/data/services/IMerchant.ts +++ b/src/app/data/services/IMerchant.ts @@ -2,4 +2,6 @@ export interface IMerchant { id: string; name: string; address: string; + ordering:number; + openDate: Date; } diff --git a/src/app/data/services/merchant.service.ts b/src/app/data/services/merchant.service.ts index eaed80f..9e689c9 100644 --- a/src/app/data/services/merchant.service.ts +++ b/src/app/data/services/merchant.service.ts @@ -4,7 +4,7 @@ import { IDataSource, DataSource } from '@poweredsoft/data'; import { Apollo } from 'apollo-angular'; import gql from 'graphql-tag'; import { of } from 'rxjs'; -import { IChangeMerchantNameCommand, IAddMerchantCommand, IRemoveMerchantCommand } from './IChangeMerchantNameCommand'; +import { IChangeMerchantCommand as IChangeMerchantCommand, IAddMerchantCommand, IRemoveMerchantCommand } from './IChangeMerchantCommand'; import { IMerchant } from './IMerchant'; @Injectable({ @@ -23,7 +23,7 @@ export class MerchantService { >( 'merchants', 'GraphQLAdvanceQueryOfMerchantInput', - 'id, name, address', + 'id, name, address, ordering, openDate', (model) => model.id, { page: 1, @@ -31,8 +31,8 @@ export class MerchantService { }, true ); - - builder.addMutation( + + builder.addMutation( 'changeMerchant', //<-- command name 'changeMerchant', //<-- graph ql mutation name @@ -51,10 +51,11 @@ export class MerchantService { }, // viewModel -> transform to the form model for that command -> IChangeMerchantName - e => of({ + e => of({ id: e.model.id, name: e.model.name, - address: e.model.address + address: e.model.address, + ordering:e.model.ordering, }) ); @@ -80,7 +81,8 @@ export class MerchantService { // viewModel -> transform to the form model for that command -> IChangeMerchantName e => of({ name: 'A New merchant', - address: '' + address: '', + ordering: 11 }) ); diff --git a/src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.html b/src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.html index 618f2ca..3116897 100644 --- a/src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.html +++ b/src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.html @@ -1,6 +1,4 @@

grid-filter-demo works!

- - @@ -10,11 +8,11 @@ [dataSource]="merchantDataSource" command="addMerchant" [template]="theModal">Create Record - - + +
ID
- +
{{model.id}}
@@ -34,50 +32,73 @@
Name
- +
{{model.name}}
 - +
Address
{{model.address}}
- + + + + +
Priority
+
{{model.ordering}}
+ + + + + + +
Open Date
+
{{model.openDate}}
+ + + + + Actions - - + + - + + + + + + + + + + + +
-

Do you want to confirm?

- - +

Do you want to confirm?

+ +
- - - - - - - - - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.ts b/src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.ts index 30b4e00..6bd9dd1 100644 --- a/src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.ts +++ b/src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.ts @@ -11,7 +11,7 @@ import { ConfirmModalService } from '@poweredsoft/ngx-bootstrap'; }) export class GridFilterDemoComponent implements OnInit { - columns = ['id','name', 'address','commands'] + columns = ['id','name', 'address', 'ordering','openDate', 'commands'] merchantDataSource: IDataSource; constructor(private merchantService: MerchantService){ this.merchantDataSource = this.createDataSource();