From 0a04b76d67697da5594fec8e59174f887e468b51 Mon Sep 17 00:00:00 2001 From: Devin Alexander Torres Date: Mon, 25 Dec 2017 13:50:13 -0600 Subject: [PATCH] feat(history): Add row-level coloring to history --- .../account-history-entry/component.js | 11 +++++++++ .../account-history-entry/template.hbs | 8 +++++++ app/components/account-history/component.js | 13 +++++----- app/components/account-history/template.hbs | 2 +- app/wallets/template.hbs | 4 ++-- package-lock.json | 9 +++++++ package.json | 1 + .../account-history-entry/component-test.js | 24 +++++++++++++++++++ 8 files changed, 63 insertions(+), 9 deletions(-) create mode 100644 app/components/account-history-entry/component.js create mode 100644 app/components/account-history-entry/template.hbs create mode 100644 tests/integration/components/account-history-entry/component-test.js diff --git a/app/components/account-history-entry/component.js b/app/components/account-history-entry/component.js new file mode 100644 index 00000000..5fb1b4e6 --- /dev/null +++ b/app/components/account-history-entry/component.js @@ -0,0 +1,11 @@ +import Row from 'ember-light-table/components/lt-row'; + +import { alias, equal } from 'ember-decorators/object/computed'; + +export default Row.extend({ + classNameBindings: ['isSend:text-danger', 'isReceive:text-success'], + + @alias('row.content.type') type: null, + @equal('type', 'send') isSend: false, + @equal('type', 'receive') isReceive: false, +}); diff --git a/app/components/account-history-entry/template.hbs b/app/components/account-history-entry/template.hbs new file mode 100644 index 00000000..f437205a --- /dev/null +++ b/app/components/account-history-entry/template.hbs @@ -0,0 +1,8 @@ +{{#each columns as |column|}} + {{component (concat 'light-table/cells/' column.cellType) column row + table=table + rawValue=(get row column.valuePath) + tableActions=tableActions + extra=extra + }} +{{/each}} diff --git a/app/components/account-history/component.js b/app/components/account-history/component.js index e568040a..02eff4ef 100644 --- a/app/components/account-history/component.js +++ b/app/components/account-history/component.js @@ -23,20 +23,21 @@ export default Component.extend(PagedMixin, { valuePath: 'type', width: '10%', }, - { - label: 'Account', - valuePath: 'account', - width: '60%', - cellComponent: 'account-link', - }, { label: 'Amount', valuePath: 'amount', + width: '20%', cellClassNames: 'text-truncate', format(rawValue) { return formatAmount(rawValue); }, }, + { + label: 'Account', + valuePath: 'account', + // width: '60%', + cellComponent: 'account-link', + }, ]; }, diff --git a/app/components/account-history/template.hbs b/app/components/account-history/template.hbs index 78eb92dc..91e2d8a8 100644 --- a/app/components/account-history/template.hbs +++ b/app/components/account-history/template.hbs @@ -3,7 +3,7 @@ {{#light-table table tableClassNames='table table-striped' height='auto' as |t|}} {{t.head}} - {{#t.body canSelect=false as |body|}} + {{#t.body canSelect=false rowComponent=(component 'account-history-entry') as |body|}} {{#if (is-pending content)}} {{#body.loader}} {{fa-icon 'refresh' size=3 spin=true ariaLabel="Loading..."}} diff --git a/app/wallets/template.hbs b/app/wallets/template.hbs index 9d310e40..2374778e 100644 --- a/app/wallets/template.hbs +++ b/app/wallets/template.hbs @@ -28,12 +28,12 @@ {{#navbar.content}} {{#navbar.nav as |nav|}} {{#nav.item}} - {{#nav.link-to 'wallets.overview' 'foo'}} + {{#nav.link-to 'wallets.overview' model}} Overview {{/nav.link-to}} {{/nav.item}} {{#nav.item}} - {{#nav.link-to 'wallets.send' 'foo'}} + {{#nav.link-to 'wallets.send' model}} Send {{/nav.link-to}} {{/nav.item}} diff --git a/package-lock.json b/package-lock.json index c482115a..06621330 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8020,6 +8020,15 @@ } } }, + "ember-chrome-devtools": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/ember-chrome-devtools/-/ember-chrome-devtools-0.2.0.tgz", + "integrity": "sha1-8yh932DQ6pEnyTKS3ob/8vHDbfg=", + "dev": true, + "requires": { + "ember-cli-babel": "6.11.0" + } + }, "ember-cli": { "version": "2.17.1", "resolved": "https://registry.npmjs.org/ember-cli/-/ember-cli-2.17.1.tgz", diff --git a/package.json b/package.json index 26f469df..8e0a5a0c 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "ember-browserify": "^1.2.0", "ember-changeset": "^1.4.1", "ember-changeset-validations": "^1.2.9", + "ember-chrome-devtools": "^0.2.0", "ember-cli": "^2.17.1", "ember-cli-app-version": "^3.1.3", "ember-cli-babel": "^6.11.0", diff --git a/tests/integration/components/account-history-entry/component-test.js b/tests/integration/components/account-history-entry/component-test.js new file mode 100644 index 00000000..8334ee72 --- /dev/null +++ b/tests/integration/components/account-history-entry/component-test.js @@ -0,0 +1,24 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('account-history-entry', 'Integration | Component | account history entry', { + integration: true +}); + +test('it renders', function(assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.on('myAction', function(val) { ... }); + + this.render(hbs`{{account-history-entry}}`); + + assert.equal(this.$().text().trim(), ''); + + // Template block usage: + this.render(hbs` + {{#account-history-entry}} + template block text + {{/account-history-entry}} + `); + + assert.equal(this.$().text().trim(), 'template block text'); +});