Allow ordering packages in collections

app/blueprints/collections/__init__.py

@@ -84,6 +84,7 @@ class CollectionForm(FlaskForm):
 		min_entries=0)
 	package_ids = FieldList(HiddenField(), min_entries=0)
 	package_removed = FieldList(HiddenField(), min_entries=0)
+	order = HiddenField()
 	submit = SubmitField(lazy_gettext("Save"))
 
 
@@ -178,7 +179,10 @@ def handle_create_edit(collection: Collection, form: CollectionForm,
 		form.populate_obj(collection)
 		collection.name = name
 
-		order = 1
+		item_lookup = {}
+		for link in collection.items:
+			item_lookup[link.package.get_id()] = link
+
 		for i, package_id in enumerate(form.package_ids):
 			link = next((x for x in collection.items if str(x.package.get_id()) == package_id.data), None)
 			to_delete = form.package_removed[i].data == "1"
@@ -194,15 +198,15 @@ def handle_create_edit(collection: Collection, form: CollectionForm,
 				link.package = package
 				link.collection = collection
 				link.description = form.descriptions[i].data
-				link.order = order
-				order += 1
+				item_lookup[link.package.get_id()] = link
 				db.session.add(link)
 			elif to_delete:
 				db.session.delete(link)
 			else:
 				link.description = form.descriptions[i].data
-				link.order = order
-				order += 1
+
+		for i, package_id in enumerate(form.order.data.split(",")):
+			item_lookup[package_id].order = i + 1
 
 		add_audit_log(severity, current_user,
 				f"Edited collection {collection.author.username}/{collection.name}",

app/models/collections.py

@@ -57,7 +57,7 @@ class Collection(db.Model):
 	private = db.Column(db.Boolean, nullable=False, default=False)
 
 	packages = db.relationship("Package", secondary=CollectionPackage.__table__, backref="collections")
-	items = db.relationship("CollectionPackage", back_populates="collection", order_by=db.asc("created_at"),
+	items = db.relationship("CollectionPackage", back_populates="collection", order_by=db.asc("order"),
 		cascade="all, delete, delete-orphan")
 
 	collection_name_valid = db.CheckConstraint("name ~* '^[a-z0-9_]+$' AND name != '_game'")

app/public/static/collection_editor.js

@@ -2,6 +2,18 @@
 // @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
 
 
+function updateOrder() {
+	const elements = [...document.querySelector(".sortable").children];
+	const ids = elements
+		.filter(x => !x.classList.contains("d-none"))
+		.map(x => x.dataset.id)
+		.filter(x => x);
+
+	console.log(ids);
+	document.querySelector("input[name='order']").value = ids.join(",");
+}
+
+
 function removePackage(card) {
 	const message = document.getElementById("confirm_delete").innerText.trim();
 	const title = card.querySelector("h5 a").innerText.trim();
@@ -12,6 +24,7 @@ function removePackage(card) {
 	card.querySelector("input[name^=package_removed]").value = "1";
 	card.classList.add("d-none");
 	onPackageQueryUpdate();
+	updateOrder();
 }
 
 
@@ -26,6 +39,7 @@ function restorePackage(id) {
 	card.querySelector("input[name^=package_removed]").value = "0";
 	card.scrollIntoView();
 	onPackageQueryUpdate();
+	updateOrder();
 	return true;
 }
 
@@ -59,7 +73,7 @@ function addPackage(pkg) {
 	const url = `/packages/${id}/`;
 	const temp = document.createElement("div");
 	temp.innerHTML = `
-		<article class="card my-3">
+		<article class="card my-3" data-id="${escapeHtml(id)}">
 			<div class="card-body">
 				<button class="btn btn-sm btn-danger remove-package float-right" type="button" aria-label="Remove">
 					<i class="fas fa-trash"></i>
@@ -90,6 +104,8 @@ function addPackage(pkg) {
 
 	const button = card.querySelector(".btn-danger");
 	button.addEventListener("click", () => removePackage(card));
+
+	updateOrder();
 }
 
 
@@ -169,4 +185,9 @@ window.onload = () => {
 	addPackageQuery.value = "";
 	addPackageQuery.classList.remove("d-none");
 	addPackageQuery.addEventListener("input", onPackageQueryUpdate);
+
+	updateOrder();
+	$(".sortable").sortable({
+		update: updateOrder,
+	});
 };

app/templates/collections/create_edit.html

@@ -9,7 +9,8 @@
 {% endblock %}
 
 {% block scriptextra %}
-	<script src="/static/collection_editor.js?v=4"></script>
+	<script src="/static/libs/jquery-ui.min.js"></script>
+	<script src="/static/collection_editor.js?v=5"></script>
 {% endblock %}
 
 {% block content %}
@@ -45,30 +46,38 @@
 				</p>
 				<div id="add_package_results" class="list-group"></div>
 			</div>
-			<div id="package_list">
+			<div id="package_list" class="sortable">
 				{% for item in collection.items %}
 					{% set package = item.package %}
-					<article class="card my-3">
+					<article class="card my-3" data-id="{{ package.get_id() }}">
 						<div class="card-body">
-							<button class="btn btn-sm btn-danger remove-package float-right"
-									type="button" aria-label="{{ _('Remove') }}">
-								<i class="fas fa-trash"></i>
-							</button>
-							<h5>
-								<a href="{{ package.get_url('packages.view') }}" target="_blank">
-									{{ _("%(title)s by %(author)s", title=package.title, author=package.author.display_name) }}
-								</a>
-							</h5>
-							<p class="text-muted">
-								{{ package.short_desc }}
-							</p>
-							{{ render_field(form.descriptions[loop.index - 1], hint=_("You can replace the description with your own")) }}
-							{{ form.package_ids[loop.index - 1]() }}
-							{{ form.package_removed[loop.index - 1]() }}
+							<div class="row">
+								<div class="col-auto text-muted pr-2">
+									<i class="fas fa-bars"></i>
+								</div>
+								<div class="col">
+									<button class="btn btn-sm btn-danger remove-package float-right"
+											type="button" aria-label="{{ _('Remove') }}">
+										<i class="fas fa-trash"></i>
+									</button>
+									<h5>
+										<a href="{{ package.get_url('packages.view') }}" target="_blank">
+											{{ _("%(title)s by %(author)s", title=package.title, author=package.author.display_name) }}
+										</a>
+									</h5>
+									<p class="text-muted">
+										{{ package.short_desc }}
+									</p>
+									{{ render_field(form.descriptions[loop.index - 1], hint=_("You can replace the description with your own")) }}
+									{{ form.package_ids[loop.index - 1]() }}
+									{{ form.package_removed[loop.index - 1]() }}
+								</div>
+							</div>
 						</div>
 					</article>
 				{% endfor %}
 			</div>
+			{{ form.order() }}
 		{% endif %}
 
 		<div class="mt-5">