Merge pull request #296 from dod-ccpo/ie/fix-toggler

Ie/fix toggler
This commit is contained in:
andrewdds 2018-09-18 12:01:51 -04:00 committed by GitHub
commit d4e8dcd0a6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 151 additions and 11 deletions

View File

@ -0,0 +1,45 @@
import { set } from 'vue/dist/vue'
import { formatDollars } from '../../lib/dollars'
export default {
name: 'spend-table',
props: {
projects: Object,
workspace: Object,
environments: Object,
currentMonthIndex: String,
prevMonthIndex: String,
twoMonthsAgoIndex: String
},
data: function () {
return {
projectsState: this.projects
}
},
created: function () {
Object.keys(this.projects).forEach(project => {
set(this.projectsState[project], 'isVisible', false)
})
},
methods: {
toggle: function (e, projectName) {
this.projectsState = Object.assign(this.projectsState, {
[projectName]: Object.assign(this.projectsState[projectName],{
isVisible: !this.projectsState[projectName].isVisible
})
})
},
formatDollars: function (value) {
return formatDollars(value, false)
},
round: function (value) {
return Math.round(value)
}
}
}

View File

@ -16,6 +16,7 @@ import NewProject from './components/forms/new_project'
import Modal from './mixins/modal'
import selector from './components/selector'
import BudgetChart from './components/charts/budget_chart'
import SpendTable from './components/tables/spend_table'
import CcpoApproval from './components/forms/ccpo_approval'
import LocalDatetime from './components/local_datetime'
@ -36,6 +37,7 @@ const app = new Vue({
NewProject,
selector,
BudgetChart,
SpendTable,
CcpoApproval,
LocalDatetime
},

View File

@ -1,4 +1,11 @@
export const formatDollars = value => `$${value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')}`
export const formatDollars = (value, cents = true) => {
if (typeof value === 'number') {
return cents
? `$${value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')}`
: `$${value.toFixed(0).replace(/\d(?=(\d{3})+(?!\d))/g, '$&,')}`
}
return ''
}
export const abbreviateDollars = (value, decimals = 1) => {
if (value === null) { return null } // terminate early

View File

@ -15,4 +15,10 @@ meter {
&::-moz-meter-bar {
background: $color-primary;
}
.meter__fallback {
display: inline-block;
background: $color-primary;
height: 100%;
}
}

View File

@ -8,6 +8,10 @@
@include panel-margin;
min-width: 100%;
@include ie-only {
border-collapse: separate;
}
th, td {
&.table-cell--align-right {
text-align: right;

View File

@ -217,7 +217,7 @@
}
&.previous-month {
opacity: 0.65;
color: $color-gray;
}
&.meter-cell {
@ -250,9 +250,12 @@
@include media($medium-screen) {
display: block;
color: $color-white;
background-color: rgba($color-blue, 0.65);
border-radius: $gap/2;
position: absolute;
top: 2.3rem;
left: $gap;
left: $gap / 2;
padding: 0 ($gap / 2);
}
}
}
@ -277,6 +280,13 @@
.spend-table__project__env {
margin-left: $gap;
&:last-child {
td, th {
padding-bottom: $gap * 5;
box-shadow: inset 0 (-$gap * 2.5) 0 $color-gray-lightest;
}
}
}
}
}

View File

@ -35,7 +35,9 @@
</div>
<div>
<meter value='{{ spent }}' min='0' max='{{ budget }}' title='{{ spent | dollars }} Total spend to date'></meter>
<meter value='{{ spent }}' min='0' max='{{ budget }}' title='{{ spent | dollars }} Total spend to date'>
<div class='meter__fallback' style='width:{{ (spent / budget) * 100 }}%;'></div>
</meter>
<dl class='spend-summary__spent'>
<dt>Total spend to date</dt>
@ -223,14 +225,22 @@
<div class='spend-table responsive-table-wrapper'>
<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'>
<option value='03/2019'>{{ current_month.strftime('%B %Y') }}</option>
</select>
</div>
<table>
<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>
<thead>
<th scope='col'><span class='usa-sr-only'>Spending scope</span></th>
<th scope='col' class='table-cell--align-right previous-month'>{{ two_months_ago.strftime('%B %Y') }}</th>
@ -251,9 +261,63 @@
</tr>
</tbody>
{% for project_name, project_totals in monthly_totals['projects'].items() %}
<tbody is='toggler' class='spend-table__project'>
<template slot-scope='props'>
<tbody v-for='(project, name) in projectsState' class='spend-table__project'>
<tr>
<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' class='spend-table__project__env'>
<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>
<th scope='rowgroup'>
<button v-on:click='props.toggle' class='icon-link icon-link--large spend-table__project__toggler'>
@ -280,10 +344,12 @@
<td class='table-cell--expand current-month'></td>
</tr>
{% endfor %}
</template>
</tbody>
{% endfor %}
</table>
{% endfor %} #}
</table>
</spend-table>
</div>
{% endblock %}