dimagi · biyeun · Jun 12, 2024 · Jun 13, 2024 · Jun 17, 2024 · Jun 18, 2024
@@ -4,6 +4,52 @@
 from corehq.apps.hqwebapp.utils.bootstrap import set_bootstrap_version5
 
 
+def use_alpinejs(view_func):
+    """Use this decorator on the dispatch method of a TemplateView subclass
+    to use Alpine.js on a page.
+    Note: Eventually this will be bundled with Webpack. The es6/esm module
+    is incompatible with Requirejs and didn't seem fitting to add additional tooling
+    to support this in Requirejs since alpine.js lives primarily in HTML attributes.
+    Can be referenced in javascript with `window.Alpine` if necessary.
+
+    Example:
+        @use_alpinejs
+        def dispatch(self, request, *args, **kwargs):
+            return super().dispatch(request, *args, **kwargs)
+
+    Or alternatively:
+        @method_decorator(use_alpinejs, name='dispatch')
+        class MyViewClass(MyViewSubclass):
+            ...
+    """
+    return set_request_flag(view_func, 'use_alpinejs')
+
+
+def use_htmx(view_func):
+    """Use this decorator on the dispatch method of a TemplateView subclass
+    to use HTMX on a page.
+
+    Note: Bundling HTMX with RequireJS can be done by setting window.htmx = htmx
+    after importing the htmx module. However, some page loads caused HTMX to not initialize
+    properly on a page, resulting in components that never loaded. Importing the HTMX script
+    directly in <head> first thing proves to be the more performant and reliable way to get
+    HTMX initialize reliably and quickly.
+
+    TODO: Investigate bundling HTMX with Webpack.
+
+    Example:
+        @use_htmx
+        def dispatch(self, request, *args, **kwargs):
+            return super().dispatch(request, *args, **kwargs)
+
+    Or alternatively:
+        @method_decorator(use_htmx, name='dispatch')
+        class MyViewClass(MyViewSubclass):
+            ...
+    """
+    return set_request_flag(view_func, 'use_htmx')
+
+
 def use_daterangepicker(view_func):
     """Use this decorator on the dispatch method of a TemplateView subclass
     to enable the inclusion of the daterangepicker library at the base template

@@ -14,6 +14,7 @@ requirejs.config({
         "ko.mapping": "hqwebapp/js/lib/knockout_plugins/knockout_mapping.ko.min",
         "sentry_browser": "sentry/js/sentry.browser.7.28.0.min",
         "sentry_captureconsole": "sentry/js/sentry.captureconsole.7.28.0.min",
+        "sortablejs": "sortablejs/Sortable.min",
         "underscore": "underscore/underscore",
     },
     shim: {

@@ -20,6 +20,7 @@ requirejs.config({
         "popper": "@popperjs/core/dist/umd/popper.min",
         "sentry_browser": "sentry/js/sentry.browser.7.28.0.min",
         "sentry_captureconsole": "sentry/js/sentry.captureconsole.7.28.0.min",
+        "sortablejs": "sortablejs/Sortable.min",
         "tempusDominus": "@eonasdan/tempus-dominus/dist/js/tempus-dominus.min",
         "underscore": "underscore/underscore",
         "nvd3/nv.d3.latest.min": "nvd3-1.8.6/build/nv.d3.min",

@@ -76,3 +76,92 @@
 .table-editprops-filterval {
   min-width: 115px;
 }
+
+.table thead tr th.orderable {
+  position: relative;
+  padding: 0;
+
+  a {
+    display: block;
+    background-color: $blue-800;
+    color: $white;
+    padding: 0.5rem 0.5rem;
+  }
+  &:nth-child(odd) a {
+    background-color: $blue-700;
+  }
+
+  &::before,
+  &::after {
+    position: absolute;
+    display: block;
+    right: 10px;
+    line-height: 9px;
+    font-size: .8em;
+    color: $white;
+    opacity: 0.3;
+  }
+
+  &::before {
+    bottom: 50%;
+    content: "▲" / "";
+  }
+
+  &::after {
+    top: 50%;
+    content: "▼" / "";
+  }
+
+  &.asc::before {
+    opacity: 1.0;
+  }
+  &.desc::after {
+    opacity: 1.0;
+  }
+}
+
+.table thead tr th.select-header {
+  width: 28px;
+  background-color: $blue-800;
+
+  &:nth-child(odd) {
+    background-color: $blue-700;
+  }
+}
+
+
+.table tbody tr td .inline-edit-block {
+  display: block;
+  background-color: transparent;
+  transition: background-color .5s ease-in-out;
+  position: relative;
+
+  .inline-edit-button {
+    position: absolute;
+    right: 0;
+    top: calc(50% - 12px);
+    opacity: 0;
+    transition: opacity .5s ease-in-out;
+  }
+
+  &:hover {
+    background-color: $gray-200;
+    &:nth-child(odd) {
+      background-color: $gray-300;
+    }
+  }
+
+  &:hover .inline-edit-button {
+    display: block;
+    opacity: 1;
+  }
+}
+
+.table tbody tr.table-primary td .inline-edit-block {
+  &:hover {
+    background-color: $blue-100;
+    &:nth-child(odd) {
+      background-color: $blue-200;
+    }
+  }
+}
@@ -162,6 +162,13 @@
       window.USE_BOOTSTRAP5 = {{ use_bootstrap5|BOOL }};
     </script>
 
+    {% if request.use_htmx %}
+      <script type="text/javascript" src="{% static "htmx.org/dist/htmx.min.js" %}"></script>
+    {% endif %}
+    {% if request.use_alpinejs %}
+      <script type="text/javascript" src="{% static 'alpinejs/dist/cdn.min.js' %}"></script>
+    {% endif %}
+
     {% if not requirejs_main %}
       {% javascript_libraries use_bootstrap5=use_bootstrap5 underscore=True jquery_ui=request.use_jquery_ui ko=True hq=True analytics=True %}
     {% endif %}

@@ -13,6 +13,8 @@
         hq: Include initial_page_data and hq.helpers.js, needed for most HQ pages.
 {% endcomment %}
 
+<script src="{% static "sortablejs/Sortable.min.js" %}"></script>
+
 {% if underscore or analytics or hq %}
     <script src="{% static 'underscore/underscore-min.js' %}"></script>
     <script src="{% static 'hqwebapp/js/lib/modernizr.js' %}"></script>

@@ -0,0 +1,97 @@
+{% extends 'django_tables2/bootstrap5.html' %}
+{% load i18n %}
+{% load django_tables2 %}
+{% load hq_shared_tags %}
+
+{% block table-wrapper %}
+  <div class="table-container"
+       {% block table-container-attrs %}{% endblock %}
+      {% if table.css_id %} id="{{ table.css_id }}"{% endif %}>
+    {% block before_table %}{% endblock %}
+    {% block table %}
+      {{ block.super }}
+    {% endblock table %}
+    <div class="py-3 d-flex justify-content-between">
+      <div>
+        {% block num_entries %}
+          <div class="input-group">
+            <div class="input-group-text">
+              {% block num_entries.text %}
+                {% with start=table.page.start_index end=table.page.end_index total=table.page.paginator.count %}
+                    {% blocktranslate %}
+                        Showing {{ start }} to {{ end }} of {{ total }} entries
+                    {% endblocktranslate %}
+                {% endwith %}
+              {% endblock num_entries.text %}
+            </div>
+            {% block num_entries.select %}
+            <select class="form-select"
+                    {% block select-per-page-attr %}{% endblock %}>
+              {% for p in table.paginator.paging_options %}
+                <option value="{{ p }}"{% if p == table.paginator.per_page %} selected{% endif %}>
+                  {% blocktrans %}{{ p }} per page{% endblocktrans %}
+                </option>
+              {% endfor %}
+            </select>
+            {% endblock %}
+          </div>
+        {% endblock num_entries %}
+      </div>
+      <div>
+        {% block pagination %}
+          {% if table.page and table.paginator.num_pages > 1 %}
+            <nav aria-label="Table navigation">
+              <ul class="pagination">
+
+                {% block pagination.previous %}
+                  <li class="previous page-item{% if not table.page.has_previous %} disabled{% endif %}">
+                    <a class="page-link"
+                       {% if table.page.has_previous %}
+                         {% block prev-page-link-attr %}
+                            href="{% querystring table.prefixed_page_field=table.page.previous_page_number %}"
+                          {% endblock %}
+                       {% endif %}>
+                      {% trans 'Previous' %}
+                    </a>
+                  </li>
+                {% endblock pagination.previous %}
+
+                {% if table.page.has_previous or table.page.has_next %}
+                  {% block pagination.range %}
+                    {% for p in table.page|table_page_range:table.paginator %}
+                      <li class="page-item{% if table.page.number == p %} active{% endif %}">
+                        <a class="page-link" {% if p != '...' %}href="{% querystring table.prefixed_page_field=p %}"{% endif %}>
+                          {{ p }}
+                        </a>
+                      </li>
+                    {% endfor %}
+                  {% endblock pagination.range %}
+                {% endif %}
+
+                {% block pagination.next %}
+                  <li class="next page-item{% if not table.page.has_next %} disabled{% endif %}">
+                    <a class="page-link"
+                       {% if table.page.has_next %}
+                         {% block next-page-link-attr %}
+                            href="{% querystring table.prefixed_page_field=table.page.next_page_number %}"
+                          {% endblock %}
+                       {% endif %}>
+                      {% trans 'Next' %}
+                    </a>
+                  </li>
+                {% endblock pagination.next %}
+
+              </ul>
+            </nav>
+          {% endif %}
+        {% endblock pagination %}
+      </div>
+    </div>
+  </div>
+{% endblock table-wrapper %}
+
+{% block table.thead %}
+  {% if table.show_header %}
+    {% render_header %}
+  {% endif %}
+{% endblock table.thead %}
@@ -0,0 +1,61 @@
+{% extends "hqwebapp/tables/bootstrap5.html" %}
+{% load i18n %}
+{% load django_tables2 %}
+{% load hq_shared_tags %}
+
+{% block table.thead %}
+  {% if table.show_header %}
+    {% render_header 'htmx' %}
+  {% endif %}
+{% endblock table.thead %}
+
+{% block table-container-attrs %}
+  hx-get="{{ request.path_info }}{% querystring %}"
+  hx-replace-url="{% querystring %}"
+  hx-trigger="refreshTable"
+{% endblock %}
+
+{% block before_table %}
+  <div class="htmx-indicator">
+    <i class="fa-solid fa-spinner fa-spin"></i> {% trans "Updating..." %}
+  </div>
+{% endblock %}
+
+{% block select-per-page-attr %}
+  name="{{ table.per_page_field }}"
+  hx-get="{{ request.path_info }}"
+  hx-target="{% if table.css_id %}#{{ table.css_id }}{% else %}div.table-container{% endif %}"
+{% endblock %}
+
+{% block prev-page-link-attr %}
+    hx-get="{{ request.path_info }}{% querystring table.prefixed_page_field=table.page.previous_page_number %}"
+    hx-replace-url="{% querystring table.prefixed_page_field=table.page.previous_page_number %}"
+    hx-trigger="click"
+    hx-target="{% if table.css_id %}#{{ table.css_id }}{% else %}div.table-container{% endif %}"
+    hx-swap="outerHTML"
+{% endblock %}
+
+{% block next-page-link-attr %}
+    hx-get="{{ request.path_info }}{% querystring table.prefixed_page_field=table.page.next_page_number %}"
+    hx-replace-url="{% querystring table.prefixed_page_field=table.page.next_page_number %}"
+    hx-trigger="click"
+    hx-target="{% if table.css_id %}#{{ table.css_id }}{% else %}div.table-container{% endif %}"
+    hx-swap="outerHTML"
+{% endblock %}
+
+{% block pagination.range %}
+  {% for p in table.page|table_page_range:table.paginator %}
+    <li class="page-item{% if table.page.number == p %} active{% endif %}">
+      <a class="page-link"
+          {% if p != '...' %}
+         hx-get="{{ request.path_info }}{% querystring table.prefixed_page_field=p %}"
+         hx-replace-url="{% querystring table.prefixed_page_field=p %}"
+         hx-trigger="click"
+         hx-target="{% if table.css_id %}#{{ table.css_id }}{% else %}div.table-container{% endif %}"
+         hx-swap="outerHTML"
+          {% endif %}>
+        {{ p }}
+      </a>
+    </li>
+  {% endfor %}
+{% endblock pagination.range %}
@@ -0,0 +1,37 @@
+{% load querystring from django_tables2 %}
+
+<thead {{ table.attrs.thead.as_html }}>
+<tr>
+    {% for column in table.columns %}
+      <th {{ column.attrs.th.as_html }} scope="col">
+        {% if column.orderable %}
+          {% if column.sort_existing %}
+            <a {% if use_htmx_links %}class="link"
+               hx-get="{{ request.path_info }}{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}"
+               hx-trigger="click"
+               hx-target="{% if table.css_id %}#{{ table.css_id }}{% else %}div.table-container{% endif %}"
+               hx-swap="outerHTML"
+               {% else %}
+               href="{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}"
+               {% endif %}>
+              {{ column.header }}
+            </a>
+          {% else %}
+            <a {% if use_htmx_links %}class="link"
+               hx-get="{{ request.path_info }}{% querystring %}&{{ table.prefixed_order_by_field }}={{ column.order_by_alias.next }}"
+               hx-trigger="click"
+               hx-target="{% if table.css_id %}#{{ table.css_id }}{% else %}div.table-container{% endif %}"
+               hx-swap="outerHTML"
+               {% else %}
+               href="{% querystring %}&{{ table.prefixed_order_by_field }}={{ column.order_by_alias.next }}"
+               {% endif %}>
+              {{ column.header }}
+            </a>
+          {% endif %}
+        {% else %}
+          {{ column.header }}
+        {% endif %}
+      </th>
+    {% endfor %}
+</tr>
+</thead>