178 lines
6.1 KiB
HTML
178 lines
6.1 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% from "components/modal.html" import Modal %}
|
|
{% from "components/empty_state.html" import EmptyState %}
|
|
{% from "components/icon.html" import Icon %}
|
|
|
|
{% block content %}
|
|
|
|
{% call Modal(name='pendingFinancialVerification', dismissable=True) %}
|
|
<h1>Request submitted!</h1>
|
|
|
|
{% include 'fragments/pending_financial_verification.html' %}
|
|
|
|
<div class='action-group'>
|
|
<button autofocus type=button v-on:click="closeModal('pendingFinancialVerification')" class='action-group__action usa-button'>Close</button>
|
|
</div>
|
|
{% endcall %}
|
|
|
|
{% call Modal(name='pendingCCPOApproval', dismissable=True) %}
|
|
<h1>Financial Verification submitted!</h1>
|
|
|
|
{% include 'fragments/pending_ccpo_approval_modal.html' %}
|
|
|
|
<div class='action-group'>
|
|
<button autofocus type='button' v-on:click="closeModal('pendingCCPOApproval')" class='action-group__action usa-button'>Close</button>
|
|
</div>
|
|
{% endcall %}
|
|
|
|
{% call Modal(name='pendingCCPOAcceptance', dismissable=True) %}
|
|
<h1>Request submitted!</h1>
|
|
|
|
{% include 'fragments/pending_ccpo_acceptance_alert.html' %}
|
|
|
|
<div class='action-group'>
|
|
<button autofocus type='button' v-on:click="closeModal('pendingCCPOAcceptance')" class='action-group__action usa-button'>Close</button>
|
|
</div>
|
|
{% endcall %}
|
|
|
|
<requests-list
|
|
inline-template
|
|
v-bind:requests='{{ requests | tojson }}'
|
|
v-bind:is-extended='{{ extended_view | tojson }}'
|
|
v-bind:statuses='{{ possible_statuses | tojson }}'
|
|
v-bind:dod-components='{{ possible_dod_components | tojson }}'
|
|
>
|
|
<div>
|
|
|
|
{% include "fragments/flash.html" %}
|
|
|
|
{% if not requests %}
|
|
|
|
{{ EmptyState(
|
|
'You currently have no JEDI Cloud workspaces.',
|
|
sub_message='A JEDI Cloud Workspace is where you manage your projects and control user access to those projects.',
|
|
action_label='Create a new JEDI Cloud Request',
|
|
action_href=url_for('requests.requests_form_new', screen=1),
|
|
icon='document'
|
|
) }}
|
|
|
|
{% else %}
|
|
{% if extended_view %}
|
|
<div class="row kpi">
|
|
<div class="kpi__item col col--grow">
|
|
<div class="kpi__item__value">{{ kpi_inprogress }}</div>
|
|
<div class="kpi__item__description">Requests in progress</div>
|
|
</div>
|
|
<div class="kpi__item col col--grow">
|
|
<div class="kpi__item__value">{{ kpi_pending }}</div>
|
|
<div class="kpi__item__description">Pending CCPO Action</div>
|
|
</div>
|
|
<div class="kpi__item col col--grow">
|
|
<div class="kpi__item__value">{{ kpi_completed }}</div>
|
|
<div class="kpi__item__description">Approved Requests</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div v-cloak class="col col--grow">
|
|
|
|
{% if extended_view %}
|
|
<form @submit.prevent class='search-bar'>
|
|
<div class='usa-input search-input'>
|
|
<label for='requests-search'>Search requests by name</label>
|
|
<input v-model='searchValue' type='search' id='requests-search' name='requests-search' placeholder="Search by name"/>
|
|
<button>
|
|
<span class="hide">Search</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="search-bar__filters">
|
|
<div class='usa-input'>
|
|
<label for='filter-status'>Filter requests by status</label>
|
|
<select v-model="statusValue" id="filter-status" name="filter-status">
|
|
<option value="" selected disabled>Filter by status</option>
|
|
<option value="">All</option>
|
|
<option v-for="status in statuses" :value="status">!{ status }</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class='usa-input'>
|
|
<label for='filter-dod-component'>Filter requests by DOD component</label>
|
|
<select v-model="dodComponentValue" id="filter-dod-component" name="filter-dod-component">
|
|
<option value="" selected disabled>Filter by DOD Component</option>
|
|
<option value="">All</option>
|
|
<option v-for="dodComponent in dodComponents" :value="dodComponent">!{ dodComponent }</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
{% endif %}
|
|
|
|
<div v-cloak class='responsive-table-wrapper'>
|
|
<table v-if="filteredRequests.length">
|
|
<thead>
|
|
<tr>
|
|
<th @click.prevent="updateSortValue(column.attr)" v-for="column in getColumns()"scope="col">
|
|
!{ column.displayName }
|
|
<span v-if="column.attr === sort.columnName && sort.isAscending">
|
|
{{ 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">
|
|
<tr>
|
|
<th scope="row">
|
|
<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>
|
|
<local-datetime
|
|
v-if="r.last_submission_timestamp"
|
|
:timestamp="r.last_submission_timestamp"
|
|
format="M/D/YYYY">
|
|
</local-datetime>
|
|
<span v-else>—<span>
|
|
</td>
|
|
{% if extended_view %}
|
|
<td><local-datetime :timestamp="r.last_edited_timestamp" format="M/D/YYYY"></td>
|
|
<td>!{ r.full_name }</td>
|
|
{% endif %}
|
|
<td>!{ dollars(r.annual_usage) }</td>
|
|
<td>
|
|
<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>
|
|
{% endif %}
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div v-else>
|
|
{{ EmptyState(
|
|
'No requests found.',
|
|
action_label=None,
|
|
action_href=None,
|
|
sub_message='Please try a different search.',
|
|
icon=None
|
|
) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</requests-list>
|
|
|
|
{% endblock %}
|
|
|