bug fix number range filter string to number

src/app/grid-filter/number-range-filter/number-range-filter.component.ts

     const filter: FilterDescriptor = {
       field: this.fieldName,
       operator: this.operator.value,
-      value: this.valueFrom,
+      value: Number(this.valueFrom),
     };
     this.applyFilter(this.updateFilter(filter));
   }
       fs.push({
         field: this.fieldName,
         operator: 'gte',
-        value: this.valueFrom
+        value: Number(this.valueFrom)
       });
     }
 
       fs.push({
         field: this.fieldName,
         operator: 'lte',
-        value: this.valueTo
+        value: Number(this.valueTo)
       });
     }
     this.removeFilter(this.fieldName);

src/app/list-all-loans/list-all-loans.component.html

   [pageSize]="pageSize"
   [skip]="skip"
   [sortable]="true"
+  [resizable]="true"
   [sort]="sort"
   [filter]="filter"
   [pageable]="true"
             </div>
         </ng-template>
         <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
-          <kendo-grid-string-filter-cell
-            [showOperators]="false"
-            [column]="column"
-            [filter]="filter">
-          </kendo-grid-string-filter-cell>
+          <app-string-filter [filter]="filter"  [fieldName]="'Client'">
+          </app-string-filter>
         </ng-template>
       </kendo-grid-column>
 
           </div>
         </ng-template>
         <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
-          <kendo-grid-string-filter-cell
-            [showOperators]="false"
-            [column]="column"
-            [filter]="filter">
-          </kendo-grid-string-filter-cell>
+          <app-string-filter [filter]="filter"  [fieldName]="'Broker'">
+          </app-string-filter>
         </ng-template>
       </kendo-grid-column>
 
           </div>
         </ng-template>
         <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
-          <kendo-grid-string-filter-cell
-            [showOperators]="false"
-            [column]="column"
-            [filter]="filter">
-          </kendo-grid-string-filter-cell>
+          <app-string-filter [filter]="filter"  [fieldName]="'OtherRewarder'">
+          </app-string-filter>
         </ng-template>
       </kendo-grid-column>
 
 
     <kendo-grid-column field="Item" [sortable]="true" [class]="'topAlign'"  width="300">
       <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
-        <kendo-grid-string-filter-cell
-          [showOperators]="false"
-          [column]="column"
-          [filter]="filter">
-        </kendo-grid-string-filter-cell>
+        <app-string-filter [filter]="filter"  [fieldName]="'Item'">
+        </app-string-filter>
       </ng-template>
     </kendo-grid-column>
 
-    <kendo-grid-column field="status" title="Status" [width]="180" [headerClass]="'colStatus'"  [class]="'alignStatus colStatus'" [resizable]="false"  >
+    <kendo-grid-column field="Status" title="Status" [width]="180" [headerClass]="'colStatus'"  [class]="'alignStatus colStatus'" [resizable]="false"  >
       <ng-template kendoGridCellTemplate let-dataItem>
         <span *ngIf="dataItem.Status != 'none'" class="badge badge-success">{{dataItem.Status}}</span>
       </ng-template>
       <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
-        <kendo-grid-string-filter-cell
-          [showOperators]="false"
-          [column]="column"
-          [filter]="filter">
-        </kendo-grid-string-filter-cell>
+        <app-string-filter [filter]="filter"  [fieldName]="'Status'">
+        </app-string-filter>
       </ng-template>
     </kendo-grid-column>
 
         </div>
       </ng-template>
       <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
-        <kendo-grid-date-filter-cell
-          [showOperators]="false"
-          [column]="column"
-          [filter]="filter">
-        </kendo-grid-date-filter-cell>
+        <app-date-filter [filter]="filter" [fieldName]="'Settlement'" [start]=0 [end]="15" [range]=1 [format]="'unixtimestamp'">
+        </app-date-filter>
       </ng-template>
     </kendo-grid-column>
   </kendo-grid-column-group>
 
   <kendo-grid-column-group title="Lender Details" [columnMenu]="false" [headerClass]="'colGroupLenderDetails'">
+    <kendo-grid-column field="Lender" title="Lender " [sortable]="true" width="200" >
+      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
+        <app-string-filter [filter]="filter"  [fieldName]="'Lender'">
+        </app-string-filter>
+      </ng-template>
+    </kendo-grid-column>
+    <kendo-grid-column field="LenderLoanNumber" title="Lender's Loan Number " [sortable]="true" width="200" >
+      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
+        <app-string-filter [filter]="filter"  [fieldName]="'LenderLoanNumber'">
+        </app-string-filter>
+      </ng-template>
+    </kendo-grid-column>
     <kendo-grid-column field="Amount" title="Amount($) " [sortable]="true" width="200" [headerClass]="'colAmount'" [class]="'topAlign colAmount'" filter="numeric">
       <ng-template kendoGridCellTemplate let-dataItem>
         <span [ngClass]="{'green text-bold': dataItem.Amount < 500000}">{{ dataItem.Amount | currency }}</span>
       </ng-template>
       <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
-        <kendo-grid-numeric-filter-cell
-          [showOperators]="false"
-          [column]="column"
-          [filter]="filter">
-        </kendo-grid-numeric-filter-cell>
+        <app-number-range-filter [filter]="filter" [fieldName]="'Amount'"
+                                 [options]="['gte', 'lte',  'range']" [min]=0
+        >
+        </app-number-range-filter>
       </ng-template>
     </kendo-grid-column>
 
         <span *ngIf="dataItem.Balance > 0" [ngClass]="{'green text-bold': dataItem.Balance < 500000}">{{ dataItem.Balance | currency }}</span>
       </ng-template>
       <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
-        <kendo-grid-numeric-filter-cell
-          [showOperators]="false"
-          [column]="column"
-          [filter]="filter">
-        </kendo-grid-numeric-filter-cell>
+        <app-number-range-filter [filter]="filter" [fieldName]="'Balance'"
+                                 [options]="['gte', 'lte',  'range']" [min]=0
+        >
+        </app-number-range-filter>
       </ng-template>
     </kendo-grid-column>
     <kendo-grid-column field="OffsetBalance" title="Offset Balance($)" width="200" [class]="'topAlign'" filter="numeric">
       </span>
       </ng-template>
       <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
-        <kendo-grid-numeric-filter-cell
-          [showOperators]="false"
-          [column]="column"
-          [filter]="filter">
-        </kendo-grid-numeric-filter-cell>
+        <app-number-range-filter [filter]="filter" [fieldName]="'OffsetBalance'"
+                                 [options]="['gte', 'lte',  'range']" [min]=0
+        >
+        </app-number-range-filter>
       </ng-template>
     </kendo-grid-column>
     <kendo-grid-column field="IncomeTotal" title="Income Trail($) " width="200" [headerClass]="'colTrail'"  [class]="'topAlign colTrail'" filter="numeric">
         <span *ngIf="dataItem.IncomeTotal > 0" [ngClass]="{'green text-bold': dataItem.IncomeTotal < 500000}">{{ dataItem.IncomeTotal | currency }}</span>
       </ng-template>
       <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
-        <kendo-grid-numeric-filter-cell
-          [showOperators]="false"
-          [column]="column"
-          [filter]="filter">
-        </kendo-grid-numeric-filter-cell>
+        <app-number-range-filter [filter]="filter" [fieldName]="'IncomeTotal'"
+                                 [options]="['gte', 'lte',  'range']" [min]=0
+        >
+        </app-number-range-filter>
       </ng-template>
     </kendo-grid-column>
     <kendo-grid-column field="NumOfTrail" title="#Trail" width="100" [class]="'topAlign'" [filterable]="false">

src/app/list-all-rewards/list-all-rewards.component.ts

 
   public dataStateChange(state: DataStateChangeEvent): void {
     this.state = state;
+    console.log(state);
     this.loadRewards();
   }
 

src/app/pay-in/pay-in.component.html

             [pageable]="pageable"
             [navigable]="true"
             [resizable]="true"
-            [pageSize]="filter.Take"
-            [skip]="filter.Skip"
+            [pageSize]="state.Take"
+            [skip]="state.Skip"
             [sortable]="sortable"
             [filterable]="filterable"
             [loading]="loading"
 
-            [sort]="filter.Sort"
-            [filter]="filter.Filter"
+            [sort]="state.Sort"
+            [filter]="state.Filter"
 
             [selectable]="selectable"
             kendoGridSelectBy
       <div [ngStyle]="{'width': allowAddNew? '70%': '100%'}" class="filter-panel-wrapper" >
         <span *ngIf="uploadMeta.Id > 0 " class="badge badge-pill badge-primary specific-upload"> {{uploadMeta.Id}}  </span>
         <span *ngIf="uploadMeta.Id > 0 " class="badge badge-secondary specific-upload"> {{uploadMeta.FileName}} </span>
-        <button *ngIf="false" kendoButton icon="filter" (click)="showFilter()" >Filter</button>
+<!--        <button *ngIf="false" kendoButton icon="filter" (click)="showFilter()" >Filter</button>-->
         <kendo-switch *ngIf="allowFilter" [(ngModel)]="filterable"   onLabel="⧩"    offLabel="all"
                       (valueChange)="onFilterEnable($event)"></kendo-switch>
       </div>

src/app/pay-in/pay-in.component.ts

   @Input() selectable: SelectableSettings | boolean;
   private filterUploadMeta: UploadMetaModel = new UploadMetaModel({});
   public filterLoan = new LoanModel({});
-  @Input() filter: PayInListFilterModel = new PayInListFilterModel({});
+  @Input() state: PayInListFilterModel = new PayInListFilterModel({});
   // public state = new GridStateModel();
   @Output() errorOccurred = new EventEmitter<string>();
   @Output() Updated = new EventEmitter<PayInModel>();
     this.lenderListView = this.lenderNameService;
     this.lenderNameService.query();
     if ( this.pageable ) {
-      this.filter.Take = this.pageSize;
+      this.state.Take = this.pageSize;
     }
     this.rowClassCallbackBind = this.rowClassCallback.bind(this);
+    this.debouncedLoadFilteredData = debounce(this.loadFilteredPayInList, 500);
   }
 
   ngOnInit(): void {
-    this.debouncedLoadFilteredData = debounce(this.loadFilteredPayInList, 500);
+
     if (this.privateLoadDataNow) { // not in delayed loading mode
       this.debouncedLoadFilteredData();
     }
 
   public loadFilteredPayInList(): void {
     this.loading = true;
+    this.refreshFilterByUpload();
+    this.refreshFilterByLoanId();
     const state = new GridStateModel();
-    state.filter = this.filter.Filter;
-    state.sort  = this.filter.Sort;
-    state.take  = this.filter.Take;
-    state.group = this.filter.Group;
+    state.filter = this.state.Filter;
+    state.sort  = this.state.Sort;
+    state.take  = this.state.Take;
+    state.group = this.state.Group;
     this.pis.getFilteredPayInList(state).subscribe(
       ( resp: PayInListResult) => {
         this.gridData.total = resp.total;
   @Input() set uploadMeta(value: UploadMetaModel) {
     this.filterUploadMeta = value;
     if ( value.Id <= 0 ) {
-      this.filter.UploadIds = [];
+      this.state.UploadIds = [];
     } else{
-      this.filter.UploadIds = [ value.Id.toString() ];
+      this.state.UploadIds = [ value.Id.toString() ];
     }
     this.debouncedLoadFilteredData();
     // console.log('upload filter changed', value, this.filter);
   @Input() set Loan(value: LoanModel){
     this.filterLoan = value;
     if ( value.Id === '' ) {
-      this.filter.LoanIds = [];
+      this.state.LoanIds = [];
     }else{
-      this.filter.LoanIds = [ value.Id ];
+      this.state.LoanIds = [ value.Id ];
     }
     this.debouncedLoadFilteredData();
     // console.log('filter loanId changed', value, this.filter);
   }
 
   public showUpload(id: number): void {
-    this.router.navigate(['/upload-details', id]);
+    this.router.navigate(['/upload-details', id]).then();
   }
 
 
   // }
 
   public pageChange(event: PageChangeEvent): void {
-    this.filter.Skip = event.skip;
-    this.filter.Take = event.take;
+    this.state.Skip = event.skip;
+    this.state.Take = event.take;
     // this.loadFilteredData();
   }
 
   public sortChange(sort: SortDescriptor[]): void {
-    this.filter.Sort = sort;
+    this.state.Sort = sort;
     // this.loadFilteredData();
   }
 
   public filterChange( filter: CompositeFilterDescriptor): void {
     // console.log (filter, this.state.filter);
-    this.filter.Skip = 0;
+    this.state.Skip = 0;
   }
   public dataStateChange(state: DataStateChangeEvent): void {
-    this.filter.Filter = state.filter;
-    this.filter.Group = state.group;
-    this.filter.Sort = state.sort;
-    this.filter.Skip = state.skip;
-    this.filter.Take = state.take;
+    this.state.Filter = state.filter;
+    this.state.Group = state.group;
+    this.state.Sort = state.sort;
+    this.state.Skip = state.skip;
+    this.state.Take = state.take;
     // console.log(state);
     this.loadFilteredPayInList();
   }
 
   public onFilterEnable(filtering: boolean): void {
     if ( ! filtering ) {
-      this.filter.Filter = {  logic: 'and',   filters: []   };
-      this.filter.Skip = 0;
+      this.state.Filter = {  logic: 'and',   filters: []   };
+      this.state.Skip = 0;
       this.loadFilteredPayInList();
     }
   }
+
+  private refreshFilterByUpload(): void{
+    // make a copy of  existing  filters
+    const newFilter = { logic: 'and', filters: [], ...this.state.Filter.filters};
+
+    // remove any existing filters about UploadsId
+    newFilter.filters = newFilter.filters.filter(v => {
+      if (!( 'field' in v) && v.operator === 'or') { // could be LoanId or UploadsIds
+        const subFilters = v.filters;
+        return ! subFilters.every( subf => subf.field === 'UploadIds' );  // if sub-filters are all about UploadsIds, we remove it
+      }
+      return true;
+    });
+
+    // build new filters
+    const uploadsFilter = { logic: 'or', filters: []};
+    this.state.UploadIds.forEach(v => {
+      uploadsFilter.filters.push( {
+          field: 'UploadId',
+          operator: 'eq',
+          value: v
+        });
+    });
+
+    // add new filter
+    newFilter.filters.push( uploadsFilter as CompositeFilterDescriptor );
+    this.state.Filter = newFilter as CompositeFilterDescriptor;
+
+  }
+
+  private refreshFilterByLoanId(): void{
+
+  }
 }