Fix indentation on requests-list component
This commit is contained in:
parent
d6d417e8f9
commit
334da1196b
@ -4,145 +4,145 @@ import { parse } from 'date-fns'
|
||||
import { compose, partial, indexBy, prop, sortBy, reverse, pipe } from 'ramda'
|
||||
|
||||
export default {
|
||||
name: 'requests-list',
|
||||
name: 'requests-list',
|
||||
|
||||
components: {
|
||||
LocalDatetime,
|
||||
components: {
|
||||
LocalDatetime,
|
||||
},
|
||||
|
||||
props: {
|
||||
requests: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
isExtended: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
statuses: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
dodComponents: {
|
||||
type: Array,
|
||||
default: [],
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
requests: {
|
||||
type: Array,
|
||||
default: [],
|
||||
data: function () {
|
||||
const defaultSort = (sort, requests) => sortBy(prop(sort.columnName), requests)
|
||||
const dateSort = (sort, requests) => {
|
||||
const parseDate = compose(partial(parse), prop(sort.columnName))
|
||||
return sortBy(parseDate, requests)
|
||||
}
|
||||
|
||||
const columnList = [
|
||||
{
|
||||
displayName: 'JEDI Cloud Request Name',
|
||||
attr: 'name',
|
||||
sortFunc: defaultSort,
|
||||
},
|
||||
isExtended: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
{
|
||||
displayName: 'Date Request Submitted',
|
||||
attr: 'last_submission_timestamp',
|
||||
sortFunc: dateSort,
|
||||
},
|
||||
statuses: {
|
||||
type: Array,
|
||||
default: [],
|
||||
{
|
||||
displayName: 'Date Request Last Edited',
|
||||
attr: 'last_edited_timestamp',
|
||||
extendedOnly: true,
|
||||
sortFunc: dateSort,
|
||||
},
|
||||
dodComponents: {
|
||||
type: Array,
|
||||
default: [],
|
||||
{
|
||||
displayName: 'Requester',
|
||||
attr: 'full_name',
|
||||
extendedOnly: true,
|
||||
sortFunc: defaultSort,
|
||||
},
|
||||
{
|
||||
displayName: 'Projected Annual Usage ($)',
|
||||
attr: 'annual_usage',
|
||||
sortFunc: defaultSort,
|
||||
},
|
||||
{
|
||||
displayName: 'Request Status',
|
||||
attr: 'status',
|
||||
sortFunc: defaultSort,
|
||||
},
|
||||
{
|
||||
displayName: 'DOD Component',
|
||||
attr: 'dod_component',
|
||||
extendedOnly: true,
|
||||
sortFunc: defaultSort,
|
||||
},
|
||||
]
|
||||
|
||||
return {
|
||||
searchValue: '',
|
||||
statusValue: '',
|
||||
dodComponentValue: '',
|
||||
sort: {
|
||||
columnName: '',
|
||||
isAscending: true
|
||||
},
|
||||
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 }
|
||||
|
||||
data: function () {
|
||||
const defaultSort = (sort, requests) => sortBy(prop(sort.columnName), requests)
|
||||
const dateSort = (sort, requests) => {
|
||||
const parseDate = compose(partial(parse), prop(sort.columnName))
|
||||
return sortBy(parseDate, requests)
|
||||
// toggle ascending / descending if column is clicked twice
|
||||
if (columnName === this.sort.columnName) {
|
||||
this.sort.isAscending = !this.sort.isAscending
|
||||
}
|
||||
|
||||
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: 'Projected Annual Usage ($)',
|
||||
attr: 'annual_usage',
|
||||
sortFunc: defaultSort,
|
||||
},
|
||||
{
|
||||
displayName: 'Request Status',
|
||||
attr: 'status',
|
||||
sortFunc: defaultSort,
|
||||
},
|
||||
{
|
||||
displayName: 'DOD Component',
|
||||
attr: 'dod_component',
|
||||
extendedOnly: true,
|
||||
sortFunc: defaultSort,
|
||||
},
|
||||
]
|
||||
|
||||
return {
|
||||
searchValue: '',
|
||||
statusValue: '',
|
||||
dodComponentValue: '',
|
||||
sort: {
|
||||
columnName: '',
|
||||
isAscending: true
|
||||
},
|
||||
columns: indexBy(prop('attr'), columnList),
|
||||
}
|
||||
this.sort.columnName = columnName;
|
||||
},
|
||||
|
||||
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;
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user