From 3b8825aafd908df38a296c46e447b35a2c0896b8 Mon Sep 17 00:00:00 2001 From: Anthony Pessy Date: Tue, 29 Aug 2017 11:51:08 +0200 Subject: [PATCH] add md-foot component --- README.md | 12 ++++++++++++ addon/components/paper-data-table-foot.js | 15 +++++++++++++++ addon/components/paper-data-table.js | 1 + .../components/paper-data-table-foot.hbs | 4 ++++ addon/templates/components/paper-data-table.hbs | 4 ++++ app/components/paper-data-table-foot.js | 1 + app/styles/md-table-select.scss | 2 +- tests/dummy/app/controllers/application.js | 11 +++++++++++ tests/dummy/app/templates/application.hbs | 14 ++++++++++++++ 9 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 addon/components/paper-data-table-foot.js create mode 100644 addon/templates/components/paper-data-table-foot.hbs create mode 100644 app/components/paper-data-table-foot.js diff --git a/README.md b/README.md index 86b4647..5cb5596 100644 --- a/README.md +++ b/README.md @@ -61,6 +61,18 @@ Port of https://github.com/daniel-nagy/md-data-table using ember-paper {{/body.row}} {{/each}} {{/table.body}} + {{#table.foot as |foot|}} + {{#foot.row as |row|}} + {{#row.cell}}{{/row.cell}} + {{#row.cell}}{{/row.cell}} + {{#each totalDesserts as |total|}} + {{#row.cell numeric=true}} + {{total}} + {{/row.cell}} + {{/each}} + {{#row.cell}}{{/row.cell}} + {{/foot.row}} + {{/table.foot}} {{/paper-data-table}} {{paper-data-table-pagination limit=limit diff --git a/addon/components/paper-data-table-foot.js b/addon/components/paper-data-table-foot.js new file mode 100644 index 0000000..b320d12 --- /dev/null +++ b/addon/components/paper-data-table-foot.js @@ -0,0 +1,15 @@ +import Ember from 'ember'; +import layout from '../templates/components/paper-data-table-foot'; + +const { + Component +} = Ember; + +export default Component.extend({ + classNames: ['md-foot'], + attributeBindings: ['style'], + layout, + tagName: 'tfoot', + cellspacing: '0', + cellpadding: '0', +}); diff --git a/addon/components/paper-data-table.js b/addon/components/paper-data-table.js index c9f85f9..1b2baf0 100644 --- a/addon/components/paper-data-table.js +++ b/addon/components/paper-data-table.js @@ -13,6 +13,7 @@ export default Component.extend({ bodyComponent: 'paper-data-table-body', bodyRowComponent: 'paper-data-table-row', headComponent: 'paper-data-table-head', + footComponent: 'paper-data-table-foot', rowWidth: 0, sortProp: '', sortDir: 'asc', diff --git a/addon/templates/components/paper-data-table-foot.hbs b/addon/templates/components/paper-data-table-foot.hbs new file mode 100644 index 0000000..dc544b6 --- /dev/null +++ b/addon/templates/components/paper-data-table-foot.hbs @@ -0,0 +1,4 @@ +{{yield (hash + row=(component bodyRowComponent selectable=selectable) + ) +}} diff --git a/addon/templates/components/paper-data-table.hbs b/addon/templates/components/paper-data-table.hbs index 52891d3..b96d059 100644 --- a/addon/templates/components/paper-data-table.hbs +++ b/addon/templates/components/paper-data-table.hbs @@ -14,5 +14,9 @@ selectable=selectable setRowWidth=(action (mut rowWidth)) ) + foot=(component footComponent + bodyRowComponent=bodyRowComponent + selectable=selectable + ) )}} diff --git a/app/components/paper-data-table-foot.js b/app/components/paper-data-table-foot.js new file mode 100644 index 0000000..095f2ba --- /dev/null +++ b/app/components/paper-data-table-foot.js @@ -0,0 +1 @@ +export { default } from 'paper-data-table/components/paper-data-table-foot'; diff --git a/app/styles/md-table-select.scss b/app/styles/md-table-select.scss index 9def181..209b552 100755 --- a/app/styles/md-table-select.scss +++ b/app/styles/md-table-select.scss @@ -53,4 +53,4 @@ md-select.md-table-select { .md-select-menu-container.md-pagination-select .md-text { font-size: 12px; -} \ No newline at end of file +} diff --git a/tests/dummy/app/controllers/application.js b/tests/dummy/app/controllers/application.js index 0eaf6f4..c939ad9 100644 --- a/tests/dummy/app/controllers/application.js +++ b/tests/dummy/app/controllers/application.js @@ -15,6 +15,17 @@ export default Ember.Controller.extend({ limit: 5, pages: Ember.A([1,2]), page: 1, + totals: Ember.computed('desserts.[]', function() { + let desserts = this.get('desserts'); + let sumBy = (desserts, prop) => Math.round(desserts.reduce((sum, row) => sum + row[prop], 0)); + return [ + sumBy(desserts, 'calories'), + sumBy(desserts, 'fat'), + sumBy(desserts, 'carbs'), + sumBy(desserts, 'protein'), + sumBy(desserts, 'sodium') + ]; + }), paginatedDesserts: Ember.computed('page','limit',function () { let ind = (this.get('page') - 1) * this.get('limit'); diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs index 03e9fa8..1d33847 100644 --- a/tests/dummy/app/templates/application.hbs +++ b/tests/dummy/app/templates/application.hbs @@ -55,6 +55,20 @@ {{/body.row}} {{/each}} {{/table.body}} + {{#table.foot as |foot|}} + {{#foot.row edit=false as |row|}} + {{#row.cell}}{{/row.cell}} + {{#row.cell}}{{/row.cell}} + {{#each totals as |total|}} + {{#row.cell numeric=true}} + {{total}} + {{/row.cell}} + {{/each}} + {{#row.cell}}{{/row.cell}} + {{#row.cell}}{{/row.cell}} + {{#row.cell}}{{/row.cell}} + {{/foot.row}} + {{/table.foot}} {{/paper-data-table}} {{paper-data-table-pagination limit=limit