Feature/0.9

README.md

@@ -4,8 +4,8 @@ Quickstart App with @covalent packages
 
 ## Setup
 
-* Ensure you have Node 4.4 and NPM 3+ installed.
-* Install Angular CLI `npm i -g angular-cli@1.0.0-beta.15`
+* Ensure you have Node 4.4+ and NPM 3+ installed.
+* Install Angular CLI `npm i -g angular-cli@latest`
 * Install Typescript 2.0 `npm i -g typescript`
 * Install TSLint `npm install -g tslint`
 * Install Protractor for e2e testing `npm install -g protractor`

angular-cli.json

@@ -1,13 +1,16 @@
 {
   "project": {
-    "version": "1.0.0-beta.15",
+    "version": "1.0.0-beta.19-3",
     "name": "covalent-quickstart"
   },
   "apps": [
     {
       "root": "src",
       "outDir": "dist",
-      "assets": "assets",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
       "index": "index.html",
       "main": "main.ts",
       "test": "test.ts",
@@ -17,8 +20,7 @@
       "styles": [
         "styles.scss",
         "theme.scss",
-        "../node_modules/@covalent/core/styles/platform.css",
-        "../node_modules/@angular/material/core/overlay/overlay.css"
+        "../node_modules/@covalent/core/styles/platform.css"
       ],
       "scripts": [
         "../node_modules/hammerjs/hammer.min.js",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "covalent-quickstart",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "private": true,
   "description": "Quickstart App with @covalent packages",
   "keywords": [
@@ -22,7 +22,7 @@
     "ghpages-deploy": "bash scripts/ghpages-deploy"
   },
   "engines": {
-    "node": ">4.4 < 5",
+    "node": ">4.4 < 7",
     "npm": ">3"
   },
   "repository": {
@@ -39,25 +39,27 @@
     "Jeremy Wilken <[email protected]>"
   ],
   "dependencies": {
-    "@covalent/chips": "0.8.1",
-    "@covalent/core": "0.8.1",
-    "@covalent/charts": "0.8.1",
-    "@covalent/data-table": "0.8.1",
-    "@covalent/file-upload": "0.8.1",
-    "@covalent/highlight": "0.8.1",
-    "@covalent/http": "0.8.1",
-    "@covalent/json-formatter": "0.8.1",
-    "@covalent/markdown": "0.8.1",
-    "@covalent/data": "0.2.0",
+    "@covalent/chips": "0.9.1",
+    "@covalent/core": "0.9.1",
+    "@covalent/charts": "0.9.1",
+    "@covalent/data-table": "0.9.1",
+    "@covalent/file-upload": "0.9.1",
+    "@covalent/highlight": "0.9.1",
+    "@covalent/http": "0.9.1",
+    "@covalent/json-formatter": "0.9.1",
+    "@covalent/markdown": "0.9.1",
+    "@covalent/paging": "0.9.1",
+    "@covalent/search": "0.9.1",
+    "@covalent/data": "0.4.0",
     "ts-helpers": "^1.1.1"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^2.0.0",
+    "@angular/compiler-cli": "^2.2.1",
     "@types/hammerjs": "^2.0.30",
     "@types/jasmine": "^2.2.31",
     "@types/node": "^6.0.34",
     "@types/selenium-webdriver": "^2.52.0",
-    "angular-cli": "1.0.0-beta.15",
+    "angular-cli": "1.0.0-beta.19-3",
     "codelyzer": "~0.0.26",
     "ember-cli-inject-live-reload": "1.4.0",
     "jasmine-core": "2.4.1",

src/app/app.component.scss

@@ -3,18 +3,7 @@
     /**
     * CSS Overrides for bug fixes
     */
-    // md-divider has a bug in angular-material that doesn't apply color
-    md-divider {
-        border-top-color: rgba(black, 0.12);
-    }
-    // sidenav content doesn't fill the horizontal space
-    .md-sidenav-content {
-        flex-grow: 1;
-    }
-    // td-step has a bug with the vertical line when closing the step (0.8.1)
-    div.td-line-wrapper {
-      min-height: 1px;
-    }
+
     /**
     * END CSS Overrides for bug fixes
     */
@@ -27,18 +16,6 @@
             }
         }
     }
-    .md-input-search {
-        /deep/ {
-            .md-input-prefix {
-                width: 45px;
-                text-align: center;
-            }
-        }
-        md-icon.clear-search {
-            top: 15px;
-            position: relative;
-        }
-    }
     .md-sort-icon {
         font-size: 15px;
         margin-right: 10px;

src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component, ViewContainerRef } from '@angular/core';
 
-import { TdLoadingService, TdDialogService, LoadingType, ILoadingOptions } from '@covalent/core';
+import { TdLoadingService, LoadingType, ILoadingOptions } from '@covalent/core';
 
 @Component({
   selector: 'qs-app',
@@ -10,14 +10,12 @@ import { TdLoadingService, TdDialogService, LoadingType, ILoadingOptions } from
 export class AppComponent {
 
   constructor(private _loadingService: TdLoadingService,
-              private _dialogService: TdDialogService,
               viewContainerRef: ViewContainerRef) {
     let options: ILoadingOptions = {
       name: 'main',
       type: LoadingType.Circular,
     };
     this._loadingService.createOverlayComponent(options, viewContainerRef);
-    this._dialogService.setDefaultViewContainerRef(viewContainerRef);
   }
 
 }

src/app/app.module.ts

@@ -10,6 +10,8 @@ import { CovalentJsonFormatterModule } from '@covalent/json-formatter';
 import { CovalentMarkdownModule } from '@covalent/markdown';
 import { CovalentChartsModule } from '@covalent/charts';
 import { CovalentDataTableModule } from '@covalent/data-table';
+import { CovalentPagingModule } from '@covalent/paging';
+import { CovalentSearchModule } from '@covalent/search';
 
 import { AppComponent } from './app.component';
 import { MainComponent } from './main/main.component';
@@ -28,6 +30,7 @@ import { FeaturesFormComponent } from './dashboard-product/features/+form/form.c
 import { appRoutes, appRoutingProviders } from './app.routes';
 
 import { ChartComponent } from '../components/chart/chart.component';
+import { ButtonDisableFix } from '../directives/button-disable-fix.directive';
 
 import { RequestInterceptor } from '../config/interceptors/request.interceptor';
 
@@ -48,6 +51,8 @@ import { RequestInterceptor } from '../config/interceptors/request.interceptor';
     DetailComponent,
     LoginComponent,
     ChartComponent,
+    // Bugfix for disabled anchor button in material.alpha-10 (remove in alpha-11)
+    ButtonDisableFix,
   ], // directives, components, and pipes owned by this NgModule
   imports: [
     BrowserModule,
@@ -60,6 +65,8 @@ import { RequestInterceptor } from '../config/interceptors/request.interceptor';
     CovalentHighlightModule.forRoot(),
     CovalentJsonFormatterModule.forRoot(),
     CovalentMarkdownModule.forRoot(),
+    CovalentPagingModule.forRoot(),
+    CovalentSearchModule.forRoot(),
     appRoutes,
   ], // modules needed to run this module
   providers: [

src/app/dashboard-product/dashboard-product.component.html

@@ -2,8 +2,8 @@
   <div toolbar-content layout="row" layout-align="center center" flex>
     <span>Quickstart</span>
     <span flex></span>
-    <a md-icon-button md-tooltip="Docs" href="https://teradata.github.io/covalent/" target="_blank"><md-icon>chrome_reader_mode</md-icon></a>
-    <a md-icon-button md-tooltip="Github" href="https://github.com/teradata/covalent" target="_blank"><md-icon svgSrc="assets/icons/github.svg"></md-icon></a>
+    <a md-icon-button buttonDisableFix md-tooltip="Docs" href="https://teradata.github.io/covalent/" target="_blank"><md-icon>chrome_reader_mode</md-icon></a>
+    <a md-icon-button buttonDisableFix md-tooltip="Github" href="https://github.com/teradata/covalent" target="_blank"><md-icon svgSrc="assets/icons/github.svg"></md-icon></a>
   </div>
   <td-layout-manage-list #list>
     <md-toolbar list-items>

src/app/dashboard-product/features/features.component.html

@@ -1,14 +1,7 @@
-<div class="md-content push-bottom-xxl">
-    <md-card tdMediaToggle="gt-xs" [mediaClasses]="['push']">
-        <template tdLoading="features.load">
-        <div class="md-padding md-input-search">
-            <div layout="row" class="md-input-search">
-                <md-input #search placeholder="search" (keyup)="filterFeatures(search.value)" flex>
-                    <span md-prefix><md-icon>search</md-icon></span>
-                </md-input>
-                <md-icon class="clear-search" *ngIf="search.value" (click)="filterFeatures() || search.value = ''">cancel</md-icon>
-            </div>
-        </div>
+<md-card tdMediaToggle="gt-xs" [mediaClasses]="['push']">
+    <template tdLoading="features.load">
+        <td-search-box class="push-left push-right" placeholder="search" [alwaysVisible]="true" (searchDebounce)="filterFeatures($event)"></td-search-box>
+        <md-divider></md-divider>
         <md-list class="will-load">
             <div class="md-padding" *ngIf="!filteredFeatures || filteredFeatures.length === 0" layout="row" layout-align="center center">
                 <h3>No feature to display.</h3>
@@ -35,9 +28,8 @@ <h3 md-line> {{item.title}} </h3>
                 <md-divider *ngIf="!last"></md-divider>
             </template>
         </md-list>
-        </template>
-    </md-card>
-</div>
-<a md-fab color="accent" class="md-fab-position-bottom-right" [routerLink]="['add']"> 
+    </template>
+</md-card>
+<a md-fab buttonDisableFix color="accent" class="md-fab-position-bottom-right" [routerLink]="['add']"> 
     <md-icon>add</md-icon>
 </a>

src/app/dashboard-product/features/features.component.scss

@@ -1,4 +1,4 @@
 .md-fab-position-bottom-right {
+    bottom: 80px;
     position: fixed;
-    bottom: 10px;
 }

src/app/dashboard-product/features/features.component.ts

@@ -1,4 +1,4 @@
-import { Component, AfterViewInit, ViewContainerRef } from '@angular/core';
+import { Component, AfterViewInit } from '@angular/core';
 import { Title }     from '@angular/platform-browser';
 
 import { TdLoadingService } from '@covalent/core';
@@ -19,15 +19,13 @@ export class ProductFeaturesComponent implements AfterViewInit {
 
   constructor(private _titleService: Title,
               private _dialogService: TdDialogService,
-              private _viewContainerRef: ViewContainerRef,
               private _featuresService: FeaturesService,
               private _loadingService: TdLoadingService) {
 
   }
   openConfirm(id: string): void {
     this._dialogService.openConfirm({
       message: 'Are you sure you want to delete this feature? It\'s being used!',
-      viewContainerRef: this._viewContainerRef,
       title: 'Confirm',
       cancelButton: 'No, Cancel',
       acceptButton: 'Yes, Delete',

src/app/dashboard-product/overview/overview.component.html

@@ -80,14 +80,14 @@ <h3 md-line> {{user.display_name}} </h3>
             </md-list>
             <md-divider></md-divider>
             <md-card-actions>
-                <a md-button color="accent" class="text-upper" [routerLink]="['/users']">
+                <a md-button buttonDisableFix color="accent" class="text-upper" [routerLink]="['/users']">
                 <span>View More</span>
                 </a>
             </md-card-actions>
             </md-card>
         </div>
     </div>
 </div>
-<a md-fab color="accent" class="md-fab-position-bottom-right" [routerLink]="['/form']"> 
+<a md-fab buttonDisableFix color="accent" class="md-fab-position-bottom-right" [routerLink]="['/form']"> 
     <md-icon>add</md-icon>
 </a>

src/app/dashboard-product/stats/stats.component.html

@@ -27,20 +27,23 @@
         <div flex-gt-sm="100">
             <md-card>
                 <md-card-content>
+                    <div layout="row" layout-align="start center" class="pad-left-sm pad-right-sm">
+                        <span *ngIf="!searchBox.searchVisible" class="push-left-sm">
+                            <span class="md-title">Product Stats</span>
+                        </span>
+                        <td-search-box #searchBox backIcon="arrow_back" class="push-right-sm" placeholder="Search here" (searchDebounce)="search($event)" flex>
+                        </td-search-box>
+                    </div>
+                    <md-divider></md-divider>
                     <td-data-table
-                        [data]="data"
+                        [data]="filteredData"
                         [columns]="columns"
-                        [pagination]="pagination"
-                        [pageSize]="pageSize"
-                        [rowSelection]="rowSelection"
-                        [multiple]="multiple"
-                        [sorting]="sorting"
+                        [sortable]="true"
                         [sortBy]="sortBy"
                         [sortOrder]="sortOrder"
-                        search="true"
-                        title="Product Stats"
-                        (sortChanged)="sortChanged($event)">
+                        (sortChange)="sort($event)">
                     </td-data-table>
+                    <td-paging-bar [pageSizes]="[5, 10, 15, 20]" [total]="filteredTotal" (change)="page($event)"></td-paging-bar>
                 </md-card-content>
             </md-card>
         </div>

src/app/dashboard-product/stats/stats.component.ts

@@ -1,7 +1,8 @@
 import { Component, AfterViewInit } from '@angular/core';
 import { Title }     from '@angular/platform-browser';
 
-import { TdDataTableSortingOrder } from '@covalent/data-table';
+import { TdDataTableSortingOrder, TdDataTableService, ITdDataTableSortChangeEvent } from '@covalent/data-table';
+import { IPageChangeEvent } from '@covalent/paging';
 
 const NUMBER_FORMAT: any = (v: {value: number}) => v.value;
 const DECIMAL_FORMAT: any = (v: {value: number}) => v.value.toFixed(2);
@@ -24,10 +25,6 @@ export class ProductStatsComponent implements AfterViewInit {
     { name: 'containers', label: 'Containers', numeric: true, format: NUMBER_FORMAT },
   ];
 
-  sorting: boolean = true;
-  pagination: boolean = true;
-  pageSize: number = 5;
-
   data: any[] = [
       {
         'name': 'Ingest',
@@ -122,22 +119,47 @@ export class ProductStatsComponent implements AfterViewInit {
       },
     ];
 
+  filteredData: any[] = this.data;
+  filteredTotal: number = this.data.length;
+  searchTerm: string = '';
+  fromRow: number = 1;
+  currentPage: number = 1;
+  pageSize: number = 5;
   sortBy: string = 'name';
-  sortOrder: string = 'ASC';
+  sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Descending;
 
-  rowSelection: boolean = false;
-  multiple: boolean = true;
+  constructor(private _titleService: Title,
+              private _dataTableService: TdDataTableService) { }
 
-  constructor(private _titleService: Title) { }
+  ngAfterViewInit(): void {
+    this._titleService.setTitle( 'Product Stats' );
+    this.filter();
+  }
 
-  sortChanged(changes: any): void {
-    const { column, order }: any = changes;
+  sort(sortEvent: ITdDataTableSortChangeEvent): void {
+    this.sortBy = sortEvent.name;
+    this.sortOrder = sortEvent.order;
+    this.filter();
+  }
 
-    this.sortBy = column.name;
-    this.sortOrder = order === TdDataTableSortingOrder.Ascending ? 'ASC' : 'DESC';
+  search(searchTerm: string): void {
+    this.searchTerm = searchTerm;
+    this.filter();
   }
 
-  ngAfterViewInit(): void {
-    this._titleService.setTitle( 'Product Stats' );
+  page(pagingEvent: IPageChangeEvent): void {
+    this.fromRow = pagingEvent.fromRow;
+    this.currentPage = pagingEvent.page;
+    this.pageSize = pagingEvent.pageSize;
+    this.filter();
+  }
+
+  filter(): void {
+    let newData: any[] = this.data;
+    newData = this._dataTableService.filterData(newData, this.searchTerm, true);
+    this.filteredTotal = newData.length;
+    newData = this._dataTableService.sortData(newData, this.sortBy, this.sortOrder);
+    newData = this._dataTableService.pageData(newData, this.fromRow, this.currentPage * this.pageSize);
+    this.filteredData = newData;
   }
 }