Add styling to funding alerts

atst/routes/portfolios/task_orders.py

@@ -42,6 +42,7 @@ def portfolio_funding(portfolio_id):
         if active_task_orders
         else None
     )
+    funded = len(active_task_orders) > 1
     total_balance = sum([task_order["balance"] for task_order in active_task_orders])
 
     return render_template(
@@ -51,6 +52,7 @@ def portfolio_funding(portfolio_id):
         active_task_orders=active_task_orders,
         expired_task_orders=task_orders_by_status.get(TaskOrderStatus.EXPIRED, []),
         funding_end_date=funding_end_date,
+        funded=funded,
         total_balance=total_balance,
     )
 

js/components/tables/task_order_list.js

@@ -21,6 +21,7 @@ export default {
   props: {
     data: Array,
     expired: Boolean,
+    funded: Boolean,
   },
 
   components: {

styles/components/_portfolio_layout.scss

@@ -50,6 +50,13 @@
         @include icon-color($color-green);
       }
     }
+
+    .unfunded {
+      color: $color-red;
+      .icon {
+        @include icon-color($color-red);
+      }
+    }
   }
 
   .pending-task-order {
@@ -127,24 +134,36 @@
       background-color: $color-gray-light;
     }
 
-    .to-expiring-soon {
-      font-weight: $font-bold;
-      font-size: 1.5rem;
-      margin-left: $gap;
+    .to-performance-period {
+      &.to-expiring-soon {
 
-      &.funded {
-        color: $color-blue;
-
-        .icon {
-          @include icon-color($color-blue);
+        .to-expiration-alert {
+          font-weight: $font-bold;
+          font-size: 1.5rem;
+          margin-left: $gap;
         }
-      }
 
-      &.unfunded {
-        color: $color-red;
+        &.funded .to-expiration-alert {
+          color: $color-blue;
 
-        .icon {
-          @include icon-color($color-red);
+
+          .icon {
+            @include icon-color($color-blue);
+          }
+        }
+
+        &.unfunded {
+          .to-expiration-alert {
+            color: $color-red;
+          }
+
+          .icon {
+            @include icon-color($color-red);
+          }
+
+          .to-end-date {
+            color: $color-red;
+          }
         }
       }
     }

templates/portfolios/task_orders/index.html

@@ -12,7 +12,7 @@
   </a>
 {% endmacro %}
 
-{% macro TaskOrderList(task_orders, label='success', expired=False) %}
+{% macro TaskOrderList(task_orders, label='success', expired=False, funded=False) %}
   <task-order-list
     inline-template
     v-bind:data='{{ task_orders | tojson }}'
@@ -43,7 +43,7 @@
               <span class='label label--{{ label }}'>!{ taskOrder.display_status }</span>
             </td>
             <td class='table-cell--grow'>
-              <span>
+              <span :class="{ 'to-performance-period': true, 'to-expiring-soon': (taskOrder.days_to_expiration > 0 && taskOrder.days_to_expiration <= 30), 'funded': funded && taskOrder.display_status === 'Active', 'unfunded': !funded && taskOrder.display_status === 'Active' }">
                 <local-datetime
                   v-bind:timestamp="taskOrder.start_date"
                   format="M/D/YYYY">
@@ -51,17 +51,19 @@
                   -
                 <local-datetime
                   v-bind:timestamp="taskOrder.end_date"
-                  format="M/D/YYYY">
+                  format="M/D/YYYY"
+                  class="to-end-date"
+                  >
                 </local-datetime>
                 <span
-                  v-if="taskOrder.display_status ==='Active' && (taskOrder.days_to_expiration > 0 && taskOrder.days_to_expiration <= 30) && taskOrders.length > 1"
-                  class="to-expiring-soon funded">
+                  v-if="taskOrder.days_to_expiration > 0 && taskOrder.days_to_expiration <= 30 && funded"
+                  class="to-expiration-alert">
                     {{ Icon('ok') }} Period ending in !{ taskOrder.days_to_expiration } days, but new period funded
                 </span>
                 <span
-                  v-if="taskOrder.display_status ==='Active' && (taskOrder.days_to_expiration > 0 && taskOrder.days_to_expiration <= 30) && taskOrders.length === 1"
-                  class="to-expiring-soon unfunded">
-                  {{ Icon('alert') }} Period ends in !{ taskOrder.days_to_expiration } days, submit a new task order
+                  v-if="taskOrder.days_to_expiration > 0 && taskOrder.days_to_expiration <= 30 && !funded"
+                  class="to-expiration-alert">
+                  {{ Icon('alert') }} Period ends in !{ taskOrder.days_to_expiration } days, submit a new task order<br>
                 </span>
               </span>
             </td>
@@ -89,15 +91,22 @@
   <div class='panel'>
     <div class='panel__content portfolio-funding__header row'>
       <h3>Portfolio Funding</h3>
-      <div class='portfolio-funding__header--funded-through {{ "funded" if funding_end_date is not none }}'>
-        {% if funding_end_date %}
+      <div class='portfolio-funding__header--funded-through {{ "funded" if funding_end_date is not none and funded else "unfunded"}}'>
+        {% if funding_end_date and funded %}
           {{ Icon('ok') }}
           Funded through
           <local-datetime
-            timestamp="{{ funding_end_date }}"
+            timestamp='{{ funding_end_date }}'
             format="M/D/YYYY">
-            </local-datetime>
-          {% endif %}
+          </local-datetime>
+        {% elif funding_end_date and not funded %}
+          {{ Icon('alert') }}
+          Funded period ends
+          <local-datetime
+            timestamp='{{ funding_end_date }}'
+            format="M/D/YYYY">
+          </local-datetime>
+        {% endif %}
       </div>
       <a href="{{ url_for("task_orders.new", screen=1, portfolio_id=portfolio.id) }}" class="usa-button">Start a New Task Order</a>
     </div>
@@ -136,7 +145,7 @@
   {% endif %}
 
   {% if active_task_orders %}
-    {{ TaskOrderList(active_task_orders, label='success') }}
+    {{ TaskOrderList(active_task_orders, label='success', funded=funded) }}
     <div class='panel portfolio-total-balance'>
       <div class='panel__content row'>
         <span>{{ total_balance | dollars }}</span>