Filter by status

This commit is contained in:
richard-dds 2018-10-30 15:14:12 -04:00
parent 18c3354519
commit af014cae03
2 changed files with 13 additions and 5 deletions

View File

@ -37,18 +37,25 @@ export default {
computed: { computed: {
filteredRequests: function () { filteredRequests: function () {
return this.applySearch(this.searchValue) return this.applyFilters(this.applySearch(this.requests, this.searchValue), this.statusValue)
} }
}, },
methods: { methods: {
applySearch: function(query) { applySearch: (requests, query) => {
return this.requests.filter( return requests.filter(
(request) => query !== '' ? (request) => query !== '' ?
request.name.toLowerCase().includes(query.toLowerCase()) : request.name.toLowerCase().includes(query.toLowerCase()) :
true true
) )
}, },
applyFilters: (requests, status) => {
return requests.filter(
(request) => status !== '' ?
request.simple_status.toLowerCase() === status :
true
)
},
dollars: (value) => formatDollars(value, false), dollars: (value) => formatDollars(value, false),
}, },
} }

View File

@ -79,8 +79,8 @@
{% if extended_view %} {% if extended_view %}
<form class='search-bar'> <form class='search-bar'>
<div class='usa-input search-input'> <div class='usa-input search-input'>
<label for='requests-search'>Search requests by Order ID</label> <label for='requests-search'>Search requests by name</label>
<input v-model='searchValue' type='search' id='requests-search' name='requests-search' placeholder="Search by Order ID"/> <input v-model='searchValue' type='search' id='requests-search' name='requests-search' placeholder="Search by name"/>
<button type="submit"> <button type="submit">
<span class="hide">Search</span> <span class="hide">Search</span>
</button> </button>
@ -90,6 +90,7 @@
<label for='filter-status'>Filter requests by status</label> <label for='filter-status'>Filter requests by status</label>
<select v-model="statusValue" id="filter-status" name="filter-status"> <select v-model="statusValue" id="filter-status" name="filter-status">
<option value="" selected disabled>Filter by status</option> <option value="" selected disabled>Filter by status</option>
<option value="">All</option>
<option value="active">Active</option> <option value="active">Active</option>
<option value="pending">Pending</option> <option value="pending">Pending</option>
<option value="denied">Denied</option> <option value="denied">Denied</option>