From 12bdddd995029b592c9cdac2e6e9a78db5c5e6e6 Mon Sep 17 00:00:00 2001
From: Manuel Gugger <manuel.gugger@gmail.com>
Date: Tue, 21 Mar 2023 09:22:26 +0100
Subject: [PATCH] make column sort as dropdown

---
 src/templates/head.html | 15 ++++++-----
 src/templates/list.html | 60 ++++++++++++++++++++++++++++-------------
 2 files changed, 50 insertions(+), 25 deletions(-)

diff --git a/src/templates/head.html b/src/templates/head.html
index cb09590..2aacac3 100644
--- a/src/templates/head.html
+++ b/src/templates/head.html
@@ -39,13 +39,8 @@
         }
     }
 
-    function sort_by(column) {
-        current_sort_order = document.getElementsByName("sort_order")[0].value;
-        if (current_sort_order == "Asc") {
-            document.getElementsByName("sort_order").forEach((e) => e.value = "Desc");
-        } else {
-            document.getElementsByName("sort_order").forEach((e) => e.value = "Asc");
-        }
+    function sort_by(column, order) {
+        document.getElementsByName("sort_order").forEach((e) => e.value = order);
         document.getElementsByName("sort_by").forEach((e) => e.value = column);
         document.getElementById('table_form').requestSubmit();
     }
@@ -90,5 +85,11 @@
         z-index: 6;
         pointer-events: none
     }
+
+    .is-borderless {
+        padding: 0;
+        border: none;
+        background: none;
+    }
 </style>
 
diff --git a/src/templates/list.html b/src/templates/list.html
index f80741b..f9db140 100644
--- a/src/templates/list.html
+++ b/src/templates/list.html
@@ -77,27 +77,51 @@
                         <th>
                             <input type="checkbox" onclick="checkAll(this)">
                         </th>
-                        <th onclick="sort_by('{{ view_model.primary_key }}');" class="is-clickable">{{
-                            view_model.primary_key | title }}
-                            {% if sort_by == view_model.primary_key %}
-                            {% if sort_order == "Asc" %}
-                            <i class="ml-1 fa-solid fa-caret-up"></i>
-                            {% elif sort_order == "Desc" %}
-                            <i class="ml-1 fa-solid fa-caret-down"></i>
-                            {% endif %}
-                            {% endif %}
+                        <th>
+                            <div class="dropdown is-hoverable">
+                                <div class="dropdown-trigger">
+                                    <button class="button is-borderless" aria-haspopup="true" aria-controls="dropdown-menu4">
+                                    <span>{{ view_model.primary_key | split(pat="_") | join(sep=" ") | title }}</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-menu4" role="menu">
+                                    <div class="dropdown-content">
+                                        <div class="dropdown-item is-clickable" onclick="sort_by('{{ view_model.primary_key }}', 'Asc');">
+                                            Sort by Asc <i class="ml-1 fa-solid fa-caret-up"></i>
+                                        </div>
+                                        <div class="dropdown-item is-clickable" onclick="sort_by('{{ view_model.primary_key }}', 'Desc');">
+                                            Sort by Desc <i class="ml-1 fa-solid fa-caret-down"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                         </th>
                         {% for model_field in view_model.fields | filter(attribute="list_hide_column", value=false) |
                         sort(attribute="list_sort_position") -%}
-                        <th onclick="sort_by('{{ model_field.field_name }}');" class="is-clickable">{{
-                            model_field.field_name | split(pat="_") | join(sep=" ") | title }}
-                            {% if sort_by == model_field.field_name %}
-                            {% if sort_order == "Asc" %}
-                            <i class="ml-1 fa-solid fa-caret-up"></i>
-                            {% elif sort_order == "Desc" %}
-                            <i class="ml-1 fa-solid fa-caret-down"></i>
-                            {% endif %}
-                            {% endif %}
+                        <th>
+                            <div class="dropdown is-hoverable">
+                                <div class="dropdown-trigger">
+                                    <button class="button is-borderless" aria-haspopup="true" aria-controls="dropdown-menu4">
+                                    <span>{{ model_field.field_name | split(pat="_") | join(sep=" ") | title }}</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-menu4" role="menu">
+                                    <div class="dropdown-content">
+                                        <div class="dropdown-item is-clickable" onclick="sort_by('{{ model_field.field_name }}', 'Asc');">
+                                            Sort by Asc <i class="ml-1 fa-solid fa-caret-up"></i>
+                                        </div>
+                                        <div class="dropdown-item is-clickable" onclick="sort_by('{{ model_field.field_name }}', 'Desc');">
+                                            Sort by Desc <i class="ml-1 fa-solid fa-caret-down"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                         </th>
                         {%- endfor %}
                         <th>