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

@@ -2,21 +2,26 @@
            items-center
            m-4 rounded-lg
            bg-white">
-  <div class="py-2 px-4 text-black font-bold">
+  <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>
-  {% if tema.main_score() and tema.main_score().preview_url %}
+    <div class="px-4 text-sm text-gray-500">
-    <a href="/tema/{{ tema.id }}"
+      {% if tema.stats %}
-       class="max-w">
+        Tocat {{ tema.stats.times_played }}
-    <img class="p-2 max-w"
+        {% if tema.stats.times_played == 1 %}
-        src="{{ tema.main_score().preview_url }}" />
+          cop
-    </a>
+        {% else %}
+          cops
         {% endif %}
+      {% else %}
+        No s'ha tocat mai
+      {% endif %}
+    </div>
     {% if tema.properties %}
-  <ul class="flex flex-wrap text-sm
+    <ul class="flex flex-wrap text-sm px-3">
-            py-2 px-4">
       {% for property in tema.properties %}
       <button class="bg-beige text-white rounded
                      m-1 px-2"
@@ -31,4 +36,11 @@
       {% 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>
 </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")