temp commit

angular.json

@@ -28,6 +28,7 @@
               "src/assets"
             ],
             "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/styles.scss"
             ],
             "scripts": []

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

@@ -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> -->

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

@@ -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];
+  }
+
+}

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

@@ -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 { }

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

@@ -0,0 +1 @@
+<p>number-filter works!</p>

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

@@ -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 {
+  }
+
+}

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

@@ -1 +1,6 @@
-<h1>text-filter works!</h1>
+<label class="ml-2">
+    <span>Filter: </span><input type="text" [(ngModel)]="searchTerm">    
+</label>
+
+
+

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

@@ -1,18 +1,46 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, OnDestroy, Output,EventEmitter } from '@angular/core';
-import { IDataSource } from '@poweredsoft/data';
+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;
+    });
   }
 
 }

projects/poweredsoft/ngx-bootstrap/src/public-api.ts

@@ -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';

projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid.module.ts

@@ -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 { }

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

@@ -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>

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

@@ -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) {

projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-cell-filter.directive.ts

@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[psDataGridCellFilter]'
+})
+export class DataGridCellFilterDirective {
+
+  constructor(public template: TemplateRef<any>) { }
+
+}

projects/poweredsoft/ngx-cdk-ui/src/public-api.ts

@@ -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';

src/app/app.module.ts

@@ -10,6 +10,7 @@ import { HttpLink, HttpLinkModule } from 'apollo-angular-link-http';
 import { DefaultOptions } from 'apollo-client';
 import { InMemoryCache } from 'apollo-cache-inmemory';
 import { HttpClientModule } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 export function app_Init(apollo: Apollo, httpLink: HttpLink) {
   return async () => {
@@ -56,7 +57,8 @@ export function app_Init(apollo: Apollo, httpLink: HttpLink) {
     AppRoutingModule,
     HttpClientModule,
     ApolloModule,
-    HttpLinkModule
+    HttpLinkModule,
+    BrowserAnimationsModule
   ],
   providers: [
     {

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

@@ -3,14 +3,22 @@ import { CommonModule } from '@angular/common';
 
 import { GridFilterDemoRoutingModule } from './grid-filter-demo-routing.module';
 import { GridFilterDemoComponent } from './grid-filter-demo/grid-filter-demo.component';
-import { GridFilterModule } from '@poweredsoft/ngx-bootstrap';
+import { GridFilterModule, psbxPaginationModule, CommandModalModule, ConfirmModalModule, SpinnerModule } from '@poweredsoft/ngx-bootstrap';
+import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [GridFilterDemoComponent],
   imports: [
     CommonModule,
     GridFilterDemoRoutingModule,
-    GridFilterModule,
+    GridFilterModule,    
+    psbxPaginationModule,
+    DataGridModule,
+    CommandModalModule,
+    ConfirmModalModule,
+    FormsModule,
+    SpinnerModule
   ]
 })
 export class GridFilterDemoModule { }

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

@@ -1,2 +1,74 @@
-<p>grid-filter-demo works!</p>
+<h2>grid-filter-demo works!</h2>
-<psbx-ds-text-filter></psbx-ds-text-filter>
+<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">
+    <psbx-spinner *psDataGridLoader></psbx-spinner>
+    <ng-container *psDataGridHeader>
+        <button class="btn-info btn" psbxCommandModal commandTitle="Adding a new merchant" commandText="Add"
+            [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>
+        <!-- <psfa-ds-sort-icon *psDataGridColSort [sortPath]="id" [dataSource]="merchantDataSource">
+
+        </psfa-ds-sort-icon>  -->
+
+        <!-- <psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource"></psbx-ds-text-filter>
+        <psdb-ds-date-filter *psDataGridCellFilter></psdb-ds-date-filter>
+        <psdb-ds-date-range-filter *psDataGridCellFilter></psdb-ds-date-range-filter>
+        <psbx-ds-number-filter *psDataGridCellFilter></psbx-ds-number-filter>
+        <psbx-ds-multi-select-filter [dataSource]="merchantDataSource" [selectDataSource]="selectDataSource" [valueField]="id">
+            <ng-container *psSelectOption="let option">{{ option.name }}</ng-container>
+        </psbx-ds-multi-select-filter> -->
+    </ng-container>
+
+    <ng-container psDataGridCol="name">
+        <div *psDataGridColHeader>Name</div>
+        <div *psDataGridCell="let model">{{model.name}}</div>         
+    </ng-container>
+   
+    <ng-container psDataGridCol="address">
+        <div *psDataGridColHeader>Address</div>
+        <div *psDataGridCell="let model">{{model.address}}</div>
+    </ng-container>
+    <ng-container psDataGridCol="commands">
+        <ng-container *psDataGridColHeader>Actions</ng-container>
+        <ng-container *psDataGridCell="let model">
+            <button class="btn-info btn" psbxCommandModal [commandTitle]="'Change ' + model.name + ' name'" commandText="Update"
+            [dataSource]="merchantDataSource" command="changeMerchant" [model]="model" [template]="theModal">Change</button>
+            <button class="btn-danger btn" psbxConfirmModal [commandTitle]="'Are you sure you wnat to remove ' + model.name + '?'" commandText="Remove"
+            [dataSource]="merchantDataSource" command="removeMerchant" [model]="model" >Remove</button>
+        </ng-container>
+    </ng-container>
+    <ng-container *psDataGridFooter>
+        <psbx-ds-pagination [dataSource]="merchantDataSource"></psbx-ds-pagination> 
+    </ng-container>
+</ps-data-grid>
+
+
+
+<ng-template #confirm>
+    <div class="modal-body text-center">
+      <p>Do you want to confirm?</p>
+      <button type="button" class="btn btn-default"  >Yes</button>
+      <button type="button" class="btn btn-primary"  >No</button>
+    </div>
+  </ng-template>
+
+
+
+ <ng-template #theModal let-command let-loading="loading">
+        <label for="name">Name</label>
+        <input type="text" required [attr.disabled]="loading" [(ngModel)]="command.name" placeholder="Enter a merchant name" 
+               class="form-control"  >
+        <label for="address">Address</label>
+        <input type="text" required [attr.disabled]="loading" [(ngModel)]="command.address" placeholder="Enter the merchant's address" 
+              class="form-control" >
+        
+</ng-template> 

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

@@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { IDataSource } from '@poweredsoft/data';
+import { IMerchant } from 'src/app/data/services/IMerchant';
+import { MerchantService } from 'src/app/data/services/merchant.service';
+import { ConfirmModalService } from '@poweredsoft/ngx-bootstrap';
 
 @Component({
   selector: 'ps-grid-filter-demo',
@@ -7,9 +11,26 @@ import { Component, OnInit } from '@angular/core';
 })
 export class GridFilterDemoComponent implements OnInit {
 
-  constructor() { }
+  columns = ['id','name', 'address','commands']
-
+  merchantDataSource: IDataSource<IMerchant>;  
-  ngOnInit(): void {
+  constructor(private  merchantService: MerchantService){
+    this.merchantDataSource = this.createDataSource();
+    console.log(this.merchantDataSource);    
   }
 
+  pages:any;
+  filteredResults:any;
+  
+  createDataSource(): IDataSource<IMerchant> {
+    return this.merchantService.createDataSource();
+   
+  }
+
+  ngOnInit() {
+    this.merchantDataSource.refresh();
+  }
+
+  test(){
+    console.log(this.filteredResults);
+  }
 }

src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html

@@ -63,7 +63,6 @@
   </ng-template>
 
 
-
  <ng-template #theModal let-command let-loading="loading">
         <label for="name">Name</label>
         <input type="text" required [attr.disabled]="loading" [(ngModel)]="command.name" placeholder="Enter a merchant name" 

src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts

@@ -19,31 +19,6 @@ export class PaginationDemoComponent implements OnInit {
   }
 
   pages:any;
-
-  // removeMerchant(id:string) {
-  //   this.confirmModalService.confirm({
-  //     message: 'Do you want to delete this merchant?',
-  //     yesText: 'yes delete this merchant',
-  //     yesClass: 'danger',
-  //     noText: 'no please dont',
-  //     noClass: 'light'
-  //   }).subscribe(result => {
-  //     if(result){
-  //       this.merchantDataSource.executeCommandByName('removeMerchant', {
-  //         id: id
-  //       }).subscribe(      
-  //         res => {
-  //           this.merchantDataSource.refresh();
-  //         },
-  //         err => {
-  //           console.log(err);
-  //           alert('failed');
-  //         }
-  //       );
-  //     }
-  //   })
-  // }
-
   
   createDataSource(): IDataSource<IMerchant> {
     return this.merchantService.createDataSource();

src/styles.scss

@@ -1,2 +1,3 @@
 /* You can add global styles to this file, and also import other style files */
-@import '~bootstrap/scss/bootstrap';
+@import '~bootstrap/scss/bootstrap';
+@import '~ngx-bootstrap/datepicker/bs-datepicker.css';