105 lines
2.4 KiB
JavaScript
105 lines
2.4 KiB
JavaScript
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,
|
|
expired: Boolean,
|
|
},
|
|
|
|
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: this.expired ? 'Expired Balance' : '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>',
|
|
}
|