Show pending task orders at top of funding page

atst/routes/portfolios/task_orders.py

@@ -1,14 +1,25 @@
+from collections import defaultdict
+
 from flask import g, render_template
 
 from . import portfolios_bp
 from atst.domain.task_orders import TaskOrders
 from atst.domain.portfolios import Portfolios
+from atst.models.task_order import Status as TaskOrderStatus
 
 
 @portfolios_bp.route("/portfolios/<portfolio_id>/task_orders")
 def portfolio_task_orders(portfolio_id):
     portfolio = Portfolios.get(g.current_user, portfolio_id)
-    return render_template("portfolios/task_orders/index.html", portfolio=portfolio)
+    task_orders_by_status = defaultdict(list)
+    for task_order in portfolio.task_orders:
+        task_orders_by_status[task_order.status].append(task_order)
+
+    return render_template(
+        "portfolios/task_orders/index.html",
+        portfolio=portfolio,
+        pending_task_orders=task_orders_by_status.get(TaskOrderStatus.PENDING, []),
+    )
 
 
 @portfolios_bp.route("/portfolios/<portfolio_id>/task_order/<task_order_id>")

styles/components/_portfolio_layout.scss

@@ -29,3 +29,37 @@
     }
   }
 }
+
+.portfolio-funding {
+  .pending-task-order {
+    background-color: $color-gold-lightest;
+
+    align-items: center;
+    margin: 0;
+    padding: 2 * $gap;
+
+    dt {
+      font-weight: bold;
+    }
+
+    dd {
+      margin-left: 0;
+    }
+
+    .label {
+      margin-right: 2 * $gap;
+    }
+
+    .pending-task-order__started {
+      flex-grow: 1;
+    }
+
+    .pending-task-order__value {
+      text-align: right;
+    }
+  }
+
+  .view-task-order-link {
+    margin-left: $gap * 2;
+  }
+}

templates/portfolios/task_orders/index.html

@@ -1,10 +1,43 @@
 {% from "components/empty_state.html" import EmptyState %}
+{% from "components/icon.html" import Icon %}
 
 {% extends "portfolios/base.html" %}
 
 {% block portfolio_content %}
 
-{% if not portfolio.task_orders %}
+{% macro ViewLink(task_order) %}
+
+  <a href="{{ url_for('portfolios.view_task_order', portfolio_id=portfolio.id, task_order_id=task_order.id) }}" class="icon-link view-task-order-link">
+    <span>View</span>
+    {{ Icon("caret_right") }}
+  </a>
+{% endmacro %}
+
+<div class="portfolio-funding">
+  {% for task_order in pending_task_orders %}
+    <div class='panel'>
+      <div class='panel__content pending-task-order row'>
+        <span class='label label--warning'>Pending</span>
+        <div class="pending-task-order__started col">
+          <dt>Started</dt>
+          <dd>
+            <local-datetime
+              timestamp="{{ task_order.time_created }}"
+              format="M/D/YYYY">
+              </local-datetime>
+          </dd>
+        </div>
+        <div class="pending-task-order__value col">
+          <dt>Value</dt>
+          <dd>{{ task_order.budget | dollars }}</dd>
+        </div>
+        {{ ViewLink(task_order) }}
+      </div>
+    </div>
+  {% endfor %}
+
+
+  {% if not portfolio.task_orders %}
 
     {{ EmptyState(
       'This portfolio doesn’t have any task orders yet.',
@@ -13,7 +46,7 @@
       icon='cloud',
     ) }}
 
-{% else %}
+  {% else %}
 
     <ul>
       {% for task_order in portfolio.task_orders %}
@@ -25,6 +58,7 @@
       {% endfor %}
     </ul>
 
-{% endif %}
+  {% endif %}
+</div>
 
 {% endblock %}