Filtres i ordres als resultats de cerca

folkugat_web/assets/templates/fragments/temes/pagina.html

@@ -1,6 +1,7 @@
 {% include "fragments/menu.html" %}
 <div class="p-12 text-center flex flex-col items-center justify-center">
   <h3 class="text-3xl text-beige p-4">Temes</h3>
+  {% set hx_vars = build_hx_vars({"properties": properties_str}, order_params_dict) %}
   <input id="query-input"
          type="text" name="query" value="{{ query }}"
          placeholder="Busca una tema..."
@@ -11,7 +12,7 @@
          hx-get="/api/temes/busca"
          hx-trigger="revealed, keyup delay:500ms changed"
          hx-target="#search-results"
-         hx-vars="properties:{{ properties_str }}"
+         hx-vars="{{ hx_vars }}"
          hx-swap="outerHTML">
   <div id="search-results" class="flex-col"></div>
 </div>

folkugat_web/assets/templates/fragments/temes/result.html

@@ -8,27 +8,16 @@
         {{ tema.title }}
       </a>
     </div>
-    <div class="px-4 text-sm text-gray-500">
-      {% if tema.stats %}
-        Tocat {{ tema.stats.times_played }}
-        {% if tema.stats.times_played == 1 %}
-          cop
-        {% else %}
-          cops
-        {% endif %}
-      {% else %}
-        No s'ha tocat mai
-      {% endif %}
-    </div>
     {% if tema.properties %}
     <ul class="flex flex-wrap text-sm px-3">
       {% for property in tema.properties %}
+      {% set hx_vars = build_hx_vars({"properties": add_property_str(property.value)}, order_params_dict) %}
       <button class="bg-beige text-white rounded
                      m-1 px-2"
               hx-get="/api/content/temes"
               hx-target="#content"
               hx-include="[name=query]"
-              hx-vars="properties:{{ add_property_str(property.value) }}"
+              hx-vars="{{ hx_vars }}"
               hx-swap="innerHTML"
               >
         {{ property.value }}
@@ -38,9 +27,34 @@
     {% endif %}
     {% if tema.main_score() and tema.main_score().preview_url %}
       <a href="/tema/{{ tema.id }}">
-      <img class="px-4"
+      <img class="px-4 pb-2"
           src="{{ tema.main_score().preview_url }}" />
       </a>
     {% endif %}
+    <div class="flex flex-row w-full">
+      <div class="flex flex-row items-center
+                  row-0 px-4 text-sm text-gray-400">
+        <i class="mx-1">{% include "icons/music-box.svg" %}</i>
+        {% if tema.stats %}
+          Tocat {{ tema.stats.times_played }}
+          {% if tema.stats.times_played == 1 %}
+            cop
+          {% else %}
+            cops
+          {% endif %}
+        {% else %}
+          No s'ha tocat mai
+        {% endif %}
+      </div>
+      <div class="flex-1 grow"></div>
+      <div class="flex flex-row items-center
+                  row-0 px-4 text-sm text-gray-400">
+        {% if tema.stats and tema.stats.sessions_played %}
+          <i class="mx-1">{% include "icons/calendar.svg" %}</i>
+          {% set dn = get_date_names(tema.stats.sessions_played[0].date) %}
+          {{ dn.day }} {{ dn.month_name }} de {{ dn.year }}
+        {% endif %}
+      </div>
+    </div>
   </div>
 </li>

folkugat_web/assets/templates/fragments/temes/results.html

@@ -12,38 +12,14 @@
       <i>{{ query }}</i>
     </button>
   {% endif %}
-  <ul class="flex flex-wrap justify-center my-4">
-    {% for property in properties %}
-      <li>
-        <button class="bg-beige rounded
-                       text-white
-                       m-1 px-2"
-                 hx-get="/api/content/temes"
-                 hx-target="#content"
-                 hx-include="[name=query]"
-                 hx-vars="properties:{{ remove_property_str(property) }}"
-                 hx-swap="innerHTML"
-                 >
-          {{ property }}
-        </button>
-      </li>
-    {% endfor %}
-    {% for property in property_results %}
-      <li>
-        <button class="border border-beige  rounded
-                       text-white
-                       m-1 px-2"
-                 hx-get="/api/content/temes"
-                 hx-target="#content"
-                 hx-vars="properties:{{ add_property_str(property) }}"
-                 hx-swap="innerHTML"
-                 >
-          {{ property }}
-        </button>
-      </li>
-    {% endfor %}
-  </ul>
   <hr class="h-px mt-1 mb-3 bg-beige border-0">
+
+  <div class="mx-4 flex flex-col">
+    {% include "fragments/temes/search_params/order_by.html" %}
+    {% include "fragments/temes/search_params/filter.html" %}
+  </div>
+
+  <hr class="h-px mt-3 mb-3 bg-beige border-0">
   <ul class="min-w-full w-full">
     {% for tema in temes %}
       {% include "fragments/temes/result.html" %}
@@ -52,20 +28,22 @@
   {% if prev_offset is not none or next_offset is not none %}
   <div class="py-2">
     {% if prev_offset is not none %}
+      {% set hx_vars = build_hx_vars({"properties": properties_str, "offset": prev_offset}, order_params_dict) %}
       <button class="text-beige mx-2"
               hx-get="/api/temes/busca"
               hx-include="[name=query]"
-              hx-vars="properties:{{ properties_str }},offset:{{ prev_offset }}"
+              hx-vars="{{ hx_vars }}"
               hx-target="#search-results"
               hx-swap="outerHTML">
         <i class="fa fa-chevron-left" aria-hidden="true"></i>
       </button>
     {% endif %}
     {% if next_offset is not none %}
+      {% set hx_vars = build_hx_vars({"properties": properties_str, "offset": next_offset}, order_params_dict) %}
       <button class="text-beige mx-2"
               hx-get="/api/temes/busca"
               hx-include="[name=query]"
-              hx-vars="properties:{{ properties_str }},offset:{{ next_offset }}"
+              hx-vars="{{ hx_vars }}"
               hx-target="#search-results"
               hx-swap="outerHTML">
         <i class="fa fa-chevron-right" aria-hidden="true"></i>

folkugat_web/assets/templates/fragments/temes/search_params/filter.html

@@ -0,0 +1,40 @@
+{% if properties or property_results %}
+<div class="flex flex-row items-center">
+  <p class="pr-2 py-2
+            {% if properties %} text-beige {% else %} text-gray-400 {% endif %}
+            ">Filtres:</p>
+  <ul class="flex flex-wrap justify-center my-1">
+  {% for property in properties %}
+      <li>
+      {% set hx_vars = build_hx_vars({"properties": remove_property_str(property)}, order_params_dict) %}
+      <button class="bg-beige rounded
+                      text-white
+                      m-1 px-2"
+              hx-get="/api/content/temes"
+              hx-target="#content"
+              hx-include="[name=query]"
+              hx-vars="{{ hx_vars }}"
+              hx-swap="innerhtml"
+              >
+          {{ property }}
+      </button>
+      </li>
+  {% endfor %}
+  {% for property in property_results %}
+      <li>
+      {% set hx_vars = build_hx_vars({"properties": add_property_str(property)}, order_params_dict) %}
+      <button class="border border-beige  rounded
+                      text-white
+                      m-1 px-2"
+              hx-get="/api/content/temes"
+              hx-target="#content"
+              hx-vars="{{ hx_vars }}"
+              hx-swap="innerhtml"
+              >
+          {{ property }}
+      </button>
+      </li>
+  {% endfor %}
+  </ul>
+</div>
+{% endif %}

folkugat_web/assets/templates/fragments/temes/search_params/order_by.html

@@ -0,0 +1,67 @@
+<div class="flex flex-row items-center justify-center">
+  {% set times_played_color = "text-gray-400" %}
+  {% set times_played_caret = "off" %}
+  {% set times_played_target_params = {"order_by": "'times_played'", "order": "'desc'"} %}
+
+  {% set last_played_color = "text-gray-400" %}
+  {% set last_played_caret = "off" %}
+  {% set last_played_target_params = {"order_by": "'last_played'", "order": "'desc'"} %}
+
+  {% if order_params is not none %}
+    {% if order_params.order_by == OrderBy.TIMES_PLAYED %}
+      {% set times_played_color = "text-beige" %}
+      {% if order_params.order == Order.ASC %}
+        {% set times_played_caret = "asc" %}
+        {% set times_played_target_params = {} %}
+      {% elif order_params.order == Order.DESC %}
+        {% set times_played_caret = "desc" %}
+        {% set times_played_target_params = {"order_by": "'times_played'", "order": "'asc'"} %}
+      {% endif %}
+    {% elif order_params.order_by == OrderBy.LAST_PLAYED %}
+      {% set last_played_color = "text-beige" %}
+      {% if order_params.order == Order.ASC %}
+        {% set last_played_caret = "asc" %}
+        {% set last_played_target_params = {} %}
+      {% elif order_params.order == Order.DESC %}
+        {% set last_played_caret = "desc" %}
+        {% set last_played_target_params = {"order_by": "'last_played'", "order": "'asc'"} %}
+      {% endif %}
+    {% endif %}
+  {% endif %}
+
+  {% set hx_vars = build_hx_vars({"properties": properties_str}, times_played_target_params) %}
+  <button title="Ordena per cops tocat"
+          class="{{ times_played_color }} mx-2 flex flex-row"
+          hx-get="/api/temes/busca"
+          hx-include="[name=query]"
+          hx-vars="{{ hx_vars }}"
+          hx-target="#search-results"
+          hx-swap="outerHTML">
+      <i class="mr-1 flex-none">{% include "icons/music-box.svg" %}</i>
+      {% if times_played_caret == "asc" %}
+        <i class="fa fa-caret-up flex-1 w-0" aria-hidden="true"></i>
+      {% elif times_played_caret == "desc" %}
+        <i class="fa fa-caret-down flex-1 w-0" aria-hidden="true"></i>
+      {% else %}
+        <div class="flex-1 w-0"></div>
+      {% endif %}
+  </button>
+
+  {% set hx_vars = build_hx_vars({"properties": properties_str}, last_played_target_params) %}
+  <button title="Ordena per últim cop tocat"
+          class="{{ last_played_color }} mx-2 flex flex-row"
+          hx-get="/api/temes/busca"
+          hx-include="[name=query]"
+          hx-vars="{{ hx_vars }}"
+          hx-target="#search-results"
+          hx-swap="outerHTML">
+      <i class="mr-1">{% include "icons/calendar.svg" %}</i>
+      {% if last_played_caret == "asc" %}
+        <i class="fa fa-caret-up flex-1 w-0" aria-hidden="true"></i>
+      {% elif last_played_caret == "desc" %}
+        <i class="fa fa-caret-down flex-1 w-0" aria-hidden="true"></i>
+      {% else %}
+        <div class="flex-1 w-0"></div>
+      {% endif %}
+  </button>
+</div>