atst/templates/requests/index.html
montana-mil 52bb0bd5fc
Merge pull request #497 from dod-ccpo/v-cloak
Prevent Vue from Loading Variables Before Evaluation
2018-12-20 10:09:04 -05:00

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 %}