Intis/django-htmx-presenatation
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

City as select

Browse Source
This commit is contained in:
Eden Kirin
2024-05-16 21:40:28 +02:00
parent fc6b3a7fa0
commit 382e514d03
4 changed files with 85 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
project/main/templates/main/components/inline_table_row.html
View File

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

2
project/main/templates/main/table_inline_edit.html
View File

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

8
project/main/templates/main/table_inline_table_row.html
View File

@ -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 %}

13
project/main/views/table_inline_edit.py
View File

@ -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,