diff --git a/README.md b/README.md index 7e7b5134..1146c477 100644 --- a/README.md +++ b/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` diff --git a/angular-cli.json b/angular-cli.json index 9b6ad2a8..1e31bab4 100644 --- a/angular-cli.json +++ b/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", diff --git a/package.json b/package.json index 299ed012..dd74e3af 100644 --- a/package.json +++ b/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 " ], "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", diff --git a/src/app/app.component.scss b/src/app/app.component.scss index aee012b3..5f40e1de 100644 --- a/src/app/app.component.scss +++ b/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; diff --git a/src/app/app.component.ts b/src/app/app.component.ts index e78ba2de..efa23df3 100644 --- a/src/app/app.component.ts +++ b/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); } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b0be075e..491668b5 100644 --- a/src/app/app.module.ts +++ b/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: [ diff --git a/src/app/dashboard-product/dashboard-product.component.html b/src/app/dashboard-product/dashboard-product.component.html index 9e2e99c9..657f0ca8 100644 --- a/src/app/dashboard-product/dashboard-product.component.html +++ b/src/app/dashboard-product/dashboard-product.component.html @@ -2,8 +2,8 @@
Quickstart - chrome_reader_mode - + chrome_reader_mode +
diff --git a/src/app/dashboard-product/features/features.component.html b/src/app/dashboard-product/features/features.component.html index 6f7537b0..73e7f00e 100644 --- a/src/app/dashboard-product/features/features.component.html +++ b/src/app/dashboard-product/features/features.component.html @@ -1,14 +1,7 @@ -
- - - -
- + + + add diff --git a/src/app/dashboard-product/features/features.component.scss b/src/app/dashboard-product/features/features.component.scss index 5aeb9866..8a6ef455 100644 --- a/src/app/dashboard-product/features/features.component.scss +++ b/src/app/dashboard-product/features/features.component.scss @@ -1,4 +1,4 @@ .md-fab-position-bottom-right { + bottom: 80px; position: fixed; - bottom: 10px; } \ No newline at end of file diff --git a/src/app/dashboard-product/features/features.component.ts b/src/app/dashboard-product/features/features.component.ts index 012393ed..51d7c7e3 100644 --- a/src/app/dashboard-product/features/features.component.ts +++ b/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,7 +19,6 @@ export class ProductFeaturesComponent implements AfterViewInit { constructor(private _titleService: Title, private _dialogService: TdDialogService, - private _viewContainerRef: ViewContainerRef, private _featuresService: FeaturesService, private _loadingService: TdLoadingService) { @@ -27,7 +26,6 @@ export class ProductFeaturesComponent implements AfterViewInit { 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', diff --git a/src/app/dashboard-product/overview/overview.component.html b/src/app/dashboard-product/overview/overview.component.html index 7b1fd990..9ccd1f15 100644 --- a/src/app/dashboard-product/overview/overview.component.html +++ b/src/app/dashboard-product/overview/overview.component.html @@ -80,7 +80,7 @@

{{user.display_name}}

- + View More @@ -88,6 +88,6 @@

{{user.display_name}}

- + add diff --git a/src/app/dashboard-product/stats/stats.component.html b/src/app/dashboard-product/stats/stats.component.html index 79d17ef9..d53c7aae 100644 --- a/src/app/dashboard-product/stats/stats.component.html +++ b/src/app/dashboard-product/stats/stats.component.html @@ -27,20 +27,23 @@
+
+ + Product Stats + + + +
+ + (sortChange)="sort($event)"> +
diff --git a/src/app/dashboard-product/stats/stats.component.ts b/src/app/dashboard-product/stats/stats.component.ts index d492098b..764245d4 100644 --- a/src/app/dashboard-product/stats/stats.component.ts +++ b/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; } } diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 66d89d77..6fe65cee 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -2,8 +2,8 @@
Quickstart - chrome_reader_mode - + chrome_reader_mode +
@@ -14,68 +14,62 @@ - + + + + + + - + + + + + + - + + + + + + @@ -156,7 +150,7 @@

{{item.description}}

- + View More @@ -179,7 +173,7 @@

{{item.name}}

- + View More diff --git a/src/app/form/form.component.html b/src/app/form/form.component.html index 366c1dde..3c081e47 100644 --- a/src/app/form/form.component.html +++ b/src/app/form/form.component.html @@ -2,8 +2,8 @@
Product Name - chrome_reader_mode - + chrome_reader_mode +
@@ -25,7 +25,7 @@
- arrow_back + arrow_back New Item
@@ -34,43 +34,37 @@ - +
+ + $  + .00 + +
+
- + + A New Hope + Empire Strikes Back + + + Include Awesome + - + + I agree to spread the word about Covalent +