Add ability to remove packages from collection page

app/blueprints/collections/__init__.py

@@ -82,6 +82,7 @@ class CollectionForm(FlaskForm):
 		StringField(lazy_gettext("Short Description"), [Optional(), Length(0, 500)], filters=[nonempty_or_none]),
 		min_entries=0)
 	package_ids = FieldList(HiddenField(), min_entries=0)
+	package_removed = FieldList(HiddenField(), min_entries=0)
 	submit = SubmitField(lazy_gettext("Save"))
 
 
@@ -122,6 +123,7 @@ def create_edit(author=None, name=None):
 			for item in collection.items:
 				form.descriptions.append_entry(item.description)
 				form.package_ids.append_entry(item.package.id)
+				form.package_removed.append_entry("0")
 		else:
 			form.name = None
 
@@ -178,9 +180,11 @@ def handle_create_edit(collection: Collection, form: CollectionForm,
 		for i, package_id in enumerate(form.package_ids):
 			item = next((x for x in collection.items if str(x.package.id) == package_id.data), None)
 			if item is None:
-				abort(400)
+				continue
 
 			item.description = form.descriptions[i].data
+			if form.package_removed[i].data == "1":
+				db.session.delete(item)
 
 		add_audit_log(severity, current_user,
 				f"Edited collection {collection.author.username}/{collection.name}",

app/public/static/collection_editor.js

@@ -0,0 +1,26 @@
+// @author rubenwardy
+// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
+
+
+function handleRemovePackage(card) {
+	if (!confirm(card.getAttribute("data-delete-confirm"))) {
+		return;
+	}
+	card.querySelector("input[name^=package_removed]").value = "1";
+	card.classList.add("d-none");
+}
+
+window.onload = () => {
+	console.log("Loaded");
+	document.querySelectorAll(".remove-package").forEach(button => {
+		const card = button.parentNode.parentNode;
+		const field = card.querySelector("input[name^=package_removed]");
+
+		// Reloading/validation errors will cause this to be 1 at load
+		if (field && field.value === "1") {
+			card.classList.add("d-none");
+		} else {
+			button.addEventListener("click", () => handleRemovePackage(card));
+		}
+	});
+};

app/templates/collections/create_edit.html

@@ -8,6 +8,10 @@
 	{% endif %}
 {% endblock %}
 
+{% block scriptextra %}
+	<script src="/static/collection_editor.js"></script>
+{% endblock %}
+
 {% block content %}
 	{% from "macros/forms.html" import render_field, render_submit_field, render_checkbox_field, render_field_prefix_button %}
 	<form method="POST" action="" enctype="multipart/form-data">
@@ -35,8 +39,13 @@
 			</p>
 			{% for item in collection.items %}
 				{% set package = item.package %}
-				<article class="card my-3">
+				<article class="card my-3"
+						data-delete-confirm="{{ _('Are you sure you want to remove %(title)s?', title=package.title) }}">
 					<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) }}
@@ -47,6 +56,7 @@
 						</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>
 				</article>
 			{% endfor %}