Htmx wrappers (#136)

* updates and templates for HtmxOptionMultiFilterView * reorder parameters --------- Co-authored-by: David Slusser <david.slusser@sealstorage.io>
davidslusser · Oct 13, 2024 · 54ebf96 · 54ebf96
1 parent 82bc3aa
commit 54ebf96
Show file tree

Hide file tree

Showing 12 changed files with 143 additions and 31 deletions.
diff --git a/handyhelpers/__init__.py b/handyhelpers/__init__.py
@@ -7,7 +7,7 @@
 """
 
 __title__ = 'django-handyhelpers'
-__version__ = '0.3.29'
+__version__ = '0.3.30'
 __author__ = 'David Slusser'
 __email__ = 'dbslusser@gmail.com'
 __license__ = 'GPL-3.0'

diff --git a/...s/handyhelpers/htmx/bs5/content_title.htm → ...ption_multi_filter_view/content_title.htm b/...s/handyhelpers/htmx/bs5/content_title.htm → ...ption_multi_filter_view/content_title.htm
@@ -12,10 +12,18 @@
                     hx-get="{{ control.url }}"
                     hx-target="#body_main"
                     title="{{ control.name }} view"
+                    hx-push-url="true"
                 >{{ control.icon|safe }}</a>
             </span>
             {% endfor %}
             {% endif %}
+            {% if query_string %}
+            <span class="mx-1 text-primary">
+                <a href="{{ root_url }}{{ display }}/">
+                <i class="fas fa-undo-alt"></i>
+                </a>
+            </span>
+            {% endif %}
         </div>
     </div>
 </div>
diff --git a/handyhelpers/templates/handyhelpers/htmx/bs5/htmx_option_multi_filter_view/controls.htm b/handyhelpers/templates/handyhelpers/htmx/bs5/htmx_option_multi_filter_view/controls.htm
@@ -0,0 +1,21 @@
+<div class="col-2 d-flex align-items-end justify-content-end pe-2">
+    {% if control_list|length > 1 %}
+    {% for control in control_list %}
+    <span class="mx-1">
+        <a href="#" {% if control.name == display %}class="text-secondary" style="opacity: .25;"{% endif %}
+            hx-get="{{ control.url }}"
+            hx-target="#body_main"
+            title="{{ control.name }} view"
+            hx-push-url="true"
+        >{{ control.icon|safe }}</a>
+    </span>
+    {% endfor %}
+    {% endif %}
+    {% if query_string %}
+    <span class="mx-1 text-primary">
+        <a href="{{ root_url }}{{ display }}/">
+        <i class="fas fa-undo-alt"></i>
+        </a>
+    </span>
+    {% endif %}
+</div>
diff --git a/handyhelpers/templates/handyhelpers/htmx/bs5/htmx_option_multi_filter_view/examples/card.htm b/handyhelpers/templates/handyhelpers/htmx/bs5/htmx_option_multi_filter_view/examples/card.htm
@@ -0,0 +1,17 @@
+<div class="container mt-5">
+    <div class="row justify-content-center">
+    {% for row in queryset %}
+    <div class="col-lg-3 col-md-4 col-sm-6 d-flex justify-content-center mb-4">
+        <div class="card hvr-grow">
+            <div class="card-body">
+                <div class="card-title mb-1 fs-6 fw-bold text-primary">{{ row.pk }}</div>
+                <div class="card-text text-secondary row" style="font-size: smaller;">
+                    <div class="col-12">{{ row.created_at }}</div>
+                    <div class="col-12">{{ row.updated_at }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    {% endfor %}
+    </div>
+</div>
diff --git a/handyhelpers/templates/handyhelpers/htmx/bs5/htmx_option_multi_filter_view/examples/list.htm b/handyhelpers/templates/handyhelpers/htmx/bs5/htmx_option_multi_filter_view/examples/list.htm
@@ -0,0 +1,11 @@
+<div class="list-group mt-3">
+{% for row in queryset %}
+    <div class="list-group-item border rounded mb-2 hvr-grow">
+        <div class="mb-1 fs-6 fw-bold text-primary">{{ row.pk }}</div>
+        <div class="mb-1 text-secondary row" style="font-size: smaller;">
+            <div class="col-4">{{ row.created_at }}</div>
+            <div class="col-8">{{ row.updated_at }}</div>
+        </div>
+    </div>
+{% endfor %}
+</div>
diff --git a/...yhelpers/templates/handyhelpers/htmx/bs5/htmx_option_multi_filter_view/examples/table.htm b/...yhelpers/templates/handyhelpers/htmx/bs5/htmx_option_multi_filter_view/examples/table.htm
@@ -0,0 +1,21 @@
+<table class="table table-condensed table-bordered table-striped mt-3">
+    <thead>
+        <tr>
+            <th class="sortable">ID<i class="fa fa-sortable fa-sort-up"></i><i class="fa fa-sortable fa-sort-down"></i></th>
+            <th class="sortable">Created At <i class="fa fa-sortable fa-sort-up"></i><i class="fa fa-sortable fa-sort-down"></i></th>
+            <th class="sortable">Updated At <i class="fa fa-sortable fa-sort-up"></i><i class="fa fa-sortable fa-sort-down"></i></th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody>
+        {% for row in queryset %}
+        <tr>
+            <td>{{ row.pk }}</td>
+            <td>{{ row.created_at }}</td>
+            <td>{{ row.updated_at }}</td>
+            <td>
+            </td>
+        </tr>
+        {% endfor %}
+    </tbody>
+</table>
diff --git a/handyhelpers/templates/handyhelpers/htmx/bs5/htmx_option_multi_filter_view/full.html b/handyhelpers/templates/handyhelpers/htmx/bs5/htmx_option_multi_filter_view/full.html
@@ -0,0 +1,6 @@
+{% extends BASE_TEMPLATE|default:"base.htm" %}
+{% load static %}
+
+{% block content %}
+    <div hx-get="{{ url }}" hx-trigger="load"></div>
+{% endblock content %}
diff --git a/handyhelpers/templates/handyhelpers/htmx/bs5/htmx_option_multi_filter_view/wrapper_card.htm b/handyhelpers/templates/handyhelpers/htmx/bs5/htmx_option_multi_filter_view/wrapper_card.htm
@@ -0,0 +1,7 @@
+<section>
+    {% include 'handyhelpers/htmx/bs5/htmx_option_multi_filter_view/content_title.htm' %}
+
+    <div class="container-fluid px-5 py-2 animated fadeIn" style="animation-delay: .2s;">
+        {% if item_content %}{% include item_content %}{% endif %}
+    </div>
+</section>
diff --git a/handyhelpers/templates/handyhelpers/htmx/bs5/htmx_option_multi_filter_view/wrapper_list.htm b/handyhelpers/templates/handyhelpers/htmx/bs5/htmx_option_multi_filter_view/wrapper_list.htm
@@ -0,0 +1,7 @@
+<section>
+    {% include 'handyhelpers/htmx/bs5/htmx_option_multi_filter_view/content_title.htm' %}
+
+    <div class="container-fluid px-5 py-2 animated fadeIn" style="animation-delay: .2s;">
+        {% if item_content %}{% include item_content %}{% endif %}
+    </div>
+</section>
diff --git a/...helpers/templates/handyhelpers/htmx/bs5/htmx_option_multi_filter_view/wrapper_minimal.htm b/...helpers/templates/handyhelpers/htmx/bs5/htmx_option_multi_filter_view/wrapper_minimal.htm
@@ -0,0 +1,7 @@
+<section>
+    {% include 'handyhelpers/htmx/bs5/htmx_option_multi_filter_view/content_title.htm' %}
+
+    <div class="container-fluid px-5 py-2 animated fadeIn" style="animation-delay: .2s;">
+        {% if item_content %}{% include item_content %}{% endif %}
+    </div>
+</section>
diff --git a/...s/handyhelpers/htmx/bs5/table_wrapper.htm → ...ption_multi_filter_view/wrapper_table.htm b/...s/handyhelpers/htmx/bs5/table_wrapper.htm → ...ption_multi_filter_view/wrapper_table.htm
@@ -1,13 +1,12 @@
 <section>
-    {% include 'handyhelpers/htmx/bs5/content_title.htm' %}
+    {% include 'handyhelpers/htmx/bs5/htmx_option_multi_filter_view/content_title.htm' %}
 
     <div class="container-fluid px-5 py-2 animated fadeIn" style="animation-delay: .2s;">
         <div class="sortable-table-wrapper" data-pagination-size="12">
             <div class="d-flex justify-content-end mb-3">
-                {% if queryset %}<span title="toggle pagination"><i class="ms-1 pagination-toggle fs-5 fa-solid fa-square-caret-down"></i></span>{% endif %}
+                {% if queryset %}<span title="toggle pagination" class="text-primary"><i class="ms-1 pagination-toggle fs-5 fa-solid fa-square-caret-down"></i></span>{% endif %}
             </div>
-
-            {% if table %}{% include table %}{% endif %}
+            {% if item_content %}{% include item_content %}{% endif %}
 
             {% if queryset %}
             <nav class="sortable-table-nav">

diff --git a/handyhelpers/views/htmx.py b/handyhelpers/views/htmx.py
@@ -331,48 +331,57 @@ def get(self, request, **kwargs):
 
 class HtmxOptionMultiFilterView(FilterByQueryParamsMixin, HtmxViewMixin, View):
     context = {}
-    title = None
-    subtitle = None
-    model = None
-    template_name = None
+    default_display = "table"
     htmx_template_name = None
     htmx_card_template_name = None
-    htmx_custom_template_name = None
-    htmx_index_template_name = None
+    htmx_card_wrapper_template_name = "handyhelpers/htmx/bs5/htmx_option_multi_filter_view/wrapper_card.htm"
     htmx_list_template_name = None
+    htmx_list_wrapper_template_name = "handyhelpers/htmx/bs5/htmx_option_multi_filter_view/wrapper_list.htm"
     htmx_minimal_template_name = None
+    htmx_minimal_wrapper_template_name = "handyhelpers/htmx/bs5/htmx_option_multi_filter_view/wrapper_minimal.htm"
     htmx_table_template_name = None
-    htmx_table_wrapper_template_name = "handyhelpers/htmx/bs5/table_wrapper.htm"
+    htmx_table_wrapper_template_name = "handyhelpers/htmx/bs5/htmx_option_multi_filter_view/wrapper_table.htm"
+    model = None
     queryset = None
+    subtitle = None
+    template_name = "handyhelpers/htmx/bs5/htmx_option_multi_filter_view/full.html"
+    title = None
 
     def get(self, request, *args, **kwargs):
         page_description = request.GET.get("page_description", None)
         control_list = []
         display = kwargs.get("display", None)
+        if not display:
+            display = self.default_display
         root_url = reverse(f"{request.resolver_match.app_name}:{request.resolver_match.url_name}").replace("//", "/")
         query_params = request.GET
         template_name = None
 
         # Convert query parameters to a URL-encoded string without the extra list notation
-        query_string = "&".join([f"{key}={value}" for key, value in query_params.items()]) if query_params else ""
+        # query_string = "&".join([f"{key}={value}" for key, value in query_params.items()]) if query_params else ""
+        if query_params:
+            query_string = query_params.urlencode()
+            url = f"{root_url}{display}?{query_string}"
+        else:
+            query_string = ""
+            url = f"{root_url}{display}"
 
         if self.queryset is not None:
             self.queryset._result_cache = None
         if self.is_htmx():
             if display:
-                if display == "card" and self.htmx_card_template_name:
-                    template_name = self.htmx_card_template_name
-                elif display == "custom" and self.htmx_custom_template_name:
-                    template_name = self.htmx_custom_template_name
-                elif display == "index" and self.htmx_index_template_name:
-                    template_name = self.htmx_index_template_name
-                elif display == "list" and self.htmx_list_template_name:
-                    template_name = self.htmx_list_template_name
+                if display == "card" and self.htmx_card_wrapper_template_name:
+                    template_name = self.htmx_card_wrapper_template_name
+                    self.context["item_content"] = self.htmx_card_template_name
+                elif display == "list" and self.htmx_list_wrapper_template_name:
+                    template_name = self.htmx_list_wrapper_template_name
+                    self.context["item_content"] = self.htmx_list_template_name
                 elif display == "minimal" and self.htmx_minimal_template_name:
-                    template_name = self.htmx_minimal_template_name
+                    template_name = self.htmx_minimal_wrapper_template_name
+                    self.context["item_content"] = self.htmx_minimal_template_name
                 elif display == "table" and self.htmx_table_wrapper_template_name:
                     template_name = self.htmx_table_wrapper_template_name
-                    self.context["table"] = self.htmx_table_template_name
+                    self.context["item_content"] = self.htmx_table_template_name
                 elif self.htmx_template_name:
                     template_name = self.htmx_template_name
             else:
@@ -386,35 +395,31 @@ def get(self, request, *args, **kwargs):
                 {
                     "name": "card",
                     "icon": """<i class="fa-regular fa-square"></i>""",
-                    "url": f"{root_url}card?{query_string}"
+                    "url": f"{root_url}card/?{query_string}" if query_string else f"{root_url}card/"
                 }
             )
-        # if self.htmx_custom_template_name:
-        #     pass
         if self.htmx_list_template_name:
             control_list.append(
                 {
                     "name": "list",
                     "icon": """<i class="fa-solid fa-list-ul"></i>""",
-                    "url": f"{root_url}list?{query_string}"
+                    "url": f"{root_url}list/?{query_string}" if query_string else f"{root_url}list/"
                 }
             )
-        # if self.htmx_index_template_name:
-        #     pass
         if self.htmx_minimal_template_name:
             control_list.append(
                 {
                     "name": "minimal",
                     "icon": """<i class="fa-solid fa-compress"></i>""",
-                    "url": f"{root_url}minimal?{query_params}"
+                    "url": f"{root_url}minimal/?{query_string}" if query_string else f"{root_url}minimal/"
                 }
             )
         if self.htmx_table_template_name:
             control_list.append(
                 {
                     "name": "table",
                     "icon": """<i class="fa-solid fa-table"></i>""",
-                    "url": f"{root_url}table?{query_params}"
+                    "url": f"{root_url}table/?{query_string}" if query_string else f"{root_url}table/"
                 }
             )
 
@@ -432,6 +437,9 @@ def get(self, request, *args, **kwargs):
         self.context["subtitle"] = self.subtitle
         self.context["control_list"] = control_list
         self.context["display"] = display
+        self.context["root_url"] = root_url
+        self.context["query_string"] = query_string
+        self.context["url"] = url
         self.context["htmx_template_name"] = template_name
         return render(request, template_name, self.context)