Move member/request list components out of "forms" directory
This commit is contained in:
Patrick Smith
@@ -1,131 +0,0 @@
|
||||
import { compose, sortBy, reverse, indexBy, partial, prop, pipe, toLower } from 'ramda'
|
||||
|
||||
const search = (query, members) => {
|
||||
if (query === '' || query === 'all') {
|
||||
return members
|
||||
} else {
|
||||
const normalizedQuery = query.toLowerCase()
|
||||
return members.filter(
|
||||
(member) => member.name.toLowerCase().includes(normalizedQuery)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const filterByStatus = (status, statusesByDisplayName, members) => {
|
||||
const getStatusFromDisplayName = (_status) => statusesByDisplayName[_status].name
|
||||
|
||||
if (status === '' || status === 'all') {
|
||||
return members
|
||||
} else {
|
||||
return members.filter(
|
||||
(member) => getStatusFromDisplayName(member.status) === status
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const filterByRole = (role, rolesByDisplayname, members) => {
|
||||
const getRoleNameFromDisplayName = (_role) => rolesByDisplayname[_role].name
|
||||
|
||||
if (role === '' || role === 'all') {
|
||||
return members
|
||||
} else {
|
||||
return members.filter(
|
||||
(member) => getRoleNameFromDisplayName(member.role) === role
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
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: 'members-list',
|
||||
|
||||
props: {
|
||||
members: Array,
|
||||
role_choices: Array,
|
||||
status_choices: Array,
|
||||
},
|
||||
|
||||
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: 'Name',
|
||||
attr: 'name',
|
||||
sortFunc: alphabeticalSort,
|
||||
width: "50%"
|
||||
},
|
||||
{
|
||||
displayName: 'Environments',
|
||||
attr: 'num_env',
|
||||
sortFunc: numericSort,
|
||||
class: "table-cell--align-right"
|
||||
},
|
||||
{
|
||||
displayName: 'Status',
|
||||
attr: 'status',
|
||||
sortFunc: alphabeticalSort
|
||||
},
|
||||
{
|
||||
displayName: 'Workspace Role',
|
||||
attr: 'role',
|
||||
sortFunc: alphabeticalSort
|
||||
},
|
||||
]
|
||||
|
||||
return {
|
||||
searchValue: '',
|
||||
status: '',
|
||||
statusesByDisplayName: indexBy(prop('display_name'), this.status_choices),
|
||||
role: '',
|
||||
rolesByDisplayName: indexBy(prop('display_name'), this.role_choices),
|
||||
sortInfo: {
|
||||
columnName: '',
|
||||
isAscending: true,
|
||||
columns: indexBy(prop('displayName'), columns)
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
searchedList: function () {
|
||||
return pipe(
|
||||
partial(search, [this.searchValue]),
|
||||
partial(filterByStatus, [this.status, this.statusesByDisplayName]),
|
||||
partial(filterByRole, [this.role, this.rolesByDisplayName]),
|
||||
partial(sort, [this.sortInfo])
|
||||
)(this.members)
|
||||
}
|
||||
},
|
||||
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,148 +0,0 @@
|
||||
import LocalDatetime from '../../components/local_datetime'
|
||||
import { formatDollars } from '../../lib/dollars'
|
||||
import { parse } from 'date-fns'
|
||||
import { compose, partial, indexBy, prop, 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), prop(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: '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 }
|
||||
|
||||
// toggle ascending / descending if column is clicked twice
|
||||
if (columnName === this.sort.columnName) {
|
||||
this.sort.isAscending = !this.sort.isAscending
|
||||
}
|
||||
|
||||
this.sort.columnName = columnName;
|
||||
},
|
||||
},
|
||||
}
|
||||
Reference in New Issue
Block a user