text-filter & sorting refurnished

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

@@ -7,6 +7,7 @@ import { DatetimeFilterComponent } from './datetime-filter/datetime-filter.compo
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 import { PopoverModule } from 'ngx-bootstrap/popover';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 
 
@@ -18,7 +19,8 @@ import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
     FormsModule,    
     BsDatepickerModule.forRoot(),
     PopoverModule.forRoot(),
-    BsDropdownModule.forRoot()
+    BsDropdownModule.forRoot(),
+    TooltipModule.forRoot()
   ],
   exports: [TextFilterComponent, NumberFilterComponent,DatetimeFilterComponent]
 })

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

@@ -2,7 +2,7 @@
     <div class="container" >
         <div class="row">
             <select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType">
-                <option *ngFor="let filter of filterTypes">{{filter}}</option>
+                <option *ngFor="let filter of filterTypes">{{filter.value}}</option>
             </select>    
         </div>
        
@@ -12,55 +12,51 @@
         </div>
         
         <button class="btn btn-primary mr-1" (click)="applyFilter()">Filter</button>
-        <button type="button" class="btn btn-warning" (click)="pop.hide()">
+        <button type="button" class="btn btn-warning" *ngIf="!isFiltering" (click)="pop.hide()">Hide</button>
-            Hide
+        <button type="button" class="btn btn-dark" *ngIf="isFiltering" (click)="clearFilter()">Clear</button>
-          </button>
+        
     </div>
 </ng-template>
 
-<button [popover]="popTemplate"  [outsideClick]="true" #pop="bs-popover">
+<button [popover]="popTemplate" class="btn btn-default" [(isOpen)]="filterIsOpenned" [outsideClick]="true" #pop="bs-popover">
-    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+    <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"
-        y="0px" viewBox="0 0 477.875 477.875" style="enable-background:new 0 0 477.875 477.875;" xml:space="preserve"
+	 viewBox="0 0 477.875 477.875" style="enable-background:new 0 0 477.875 477.875;" xml:space="preserve" fill-opacity="0.5" [tooltip]="showTooltip()" [tooltipEnable]="!filterIsOpenned" width="13px" height="13px" [ngStyle]="{'fill': isFiltering ? 'red': 'black', 'fill-opacity': isFiltering ? '1': '0.5'}">
-        width="13px" height="13px">
+<g>
-        <g>
+	<g>
-            <g>
+		<path d="M460.804,0H17.071C7.645,0,0.004,7.641,0.004,17.067V102.4c-0.004,4.842,2.05,9.458,5.649,12.698l165.018,148.514V460.8
-                <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
+			V263.612l165.018-148.48c3.608-3.247,5.662-7.878,5.649-12.732V17.067C477.871,7.641,470.23,0,460.804,0z"/>
-			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
+	</g>
-			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>
+</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>
-        </g>
-    </svg>
-
 </button>

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

@@ -14,8 +14,15 @@ export class TextFilterComponent implements OnInit {
   @Input() path:string;
  
   filterType: string = 'Contains';
-  filterValue: string = null;
+  filterValue: string = null; 
-  filterTypes = ['contains', 'equal', 'startsWith','endsWith'];
+  isFiltering: boolean;
+  filterTypes = [
+    {key:'contains', value: 'Contains'}, 
+    {key:'equal', value: 'Equal'}, 
+    {key:'startsWith', value: 'Starts With'},
+    {key:'endsWith', value: 'Ends With'}
+  ];
+  filterIsOpenned: boolean = false;
 
   constructor() { }
  
@@ -25,6 +32,7 @@ export class TextFilterComponent implements OnInit {
   }
 
   clearFilter() {
+    this.isFiltering = false;
     const existingFilter = this.dataSource.filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;
     if (existingFilter) {
       this.dataSource.query({
@@ -35,7 +43,7 @@ export class TextFilterComponent implements OnInit {
   }
 
   applyFilter(){
-
+    this.isFiltering = true;
     const filters = this.dataSource.filters;
     const existingFilter = filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;
     if (existingFilter) {
@@ -55,4 +63,8 @@ export class TextFilterComponent implements OnInit {
       page: 1
     })
   }
+
+  showTooltip(){
+    return "Filter by "+ this.path;
+  }
 }

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

@@ -1,4 +1,3 @@
-<div>
+<span>
-    <span class="caret dropdown-toggle" [class.not-sorting-state]="!isAscending" (click)="ascending()"></span>
+    <span class="caret dropdown-toggle" [class.not-sorting-state]="!isSorting" [class.sort-desc]="!isAscending" (click)="ascending()"></span>    
-    <span class="caret dropdown-toggle sort-asc" [class.not-sorting-state]="!isDescending" style="transform: rotate(180deg)" (click)="descending()"></span>
+</span>
-</div>

projects/poweredsoft/ngx-bootstrap/src/lib/grid-sorting/grid-sorting/grid-sorting.component.scss

@@ -1,4 +1,4 @@
-:host span.dropdown-toggle.sort-asc{
+:host span.dropdown-toggle.sort-desc{
     transform: rotate(180deg);
     display: inline-block;
 }

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

@@ -9,52 +9,31 @@ import { IDataSource } from '@poweredsoft/data';
 export class GridSortingComponent implements OnInit {
 
   @Input() dataSource : IDataSource<any>;
-  @Input() path:string;  
+  @Input() path:string; 
-  isAscending:boolean;
+  isSorting: boolean =false; 
-  isDescending:boolean;
+  isAscending:boolean = false;  
   constructor() { }
 
   ngOnInit(): void {
   }
 
   ascending(){
-    this.isAscending = true;
+    this.isSorting = !this.isSorting;
+    this.isAscending = !this.isAscending;
     console.log("ascending result...")
     const existingSort = this.dataSource.sorts.find(t => t.path == this.path);
     if (existingSort){
-      existingSort.ascending = true;
+      existingSort.ascending = (this.isAscending)? true : false;
     }else{
       this.dataSource.sorts.push({
         path: this.path,
-        ascending:true        
+        ascending: (this.isAscending)? true : false 
       })
     }
-
     this.dataSource.query({
       sorts: this.dataSource.sorts,
       page: 1
     })
-    this.isDescending = false;
-  }
-
-  descending(){
-    this.isDescending = true;
-    console.log("descending result...")
-    const existingSort = this.dataSource.sorts.find(t => t.path == this.path);
-    if (existingSort){
-      existingSort.ascending = false;
-    }else{
-      this.dataSource.sorts.push({
-        path: this.path,
-        ascending:false        
-      })
-    }
-
-    this.dataSource.query({
-      sorts: this.dataSource.sorts,
-      page: 1
-    })
-    this.isAscending = false;
   }
 
 }

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

@@ -19,16 +19,16 @@
           </div>
   
           <div class="flex-item">
-            <ng-container *ngIf="hasFilterTemplate(column)">
+         
-              <ng-container [ngTemplateOutlet]="getFilterTemplate(column)"></ng-container>
+              <ng-container *ngIf="hasSortingTemplate(column)">
-            </ng-container>
+                <ng-container [ngTemplateOutlet]="getSortingTemplate(column)"></ng-container>
-          </div>
+              </ng-container>
-          
+  
-          <div class="flex-item">
+              <ng-container *ngIf="hasFilterTemplate(column)">
-            <ng-container *ngIf="hasSortingTemplate(column)">
+                <ng-container [ngTemplateOutlet]="getFilterTemplate(column)"></ng-container>
-              <ng-container [ngTemplateOutlet]="getSortingTemplate(column)"></ng-container>
+              </ng-container>
-            </ng-container>
+            </div>
-          </div>
+           
         </div>
       </th>
     </tr>

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

@@ -1,6 +1,7 @@
 :host  .flex-container{
     display: flex;
-    justify-content: flex-start;
+    justify-content: space-between;
+    align-items: baseline;
 }
 
 :host .flex-item{

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

@@ -3,7 +3,7 @@
 
 
 <ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns"
-    tableClasses="table table-sm table-dark table-striped table-bordered">
+    tableClasses="table table-sm 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"