Add ability to reorder screenshots

app/blueprints/packages/screenshots.py

@@ -37,6 +37,32 @@ class EditScreenshotForm(FlaskForm):
 	delete   = BooleanField("Delete")
 	submit   = SubmitField("Save")
 
+
+@bp.route("/packages/<author>/<name>/screenshots/", methods=["GET", "POST"])
+@login_required
+@is_package_page
+def screenshots(package):
+	if not package.checkPerm(current_user, Permission.ADD_SCREENSHOTS):
+		return redirect(package.getDetailsURL())
+
+	if request.method == "POST":
+		order = request.form.get("order")
+		if order:
+			lookup = {}
+			for screenshot in package.screenshots:
+				lookup[str(screenshot.id)] = screenshot
+
+			counter = 1
+			for id in order.split(","):
+				lookup[id].order = counter
+				counter += 1
+
+			db.session.commit()
+			return redirect(package.getDetailsURL())
+
+	return render_template("packages/screenshots.html", package=package)
+
+
 @bp.route("/packages/<author>/<name>/screenshots/new/", methods=["GET", "POST"])
 @login_required
 @is_package_page
@@ -61,7 +87,7 @@ def create_screenshot(package):
 					.format(ss.title)
 			addNotification(package.maintainers, current_user, NotificationType.PACKAGE_EDIT, msg, package.getDetailsURL(), package)
 			db.session.commit()
-			return redirect(package.getDetailsURL())
+			return redirect(package.getEditScreenshotsURL())
 
 	return render_template("packages/screenshot_new.html", package=package, form=form)
 
@@ -76,7 +102,7 @@ def edit_screenshot(package, id):
 	canEdit	= package.checkPerm(current_user, Permission.ADD_SCREENSHOTS)
 	canApprove = package.checkPerm(current_user, Permission.APPROVE_SCREENSHOT)
 	if not (canEdit or canApprove):
-		return redirect(package.getDetailsURL())
+		return redirect(package.getEditScreenshotsURL())
 
 	# Initial form class from post data and default data
 	form = EditScreenshotForm(formdata=request.form, obj=screenshot)
@@ -101,6 +127,6 @@ def edit_screenshot(package, id):
 				screenshot.approved = wasApproved
 
 		db.session.commit()
-		return redirect(package.getDetailsURL())
+		return redirect(package.getEditScreenshotsURL())
 
 	return render_template("packages/screenshot_edit.html", package=package, screenshot=screenshot, form=form)

app/models.py

@@ -714,7 +714,7 @@ class Package(db.Model):
 			lazy="dynamic", order_by=db.desc("package_release_releaseDate"))
 
 	screenshots = db.relationship("PackageScreenshot", backref="package",
-			lazy="dynamic", order_by=db.asc("package_screenshot_id"))
+			lazy="dynamic", order_by=db.asc("package_screenshot_order"))
 
 	requests = db.relationship("EditRequest", backref="package",
 			lazy="dynamic")
@@ -885,6 +885,10 @@ class Package(db.Model):
 		return url_for("packages.create_screenshot",
 				author=self.author.username, name=self.name)
 
+	def getEditScreenshotsURL(self):
+		return url_for("packages.screenshots",
+				author=self.author.username, name=self.name)
+
 	def getCreateReleaseURL(self):
 		return url_for("packages.create_release",
 				author=self.author.username, name=self.name)
@@ -1259,16 +1263,10 @@ class PackageRelease(db.Model):
 			raise Exception("Permission {} is not related to releases".format(perm.name))
 
 
-# class PackageReview(db.Model):
-# 	id         = db.Column(db.Integer, primary_key=True)
-# 	package_id = db.Column(db.Integer, db.ForeignKey("package.id"))
-# 	thread_id  = db.Column(db.Integer, db.ForeignKey("thread.id"), nullable=False)
-# 	recommend  = db.Column(db.Boolean, nullable=False, default=True)
-
-
 class PackageScreenshot(db.Model):
 	id         = db.Column(db.Integer, primary_key=True)
 	package_id = db.Column(db.Integer, db.ForeignKey("package.id"))
+	order      = db.Column(db.Integer, nullable=False, default=0)
 	title      = db.Column(db.String(100), nullable=False)
 	url        = db.Column(db.String(100), nullable=False)
 	approved   = db.Column(db.Boolean, nullable=False, default=False)

app/scss/components.scss

@@ -32,14 +32,14 @@
 .bulletselector input {
 	border: none;
 	border-radius: 0;
-    -moz-border-radius: 0;
+	-moz-border-radius: 0;
 	box-shadow: none;
 	-moz-box-shadow: none;
 	-webkit-box-shadow: none;
 	width: auto;
 	min-width: 50px;
 	float: left;
-    padding: 4px 0;
+	padding: 4px 0;
 	white-space: nowrap;
 	background: transparent;
 }
@@ -122,3 +122,7 @@
 	background-color: #222 !important;
 	color: white !important;
 }
+
+.sortable {
+	user-select: none;
+}

app/templates/base.html

@@ -7,7 +7,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>{% block title %}title{% endblock %} - {{ config.USER_APP_NAME }}</title>
 	<link rel="stylesheet" type="text/css" href="/static/bootstrap.css">
-	<link rel="stylesheet" type="text/css" href="/static/custom.css?v=15">
+	<link rel="stylesheet" type="text/css" href="/static/custom.css?v=16">
 	<link rel="search" type="application/opensearchdescription+xml" href="/static/opensearch.xml" title="ContentDB" />
 	<link rel="shortcut icon" href="/favicon-16.png" sizes="16x16">
 	<link rel="icon" href="/favicon-128.png" sizes="128x128">

app/templates/packages/screenshots.html

@@ -0,0 +1,73 @@
+{% extends "base.html" %}
+
+{% block title %}
+	Screenshots | {{ package.title }}
+{% endblock %}
+
+{% block content %}
+	<h1 class="mb-5"><a href="{{ package.getDetailsURL() }}">{{ package.title }}</a></h1>
+
+	{% if package.checkPerm(current_user, "ADD_SCREENSHOTS") %}
+		<a href="{{ package.getNewScreenshotURL() }}" class="btn btn-primary float-right">
+			{{ _("Add Image") }}
+		</a>
+	{% endif %}
+	<h2 class="mt-0">Screenshots</h2>
+
+	<ul class="list-group sortable">
+		{% for ss in package.screenshots %}
+			{% if ss.approved or package.checkPerm(current_user, "ADD_SCREENSHOTS") %}
+				<li class="list-group-item" data-id="{{ ss.id }}">
+					<div class="row">
+						<div class="col-auto text-muted pr-2">
+							<i class="fas fa-bars"></i>
+						</div>
+						<div class="col-auto">
+							<img class="img-fluid" style="max-height: 64px;"
+									src="{{ ss.getThumbnailURL() }}" alt="{{ ss.title }}" />
+						</div>
+						<span class="col">
+							{{ ss.title }}
+						</span>
+						<div class="col-auto text-right">
+							<a class="btn btn-sm btn-primary" href="{{ ss.getEditURL() }}">
+								<i class="fas fa-edit"></i>
+							</a>
+						</div>
+					</div>
+				</li>
+			{% endif %}
+		{% endfor %}
+	</ul>
+
+	<form action="" method="POST" class="form mt-4" role="form">
+		<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+		<input type="hidden" name="order" value="" />
+		<input type="submit" value="{{ _("Update Order") }}" class="btn btn-primary">
+	</form>
+
+	<noscript>
+		<p class="alert alert-warning mt-5">
+			{{ _("Reordering requires JavaScript.") }}
+		</p>
+	</noscript>
+{% endblock %}
+
+{% block scriptextra %}
+	<script src="/static/jquery-ui.min.js"></script>
+	<script>
+		function update() {
+			const elements = Array.from(document.getElementsByClassName("sortable")[0].children);
+			const ids = elements.map(x => x.dataset.id).filter(x => x);
+			$("input[name='order']").val(ids.join(","))
+		}
+
+		update();
+
+		$(function() {
+			$(".sortable").sortable({
+				update: update
+			});
+		});
+	</script>
+{% endblock %}

app/templates/packages/view.html

@@ -380,23 +380,23 @@
 			{% endif %}
 		</aside>
 
+		{% if package.checkPerm(current_user, "ADD_SCREENSHOTS") %}
+			<a href="{{ package.getEditScreenshotsURL() }}" class="btn btn-primary float-right">
+				<i class="fas fa-edit"></i>
+				Edit
+			</a>
+		{% endif %}
+
 		<ul class="screenshot_list mb-4">
 			{% for ss in package.screenshots %}
 				{% if ss.approved or package.checkPerm(current_user, "ADD_SCREENSHOTS") %}
 					<li>
-						<a href="{% if package.checkPerm(current_user, 'ADD_SCREENSHOTS') %}{{ ss.getEditURL() }}{% else %}{{ ss.url }}{% endif %}">
+						<a href="{{ ss.url }}">
 							<img src="{{ ss.getThumbnailURL() }}" alt="{{ ss.title }}" />
 						</a>
 					</li>
 				{% endif %}
 			{% endfor %}
-			{% if package.checkPerm(current_user, "EDIT_PACKAGE") %}
-				<li>
-					<a href="{{ package.getNewScreenshotURL() }}">
-						<div class="fas fa-plus screenshot-add"></div>
-					</a>
-				</li>
-			{% endif %}
 		</ul>
 
 		{{ package.desc | markdown }}

migrations/versions/e1bf78a597a2_.py

@@ -0,0 +1,26 @@
+"""empty message
+
+Revision ID: e1bf78a597a2
+Revises: 06d23947e7ef
+Create Date: 2020-12-06 03:16:59.988464
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision = 'e1bf78a597a2'
+down_revision = '06d23947e7ef'
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    op.add_column('package_screenshot', sa.Column('order', sa.Integer(), nullable=True))
+    op.execute("""UPDATE package_screenshot SET "order" = id""")
+    op.alter_column('package_screenshot', 'order', nullable=False)
+
+
+def downgrade():
+    op.drop_column('package_screenshot', 'order')