Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(paging): new demo for input go to usage with paging bar leveraging exposed API's #764

Merged
merged 10 commits into from
Jul 20, 2017
Merged

feat(paging): new demo for input go to usage with paging bar leveraging exposed API's #764

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
816bb8f
Adding 'Go To' input to paginator that allows a page to be entered an…
Jul 14, 2017
ab060b7
Adding unit test for jump to page on paginator
Jul 14, 2017
7d1dca0
chore(): load README.md in paging demo
Jul 19, 2017
efc944b
fix(): README.md wasnt loading properly
Jul 20, 2017
0e4fa8d
chore(paging): no need to have the properties in the demo docs
Jul 20, 2017
e29ca49
feat(paging): add demo with input abstraction to show how devs can le…
Jul 20, 2017
68270d4
fix(paging): no more need for MdInputModule in CovalentPagingModule
Jul 20, 2017
e9866b5
feat(paging): add unit tests with an external input to jump to page
Jul 20, 2017
4f86a74
feat(paging): add a separate demo for input usage with paging bar
Jul 20, 2017
5db3850
Merge branch 'develop' into feature/jump-to-row
emoralesb05 Jul 20, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
156 changes: 79 additions & 77 deletions src/app/components/components/paging/paging.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,16 @@
<md-card-content>
<p>Change Event: </p>
<div>
<p>Page Size: {{event?.pageSize || '100'}}</p>
<p>Page: {{event?.page || '1'}} of {{event?.maxPage || '14'}}</p>
<p>Rows: {{event?.fromRow || '1'}} to {{event?.toRow || '100'}}</p>
<p>Page Size: {{event1?.pageSize || '100'}}</p>
<p>Page: {{event1?.page || '1'}} of {{event1?.maxPage || '14'}}</p>
<p>Rows: {{event1?.fromRow || '1'}} to {{event1?.toRow || '100'}}</p>
</div>
<p>Total: {{event?.total || '1345'}}</p>
<p>Total: {{event1?.total || '1345'}}</p>
</md-card-content>
<md-divider></md-divider>
<td-paging-bar #pagingBar pageSizeAllText="All" [pageSizeAll]="true" [pageSizes]="[50,100,200,500,1000,2000]" pageLinkCount="5"
[initialPage]="1" [firstLast]="firstLast" [pageSize]="100" [total]="1345" (change)="change($event)">
<td-paging-bar #pagingBar1 pageSizeAllText="All" [pageSizeAll]="true" [pageSizes]="[50,100,200,500,1000,2000]" pageLinkCount="5" [initialPage]="1" [firstLast]="firstLast" [pageSize]="100" [total]="1345" (change)="change1($event)">
<span td-paging-bar-label hide-xs>Row per page:</span>
{{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
{{pagingBar1.range}} <span hide-xs>of {{pagingBar1.total}}</span>
</td-paging-bar>
</md-tab>
<md-tab>
Expand All @@ -27,8 +26,7 @@
<p>HTML:</p>
<td-highlight lang="html">
<![CDATA[
<td-paging-bar #pagingBar pageSizeAllText="All" [pageSizeAll]="true" [pageSizes]="[50,100,200,500,1000,2000]" pageLinkCount="5"
[initialPage]="1" [firstLast]="firstLast" [pageSize]="100" [total]="1345" (change)="change($event)">
<td-paging-bar #pagingBar pageSizeAllText="All" [pageSizeAll]="true" [pageSizes]="[50,100,200,500,1000,2000]" pageLinkCount="5" [initialPage]="1" [firstLast]="firstLast" [pageSize]="100" [total]="1345" (change)="change($event)">
<span td-paging-bar-label hide-xs>Row per page:</span>
{ {pagingBar.range} } <span hide-xs>of { {pagingBar.total} }</span>
</td-paging-bar>
Expand Down Expand Up @@ -65,77 +63,81 @@
</div>
</md-card-actions>
</md-card>


<md-card>
<md-card-title>TdPagingBarComponent</md-card-title>
<md-card-subtitle>How to use this component</md-card-subtitle>
<md-card-title>Paging using input</md-card-title>
<md-card-subtitle>Navigate to a specific page</md-card-subtitle>
<md-divider></md-divider>
<md-card-content>
<h2><code><![CDATA[<td-paging-bar>]]></code></h2>
<p>Use <code><![CDATA[<td-paging-bar>]]></code> element to generate a paging bar.</p>
<p>The <code>(change)</code> event throws an event with the following interface:</p>
<td-highlight lang="typescript">
<![CDATA[
export interface IPageChangeEvent {
page: number;
maxPage: number;
pageSize: number;
total: number;
fromRow: number;
toRow: number;
}
]]>
</td-highlight>
<h3>Properties:</h3>
<p>The <code><![CDATA[<td-paging-bar>]]></code> component has {{pagingBarAttrs.length}} properties:</p>
<md-list>
<ng-template let-attr let-last="attr" ngFor [ngForOf]="pagingBarAttrs">
<a md-list-item layout-align="row">
<h3 md-line> {{attr.name}}: <span>{{attr.type}}</span></h3>
<p md-line> {{attr.description}} </p>
</a>
<md-divider *ngIf="!last"></md-divider>
</ng-template>
</md-list>
<h3>Example:</h3>
<p>HTML:</p>
<td-highlight lang="html">
<![CDATA[
<td-paging-bar #pagingBar pageSizeAllText="allText" [firstLast]="true|false" [pageSizeAll]="true|false" [pageSizes]="[100,200,500,1000,2000]"
pageLinkCount="5" [initialPage]="1" [pageSize]="100" [total]="1345" (change)="change($event)">
<md-tab-group md-stretch-tabs>
<md-tab>
<ng-template md-tab-label>Demo</ng-template>
<md-card-content>
<p>Change Event: </p>
<div>
<p>Page Size: {{event2?.pageSize || '100'}}</p>
<p>Page: {{event2?.page || '1'}} of {{event2?.maxPage || '14'}}</p>
<p>Rows: {{event2?.fromRow || '1'}} to {{event2?.toRow || '100'}}</p>
</div>
<p>Total: {{event2?.total || '1345'}}</p>
</md-card-content>
<md-divider></md-divider>
<td-paging-bar #pagingBar2 [pageSizes]="[50,100,200,500,1000,2000]" pageLinkCount="5" [firstLast]="false" [initialPage]="1" [pageSize]="100" [total]="1345" (change)="change2($event)">
<span td-paging-bar-label hide-xs>Row per page:</span>
{ {pagingBar.range} } <span hide-xs>of { {pagingBar.total} }</span>
{{pagingBar2.range}} <span hide-xs>of {{pagingBar2.total}}</span>
<p hide-xs>Go to:</p>
<md-input-container>
<input #goToInput
mdInput
type="number"
[min]="1"
[max]="pagingBar2.maxPage"
[value]="pagingBar2.page"
(blur)="goToInput.value = pagingBar2.page"
(keyup.enter)="pagingBar2.navigateToPage(goToInput.value); goToInput.value = pagingBar2.page"/>
</md-input-container>
</td-paging-bar>
]]>
</td-highlight>
<p>Typescript:</p>
<td-highlight lang="typescript">
<![CDATA[
import { IPageChangeEvent } from '@covalent/core';
...
})
export class Demo {

change(event: IPageChangeEvent): void {
</md-tab>
<md-tab>
<ng-template md-tab-label>Code</ng-template>
<md-card-content>
<p>HTML:</p>
<td-highlight lang="html">
<![CDATA[
<td-paging-bar #pagingBar [pageSizes]="[50,100,200,500,1000,2000]" pageLinkCount="5" [firstLast]="false" [initialPage]="1" [pageSize]="100" [total]="1345" (change)="change($event)">
<span td-paging-bar-label hide-xs>Row per page:</span>
{ {pagingBar.range} } <span hide-xs>of { {pagingBar.total} }</span>
<p hide-xs>Go to:</p>
<md-input-container>
<input #goToInput
mdInput
type="number"
[min]="1"
[max]="pagingBar.maxPage"
[value]="pagingBar.page"
(blur)="goToInput.value = pagingBar.page"
(keyup.enter)="pagingBar.navigateToPage(goToInput.value); goToInput.value = pagingBar.page"/>
</md-input-container>
</td-paging-bar>
]]>
</td-highlight>
<p>Typescript:</p>
<td-highlight lang="typescript">
<![CDATA[
import { IPageChangeEvent } from '@covalent/core';
...
}

}
]]>
</td-highlight>
<h3>Setup:</h3>
<p>Import the [CovalentPagingModule] in your NgModule:</p>
<td-highlight lang="typescript">
<![CDATA[
import { CovalentPagingModule } from '@covalent/core';
@NgModule({
imports: [
CovalentPagingModule,
...
],
...
})
export class MyModule {}
]]>
</td-highlight>
</md-card-content>
export class Demo {
event: IPageChangeEvent;

change(event: IPageChangeEvent): void {
this.event = event;
}
}
]]>
</td-highlight>
</md-card-content>
</md-tab>
</md-tab-group>
</md-card>

<td-readme-loader resourceUrl="platform/core/paging/README.md"></td-readme-loader>
56 changes: 9 additions & 47 deletions src/app/components/components/paging/paging.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,56 +14,18 @@ export class PagingDemoComponent {

@HostBinding('@routeAnimation') routeAnimation: boolean = true;
@HostBinding('class.td-route-animation') classAnimation: boolean = true;

pagingBarAttrs: Object[] = [{
description: `Array that populates page size menu. Defaults to [50, 100, 200, 500, 1000]`,
name: 'pageSizes?',
type: 'number[]',
}, {
description: `Shows or hides the first and last page buttons of the paging bar. Defaults to 'false'`,
name: 'firstLast?',
type: 'boolean',
}, {
description: `Shows or hides the 'all' menu item in the page size menu. Defaults to 'false'`,
name: 'pageSizeAll?',
type: 'boolean',
}, {
description: `Text for the 'all' menu item in the page size menu. Defaults to 'All'`,
name: 'pageSizeAllText?',
type: 'boolean',
}, {
description: `Selected page size for the pagination. Defaults to first element of the [pageSizes] array.`,
name: 'pageSize?',
type: 'number',
}, {
description: `Defines the number of PageLinks to display. PageLinks are used to jump to a specific page, default is 0.`,
name: 'pageLinkCount?',
type: 'number',
}, {
description: `ets starting page for the paging bar. Defaults to '1'`,
name: 'initialPage?',
type: 'number',
}, {
description: `Total rows for the pagination.`,
name: 'total',
type: 'number',
}, {
description: `Method to be executed when page size changes or any button is clicked in the paging bar.`,
name: 'change',
type: 'function($event: IPageChangeEvent)',
}, {
description: `Navigates to a specific valid page.
Returns 'true' if page is valid, else 'false'.`,
name: 'navigateToPage',
type: 'function(page: number): boolean',
}];

event: IPageChangeEvent;

event1: IPageChangeEvent;
event2: IPageChangeEvent;
firstLast: boolean = false;
pageSizeAll: boolean = false;

change(event: IPageChangeEvent): void {
this.event = event;
change1(event: IPageChangeEvent): void {
this.event1 = event;
}

change2(event: IPageChangeEvent): void {
this.event2 = event;
}

toggleFirstLast(): void {
Expand Down
43 changes: 38 additions & 5 deletions src/platform/core/paging/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

The `(change)` event throws an event with the following interface:

```typscript
```typescript
export interface IPageChangeEvent {
page: number;
maxPage: number;
Expand Down Expand Up @@ -51,10 +51,43 @@ export class MyModule {}

Example for HTML usage:

```html
<td-paging-bar #pagingBar pageSizeAllText="allText" [firstLast]="true|false" [pageSizeAll]="true|false" [pageSizes]="[100,200,500,1000,2000]"
[initialPage]="1" [pageSize]="100" [total]="1345" (change)="change($event)">
```html
<td-paging-bar #pagingBar
pageSizeAllText="allText"
[firstLast]="true"
[pageSizeAll]="true"
[pageSizes]="[100,200,500,1000,2000]"
[initialPage]="1"
[pageSize]="100"
[total]="1345"
(change)="change($event)">
<span td-paging-bar-label hide-xs>Row per page:</span>
{{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
</td-paging-bar>
```

Example with material input for `Go to` usage:

```html
<td-paging-bar #pagingBar
[pageSizes]="[50,100,200,500]"
pageLinkCount="5"
[initialPage]="1"
[pageSize]="100"
[total]="1345"
(change)="change($event)">
<span td-paging-bar-label hide-xs>Row per page:</span>
{{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
<p hide-xs>Go to:</p>
<md-input-container>
<input #goToInput
mdInput
type="number"
[min]="1"
[max]="pagingBar.maxPage"
[value]="pagingBar.page"
(blur)="goToInput.value = pagingBar.page"
(keyup.enter)="pagingBar.navigateToPage(goToInput.value); goToInput.value = pagingBar.page"/>
</md-input-container>
</td-paging-bar>
```
```
6 changes: 2 additions & 4 deletions src/platform/core/paging/paging-bar.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div layout="row" layout-align="end center" class="md-caption td-paging-bar">
<div layout="row" layout-align="end center" class="md-caption td-paging-bar" (change)="$event.stopPropagation()" >
<ng-content select="[td-paging-bar-label]"></ng-content>
<md-select [(ngModel)]="pageSize">
<ng-template let-size ngFor [ngForOf]="pageSizes">
Expand All @@ -8,9 +8,7 @@
</ng-template>
<md-option *ngIf="pageSizeAll" [value]="total">{{pageSizeAllText}}</md-option>
</md-select>
<div>
<ng-content></ng-content>
</div>
<ng-content></ng-content>
<div class="td-paging-bar-navigation">
<button [id]="'td-paging-bar-' + id + '-first-page'" md-icon-button type="button" *ngIf="firstLast" [disabled]="isMinPage()" (click)="firstPage()">
<md-icon>{{ isRTL ? 'skip_next' : 'skip_previous' }}</md-icon>
Expand Down
2 changes: 1 addition & 1 deletion src/platform/core/paging/paging-bar.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
}
.td-paging-bar {
height: 48px;
> * {
/deep/ > * {
margin: 0 10px;
}
}
Expand Down
Loading