drugs/core/templates/partials/results_table.html

{% load django_tables2 %}
{% load django_tables2_bulma_template %}
{% load static %}
{% load joinsep %}
{% load urlsafe %}
{% load cache %}

{# cache 3600 results_table_full request.user.id table #}
{% block table-wrapper %}
  <script src="{% static 'js/column-shifter.js' %}"></script>
  <div id="drilldown-table" class="column-shifter-container" style="position:relative; z-index:1;">
    {% block table %}
      <div class="nowrap-parent">
        <div class="nowrap-child">
          <div class="dropdown" id="dropdown">
            <div class="dropdown-trigger">
              <button id="dropdown-trigger" class="button dropdown-toggle" aria-haspopup="true" aria-controls="dropdown-menu">
                <span>Show/hide fields</span>
                <span class="icon is-small">
                  <i class="fas fa-angle-down" aria-hidden="true"></i>
                </span>
              </button>
            </div>
            <div class="dropdown-menu" id="dropdown-menu" role="menu">
              <div class="dropdown-content" style="position:absolute; z-index:2;">
                {% for column in table.columns %}
                  {% if column.name in show %}
                    <a class="btn-shift-column dropdown-item"
                      data-td-class="{{ column.name }}"
                      data-state="on"
                      {% if not forloop.last %} style="border-bottom:1px solid #ccc;" {%endif %}
                      data-table-class-container="drilldown-table">
                      <span class="check icon" data-tooltip="Visible" style="display:none;">
                        <i class="fa-solid fa-check"></i>
                      </span>
                      <span class="uncheck icon" data-tooltip="Hidden" style="display:none;">
                        <i class="fa-solid fa-xmark"></i>
                      </span>
                      {{ column.header }}
                    </a>
                  {% endif %}
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
        <div class="nowrap-child">
          <span id="loader" class="button is-light has-text-link is-loading">Static</span>
        </div>
      </div>
      <script>
        var dropdown_button = document.getElementById("dropdown-trigger");
        var dropdown = document.getElementById("dropdown");
        dropdown_button.addEventListener('click', function(e) {
          // elements[i].preventDefault();
          dropdown.classList.toggle('is-active');
        });

      </script>
      <div id="table-container" style="display:none;">
        <table {% render_attrs table.attrs class="table drilldown-results-table is-fullwidth" %}>
          {% block table.thead %}
            {% if table.show_header %}
              <thead {% render_attrs table.attrs.thead class="" %}>
                {% block table.thead.row %}
                  <tr>
                    {% for column in table.columns %}
                      {% if column.name in show %}
                        {% block table.thead.th %}
                          <th class="orderable {{ column.name }}">
                            <div class="nowrap-parent">
                              {% if column.orderable %}
                                <div class="nowrap-child">
                                  {% if column.is_ordered %}
                                    {% is_descending column.order_by as descending %}
                                    {% if descending %}
                                      <span class="icon" aria-hidden="true">{% block table.desc_icon %}<i class="fa-solid fa-sort-down"></i>{% endblock table.desc_icon %}</span>
                                    {% else %}
                                      <span class="icon" aria-hidden="true">{% block table.asc_icon %}<i class="fa-solid fa-sort-up"></i>{% endblock table.asc_icon %}</span>
                                    {% endif %}
                                  {% else %}
                                    <span class="icon" aria-hidden="true">{% block table.orderable_icon %}<i class="fa-solid fa-sort"></i>{% endblock table.orderable_icon %}</span>
                                  {% endif %}
                                </div>
                                <div class="nowrap-child">
                                  <a
                                    hx-get="search/partial/{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}&{{ uri }}"
                                    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                                    hx-trigger="click"
                                    hx-target="#drilldown-table"
                                    hx-swap="outerHTML"
                                    hx-indicator="#spinner"
                                    style="cursor: pointer;">
                                    {{ column.header }}
                                  </a>
                                </div>
                              {% else %}
                                <div class="nowrap-child">
                                  {{ column.header }}
                                </div>
                              {% endif %}
                            </div>
                          </th>
                        {% endblock table.thead.th %}
                      {% endif %}

                    {% endfor %}
                  </tr>
                {% endblock table.thead.row %}
              </thead>
            {% endif %}
          {% endblock table.thead %}
          {% block table.tbody %}
            <tbody {{ table.attrs.tbody.as_html }}>
              {% for row in table.paginated_rows %}
                {% block table.tbody.row %}
                  {% if row.cells.type == 'control' %}
                    <tr>
                      <td></td>
                      <td>
                        <span class="icon has-text-grey" data-tooltip="Hidden">
                          <i class="fa-solid fa-file-slash"></i>
                        </span>
                      </td>
                      <td>
                        <p class="has-text-grey">Hidden {{ row.cells.hidden }} similar result{% if row.cells.hidden > 1%}s{% endif %}</p>
                      </td>

                    </tr>
                  {% else %}
                    <tr>
                      {% for column, cell in row.items %}
                        {% if column.name in show %}
                          {% block table.tbody.td %}
                            {% if cell == '—' %}
                              <td class="{{ column.name }}">
                                <span class="icon">
                                  <i class="fa-solid fa-file-slash"></i>
                                </span>
                              </td>
                            {% elif cell is True or cell is False %}
                              <td class="{{ column.name }}">
                                {% if cell is True %}
                                  <span class="icon has-text-success">
                                    <i class="fa-solid fa-check"></i>
                                  </span>
                                {% else %}
                                  <span class="icon">
                                    <i class="fa-solid fa-xmark"></i>
                                  </span>
                                {% endif %}
                              </td>
                            {% elif column.name == "dosages" %}
                              <td class="{{ column.name }}">
                                {{ cell.entry }}
                              </td>
                            {% elif column.name == "name" %}
                              <td class="{{ column.name }}">
                                <a href="{% url 'drug_detail' type='page' pk=row.cells.id %}"><button
                                  class="button">
                                  <span class="icon-text">
                                    <span class="icon">
                                      <i class="fa-solid fa-eye"></i>
                                    </span>
                                  </span>
                                </button>
                                </a>
                                {{ cell }}
                              </td>

                            {% else %}
                              <td class="{{ column.name }}">
                                <a
                                  class="has-text-grey"
                                  onclick="populateSearch('{{ column.name }}', '{{ cell|escapejs }}')">
                                  {{ cell }}
                                </a>
                              </td>
                            {% endif %}
                          {% endblock table.tbody.td %}
                        {% endif %}
                      {% endfor %}
                    </tr>
                  {% endif %}
                {% endblock table.tbody.row %}
              {% empty %}
                {% if table.empty_text %}
                  {% block table.tbody.empty_text %}
                    <tr><td class="{{ column.name }}" colspan="{{ table.columns|length }}">{{ table.empty_text }}</td></tr>
                  {% endblock table.tbody.empty_text %}
                {% endif %}
              {% endfor %}
            </tbody>
          {% endblock table.tbody %}
          {% block table.tfoot %}
            {% if table.has_footer %}
              <tfoot {{ table.attrs.tfoot.as_html }}>
                {% block table.tfoot.row %}
                  <tr>
                    {% for column in table.columns %}
                      {% block table.tfoot.td %}
                        <td class="{{ column.name }}" {{ column.attrs.tf.as_html }}>{{ column.footer }}</td>
                      {% endblock table.tfoot.td %}
                    {% endfor %}
                  </tr>
                {% endblock table.tfoot.row %}
              </tfoot>
            {% endif %}
          {% endblock table.tfoot %}
        </table>
      </div>
    {% endblock table %}
    {% block pagination %}
      {% if table.page and table.paginator.num_pages > 1 %}
        <nav class="pagination is-justify-content-flex-end" role="navigation" aria-label="pagination">
          {% block pagination.previous %}
            <a
              class="pagination-previous is-flex-grow-0 {% if not table.page.has_previous %}is-hidden-mobile{% endif %}"
              {% if table.page.has_previous %}
                hx-get="search/partial/{% querystring table.prefixed_page_field=table.page.previous_page_number %}&{{ uri }}"
                hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                hx-trigger="click"
                hx-target="#drilldown-table"
                hx-swap="outerHTML"
                hx-indicator="#spinner"
              {% else %}
                href="#"
                disabled
              {% endif %}
              style="order:1;">
              {% block pagination.previous.text %}
                <span aria-hidden="true">&laquo;</span>
              {% endblock pagination.previous.text  %}
            </a>
          {% endblock pagination.previous %}
          {% block pagination.next %}
            <a
              class="pagination-next is-flex-grow-0 {% if not table.page.has_next %}is-hidden-mobile{% endif %}"
              {% if table.page.has_next %}
                hx-get="search/partial/{% querystring table.prefixed_page_field=table.page.next_page_number %}&{{ uri }}"
                hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                hx-trigger="click"
                hx-target="#drilldown-table"
                hx-swap="outerHTML"
                hx-indicator="#spinner"
              {% else %}
                href="#"
                disabled
              {% endif %}
              style="order:3;"
            >
              {% block pagination.next.text %}
                <span aria-hidden="true">&raquo;</span>
              {% endblock pagination.next.text  %}
            </a>
          {% endblock pagination.next %}
          {% if table.page.has_previous or table.page.has_next %}
            {% block pagination.range %}
              <ul class="pagination-list is-flex-grow-0" style="order:2;">
                {% for p in table.page|table_page_range:table.paginator %}
                  <li>
                    <a
                      class="pagination-link {% if p == table.page.number %}is-current{% endif %}"
                      aria-label="Page {{ p }}" block
                      {% if p == table.page.number %}aria-current="page"{% endif %}
                      {% if p == table.page.number %}
                        href="#"
                      {% else %}
                        hx-get="search/partial/{% querystring table.prefixed_page_field=p %}&{{ uri }}"
                        hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                        hx-trigger="click"
                        hx-target="#drilldown-table"
                        hx-swap="outerHTML"
                        hx-indicator="#spinner"
                      {% endif %}
                    >
                      {% if p == '...' %}
                        <span class="pagination-ellipsis">&hellip;</span>
                      {% else %}
                        {{ p }}
                      {% endif %}
                    </a>
                  </li>
                {% endfor %}
              </ul>
            {% endblock pagination.range %}
          {% endif %}
        </nav>
      {% endif %}
    {% endblock pagination %}
  </div>
{% endblock table-wrapper %}
{# endcache #}