fixed dataTime range bug & clean code
This commit is contained in:
		
							parent
							
								
									a0445f2474
								
							
						
					
					
						commit
						bf6280aa1c
					
				
							
								
								
									
										12
									
								
								package-lock.json
									
									
									
										generated
									
									
									
								
							
							
						
						
									
										12
									
								
								package-lock.json
									
									
									
										generated
									
									
									
								
							| @ -1676,9 +1676,9 @@ | ||||
|       } | ||||
|     }, | ||||
|     "@poweredsoft/data": { | ||||
|       "version": "0.0.26", | ||||
|       "resolved": "https://registry.npmjs.org/@poweredsoft/data/-/data-0.0.26.tgz", | ||||
|       "integrity": "sha512-JogKJQ01w4hTQr4EDSoYp2KfJzBbzC8trc7iHCxw7tjF6kB9nqWxu8gvRxX5pqzDK6ORz0Ieuw7i0hEZusW+ww==", | ||||
|       "version": "0.0.30", | ||||
|       "resolved": "https://registry.npmjs.org/@poweredsoft/data/-/data-0.0.30.tgz", | ||||
|       "integrity": "sha512-lKojW+yCKPSrdohqhuoEUTo196Z1cHs+SkOZ9N43N7MUcbIR0SA6Uz6k4QZtbmbXmR5AvDKPrDp37nqPXGZFYA==", | ||||
|       "requires": { | ||||
|         "tslib": "^1.9.0" | ||||
|       } | ||||
| @ -1692,9 +1692,9 @@ | ||||
|       } | ||||
|     }, | ||||
|     "@poweredsoft/ngx-data-apollo": { | ||||
|       "version": "0.0.8", | ||||
|       "resolved": "https://registry.npmjs.org/@poweredsoft/ngx-data-apollo/-/ngx-data-apollo-0.0.8.tgz", | ||||
|       "integrity": "sha512-8nIlvHTnbLyG9aNxkSYOHIbNBBSjj92v0BeFTq4xkttp3UmYzhOO7lkgo1cEIDUuYo+ITAYoZbKwrd4CbnBgcA==", | ||||
|       "version": "0.0.10", | ||||
|       "resolved": "https://registry.npmjs.org/@poweredsoft/ngx-data-apollo/-/ngx-data-apollo-0.0.10.tgz", | ||||
|       "integrity": "sha512-0HjJthjXstNXS/T9u6t9VTWtQO/LUzGsbT/m0tjj8y0YuivMzfK76EyQldvjGXDYGfIL12kEhsKEbiOPXyCXcA==", | ||||
|       "requires": { | ||||
|         "tslib": "^1.9.0" | ||||
|       } | ||||
|  | ||||
| @ -24,9 +24,9 @@ | ||||
|     "@angular/platform-browser-dynamic": "~9.1.4", | ||||
|     "@angular/router": "~9.1.4", | ||||
|     "@ng-select/ng-select": "^4.0.1", | ||||
|     "@poweredsoft/data": "0.0.27", | ||||
|     "@poweredsoft/data": "0.0.30", | ||||
|     "@poweredsoft/ngx-data": "0.0.13", | ||||
|     "@poweredsoft/ngx-data-apollo": "0.0.8", | ||||
|     "@poweredsoft/ngx-data-apollo": "0.0.10", | ||||
|     "apollo-angular": "^1.8.0", | ||||
|     "apollo-angular-link-http": "^1.9.0", | ||||
|     "apollo-cache-inmemory": "^1.6.0", | ||||
|  | ||||
| @ -49,6 +49,18 @@ export class NgSelectComponent implements OnInit,OnDestroy { | ||||
|     this.trackFn = this.trackBy.bind(this); | ||||
|    | ||||
|   } | ||||
| 
 | ||||
|   ngOnInit(): void { | ||||
|     this.dataFetching();     | ||||
|     this.detectLoading(); | ||||
| 
 | ||||
|     if(this.serverFiltering){ | ||||
|       this.searchOnServer(); | ||||
|     }else{ | ||||
|       this.refreshDataSource(); | ||||
|     } | ||||
|   } | ||||
| 
 | ||||
|   | ||||
|   valueChanged(event) { | ||||
|     this.changeEvent.emit(event); | ||||
| @ -76,16 +88,6 @@ export class NgSelectComponent implements OnInit,OnDestroy { | ||||
|     this._loadingSubscription.unsubscribe(); | ||||
|   } | ||||
| 
 | ||||
|   ngOnInit(): void { | ||||
|     this.dataFetching();     | ||||
|     this.detectLoading(); | ||||
| 
 | ||||
|     if(this.serverFiltering){ | ||||
|       this.searchOnServer(); | ||||
|     }else{ | ||||
|       this.refreshDataSource(); | ||||
|     } | ||||
|   } | ||||
| 
 | ||||
|   dataFetching(){ | ||||
|     this.data$ = this.dataSource.data$.pipe( | ||||
|  | ||||
| @ -1,6 +1,6 @@ | ||||
| { | ||||
|   "name": "@poweredsoft/ngx-bootstrap", | ||||
|   "version": "0.0.1", | ||||
|   "version": "0.0.2", | ||||
|   "peerDependencies": { | ||||
|     "@angular/common": "^9.1.9", | ||||
|     "@angular/core": "^9.1.9", | ||||
|  | ||||
| @ -1,5 +1,5 @@ | ||||
| <ng-template #popTemplate> | ||||
|   <form (ngSubmit)="applyFilter(pop)" novalidate> | ||||
|   <form (ngSubmit)="applyFilter()" novalidate> | ||||
|     <div class="container" > | ||||
|       <div class="row"> | ||||
|         <select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType" [ngModelOptions]="{standalone: true}"> | ||||
| @ -7,7 +7,7 @@ | ||||
|         </select>     | ||||
|     </div> | ||||
|       <div class="row mt-1 mb-1"> | ||||
|           <input *ngIf="filterType !='Range'"  | ||||
|           <input *ngIf="!isRangeFilter"  | ||||
|                  type="text" | ||||
|                  placeholder="Datepicker" | ||||
|                  class="form-control" | ||||
| @ -15,7 +15,7 @@ | ||||
|       </div> | ||||
|        | ||||
|       <div class="row mt-1 mb-1"> | ||||
|         <input *ngIf="filterType =='Range'" type="text" | ||||
|         <input *ngIf="isRangeFilter" type="text" | ||||
|         placeholder="Daterangepicker" | ||||
|         class="form-control" | ||||
|         bsDaterangepicker [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">        | ||||
| @ -29,33 +29,7 @@ | ||||
|   </div> | ||||
|   </form> | ||||
| 
 | ||||
|   <!-- <div class="container" > | ||||
|     <div class="row"> | ||||
|       <select class="custom-select" title="Choose one of the following..." > | ||||
|           <option *ngFor="let filter of filterTypes" [value]="filter.value">{{filter.key}}</option> | ||||
|       </select>     | ||||
|   </div> | ||||
|     <div class="row mt-1 mb-1"> | ||||
|         <input *ngIf="filterType !='Range'"  | ||||
|                type="text" | ||||
|                placeholder="Datepicker" | ||||
|                class="form-control" | ||||
|                bsDatepicker [(ngModel)]="filterValue" >  | ||||
|     </div> | ||||
|      | ||||
|     <div class="row mt-1 mb-1"> | ||||
|       <input *ngIf="filterType =='Range'" type="text" | ||||
|       placeholder="Daterangepicker" | ||||
|       class="form-control" | ||||
|       bsDaterangepicker [(ngModel)]="filterValue">        | ||||
|   </div> | ||||
|    | ||||
|     <div class="row mt-2"> | ||||
|       <button class="btn btn-primary mr-1" type="submit" (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> | ||||
| </div> --> | ||||
| </ng-template> | ||||
| 
 | ||||
| <button [popover]="popTemplate" class="btn btn-default" [(isOpen)]="filterPopUpOpened" [outsideClick]="true" #pop="bs-popover"> | ||||
|  | ||||
| @ -1,6 +1,7 @@ | ||||
| import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; | ||||
| import { IDataSource, ISimpleFilter, ICompositeFilter, IFilter } from '@poweredsoft/data'; | ||||
| import { PopoverDirective } from 'ngx-bootstrap/popover'; | ||||
| import { IDataSource, ISimpleFilter, ICompositeFilter, IFilter,FilterType } from '@poweredsoft/data'; | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| @Component({ | ||||
|   selector: 'psbx-ds-datetime-filter', | ||||
| @ -23,7 +24,7 @@ export class DataSourceDatetimeFilterComponent implements OnInit { | ||||
|     {key:'Less Than', value: 'LessThan'},     | ||||
|     {key:'Greater Than Equal', value: 'GreaterThanOrEqual'}, | ||||
|     {key:'Less Than Equal', value: 'LessThanOrEqual'},     | ||||
|     {key:'Range', value: 'Range' } | ||||
|     {key:'Range', value: FilterType.COMPOSITE } | ||||
|   ]; | ||||
| 
 | ||||
| 
 | ||||
| @ -35,6 +36,11 @@ export class DataSourceDatetimeFilterComponent implements OnInit { | ||||
|     this.maxDate.setDate(this.maxDate.getDate() + 7); | ||||
|     this.bsInlineRangeValue = [this.bsInlineValue, this.maxDate]; | ||||
|   } | ||||
| 
 | ||||
|   get isRangeFilter() { | ||||
|     return this.filterType == FilterType.COMPOSITE; | ||||
|   } | ||||
| 
 | ||||
|   ngOnInit(): void { | ||||
|     if (!this.filterType) | ||||
|       this.filterType = 'Equal'; | ||||
| @ -43,17 +49,27 @@ export class DataSourceDatetimeFilterComponent implements OnInit { | ||||
|     return "Filter by "+ this.path; | ||||
|   } | ||||
|   clearFilter() { | ||||
|      | ||||
|     this.filterValue = null; | ||||
|     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) { | ||||
|       this.dataSource.query({ | ||||
|         page: 1, | ||||
|         filters: this.dataSource.filters.filter(t => t != existingFilter) | ||||
|       }) | ||||
|     } | ||||
|      | ||||
|     if (this.isRangeFilter){ | ||||
|       | ||||
|       let existingFilter2 = this.dataSource.filters.find(t=> t.type == 'Composite'); | ||||
|       this.dataSource.query({ | ||||
|         page: 1, | ||||
|         filters: this.dataSource.filters.filter(t => t != existingFilter2) | ||||
|       }) | ||||
|     } | ||||
|   } | ||||
|   applyFilter(pop: PopoverDirective = null){ | ||||
|   applyFilter(){ | ||||
| 
 | ||||
|     this.isFiltering = true; | ||||
|     const filters = this.dataSource.filters; | ||||
| @ -61,17 +77,18 @@ export class DataSourceDatetimeFilterComponent implements OnInit { | ||||
|     let freshFilter: ISimpleFilter = null; | ||||
|     let startDate:Date; | ||||
|     let endDate:Date; | ||||
| debugger; | ||||
|     if(Array.isArray(this.filterValue)){ | ||||
| 
 | ||||
|     // TODO create filter here.
 | ||||
|     if(Array.isArray(this.filterValue)){ //check if it's a dateRange value 
 | ||||
|       startDate = this.filterValue[0]; | ||||
|       endDate = this.filterValue[1]; | ||||
|       compositeF = { | ||||
|         type: 'Composite', | ||||
|         type: FilterType.COMPOSITE, | ||||
|         filters: [ | ||||
|           { | ||||
|             path: this.path, | ||||
|             type: 'GREATERTHANOREQUAL', | ||||
|             value: startDate, // check if this string works
 | ||||
|             value: startDate,  | ||||
|           }, | ||||
|           { | ||||
|             and: true, | ||||
| @ -89,19 +106,15 @@ debugger; | ||||
|         path: this.path, | ||||
|         value: this.filterValue | ||||
|       } | ||||
| 
 | ||||
|       if (pop)  | ||||
|       pop.hide(); | ||||
|     } | ||||
| 
 | ||||
|     // TODO???
 | ||||
|     // set this for gql better handling of variant.
 | ||||
|     //(freshFilter as IGraphQLFilter).__gqlVariantType = 'DATETIME';
 | ||||
| 
 | ||||
|     // TODO create filter here.
 | ||||
|      | ||||
|     const existingFilterIndex = filters.findIndex(t => { | ||||
|         if (t.type == 'Composite') { | ||||
|         if (t.type == 'COMPOSITE') { | ||||
|           const compositeFilter = t as ICompositeFilter; | ||||
|           return compositeFilter.filters && compositeFilter.filters.length  | ||||
|             && compositeFilter[0].path == this.path; | ||||
|  | ||||
| @ -1,6 +1,6 @@ | ||||
| { | ||||
|   "name": "@poweredsoft/ngx-cdk-ui", | ||||
|   "version": "0.0.1", | ||||
|   "version": "0.0.2", | ||||
|   "peerDependencies": { | ||||
|     "@angular/common": "^9.1.9", | ||||
|     "@angular/core": "^9.1.9" | ||||
|  | ||||
| @ -15,12 +15,14 @@ export class DataGridDemoHomeComponent implements OnInit, OnDestroy { | ||||
|   columns = ['id','name', 'address', 'commands'] | ||||
|   merchantDataSource: IDataSource<IMerchant>;   | ||||
|   private _dataSubscription: Subscription; | ||||
|   private _loading: Subscription; | ||||
|   constructor(private  merchantService: MerchantService){ | ||||
|     this.merchantDataSource = this.createDataSource(); | ||||
| 
 | ||||
|   } | ||||
|   ngOnDestroy(): void { | ||||
|     this._dataSubscription.unsubscribe(); | ||||
|     this._loading.unsubscribe(); | ||||
|   } | ||||
| 
 | ||||
|    | ||||
| @ -46,7 +48,7 @@ export class DataGridDemoHomeComponent implements OnInit, OnDestroy { | ||||
|   } | ||||
| 
 | ||||
|   ngOnInit() { | ||||
|     this.merchantDataSource.loading$.subscribe(isLoading => { | ||||
|     this._loading = this.merchantDataSource.loading$.subscribe(isLoading => { | ||||
|       console.log('merchant data source event loading', isLoading); | ||||
|     }); | ||||
| 
 | ||||
|  | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user