pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial styling and layout of TO view fragment

Browse Source
This commit is contained in:
leigh-mil
2019-12-23 10:33:20 -05:00
parent cbcac2b142
commit 8ece47627e
6 changed files with 120 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templates/components/tooltip.html
View File

@@ -3,7 +3,7 @@
{% macro Tooltip(message,title='Help', classes="") %}
<button type="button" tabindex="0" class="icon-tooltip {{classes}}" v-tooltip.top="{content: '{{message}}', container: false}">
{{ Icon('help') }}<span>{{ title }}</span>
{{ Icon('question') }}<span>{{ title }}</span>
</button>
{%- endmacro %}

155
templates/task_orders/fragments/task_order_view.html
View File

@@ -1,82 +1,87 @@
{% from "components/icon.html" import Icon %}
{% from "components/semi_collapsible_text.html" import SemiCollapsibleText %}
{% from "components/tooltip.html" import Tooltip %}
<div class="task-order__review">
<div class="form-row">
<div class="form-col">
<div class="h2">
{{ "task_orders.review.review_your_funding" | translate }}
</div>
<div>
<div class="totals-box">
{% if task_order %}
{% set obligated_funds = task_order.total_obligated_funds %}
{% set contract_amount = task_order.total_contract_amount %}
{% endif %}
{% set obligated_funds = task_order.total_obligated_funds %}
{% set contract_amount = task_order.total_contract_amount %}
{% set expended_funds = task_order.invoiced_funds %}
<div class="h4">{{ 'components.totals_box.obligated_funds' | translate }}</div>
<div class="h3">{{ obligated_funds | dollars }}</div>
<p>{{ 'components.totals_box.obligated_text' | translate }}</p>
<div class="h4">{{ 'components.totals_box.total_amount' | translate }}</div>
<div class="h3">{{ contract_amount | dollars }}</div>
<p>{{ 'components.totals_box.total_text' | translate }}</p>
</div>
</div>
<div class="h3">
{{ 'task_orders.review.pdf_title' | translate }}
</div>
<a class="icon-link icon-link--download" href="{{ pdf_download_url }}">
{{ Icon('ok') }}
{{ task_order.pdf.filename }}
</a>
<hr>
<div class="col task-order__details">
<div class="h3">
{{ "task_orders.review.task_order_number" | translate }}
</div>
<div>{{task_order.number}}</div>
<hr>
<div class="h3">
{{ "task_orders.review.funding_summary" | translate }}
</div>
<table class="fixed-table-wrapper">
<thead>
<tr>
<th>{{ "task_orders.review.clins.number" | translate }}</th>
<th>{{ "task_orders.review.clins.type" | translate }}</th>
<th>{{ "task_orders.review.clins.idiq_clin_description" | translate }}</th>
<th>{{ "task_orders.review.clins.pop" | translate }}</th>
<th class="task-order__amount">{{ "task_orders.review.clins.total_amount" | translate }}</th>
<th class="task-order__amount">{{ "task_orders.review.clins.obligated" | translate }}</th>
</tr>
</thead>
<tbody>
{% for clin in task_order.sorted_clins %}
<tr>
<td>{{ clin.number }}</td>
<td>{{ clin.type }}</td>
<td>{{ "{}".format(clin.jedi_clin_type) | translate}}</td>
<td>
{{ clin.start_date | formattedDate }} - {{ clin.end_date | formattedDate }}
</td>
{# TODO: Swap in total CLIN amount #}
<td class="task-order__amount">{{ clin.total_amount | dollars }}</td>
<td class="task-order__amount">{{ clin.obligated_amount | dollars }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div>
<section class="row">
<div class='col col--grow reporting-summary-item'>
<h4 class="reporting-summary-item__header">
<span class="reporting-summary-item__header-text">Total obligated funds</span>
{{ Tooltip(("task_orders.review.tooltip.obligated_funds" | translate), title="", classes="reporting-summary-item__header-icon") }}
</h4>
<p class="reporting-summary-item__value--large">
{{ obligated_funds | dollars }}
</p>
</div>
</div>
<div class='col col--grow reporting-summary-item'>
<h4 class="reporting-summary-item__header">
<span class="reporting-summary-item__header-text">Total Task Order value</span>
{{ Tooltip(("task_orders.review.tooltip.total_value" | translate), title="", classes="reporting-summary-item__header-icon") }}
</h4>
{% set earliest_pop_start_date, latest_pop_end_date = portfolio.funding_duration %}
{% if earliest_pop_start_date and latest_pop_end_date %}
<p class="reporting-summary-item__value--large">
{{ contract_amount | dollars }}
</p>
{% else %}
<p class="reporting-summary-item__value--large"> - </p>
{% endif %}
</div>
<div class='col col--grow reporting-summary-item'>
<h4 class="reporting-summary-item__header">
<span class="reporting-summary-item__header-text">Total expended funds</span>
{{ Tooltip(("task_orders.review.tooltip.expended_funds" | translate), title="", classes="reporting-summary-item__header-icon") }}
</h4>
<p class="reporting-summary-item__value--large">
{{ expended_funds | dollars }}
</p>
</div>
</section>
<hr>
<section>
<h4>Documents</h4>
<div class="panel panel__content">
<a href="{{ pdf_download_url }}">
{{ task_order.pdf.filename }}
{{ Icon('link', classes="icon--primary icon--medium") }}
</a>
</div>
</section>
<hr>
<section>
<h4>CLIN summary</h4>
<table class="fixed-table-wrapper atat-table">
<thead>
<tr>
<th>{{ "task_orders.review.clins.number" | translate }}</th>
<th>{{ "task_orders.review.clins.type" | translate }}</th>
<th>{{ "task_orders.review.clins.idiq_clin_description" | translate }}</th>
<th>{{ "task_orders.review.clins.pop" | translate }}</th>
<th class="task-order__amount">{{ "task_orders.review.clins.total_amount" | translate }}</th>
<th class="task-order__amount">{{ "task_orders.review.clins.obligated" | translate }}</th>
</tr>
</thead>
<tbody>
{% for clin in task_order.sorted_clins %}
<tr>
<td>{{ clin.number }}</td>
<td>{{ clin.type }}</td>
<td>{{ "{}".format(clin.jedi_clin_type) | translate}}</td>
<td>
{{ clin.start_date | formattedDate }} - {{ clin.end_date | formattedDate }}
</td>
{# TODO: Swap in total CLIN amount #}
<td class="task-order__amount">{{ clin.total_amount | dollars }}</td>
<td class="task-order__amount">{{ clin.obligated_amount | dollars }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</section>
</div>