City as select

project/main/templates/main/components/inline_table_row.html

@@ -1,4 +1,22 @@
-{% macro inline_table_row(person, is_editing, errors={}) %}
+{% macro inline_table_row(person) %}
+    <tr hx-target="this" hx-swap="outerHTML">
+        <td>{{ person.name }}</td>
+        <td>{{ person.address }}</td>
+        <td>{{ person.city }}</td>
+        <td>
+            <button
+                class="btn btn-outline-primary"
+                hx-get="{{ url("table-inline-edit-row", pk=person.pk) }}"
+
+            >
+                <i class="bi bi-pencil-square"></i>
+            </button>
+        </td>
+    </tr>
+{% endmacro %}
+
+
+{% macro inline_table_row_edit(person, cities, errors={}) %}
     {% macro render_input(field_name, value) %}
         {% set has_error = field_name in errors %}
         <input
@@ -9,48 +27,52 @@
         >
     {% endmacro %}
 
-    {% if is_editing %}
+    {% macro render_select(field_name, value, options) %}
-        <tr id="person-row-{{ person.pk }}" hx-target="this" hx-swap="outerHTML">
+        {% set has_error = field_name in errors %}
-            <td>
+        <select 
-                {{ render_input(field_name="name", value=person.name) }}
+            class="form-select {% if has_error %}is-invalid{% endif %}"
-            </td>
+            name="{{ field_name }}"
-            <td>
+            {% if has_error %}title="{{ errors[field_name] }}"{% endif %}
-                {{ render_input(field_name="address", value=person.address) }}
+        >
-            </td>
+            {% for option in options %}
-            <td>
+                {% set selected = value == option %}
-                {{ render_input(field_name="city", value=person.city) }}
+                <option value="{{ option }}" {% if selected %}selected{% endif %}>
-            </td>
+                    {{ option }}
-            <td>
+                </option>
-                <button
+            {% endfor %}
-                    class="btn btn-outline-success"
+        </select> 
-                    hx-post="{{ url("table-inline-edit-row", pk=person.pk) }}"
+    {% endmacro %}
-                    hx-include="#person-row-{{ person.pk }} input"
+    
-                >
+    <tr 
-                    <i class="bi bi-check-circle-fill"></i>
+        id="person-row-{{ person.pk }}" 
-                </button>
+        hx-target="this" 
-                <button
+        hx-swap="outerHTML"
-                    class="btn btn-outline-danger"
+    >
-                    hx-get="{{ url("table-inline-edit-row", pk=person.pk) }}"
+        <td>
-                    hx-vals='{"action": "cancel"}'
+            {{ render_input(field_name="name", value=person.name) }}
-                >
+        </td>
-                    <i class="bi bi-x-circle-fill"></i>
+        <td>
-                </button>
+            {{ render_input(field_name="address", value=person.address) }}
-            </td>
+        </td>
-        </tr>
+        <td>
-    {% else %}
+{#            {{ render_input(field_name="city", value=person.city) }}#}
-        <tr hx-target="this" hx-swap="outerHTML">
+            {{ render_select(field_name="city", value=person.city, options=cities) }}
-            <td>{{ person.name }}</td>
+        </td>
-            <td>{{ person.address }}</td>
+        <td>
-            <td>{{ person.city }}</td>
+            <button
-            <td>
+                class="btn btn-outline-success"
-                <button
+                hx-post="{{ url("table-inline-edit-row", pk=person.pk) }}"
-                    class="btn btn-outline-primary"
+                hx-include="#person-row-{{ person.pk }} input, #person-row-{{ person.pk }} select"
-                    hx-get="{{ url("table-inline-edit-row", pk=person.pk) }}"
+            >
-
+                <i class="bi bi-check-circle-fill"></i>
-                >
+            </button>
-                    <i class="bi bi-pencil-square"></i>
+            <button
-                </button>
+                class="btn btn-outline-danger"
-            </td>
+                hx-get="{{ url("table-inline-edit-row", pk=person.pk) }}"
-        </tr>
+                hx-vals='{"action": "cancel"}'
-    {% endif %}
+            >
+                <i class="bi bi-x-circle-fill"></i>
+            </button>
+        </td>
+    </tr>
 {% endmacro %}

project/main/templates/main/table_inline_edit.html

@@ -17,7 +17,7 @@
         </thead>
         <tbody>
             {% for person in persons %}
-                {{ inline_table_row(person, is_editing=False) }}
+                {{ inline_table_row(person) }}
             {% endfor %}
         </tbody>
     </table>

project/main/templates/main/table_inline_table_row.html

@@ -1,3 +1,7 @@
-{% from "main/components/inline_table_row.html" import inline_table_row %}
+{% from "main/components/inline_table_row.html" import inline_table_row, inline_table_row_edit %}
 
-{{ inline_table_row(person, is_editing=is_editing, errors=errors) }}
+{% if is_editing %}
+    {{ inline_table_row_edit(person, cities=cities, errors=errors) }}
+{% else %}
+    {{ inline_table_row(person) }}
+{% endif %}

project/main/views/table_inline_edit.py

@@ -8,6 +8,15 @@ from django.shortcuts import render
 from project.main.models import Person
 from project.main.views.demo_view_base import DemoViewBase
 
+CITIES: list[str] = [
+    "",
+    "Zagreb",
+    "Split",
+    "Pula",
+    "Rijeka",
+    "Kozari bok",
+]
+
 
 def get_person(pk: int) -> Person:
     try:
@@ -46,6 +55,7 @@ class TableInlineEditRowView(DemoViewBase):
         context_data.update(
             {
                 "person": person,
+                "cities": CITIES,
                 "is_editing": action == "edit",
             }
         )
@@ -66,12 +76,11 @@ class TableInlineEditRowView(DemoViewBase):
         else:
             person.save()
 
-        print(errors)
-
         return render(
             context={
                 "person": person,
                 "errors": errors,
+                "cities": CITIES,
                 "is_editing": errors is not None,
             },
             template_name=self.template_name,