edit collection item without reload page

journal/models/itemlist.py

@@ -76,7 +76,7 @@ class List(Piece):
             raise ValueError("item is None")
         member = self.get_member_for_item(item)
         if member:
-            return member
+            return member, False
         ml = self.ordered_members
         p = {"parent": self}
         p.update(params)
@@ -88,7 +88,7 @@ class List(Piece):
             **p,
         )
         list_add.send(sender=self.__class__, instance=self, item=item, member=member)
-        return member
+        return member, True
 
     def remove_item(self, item):
         member = self.get_member_for_item(item)

journal/templates/_list_item.html

@@ -8,12 +8,14 @@
   {% get_mark_for_item item as mark %}
 {% endif %}
 <article class="entity-sort item-card"
+         draggable="true"
          {% if collection_edit %}data-member-id="{{ collection_member.id }}"{% endif %}>
   <span class="action">
     {% if collection_edit %}
       <span>
         <a title="{% trans "Remove from collection" %}"
-           hx-target="#collection_items"
+           hx-target="closest article"
+           hx-swap="outerHTML"
            hx-post="{% url 'journal:collection_remove_item' collection.uuid item.uuid %}">
           <i class="fa-solid fa-square-minus"></i>
         </a>
@@ -86,7 +88,7 @@
         {% endif %}
       {% endif %}
       {% if collection_member %}
-        <div hx-swap="innerHTML" hx-target="this">
+        <div hx-swap="innerHTML" hx-target="this" class="item-note">
           {% if collection_edit %}
             <span class="action">
               <a title="{% trans "Update note" %}"

journal/templates/collection_edit.html

@@ -45,11 +45,13 @@
             <summary>{% trans "Items" %}</summary>
             <section>
               <div id="collection_items"
+                   class="sortable"
                    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-swap="beforeend"
                   hx-post="{% url 'journal:collection_append_item' collection.uuid %}"
                   method="post">
               {% csrf_token %}
@@ -59,7 +61,7 @@
                      style="min-width:24rem"
                      required>
               <input type="text"
-                     name="comment"
+                     name="note"
                      placeholder="{% trans 'note' %}"
                      style="min-width:24rem">
               <input class="button"
@@ -87,6 +89,7 @@
                   hx-target="#collection_items"
                   hx-post="{% url 'journal:collection_update_member_order' collection.uuid %}"
                   onsubmit="return update_member_order()"
+                  hx-swap="beforeend"
                   method="post">
               {% csrf_token %}
               <input type="hidden" name="member_ids" id="member_ids" required>

journal/templates/collection_items.html

@@ -3,15 +3,17 @@
 {% load l10n %}
 {% for member in members %}
   {% include '_list_item.html' with item=member.item mark=None collection_member=member %}
+  {% if forloop.counter == 10 %}<div class="loader-mark"></div>{% endif %}
   {% if forloop.last %}
     <div hx-get="{% url 'journal:collection_retrieve_items' collection.uuid %}?last_pos={{ member.position }}&amp;last_member={{ member.id }}&amp;edit={{ request.GET.edit }}"
-         hx-trigger="{% if request.GET.edit %}load{% else %}revealed{% endif %}"
+         hx-trigger="load delay:0.1s"
-         hx-swap="outerHTML">
+         hx-swap="outerHTML"
-      <i class="fa-solid fa-compact-disc fa-spin loading"></i>{{ member.position }}
+         class=".loader">
+      <i class="fa-solid fa-compact-disc fa-spin loading"></i>
     </div>
   {% endif %}
 {% empty %}
-  {% if not request.GET.last_pos %}
+  {% if not request.GET.last_pos and not collection_edit %}
     {% trans "nothing so far." %}
   {% endif %}
 {% endfor %}

journal/templates/collection_update_item_note.html

@@ -1,9 +1,9 @@
 {% load i18n %}
-<form hx-post="{% url 'journal:collection_update_item_note' collection.uuid item.uuid %}"
+<form hx-post="{% url 'journal:collection_update_item_note' collection.uuid item.uuid %}">
-      hx-target="#collection_items">
+  <input name="note" value="{{ collection_member.note|default:'' }}">
-  <input name="note" value="{{ note }}">
   <input type="submit" style="width:unset;" value="{% trans "Update" %}">
   <button style="width:unset"
-          hx-get="{% url 'journal:collection_retrieve_items' collection.uuid %}?edit=1"
+          hx-get="{% url 'journal:collection_update_item_note' collection.uuid item.uuid %}?cancel=1"
-          hx-target="#collection_items">{% trans "Cancel" %}</button>
+          hx-target="closest form"
+          hx-swap="outerHTML">{% trans "Cancel" %}</button>
 </form>

journal/templates/collection_update_item_note_ok.html

@@ -0,0 +1,6 @@
+{% load i18n %}
+<span class="action">
+  <a title="{% trans "Update note" %}"
+     hx-get="{% url 'journal:collection_update_item_note' collection.uuid item.uuid %}"><i class="fa-regular fa-pen-to-square"></i></a>
+</span>
+{{ collection_member.note|default:"&nbsp;" }}

journal/tests.py

@@ -21,7 +21,7 @@ class CollectionTest(TestCase):
         Collection.objects.create(title="test", owner=self.user.identity)
         collection = Collection.objects.get(title="test", owner=self.user.identity)
         self.assertEqual(collection.catalog_item.title, "test")
-        member1 = collection.append_item(self.book1)
+        member1, _ = collection.append_item(self.book1)
         self.assertIsNotNone(member1)
         member1.note = "my notes"
         member1.save()

journal/views/collection.py

@@ -1,6 +1,6 @@
 from django.contrib.auth.decorators import login_required
 from django.core.exceptions import BadRequest, PermissionDenied
-from django.http import HttpResponseRedirect
+from django.http import HttpResponse, HttpResponseRedirect
 from django.shortcuts import get_object_or_404, redirect, render
 from django.urls import reverse
 from django.utils.translation import gettext as _
@@ -196,7 +196,6 @@ def collection_retrieve_items(
         raise PermissionDenied(_("Insufficient permission"))
     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)
@@ -220,15 +219,29 @@ def collection_append_item(request: AuthedHttpRequest, collection_uuid):
         raise PermissionDenied(_("Insufficient permission"))
 
     url = request.POST.get("url", "")
-    note = request.POST.get("note")
+    note = request.POST.get("note", "")
     item = Item.get_by_url(url)
+    member = None
     if item:
-        collection.append_item(item, note=note)
+        member, new = collection.append_item(item, note=note)
+        if new:
             collection.save()
             msg = None
+        else:
+            member = None
+            msg = _("The item is already in the collection.")
     else:
         msg = _("Unable to find the item, please use item url from this site.")
-    return collection_retrieve_items(request, collection_uuid, True, msg)
+    return render(
+        request,
+        "collection_items.html",
+        {
+            "collection": collection,
+            "members": [member] if member else [],
+            "collection_edit": True,
+            "msg": msg,
+        },
+    )
 
 
 @login_required
@@ -239,7 +252,7 @@ def collection_remove_item(request: AuthedHttpRequest, collection_uuid, item_uui
     if not collection.is_editable_by(request.user):
         raise PermissionDenied(_("Insufficient permission"))
     collection.remove_item(item)
-    return collection_retrieve_items(request, collection_uuid, True)
+    return HttpResponse("")
 
 
 @login_required
@@ -269,7 +282,16 @@ def collection_update_member_order(request: AuthedHttpRequest, collection_uuid):
         raise BadRequest(_("Invalid parameter"))
     ordered_member_ids = [int_(i) for i in ids.split(",")]
     collection.update_member_order(ordered_member_ids)
-    return collection_retrieve_items(request, collection_uuid, True)
+    return render(
+        request,
+        "collection_items.html",
+        {
+            "collection": collection,
+            "members": [],
+            "collection_edit": True,
+            "msg": _("Saved."),
+        },
+    )
 
 
 @login_required
@@ -281,21 +303,28 @@ def collection_update_item_note(request: AuthedHttpRequest, collection_uuid, ite
     item = get_object_or_404(Item, uid=get_uuid_or_404(item_uuid))
     if not collection.is_editable_by(request.user):
         raise PermissionDenied(_("Insufficient permission"))
-    if request.method == "POST":
-        collection.update_item_metadata(
-            item, {"note": request.POST.get("note", default="")}
-        )
-        return collection_retrieve_items(request, collection_uuid, True)
-    else:
     member = collection.get_member_for_item(item)
+    note = request.POST.get("note", default="")
+    cancel = request.GET.get("cancel")
+    if request.method == "POST" and member:
+        member.note = note  # type: ignore
+        member.save()
+        return render(
+            request,
+            "collection_update_item_note_ok.html",
+            {"collection": collection, "item": item, "collection_member": member},
+        )
+    elif cancel:
+        return render(
+            request,
+            "collection_update_item_note_ok.html",
+            {"collection": collection, "item": item, "collection_member": member},
+        )
+    else:
         return render(
             request,
             "collection_update_item_note.html",
-            {
+            {"collection": collection, "item": item, "collection_member": member},
-                "collection": collection,
-                "item": item,
-                "note": member.note if member else None,  # type:ignore
-            },
         )