text-filter working

projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/grid-filter.module.ts

@@ -5,8 +5,8 @@ import { FormsModule } from '@angular/forms';
 import { NumberFilterComponent } from './number-filter/number-filter.component';
 import { DatetimeFilterComponent } from './datetime-filter/datetime-filter.component';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
-
+import { PopoverModule } from 'ngx-bootstrap/popover';
-
+import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 
 
 
@@ -17,6 +17,8 @@ import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
     CommonModule,
     FormsModule,    
     BsDatepickerModule.forRoot(),
+    PopoverModule.forRoot(),
+    BsDropdownModule.forRoot()
   ],
   exports: [TextFilterComponent, NumberFilterComponent,DatetimeFilterComponent]
 })

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

@@ -1,6 +1,57 @@
-<label class="ml-2">
+<ng-template #popTemplate>
-    <span>Filter: </span><input type="text" [(ngModel)]="searchTerm">    
+    <select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType">
-</label>
+        <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>
 
 
+<span [popover]="popTemplate" popoverTitle="Template ref content inside">
+    <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>
 
+</span>

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

@@ -1,6 +1,7 @@
 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';
 
 
 @Component({
@@ -8,39 +9,35 @@ import { Subscription } from 'rxjs';
   templateUrl: './text-filter.component.html',
   styleUrls: ['./text-filter.component.scss']
 })
-export class TextFilterComponent implements OnInit, OnDestroy {
+export class TextFilterComponent implements OnInit {
 
   @Input() dataSource : IDataSource<any>;   
-  @Output() filteredResults: EventEmitter<any> = new EventEmitter();
+  @Output() onFilter: EventEmitter<IFilter> = new EventEmitter();
-  latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any>;
+  title = 'Welcome word';
+  content = 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.';
  
-  private _dataSubscription: Subscription;
   private _searchTerm: string;
  
+  filterType: string = 'Contains';
+  filterValue: string = null;
 
-  get searchTerm(): string {
+  get filterTypes(){
-    return this._searchTerm;
+    return ["contains","equals","startsWith"]
   }
 
-  set searchTerm(value: string) {
-    this._searchTerm = value;    
-    //this.filteredResults.emit(this.dataFilter(value));
-  }
-
-  // dataFilter(searchString: string) {
-  //   return this.latestResult.data.filter(x =>
-  //     x.name.toLowerCase().indexOf(searchString.toLowerCase()) !== -1);
-  // }
-
   constructor() { }
-  ngOnDestroy(): void {
+ 
-    this._dataSubscription.unsubscribe();
-  }
 
   ngOnInit(): void {
-    this._dataSubscription = this.dataSource.data$.subscribe(newData => {
+    
-      this.latestResult = newData;
-    });
   }
 
+  applyFilter(){
+    this.onFilter.emit(<ISimpleFilter>{
+      path: "name",
+      value: this.filterValue,
+      type: this.filterType,
+      and: true
+    });
+  }
 }

projects/poweredsoft/ngx-bootstrap/src/lib/models/IFilter.ts

@@ -0,0 +1,9 @@
+export interface IFilter {
+    type: string;
+    and?: boolean;
+}
+
+export interface ISimpleFilter extends IFilter {
+    path: string;
+    value: any;
+}

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

@@ -5,9 +5,6 @@
     <tr>
       <th *ngFor="let header of gridHeaders" [attr.colspan]="columns.length">
         <ng-container [ngTemplateOutlet]="header.template"></ng-container>
-        <ng-container *ngFor="let filter of filters" >
-          <ng-container [ngTemplateOutlet]="filter.template"></ng-container>
-        </ng-container>
       </th>
     </tr>
     <tr>
@@ -16,6 +13,9 @@
           <ng-container
             [ngTemplateOutlet]="getColumnHeaderTemplate(column)"
           ></ng-container>
+          <ng-container *ngFor="let filter of filters" >
+            <ng-container [ngTemplateOutlet]="filter.template"></ng-container>
+          </ng-container>
         </ng-container>
       </th>
     </tr>

src/app/grid-filter-demo/grid-filter-demo/grid-filter-demo.component.html

@@ -1,6 +1,6 @@
 <h2>grid-filter-demo works!</h2>
 <psbx-datetime-filter></psbx-datetime-filter>
-<button class="btn btn-danger" (click)="test()">Test</button>
+
 
 <ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns"
     tableClasses="table table-sm table-dark table-striped table-bordered">
@@ -10,11 +10,12 @@
             [dataSource]="merchantDataSource" command="addMerchant" [template]="theModal">Create Record</button>
     </ng-container>
 
-    <psbx-ds-text-filter  *psDataGridCellFilter [dataSource]="merchantDataSource" (filteredResults)="filteredResults = $event"></psbx-ds-text-filter>
+    
     
     <ng-container psDataGridCol="id">
         <div *psDataGridColHeader>ID</div>
         <div *psDataGridCell="let model">{{model.id}}</div>
+        <psbx-ds-text-filter  *psDataGridCellFilter [dataSource]="merchantDataSource" (onFilter)="filterMerchants($event)" ></psbx-ds-text-filter>
         <!-- <psfa-ds-sort-icon *psDataGridColSort [sortPath]="id" [dataSource]="merchantDataSource">
 
         </psfa-ds-sort-icon>  -->

src/app/grid-filter-demo/grid-filter-demo/grid-filter-demo.component.ts

@@ -20,6 +20,7 @@ export class GridFilterDemoComponent implements OnInit {
 
   pages:any;
   filteredResults:any;
+  somefilter:any;
   
   createDataSource(): IDataSource<IMerchant> {
     return this.merchantService.createDataSource();
@@ -28,9 +29,12 @@ export class GridFilterDemoComponent implements OnInit {
 
   ngOnInit() {
     this.merchantDataSource.refresh();
+    
   }
 
-  test(){
+  filterMerchants(event){
-    console.log(this.filteredResults);
+    this.somefilter = event;
+    this.merchantDataSource.filters[0]=this.somefilter;    
+    this.merchantDataSource.refresh();
   }
 }