162 lines
3.8 KiB
JavaScript
162 lines
3.8 KiB
JavaScript
import LocalDatetime from '../components/local_datetime'
|
|
import { formatDollars } from '../lib/dollars'
|
|
import { parse } from 'date-fns'
|
|
import {
|
|
compose,
|
|
partial,
|
|
indexBy,
|
|
prop,
|
|
propOr,
|
|
sortBy,
|
|
reverse,
|
|
pipe,
|
|
} from 'ramda'
|
|
|
|
export default {
|
|
name: 'requests-list',
|
|
|
|
components: {
|
|
LocalDatetime,
|
|
},
|
|
|
|
props: {
|
|
requests: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
isExtended: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
statuses: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
dodComponents: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
},
|
|
|
|
data: function() {
|
|
const defaultSort = (sort, requests) =>
|
|
sortBy(prop(sort.columnName), requests)
|
|
const dateSort = (sort, requests) => {
|
|
const parseDate = compose(
|
|
partial(parse),
|
|
propOr(sort.columnName, '')
|
|
)
|
|
return sortBy(parseDate, requests)
|
|
}
|
|
|
|
const columnList = [
|
|
{
|
|
displayName: 'JEDI Cloud Request Name',
|
|
attr: 'name',
|
|
sortFunc: defaultSort,
|
|
},
|
|
{
|
|
displayName: 'Date Request Submitted',
|
|
attr: 'last_submission_timestamp',
|
|
sortFunc: dateSort,
|
|
},
|
|
{
|
|
displayName: 'Date Request Last Edited',
|
|
attr: 'last_edited_timestamp',
|
|
extendedOnly: true,
|
|
sortFunc: dateSort,
|
|
},
|
|
{
|
|
displayName: 'Requester',
|
|
attr: 'full_name',
|
|
extendedOnly: true,
|
|
sortFunc: defaultSort,
|
|
},
|
|
{
|
|
displayName: 'Applicationed Annual Usage ($)',
|
|
attr: 'annual_usage',
|
|
sortFunc: defaultSort,
|
|
},
|
|
{
|
|
displayName: 'Request Status',
|
|
attr: 'status',
|
|
sortFunc: defaultSort,
|
|
},
|
|
{
|
|
displayName: 'DOD Component',
|
|
attr: 'dod_component',
|
|
extendedOnly: true,
|
|
sortFunc: defaultSort,
|
|
},
|
|
]
|
|
|
|
const defaultSortColumn = this.isExtended ? 'last_submission_timestamp' : ''
|
|
return {
|
|
searchValue: '',
|
|
statusValue: '',
|
|
dodComponentValue: '',
|
|
sort: {
|
|
columnName: defaultSortColumn,
|
|
isAscending: false,
|
|
},
|
|
columns: indexBy(prop('attr'), columnList),
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
filteredRequests: function() {
|
|
return pipe(
|
|
partial(this.applySearch, [this.searchValue]),
|
|
partial(this.applyFilters, [this.statusValue, this.dodComponentValue]),
|
|
partial(this.applySort, [this.sort])
|
|
)(this.requests)
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
getColumns: function() {
|
|
return Object.values(this.columns).filter(
|
|
column => !column.extendedOnly || this.isExtended
|
|
)
|
|
},
|
|
applySearch: (query, requests) => {
|
|
return requests.filter(request =>
|
|
query !== ''
|
|
? request.name.toLowerCase().includes(query.toLowerCase())
|
|
: true
|
|
)
|
|
},
|
|
applyFilters: (status, dodComponent, requests) => {
|
|
return requests
|
|
.filter(request => (status !== '' ? request.status === status : true))
|
|
.filter(request =>
|
|
dodComponent !== '' ? request.dod_component === dodComponent : true
|
|
)
|
|
},
|
|
applySort: function(sort, requests) {
|
|
if (sort.columnName === '') {
|
|
return requests
|
|
} else {
|
|
const { sortFunc } = this.columns[sort.columnName]
|
|
const sorted = sortFunc(sort, requests)
|
|
return sort.isAscending ? sorted : reverse(sorted)
|
|
}
|
|
},
|
|
dollars: value => formatDollars(value, false),
|
|
updateSortValue: function(columnName) {
|
|
if (!this.isExtended) {
|
|
return
|
|
}
|
|
|
|
// toggle ascending / descending if column is clicked twice
|
|
if (columnName === this.sort.columnName) {
|
|
this.sort.isAscending = !this.sort.isAscending
|
|
}
|
|
|
|
this.sort.columnName = columnName
|
|
},
|
|
},
|
|
|
|
template: '<div></div>',
|
|
}
|