fixed sorting and filtering

Author: Sebastian Superczynski

src/app/components/base/base.component.html

@@ -12,15 +12,15 @@
     <table class="ngx-table ngx-table-striped ngx-table-hover">
       <thead>
       <tr class="ngx-table__header" *ngIf="config.headerEnabled">
-        <ng-container *ngFor="let key of columns">
+        <ng-container *ngFor="let column of columns">
           <th class="ngx-table__header-cell"
-              (click)="orderBy(key)">
-            <div class="ngx-d-inline">{{ key }}</div>
-            <span *ngIf="resource.order[key]==='asc' "
+              (click)="orderBy(column['key'])">
+            <div class="ngx-d-inline">{{ column['title'] }}</div>
+            <span *ngIf="resource.order[column['key']]==='asc' "
                   [style.display]="config.orderEnabled?'':'none' "
                   class="ngx-icon ngx-icon-arrow-up">
             </span>
-            <span *ngIf="resource.order[key]==='desc' "
+            <span *ngIf="resource.order[column['key']]==='desc' "
                   [style.display]="config.orderEnabled?'':'none' "
                   class="ngx-icon ngx-icon-arrow-down">
             </span>
@@ -43,9 +43,9 @@
       </tr>
       <tr *ngIf="config.searchEnabled"
           class="ngx-table__sortHeader">
-        <ng-container *ngFor="let key of columns">
+        <ng-container *ngFor="let column of columns">
           <th>
-            <table-header (update)="onSearch($event)" [key]="key"></table-header>
+            <table-header (update)="onSearch($event)" [column]="column"></table-header>
           </th>
         </ng-container>
         <th *ngIf="config.additionalActions"></th>
@@ -65,12 +65,12 @@
         <tr *ngFor="let row of data | search : term | global : globalSearchTerm | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count };
               let rowIndex = index"
             [class.ngx-table__table-row--selected]="rowIndex == selectedRow && !config.selectCell">
-          <ng-container *ngFor="let key of columns; let colIndex = index">
-            <td (click)="clickedCell($event, row, key, colIndex, rowIndex)"
+          <ng-container *ngFor="let column of columns; let colIndex = index">
+            <td (click)="clickedCell($event, row, column['key'], colIndex, rowIndex)"
                 [class.ngx-table__table-col--selected]="colIndex == selectedCol && !config.selectCell"
                 [class.ngx-table__table-cell--selected]="colIndex == selectedCol && rowIndex == selectedRow && !config.selectCol && !config.selectRow"
             >
-              <div>{{ row[key] }}</div>
+              <div>{{ row[column['key']] }}</div>
             </td>
           </ng-container>
           <td *ngIf="config.additionalActions"></td>

src/app/components/base/base.component.ts

@@ -79,6 +79,7 @@ export class BaseComponent implements OnInit, OnChanges, AfterViewInit {
   orderBy(key: string) {
     if (ConfigService.config.orderEnabled || !ConfigService.config.serverPagination) {
       this.data = this.resource.sortBy(key, null);
+      this.data = [...this.data];
     }
     this.onOrder(key);
   }

src/app/components/header/header.component.ts

@@ -1,29 +1,21 @@
-import {Component, Input, Output, EventEmitter, OnInit} from '@angular/core';
-import {FiltersService} from "../../services/filters-service";
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'table-header',
   template: `
-  <label for="search_{{ key }}">
-    <input type="text"
-           id="search_{{ key }}"
-           aria-label="Search"
-           placeholder="Search for {{ key }}"
-           class="ngx-table__header-search ngx-form-input ngx-input-sm"
-           #input
-           (input)="update.emit({value: input.value, key: key})"
-    >
-  </label>`
+    <label for="search_{{ column['key'] }}">
+      <input type="text"
+             id="search_{{ column['key'] }}"
+             aria-label="Search"
+             placeholder="Search {{ column['key'] }}"
+             class="ngx-table__header-search ngx-form-input ngx-input-sm"
+             #input
+             (input)="update.emit({value: input.value, key: column['key']})"
+      >
+    </label>`
 })
 
-export class HeaderComponent implements OnInit {
-  constructor(public filtersService:FiltersService) {
-  }
-
-  @Input() key;
+export class HeaderComponent {
+  @Input() column;
   @Output() update = new EventEmitter();
-
-  ngOnInit() {
-    // this.update.emit({});
-  }
 }

src/app/pipes/header-pipe.ts

@@ -1,6 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core';
-import { FiltersService } from "../services/filters-service";
-import { ResourceService } from "../services/resource-service";
+import { FiltersService } from '../services/filters-service';
+import { ResourceService } from '../services/resource-service';
 
 @Pipe({
   name: 'search'
@@ -12,7 +12,7 @@ export class SearchPipe implements PipeTransform {
   }
 
   transform(value, filters) {
-    if (typeof value === "undefined") {
+    if (typeof value === 'undefined') {
       return;
     }
     this.resource.data = value.slice();
@@ -26,17 +26,17 @@ export class SearchPipe implements PipeTransform {
     value.forEach((item) => {
       for (const filterKey in filtersArr) {
         if (filtersArr.hasOwnProperty(filterKey)) {
-          let element;
-          if (typeof item[filterKey] === "string") {
+          let element = '';
+          if (typeof item[filterKey] === 'string') {
             element = item[filterKey].toLocaleLowerCase();
           }
-          if (typeof item[filterKey] === "object") {
+          if (typeof item[filterKey] === 'object') {
             element = JSON.stringify(item[filterKey]);
           }
-          if (typeof item[filterKey] === "number") {
+          if (typeof item[filterKey] === 'number') {
             element = item[filterKey].toString();
           }
-          if (typeof item[filterKey] === "boolean") {
+          if (typeof item[filterKey] === 'boolean') {
             element = item[filterKey].toString();
           }
           if (element.indexOf(filtersArr[filterKey].toLocaleLowerCase()) === -1) {

src/app/services/filters-service.ts

@@ -1,13 +1,9 @@
 import { Injectable } from '@angular/core';
-import { ResourceService } from './resource-service';
 import { isNumeric } from 'rxjs/util/isNumeric';
 
 @Injectable()
 export class FiltersService {
 
-  constructor(public resource: ResourceService) {
-  }
-
   public filters: Array<any> = [];
 
   update(k: string, v: string) {

src/app/services/resource-service.ts

@@ -1,19 +1,11 @@
-import { Injectable, EventEmitter } from '@angular/core';
+import { Injectable } from '@angular/core';
 
 @Injectable()
 export class ResourceService {
-  private _pipedDataEmitter;
   public data: Array<any> = [];
   public key: string;
   public order: Array<any> = [];
 
-  public getPipedData(): EventEmitter<any> {
-    if (!this._pipedDataEmitter) {
-      this._pipedDataEmitter = new EventEmitter();
-    }
-    return this._pipedDataEmitter;
-  }
-
   public sortBy(key: string, order: string | null): Array<any> {
     this.key = key;
     if (Object.keys(this.order).length === 0) {