Angular 4 Data Table Compile issue (/node_modules/angular-4-data-table/src/index.ts)

.gitignore

@@ -1,6 +1,6 @@
-/dist
 /tmp
 /node_modules
 /.idea
 /typings
-npm-debug.log
+npm-debug.log
+package-lock.json

README.md

@@ -1,6 +1,8 @@
-## Angular 2 Data Table
+## Angular 4 Data Table
 
-A simple Angular 2 data table, with built-in solutions for features including:
+This is fork of package [https://github.com/ggmod/angular-2-data-table] (https://github.com/ggmod/angular-2-data-table)
+
+A simple Angular 4 data table, with built-in solutions for features including:
 
 * pagination
 * sorting
@@ -13,11 +15,24 @@ The component can be used not just with local data, but remote resources too: fo
 
 The templates use bootstrap CSS class names, so the component requires a bootstrap .css file to be present in the application using it.
 
-Check out the [demo](https://ggmod.github.io/angular-2-data-table-demo) and its [code](https://github.com/ggmod/angular-2-data-table-demo) for examples of how to use it. 
+Check out the [demo](https://ggmod.github.io/angular-2-data-table-demo) and its [code](https://github.com/MIt9/angular-4-data-table-demo) for examples of how to use it. 
+
+Demo for pagination with seperate page numbers will be added soon
 
 ## Installing:
-`npm install angular-2-data-table --save`
+`npm install angular-4-data-table --save`
+
+## Production (Minification)
+Some times this can cause problems.  
+To fix it use import like this
+
+`import { DataTableModule } from 'angular-4-data-table';`
+
+and for production build use
 
+`ng build --prod --aot=false`
 
+ ### Added numerical pagination support with 2 next and previous links 
+
 #### Licensing
 MIT License

package.json

@@ -1,38 +1,42 @@
 {
-  "name": "angular-2-data-table",
-  "version": "0.1.2",
-  "description": "An Angular 2 data table, with pagination, sorting, expandable rows etc.",
+  "name": "angular-4-data-table",
+  "version": "0.4.6",
+  "description": "An Angular 4 data table, with pagination, sorting, expandable rows etc.",
   "keywords": [
     "angular",
-    "angular2",
-    "Angular 2",
+    "angular4",
+    "Angular 4",
     "ng2",
     "datatable",
     "data-table",
     "data table",
     "pagination"
   ],
-  "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
+  "main": "src/index.ts",
+  "typings": "src/index.ts",
   "scripts": {
-    "build": "rm -rf dist/* && tsc",
-    "serve": "rm -rf dist/ && tsc -w",
-    "prepublish": "npm run build"
   },
   "repository": {
     "type": "git",
-    "url": "git://git@github.com/ggmod/angular-2-data-table.git"
+    "url": "git+https://github.com/MIt9/angular-4-data-table.git"
   },
-  "peerDependencies": {
-    "@angular/core": "^2.0.0"
-  },
-  "author": "ggmod <ggmod64@gmail.com>",
+  "author": "Dmitrii Bilukha <siniidrozd@gmail.com> (http://donsamogon.com)",
   "license": "MIT",
-  "devDependencies": {
-    "@angular/common": "^2.0.0",
-    "@angular/core": "^2.0.0",
-    "@angular/forms": "^2.0.0",
-    "rxjs": "^5.0.0-beta.12",
-    "typescript": "^2.0.2"
-  }
+  "devDependencies": {},
+  "dependencies": {
+    "@angular/core": "^4.0.0",
+    "@angular/common": "^4.0.1",
+    "@angular/forms": "^4.0.1",
+    "@angular/platform-browser": "^4.0.1",
+    "@types/node": "~6.0.60",
+    "rxjs": "^5.1.0",
+    "ts-node": "~2.0.0",
+    "typescript": "2.1.5",
+    "zone.js": "^0.8.12"
+  },
+  "false": {},
+  "bugs": {
+    "url": "https://github.com/MIt9/angular-4-data-table/issues"
+  },
+  "homepage": "https://github.com/MIt9/angular-4-data-table#readme"
 }

src/components/column.component.ts

@@ -1,6 +1,6 @@
 import { Directive, Input, ContentChild, OnInit } from '@angular/core';
 import { DataTableRow } from './row.component';
-import { CellCallback } from './types';
+import { CellCallback } from '../types/cell-callback.type';
 
 
 @Directive({

src/components/header.component.ts

@@ -5,6 +5,7 @@ import { HEADER_STYLE } from "./header.style";
 
 
 @Component({
+  moduleId: module.id +'',
   selector: 'data-table-header',
   template: HEADER_TEMPLATE,
   styles: [HEADER_STYLE],

src/components/header.template.ts

@@ -3,11 +3,13 @@ export const HEADER_TEMPLATE = `
     <h4 class="title" [textContent]="dataTable.headerTitle"></h4>
     <div class="button-panel">
         <button type="button" class="btn btn-default btn-sm refresh-button"
-            (click)="dataTable.reloadItems()">
+            (click)="dataTable.reloadItems()" 
+            [attr.aria-label]="dataTable.translations.headerReload" [title]="dataTable.translations.headerReload">
             <span class="glyphicon glyphicon-refresh"></span>
         </button>
         <button type="button" class="btn btn-default btn-sm column-selector-button" [class.active]="columnSelectorOpen"
-            (click)="columnSelectorOpen = !columnSelectorOpen; $event.stopPropagation()" >
+            (click)="columnSelectorOpen = !columnSelectorOpen; $event.stopPropagation()" 
+            [attr.aria-label]="dataTable.translations.headerColumnSelector" [title]="dataTable.translations.headerColumnSelector">
             <span class="glyphicon glyphicon-list"></span>
         </button>
         <div class="column-selector-wrapper" (click)="$event.stopPropagation()">
@@ -40,4 +42,4 @@ export const HEADER_TEMPLATE = `
         </div>
     </div>
 </div>
-`;
+`;

src/components/pagination.component.ts

@@ -1,17 +1,24 @@
-import { Component, Inject, forwardRef } from '@angular/core';
-import { DataTable } from './table.component';
-import { PAGINATION_TEMPLATE } from './pagination.template';
-import { PAGINATION_STYLE } from "./pagination.style";
+import {Component, Inject, forwardRef, Input} from '@angular/core';
+import {DataTable} from './table.component';
+import {PAGINATION_TEMPLATE} from './pagination.template';
+import {PAGINATION_STYLE} from "./pagination.style";
 
 
 @Component({
-  selector: 'data-table-pagination',
-  template: PAGINATION_TEMPLATE,
-  styles: [PAGINATION_STYLE]
+    moduleId: module.id +'',
+    selector: 'data-table-pagination',
+    template: PAGINATION_TEMPLATE,
+    styles: [PAGINATION_STYLE]
 })
 export class DataTablePagination {
 
-    constructor(@Inject(forwardRef(() => DataTable)) public dataTable: DataTable) {}
+    @Input() show_range = false;
+    @Input() show_limit = false;
+    @Input() show_input = false;
+    @Input() show_numbers = true;
+
+    constructor(@Inject(forwardRef(() => DataTable)) public dataTable: DataTable) {
+    }
 
     pageBack() {
         this.dataTable.offset -= Math.min(this.dataTable.limit, this.dataTable.offset);
@@ -48,4 +55,29 @@ export class DataTablePagination {
     set page(value) {
         this.dataTable.page = Number(<any>value);
     }
+
+    createPageRange(number, page): any[] {
+        const displayedPage = 3;
+        let items: number[] = [];
+        if (number > 1) {
+            let maxPage = number;
+            let minPage = 1;
+            if (page === 1 && maxPage >= displayedPage) {
+                maxPage = 3;
+            } else if (page > 1 && maxPage > page + 1) {
+                minPage = page - 1;
+                maxPage = page + 1;
+            } else if (page > 2 && maxPage > page) {
+                minPage = page - 1;
+                maxPage = page + 1;
+            } else  if (page > 2 && maxPage === page) {
+                minPage = page - 2;
+                maxPage = page;
+            }
+            for (let i = minPage; i <= maxPage; i++) {
+                items.push(i);
+            }
+        }
+        return items;
+    }
 }

src/components/pagination.style.ts

@@ -2,6 +2,8 @@ export const PAGINATION_STYLE = `
 .pagination-box {
     position: relative;
     margin-top: -10px;
+    display: block;
+    height: 30px;
 }
 .pagination-range {
     margin-top: 7px;
@@ -21,12 +23,13 @@ export const PAGINATION_STYLE = `
     margin-right: 25px;
     display: inline-table;
     width: 150px;
+    float: left;
 }
 .pagination-pages {
     display: inline-block;
 }
 .pagination-page {
-    width: 110px;
+    width: 102px;
     display: inline-table;
 }
 .pagination-box button {

src/components/pagination.template.ts

@@ -1,6 +1,6 @@
 export const PAGINATION_TEMPLATE = `
 <div class="pagination-box">
-    <div class="pagination-range">
+    <div class="pagination-range" *ngIf="show_range">
         {{dataTable.translations.paginationRange}}:
         <span [textContent]="dataTable.offset + 1"></span>
         -
@@ -9,18 +9,18 @@ export const PAGINATION_TEMPLATE = `
         <span [textContent]="dataTable.itemCount"></span>
     </div>
     <div class="pagination-controllers">
-        <div class="pagination-limit">
+        <div class="pagination-limit" *ngIf="show_limit">
             <div class="input-group">
                 <span class="input-group-addon">{{dataTable.translations.paginationLimit}}:</span>
                 <input #limitInput type="number" class="form-control" min="1" step="1"
                        [ngModel]="limit" (blur)="limit = limitInput.value"
                        (keyup.enter)="limit = limitInput.value" (keyup.esc)="limitInput.value = limit"/>
             </div>
         </div>
-        <div class=" pagination-pages">
+        <div class=" pagination-pages"  *ngIf="maxPage > 1">
             <button [disabled]="dataTable.offset <= 0" (click)="pageFirst()" class="btn btn-default pagination-firstpage">&laquo;</button>
             <button [disabled]="dataTable.offset <= 0" (click)="pageBack()" class="btn btn-default pagination-prevpage">&lsaquo;</button>
-            <div class="pagination-page">
+            <div class="pagination-page" *ngIf="show_input">
                 <div class="input-group">
                     <input #pageInput type="number" class="form-control" min="1" step="1" max="{{maxPage}}"
                            [ngModel]="page" (blur)="page = pageInput.value"
@@ -31,6 +31,12 @@ export const PAGINATION_TEMPLATE = `
                     </div>
                 </div>
             </div>
+            <div class="pagination-page" *ngIf="show_numbers">
+                <button *ngFor="let i of createPageRange(maxPage,page)"
+                    [disabled]="i == page"
+                    (click)="page = i"
+                    class="btn btn-default">{{ i }}</button>
+            </div>
             <button [disabled]="(dataTable.offset + dataTable.limit) >= dataTable.itemCount" (click)="pageForward()" class="btn btn-default pagination-nextpage">&rsaquo;</button>
             <button [disabled]="(dataTable.offset + dataTable.limit) >= dataTable.itemCount" (click)="pageLast()" class="btn btn-default pagination-lastpage">&raquo;</button>
         </div>

src/components/row.component.ts

@@ -7,6 +7,7 @@ import { ROW_STYLE } from "./row.style";
 
 
 @Component({
+    moduleId: module.id +'',
     selector: '[dataTableRow]',
     template: ROW_TEMPLATE,
     styles: [ROW_STYLE]
@@ -56,5 +57,5 @@ export class DataTableRow implements OnDestroy {
         this.selected = false;
     }
 
-    private _this = this; // FIXME is there no template keyword for this in angular 2?
+    public _this = this; // FIXME is there no template keyword for this in angular 2?
 }

src/components/row.template.ts

@@ -9,9 +9,11 @@ export const ROW_TEMPLATE = `
     (dblclick)="dataTable.rowDoubleClicked(_this, $event)"
     (click)="dataTable.rowClicked(_this, $event)"
     >
-    <td [hide]="!dataTable.expandColumnVisible" (click)="expanded = !expanded; $event.stopPropagation()" class="row-expand-button">
-        <span class="glyphicon glyphicon-triangle-right" [hide]="expanded"></span>
-        <span class="glyphicon glyphicon-triangle-bottom" [hide]="!expanded"></span>
+    <td [hide]="!dataTable.expandColumnVisible">
+        <div tabindex="0" role="button" (click)="expanded = !expanded; $event.stopPropagation()" class="row-expand-button"
+            [attr.aria-expanded]="expanded" [title]="dataTable.translations.expandRow" [attr.aria-label]="dataTable.translations.expandRow">
+            <span class="glyphicon" [ngClass]="{'glyphicon-triangle-right': !expanded, 'glyphicon-triangle-bottom': expanded}" aria-hidden="true"></span>
+        </div>
     </td>
     <td [hide]="!dataTable.indexColumnVisible" class="index-column" [textContent]="displayIndex"></td>
     <td [hide]="!dataTable.selectColumnVisible" class="select-column">
@@ -28,4 +30,4 @@ export const ROW_TEMPLATE = `
         <div [ngTemplateOutlet]="dataTable.expandTemplate" [ngOutletContext]="{row: _this, item: item}"></div>
     </td>
 </tr>
-`;
+`;