From c2101b007da4e84b7563c08726917ef42c7ea1a1 Mon Sep 17 00:00:00 2001
From: Patrick Smith <patrick+dds@promptworks.com>
Date: Tue, 15 Jan 2019 21:22:22 -0500
Subject: [PATCH] Update display of expired balances on portfolio funding

---
 js/components/tables/task_order_list.js     | 5 +++--
 styles/components/_portfolio_layout.scss    | 6 ++++++
 templates/portfolios/task_orders/index.html | 9 +++++----
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/js/components/tables/task_order_list.js b/js/components/tables/task_order_list.js
index b8015139..d8b6cfbd 100644
--- a/js/components/tables/task_order_list.js
+++ b/js/components/tables/task_order_list.js
@@ -21,7 +21,8 @@ export default {
   name: 'task-order-list',
 
   props: {
-    data: Array
+    data: Array,
+    expired: Boolean
   },
 
   components: {
@@ -53,7 +54,7 @@ export default {
         sortFunc: numericSort
       },
       {
-        displayName: 'Balance',
+        displayName: this.expired ? 'Expired Balance' : 'Balance',
         attr: 'budget',
         class: "table-cell--align-right",
         sortFunc: numericSort
diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss
index 23175add..6702d67d 100644
--- a/styles/components/_portfolio_layout.scss
+++ b/styles/components/_portfolio_layout.scss
@@ -96,4 +96,10 @@
       }
     }
   }
+
+  table {
+    td.unused-balance {
+      color: $color-red;
+    }
+  }
 }
diff --git a/templates/portfolios/task_orders/index.html b/templates/portfolios/task_orders/index.html
index 0f1df834..4951c63d 100644
--- a/templates/portfolios/task_orders/index.html
+++ b/templates/portfolios/task_orders/index.html
@@ -12,10 +12,11 @@
   </a>
 {% endmacro %}
 
-{% macro TaskOrderList(task_orders, label='success') %}
+{% macro TaskOrderList(task_orders, label='success', expired=False) %}
   <task-order-list
     inline-template
     v-bind:data='{{ task_orders | tojson }}'
+    v-bind:expired='{{ 'true' if expired else 'false' }}'
     v-cloak
     >
     <div class='responsive-table-wrapper'>
@@ -56,8 +57,8 @@
             <td class="table-cell--align-right">
               <span v-html='formatDollars(taskOrder.budget)'></span>
             </td>
-            <td class="table-cell--align-right">
-              <span v-html='formatDollars(taskOrder.budget)'></span>
+            <td v-bind:class="{ 'table-cell--align-right': true, 'unused-balance': expired && taskOrder.balance > 0 }">
+              <span v-html='formatDollars(taskOrder.balance)'></span>
             </td>
             <td>
               <a v-bind:href="taskOrder.url" class="icon-link view-task-order-link">
@@ -134,7 +135,7 @@
   {% endif %}
 
   {% if expired_task_orders %}
-    {{ TaskOrderList(expired_task_orders, label='') }}
+    {{ TaskOrderList(expired_task_orders, label='', expired=True) }}
   {% endif %}
 </div>