Merge pull request #122 from ssuperczynski/loading-spinner

Loading spinner

Author: ssuperczynski

.travis.yml

@@ -2,12 +2,14 @@ language: node_js
 node_js:
   - "8"
 script:
+  - npm run lint
   - npm run e2e
+  - npm run build:lib
 before_install:
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
 before_script:
-  - npm install && npm run build:lib
+  - npm install
 notifications:
   webhooks: https://www.travisbuddy.com/
   email: false

e2e/app.po.ts

@@ -45,7 +45,14 @@ export class AppPage {
   async searchByName(name: string) {
     return await element
       .all(by.css('input[type=text]'))
-      .get(4)
+      .get(5)
+      .sendKeys(name);
+  }
+
+  async searchByAddress(name: string) {
+    return await element
+      .all(by.css('input[type=text]'))
+      .get(3)
       .sendKeys(name);
   }
 

e2e/pagination.e2e-spec.ts

@@ -12,29 +12,32 @@ describe('table pagination', () => {
     const table = await data.getText();
     expect(table.length).toEqual(10);
     const row = await data.get(0).getText();
-    expect(row).toEqual('+1 (882) 527-2652\n' +
-      '25\n' +
-      'GYNKO\n' +
-      'Gordon Rutledge\n' +
-      'false');
+    expect(row).toEqual('+1 (949) 527-2108\n' +
+      '36\n' +
+      'Some street\n' +
+      'KONGENE\n' +
+      'Deanne Contreras\n' +
+      'true');
   });
   it('should pagination NEXT button show next 10 elements', async () => {
     await page.clickPaginationNext();
     const row = await data.get(0).getText();
     expect(row).toEqual('+1 (902) 500-3665\n' +
       '28\n' +
+      'Southeast street\n' +
       'CALCULA\n' +
       'Wilson Hatfield\n' +
       'true');
   });
   it('should pagination PREV button show previous 10 elements', async () => {
     await page.clickPaginationPrev();
     const row = await data.get(0).getText();
-    expect(row).toEqual('+1 (882) 527-2652\n' +
-      '25\n' +
-      'GYNKO\n' +
-      'Gordon Rutledge\n' +
-      'false');
+    expect(row).toEqual('+1 (949) 527-2108\n' +
+      '36\n' +
+      'Some street\n' +
+      'KONGENE\n' +
+      'Deanne Contreras\n' +
+      'true');
   });
   it('should display 10 rows from 2 page, when pagination "2" clicked', async () => {
     await page.clickPagination2nd();
@@ -43,6 +46,7 @@ describe('table pagination', () => {
     const row = await data.get(0).getText();
     expect(row).toEqual('+1 (902) 500-3665\n' +
       '28\n' +
+      'Southeast street\n' +
       'CALCULA\n' +
       'Wilson Hatfield\n' +
       'true');

e2e/search.e2e-spec.ts

@@ -13,17 +13,29 @@ describe('table search', () => {
     const row = await data.getText();
     expect(row).toEqual('+1 (949) 527-2108\n' +
       '36\n' +
+      'Some street\n' +
       'KONGENE\n' +
       'Deanne Contreras\n' +
-      'false');
+      'true');
   });
   it('should find 1 row when filtering by name', async () => {
     await page.searchByName('Scott Barker');
     const row = await data.getText();
     expect(row).toEqual('+1 (939) 530-3189\n' +
       '34\n' +
+      'Dacota street\n' +
       'MARKETOID\n' +
       'Scott Barker\n' +
-      'false');
+      'true');
+  });
+  it('should find 1 row when filtering by address street which is nested object property', async () => {
+    await page.searchByAddress('Dacota');
+    const row = await data.getText();
+    expect(row).toEqual('+1 (939) 530-3189\n' +
+      '34\n' +
+      'Dacota street\n' +
+      'MARKETOID\n' +
+      'Scott Barker\n' +
+      'true');
   });
 });

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-easy-table",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Angular easy table",
   "typings": "index.ts",
   "repository": "https://github.com/ssuperczynski/ngx-easy-table.git",

package.json

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ConfigService } from './app.service';
 import { data } from '../assets/data';
+import { Columns } from './ngx-easy-table/model/columns';
 
 @Component({
   selector: 'app-table',
@@ -11,20 +12,20 @@ import { data } from '../assets/data';
 export class AppComponent implements OnInit {
   configuration;
   data;
-  columns;
+  columns: Columns[];
 
   constructor() {
   }
 
   ngOnInit() {
     this.configuration = ConfigService.config;
     this.columns = [
-      { key: 'phone', title: 'phone' },
-      { key: 'age', title: 'age' },
-      { key: 'address.street', title: 'Address' },
-      { key: 'company', title: 'company' },
-      { key: 'name', title: 'name' },
-      { key: 'isActive', title: 'isActive' },
+      { key: 'phone', title: 'phone', placeholder: 'Search phone', width: '15%' },
+      { key: 'age', title: 'age', placeholder: 'Search age', width: '10%' },
+      { key: 'address.street', title: 'Address', placeholder: 'Search street', width: '25%' },
+      { key: 'company', title: 'company', placeholder: 'Search company', width: '20%' },
+      { key: 'name', title: 'name', placeholder: 'Search name', width: '20%' },
+      { key: 'isActive', title: 'isActive', placeholder: 'Search status', width: '10%' },
     ];
     this.data = data;
   }

src/app/app.component.ts

@@ -24,5 +24,6 @@ export class ConfigService {
     collapseAllRows: false,
     checkboxes: false,
     resizeColumn: false,
+    fixedColumnWidth: false,
   };
 }

src/app/app.service.ts

@@ -1,21 +1,23 @@
 * {
   font-family: Verdana, serif;
 }
-
 .ngx-table__table-row--selected {
   background: #9cbff9 !important;
 }
-
 .ngx-table__table-col--selected {
   background: #9cbff9 !important;
 }
-
 .ngx-table__table-cell--selected {
   background: #9cbff9 !important;
 }
 .ngx-table__table-no-results {
   text-align: center;
 }
+.ngx-table__table-loader-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 .ngx-table__table-loader {
   border: 4px solid #f3f3f3;
   border-top: 4px solid #3498db;
@@ -26,11 +28,9 @@
   margin-right: auto;
   animation: spin 1s linear infinite;
 }
-
 .ngx-table__header-cell {
   position: relative;
 }
-
 .ngx-table__column-resizer {
   background-color: #f3f3f3;
   cursor: col-resize;
@@ -43,7 +43,6 @@
   top: 0;
   width: 3px;
 }
-
 @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }

src/app/ngx-easy-table/components/base/base.component.css

@@ -9,7 +9,7 @@
     </div>
   </div>
   <div class="ngx-columns">
-    <table class="ngx-table ngx-table-striped ngx-table-hover">
+    <table id="table" class="ngx-table ngx-table-striped ngx-table-hover">
       <thead>
       <tr class="ngx-table__header" *ngIf="config.headerEnabled">
         <th *ngIf="config.checkboxes">
@@ -21,7 +21,9 @@
           </div>
         </th>
         <ng-container *ngFor="let column of columns">
-          <th class="ngx-table__header-cell" #th
+          <th class="ngx-table__header-cell"
+              #th
+              [attr.width]="getColumnWidth(column)"
               (mousedown)="onMouseDown($event, th)"
               (mouseup)="onMouseUp($event)"
               (mousemove)="onMouseMove($event)">
@@ -68,7 +70,7 @@
         <th *ngIf="config.additionalActions || config.detailsTemplate"></th>
       </tr>
       </thead>
-      <tbody *ngIf="data && !config.isLoading">
+      <tbody *ngIf="data && !isLoading">
       <ng-container *ngIf="rowTemplate">
         <ng-container *ngFor="let row of data | sort:sortBy | search:term | global:globalSearchTerm | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id };
               let rowIndex = index">
@@ -177,10 +179,13 @@
         </td>
       </tr>
       </tbody>
-      <tbody *ngIf="config.isLoading">
+      <tbody *ngIf="isLoading">
       <tr class="ngx-table__body-loading">
         <td [attr.colspan]="columns.length + 1">
-          <div class="ngx-table__table-loader"></div>
+          <div [style.height]="loadingHeight"
+               class="ngx-table__table-loader-wrapper">
+            <div class="ngx-table__table-loader"></div>
+          </div>
         </td>
       </tr>
       </tbody>

src/app/ngx-easy-table/components/base/base.component.html

@@ -21,6 +21,7 @@ import { Config } from '../../model/config';
 import { flatMap, groupBy, reduce } from 'rxjs/operators';
 import { from } from 'rxjs';
 import { FiltersService } from '../../services/filters.service';
+import { Columns } from '../../model/columns';
 
 @Component({
   selector: 'ngx-table',
@@ -49,12 +50,13 @@ export class BaseComponent implements OnInit, OnChanges, AfterViewInit {
   id;
   th = undefined;
   startOffset;
+  loadingHeight = '30px';
   @Input() configuration: Config;
   @Input() data: Array<Object>;
   @Input() pagination;
   @Input() groupRowsBy;
   @Input() detailsTemplate;
-  @Input() columns: Array<string>;
+  @Input() columns: Columns[];
   @Output() event = new EventEmitter();
   @ContentChild(TemplateRef) public rowTemplate: TemplateRef<any>;
 
@@ -251,4 +253,27 @@ export class BaseComponent implements OnInit, OnChanges, AfterViewInit {
 
     return FiltersService.getPath(split, row);
   }
+
+  get isLoading(): boolean {
+    const rows = document.getElementById('table')['rows'];
+    if (rows.length > 3) {
+      this.getLoadingHeight(rows);
+    }
+    return this.config.isLoading;
+  }
+
+  getLoadingHeight(rows: any): void {
+    const searchEnabled = this.configuration.searchEnabled ? 1 : 0;
+    const headerEnabled = this.configuration.headerEnabled ? 1 : 0;
+    const borderTrHeight = 1;
+    const borderDivHeight = 2;
+    this.loadingHeight = (rows.length - searchEnabled - headerEnabled) * (rows[3].offsetHeight - borderTrHeight) - borderDivHeight + 'px';
+  }
+
+  getColumnWidth(column: any): string {
+    if (column.width) {
+      return column.width;
+    }
+    return this.config.fixedColumnWidth ? 100 / this.columns.length + '%' : null;
+  }
 }

src/app/ngx-easy-table/components/base/base.component.ts

@@ -7,12 +7,12 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
       <input type="text"
              id="search_{{ column['key'] }}"
              aria-label="Search"
-             placeholder="Search {{ column['title'] }}"
+             placeholder="{{ column['placeholder'] ? column['placeholder'] : column['title'] }}"
              class="ngx-table__header-search ngx-form-input ngx-input-sm"
              #input
              (input)="update.emit({value: input.value, key: column['key']})"
       >
-    </label>`
+    </label>`,
 })
 
 export class HeaderComponent {

src/app/ngx-easy-table/components/header/header.component.ts

@@ -0,0 +1,6 @@
+export interface Columns {
+  key: string;
+  title: string;
+  placeholder: string;
+  width: string;
+}

src/app/ngx-easy-table/model/columns.ts

@@ -19,4 +19,5 @@ export interface Config {
   collapseAllRows: boolean;
   checkboxes: boolean;
   resizeColumn: boolean;
+  fixedColumnWidth: boolean;
 }

src/app/ngx-easy-table/model/config.ts

@@ -24,5 +24,6 @@ export class ConfigService {
     collapseAllRows: false,
     checkboxes: true,
     resizeColumn: true,
+    fixedColumnWidth: false,
   };
 }

src/app/ngx-easy-table/services/config-service.ts

@@ -5,7 +5,7 @@ export const data = [
     address: { street: 'Some street', number: 12 },
     company: 'KONGENE',
     name: 'Deanne Contreras',
-    isActive: false,
+    isActive: true,
   }, {
     phone: '+1 (878) 515-3653',
     age: 32,
@@ -89,7 +89,7 @@ export const data = [
     address: { street: 'Dacota street', number: 12 },
     company: 'MARKETOID',
     name: 'Scott Barker',
-    isActive: false,
+    isActive: true,
   }, {
     phone: '+1 (949) 600-2827',
     age: 29,