text-filter working

2020-06-23 11:55:51 -05:00
parent 970cc15210
commit c7584f250a
7 changed files with 99 additions and 35 deletions
@@ -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]
 })
@@ -1,6 +1,57 @@
-<label class="ml-2">
-    <span>Filter: </span><input type="text" [(ngModel)]="searchTerm">    
-</label>
+<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>


+<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>
@@ -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();
-  latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any>;
-  
-  private _dataSubscription: Subscription;
+  @Output() onFilter: EventEmitter<IFilter> = new EventEmitter();
+  title = 'Welcome word';
+  content = 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.';
+ 
  private _searchTerm: string;
 
+  filterType: string = 'Contains';
+  filterValue: string = null;

-  get searchTerm(): string {
-    return this._searchTerm;
+  get filterTypes(){
+    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
+    });
+  }
 }
@@ -0,0 +1,9 @@
+export interface IFilter {
+    type: string;
+    and?: boolean;
+}
+
+export interface ISimpleFilter extends IFilter {
+    path: string;
+    value: any;
+}
@@ -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>