temp commit

2020-06-20 07:16:32 -05:00
parent b08c007d56
commit 970cc15210
23 changed files with 248 additions and 49 deletions
@@ -0,0 +1,24 @@
+<div class="row">
+    <div class="col-xs-12 col-12 col-md-4 form-group">
+      <input type="text"
+             placeholder="Datepicker"
+             class="form-control"
+             bsDatepicker>
+    </div>
+    <div class="col-xs-12 col-12 col-md-4 form-group">
+      <input type="text"
+             placeholder="Daterangepicker"
+             class="form-control"
+             bsDaterangepicker>
+    </div>
+  </div>
+
+<!-- 
+  <div class="row">
+    <div class="pr-3 pb-3">
+      <bs-datepicker-inline [bsValue]="bsInlineValue"></bs-datepicker-inline>
+    </div>
+    <div class="pr-3 pb-3">
+      <bs-daterangepicker-inline [bsValue]="bsInlineRangeValue"></bs-daterangepicker-inline>
+    </div>
+  </div> -->
@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'psbx-datetime-filter',
+  templateUrl: './datetime-filter.component.html',
+  styleUrls: ['./datetime-filter.component.scss']
+})
+export class DatetimeFilterComponent {
+
+  bsInlineValue = new Date();
+  bsInlineRangeValue: Date[];
+  maxDate = new Date();
+ 
+  constructor() {
+    this.maxDate.setDate(this.maxDate.getDate() + 7);
+    this.bsInlineRangeValue = [this.bsInlineValue, this.maxDate];
+  }
+
+}
@@ -1,14 +1,23 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { TextFilterComponent } from './text-filter/text-filter.component';
+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';
+
+
+



@NgModule({
-  declarations: [TextFilterComponent],
+  declarations: [TextFilterComponent, NumberFilterComponent,DatetimeFilterComponent],
  imports: [
-    CommonModule
+    CommonModule,
+    FormsModule,    
+    BsDatepickerModule.forRoot(),
  ],
-  exports: [TextFilterComponent]
+  exports: [TextFilterComponent, NumberFilterComponent,DatetimeFilterComponent]
 })
 export class GridFilterModule { }
@@ -0,0 +1 @@
+<p>number-filter works!</p>
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'psbx-number-filter',
+  templateUrl: './number-filter.component.html',
+  styleUrls: ['./number-filter.component.scss']
+})
+export class NumberFilterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
@@ -1 +1,6 @@
-<h1>text-filter works!</h1>
+<label class="ml-2">
+    <span>Filter: </span><input type="text" [(ngModel)]="searchTerm">    
+</label>
+
+
+
@@ -1,18 +1,46 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { IDataSource } from '@poweredsoft/data';
+import { Component, OnInit, Input, OnDestroy, Output,EventEmitter } from '@angular/core';
+import { IDataSource, IQueryExecutionResult, IQueryExecutionGroupResult } from '@poweredsoft/data';
+import { Subscription } from 'rxjs';
+

@Component({
  selector: 'psbx-ds-text-filter',
  templateUrl: './text-filter.component.html',
  styleUrls: ['./text-filter.component.scss']
 })
-export class TextFilterComponent implements OnInit {
+export class TextFilterComponent implements OnInit, OnDestroy {

-  @Input() dataSource : IDataSource<any>;
+  @Input() dataSource : IDataSource<any>;   
+  @Output() filteredResults: EventEmitter<any> = new EventEmitter();
+  latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any>;
+  
+  private _dataSubscription: Subscription;
+  private _searchTerm: string;
+ 
+
+  get searchTerm(): string {
+    return this._searchTerm;
+  }
+
+  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;
+    });
  }

 }
@@ -14,4 +14,6 @@ export * from './lib/confirm-modal/confirm-modal.directive';
 export * from './lib/spinner/spinner.module';
 export * from './lib/spinner/spinner/spinner.component';
 export * from './lib/grid-filter/grid-filter.module';
-export * from './lib/grid-filter/text-filter/text-filter.component';
+export * from './lib/grid-filter/text-filter/text-filter.component';
+export * from './lib/grid-filter/number-filter/number-filter.component';
+export * from './lib/grid-filter/datetime-filter/datetime-filter.component';
@@ -7,6 +7,7 @@ import { DataGridCellDirective } from './directives/data-grid-cell.directive';
 import { DataGridFooterDirective } from './directives/data-grid-footer.directive';
 import { DataGridHeaderDirective } from './directives/data-grid-header.directive';
 import { DataGridLoaderDirective } from './directives/data-grid-loader.directive';
+import { DataGridCellFilterDirective } from './directives/data-grid-cell-filter.directive';



@@ -16,7 +17,7 @@ import { DataGridLoaderDirective } from './directives/data-grid-loader.directive
  declarations: [
    DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,
    DataGridCellDirective, DataGridFooterDirective, DataGridHeaderDirective, 
-    DataGridLoaderDirective,
+    DataGridLoaderDirective, DataGridCellFilterDirective,
    
  ],
  imports: [
@@ -25,6 +26,6 @@ import { DataGridLoaderDirective } from './directives/data-grid-loader.directive
  exports: [
    DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,
    DataGridCellDirective,DataGridFooterDirective, DataGridHeaderDirective,
-    DataGridLoaderDirective]
+    DataGridLoaderDirective,DataGridCellFilterDirective]
 })
 export class DataGridModule { }
@@ -5,6 +5,9 @@
    <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>
@@ -5,6 +5,7 @@ import { DataGridHeaderDirective } from '../directives/data-grid-header.directiv
 import { DataGridFooterDirective } from '../directives/data-grid-footer.directive';
 import { DataGridLoaderDirective } from '../directives/data-grid-loader.directive';
 import { Subscription } from 'rxjs';
+import { DataGridCellFilterDirective } from '../directives/data-grid-cell-filter.directive';

@Component({
  selector: 'ps-data-grid',
@@ -20,9 +21,11 @@ export class DataGridComponent implements OnInit, OnDestroy {
  @ContentChildren(DataGridHeaderDirective) gridHeaders: QueryList<DataGridHeaderDirective>;
  @ContentChildren(DataGridFooterDirective) gridFooters: QueryList<DataGridFooterDirective>;
  @ContentChildren(DataGridLoaderDirective) loaders: QueryList<DataGridLoaderDirective>;
+  @ContentChildren(DataGridCellFilterDirective) filters: QueryList<DataGridCellFilterDirective>;
  
  @Input() dataSource: IDataSource<any>;
  @Input() tableClasses: any;
+  @Input() headerClasses: any;
  @Input() noRecordsText: string;

  private _columns: string[];
@@ -69,8 +72,7 @@ export class DataGridComponent implements OnInit, OnDestroy {
      this.loading = isLoading;
      this.cdr.detectChanges();
    });
-
-    console.log(this.loaders);
+    
  }

  getColumn(columnName: string) {
@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[psDataGridCellFilter]'
+})
+export class DataGridCellFilterDirective {
+
+  constructor(public template: TemplateRef<any>) { }
+
+}
@@ -9,4 +9,5 @@ export * from './lib/data-grid/directives/data-grid-col.directive';
 export * from './lib/data-grid/directives/data-grid-col-header.directive';
 export * from './lib/data-grid/directives/data-grid-header.directive';
 export * from './lib/data-grid/directives/data-grid-footer.directive';
-export * from './lib/data-grid/directives/data-grid-loader.directive';
+export * from './lib/data-grid/directives/data-grid-loader.directive';
+export * from './lib/data-grid/directives/data-grid-cell-filter.directive';