Sortable listing of task orders on funding page

js/components/tables/task_order_list.js

@@ -0,0 +1,102 @@
+import { set } from 'vue/dist/vue'
+import { compose, sortBy, reverse, indexBy, prop, toLower } from 'ramda'
+
+import { formatDollars } from '../../lib/dollars'
+import localDatetime from '../../components/local_datetime'
+
+const sort = (sortInfo, members) => {
+  if (sortInfo.columnName === '') {
+    return members
+  } else {
+    const sortColumn = sortInfo.columns[sortInfo.columnName]
+    const sortedMembers = sortColumn.sortFunc(sortColumn.attr, members)
+
+    return sortInfo.isAscending ?
+      sortedMembers :
+      reverse(sortedMembers)
+    }
+}
+
+export default {
+  name: 'task-order-list',
+
+  props: {
+    data: Array
+  },
+
+  components: {
+    localDatetime
+  },
+
+  data: function () {
+    const alphabeticalSort = (attr, members) => {
+      const lowercaseProp = compose(toLower, prop(attr))
+      return sortBy(lowercaseProp, members)
+    }
+
+    const numericSort = (attr, members) => sortBy(prop(attr), members)
+    const columns = [
+      {
+        displayName: 'Status',
+        attr: 'display_status',
+      },
+      {
+        displayName: 'Period of Performance',
+        attr: 'start_date',
+        sortFunc: numericSort,
+        width: "50%"
+      },
+      {
+        displayName: 'Initial Value',
+        attr: 'budget',
+        class: "table-cell--align-right",
+        sortFunc: numericSort
+      },
+      {
+        displayName: 'Balance',
+        attr: 'budget',
+        class: "table-cell--align-right",
+        sortFunc: numericSort
+      },
+      {
+        displayName: ''
+      }
+    ]
+
+    const defaultSortColumn = 'Period of Performance'
+    return {
+      sortInfo: {
+        columnName: defaultSortColumn,
+        isAscending: false,
+        columns: indexBy(prop('displayName'), columns)
+      }
+    }
+  },
+
+  computed: {
+    taskOrders: function () {
+      return sort(this.sortInfo, this.data)
+    }
+  },
+
+  methods: {
+    updateSort: function(columnName) {
+      // clicking a column twice toggles ascending / descending
+      if (columnName === this.sortInfo.columnName) {
+        this.sortInfo.isAscending = !this.sortInfo.isAscending
+      }
+
+      this.sortInfo.columnName = columnName
+    },
+
+    getColumns: function() {
+      return Object.values(this.sortInfo.columns)
+    },
+
+    formatDollars: function (value) {
+      return formatDollars(value, false)
+    }
+  },
+
+  template: '<div></div>'
+}

js/index.js

@@ -21,6 +21,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 TaskOrderList from './components/tables/task_order_list.js'
 import CcpoApproval from './components/forms/ccpo_approval'
 import MembersList from './components/members_list'
 import LocalDatetime from './components/local_datetime'
@@ -48,6 +49,7 @@ const app = new Vue({
     selector,
     BudgetChart,
     SpendTable,
+    TaskOrderList,
     CcpoApproval,
     MembersList,
     LocalDatetime,