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

reimplement spend table as a vue component

Browse Source
This commit is contained in:
Andrew Croce 2018-09-17 15:07:38 -04:00
parent 9dd710ff94
commit 1818113409
1 changed files with 71 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
templates/workspaces/reports/index.html
View File

@ -225,13 +225,21 @@
<div class='spend-table responsive-table-wrapper'> <div class='spend-table responsive-table-wrapper'>
<div class='spend-table__header'> <div class='spend-table__header'>
<h2 class='spend-table__title'>Total spend per month</h2> <h2 class='spend-table__title'>Total spend per month </h2>
<select name='month' id='month' class='spend-table__month-select'> <select name='month' id='month' class='spend-table__month-select'>
<option value='03/2019'>{{ current_month.strftime('%B %Y') }}</option> <option value='03/2019'>{{ current_month.strftime('%B %Y') }}</option>
</select> </select>
</div> </div>
<spend-table
v-bind:projects='{{ monthly_totals['projects'] | tojson }}'
v-bind:workspace='{{ workspace_totals | tojson }}'
v-bind:environments='{{ monthly_totals['environments'] | tojson }}'
current-month-index='{{ current_month_index }}'
prev-month-index='{{ prev_month_index }}'
two-months-ago-index='{{ two_months_ago_index }}'
inline-template>
<table> <table>
<thead> <thead>
<th scope='col'><span class='usa-sr-only'>Spending scope</span></th> <th scope='col'><span class='usa-sr-only'>Spending scope</span></th>
@ -253,9 +261,63 @@
</tr> </tr>
</tbody> </tbody>
{% for project_name, project_totals in monthly_totals['projects'].items() %} <tbody v-for='(project, name) in projects'>
<tbody is='toggler' class='spend-table__project'> <tr>
<template slot-scope='props'> <th scope='rowgroup'>
<button v-on:click='toggle($event, name)' class='icon-link icon-link--large spend-table__project__toggler'>
<template v-if='project.isVisible'>{{ Icon('caret_down') }}</template>
<template v-else>{{ Icon('caret_right') }}</template>
<span v-html='name'></span>
</button>
</th>
<td class='table-cell--align-right previous-month'>
<span v-html='formatDollars(project[twoMonthsAgoIndex] || 0)'></span>
</td>
<td class='table-cell--align-right previous-month'>
<span v-html='formatDollars(project[prevMonthIndex] || 0)'></span>
</td>
<td class='table-cell--align-right current-month'>
<span v-html='formatDollars(project[currentMonthIndex] || 0)'></span>
</td>
<td class='table-cell--expand current-month meter-cell'>
<span class='spend-table__meter-value'>
<span v-html='round( 100 * ((project[currentMonthIndex] || 0) / (workspace[currentMonthIndex] || 1) )) + "%"'></span>
</span>
<meter v-bind:value='project[currentMonthIndex] || 0' min='0' v-bind:max='workspace[currentMonthIndex] || 1'>
<div class='meter__fallback' v-bind:style='"width:" + round( 100 * ((project[currentMonthIndex] || 0) / (workspace[currentMonthIndex] || 1) )) + "%;"'></div>
</meter>
</td>
</tr>
<tr v-for='(environment, envName) in environments[name]' v-show='project.isVisible'>
<th scope='rowgroup'>
<a href='#' class='icon-link spend-table__project__env'>
{{ Icon('link') }}
<span v-html='envName'></span>
</a>
</th>
<td class='table-cell--align-right previous-month'>
<span v-html='formatDollars(environment[twoMonthsAgoIndex] || 0)'></span>
</td>
<td class='table-cell--align-right previous-month'>
<span v-html='formatDollars(environment[prevMonthIndex] || 0)'></span>
</td>
<td class='table-cell--align-right current-month'>
<span v-html='formatDollars(environment[currentMonthIndex] || 0)'></span>
</td>
<td class='table-cell--expand current-month'></td>
</tr>
</tbody>
{# {% for project_name, project_totals in monthly_totals['projects'].items() %}
<tbody is='tbody-toggler' class='spend-table__project'>
<tr> <tr>
<th scope='rowgroup'> <th scope='rowgroup'>
<button v-on:click='props.toggle' class='icon-link icon-link--large spend-table__project__toggler'> <button v-on:click='props.toggle' class='icon-link icon-link--large spend-table__project__toggler'>
@ -282,10 +344,12 @@
<td class='table-cell--expand current-month'></td> <td class='table-cell--expand current-month'></td>
</tr> </tr>
{% endfor %} {% endfor %}
</template> </template>
</tbody> </tbody>
{% endfor %} {% endfor %} #}
</table> </table>
</spend-table>
</div> </div>
{% endblock %} {% endblock %}