First pass at new reporting designs

This commit lays out the genral structure and provides necessary
data for the new reporting page designs.

Some of the data generated by the report domain classes (including
the mock CSP reporting class) was modified to fit new designs. This also
included removing data that was no longer necessary. Part of the newly
mocked data includes the idea of "expended" data per CLIN or task order.
This was was mocked simply by using a 75% of the obligated funds fo a
given object. Tests were also written for these new/ modifed reporting
functions.

As for the front end, this commit only focuses on the high-level markup
layout. This includes splitting the large reporting index page into
smaller component templates for each of the major sections of the report.
This commit is contained in:
graham-dds
2019-11-20 16:10:31 -05:00
parent 7a0dc4d264
commit 0303434561
14 changed files with 301 additions and 597 deletions

View File

@@ -0,0 +1,82 @@
{% from "components/empty_state.html" import EmptyState %}
{% from "components/icon.html" import Icon %}
<div>
<h2>Funds Expended per Application and Environment</h2>
{% set current_month_index = current_month.strftime('%m/%Y') %}
{% set prev_month_index = prev_month.strftime('%m/%Y') %}
{% if not portfolio.applications %}
{% set can_create_applications = user_can(permissions.CREATE_APPLICATION) %}
{% set message = ('portfolios.reports.empty_state.sub_message.can_create_applications' | translate)
if can_create_applications
else ('portfolios.reports.empty_state.sub_message.cannot_create_applications' | translate)
%}
{{ EmptyState(
('portfolios.reports.empty_state.message' | translate),
action_label= ('portfolios.reports.empty_state.action_label' | translate) if can_create_applications else None,
action_href=url_for('applications.create_new_application_step_1', portfolio_id=portfolio.id) if can_create_applications else None,
icon='chart',
sub_message=message,
add_perms=can_create_applications
) }}
{% else %}
<spend-table
v-bind:applications='{{ monthly_totals['applications'] | tojson }}'
v-bind:environments='{{ monthly_totals['environments'] | tojson }}'
current-month-index='{{ current_month_index }}'
prev-month-index='{{ prev_month_index }}'
inline-template>
<div class="responsive-table-wrapper">
<table class="atat-table">
<thead>
<tr>
<th>Applications and Environments</th>
<th class="table-cell--align-right">Current Month</th>
<th class="table-cell--align-right">Last Month</th>
<th class="table-cell--align-right">Total Spent</th>
</tr>
</thead>
<tbody>
<template v-for='(application, name) in applicationsState'>
<tr>
<td>
<button v-on:click='toggle($event, name)' class='icon-link icon-link--large'>
<span v-html='name'></span>
<template v-if='application.isVisible'>{{ Icon('caret_down') }}</template>
<template v-else>{{ Icon('caret_up') }}</template>
</button>
</td>
<td class="table-cell--align-right">
<span v-html='formatDollars(application[currentMonthIndex] || 0)'></span>
</td>
<td class="table-cell--align-right">
<span v-html='formatDollars(application[prevMonthIndex] || 0)'></span>
</td>
<td class="table-cell--align-right">
<span v-html='formatDollars(application["total_spend_to_date"])'></span>
</td>
</tr>
<tr v-for='(environment, envName) in environments[name]' v-show='application.isVisible'>
<td>
<span v-html='envName'></span>
</td>
<td class="table-cell--align-right">
<span v-html='formatDollars(environment[currentMonthIndex] || 0)'></span>
</td>
<td class="table-cell--align-right">
<span v-html='formatDollars(environment[prevMonthIndex] || 0)'></span>
</td>
<td class="table-cell--align-right">
<span v-html='formatDollars(environment["total_spend_to_date"])'></span>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</spend-table>
{% endif %}
</div>