diff --git a/atst/routes/task_orders/index.py b/atst/routes/task_orders/index.py index db42109d..d91db98f 100644 --- a/atst/routes/task_orders/index.py +++ b/atst/routes/task_orders/index.py @@ -1,6 +1,6 @@ from collections import defaultdict -from flask import g, render_template, url_for +from flask import g, render_template from . import task_orders_bp from atst.domain.authz.decorator import user_can_access_decorator as user_can @@ -30,22 +30,6 @@ def review_task_order(task_order_id): return render_template("portfolios/task_orders/review.html", task_order=task_order) -def serialize_task_order(task_order): - return { - key: getattr(task_order, key) - for key in [ - "id", - "budget", - "time_created", - "start_date", - "end_date", - "display_status", - "days_to_expiration", - "balance", - ] - } - - @task_orders_bp.route("/portfolios//task_orders") @user_can(Permissions.VIEW_PORTFOLIO_FUNDING, message="view portfolio funding") def portfolio_funding(portfolio_id): @@ -53,14 +37,9 @@ def portfolio_funding(portfolio_id): task_orders_by_status = defaultdict(list) for task_order in portfolio.task_orders: - serialized_task_order = serialize_task_order(task_order) - serialized_task_order["url"] = url_for( - "task_orders.view_task_order", task_order_id=task_order.id - ) - task_orders_by_status[task_order.status].append(serialized_task_order) + task_orders_by_status[task_order.status].append(task_order) active_task_orders = task_orders_by_status.get(TaskOrderStatus.ACTIVE, []) - total_balance = sum([task_order["balance"] for task_order in active_task_orders]) return render_template( "portfolios/task_orders/index.html", @@ -70,5 +49,4 @@ def portfolio_funding(portfolio_id): ), active_task_orders=active_task_orders, expired_task_orders=task_orders_by_status.get(TaskOrderStatus.EXPIRED, []), - total_balance=total_balance, ) diff --git a/styles/atat.scss b/styles/atat.scss index 3f745e78..5d41ed96 100644 --- a/styles/atat.scss +++ b/styles/atat.scss @@ -22,6 +22,7 @@ @import "elements/kpi"; @import "elements/graphs"; @import "elements/menu"; +@import "elements/card"; @import "components/accordion_table"; @import "components/topbar"; diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 3416aa08..90b06034 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -20,7 +20,7 @@ flex-direction: row; } - margin-bottom: $gap * 4; + margin-bottom: $gap * 1; .col--grow { overflow: inherit; @@ -127,7 +127,7 @@ } .portfolio-content { - margin: 6 * $gap $gap 0 $gap; + margin: 1 * $gap $gap 0 $gap; .panel { @include shadow-panel; @@ -373,7 +373,7 @@ } .portfolio-funding { - padding: 2 * $gap; + padding: (2 * $gap) 0; .panel { @include shadow-panel; diff --git a/styles/components/_sticky_cta.scss b/styles/components/_sticky_cta.scss index d4619c76..14057ac1 100644 --- a/styles/components/_sticky_cta.scss +++ b/styles/components/_sticky_cta.scss @@ -4,12 +4,12 @@ } @include media($medium-screen) { - margin-left: -$gap * 7; + margin-left: -$gap * 5; } } .sticky-cta.js-is-sticky { - width: 78.5%; + width: 80.8%; } .sticky-cta-container { diff --git a/styles/core/_variables.scss b/styles/core/_variables.scss index 4463f1bd..4ec4ab39 100644 --- a/styles/core/_variables.scss +++ b/styles/core/_variables.scss @@ -165,6 +165,7 @@ $checkbox-border-radius: 2px; $border-radius: 3px; $button-border-radius: 5px; $box-shadow: 0px 2px 5px 0px $color-shadow; +$box-shadow-big: 0 4px 10px 0 rgba(193, 193, 193, 0.5); $focus-outline: 2px dotted $color-gray-light; $focus-spacing: 3px; $nav-width: 300px; diff --git a/styles/elements/_card.scss b/styles/elements/_card.scss new file mode 100644 index 00000000..28f416da --- /dev/null +++ b/styles/elements/_card.scss @@ -0,0 +1,34 @@ +.card { + width: 100%; + box-shadow: $box-shadow-big; + padding: ($gap * 2) ($gap * 2.5) ($gap * 4) ($gap * 3); + margin-bottom: 20px; + + .card__status { + display: flex; + align-items: baseline; + justify-content: space-around; + + .card__status-spacer { + flex-grow: 10; + } + } + + .card__header h3 { + margin-top: 0; + } + + .card__body { + font-size: $small-font-size; + } +} + +.card { + .label { + margin-left: 0; + } + + .datetime { + font-size: $small-font-size; + } +} diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss index bdcaf40e..445ab557 100644 --- a/styles/sections/_task_order.scss +++ b/styles/sections/_task_order.scss @@ -66,6 +66,19 @@ } } +.task-order-list { + margin-top: 6 * $gap; +} + +.task-order-card .label { + font-size: $small-font-size; + margin-right: 2 * $gap; +} + +.task-order-card__buttons .usa-button { + min-width: 10rem; +} + .task-order-summary { margin: $gap * 4; diff --git a/templates/portfolios/base.html b/templates/portfolios/base.html index 127200c3..685c7057 100644 --- a/templates/portfolios/base.html +++ b/templates/portfolios/base.html @@ -7,7 +7,6 @@ {% block portfolio_header %} {% include "portfolios/header.html" %} {% endblock %} -
{% block portfolio_content %}{% endblock %}
diff --git a/templates/portfolios/task_orders/index.html b/templates/portfolios/task_orders/index.html index 59c0a3f8..328c8994 100644 --- a/templates/portfolios/task_orders/index.html +++ b/templates/portfolios/task_orders/index.html @@ -6,121 +6,71 @@ {% block portfolio_content %} -{% macro ViewLink(task_order) %} - - View - {{ Icon("caret_right", classes="icon--tiny") }} +{% macro ViewLink(task_order, text="Edit") %} + + {{ text }} {% endmacro %} -{% macro TaskOrderList(task_orders, label='success', expired=False, funded=False) %} - -
- - - - - - +{% macro TaskOrderDateTime(dt, className="") %} + +{% endmacro %} - - - - - - - - - {{ caller and caller() }} - -
- !{ col.displayName } - -
- !{ taskOrder.display_status } - - - - - - - - - - {{ Icon('ok') }} Period ending in !{ taskOrder.days_to_expiration } days, but new period funded - - - {{ Icon('alert') }} Period ends in !{ taskOrder.days_to_expiration } days, submit a new task order - - - - - - - - - View - {{ Icon("caret_right", classes="icon--tiny") }} - -
-
- +{% macro TaskOrderDate(task_order) %} + + {% if task_order.is_active %} + Began {{ TaskOrderDateTime(task_order.start_date) }}   |   Ends {{ TaskOrderDateTime(task_order.end_date) }} + {% elif task_order.is_expired %} + Started {{ TaskOrderDateTime(task_order.start_date) }}   |   Ended {{ TaskOrderDateTime(task_order.end_date) }} + {% else %} + Started {{ TaskOrderDateTime(task_order.start_date) }} + {% endif %} + +{% endmacro %} + +{% macro TaskOrderActions(task_order) %} +
+ {% if task_order.is_pending %} + {{ ViewLink(task_order, text="Edit") }} + {% elif task_order.is_active %} + {{ ViewLink(task_order, text="Modify") }} + {% else %} + {{ ViewLink(task_order, text="View") }} + {% endif %} +
+{% endmacro %} + +{% macro TaskOrderList(task_orders, label='success') %} +
+ {% for task_order in task_orders %} +
+
+ {{ task_order.display_status }} + {{ TaskOrderDate(task_order) }} + + + {{ TaskOrderActions(task_order) }} + +
+
+

Task Order #{{ task_order.number }}

+
+
+ Obligated amount: ${{ task_order.total_obligated_funds }} +
+
+ {% endfor %} +
{% endmacro %}
{% call StickyCTA(text="Funding") %}
- Start a new task order + Add a new task order
{% endcall %} - {% for task_order in pending_task_orders %} -
- Pending -
-
- Pending -
-
Started
-
- - -
-
-
-
Value
-
{{ task_order.budget | dollars }}
-
- {{ ViewLink(task_order) }} -
- {% endfor %} - - {% if not active_task_orders and not pending_task_orders %} {{ EmptyState( 'This portfolio doesn’t have any active or pending task orders.', @@ -130,22 +80,16 @@ ) }} {% endif %} + {% if pending_task_orders %} + {{ TaskOrderList(pending_task_orders, label='warning') }} + {% endif %} + {% if active_task_orders %} -
Active
- {% call TaskOrderList(active_task_orders, label='success', funded=funded) %} - - - Total Active Balance - {{ total_balance | dollars }} - -   - - {% endcall %} + {{ TaskOrderList(active_task_orders, label='success') }} {% endif %} {% if expired_task_orders %} -
Expired
- {{ TaskOrderList(expired_task_orders, label='expired', expired=True) }} + {{ TaskOrderList(expired_task_orders, label='error') }} {% endif %}
diff --git a/tests/routes/task_orders/test_index.py b/tests/routes/task_orders/test_index.py index 08f74608..c1b435fa 100644 --- a/tests/routes/task_orders/test_index.py +++ b/tests/routes/task_orders/test_index.py @@ -29,22 +29,6 @@ def user(): class TestPortfolioFunding: - def test_portfolio_with_no_task_orders(self, app, user_session, portfolio): - user_session(portfolio.owner) - - with captured_templates(app) as templates: - response = app.test_client().get( - url_for("task_orders.portfolio_funding", portfolio_id=portfolio.id) - ) - - assert response.status_code == 200 - _, context = templates[0] - assert context["funding_end_date"] is None - assert context["total_balance"] == 0 - assert context["pending_task_orders"] == [] - assert context["active_task_orders"] == [] - assert context["expired_task_orders"] == [] - @pytest.mark.skip(reason="Update later when CLINs are implemented") def test_funded_portfolio(self, app, user_session, portfolio): user_session(portfolio.owner)