Redisseny dels resultats de cerca

folkugat_web/assets/static/css/main.css

@@ -738,6 +738,10 @@ video {
   max-width: 56rem;
 }
 
+.max-w-\[655px\] {
+  max-width: 655px;
+}
+
 .max-w-full {
   max-width: 100%;
 }
@@ -959,6 +963,11 @@ video {
   padding-right: 0.5rem;
 }
 
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -1047,6 +1056,11 @@ video {
   color: rgb(76 16 30 / var(--tw-text-opacity, 1));
 }
 
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+
 .text-red-400 {
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity, 1));

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

@@ -1,34 +1,46 @@
 <li class="flex flex-col
            items-center
-          m-4 rounded-lg
-          bg-white">
-  <div class="py-2 px-4 text-black font-bold">
-    <a href="/tema/{{ tema.id }}">
-      {{ tema.title }}
-    </a>
+           m-4 rounded-lg
+           bg-white">
+  <div class="flex flex-col items-start py-4 text-left w-full max-w-[655px]">
+    <div class="px-4 text-black font-bold">
+      <a href="/tema/{{ tema.id }}">
+        {{ 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 %}
+      <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-swap="innerHTML"
+              >
+        {{ property.value }}
+      </button>
+      {% endfor %}
+    </ul>
+    {% endif %}
+    {% if tema.main_score() and tema.main_score().preview_url %}
+      <a href="/tema/{{ tema.id }}">
+      <img class="px-4"
+          src="{{ tema.main_score().preview_url }}" />
+      </a>
+    {% endif %}
   </div>
-  {% if tema.main_score() and tema.main_score().preview_url %}
-    <a href="/tema/{{ tema.id }}"
-       class="max-w">
-    <img class="p-2 max-w"
-        src="{{ tema.main_score().preview_url }}" />
-    </a>
-  {% endif %}
-  {% if tema.properties %}
-  <ul class="flex flex-wrap text-sm
-            py-2 px-4">
-    {% for property in tema.properties %}
-    <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-swap="innerHTML"
-            >
-      {{ property.value }}
-    </button>
-    {% endfor %}
-  </ul>
-  {% endif %}
 </li>

folkugat_web/services/temes/query.py

@@ -1,3 +1,5 @@
+from collections.abc import Iterable
+
 from folkugat_web.dal.sql.playlists import query as playlists_q
 from folkugat_web.dal.sql.temes import query as temes_q
 from folkugat_web.model import sessions as sessions_model
@@ -28,7 +30,8 @@ def tema_compute_stats(
     return tema
 
 
-def temes_compute_stats(temes: list[model.Tema]) -> list[model.Tema]:
+def temes_compute_stats(temes: Iterable[model.Tema]) -> list[model.Tema]:
+    temes = list(temes)
     tema_ids = [tema.id for tema in temes if tema.id is not None]
     tune_sessions_dict = playlists_q.get_tune_sessions(tema_ids=tema_ids)
     return [tema_compute_stats(tema=tema, tune_sessions_dict=tune_sessions_dict) for tema in temes]

folkugat_web/services/temes/search.py

@@ -12,6 +12,7 @@ from folkugat_web.log import logger
 from folkugat_web.model import search as search_model
 from folkugat_web.model import temes as model
 from folkugat_web.services.temes import properties as properties_service
+from folkugat_web.services.temes import query as query_service
 from folkugat_web.utils import FnChain
 
 T = TypeVar("T")
@@ -122,6 +123,7 @@ def busca_temes(
             _filter_hidden(hidden) |
             properties_service.add_properties_to_temes |
             _filter_properties(properties) |
+            query_service.temes_compute_stats |
             _apply_limit_offset(limit=limit, offset=offset)
         ).result()
     logger.info(f"Temes search time: { int((time.time() - t0) * 1000) } ms")