Merge pull request #198 from dod-ccpo/ui/reports-spend-table

Ui/reports spend table

js/components/toggler.js

@@ -0,0 +1,24 @@
+export default {
+  name: 'toggler',
+
+  data: function () {
+    return {
+      isVisible: false
+    }
+  },
+
+  render: function (createElement) {
+    return createElement( this.$vnode.data.tag, [
+      this.$scopedSlots.default({
+        isVisible: this.isVisible,
+        toggle: this.toggle
+      })
+    ])
+  },
+
+  methods: {
+    toggle: function (e) {
+      this.isVisible = !this.isVisible
+    }
+  }
+}

js/index.js

@@ -8,14 +8,15 @@ import checkboxinput from './components/checkbox_input'
 import DetailsOfUse from './components/forms/details_of_use'
 import poc from './components/forms/poc'
 import financial from './components/forms/financial'
+import toggler from './components/toggler'
 import NewProject from './components/forms/new_project'
 
 Vue.use(VTooltip)
 
-
 const app = new Vue({
   el: '#app-root',
   components: {
+    toggler,
     optionsinput,
     textinput,
     checkboxinput,

styles/core/_variables.scss

@@ -24,7 +24,7 @@ $lead-font-size:      2rem;
 $title-font-size:     5.2rem;
 $h1-font-size:        4rem;
 $h2-font-size:        3rem;
-$h3-font-size:        2rem;
+$h3-font-size:        2.3rem;
 $h4-font-size:        1.7rem;
 $h5-font-size:        1.5rem;
 $h6-font-size:        1.3rem;

styles/elements/_tables.scss

@@ -8,6 +8,28 @@
   @include panel-margin;
   min-width: 100%;
 
+  th, td {
+    &.table-cell--align-right {
+      text-align: right;
+    }
+
+    &.table-cell--shrink {
+      width: 1%;
+    }
+
+    &.table-cell--expand {
+      width: 100%;
+    }
+
+    &.table-cell--hide-small {
+      display: none;
+
+      @include media($medium-screen) {
+        display: table-cell;
+      }
+    }
+  }
+
   tbody {
     tr {
       th,
@@ -29,32 +51,12 @@
           border-bottom-style: solid;
         }
       }
-
-      .table-cell--align-right {
-        text-align: right;
-      }
-
-      .table-cell--shrink {
-        width: 1%;
-      }
-
-      .table-cell--expand {
-        width: 100%;
-      }
-
-      .table-cell--hide-small {
-        display: none;
-
-        @include media($medium-screen) {
-          display: table-cell;
-        }
-      }
     }
   }
 
   thead {
     tr {
-      th {
+      th, td {
         @include block-list-header;
         display: table-cell;
       }

styles/sections/_reports.scss

@@ -6,13 +6,20 @@
   }
 
   .funding-summary-row__col {
-    @include grid-pad;
 
     @include media($medium-screen) {
+      @include grid-pad;
       flex-grow: 1;
       display: flex;
       flex-direction: row;
       flex-basis: 50%;
+
+      &:first-child {
+        padding-left: 0;
+      }
+      &:last-child {
+        padding-right: 0;
+      }
     }
 
     align-items: stretch;
@@ -171,3 +178,102 @@
     }
   }
 }
+
+
+.spend-table {
+  .spend-table__header {
+    @include panel-base;
+    @include panel-theme-default;
+    border-bottom: 0;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    padding: $gap * 2;
+
+    .spend-table__title {
+      @include h3;
+      margin: 0;
+      flex: 2;
+    }
+
+    .spend-table__month-select {
+      margin: 0;
+      flex: 1;
+    }
+  }
+
+  table {
+    th, td {
+      white-space: nowrap;
+
+      button {
+        margin: 0;
+      }
+
+      &.current-month {
+        background-color: $color-aqua-lightest;
+      }
+
+      &.previous-month {
+        opacity: 0.65;
+      }
+
+      &.meter-cell {
+        padding-left: 0;
+
+        @include media($medium-screen) {
+          min-width: 12rem;
+        }
+
+        meter {
+          width: 100%;
+          height: 3rem;
+          background: $color-white;
+          position: relative;
+          display: none;
+
+          @include media($medium-screen) {
+            display: block;
+          }
+
+          &::-webkit-meter-bar {
+            background: $color-white;
+          }
+
+          &::before {
+            content: attr(title);
+            position: absolute;
+            top: .5rem;
+            left: $gap;
+            @include h5;
+            color: $color-white;
+          }
+        }
+      }
+    }
+
+    .spend-table__workspace {
+      th, td {
+        font-weight: bold;
+      }
+    }
+
+    .spend-table__project {
+      .spend-table__project__toggler {
+        @include icon-link-color($color-black-light, $color-gray-lightest);
+        margin-left: -$gap;
+
+        .icon {
+          @include icon-size(12);
+          margin-right: $gap;
+        }
+      }
+
+      .spend-table__project__env {
+        margin-left: $gap;
+      }
+    }
+  }
+}

templates/workspace_reports.html

@@ -1,6 +1,7 @@
 {% extends "base_workspace.html" %}
 
 {% from "components/alert.html" import Alert %}
+{% from "components/icon.html" import Icon %}
 
 {% block workspace_content %}
 
@@ -85,4 +86,109 @@
 
   </div>
 
+  <div class='spend-table responsive-table-wrapper'>
+    <div class='spend-table__header'>
+      <h2 class='spend-table__title'>Total spend per month</h2>
+
+      <select name='month' id='month' class='spend-table__month-select'>
+        <option value='06/2018'>June 2018</option>
+      </select>
+    </div>
+
+    <table>
+      <thead>
+        <th scope='col'><span class='usa-sr-only'>Spending scope</span></th>
+        <th scope='col' class='table-cell--align-right previous-month'>April 2018</th>
+        <th scope='col' class='table-cell--align-right previous-month'>May 2018</th>
+        <th scope='col' class='table-cell--align-right current-month'>June 2018</th>
+        <td class='current-month'></td>
+      </thead>
+
+      <tbody class='spend-table__workspace'>
+        <tr>
+          <th scope='row'>Workspace Total</th>
+          <td class='table-cell--align-right previous-month'>$58,000</td>
+          <td class='table-cell--align-right previous-month'>$60,000</td>
+          <td class='table-cell--align-right current-month'>$62,000</td>
+          <td class='table-cell--expand current-month meter-cell'>
+            <meter value='62000' min='0' max='62000'></meter>
+          </td>
+        </tr>
+      </tbody>
+
+      <tbody is='toggler' class='spend-table__project'>
+        <template slot-scope='{ isVisible, toggle }'>
+          <tr>
+            <th scope='rowgroup'>
+              <button v-on:click='toggle' class='icon-link icon-link--large spend-table__project__toggler'>
+                <template v-if='isVisible'>{{ Icon('caret_down') }}</template>
+                <template v-else>{{ Icon('caret_right') }}</template>
+                Code.mil
+              </button>
+            </th>
+            <td class='table-cell--align-right previous-month'>$29,000</td>
+            <td class='table-cell--align-right previous-month'>$30,000</td>
+            <td class='table-cell--align-right current-month'>$31,000</td>
+            <td class='table-cell--expand current-month meter-cell'>
+              <meter value='31000' min='0' max='62000' title='50%'></meter>
+            </td>
+          </tr>
+
+          <tr v-show='isVisible'>
+            <th scope='rowgroup'><a href='/' class='icon-link spend-table__project__env'>{{ Icon('link') }} Production</a></th>
+            <td class='table-cell--align-right previous-month'>$14,000</td>
+            <td class='table-cell--align-right previous-month'>$15,000</td>
+            <td class='table-cell--align-right current-month'>$16,000</td>
+            <td class='table-cell--expand current-month'></td>
+          </tr>
+
+          <tr v-show='isVisible'>
+            <th scope='rowgroup'><a href='/' class='icon-link spend-table__project__env'>{{ Icon('link') }} Development</a></th>
+            <td class='table-cell--align-right previous-month'>$12,000</td>
+            <td class='table-cell--align-right previous-month'>$13,000</td>
+            <td class='table-cell--align-right current-month'>$14,000</td>
+            <td class='table-cell--expand current-month'></td>
+          </tr>
+        </template>
+      </tbody>
+
+      <tbody is='toggler' class='spend-table__project'>
+        <template slot-scope='{ isVisible, toggle }'>
+          <tr>
+            <th scope='rowgroup'>
+              <button v-on:click='toggle' class='icon-link icon-link--large spend-table__project__toggler'>
+                <template v-if='isVisible'>{{ Icon('caret_down') }}</template>
+                <template v-else>{{ Icon('caret_right') }}</template>
+                Digital Dojo
+              </button>
+            </th>
+            <td class='table-cell--align-right previous-month'>$29,000</td>
+            <td class='table-cell--align-right previous-month'>$30,000</td>
+            <td class='table-cell--align-right current-month'>$31,000</td>
+            <td class='table-cell--expand current-month meter-cell'>
+              <meter value='31000' min='0' max='62000' title='50%'></meter>
+            </td>
+          </tr>
+
+          <tr v-show='isVisible'>
+            <th scope='rowgroup'><a href='/' class='icon-link spend-table__project__env'>{{ Icon('link') }} Production</a></th>
+            <td class='table-cell--align-right previous-month'>$14,000</td>
+            <td class='table-cell--align-right previous-month'>$15,000</td>
+            <td class='table-cell--align-right current-month'>$16,000</td>
+            <td class='table-cell--expand current-month'></td>
+          </tr>
+
+          <tr v-show='isVisible'>
+            <th scope='rowgroup'><a href='/' class='icon-link spend-table__project__env'>{{ Icon('link') }} Development</a></th>
+            <td class='table-cell--align-right previous-month'>$12,000</td>
+            <td class='table-cell--align-right previous-month'>$13,000</td>
+            <td class='table-cell--align-right current-month'>$14,000</td>
+            <td class='table-cell--expand current-month'></td>
+          </tr>
+        </template>
+      </tbody>
+
+    </table>
+  </div>
+
 {% endblock %}