atst/templates/requests/index.html

{% extends "base.html" %}

{% from "components/alert.html" import Alert %}
{% from "components/modal.html" import Modal %}
{% 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>

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

{% if num_action_required %}
  {% set title -%}
    Action required on {{ num_action_required }} requests.
  {%- endset %}

  {{ Alert (title)}}
{% endif %}

{% 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 class="col col--grow">

    {% if extended_view %}
      <form class='search-bar'>
        <div class='usa-input search-input'>
          <label for='requests-search'>Search requests by Order ID</label>
          <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>
        </div>

        <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="active">Active</option>
            <option value="pending">Pending</option>
            <option value="denied">Denied</option>
          </select>
        </div>
      </form>
    {% endif %}

    <div class='responsive-table-wrapper'>
      <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 %}
          </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>!{ r.last_submission_timestamp}</td>
            {% if extended_view %}
              <td>!{ r.last_edited_timestamp }</td>
              <td>!{ r.full_name }</td>
            {% endif %}
            <td>!{ 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>
  </div>
{% endif %}

</div>
</requests-list>

{% endblock %}