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

Basic table inline edit functionality

Browse Source
This commit is contained in:
Eden Kirin
2024-05-15 22:15:27 +02:00
parent 7c20d4d23e
commit c7f89a9ab4
13 changed files with 193 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
project/main/templates/main/components/inline_table_row.html Normal file
View File

@ -0,0 +1,43 @@
{% macro inline_table_row(person, is_editing) %}
<tr hx-target="this" hx-swap="outerHTML">
{% if is_editing %}
<td>
<input class="form-control" name="name" value="{{ person.name }}">
</td>
<td>
<input class="form-control" name="address" value="{{ person.address }}">
</td>
<td>
<input class="form-control" name="city" value="{{ person.city }}">
</td>
<td>
<button
class="btn btn-outline-success"
hx-get="{{ url("table-inline-edit-row", pk=person.pk) }}"
hx-vals='{"action": "save"}'
>
<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>
{% else %}
<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>
{% endif %}
</tr>
{% endmacro %}

1
project/main/templates/main/filter_list.html
View File

@ -50,6 +50,5 @@
</div>
</div>
{% include "main/filter_list_content.html" %}
{% endblock %}

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

@ -1,7 +1,24 @@
{% extends "main/base/layout.html" %}
{% from "main/components/js_alert.html" import js_alert_work_in_progress %}
{% from "main/components/js_alert.html" import no_js_alert %}
{% from "main/components/inline_table_row.html" import inline_table_row %}
{% block content %}
{{ js_alert_work_in_progress() }}
{{ no_js_alert() }}
<table class="table align-middle">
<thead>
<tr>
<th style="width: 25%">Name</th>
<th>Address</th>
<th style="width: 25%">City</th>
<th style="width: 15%">&nbsp;</th>
</tr>
</thead>
<tbody>
{% for person in persons %}
{{ inline_table_row(person, is_editing=False) }}
{% endfor %}
</tbody>
</table>
{% endblock %}

3
project/main/templates/main/table_inline_table_row.html Normal file
View File

@ -0,0 +1,3 @@
{% from "main/components/inline_table_row.html" import inline_table_row %}
{{ inline_table_row(person, is_editing=is_editing) }}