Try using new styles in the task orders page

This commit is contained in:
richard-dds 2019-06-04 16:52:54 -04:00
parent 804855d4bc
commit d7346d5a32
3 changed files with 39 additions and 122 deletions

View File

@ -82,6 +82,10 @@ def normalizeOrder(title):
return " ".join(reordered_text)
def task_order_status_label(status):
return {"Pending": "warning", "Active": "success", "Expired": "error"}.get(status, "info")
def register_filters(app):
app.jinja_env.filters["iconSvg"] = iconSvg
app.jinja_env.filters["dollars"] = dollars
@ -95,6 +99,7 @@ def register_filters(app):
app.jinja_env.filters["renderAuditEvent"] = renderAuditEvent
app.jinja_env.filters["normalizeOrder"] = normalizeOrder
app.jinja_env.filters["translateDuration"] = translate_duration
app.jinja_env.filters["taskOrderStatusLabel"] = task_order_status_label
@contextfilter
def translateWithoutCache(context, *kwargs):

View File

@ -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/<portfolio_id>/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",
@ -69,6 +48,5 @@ def portfolio_funding(portfolio_id):
+ task_orders_by_status.get(TaskOrderStatus.PENDING, [])
),
active_task_orders=active_task_orders,
expired_task_orders=task_orders_by_status.get(TaskOrderStatus.EXPIRED, []),
total_balance=total_balance,
expired_task_orders=task_orders_by_status.get(TaskOrderStatus.EXPIRED, [])
)

View File

@ -13,93 +13,37 @@
</a>
{% endmacro %}
{% macro TaskOrderList(task_orders, label='success', expired=False, funded=False) %}
{% macro TaskOrderDate(task_order) %}
<span class="datetime">
{% if task_order.is_active %}
Began {{ task_order.start_date }} &nbsp;&nbsp;|&nbsp;&nbsp; Ends {{ task_order.end_date }}
{% elif task_order.is_expired %}
Started {{ task_order.start_date }} &nbsp;&nbsp;|&nbsp;&nbsp; Ended {{ task_order.end_date }}
{% else %}
Started {{ task_order.start_date }}
{% endif %}
</span>
{% endmacro %}
{% macro TaskOrderList(task_orders) %}
<div>
{% for task_order in task_orders %}
<div class="card">
<div class="card__status">
<span class='label label--warning'>Pending</span>
<span class='datetime'>Started May 21, 2019</span>
<span class='label label--{{ task_order.display_status|taskOrderStatusLabel }}'>{{ task_order.display_status }}</span>
{{ TaskOrderDate(task_order) }}
<span class="card__button">
</span>
</div>
<div class="card__header">
<h3>Task Order #12345</h3>
<h3>Task Order {{ task_order.number }}</h3>
</div>
<div class="card__body">
This is a TO description. This is a TO description. This is a TO description. This is a TO description. This is a TO description. This is a TO description.
</div>
</div>
<task-order-list
inline-template
v-bind:data='{{ task_orders | tojson }}'
v-bind:expired='{{ 'true' if expired else 'false' }}'
v-bind:funded='{{'true' if funded else 'false' }}'
v-cloak
>
<div class='responsive-table-wrapper'>
<table v-cloak class="atat-table">
<thead>
<tr>
<th v-for="col in getColumns()" @click="updateSort(col.displayName)" :width="col.width" :class="col.class" scope="col">
!{ col.displayName }
<template v-if="col.sortFunc">
<span class="sorting-direction" v-if="col.displayName === sortInfo.columnName && sortInfo.isAscending">
{{ Icon("caret_down", classes="icon--tiny") }}
</span>
<span class="sorting-direction" v-if="col.displayName === sortInfo.columnName && !sortInfo.isAscending">
{{ Icon("caret_up", classes="icon--tiny") }}
</span>
</template>
</th>
</tr>
</thead>
<tbody>
<tr v-for='taskOrder in taskOrders' :key="taskOrder.id">
<td>
<span class='label label--{{ label }}'>!{ taskOrder.display_status }</span>
</td>
<td>
<span :class="{ 'to-performance-period': true, 'to-expiring-soon': (taskOrder.days_to_expiration > 0 && taskOrder.days_to_expiration <= days_to_exp_alert_limit), 'funded': funded && taskOrder.display_status === 'Active', 'unfunded': !funded && taskOrder.display_status === 'Active' }">
<local-datetime
v-bind:timestamp="taskOrder.start_date"
format="M/D/YYYY">
</local-datetime>
-
<local-datetime
v-bind:timestamp="taskOrder.end_date"
format="M/D/YYYY"
class="to-end-date"
>
</local-datetime>
<span
v-if="taskOrder.days_to_expiration > 0 && taskOrder.days_to_expiration <= days_to_exp_alert_limit && funded"
class="to-expiration-alert">
{{ Icon('ok') }} Period ending in !{ taskOrder.days_to_expiration } days, but new period funded
</span>
<span
v-if="taskOrder.days_to_expiration > 0 && taskOrder.days_to_expiration <= days_to_exp_alert_limit && !funded"
class="to-expiration-alert">
{{ Icon('alert') }} Period ends in !{ taskOrder.days_to_expiration } days, submit a new task order
</span>
</span>
</td>
<td class="table-cell--align-right">
<span v-html='formatDollars(taskOrder.budget)'></span>
</td>
<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">
<span>View</span>
{{ Icon("caret_right", classes="icon--tiny") }}
</a>
</td>
</tr>
{{ caller and caller() }}
</tbody>
</table>
{% endfor %}
</div>
</task-order-list>
{% endmacro %}
<div class="portfolio-funding">
@ -144,21 +88,11 @@
{% endif %}
{% if active_task_orders %}
<div class='subheading'>Active</div>
{% call TaskOrderList(active_task_orders, label='success', funded=funded) %}
<tr class='total-balance'>
<td colspan='4'>
<span class='label label--success'>Total Active Balance</span>
<span>{{ total_balance | dollars }}</span>
</td>
<td>&nbsp;</td>
</tr>
{% endcall %}
{{ TaskOrderList(active_task_orders) }}
{% endif %}
{% if expired_task_orders %}
<div class='subheading'>Expired</div>
{{ TaskOrderList(expired_task_orders, label='expired', expired=True) }}
{{ TaskOrderList(expired_task_orders) }}
{% endif %}
</div>