minor UI enhancements

RedElastic · Jun 10, 2019 · c438ef6 · c438ef6
1 parent 3ff9640
commit c438ef6
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/ui/src/components/pages/transfers/New.vue b/ui/src/components/pages/transfers/New.vue
@@ -78,7 +78,7 @@
             </b-form>
           </div>          
           <div class="col-5">          
-            <div class="card">
+            <div id="cashOnHandCard" class="card" v-bind:class="{ itemhighlight: cashOnHandHighlight == true }">
               <div class="card-body">          
                 <h4>Active Portfolio</h4>          
                 <div class="row">
@@ -154,7 +154,7 @@
               </td>
               <td>{{ transfer.source }}</td>                          
               <td>{{ transfer.destination }}</td>
-              <td>{{ transfer.amount }}</td>
+              <td>{{ transfer.amount | toCurrency }}</td>
             </tr>
           </tbody>
         </table>       
@@ -195,7 +195,8 @@ export default {
           { value: 'portfolio', text: 'Another portfolio' }
         ]
       },
-      showDismissibleAlert: false
+      showDismissibleAlert: false,
+      cashOnHandHighlight: false
     }
   },
   computed: {
@@ -236,6 +237,9 @@ export default {
        this.cashOnHand = details.funds;
       });
     },
+    resetHighlight() {
+      setTimeout(() => this.cashOnHandHighlight = false, 5000);
+    },
     onSubmit() {
       this.submitted = true;
       submitTransfer(this.form)
@@ -283,6 +287,9 @@ export default {
             };
             this.transfers.splice(index, 1, t);
             this.updateCashOnHand();
+            // flash the 'cash on hand' card to let users know it's been updated
+            this.cashOnHandHighlight = true;
+            this.resetHighlight();
           }
         };
       };
@@ -301,8 +308,8 @@ export default {
       to { background: transparent; }
   }
 
-  .item-highlight {
+  .itemhighlight {
       animation-name: yellowfade;
-      animation-duration: 1.5s;
+      animation-duration: 2.5s;
   }
 </style>
diff --git a/ui/src/main.js b/ui/src/main.js
@@ -37,8 +37,9 @@ Vue.use(Rollbar, {
 });
 
 Vue.filter('toCurrency', function (value) {
+    var v = value;
     if (typeof value !== "number") {
-        return value;
+        v = parseInt(value);
     }
     var formatter = new Intl.NumberFormat('en-US', {
         style: 'currency',