Merge pull request #234 from ssuperczynski/pinn-fixes

ssuperczynski · web-flow · commit c0b52b8d23ef · 2019-05-06T08:25:09.000+02:00
added back ChangeDetectionStrategy
diff --git a/projects/ngx-easy-table/src/lib/components/base/base.component.html b/projects/ngx-easy-table/src/lib/components/base/base.component.html
@@ -24,14 +24,17 @@
       </th>
       <ng-container *ngFor="let column of columns; let colIndex = index">
         <th class="ngx-table__header-cell"
+            [class.pinned-left]="column.pinned"
+            [ngClass]="column.cssClass && column.cssClass.includeHeader ? column.cssClass.name : ''"
+            [style.left]="pinnedWidth(column.pinned, colIndex)"
             #th
-            [attr.width]="getColumnWidth(column)"
+            [style.width]="getColumnWidth(column)"
             (mousedown)="onMouseDown($event, th)"
             (mouseup)="onMouseUp($event)"
             (mousemove)="onMouseMove($event)">
           <div (click)="orderBy(column)" [class.pointer]="isOrderEnabled(column)">
             <div class="ngx-table__header-title">{{ column.title }}<span>&nbsp;</span>
-              <i class="ngx-icon ngx-icon-pin" *ngIf="styleService.pinnedColumns.has(colIndex + 1)"></i>
+              <i class="ngx-icon ngx-icon-pin" *ngIf="column.pinned"></i>
               <div [style.display]="config.orderEnabled ? 'inline' : 'none' ">
                 <span *ngIf="sortKey === column.key && this.sortState.get(sortKey) === ''"> -</span>
                 <i *ngIf="sortKey === column.key && this.sortState.get(sortKey) === 'asc'"
@@ -66,8 +69,11 @@
     <tr *ngIf="config.searchEnabled && !filtersTemplate"
         class="ngx-table__sort-header">
       <th *ngIf="config.checkboxes"></th>
-      <ng-container *ngFor="let column of columns">
-        <th>
+      <ng-container *ngFor="let column of columns; let colIndex = index">
+        <th
+          [ngClass]="column.cssClass && column.cssClass.includeHeader ? column.cssClass.name : ''"
+          [class.pinned-left]="column.pinned"
+          [style.left]="pinnedWidth(column.pinned, colIndex)">
           <table-header
             *ngIf="getColumnDefinition(column)"
             (update)="onSearch($event)"
@@ -150,6 +156,9 @@
             <td (click)="onClick($event, row, column.key, colIndex, rowIndex)"
                 (contextmenu)="onRowContextMenu($event, row, column.key, colIndex, rowIndex)"
                 (dblclick)="onDoubleClick($event, row, column.key, colIndex, rowIndex)"
+                [class.pinned-left]="column.pinned"
+                [ngClass]="column.cssClass ? column.cssClass.name : ''"
+                [style.left]="pinnedWidth(column.pinned, colIndex)"
                 [class.ngx-table__table-col--selected]="colIndex == selectedCol && !config.selectCell"
                 [class.ngx-table__table-cell--selected]="colIndex == selectedCol && rowIndex == selectedRow && !config.selectCol && !config.selectRow"
             >
diff --git a/projects/ngx-easy-table/src/lib/components/base/base.component.ts b/projects/ngx-easy-table/src/lib/components/base/base.component.ts
@@ -1,5 +1,6 @@
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import {
+  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   ContentChild,
@@ -14,16 +15,7 @@ import {
   ViewChild,
 } from '@angular/core';
 
-import {
-  Columns,
-  Config,
-  Event,
-  API,
-  Pagination,
-  ColumnKeyType,
-  TableMouseEvent,
-  ApiType,
-} from '../..';
+import { API, ApiType, ColumnKeyType, Columns, Config, Event, Pagination, TableMouseEvent } from '../..';
 import { DefaultConfigService } from '../../services/config-service';
 import { PaginationComponent, PaginationRange } from '../pagination/pagination.component';
 import { GroupRowsService } from '../../services/group-rows.service';
@@ -40,6 +32,7 @@ interface RowContextMenuPosition {
   selector: 'ngx-table',
   providers: [DefaultConfigService, GroupRowsService, StyleService],
   templateUrl: './base.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BaseComponent implements OnInit, OnChanges {
   @ViewChild('paginationComponent') private paginationComponent: PaginationComponent;
@@ -176,8 +169,6 @@ export class BaseComponent implements OnInit, OnChanges {
       key: this.sortKey,
       order: this.sortState.get(this.sortKey),
     };
-    this.setColumnPinned();
-    this.setColumnClass();
     this.emitEvent(Event.onOrder, value);
   }
 
@@ -233,8 +224,6 @@ export class BaseComponent implements OnInit, OnChanges {
     if (!DefaultConfigService.config.serverPagination) {
       this.term = $event;
     }
-    this.setColumnPinned();
-    this.setColumnClass();
     this.emitEvent(Event.onSearch, $event);
   }
 
@@ -248,8 +237,6 @@ export class BaseComponent implements OnInit, OnChanges {
   onPagination(pagination: PaginationRange): void {
     this.page = pagination.page;
     this.limit = pagination.limit;
-    this.setColumnPinned();
-    this.setColumnClass();
     this.emitEvent(Event.onPagination, pagination);
   }
 
@@ -387,47 +374,22 @@ export class BaseComponent implements OnInit, OnChanges {
     this.emitEvent(Event.onRowContextMenu, value);
   }
 
+  pinnedWidth(pinned: boolean, column: number): string {
+    if (pinned) {
+      return 150 * column + 'px'; //
+    }
+  }
+
   private doApplyData(data) {
     const order = this.columns.find((c) => !!c.orderBy);
     if (order) {
       this.sortState.set(this.sortKey, (order.orderBy === 'asc') ? 'desc' : 'asc');
       this.orderBy(order);
     } else {
       this.data = [...data.currentValue];
-      this.setColumnClass();
-      this.setColumnPinned();
     }
   }
 
-  private setColumnClass() {
-    this.cdr.detectChanges();
-    const colClass = this.columns.filter((c) => !!c.cssClass);
-    colClass.forEach((col) => {
-      this.bindApi({
-        type: API.setColumnClass,
-        value: {
-          column: this.columns.indexOf(col) + 1,
-          className: col.cssClass.name,
-          includeHeader: col.cssClass.includeHeader,
-        },
-      });
-    });
-  }
-
-  private setColumnPinned() {
-    this.cdr.detectChanges();
-    const pinned = this.columns.filter((c) => !!c.pinned);
-    pinned.forEach((pin) => {
-      this.bindApi({
-        type: API.setColumnPinned,
-        value: {
-          column: this.columns.indexOf(pin) + 1,
-          pinned: pin.pinned,
-        },
-      });
-    });
-  }
-
   onDrop(event: CdkDragDrop<string[]>) {
     this.emitEvent(Event.onRowDrop, event);
     moveItemInArray(this.data, event.previousIndex, event.currentIndex);
@@ -477,18 +439,6 @@ export class BaseComponent implements OnInit, OnChanges {
         this.styleService.setRowClass(event.value);
         this.cdr.detectChanges();
         break;
-      case API.setColumnClass:
-        if (Array.isArray(event.value)) {
-          event.value.forEach((val) => this.styleService.setColumnClassStyle(val));
-          break;
-        }
-        this.styleService.setColumnClassStyle(event.value);
-        this.cdr.detectChanges();
-        break;
-      case API.setColumnPinned:
-        this.styleService.setColumnPinnedStyle(event.value.column, event.value.pinned);
-        this.cdr.detectChanges();
-        break;
       case API.setCellClass:
         if (Array.isArray(event.value)) {
           event.value.forEach((val) => this.styleService.setCellClass(val));
diff --git a/projects/ngx-easy-table/src/lib/model/api.ts b/projects/ngx-easy-table/src/lib/model/api.ts
@@ -13,16 +13,13 @@ export enum API {
   setPaginationDisplayLimit = 'setPaginationDisplayLimit',
   setTableClass = 'setTableClass',
   setRowClass = 'setRowClass',
-  setColumnClass = 'setColumnClass',
-  setColumnPinned = 'setColumnPinned',
   setCellClass = 'setCellClass',
   setRowStyle = 'setRowStyle',
   setCellStyle = 'setCellStyle',
   sortBy = 'sortBy',
 }
 
 export type rowClass = { row: number, className: string };
-export type columnClass = { column: number, className: string, includeHeader: boolean };
 export type cellClass = { row: number, cell: number | string, className: string };
 export type rowStyle = { row: number, attr: string, value: string };
 export type cellStyle = { row: number, cell: number, attr: string, value: string };
@@ -42,8 +39,6 @@ export type ApiType =
   | { type: API.setPaginationDisplayLimit; value: number; }
   | { type: API.setTableClass; value: string | null; }
   | { type: API.setRowClass; value: rowClass | rowClass[] }
-  | { type: API.setColumnClass; value: columnClass | columnClass[] }
-  | { type: API.setColumnPinned; value: { column: number, pinned: boolean } }
   | { type: API.setCellClass; value: cellClass | cellClass[] }
   | { type: API.setRowStyle; value: rowStyle | rowStyle[] }
   | { type: API.setCellStyle; value: cellStyle | cellStyle[] }
diff --git a/projects/ngx-easy-table/src/lib/services/style.service.ts b/projects/ngx-easy-table/src/lib/services/style.service.ts
@@ -1,10 +1,8 @@
 import { Injectable } from '@angular/core';
-import { cellClass, cellStyle, columnClass, rowClass, rowStyle } from '..';
+import { cellClass, cellStyle, rowClass, rowStyle } from '..';
 
 @Injectable()
 export class StyleService {
-  public pinnedColumns = new Set<number>();
-
   setRowClass(val: rowClass): void {
     const selector = `#table > tbody > tr:nth-child(${val.row})`;
     const row: HTMLTableRowElement = document.querySelector(selector);
@@ -13,47 +11,6 @@ export class StyleService {
     }
   }
 
-  setColumnClassStyle(val: columnClass): void {
-    if (val.column < 1) {
-      console.error('Column number need to be 1 or greater');
-      return;
-    }
-    if (val.includeHeader) {
-      const headerRows = document.querySelectorAll(`#table > thead tr > th:nth-child(${val.column})`);
-      [].forEach.call(headerRows, (header) => {
-        header.className = val.className;
-      });
-    }
-    const columns = document.querySelectorAll(`#table > tbody tr > td:nth-child(${val.column})`);
-    [].forEach.call(columns, (column) => {
-      column.className = val.className;
-    });
-  }
-
-  setColumnPinnedStyle(column: number, pinned: boolean): void {
-    if (column < 1) {
-      console.error('Column number need to be 1 or greater');
-      return;
-    }
-    this.updatePinnedColumns(column, pinned);
-    let leftMargin = 0;
-    this.pinnedColumns.forEach((col) => {
-      if (col < column) {
-        const currentColumn = document.querySelector(`#table tr:nth-child(1) > td:nth-child(${col})`);
-        leftMargin = leftMargin + currentColumn.clientWidth;
-      }
-    });
-    const cols = document.querySelectorAll(`#table tr > td:nth-child(${column}),th:nth-child(${column})`);
-    [].forEach.call(cols, (col: HTMLTableElement) => {
-      if (pinned) {
-        col.className = 'ngx-table__header-cell pinned-left';
-        col.style.left = `${leftMargin}px`;
-        return;
-      }
-      col.className = 'ngx-table__header-cell';
-    });
-  }
-
   setCellClass(val: cellClass): void {
     const selector = `#table > tbody > tr:nth-child(${val.row}) > td:nth-child(${val.cell})`;
     const cell: HTMLTableCellElement = document.querySelector(selector);
@@ -79,12 +36,4 @@ export class StyleService {
       cell.style[val.attr] = val.value;
     }
   }
-
-  private updatePinnedColumns(column: number, pinned: boolean) {
-    if (pinned) {
-      this.pinnedColumns.add(column);
-    } else {
-      this.pinnedColumns.delete(column);
-    }
-  }
 }
diff --git a/src/app/demo/group-rows/group-rows.component.ts b/src/app/demo/group-rows/group-rows.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import * as faker from 'faker';
+import { random, company, name } from 'faker';
 import { ConfigService } from './configuration.service';
 import { Columns } from 'ngx-easy-table';
 
@@ -34,16 +34,16 @@ export class GroupRowsComponent {
 
   private static generateData() {
     return Array(31).fill('').map((_, key) => ({
-      amount: faker.random.number(300),
+      amount: random.number(300),
       debit: 300,
-      company: faker.company.companyName(),
-      name: `${faker.name.firstName()} ${faker.name.lastName()}`,
+      company: company.companyName(),
+      name: `${name.firstName()} ${name.lastName()}`,
       isActive: key % 2 === 1,
     }));
   }
 
-  onChange(name): void {
-    this.groupBy = name;
+  onChange(groupBy: string): void {
+    this.groupBy = groupBy;
   }
 
   showCount(group, key: string) {
diff --git a/src/app/demo/horizontal-scroll/horizontal-scroll.component.ts b/src/app/demo/horizontal-scroll/horizontal-scroll.component.ts
@@ -1,5 +1,5 @@
 import { Component, NgZone, OnInit } from '@angular/core';
-import * as faker from 'faker';
+import { phone, company, random, name } from 'faker';
 import { ConfigService } from './configuration.service';
 import { Columns } from 'ngx-easy-table';
 
@@ -37,21 +37,21 @@ export class HorizontalScrollComponent implements OnInit {
   private static generateData() {
     return Array(20).fill('').map(() => {
       return {
-        phone: faker.phone.phoneNumberFormat(),
-        age: faker.random.number({ min: 15, max: 70 }).toString(),
-        company: faker.company.companyName(),
-        name: `${faker.name.firstName()} ${faker.name.lastName()}`,
-        isActive: faker.random.boolean(),
-        company2: faker.company.companyName(),
-        company3: faker.company.companyName(),
-        company4: faker.company.companyName(),
-        company5: faker.company.companyName(),
-        company6: faker.company.companyName(),
-        company7: faker.company.companyName(),
-        company8: faker.company.companyName(),
-        company9: faker.company.companyName(),
-        company10: faker.company.companyName(),
-        company11: faker.company.companyName(),
+        phone: phone.phoneNumberFormat(),
+        age: random.number({ min: 15, max: 70 }).toString(),
+        company: company.companyName(),
+        name: `${name.firstName()} ${name.lastName()}`,
+        isActive: random.boolean(),
+        company2: company.companyName(),
+        company3: company.companyName(),
+        company4: company.companyName(),
+        company5: company.companyName(),
+        company6: company.companyName(),
+        company7: company.companyName(),
+        company8: company.companyName(),
+        company9: company.companyName(),
+        company10: company.companyName(),
+        company11: company.companyName(),
       };
     });
   }
diff --git a/src/app/demo/pagination-range/pagination-range.component.ts b/src/app/demo/pagination-range/pagination-range.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import * as faker from 'faker';
+import { phone, random, company, name } from 'faker';
 import { ConfigService } from './configuration.service';
 import { Columns } from 'ngx-easy-table';
 
@@ -29,11 +29,11 @@ export class PaginationRangeComponent {
   private static generateData() {
     return Array(170).fill('').map(() => {
       return {
-        phone: faker.phone.phoneNumberFormat(),
-        age: faker.random.number({ min: 15, max: 70 }).toString(),
-        company: faker.company.companyName(),
-        name: `${faker.name.firstName()} ${faker.name.lastName()}`,
-        isActive: faker.random.boolean(),
+        phone: phone.phoneNumberFormat(),
+        age: random.number({ min: 15, max: 70 }).toString(),
+        company: company.companyName(),
+        name: `${name.firstName()} ${name.lastName()}`,
+        isActive: random.boolean(),
       };
     });
   }
diff --git a/src/app/demo/pinned/pinned.component.html b/src/app/demo/pinned/pinned.component.html
diff --git a/src/app/demo/pinned/pinned.component.ts b/src/app/demo/pinned/pinned.component.ts
diff --git a/src/assets/sample.scss b/src/assets/sample.scss
