143 lines
4.8 KiB
HTML
143 lines
4.8 KiB
HTML
{% from "components/empty_state.html" import EmptyState %}
|
||
{% from "components/icon.html" import Icon %}
|
||
|
||
{% extends "portfolios/base.html" %}
|
||
|
||
{% block portfolio_content %}
|
||
|
||
{% 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", classes="icon--tiny") }}
|
||
</a>
|
||
{% endmacro %}
|
||
|
||
{% 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'>
|
||
<table v-cloak>
|
||
<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 class='table-cell--grow'>
|
||
<span>
|
||
<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">
|
||
</local-datetime>
|
||
</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>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</task-order-list>
|
||
{% endmacro %}
|
||
|
||
<div class="portfolio-funding">
|
||
|
||
<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 %}
|
||
{{ Icon('ok') }}
|
||
Funded through
|
||
<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>
|
||
</div>
|
||
|
||
{% 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 active_task_orders and not pending_task_orders %}
|
||
{{ EmptyState(
|
||
'This portfolio doesn’t have any active or pending task orders.',
|
||
action_label='Add a New Task Order',
|
||
action_href=url_for('task_orders.new', screen=1, portfolio_id=portfolio.id),
|
||
icon='cloud',
|
||
) }}
|
||
{% endif %}
|
||
|
||
{% if active_task_orders %}
|
||
{{ TaskOrderList(active_task_orders, label='success') }}
|
||
<div class='panel portfolio-total-balance'>
|
||
<div class='panel__content row'>
|
||
<span>{{ total_balance | dollars }}</span>
|
||
<span class='label label--success'>Total Active Balance</span>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if expired_task_orders %}
|
||
{{ TaskOrderList(expired_task_orders, label='expired', expired=True) }}
|
||
{% endif %}
|
||
</div>
|
||
|
||
{% endblock %}
|