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

Ie/fix toggler

js/components/tables/spend_table.js

@@ -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)
+    }
+  }
+}

js/index.js

@@ -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
   },

js/lib/dollars.js

@@ -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