Add environments-table component

js/components/tables/application_environments.js

@@ -0,0 +1,34 @@
+import { set } from 'vue/dist/vue'
+
+export default {
+  name: 'environments-table',
+
+  props: {
+    environments: Object,
+  },
+
+  data: function() {
+    return {
+      environmentsState: this.environments,
+    }
+  },
+
+  created: function() {
+    Object.keys(this.environments).forEach(environment => {
+      set(this.environmentsState[environment], 'isVisible', false)
+    })
+  },
+
+  methods: {
+    toggle: function(e, environmentName) {
+      this.environmentsState = Object.assign(this.environmentsState, {
+        [environmentName]: Object.assign(
+          this.environmentsState[environmentName],
+          {
+            isVisible: !this.environmentsState[environmentName].isVisible,
+          }
+        ),
+      })
+    },
+  },
+}

js/index.js

@@ -25,6 +25,7 @@ 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 EnvironmentsTable from './components/tables/application_environments'
 import TaskOrderList from './components/tables/task_order_list.js'
 import MembersList from './components/members_list'
 import LocalDatetime from './components/local_datetime'
@@ -56,6 +57,7 @@ const app = new Vue({
     selector,
     BudgetChart,
     SpendTable,
+    EnvironmentsTable,
     TaskOrderList,
     MembersList,
     LocalDatetime,