atst/templates/portfolios/task_orders/index.html

{% from "components/empty_state.html" import EmptyState %}
{% from "components/icon.html" import Icon %}

{% extends "portfolios/base.html" %}

{% block portfolio_content %}

{% macro ViewLink(task_order) %}
  <a href="{{ url_for('portfolios.view_task_order', portfolio_id=portfolio.id, task_order_id=task_order.id) }}" class="icon-link view-task-order-link">
    <span>View</span>
    {{ Icon("caret_right", classes="icon--tiny") }}
  </a>
{% endmacro %}

{% macro TaskOrderList(task_orders, label='success', expired=False, funded=False) %}
  <task-order-list
    inline-template
    v-bind:data='{{ task_orders | tojson }}'
    v-bind:expired='{{ 'true' if expired else 'false' }}'
    v-bind:funded='{{'true' if funded else 'false' }}'
    v-cloak
    >
    <div class='responsive-table-wrapper'>
      <table v-cloak>
        <thead>
          <tr>
            <th v-for="col in getColumns()" @click="updateSort(col.displayName)" :width="col.width" :class="col.class" scope="col">
              !{ col.displayName }
              <template v-if="col.sortFunc">
                <span class="sorting-direction" v-if="col.displayName === sortInfo.columnName && sortInfo.isAscending">
                  {{ Icon("caret_down", classes="icon--tiny") }}
                </span>
                <span class="sorting-direction" v-if="col.displayName === sortInfo.columnName && !sortInfo.isAscending">
                  {{ Icon("caret_up", classes="icon--tiny") }}
                </span>
              </template>
            </th>
          </tr>
        </thead>

        <tbody>
          <tr v-for='taskOrder in taskOrders' :key="taskOrder.id">
            <td>
              <span class='label label--{{ label }}'>!{ taskOrder.display_status }</span>
            </td>
            <td class='table-cell--grow'>
              <span :class="{ 'to-performance-period': true, 'to-expiring-soon': (taskOrder.days_to_expiration > 0 && taskOrder.days_to_expiration <= 30), 'funded': funded && taskOrder.display_status === 'Active', 'unfunded': !funded && taskOrder.display_status === 'Active' }">
                <local-datetime
                  v-bind:timestamp="taskOrder.start_date"
                  format="M/D/YYYY">
                  </local-datetime>
                  -
                <local-datetime
                  v-bind:timestamp="taskOrder.end_date"
                  format="M/D/YYYY"
                  class="to-end-date"
                  >
                </local-datetime>
                <span
                  v-if="taskOrder.days_to_expiration > 0 && taskOrder.days_to_expiration <= 30 && funded"
                  class="to-expiration-alert">
                    {{ Icon('ok') }} Period ending in !{ taskOrder.days_to_expiration } days, but new period funded
                </span>
                <span
                  v-if="taskOrder.days_to_expiration > 0 && taskOrder.days_to_expiration <= 30 && !funded"
                  class="to-expiration-alert">
                  {{ Icon('alert') }} Period ends in !{ taskOrder.days_to_expiration } days, submit a new task order<br>
                </span>
              </span>
            </td>
            <td class="table-cell--align-right">
              <span v-html='formatDollars(taskOrder.budget)'></span>
            </td>
            <td v-bind:class="{ 'table-cell--align-right': true, 'unused-balance': expired && taskOrder.balance > 0 }">
              <span v-html='formatDollars(taskOrder.balance)'></span>
            </td>
            <td>
              <a v-bind:href="taskOrder.url" class="icon-link view-task-order-link">
                <span>View</span>
                {{ Icon("caret_right", classes="icon--tiny") }}
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </task-order-list>
{% endmacro %}

<div class="portfolio-funding">

  <div class='panel'>
    <div class='panel__content portfolio-funding__header row'>
      <h3>Portfolio Funding</h3>
      <div class='portfolio-funding__header--funded-through {{ "funded" if funding_end_date is not none and funded else "unfunded"}}'>
        {% if funding_end_date and funded %}
          {{ Icon('ok') }}
          Funded through
          <local-datetime
            timestamp='{{ funding_end_date }}'
            format="M/D/YYYY">
          </local-datetime>
        {% elif funding_end_date and not funded %}
          {{ Icon('alert') }}
          Funded period ends
          <local-datetime
            timestamp='{{ funding_end_date }}'
            format="M/D/YYYY">
          </local-datetime>
        {% endif %}
      </div>
      <a href="{{ url_for("task_orders.new", screen=1, portfolio_id=portfolio.id) }}" class="usa-button">Start a New Task Order</a>
    </div>
  </div>

  {% for task_order in pending_task_orders %}
    <div class='panel'>
      <div class='panel__content pending-task-order row'>
        <span class='label label--warning'>Pending</span>
        <div class="pending-task-order__started col">
          <dt>Started</dt>
          <dd>
            <local-datetime
              timestamp="{{ task_order.time_created }}"
              format="M/D/YYYY">
              </local-datetime>
          </dd>
        </div>
        <div class="pending-task-order__value col">
          <dt>Value</dt>
          <dd>{{ task_order.budget | dollars }}</dd>
        </div>
        {{ ViewLink(task_order) }}
      </div>
    </div>
  {% endfor %}


  {% if not active_task_orders and not pending_task_orders %}
    {{ EmptyState(
      'This portfolio doesn’t have any active or pending task orders.',
      action_label='Add a New Task Order',
      action_href=url_for('task_orders.new', screen=1, portfolio_id=portfolio.id),
      icon='cloud',
    ) }}
  {% endif %}

  {% if active_task_orders %}
    {{ TaskOrderList(active_task_orders, label='success', funded=funded) }}
    <div class='panel portfolio-total-balance'>
      <div class='panel__content row'>
        <span>{{ total_balance | dollars }}</span>
        <span class='label label--success'>Total Active Balance</span>
      </div>
    </div>
  {% endif %}

  {% if expired_task_orders %}
    {{ TaskOrderList(expired_task_orders, label='expired', expired=True) }}
  {% endif %}
</div>

{% endblock %}