Updates api for dataset-table-page to include colspan. Component is nested in a tfoot>td and is contained in the table to access contextual properties

This commit is contained in:
Seyi Adebajo 2017-03-28 11:26:09 -07:00 committed by Mars Lan
parent 9e87ca6cd5
commit da0a23e60d
8 changed files with 96 additions and 51 deletions

View File

@ -8,7 +8,9 @@ const {
} = Ember; } = Ember;
export default Component.extend({ export default Component.extend({
tagName: 'section', tagName: '',
classNames: ['nacho-pager'],
pages: computed('data', 'limit', function() { pages: computed('data', 'limit', function() {
const { data, limit: rowsPerPage = 1 } = getProperties( const { data, limit: rowsPerPage = 1 } = getProperties(

View File

@ -0,0 +1,18 @@
.nacho-pager {
@include flex-center;
&__section {
@include flex-center;
display: inline-flex;
margin: 0 10px;
}
&__select {
width: 80px;
}
&__desc {
padding: 10px;
margin: 0;
}
}

View File

@ -53,14 +53,16 @@
{{/each}} {{/each}}
{{/table.body}} {{/table.body}}
{{#table.foot}} {{#table.foot}}
{{dataset-table-pager data=table.data {{dataset-table-pager
page=table.page data=table.data
limit=table.limit page=table.page
pageLengths=table.pageLengths limit=table.limit
beginOffset=table.beginOffset pageLengths=table.pageLengths
endOffset=table.endOffset beginOffset=table.beginOffset
onLimitChanged=table.onLimitChanged endOffset=table.endOffset
onPageChanged=table.onPageChanged}} onLimitChanged=table.onLimitChanged
pagerColSpan=2
onPageChanged=table.onPageChanged}}
{{/table.foot}} {{/table.foot}}
{{/dataset-table}} {{/dataset-table}}
</div> </div>

View File

@ -48,13 +48,16 @@
{{/each}} {{/each}}
{{/table.body}} {{/table.body}}
{{#table.foot}} {{#table.foot}}
{{dataset-table-pager data=table.data {{dataset-table-pager
page=table.page data=table.data
limit=table.limit page=table.page
pageLengths=table.pageLengths limit=table.limit
beginOffset=table.beginOffset pageLengths=table.pageLengths
endOffset=table.endOffset beginOffset=table.beginOffset
onLimitChanged=table.onLimitChanged endOffset=table.endOffset
onPageChanged=table.onPageChanged}} onLimitChanged=table.onLimitChanged
onPageChanged=table.onPageChanged
pagerColSpan=pagerColSpan
pagerColSpan=5}}
{{/table.foot}} {{/table.foot}}
{{/dataset-table}} {{/dataset-table}}

View File

@ -40,13 +40,16 @@
{{/each}} {{/each}}
{{/table.body}} {{/table.body}}
{{#table.foot}} {{#table.foot}}
{{dataset-table-pager data=table.data {{dataset-table-pager
page=table.page data=table.data
limit=table.limit page=table.page
pageLengths=table.pageLengths limit=table.limit
beginOffset=table.beginOffset pageLengths=table.pageLengths
endOffset=table.endOffset beginOffset=table.beginOffset
onLimitChanged=table.onLimitChanged endOffset=table.endOffset
onPageChanged=table.onPageChanged}} onLimitChanged=table.onLimitChanged
onPageChanged=table.onPageChanged
pagerSpan=foot.pagerSpan
pagerColSpan=4}}
{{/table.foot}} {{/table.foot}}
{{/dataset-table}} {{/dataset-table}}

View File

@ -39,14 +39,17 @@
{{/body.row}} {{/body.row}}
{{/each}} {{/each}}
{{/table.body}} {{/table.body}}
{{#table.foot}} {{#table.foot as |foot|}}
{{dataset-table-pager data=table.data {{dataset-table-pager
page=table.page data=table.data
limit=table.limit page=table.page
pageLengths=table.pageLengths limit=table.limit
beginOffset=table.beginOffset pageLengths=table.pageLengths
endOffset=table.endOffset beginOffset=table.beginOffset
onLimitChanged=table.onLimitChanged endOffset=table.endOffset
onPageChanged=table.onPageChanged}} onLimitChanged=table.onLimitChanged
onPageChanged=table.onPageChanged
pagerSpan=foot.pagerSpan
pagerColSpan=4}}
{{/table.foot}} {{/table.foot}}
{{/dataset-table}} {{/dataset-table}}

View File

@ -1,19 +1,33 @@
<article> <td colspan={{pagerColSpan}}>
<p>Page:</p> <section class="nacho-pager">
{{ember-selector values=pages selected=page selectionDidChange="changePage"}} <span class="nacho-pager__section">
</article> <p class="nacho-pager__desc">Page</p>
{{ember-selector
values=pages
selected=page
class="nacho-pager__select"
selectionDidChange="changePage"}}
</span>
<article> <span class="nacho-pager__section">
<p>Rows per page:</p> <p class="nacho-pager__desc">Rows</p>
{{ember-selector values=pageLengths selected=limit selectionDidChange="changeLimit"}} {{ember-selector
</article> values=pageLengths
selected=limit
class="nacho-pager__select"
selectionDidChange="changeLimit"}}
</span>
<div> <span class="nacho-pager__section">
<button {{action "onDecrementPage"}}> <button class="nacho-button" {{action "onDecrementPage"}}>
<i aria-label="Sorting arrow" class="glyphicon glyphicon-arrow-left"></i> <i aria-label="Sorting arrow"
</button> class="glyphicon glyphicon-chevron-left"></i>
</button>
<button {{action "onIncrementPage"}}> <button class="nacho-button" {{action "onIncrementPage"}}>
<i aria-label="Sorting arrow" class="glyphicon glyphicon-arrow-right"></i> <i aria-label="Sorting arrow"
</button> class="glyphicon glyphicon-chevron-right"></i>
</div> </button>
</span>
</section>
</td>