Vue-ify requests listing page
This commit is contained in:
richard-dds
parent
401a9e93a7
commit
c5800a8c98
@ -77,6 +77,10 @@ def dateFromString(value, formatter="%m/%Y"):
|
||||
return datetime.datetime.strptime(value, formatter)
|
||||
|
||||
|
||||
def boolean(value):
|
||||
return "true" if value else "false"
|
||||
|
||||
|
||||
def register_filters(app):
|
||||
app.jinja_env.filters["iconSvg"] = iconSvg
|
||||
app.jinja_env.filters["dollars"] = dollars
|
||||
@ -88,3 +92,4 @@ def register_filters(app):
|
||||
app.jinja_env.filters["renderList"] = renderList
|
||||
app.jinja_env.filters["formattedDate"] = formattedDate
|
||||
app.jinja_env.filters["dateFromString"] = dateFromString
|
||||
app.jinja_env.filters["boolean"] = boolean
|
||||
|
||||
@ -237,6 +237,10 @@ class Request(Base, mixins.TimestampsMixin, mixins.AuditableMixin):
|
||||
else None
|
||||
)
|
||||
|
||||
@property
|
||||
def simple_status(self):
|
||||
return self.latest_status.simple_name
|
||||
|
||||
def __repr__(self):
|
||||
return "<Request(status='{}', name='{}', creator='{}', is_approved='{}', time_created='{}', id='{}')>".format(
|
||||
self.status_displayname,
|
||||
|
||||
@ -56,6 +56,15 @@ class RequestStatusEvent(Base, mixins.TimestampsMixin, mixins.AuditableMixin):
|
||||
else:
|
||||
return self.displayname
|
||||
|
||||
@property
|
||||
def simple_name(self):
|
||||
if self.new_status in [RequestStatus.CHANGES_REQUESTED, RequestStatus.CHANGES_REQUESTED_TO_FINVER]:
|
||||
return "denied"
|
||||
elif self.new_status == [RequestStatus.PENDING_FINANCIAL_VERIFICATION, RequestStatus.APPROVED]:
|
||||
return "accepted"
|
||||
else:
|
||||
return "pending"
|
||||
|
||||
def __repr__(self):
|
||||
return "<RequestStatusEvent(log_name='{}', request='{}', id='{}')>".format(
|
||||
self.log_name, self.request_id, self.id
|
||||
|
||||
@ -55,6 +55,12 @@ class RequestsIndex(object):
|
||||
"extended_view": False,
|
||||
}
|
||||
|
||||
def _workspace_link_for_request(self, request):
|
||||
if request.is_approved:
|
||||
return url_for("workspaces.workspace_projects", workspace_id=request.workspace_id)
|
||||
else:
|
||||
return None
|
||||
|
||||
def _map_request(self, request, viewing_role):
|
||||
time_created = pendulum.instance(request.time_created)
|
||||
is_new = time_created.add(days=1) > pendulum.now()
|
||||
@ -67,7 +73,9 @@ class RequestsIndex(object):
|
||||
"workspace_id": request.workspace.id if request.workspace else None,
|
||||
"name": request.displayname,
|
||||
"is_new": is_new,
|
||||
"is_approved": request.is_approved,
|
||||
"status": request.status_displayname,
|
||||
"simple_status": request.simple_status,
|
||||
"app_count": app_count,
|
||||
"last_submission_timestamp": request.last_submission_timestamp,
|
||||
"last_edited_timestamp": request.latest_revision.time_updated,
|
||||
@ -76,6 +84,7 @@ class RequestsIndex(object):
|
||||
"edit_link": url_for("requests.edit", request_id=request.id),
|
||||
"action_required": request.action_required_by == viewing_role,
|
||||
"dod_component": request.latest_revision.dod_component,
|
||||
"workspace_link": self._workspace_link_for_request(request)
|
||||
}
|
||||
|
||||
|
||||
|
||||
50
js/components/forms/requests_list.js
Normal file
50
js/components/forms/requests_list.js
Normal file
@ -0,0 +1,50 @@
|
||||
import Modal from '../../mixins/modal'
|
||||
|
||||
export default {
|
||||
name: 'requests-list',
|
||||
|
||||
mixins: [Modal],
|
||||
|
||||
components: {
|
||||
Modal,
|
||||
},
|
||||
|
||||
props: {
|
||||
initialData: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
isExtended: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
data: function () {
|
||||
const requests = this.initialData
|
||||
return {
|
||||
requests,
|
||||
searchValue: '',
|
||||
statusValue: '',
|
||||
}
|
||||
},
|
||||
|
||||
mounted: function () {
|
||||
},
|
||||
|
||||
computed: {
|
||||
filteredRequests: function () {
|
||||
return this.applySearch(this.searchValue)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
applySearch: function(query) {
|
||||
return this.requests.filter(
|
||||
(request) => query !== '' ?
|
||||
request.name.toLowerCase().includes(query.toLowerCase()) :
|
||||
true
|
||||
)
|
||||
}
|
||||
},
|
||||
}
|
||||
@ -22,6 +22,7 @@ import SpendTable from './components/tables/spend_table'
|
||||
import CcpoApproval from './components/forms/ccpo_approval'
|
||||
import MembersList from './components/forms/members_list'
|
||||
import LocalDatetime from './components/local_datetime'
|
||||
import RequestsList from './components/forms/requests_list'
|
||||
|
||||
Vue.use(VTooltip)
|
||||
|
||||
@ -46,6 +47,7 @@ const app = new Vue({
|
||||
LocalDatetime,
|
||||
EditEnvironmentRole,
|
||||
EditProjectRoles,
|
||||
RequestsList,
|
||||
},
|
||||
|
||||
mounted: function() {
|
||||
|
||||
@ -5,6 +5,8 @@
|
||||
{% from "components/empty_state.html" import EmptyState %}
|
||||
|
||||
{% block content %}
|
||||
<requests-list inline-template v-bind:initial-data='{{ requests | tojson }}' v-bind:is-extended="{{ extended_view | boolean }}">
|
||||
<div>
|
||||
|
||||
{% call Modal(name='pendingFinancialVerification', dismissable=True) %}
|
||||
<h1>Request submitted!</h1>
|
||||
@ -55,7 +57,6 @@
|
||||
) }}
|
||||
|
||||
{% else %}
|
||||
|
||||
{% if extended_view %}
|
||||
<div class="row kpi">
|
||||
<div class="kpi__item col col--grow">
|
||||
@ -79,7 +80,7 @@
|
||||
<form class='search-bar'>
|
||||
<div class='usa-input search-input'>
|
||||
<label for='requests-search'>Search requests by Order ID</label>
|
||||
<input 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 Order ID"/>
|
||||
<button type="submit">
|
||||
<span class="hide">Search</span>
|
||||
</button>
|
||||
@ -87,11 +88,11 @@
|
||||
|
||||
<div class='usa-input'>
|
||||
<label for='filter-status'>Filter requests by status</label>
|
||||
<select 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="">Active</option>
|
||||
<option value="">Pending</option>
|
||||
<option value="">Denied</option>
|
||||
<option value="active">Active</option>
|
||||
<option value="pending">Pending</option>
|
||||
<option value="denied">Denied</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
@ -114,39 +115,38 @@
|
||||
{% endif %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for r in requests %}
|
||||
<tbody v-for="r in filteredRequests">
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<a class='icon-link icon-link--large' href="{{ r.edit_link }}">{{ r.name }}</a>
|
||||
{% if r.action_required %}<span class="label label--info">Action Required</span>{% endif %}
|
||||
<a class='icon-link icon-link--large' :href="r.edit_link">!{ r.name }</a>
|
||||
<span v-if="r.action_required" class="label label--info">Action Required</span>
|
||||
</th>
|
||||
<td>{{ r.last_submission_timestamp | formattedDate }}</td>
|
||||
<td>!{ r.last_submission_timestamp}</td>
|
||||
{% if extended_view %}
|
||||
<td>{{ r.last_edited_timestamp | formattedDate }}</td>
|
||||
<td>{{ r.full_name }}</td>
|
||||
<td>!{ r.last_edited_timestamp }</td>
|
||||
<td>!{ r.full_name }</td>
|
||||
{% endif %}
|
||||
<td>{{ r.annual_usage | dollars }}</td>
|
||||
<td>!{ r.annual_usage }</td>
|
||||
<td>
|
||||
{% if r.status == 'Approved' %}
|
||||
<a class="icon-link icon-link--large" href="{{ url_for('workspaces.workspace_projects', workspace_id=r.workspace_id) }}">
|
||||
{{ r.status }}
|
||||
</a>
|
||||
{% else %}
|
||||
{{ r.status }}
|
||||
{% endif %}
|
||||
<a v-if="r.is_approved" class="icon-link icon-link--large" :href="r.workspace_link">
|
||||
!{ r.status }
|
||||
</a>
|
||||
<span v-else>
|
||||
!{ r.status }
|
||||
</span>
|
||||
</td>
|
||||
{% if extended_view %}
|
||||
<td>{{ r.dod_component }}</td>
|
||||
<td>!{ r.dod_component }</td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</requests-list>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user