Tune editor

folkugat_web/assets/templates/fragments/tema/editor/link.html

@@ -1,10 +1,10 @@
 <li id="tema-link-{{ link.id }}">
-  <form class="flex flex-row items-start">
+  <form class="flex flex-row items-start"
+        hx-encoding='multipart/form-data'>
   {% include "fragments/tema/link_icon.html" %}
-  <div class="grow my-2">
-    <p class="text-sm text-beige">
-      <select id="tema-link-{{ link.id }}-content-type"
-              name="content_type"
+  <div class="flex flex-col grow my-2">
+    <div class="text-sm text-beige">
+      <select name="content_type"
               value="{{ link.content_type.value.capitalize() }}"
               class="border border-yellow-50 focus:outline-none
                      rounded
@@ -21,8 +21,8 @@
         {% endif %}
         {% endfor %}
       </select>
-    </p>
-    <p>
+    </div>
+    <div>
     <input name="title"
            placeholder="Títol de l'enllaç"
            value="{{ link.title }}"
@@ -30,21 +30,8 @@
                   rounded w-full
                   bg-brown p-1 my-1"
       />
-    </p>
-    <p>
-    <input name="url"
-           placeholder="URL de l'enllaç"
-           value="{{ link.url }}"
-           class="border border-beige focus:outline-none
-                  rounded w-full
-                  bg-brown p-1 my-1"
-           hx-get="/api/tema/{{ tema.id }}/link/{{ link_id }}/icon"
-           hx-trigger="keyup delay:500ms changed"
-           hx-target="#link-icon-{{ link.id }}"
-           hx-include="[name='content_type']"
-           hx-swap="outerHTML"
-      />
-    </p>
+    </div>
+    {% include "fragments/tema/editor/link_url.html" %}
   </div>
   <div class="m-2 text-sm text-beige">
     <button title="Desa els canvis"

folkugat_web/assets/templates/fragments/tema/editor/link_file.html

@@ -0,0 +1,16 @@
+<div id="link-editor-{{ link_id }}-file"
+     class="flex flex-row gap-2">
+    <input type='file'
+           class="border border-beige focus:outline-none
+                  rounded grow
+                  bg-brown p-1 my-1"
+            name='upload_file'>
+    <button title="Afegeix un enllaç"
+            class="border border-beige rounded px-2 py-1 my-1"
+            hx-get="/api/tema/{{ tema.id }}/editor/link/{{ link_id }}/url"
+            hx-target="#link-editor-{{ link_id }}-file"
+            hx-swap="outerHTML"
+            >
+      <i class="fa fa-link" aria-hidden="true"></i>
+    </button>
+</div>

folkugat_web/assets/templates/fragments/tema/editor/link_url.html

@@ -0,0 +1,23 @@
+<div id="link-editor-{{ link_id }}-url"
+     class="flex flex-row gap-2">
+    <input name="url"
+           placeholder="URL de l'enllaç"
+           value="{{ link.url }}"
+           class="border border-beige focus:outline-none
+                  rounded grow
+                  bg-brown p-1 my-1"
+           hx-get="/api/tema/{{ tema.id }}/link/{{ link_id }}/icon"
+           hx-trigger="keyup delay:500ms changed"
+           hx-target="#link-icon-{{ link.id }}"
+           hx-include="[name='content_type']"
+           hx-swap="outerHTML"
+           />
+    <button title="Puja un fitxer"
+            class="border border-beige rounded py-1 px-2 my-1"
+            hx-get="/api/tema/{{ tema.id }}/editor/link/{{ link_id }}/file"
+            hx-target="#link-editor-{{ link_id }}-url"
+            hx-swap="outerHTML"
+            >
+    <i class="fa fa-upload" aria-hidden="true"></i>
+    </button>
+</div>

folkugat_web/assets/templates/fragments/tema/editor/property.html

@@ -0,0 +1,45 @@
+<form id="tema-property-{{ property.id }}"
+     class="flex flex-row items-center">
+  <div class="px-2">
+    <select name="field"
+            value="{{ property.field.value.capitalize() }}"
+            class="border border-yellow-50 focus:outline-none
+                   rounded
+                   text-yellow-50 text-center
+                   bg-brown p-1 m-0">
+      <option value="{{ property.field.value }}">
+        {{ property.field.value.capitalize() }}
+      </option>
+      {% for pf in PropertyField %}
+      {% if pf != property.field %}
+      <option value="{{ pf.value }}">
+        {{ pf.value.capitalize() }}
+      </option>
+      {% endif %}
+      {% endfor %}
+    </select>
+  </div>
+  <div class="grow mx-2">
+    <input name="value"
+           placeholder="Informació"
+           value="{{ property.value }}"
+           class="border border-beige focus:outline-none
+                  rounded w-full
+                  bg-brown px-2 py-1"
+      />
+  </div>
+  <button title="Desa els canvis"
+          class="text-sm text-beige mx-1"
+          hx-put="/api/tema/{{ tema.id }}/property/{{ property.id }}"
+          hx-target="#tema-property-{{ property.id }}"
+          hx-swap="outerHTML">
+    <i class="fa fa-check" aria-hidden="true"></i>
+  </button>
+  <button title="Descarta els canvis"
+          class="text-sm text-beige mx-1"
+          hx-get="/api/tema/{{ tema.id }}/property/{{ property.id }}"
+          hx-target="#tema-property-{{ property.id }}"
+          hx-swap="outerHTML">
+    <i class="fa fa-times" aria-hidden="true"></i>
+  </button>
+</form>