feat: add a table module

package-lock.json

@@ -335,6 +335,11 @@
       "integrity": "sha512-HAXgAIuuAGjiIKohGlRUkmUTWYtNmclR12KHlQQxT9pHFdEb2OrpHjUp2YoV32jiU6jIZm4pf3ODwlPA0VbwnA==",
       "dev": true
     },
+    "@swimlane/ngx-datatable": {
+      "version": "11.1.7",
+      "resolved": "https://registry.npmjs.org/@swimlane/ngx-datatable/-/ngx-datatable-11.1.7.tgz",
+      "integrity": "sha512-TMDN26Q4J+Sh+OPqAx8BK5Q/3hAAmcTAUQ9wvC9nboSOAmYUaHGz8t21yGdeUtRtunIfMpjTnwLa+X2Pfoq42w=="
+    },
     "@types/jasmine": {
       "version": "2.8.4",
       "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.8.4.tgz",

package.json

@@ -23,6 +23,7 @@
     "@angular/platform-browser": "5.2.0",
     "@angular/platform-browser-dynamic": "5.2.0",
     "@angular/router": "5.2.0",
+    "@swimlane/ngx-datatable": "^11.1.7",
     "animate.css": "^3.5.2",
     "body-parser": "^1.18.2",
     "bootstrap": "^4.0.0-beta.3",

proxy.conf.json

 {
   "/api": {
-    "target": "http://127.0.0.1:5000",
+    "target": "http://127.0.0.1:8088",
     "secure": false
   },
   "/socket.io/": {

src/app/app.module.ts

@@ -49,10 +49,12 @@ import {MonitorPageComponent} from './monitor-page/monitor-page.component';
 import {LinuxComponent} from './monitor-page/linux/linux.component';
 import {WindowsComponent} from './monitor-page/windows/windows.component';
 import {NgProgressModule} from 'ngx-progressbar';
-import {TestPageComponent, TestPageComponentDialog} from './test-page/test-page.component';
+import {TestPageComponent} from './test-page/test-page.component';
 import {BlankPageComponent} from './blank-page/blank-page.component';
 import {MaterialModule} from './MaterialModule.component';
 import {CookieService} from 'ngx-cookie-service';
+import {NgxDatatableModule} from '@swimlane/ngx-datatable';
+import {ElementTableComponent} from './elements/table/table.component';
 
 @NgModule({
   imports: [
@@ -65,7 +67,7 @@ import {CookieService} from 'ngx-cookie-service';
     ReactiveFormsModule,
     MaterialModule,
     LoggerModule.forRoot({serverLoggingUrl: '/api/logs', level: NgxLoggerLevel.DEBUG, serverLogLevel: NgxLoggerLevel.ERROR}),
-    // NgxLayerModule
+    NgxDatatableModule
   ],
   declarations: [
     AppComponent,
@@ -96,12 +98,12 @@ import {CookieService} from 'ngx-cookie-service';
     MonitorPageComponent,
     LinuxComponent,
     WindowsComponent,
-    TestPageComponent, TestPageComponentDialog,
+    TestPageComponent,
     BlankPageComponent,
+    ElementTableComponent,
   ],
   entryComponents: [
     CleftbarDialogComponent,
-    TestPageComponentDialog
   ],
   bootstrap: [AppComponent],
   providers: [

src/app/elements/table/table.component.html

+<div>
+  <input
+    type='text'
+    placeholder='Type to filter the name column...'
+    (keyup)='updateFilter($event)'
+    *ngIf="config.search"/>
+  <ngx-datatable
+    #table
+    class="material"
+    [rows]="rows"
+    [columns]="columns"
+    [limit]="config.limit"
+    [columnMode]="config.columnMode"
+    [headerHeight]="config.headerHeight"
+    [footerHeight]="config.footerHeight"
+    [rowHeight]="config.rowHeight"
+    [scrollbarV]="config.scrollbarV"
+    [scrollbarH]="config.scrollbarH"
+  ></ngx-datatable>
+</div>

src/app/elements/table/table.component.scss

+input {
+  padding: 8px;
+  margin: 15px auto;
+  width: 30%;
+}

src/app/elements/table/table.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ElementTableComponent } from './table.component';
+
+describe('ElementTableComponent', () => {
+  let component: ElementTableComponent;
+  let fixture: ComponentFixture<ElementTableComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ElementTableComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ElementTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/elements/table/table.component.ts

+import {Component, Input, OnInit, ViewChild} from '@angular/core';
+import {DatatableComponent} from '@swimlane/ngx-datatable';
+
+export let Config: {
+  search: boolean,
+  scrollbarV: boolean,
+  scrollbarH: boolean,
+  rowHeight: number,
+  footerHeight: number,
+  headerHeight: number,
+  limit: number,
+  columnMode: string,
+} = {
+  search: false,
+  scrollbarV: false,
+  scrollbarH: false,
+  rowHeight: 50,
+  footerHeight: 0,
+  headerHeight: 50,
+  limit: 10,
+  columnMode: 'force',
+};
+
+@Component({
+  selector: 'app-element-table',
+  templateUrl: './table.component.html',
+  styleUrls: ['./table.component.scss']
+})
+export class ElementTableComponent implements OnInit {
+  @Input() rows: Array<any>;
+  @Input() columns: Array<any>;
+  @Input() config: any;
+  temp = [];
+  @ViewChild(DatatableComponent) table: DatatableComponent;
+
+
+  constructor() {
+
+  }
+
+  ngOnInit() {
+    Config = this.config;
+  }
+
+  updateFilter(event) {
+    const val = event.target.value.toLowerCase();
+
+    // filter our data
+    const temp = this.temp.filter(function (d) {
+      return d.name.toLowerCase().indexOf(val) !== -1 || !val;
+    });
+
+    // update the rows
+    this.rows = temp;
+    // Whenever the filter changes, always go back to the first page
+    this.table.offset = 0;
+  }
+
+}

src/app/elements/term/term.component.ts

@@ -76,7 +76,6 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
     }
     if (this.token) {
       TermWS.emit('token', {'token': this.token, 'secret': this.secret});
-      console.log(this.token);
     }
     if (this.monitor) {
       TermWS.emit('monitor', {'token': this.monitor, 'secret': this.secret});

src/app/test-page/test-page.component.html

-<mat-checkbox>Check me!</mat-checkbox>
-<button mat-raised-button (click)="openDialog()">Pick one</button>
+<app-element-table
+  [rows]="rows"
+  [columns]="columns"
+  [config]="config"
+></app-element-table>

src/app/test-page/test-page.component.ts

-import {Component, Inject, OnInit} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {DataStore} from '../globals';
-import {DialogService} from '../elements/dialog/dialog.service';
-import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
+import {Config} from '../elements/table/table.component';
 
 // import {Mats, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
 
@@ -11,41 +10,25 @@ import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
   styleUrls: ['./test-page.component.scss']
 })
 export class TestPageComponent implements OnInit {
-  name: string;
-
-  constructor(private _dialog: MatDialog) {
+  rows = [
+    {name: 'Austin', gender: 'Male', company: 'Swimlane'},
+    {name: 'Dany', gender: 'Male', company: 'KFC'},
+    {name: 'Molly', gender: 'Female', company: 'Burger King'},
+  ];
+  columns = [
+    {prop: 'name'},
+    {name: 'Gender'},
+    {name: 'Company'}
+  ];
+  config = Config;
+
+  constructor() {
     DataStore.NavShow = false;
+    this.config.search = true;
+    this.config.scrollbarH = true;
   }
 
   ngOnInit() {
-    this.name = 'ssss';
-  }
-
-  openDialog(): void {
-    const dialogRef = this._dialog.open(TestPageComponentDialog, {
-      width: '251px',
-      data: {name: this.name}
-    });
-
-    dialogRef.afterClosed().subscribe(result => {
-      console.log('The dialog was closed', result);
-      // this.animal = result;
-    });
-  }
-}
-
-
-@Component({
-  selector: 'app-test-page-dialog',
-  templateUrl: 'dialog.html',
-})
-export class TestPageComponentDialog {
-  constructor(public dialogRef: MatDialogRef<TestPageComponentDialog>,
-              @Inject(MAT_DIALOG_DATA) public data: any) {
-  }
-
-  onNoClick(): void {
-    this.dialogRef.close();
   }
 
 }

src/sass/style.scss

@@ -67,6 +67,8 @@ $asset-path: '../static/imgs/inspinia';
   }
 }
 
-
-
 @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
+
+@import '~@swimlane/ngx-datatable/release/index.css';
+@import '~@swimlane/ngx-datatable/release/themes/material.css';
+@import '~@swimlane/ngx-datatable/release/assets/icons.css';