Tune editor

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

@@ -1,12 +1,8 @@
 {% 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>
-  <button title="Afegeix un tema"
-          class="text-beige m-2">
-    <i class="fa fa-plus" aria-hidden="true"></i>
-    Afegeix un tema
-  </button>
-  <input type="text" name="query" value=""
+  <input id="query-input"
+         type="text" name="query" value="{{ query }}"
          placeholder="Busca una tema..."
          class="rounded
                 text-yellow-50 bg-brown
@@ -15,10 +11,16 @@
          hx-get="/api/temes/busca"
          hx-trigger="revealed, keyup delay:500ms changed"
          hx-target="#search-results">
-  <div class="flex justify-center">
-    <div id="search-results"
-         class="m-4 max-w-5xl
-                flex flex-wrap items-center justify-center">
-    </div>
-  </div>
+  {% if logged_in %}
+    <button title="Afegeix un tema"
+            class="text-beige m-2"
+            hx-post="/api/tema"
+            hx-include="[name=query]"
+            hx-vals="js:{title: document.getElementById('query-input').value}"
+            >
+      <i class="fa fa-plus" aria-hidden="true"></i>
+      Afegeix un tema
+    </button>
+  {% endif %}
+  <div id="search-results" class="flex-col"></div>
 </div>

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

@@ -1,44 +0,0 @@
-<div class="flex-none px-4 py-2 w-80 h-80 m-2 border-solid border rounded-md bg-yellow-50 text-brown">
-  <div class="flex flex-col h-full">
-    <div class="text-xl text-beige">
-      <a href="/tema/{{ tema.id }}">
-        {{ tema.title }}
-      </a>
-    </div>
-    <div class="grow"></div>
-    <div class="flex flex-row">
-    </div>
-      <ul class="flex flex-row items-center justify-center">
-        {% if tema.links %}
-          {% for link in tema.links %}
-            <li class="p-2 m-2 text-beige border border-beige rounded-md">
-              <a href="{{ link.url }}" target="_blank">
-              {% if link.content_type == ContentType.AUDIO %}
-                {% if link.link_type == LinkType.SPOTIFY %}
-                  {% include "icons/spotify.svg" %}
-                {% elif link.link_type == LinkType.YOUTUBE %}
-                  {% include "icons/youtube.svg" %}
-                {% else %}
-                  {% include "icons/notes.svg" %}
-                {% endif %}
-              {% elif link.content_type == ContentType.PARTITURA %}
-                {% if link.link_type == LinkType.PDF %}
-                  {% include "icons/pdf.svg" %}
-                {% else %}
-                  {% include "icons/link.svg" %}
-                {% endif %}
-              {% else %}
-                {% include "icons/link.svg" %}
-              {% endif %}
-              </a>
-            </li>
-          {% endfor %}
-        {% endif %}
-      </ul>
-    <!-- {% if logged_in %} -->
-    <!--   <div> -->
-    <!--     Edita -->
-    <!--   </div> -->
-    <!-- {% endif %} -->
-  </div>
-</div>

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

@@ -0,0 +1,27 @@
+<ul class="flex flex-row items-center">
+  {% if tema.links %}
+    {% for link in tema.links %}
+      <li class="px-2 text-beige">
+        <a href="{{ link.url }}" target="_blank">
+        {% if link.content_type == ContentType.AUDIO %}
+          {% if link.link_type == LinkType.SPOTIFY %}
+            <i class="fa fa-music" aria-hidden="true"></i>
+          {% elif link.link_type == LinkType.YOUTUBE %}
+            <i class="fa fa-play" aria-hidden="true"></i>
+          {% else %}
+            <i class="fa fa-music" aria-hidden="true"></i>
+          {% endif %}
+        {% elif link.content_type == ContentType.PARTITURA %}
+          {% if link.link_type == LinkType.PDF %}
+            <i class="fa fa-file" aria-hidden="true"></i>
+          {% else %}
+            <i class="fa fa-link" aria-hidden="true"></i>
+          {% endif %}
+        {% else %}
+          <i class="fa fa-link" aria-hidden="true"></i>
+        {% endif %}
+        </a>
+      </li>
+    {% endfor %}
+  {% endif %}
+</ul>

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

@@ -0,0 +1,19 @@
+<table id="search-results"
+       class="text-left min-w-full w-full">
+  <tr class="border-b border-beige">
+    <td class="font-bold py-2 px-4">Nom</td>
+    <td class="font-bold py-2 px-4">Enllaços</td>
+  </tr>
+  {% for tema in temes %}
+  <tr class="border-b border-beige">
+    <td class="py-2 px-4">
+      <a href="/tema/{{ tema.id }}">
+        {{ tema.title }}
+      </a>
+    </td>
+    <td class="py-2 px-4">
+      {% include "fragments/temes/result_links.html" %}
+    </td>
+  </tr>
+  {% endfor %}
+</table>