feat(smarttable): table setup

package.json

@@ -40,7 +40,7 @@
     "ng2-bootstrap": "^1.0.20",
     "ng2-branchy": "^0.0.2-5",
     "ng2-ckeditor": "^1.0.4",
-    "ng2-smart-table": "0.0.4",
+    "ng2-smart-table": "^0.1.3",
     "ng2-uploader": "0.5.6",
     "normalize.css": "^4.1.1",
     "rxjs": "5.0.0-beta.6",

src/app/pages/tables/components/smartTables/smartTables.component.ts

@@ -1,9 +1,9 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
-import {BasicTablesService} from './basicTables.service';
 import {BaCard} from '../../../../theme/components';
 
 import {NG2_SMART_TABLE_DIRECTIVES, LocalDataSource} from 'ng2-smart-table';
+import { SmartTablesService } from './smartTables.service';
 
 @Component({
   selector: 'basic-tables',
@@ -11,24 +11,57 @@ import {NG2_SMART_TABLE_DIRECTIVES, LocalDataSource} from 'ng2-smart-table';
   directives: [BaCard, NG2_SMART_TABLE_DIRECTIVES],
   styles: [require('./smartTables.scss')],
   template: require('./smartTables.html'),
-  providers: [BasicTablesService]
+  providers: [SmartTablesService]
 })
 export class SmartTables {
 
   settings = {
-    attr: {
-      class: 'table'
+    add: {
+      addButtonContent: '<i class="ion-ios-plus-outline"></i>',
+      createButtonContent: '<i class="ion-checkmark"></i>',
+      cancelButtonContent: '<i class="ion-close"></i>',
+    },
+    edit: {
+      editButtonContent: '<i class="ion-edit"></i>',
+      saveButtonContent: '<i class="ion-checkmark"></i>',
+      cancelButtonContent: '<i class="ion-close"></i>',
+    },
+    delete: {
+      deleteButtonContent: '<i class="ion-trash-a"></i>',
     },
     columns: {
       id: {
         title: 'ID',
         type: 'number'
       },
-      name: {
-        title: 'Product Name',
+      firstName: {
+        title: 'First Name',
         type: 'string'
+      },
+      lastName: {
+        title: 'Last Name',
+        type: 'string'
+      },
+      username: {
+        title: 'Username',
+        type: 'string'
+      },
+      email: {
+        title: 'E-mail',
+        type: 'string'
+      },
+      age: {
+        title: 'Age',
+        type: 'number'
       }
     }
   };
+
   source: LocalDataSource = new LocalDataSource();
+
+  constructor(protected service: SmartTablesService) {
+    this.service.getData().then((data) => {
+      this.source.load(data);
+    });
+  }
 }

src/app/pages/tables/components/smartTables/smartTables.scss

@@ -0,0 +1,55 @@
+@import "../../../../theme/sass/conf/conf";
+
+.ng2-smart-table-container table.ng2-smart-table {
+  th, td {
+    border: 1px solid $border;
+  }
+
+  color: $default-text;
+
+  a.ng2-smart-sort-link {
+    font-size: 14px !important;
+    color: $default-text;
+    font-weight: $font-bold;
+    &.sort {
+      font-weight: $font-bold !important;
+    }
+  }
+
+  .ng2-smart-actions {
+    width: 70px;
+    text-align: center;
+    .actions {
+      float: none;
+      text-align: center;
+      a + a {
+        padding-left: 10px;
+      }
+    }
+  }
+
+  a.ng2-smart-action {
+    font-size: 14px !important;
+    color: $default-text;
+
+    &.ng2-smart-action-add-add {
+      font-size: 25px !important;
+    }
+  }
+}
+
+nav.ng2-smart-pagination-nav {
+  display: flex;
+  justify-content: center;
+}
+
+.ng2-smart-pagination {
+  .ng2-smart-page-item.active .ng2-smart-page-link {
+    background-color: $primary;
+    border-color: $default-text;
+    &:active, &:hover {
+      background-color: $primary;
+      border-color: $default-text;
+    }
+  }
+}

src/app/pages/tables/components/smartTables/smartTables.service.ts

@@ -1,9 +1,7 @@
 import {Injectable} from '@angular/core';
 
 @Injectable()
-export class BasicTablesService {
-
-  smartTablePageSize = 10;
+export class SmartTablesService {
 
   smartTableData = [
     {
@@ -488,56 +486,6 @@ export class BasicTablesService {
     }
   ];
 
-  editableTableData:Array<any>;
-
-  peopleTableData = [
-    {
-      id: 1,
-      firstName: 'Mark',
-      lastName: 'Otto',
-      username: '@mdo',
-      email: 'mdo@gmail.com',
-      age: '28',
-      status: 'info'
-    },
-    {
-      id: 2,
-      firstName: 'Jacob',
-      lastName: 'Thornton',
-      username: '@fat',
-      email: 'fat@yandex.ru',
-      age: '45',
-      status: 'primary'
-    },
-    {
-      id: 3,
-      firstName: 'Larry',
-      lastName: 'Bird',
-      username: '@twitter',
-      email: 'twitter@outlook.com',
-      age: '18',
-      status: 'success'
-    },
-    {
-      id: 4,
-      firstName: 'John',
-      lastName: 'Snow',
-      username: '@snow',
-      email: 'snow@gmail.com',
-      age: '20',
-      status: 'danger'
-    },
-    {
-      id: 5,
-      firstName: 'Jack',
-      lastName: 'Sparrow',
-      username: '@jack',
-      email: 'jack@yandex.ru',
-      age: '30',
-      status: 'warning'
-    }
-  ];
-
   metricsTableData = [
     {
       image: 'app/browsers/chrome.svg',
@@ -591,82 +539,11 @@ export class BasicTablesService {
     }
   ];
 
-  users = [
-    {
-      "id": 1,
-      "name": "Esther Vang",
-      "status": 4,
-      "group": 3
-    },
-    {
-      "id": 2,
-      "name": "Leah Freeman",
-      "status": 3,
-      "group": 1
-    },
-    {
-      "id": 3,
-      "name": "Mathews Simpson",
-      "status": 3,
-      "group": 2
-    },
-    {
-      "id": 4,
-      "name": "Buckley Hopkins",
-      "group": 4
-    },
-    {
-      "id": 5,
-      "name": "Buckley Schwartz",
-      "status": 1,
-      "group": 1
-    },
-    {
-      "id": 6,
-      "name": "Mathews Hopkins",
-      "status": 4,
-      "group": 2
-    },
-    {
-      "id": 7,
-      "name": "Leah Vang",
-      "status": 4,
-      "group": 1
-    },
-    {
-      "id": 8,
-      "name": "Vang Schwartz",
-      "status": 4,
-      "group": 2
-    },
-    {
-      "id": 9,
-      "name": "Hopkin Esther",
-      "status": 1,
-      "group": 2
-    },
-    {
-      "id": 10,
-      "name": "Mathews Schwartz",
-      "status": 1,
-      "group": 3
-    }
-  ];
-
-  statuses = [
-    {value: 1, text: 'Good'},
-    {value: 2, text: 'Awesome'},
-    {value: 3, text: 'Excellent'},
-  ];
-
-  groups = [
-    {id: 1, text: 'user'},
-    {id: 2, text: 'customer'},
-    {id: 3, text: 'vip'},
-    {id: 4, text: 'admin'}
-  ];
-
-  constructor() {
-    this.editableTableData = this.smartTableData.slice(0, 36);
+  getData(): Promise<any> {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        resolve(this.smartTableData);
+      }, 2000);
+    });
   }
 }