lazy load collection page
This commit is contained in:
Your Name
Henri Dickson
parent
47cffef24b
commit
adfc9984e2
8 changed files with 83 additions and 69 deletions
|
|
@ -28,7 +28,7 @@ repos:
|
|||
rev: v0.9.2
|
||||
hooks:
|
||||
- id: ruff
|
||||
args: [ --fix ]
|
||||
args: [ "--fix" ]
|
||||
- id: ruff-format
|
||||
|
||||
# - repo: https://github.com/pycqa/isort
|
||||
|
|
|
|||
|
|
@ -78,11 +78,11 @@ def add_note_for_item(request, item_uuid: str, n_in: NoteInSchema):
|
|||
response={200: NoteSchema, 401: Result, 403: Result, 404: Result},
|
||||
tags=["note"],
|
||||
)
|
||||
def update_note(request, tag_uuid: str, n_in: NoteInSchema):
|
||||
def update_note(request, note_uuid: str, n_in: NoteInSchema):
|
||||
"""
|
||||
Update a note.
|
||||
"""
|
||||
note = Note.get_by_url_and_owner(tag_uuid, request.user.identity.pk)
|
||||
note = Note.get_by_url_and_owner(note_uuid, request.user.identity.pk)
|
||||
if not note:
|
||||
return NOT_FOUND
|
||||
note.title = n_in.title
|
||||
|
|
@ -101,11 +101,11 @@ def update_note(request, tag_uuid: str, n_in: NoteInSchema):
|
|||
response={200: Result, 401: Result, 403: Result, 404: Result},
|
||||
tags=["note"],
|
||||
)
|
||||
def delete_note(request, tag_uuid: str):
|
||||
def delete_note(request, note_uuid: str):
|
||||
"""
|
||||
Delete a note.
|
||||
"""
|
||||
note = Note.get_by_url_and_owner(tag_uuid, request.user.identity.pk)
|
||||
note = Note.get_by_url_and_owner(note_uuid, request.user.identity.pk)
|
||||
if not note:
|
||||
return NOT_FOUND
|
||||
note.delete()
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ class List(Piece):
|
|||
|
||||
@property
|
||||
def ordered_members(self):
|
||||
return self.members.all().order_by("position")
|
||||
return self.members.all().order_by("position", "item_id")
|
||||
|
||||
@property
|
||||
def ordered_items(self):
|
||||
|
|
@ -104,7 +104,7 @@ class List(Piece):
|
|||
i = ordered_member_ids.index(m.pk)
|
||||
if m.position != i + 1:
|
||||
m.position = i + 1
|
||||
m.save()
|
||||
m.save(update_fields=["position"])
|
||||
except ValueError:
|
||||
pass
|
||||
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@
|
|||
{% endif %}
|
||||
{% endif %}
|
||||
{% if collection_member %}
|
||||
<p hx-target="this" hx-swap="innerHTML">
|
||||
<div hx-swap="innerHTML" hx-target="this">
|
||||
{% if collection_edit %}
|
||||
<span class="action">
|
||||
<a title="{% trans "Update note" %}"
|
||||
|
|
@ -94,7 +94,8 @@
|
|||
</span>
|
||||
{% endif %}
|
||||
{% if collection_member.note %}{{ collection_member.note }}{% endif %}
|
||||
</p>
|
||||
|
||||
</div>
|
||||
{% endif %}
|
||||
</footer>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -111,7 +111,8 @@
|
|||
{% endif %}
|
||||
{% endcomment %}
|
||||
<section>
|
||||
<div class="entity-list"
|
||||
<div id="collection_items"
|
||||
class="item-list sortable"
|
||||
hx-get="{% url 'journal:collection_retrieve_items' collection.uuid %}"
|
||||
hx-trigger="load">
|
||||
<i class="fa-solid fa-compact-disc fa-spin loading"></i>
|
||||
|
|
|
|||
|
|
@ -43,9 +43,57 @@
|
|||
<hr>
|
||||
<details open>
|
||||
<summary>{% trans "Items" %}</summary>
|
||||
<section>
|
||||
<div id="collection_items"
|
||||
hx-get="{% url 'journal:collection_retrieve_items' collection.uuid %}?edit=1"
|
||||
hx-trigger="load"></div>
|
||||
</section>
|
||||
<form class="entity-form"
|
||||
hx-target="#collection_items"
|
||||
hx-post="{% url 'journal:collection_append_item' collection.uuid %}"
|
||||
method="post">
|
||||
{% csrf_token %}
|
||||
<input type="url"
|
||||
name="url"
|
||||
placeholder="{{ request.scheme }}://{{ request.get_host }}/item/abcd123"
|
||||
style="min-width:24rem"
|
||||
required>
|
||||
<input type="text"
|
||||
name="comment"
|
||||
placeholder="{% trans 'note' %}"
|
||||
style="min-width:24rem">
|
||||
<input class="button"
|
||||
type="submit"
|
||||
value="{% trans 'Add an item to this collection' %}">
|
||||
</form>
|
||||
<script>
|
||||
$(function () {
|
||||
sortable('.sortable', {
|
||||
forcePlaceholderSize: true,
|
||||
placeholderClass: 'entity-sort--placeholder',
|
||||
hoverClass: 'entity-sort--hover'
|
||||
});
|
||||
});
|
||||
function update_member_order() {
|
||||
var member_ids = [];
|
||||
$('.sortable>.item-card').each(function () {
|
||||
member_ids.push($(this).data('member-id'));
|
||||
});
|
||||
$('#member_ids').val(member_ids.join(','));
|
||||
return true;
|
||||
}
|
||||
</script>
|
||||
<form class="entity-form"
|
||||
hx-target="#collection_items"
|
||||
hx-post="{% url 'journal:collection_update_member_order' collection.uuid %}"
|
||||
onsubmit="return update_member_order()"
|
||||
method="post">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="member_ids" id="member_ids" required>
|
||||
<input type="submit"
|
||||
class="secondary"
|
||||
value="{% trans "Drag and drop to change the order order and click here to save" %}">
|
||||
</form>
|
||||
</details>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,59 +1,18 @@
|
|||
{% load thumb %}
|
||||
{% load i18n %}
|
||||
{% load l10n %}
|
||||
<div class="item-list sortable">
|
||||
{% for member in collection.ordered_members %}
|
||||
{% for member in members %}
|
||||
{% include '_list_item.html' with item=member.item mark=None collection_member=member %}
|
||||
{% empty %}
|
||||
{% trans "nothing so far." %}
|
||||
{% endfor %}
|
||||
{% if forloop.last %}
|
||||
<div hx-get="{% url 'journal:collection_retrieve_items' collection.uuid %}?last_pos={{ member.position }}&last_member={{ member.id }}&edit={{ request.GET.edit }}"
|
||||
hx-trigger="{% if request.GET.edit %}load{% else %}revealed{% endif %}"
|
||||
hx-swap="outerHTML">
|
||||
<i class="fa-solid fa-compact-disc fa-spin loading"></i>{{ member.position }}
|
||||
</div>
|
||||
{% if collection_edit %}
|
||||
<form class="entity-form"
|
||||
hx-target="#collection_items"
|
||||
hx-post="{% url 'journal:collection_append_item' collection.uuid %}"
|
||||
method="post">
|
||||
{% csrf_token %}
|
||||
<input type="url"
|
||||
name="url"
|
||||
placeholder="{{ request.scheme }}://{{ request.get_host }}/item/abcd123"
|
||||
style="min-width:24rem"
|
||||
required>
|
||||
<input type="text"
|
||||
name="comment"
|
||||
placeholder="{% trans 'note' %}"
|
||||
style="min-width:24rem">
|
||||
<input class="button"
|
||||
type="submit"
|
||||
value="{% trans 'Add an item to this collection' %}">
|
||||
</form>
|
||||
<script>
|
||||
$(function () {
|
||||
sortable('.sortable', {
|
||||
forcePlaceholderSize: true,
|
||||
placeholderClass: 'entity-sort--placeholder',
|
||||
hoverClass: 'entity-sort--hover'
|
||||
});
|
||||
});
|
||||
function update_member_order() {
|
||||
var member_ids = [];
|
||||
$('.sortable>.item-card').each(function () {
|
||||
member_ids.push($(this).data('member-id'));
|
||||
});
|
||||
$('#member_ids').val(member_ids.join(','));
|
||||
return true;
|
||||
}
|
||||
</script>
|
||||
<form class="entity-form"
|
||||
hx-target="#collection_items"
|
||||
hx-post="{% url 'journal:collection_update_member_order' collection.uuid %}"
|
||||
onsubmit="return update_member_order()"
|
||||
method="post">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="member_ids" id="member_ids" required>
|
||||
<input type="submit"
|
||||
class="secondary"
|
||||
value="{% trans "Drag and drop to change the order order and click here to save" %}">
|
||||
</form>
|
||||
{% endif %}
|
||||
{% empty %}
|
||||
{% if not request.GET.last_pos %}
|
||||
{% trans "nothing so far." %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if msg %}<script type="text/javascript">alert("{{ msg|escapejs }}");</script>{% endif %}
|
||||
|
|
|
|||
|
|
@ -194,13 +194,18 @@ def collection_retrieve_items(
|
|||
collection = get_object_or_404(Collection, uid=get_uuid_or_404(collection_uuid))
|
||||
if not collection.is_visible_to(request.user):
|
||||
raise PermissionDenied(_("Insufficient permission"))
|
||||
form = CollectionForm(instance=collection)
|
||||
members = collection.ordered_members
|
||||
last_pos = int_(request.GET.get("last_pos"))
|
||||
print("p", last_pos)
|
||||
if last_pos:
|
||||
last_member = int_(request.GET.get("last_member"))
|
||||
members = members.filter(position__gte=last_pos).exclude(id=last_member)
|
||||
return render(
|
||||
request,
|
||||
"collection_items.html",
|
||||
{
|
||||
"collection": collection,
|
||||
"form": form,
|
||||
"members": members[:20],
|
||||
"collection_edit": edit or request.GET.get("edit"),
|
||||
"msg": msg,
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue