feat: improved product attribute views

backoffice/templates/backoffice/base.html

@@ -33,7 +33,20 @@
       <a href="{% url 'backoffice:dashboard' %}" class="text-xl font-semibold block p-4">Backoffice</a>
       <ul class="menu w-full">
         <li>
-          <a href="{% url 'backoffice:product_list' %}" class="{% if section == 'products' %}menu-active{% endif %}">Productos</a>
+          <details {% if section == 'products' %}open{% endif %}>
+            <summary>
+              <a
+                href="{% url 'backoffice:product_list' %}"
+                onclick="event.stopPropagation()"
+                class="grow {% if section == 'products' and '/attributes/' not in request.path %}menu-active{% endif %}"
+              >Productos</a>
+            </summary>
+            <ul>
+              <li>
+                <a href="{% url 'backoffice:product_attribute_list' %}" class="{% if '/attributes/' in request.path %}menu-active{% endif %}">Atributos</a>
+              </li>
+            </ul>
+          </details>
         </li>
         <li>
           <a href="{% url 'backoffice:order_list' %}" class="{% if section == 'orders' %}menu-active{% endif %}">Pedidos</a>

backoffice/templates/backoffice/products/_variant_form_fragment.html

@@ -0,0 +1,59 @@
+<h3 class="text-lg font-bold mb-4">{{ title }}</h3>
+
+<form method="post" hx-post="{{ request.path }}" hx-target="#backoffice-modal-box" hx-swap="innerHTML">
+  {% csrf_token %}
+
+  <div class="mb-4">
+    <label class="text-sm font-medium opacity-70 mb-1 block" for="{{ form.sku.id_for_label }}">SKU</label>
+    {{ form.sku }}
+    {{ form.sku.errors }}
+  </div>
+
+  <div class="mb-4">
+    <label class="text-sm font-medium opacity-70 mb-1 block" for="{{ form.stock.id_for_label }}">Stock</label>
+    {{ form.stock }}
+    {{ form.stock.errors }}
+  </div>
+
+  <div class="mb-4">
+    <h4 class="text-sm font-medium opacity-70 mb-1">Atributos</h4>
+    <div class="overflow-x-auto bg-base-100 rounded-box border border-base-300">
+      <table class="table">
+        <thead><tr><th>Atributo</th><th>Valores</th></tr></thead>
+        <tbody>
+          {% for attribute in attributes %}
+            <tr>
+              <td class="whitespace-nowrap align-top">{{ attribute.name }}</td>
+              <td>
+                <div class="flex flex-wrap gap-2">
+                  {% for value in attribute.values.all %}
+                    <label class="label cursor-pointer gap-2 border border-base-300 rounded-box px-2 py-1">
+                      <input
+                        type="checkbox"
+                        name="attribute_values"
+                        value="{{ value.pk }}"
+                        class="checkbox checkbox-sm"
+                        {% if value.pk in selected_value_ids %}checked{% endif %}
+                      >
+                      <span class="label-text">{{ value.value }}</span>
+                    </label>
+                  {% endfor %}
+                </div>
+              </td>
+            </tr>
+          {% empty %}
+            <tr><td colspan="2" class="text-center py-4">No hay atributos definidos.</td></tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+    {{ form.attribute_values.errors }}
+  </div>
+
+  {{ form.non_field_errors }}
+
+  <div class="modal-action">
+    <button class="btn btn-primary">Guardar</button>
+    <button type="button" class="btn" onclick="document.getElementById('backoffice-modal').close()">Cancelar</button>
+  </div>
+</form>

backoffice/templates/backoffice/products/variant_form.html

@@ -0,0 +1,7 @@
+{% extends 'backoffice/base.html' %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block main %}
+  {% include 'backoffice/products/_variant_form_fragment.html' %}
+{% endblock %}