pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sort requests

Browse Source
This commit is contained in:
richard-dds 2018-10-31 14:52:48 -04:00
parent 5477076fe1
commit d540b2ae74
4 changed files with 68 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
js/components/forms/requests_list.js
View File

@ -1,6 +1,8 @@
import Modal from '../../mixins/modal'
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',
@ -28,9 +30,30 @@ export 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: '',
sort: {
columnName: '',
isAscending: true
},
columns: indexBy(prop('attr'), columnList),
}
},
@ -39,25 +62,50 @@ export default {
computed: {
filteredRequests: function () {
return this.applyFilters(this.applySearch(this.requests, this.searchValue), this.statusValue)
return pipe(
partial(this.applySearch, [this.searchValue]),
partial(this.applyFilters, [this.statusValue]),
partial(this.applySort, [this.sort]),
)(this.requests)
}
},
methods: {
applySearch: (requests, query) => {
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: (requests, status) => {
applyFilters: (status, requests) => {
return requests.filter(
(request) => status !== '' ?
request.status === status :
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 (columnName === this.sort.columnName) {
this.sort.isAscending = !this.sort.isAscending
}
this.sort.columnName = columnName;
},
},
}

1
package.json
View File

@ -17,6 +17,7 @@
"date-fns": "^1.29.0",
"npm": "^6.0.1",
"parcel": "^1.9.7",
"ramda": "^0.25.0",
"svg-innerhtml": "^1.1.0",
"text-mask-addons": "^3.8.0",
"uswds": "^1.6.3",

23
templates/requests/index.html
View File

@ -3,6 +3,7 @@
{% from "components/alert.html" import Alert %}
{% from "components/modal.html" import Modal %}
{% from "components/empty_state.html" import EmptyState %}
{% from "components/icon.html" import Icon %}
{% block content %}
<requests-list inline-template v-bind:requests='{{ requests | tojson }}' v-bind:is-extended='{{ extended_view | tojson }}' v-bind:statuses='{{ possible_statuses | tojson }}'>
@ -101,17 +102,15 @@
<table>
<thead>
<tr>
<th scope="col">JEDI Cloud Request Name</th>
<th scope="col">Date Request Submitted</th>
{% if extended_view %}
<th scope="col">Date Request Last Edited</th>
<th scope="col">Requester</th>
{% endif %}
<th scope="col">Projected Annual Usage ($)</th>
<th scope="col">Request Status</th>
{% if extended_view %}
<th scope="col">DOD Component</th>
{% endif %}
<th v-for="column in getColumns()"scope="col">
<a @click.prevent="updateSortValue(column.attr)" href="">!{ column.displayName }</a>
<span v-if="column.attr === sort.columnName && sort.isAscending" class="icon icon--caret_up" aria-idden="true">
{{ Icon("caret_down") }}
</span>
<span v-else-if="column.attr === sort.columnName && !sort.isAscending">
{{ Icon("caret_up") }}
</span>
</th>
</tr>
</thead>
<tbody v-for="r in filteredRequests">
@ -121,7 +120,7 @@
<span v-if="r.action_required" class="label label--info">Action Required</span>
</th>
<td><local-datetime :timestamp="r.last_submission_timestamp" format="M/D/YYYY"></td>
{% if extended_view %}
{% if extended_view %}
<td><local-datetime :timestamp="r.last_edited_timestamp" format="M/D/YYYY"></td>
<td>!{ r.full_name }</td>
{% endif %}

5
yarn.lock
View File

@ -6101,6 +6101,11 @@ qw@~1.0.1:
resolved "https://registry.yarnpkg.com/qw/-/qw-1.0.1.tgz#efbfdc740f9ad054304426acb183412cc8b996d4"
integrity sha1-77/cdA+a0FQwRCassYNBLMi5ltQ=
ramda@^0.25.0:
version "0.25.0"
resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.25.0.tgz#8fdf68231cffa90bc2f9460390a0cb74a29b29a9"
integrity sha512-GXpfrYVPwx3K7RQ6aYT8KPS8XViSXUVJT1ONhoKPE9VAleW42YE+U+8VEyGWt41EnEQW7gwecYJriTI0pKoecQ==
randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
version "2.0.6"
resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.6.tgz#d302c522948588848a8d300c932b44c24231da80"