feat(wallet-overview): routable current account

nano-wallet-company · Apr 11, 2018 · f313d10 · f313d10
1 parent 18facbe
commit f313d10
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 60 deletions.
diff --git a/app/components/account-carousel/component.js b/app/components/account-carousel/component.js
@@ -1,18 +1,25 @@
 import Component from '@ember/component';
 
 import { task, waitForQueue } from 'ember-concurrency';
-import { runTask, runDisposables } from 'ember-lifeline';
+import { runTask, scheduleTask, runDisposables } from 'ember-lifeline';
 
 import { computed, observes } from 'ember-decorators/object';
 import { on } from 'ember-decorators/object/evented';
 
 export default Component.extend({
   accounts: null,
 
+  onChangeSlide: null,
+
   currentSlide: 0,
 
   slickInstance: null,
 
+  willDestroy(...args) {
+    runDisposables(this);
+    return this._super(...args);
+  },
+
   @on('didInsertElement')
   addChangeListener() {
     this.$().on('afterChange', (event, slick, currentSlide) => {
@@ -22,9 +29,12 @@ export default Component.extend({
     });
   },
 
-  willDestroy(...args) {
-    runDisposables(this);
-    return this._super(...args);
+  @observes('currentSlide')
+  currentSlideDidChange() {
+    return scheduleTask(this, 'actions', () => {
+      const currentSlide = this.get('currentSlide');
+      return this.get('onChangeSlide')(currentSlide);
+    });
   },
 
   @on('didInsertElement')
@@ -47,12 +57,13 @@ export default Component.extend({
         slidesToScroll: 4,
         dots: true,
         infinite: false,
-        speed: 250,
+        speed: 200,
         arrows: true,
+        respondTo: 'min',
       });
     }
 
-    yield this.slickInstance;
+    return yield this.slickInstance;
   }).keepLatest(),
 
   @on('willDestroyElement')
@@ -62,16 +73,17 @@ export default Component.extend({
 
   teardownSlider: task(function* teardownSlider() {
     if (this.slickInstance && !this.isDestroyed) {
-      this.$().slick('unslick');
+      this.slickInstance.slick('unslick');
       this.slickInstance = null;
     }
 
-    yield this.slickInstance;
+    return yield this.slickInstance;
   }).keepLatest(),
 
   refreshSlider: task(function* refreshSlider() {
     yield this.get('teardownSlider').perform();
     yield this.get('setupSlider').perform();
+    return yield this.slickInstance;
   }).keepLatest(),
 
   @observes('accounts.@each')
@@ -86,14 +98,14 @@ export default Component.extend({
         breakpoint: 1500,
         settings: {
           slidesToShow: 3,
-          slidesToScroll: 3,
+          slidesToScroll: 1,
         },
       },
       {
         breakpoint: 1200,
         settings: {
           slidesToShow: 2,
-          slidesToScroll: 2,
+          slidesToScroll: 1,
         },
       },
       {

diff --git a/app/components/wallet-overview/component.js b/app/components/wallet-overview/component.js
@@ -3,17 +3,14 @@ import Component from '@ember/component';
 import { service } from 'ember-decorators/service';
 import { computed } from 'ember-decorators/object';
 
-import Table from 'ember-light-table';
-
-import PagedMixin from '../../mixins/paged';
-
-export default Component.extend(PagedMixin, {
+export default Component.extend({
   @service intl: null,
 
   wallet: null,
   accounts: null,
-  totals: null,
-  contentKey: 'accounts',
+  currentSlide: 0,
+
+  onChangeSlide: null,
 
   @computed()
   get breakpoints() {
@@ -50,35 +47,4 @@ export default Component.extend(PagedMixin, {
       },
     ];
   },
-
-  @computed('intl.locale')
-  get columns() {
-    const intl = this.get('intl');
-    return [
-      {
-        label: intl.t('account'),
-        valuePath: 'id',
-        width: '60%',
-        cellComponent: 'account-link',
-      },
-      {
-        label: intl.t('balance'),
-        valuePath: 'balance',
-        width: '20%',
-        cellComponent: 'account-amount',
-      },
-      {
-        label: intl.t('pending'),
-        valuePath: 'pending',
-        cellComponent: 'account-amount',
-      },
-    ];
-  },
-
-  @computed('columns.@each', 'pagedContent.@each')
-  get table() {
-    const columns = this.get('columns');
-    const pagedContent = this.get('pagedContent');
-    return new Table(columns, pagedContent);
-  },
 });
diff --git a/app/components/wallet-overview/template.hbs b/app/components/wallet-overview/template.hbs
@@ -2,7 +2,7 @@
   <div class="container-fluid">
     <div class="row">
       <div class="col {{unless hideHistory 'show-history'}}">
-        {{account-carousel hideHistory=hideHistory accounts=accounts}}
+        {{account-carousel hideHistory=hideHistory accounts=accounts currentSlide=currentSlide onChangeSlide=(action onChangeSlide)}}
       </div>
     </div>
   </div>

diff --git a/app/wallets/overview/accounts/history/route.js b/app/wallets/overview/accounts/history/route.js
@@ -2,7 +2,7 @@ import Route from '@ember/routing/route';
 import { get, set } from '@ember/object';
 import { action } from 'ember-decorators/object';
 
-import { hash } from 'rsvp';
+import { hash } from 'ember-concurrency';
 
 export default Route.extend({
   async model() {

diff --git a/app/wallets/overview/controller.js b/app/wallets/overview/controller.js
@@ -4,6 +4,10 @@ import { computed } from 'ember-decorators/object';
 import { sort } from '@ember/object/computed';
 
 export default Controller.extend({
+  queryParams: ['slide', 'currency'],
+  slide: 0,
+  currency: 'NANO',
+
   hideHistory: true,
   expand: false,
   shrink: false,

diff --git a/app/wallets/overview/route.js b/app/wallets/overview/route.js
@@ -30,6 +30,16 @@ export default Route.extend(AuthenticatedRouteMixin, {
     return wallet;
   },
 
+  @action
+  changeSlide(slide) {
+    return this.transitionTo({ queryParams: { slide } });
+  },
+
+  @action
+  changeCurrency(currency) {
+    return this.transitionTo({ queryParams: { currency } });
+  },
+
   @action
   toggleButton() {
     const walletOverviewController = this.controllerFor('wallets.overview');

diff --git a/app/wallets/overview/settings/template.hbs b/app/wallets/overview/settings/template.hbs
@@ -1,4 +1,4 @@
-{{#bs-modal onHide=(route-action 'cancel') as |modal|}}
+{{#bs-modal renderInPlace=true onHide=(route-action 'cancel') as |modal|}}
   {{#modal.header}}
     <h4 class="modal-title">
       {{t 'walletSettings'}}

diff --git a/app/wallets/overview/template.hbs b/app/wallets/overview/template.hbs
@@ -1,8 +1,8 @@
 {{#if hideHistory}}
-  {{balance-overview wallet=model}}
+  {{balance-overview wallet=model currency=currency onChangeCurrency=(route-action 'changeCurrency')}}
 {{/if}}
 
-{{wallet-overview wallet=model accounts=sortedAccounts hideHistory=hideHistory createAccount=(route-action 'createAccount') page=page perPage=perPage}}
+{{wallet-overview wallet=model accounts=sortedAccounts hideHistory=hideHistory createAccount=(route-action 'createAccount') currentSlide=slide onChangeSlide=(route-action 'changeSlide')}}
 
 {{liquid-outlet class="history"}}
 

diff --git a/tests/integration/components/wallet-overview/component-test.js b/tests/integration/components/wallet-overview/component-test.js
@@ -39,17 +39,12 @@ describe('Integration | Component | wallet overview', () => {
       }),
     ];
 
-    const page = 1;
-    const perPage = 10;
-
-    const createAccount = () => false;
+    const onChangeSlide = () => false;
 
     this.setProperties({
       wallet,
       accounts,
-      page,
-      perPage,
-      createAccount,
+      onChangeSlide,
     });
 
     this.render(hbs`{{wallet-overview wallet=wallet accounts=accounts page=page perPage=perPage createAccount=createAccount}}`);