Basic table inline edit functionality
This commit is contained in:
Eden Kirin
1
.gitignore
vendored
1
.gitignore
vendored
@ -3,3 +3,4 @@
|
||||
/.venv
|
||||
__pycache__
|
||||
/project/settings_local.py
|
||||
/db.sqlite3
|
||||
|
||||
Binary file not shown.
@ -1,6 +1,21 @@
|
||||
import os
|
||||
import shutil
|
||||
|
||||
from django.apps import AppConfig
|
||||
from django.conf import settings
|
||||
|
||||
|
||||
class MainConfig(AppConfig):
|
||||
default_auto_field = "django.db.models.BigAutoField"
|
||||
name = "project.main"
|
||||
|
||||
def ready(self):
|
||||
"""copy template database if db not exists"""
|
||||
|
||||
db_fname = settings.DATABASES["default"]["NAME"]
|
||||
template_db_fname = settings.BASE_DIR / "db_template.sqlite3"
|
||||
|
||||
if os.path.exists(db_fname):
|
||||
return
|
||||
|
||||
shutil.copyfile(template_db_fname, db_fname)
|
||||
|
||||
60
project/main/migrations/0003_person.py
Normal file
60
project/main/migrations/0003_person.py
Normal file
@ -0,0 +1,60 @@
|
||||
from django.db import migrations, models
|
||||
|
||||
|
||||
def create_persons_data(apps, schema_editor):
|
||||
Person = apps.get_model("main", "Person")
|
||||
|
||||
bulk = [
|
||||
Person(
|
||||
name="Pero",
|
||||
address="Perina ulica 15",
|
||||
city="Zagreb",
|
||||
),
|
||||
Person(
|
||||
name="Mirko",
|
||||
address="Mirkova ulica 17",
|
||||
city="Zagreb",
|
||||
),
|
||||
Person(
|
||||
name="Šime",
|
||||
address="Šimina ulica 19",
|
||||
city="Split",
|
||||
),
|
||||
Person(
|
||||
name="Furio",
|
||||
address="Furiozna ulica 21",
|
||||
city="Pula",
|
||||
),
|
||||
]
|
||||
|
||||
Person.objects.bulk_create(bulk)
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
dependencies = [
|
||||
("main", "0002_example_data"),
|
||||
]
|
||||
|
||||
operations = [
|
||||
migrations.CreateModel(
|
||||
name="Person",
|
||||
fields=[
|
||||
(
|
||||
"id",
|
||||
models.BigAutoField(
|
||||
auto_created=True,
|
||||
primary_key=True,
|
||||
serialize=False,
|
||||
verbose_name="ID",
|
||||
),
|
||||
),
|
||||
("name", models.CharField(max_length=100)),
|
||||
("address", models.CharField(max_length=100)),
|
||||
("city", models.CharField(max_length=100)),
|
||||
],
|
||||
options={
|
||||
"db_table": "persons",
|
||||
},
|
||||
),
|
||||
migrations.RunPython(create_persons_data),
|
||||
]
|
||||
@ -1 +1,2 @@
|
||||
from .cat_breed import CatBreed
|
||||
from .person import Person
|
||||
|
||||
10
project/main/models/person.py
Normal file
10
project/main/models/person.py
Normal file
@ -0,0 +1,10 @@
|
||||
from django.db import models
|
||||
|
||||
|
||||
class Person(models.Model):
|
||||
name = models.CharField(max_length=100)
|
||||
address = models.CharField(max_length=100)
|
||||
city = models.CharField(max_length=100)
|
||||
|
||||
class Meta:
|
||||
db_table = "persons"
|
||||
43
project/main/templates/main/components/inline_table_row.html
Normal file
43
project/main/templates/main/components/inline_table_row.html
Normal 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 %}
|
||||
@ -50,6 +50,5 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% include "main/filter_list_content.html" %}
|
||||
{% endblock %}
|
||||
|
||||
@ -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%"> </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
3
project/main/templates/main/table_inline_table_row.html
Normal file
@ -0,0 +1,3 @@
|
||||
{% from "main/components/inline_table_row.html" import inline_table_row %}
|
||||
|
||||
{{ inline_table_row(person, is_editing=is_editing) }}
|
||||
@ -8,4 +8,4 @@ from .filter_list import FilterListFilterView, FilterListView
|
||||
from .form_validation import FormValidationView
|
||||
from .home import HomeView
|
||||
from .swap import SwapView
|
||||
from .table_inline_edit import TableInlineEditView
|
||||
from .table_inline_edit import TableInlineEditView, TableInlineEditRowView
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
from typing import Any
|
||||
|
||||
from django.http import Http404
|
||||
|
||||
from project.main.models import Person
|
||||
from project.main.views.demo_view_base import DemoViewBase
|
||||
|
||||
|
||||
@ -5,3 +10,37 @@ class TableInlineEditView(DemoViewBase):
|
||||
template_name = "main/table_inline_edit.html"
|
||||
active_section = "table-inline-edit"
|
||||
title = "Table Inline Edit"
|
||||
|
||||
def get_context_data(self, **kwargs) -> dict[str, Any]:
|
||||
context_data = super().get_context_data(**kwargs)
|
||||
|
||||
persons = Person.objects.all()
|
||||
|
||||
context_data.update(
|
||||
{
|
||||
"persons": persons,
|
||||
}
|
||||
)
|
||||
return context_data
|
||||
|
||||
|
||||
class TableInlineEditRowView(DemoViewBase):
|
||||
template_name = "main/table_inline_table_row.html"
|
||||
|
||||
def get_context_data(self, **kwargs) -> dict[str, Any]:
|
||||
context_data = super().get_context_data(**kwargs)
|
||||
|
||||
try:
|
||||
person = Person.objects.get(pk=kwargs.get("pk"))
|
||||
except Person.DoesNotExist:
|
||||
raise Http404("Person not found")
|
||||
|
||||
action = self.request.GET.get("action")
|
||||
|
||||
context_data.update(
|
||||
{
|
||||
"person": person,
|
||||
"is_editing": action != "cancel",
|
||||
}
|
||||
)
|
||||
return context_data
|
||||
|
||||
@ -13,4 +13,5 @@ urlpatterns = [
|
||||
path("complex-form/handle/reports", views.ReportsHandleView.as_view(), name="complex-form-handle-reports"),
|
||||
path("complex-form/handle/warehouse-management", views.WarehouseManagementHandleView.as_view(), name="complex-form-handle-warehouse-management"),
|
||||
path("table-inline-edit", views.TableInlineEditView.as_view(), name="table-inline-edit"),
|
||||
path("table-inline-edit/edit/<int:pk>", views.TableInlineEditRowView.as_view(), name="table-inline-edit-row"),
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user