feat(tables): add a tables module

package.json

@@ -53,6 +53,7 @@
     "leaflet": "1.0.3",
     "ng2-charts": "1.5.0",
     "ng2-ckeditor": "1.1.6",
+    "ng2-smart-table": "1.1.0",
     "ng2-tree": "2.0.0-alpha.5",
     "normalize.css": "6.0.0",
     "roboto-fontface": "0.7.0",

src/app/@theme/styles/cosmic/cosmic.theme.scss

@@ -37,3 +37,7 @@ $theme-name: 'cosmic';
 // @nga/components module styles
 @import '~@nga/theme/overrides/components/styles/themes/nga.theme.default';
 @include nga-components($theme-name);
+
+// @nga/tables module styles
+@import '~@nga/theme/overrides/tables/styles/themes/nga.theme.default';
+@include nga-tables($theme-name);

src/app/@theme/styles/default/default.theme.scss

@@ -36,3 +36,7 @@ $theme-name: 'default';
 // @nga/components module styles
 @import '~@nga/theme/overrides/components/styles/themes/nga.theme.default';
 @include nga-components($theme-name);
+
+// @nga/tables module styles
+@import '~@nga/theme/overrides/tables/styles/themes/nga.theme.default';
+@include nga-tables($theme-name);

src/app/@theme/styles/light/light.theme.scss

@@ -36,3 +36,7 @@ $theme-name: 'light';
 // @nga/components module styles
 @import '~@nga/theme/overrides/components/styles/themes/nga.theme.default';
 @include nga-components($theme-name);
+
+// @nga/tables module styles
+@import '~@nga/theme/overrides/tables/styles/themes/nga.theme.default';
+@include nga-tables($theme-name);

src/app/pages/pages-menu.ts

@@ -33,10 +33,10 @@ export const menuItems: List<NgaMenuItem> = List([{
     title: 'Animated Searches',
     link: '/pages/ui-features/search-fields',
   },
-    {
+  {
-      title: 'Tabs',
+    title: 'Tabs',
-      link: '/pages/ui-features/tabs',
+    link: '/pages/ui-features/tabs',
-    }]),
+  }]),
 }, {
   title: 'Components',
   icon: 'ion ion-ios-gear-outline',
@@ -87,4 +87,11 @@ export const menuItems: List<NgaMenuItem> = List([{
     title: 'Form Layouts',
     link: '/pages/forms/layouts',
   }]),
+}, {
+  title: 'Tables',
+  icon: 'ion-ios-grid-view',
+  children: List<NgaMenuItem>([{
+    title: 'Smart Table',
+    link: '/pages/tables/smart-table',
+  }]),
 }]);

src/app/pages/pages-routing.module.ts

@@ -3,7 +3,6 @@ import { NgModule } from '@angular/core';
 
 import { PagesComponent } from './pages.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
-import { ChartsComponent } from './charts/charts.component';
 
 const routes: Routes = [{
   path: '',
@@ -29,6 +28,9 @@ const routes: Routes = [{
   }, {
     path: 'forms',
     loadChildren: './forms/forms.module#FormsModule',
+  }, {
+    path: 'tables',
+    loadChildren: './tables/tables.module#TablesModule',
   }, {
     path: '',
     redirectTo: 'dashboard',

src/app/pages/tables/smart-table/smart-table.component.html

@@ -0,0 +1,10 @@
+<div class="row">
+  <div class="col-md-12">
+    <nga-card>
+      <nga-card-header>Smart Table</nga-card-header>
+      <nga-card-body>
+        <ng2-smart-table [settings]="settings" [source]="source" (deleteConfirm)="onDeleteConfirm($event)"></ng2-smart-table>
+      </nga-card-body>
+    </nga-card>
+  </div>
+</div>

src/app/pages/tables/smart-table/smart-table.component.ts

@@ -0,0 +1,73 @@
+import { Component } from '@angular/core';
+import { LocalDataSource } from 'ng2-smart-table';
+
+import { SmartTableService } from './smart-table.service';
+
+@Component({
+  selector: 'ngx-smart-table',
+  templateUrl: './smart-table.component.html',
+})
+export class SmartTableComponent {
+
+  query: string = '';
+
+  settings = {
+    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>',
+      confirmDelete: true,
+    },
+    columns: {
+      id: {
+        title: 'ID',
+        type: 'number',
+      },
+      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(private service: SmartTableService) {
+    this.service.getData().then((data) => {
+      this.source.load(data);
+    });
+  }
+
+  onDeleteConfirm(event): void {
+    if (window.confirm('Are you sure you want to delete?')) {
+      event.confirm.resolve();
+    } else {
+      event.confirm.reject();
+    }
+  }
+
+}

src/app/pages/tables/smart-table/smart-table.service.ts

@@ -0,0 +1,483 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class SmartTableService {
+
+  data = [{
+    id: 1,
+    firstName: 'Mark',
+    lastName: 'Otto',
+    username: '@mdo',
+    email: 'mdo@gmail.com',
+    age: '28',
+  }, {
+    id: 2,
+    firstName: 'Jacob',
+    lastName: 'Thornton',
+    username: '@fat',
+    email: 'fat@yandex.ru',
+    age: '45',
+  }, {
+    id: 3,
+    firstName: 'Larry',
+    lastName: 'Bird',
+    username: '@twitter',
+    email: 'twitter@outlook.com',
+    age: '18',
+  }, {
+    id: 4,
+    firstName: 'John',
+    lastName: 'Snow',
+    username: '@snow',
+    email: 'snow@gmail.com',
+    age: '20',
+  }, {
+    id: 5,
+    firstName: 'Jack',
+    lastName: 'Sparrow',
+    username: '@jack',
+    email: 'jack@yandex.ru',
+    age: '30',
+  }, {
+    id: 6,
+    firstName: 'Ann',
+    lastName: 'Smith',
+    username: '@ann',
+    email: 'ann@gmail.com',
+    age: '21',
+  }, {
+    id: 7,
+    firstName: 'Barbara',
+    lastName: 'Black',
+    username: '@barbara',
+    email: 'barbara@yandex.ru',
+    age: '43',
+  }, {
+    id: 8,
+    firstName: 'Sevan',
+    lastName: 'Bagrat',
+    username: '@sevan',
+    email: 'sevan@outlook.com',
+    age: '13',
+  }, {
+    id: 9,
+    firstName: 'Ruben',
+    lastName: 'Vardan',
+    username: '@ruben',
+    email: 'ruben@gmail.com',
+    age: '22',
+  }, {
+    id: 10,
+    firstName: 'Karen',
+    lastName: 'Sevan',
+    username: '@karen',
+    email: 'karen@yandex.ru',
+    age: '33',
+  }, {
+    id: 11,
+    firstName: 'Mark',
+    lastName: 'Otto',
+    username: '@mark',
+    email: 'mark@gmail.com',
+    age: '38',
+  }, {
+    id: 12,
+    firstName: 'Jacob',
+    lastName: 'Thornton',
+    username: '@jacob',
+    email: 'jacob@yandex.ru',
+    age: '48',
+  }, {
+    id: 13,
+    firstName: 'Haik',
+    lastName: 'Hakob',
+    username: '@haik',
+    email: 'haik@outlook.com',
+    age: '48',
+  }, {
+    id: 14,
+    firstName: 'Garegin',
+    lastName: 'Jirair',
+    username: '@garegin',
+    email: 'garegin@gmail.com',
+    age: '40',
+  }, {
+    id: 15,
+    firstName: 'Krikor',
+    lastName: 'Bedros',
+    username: '@krikor',
+    email: 'krikor@yandex.ru',
+    age: '32',
+  }, {
+    'id': 16,
+    'firstName': 'Francisca',
+    'lastName': 'Brady',
+    'username': '@Gibson',
+    'email': 'franciscagibson@comtours.com',
+    'age': 11,
+  }, {
+    'id': 17,
+    'firstName': 'Tillman',
+    'lastName': 'Figueroa',
+    'username': '@Snow',
+    'email': 'tillmansnow@comtours.com',
+    'age': 34,
+  }, {
+    'id': 18,
+    'firstName': 'Jimenez',
+    'lastName': 'Morris',
+    'username': '@Bryant',
+    'email': 'jimenezbryant@comtours.com',
+    'age': 45,
+  }, {
+    'id': 19,
+    'firstName': 'Sandoval',
+    'lastName': 'Jacobson',
+    'username': '@Mcbride',
+    'email': 'sandovalmcbride@comtours.com',
+    'age': 32,
+  }, {
+    'id': 20,
+    'firstName': 'Griffin',
+    'lastName': 'Torres',
+    'username': '@Charles',
+    'email': 'griffincharles@comtours.com',
+    'age': 19,
+  }, {
+    'id': 21,
+    'firstName': 'Cora',
+    'lastName': 'Parker',
+    'username': '@Caldwell',
+    'email': 'coracaldwell@comtours.com',
+    'age': 27,
+  }, {
+    'id': 22,
+    'firstName': 'Cindy',
+    'lastName': 'Bond',
+    'username': '@Velez',
+    'email': 'cindyvelez@comtours.com',
+    'age': 24,
+  }, {
+    'id': 23,
+    'firstName': 'Frieda',
+    'lastName': 'Tyson',
+    'username': '@Craig',
+    'email': 'friedacraig@comtours.com',
+    'age': 45,
+  }, {
+    'id': 24,
+    'firstName': 'Cote',
+    'lastName': 'Holcomb',
+    'username': '@Rowe',
+    'email': 'coterowe@comtours.com',
+    'age': 20,
+  }, {
+    'id': 25,
+    'firstName': 'Trujillo',
+    'lastName': 'Mejia',
+    'username': '@Valenzuela',
+    'email': 'trujillovalenzuela@comtours.com',
+    'age': 16,
+  }, {
+    'id': 26,
+    'firstName': 'Pruitt',
+    'lastName': 'Shepard',
+    'username': '@Sloan',
+    'email': 'pruittsloan@comtours.com',
+    'age': 44,
+  }, {
+    'id': 27,
+    'firstName': 'Sutton',
+    'lastName': 'Ortega',
+    'username': '@Black',
+    'email': 'suttonblack@comtours.com',
+    'age': 42,
+  }, {
+    'id': 28,
+    'firstName': 'Marion',
+    'lastName': 'Heath',
+    'username': '@Espinoza',
+    'email': 'marionespinoza@comtours.com',
+    'age': 47,
+  }, {
+    'id': 29,
+    'firstName': 'Newman',
+    'lastName': 'Hicks',
+    'username': '@Keith',
+    'email': 'newmankeith@comtours.com',
+    'age': 15,
+  }, {
+    'id': 30,
+    'firstName': 'Boyle',
+    'lastName': 'Larson',
+    'username': '@Summers',
+    'email': 'boylesummers@comtours.com',
+    'age': 32,
+  }, {
+    'id': 31,
+    'firstName': 'Haynes',
+    'lastName': 'Vinson',
+    'username': '@Mckenzie',
+    'email': 'haynesmckenzie@comtours.com',
+    'age': 15,
+  }, {
+    'id': 32,
+    'firstName': 'Miller',
+    'lastName': 'Acosta',
+    'username': '@Young',
+    'email': 'milleryoung@comtours.com',
+    'age': 55,
+  }, {
+    'id': 33,
+    'firstName': 'Johnston',
+    'lastName': 'Brown',
+    'username': '@Knight',
+    'email': 'johnstonknight@comtours.com',
+    'age': 29,
+  }, {
+    'id': 34,
+    'firstName': 'Lena',
+    'lastName': 'Pitts',
+    'username': '@Forbes',
+    'email': 'lenaforbes@comtours.com',
+    'age': 25,
+  }, {
+    'id': 35,
+    'firstName': 'Terrie',
+    'lastName': 'Kennedy',
+    'username': '@Branch',
+    'email': 'terriebranch@comtours.com',
+    'age': 37,
+  }, {
+    'id': 36,
+    'firstName': 'Louise',
+    'lastName': 'Aguirre',
+    'username': '@Kirby',
+    'email': 'louisekirby@comtours.com',
+    'age': 44,
+  }, {
+    'id': 37,
+    'firstName': 'David',
+    'lastName': 'Patton',
+    'username': '@Sanders',
+    'email': 'davidsanders@comtours.com',
+    'age': 26,
+  }, {
+    'id': 38,
+    'firstName': 'Holden',
+    'lastName': 'Barlow',
+    'username': '@Mckinney',
+    'email': 'holdenmckinney@comtours.com',
+    'age': 11,
+  }, {
+    'id': 39,
+    'firstName': 'Baker',
+    'lastName': 'Rivera',
+    'username': '@Montoya',
+    'email': 'bakermontoya@comtours.com',
+    'age': 47,
+  }, {
+    'id': 40,
+    'firstName': 'Belinda',
+    'lastName': 'Lloyd',
+    'username': '@Calderon',
+    'email': 'belindacalderon@comtours.com',
+    'age': 21,
+  }, {
+    'id': 41,
+    'firstName': 'Pearson',
+    'lastName': 'Patrick',
+    'username': '@Clements',
+    'email': 'pearsonclements@comtours.com',
+    'age': 42,
+  }, {
+    'id': 42,
+    'firstName': 'Alyce',
+    'lastName': 'Mckee',
+    'username': '@Daugherty',
+    'email': 'alycedaugherty@comtours.com',
+    'age': 55,
+  }, {
+    'id': 43,
+    'firstName': 'Valencia',
+    'lastName': 'Spence',
+    'username': '@Olsen',
+    'email': 'valenciaolsen@comtours.com',
+    'age': 20,
+  }, {
+    'id': 44,
+    'firstName': 'Leach',
+    'lastName': 'Holcomb',
+    'username': '@Humphrey',
+    'email': 'leachhumphrey@comtours.com',
+    'age': 28,
+  }, {
+    'id': 45,
+    'firstName': 'Moss',
+    'lastName': 'Baxter',
+    'username': '@Fitzpatrick',
+    'email': 'mossfitzpatrick@comtours.com',
+    'age': 51,
+  }, {
+    'id': 46,
+    'firstName': 'Jeanne',
+    'lastName': 'Cooke',
+    'username': '@Ward',
+    'email': 'jeanneward@comtours.com',
+    'age': 59,
+  }, {
+    'id': 47,
+    'firstName': 'Wilma',
+    'lastName': 'Briggs',
+    'username': '@Kidd',
+    'email': 'wilmakidd@comtours.com',
+    'age': 53,
+  }, {
+    'id': 48,
+    'firstName': 'Beatrice',
+    'lastName': 'Perry',
+    'username': '@Gilbert',
+    'email': 'beatricegilbert@comtours.com',
+    'age': 39,
+  }, {
+    'id': 49,
+    'firstName': 'Whitaker',
+    'lastName': 'Hyde',
+    'username': '@Mcdonald',
+    'email': 'whitakermcdonald@comtours.com',
+    'age': 35,
+  }, {
+    'id': 50,
+    'firstName': 'Rebekah',
+    'lastName': 'Duran',
+    'username': '@Gross',
+    'email': 'rebekahgross@comtours.com',
+    'age': 40,
+  }, {
+    'id': 51,
+    'firstName': 'Earline',
+    'lastName': 'Mayer',
+    'username': '@Woodward',
+    'email': 'earlinewoodward@comtours.com',
+    'age': 52,
+  }, {
+    'id': 52,
+    'firstName': 'Moran',
+    'lastName': 'Baxter',
+    'username': '@Johns',
+    'email': 'moranjohns@comtours.com',
+    'age': 20,
+  }, {
+    'id': 53,
+    'firstName': 'Nanette',
+    'lastName': 'Hubbard',
+    'username': '@Cooke',
+    'email': 'nanettecooke@comtours.com',
+    'age': 55,
+  }, {
+    'id': 54,
+    'firstName': 'Dalton',
+    'lastName': 'Walker',
+    'username': '@Hendricks',
+    'email': 'daltonhendricks@comtours.com',
+    'age': 25,
+  }, {
+    'id': 55,
+    'firstName': 'Bennett',
+    'lastName': 'Blake',
+    'username': '@Pena',
+    'email': 'bennettpena@comtours.com',
+    'age': 13,
+  }, {
+    'id': 56,
+    'firstName': 'Kellie',
+    'lastName': 'Horton',
+    'username': '@Weiss',
+    'email': 'kellieweiss@comtours.com',
+    'age': 48,
+  }, {
+    'id': 57,
+    'firstName': 'Hobbs',
+    'lastName': 'Talley',
+    'username': '@Sanford',
+    'email': 'hobbssanford@comtours.com',
+    'age': 28,
+  }, {
+    'id': 58,
+    'firstName': 'Mcguire',
+    'lastName': 'Donaldson',
+    'username': '@Roman',
+    'email': 'mcguireroman@comtours.com',
+    'age': 38,
+  }, {
+    'id': 59,
+    'firstName': 'Rodriquez',
+    'lastName': 'Saunders',
+    'username': '@Harper',
+    'email': 'rodriquezharper@comtours.com',
+    'age': 20,
+  }, {
+    'id': 60,
+    'firstName': 'Lou',
+    'lastName': 'Conner',
+    'username': '@Sanchez',
+    'email': 'lousanchez@comtours.com',
+    'age': 16,
+  }];
+
+  metricsTableData = [{
+    image: 'app/browsers/chrome.svg',
+    browser: 'Google Chrome',
+    visits: '10,392',
+    isVisitsUp: true,
+    purchases: '4,214',
+    isPurchasesUp: true,
+    percent: '45%',
+    isPercentUp: true,
+  }, {
+    image: 'app/browsers/firefox.svg',
+    browser: 'Mozilla Firefox',
+    visits: '7,873',
+    isVisitsUp: true,
+    purchases: '3,031',
+    isPurchasesUp: false,
+    percent: '28%',
+    isPercentUp: true,
+  }, {
+    image: 'app/browsers/ie.svg',
+    browser: 'Internet Explorer',
+    visits: '5,890',
+    isVisitsUp: false,
+    purchases: '2,102',
+    isPurchasesUp: false,
+    percent: '17%',
+    isPercentUp: false,
+  }, {
+    image: 'app/browsers/safari.svg',
+    browser: 'Safari',
+    visits: '4,001',
+    isVisitsUp: false,
+    purchases: '1,001',
+    isPurchasesUp: false,
+    percent: '14%',
+    isPercentUp: true,
+  }, {
+    image: 'app/browsers/opera.svg',
+    browser: 'Opera',
+    visits: '1,833',
+    isVisitsUp: true,
+    purchases: '83',
+    isPurchasesUp: true,
+    percent: '5%',
+    isPercentUp: false,
+  }];
+
+  getData(): Promise<any> {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        resolve(this.data);
+      }, 2000);
+    });
+  }
+
+}

src/app/pages/tables/tables-routing.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { TablesComponent } from './tables.component';
+import { SmartTableComponent } from './smart-table/smart-table.component';
+
+const routes: Routes = [{
+  path: '',
+  component: TablesComponent,
+  children: [{
+    path: 'smart-table',
+    component: SmartTableComponent,
+  }],
+}];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class TablesRoutingModule { }
+
+export const routedComponents = [
+  TablesComponent,
+  SmartTableComponent,
+];

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

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-tables',
+  template: `<router-outlet></router-outlet>`,
+})
+export class TablesComponent {
+}

src/app/pages/tables/tables.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { NgaTablesModule } from '@nga/theme';
+
+import { SharedModule } from '../../shared.module';
+
+import { TablesRoutingModule, routedComponents } from './tables-routing.module';
+import { SmartTableService } from './smart-table/smart-table.service';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    TablesRoutingModule,
+    NgaTablesModule,
+  ],
+  declarations: [
+    ...routedComponents,
+  ],
+  providers: [
+    SmartTableService,
+  ],
+})
+export class TablesModule { }

yarn.lock

@@ -3603,6 +3603,17 @@ ng2-ckeditor@1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/ng2-ckeditor/-/ng2-ckeditor-1.1.6.tgz#fa3afb86982b725f7f3a609924c64821c2719875"
 
+ng2-completer@^1.2.2:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ng2-completer/-/ng2-completer-1.4.0.tgz#43caec0dff44c7ad998327d411307b5d54546527"
+
+ng2-smart-table@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/ng2-smart-table/-/ng2-smart-table-1.1.0.tgz#0e9538d6253346611107b3895d606d6422482ecb"
+  dependencies:
+    lodash "^4.17.4"
+    ng2-completer "^1.2.2"
+
 ng2-tree@2.0.0-alpha.5:
   version "2.0.0-alpha.5"
   resolved "https://registry.yarnpkg.com/ng2-tree/-/ng2-tree-2.0.0-alpha.5.tgz#197f33af92f16f4a9168a3394ed0cbf9c1708a4a"