From 5aea53a1aa583cd4d2fc14388723d6f41446c43c Mon Sep 17 00:00:00 2001 From: nixa <4dmitr@gmail.com> Date: Fri, 19 Aug 2016 10:23:34 +0300 Subject: [PATCH] feat(smarttable): table setup --- package.json | 2 +- .../smartTables/smartTables.component.ts | 45 +++++- .../components/smartTables/smartTables.scss | 55 +++++++ ...bles.service.ts => smartTables.service.ts} | 137 +----------------- 4 files changed, 102 insertions(+), 137 deletions(-) rename src/app/pages/tables/components/smartTables/{basicTables.service.ts => smartTables.service.ts} (83%) diff --git a/package.json b/package.json index 4cf4b732..c2a7d64f 100644 --- a/package.json +++ b/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", diff --git a/src/app/pages/tables/components/smartTables/smartTables.component.ts b/src/app/pages/tables/components/smartTables/smartTables.component.ts index e4ed410a..d526636a 100644 --- a/src/app/pages/tables/components/smartTables/smartTables.component.ts +++ b/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: '', + createButtonContent: '', + cancelButtonContent: '', + }, + edit: { + editButtonContent: '', + saveButtonContent: '', + cancelButtonContent: '', + }, + delete: { + deleteButtonContent: '', }, 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); + }); + } } diff --git a/src/app/pages/tables/components/smartTables/smartTables.scss b/src/app/pages/tables/components/smartTables/smartTables.scss index e69de29b..0d966c81 100644 --- a/src/app/pages/tables/components/smartTables/smartTables.scss +++ b/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; + } + } +} diff --git a/src/app/pages/tables/components/smartTables/basicTables.service.ts b/src/app/pages/tables/components/smartTables/smartTables.service.ts similarity index 83% rename from src/app/pages/tables/components/smartTables/basicTables.service.ts rename to src/app/pages/tables/components/smartTables/smartTables.service.ts index b8a01892..674861a0 100644 --- a/src/app/pages/tables/components/smartTables/basicTables.service.ts +++ b/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; - - 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 { + return new Promise((resolve, reject) => { + setTimeout(() => { + resolve(this.smartTableData); + }, 2000); + }); } }