feat: closes #12158, add sortable rewards

convert rewards:list to a sorted set

public/src/admin/extend/rewards.js

@@ -1,10 +1,12 @@
 'use strict';
 
 
-define('admin/extend/rewards', ['alerts'], function (alerts) {
+define('admin/extend/rewards', [
+	'alerts',
+	'jquery-ui/widgets/sortable',
+], function (alerts) {
 	const rewards = {};
 
-
 	let available;
 	let active;
 	let conditions;
@@ -45,6 +47,11 @@ define('admin/extend/rewards', ['alerts'], function (alerts) {
 				btn.addClass('hidden');
 				// send disable api call
 				return false;
+			})
+			.sortable({
+				handle: '[component="sort/handle"]',
+				axis: 'y',
+				zIndex: 9999,
 			});
 
 		$('#new').on('click', newReward);

src/rewards/admin.js

@@ -7,7 +7,7 @@ const utils = require('../utils');
 const rewards = module.exports;
 
 rewards.save = async function (data) {
-	async function save(data) {
+	await Promise.all(data.map(async (data, index) => {
 		if (!Object.keys(data.rewards).length) {
 			return;
 		}
@@ -17,19 +17,17 @@ rewards.save = async function (data) {
 			data.id = await db.incrObjectField('global', 'rewards:id');
 		}
 		await rewards.delete(data);
-		await db.setAdd('rewards:list', data.id);
+		await db.sortedSetAdd('rewards:list', index, data.id);
 		await db.setObject(`rewards:id:${data.id}`, data);
 		await db.setObject(`rewards:id:${data.id}:rewards`, rewardsData);
-	}
+	}));
-
-	await Promise.all(data.map(data => save(data)));
 	await saveConditions(data);
 	return data;
 };
 
 rewards.delete = async function (data) {
 	await Promise.all([
-		db.setRemove('rewards:list', data.id),
+		db.sortedSetRemove('rewards:list', data.id),
 		db.delete(`rewards:id:${data.id}`),
 		db.delete(`rewards:id:${data.id}:rewards`),
 	]);
@@ -61,7 +59,8 @@ async function saveConditions(data) {
 }
 
 async function getActiveRewards() {
-	async function load(id) {
+	const rewardsList = await db.getSortedSetRange('rewards:list', 0, -1);
+	const rewardData = await Promise.all(rewardsList.map(async (id) => {
 		const [main, rewards] = await Promise.all([
 			db.getObject(`rewards:id:${id}`),
 			db.getObject(`rewards:id:${id}:rewards`),
@@ -71,11 +70,7 @@ async function getActiveRewards() {
 			main.rewards = rewards;
 		}
 		return main;
-	}
+	}));
-
-	const rewardsList = await db.getSetMembers('rewards:list');
-	rewardsList.sort((a, b) => a - b);
-	const rewardData = await Promise.all(rewardsList.map(id => load(id)));
 	return rewardData.filter(Boolean);
 }
 

src/upgrades/3.6.0/rewards_zsets.js

@@ -0,0 +1,22 @@
+/* eslint-disable no-await-in-loop */
+
+'use strict';
+
+const db = require('../../database');
+
+module.exports = {
+	name: 'Convert rewards:list to a sorted set',
+	timestamp: Date.UTC(2023, 10, 10),
+	method: async function () {
+		const rewards = await db.getSetMembers('rewards:list');
+		if (rewards.length) {
+			rewards.sort((a, b) => a - b);
+			await db.delete('rewards:list');
+			await db.sortedSetAdd(
+				'rewards:list',
+				rewards.map((id, index) => index),
+				rewards.map(id => id)
+			);
+		}
+	},
+};

src/views/admin/extend/rewards.tpl

@@ -16,6 +16,9 @@
 		<ul id="active" class="list-unstyled p-0 m-0">
 			{{{ each active }}}
 			<li data-rid="{active.rid}" data-id="{active.id}">
+				<div class="d-flex gap-1 align-items-start">
+					<a href="#" component="sort/handle" class="btn btn-light btn-sm d-none d-md-block" style="cursor:grab;"><i class="fa fa-arrows-up-down text-muted"></i></a>
+					<div class="d-flex flex-column flex-grow-1">
 						<div class="d-flex gap-1 mb-3 flex-wrap">
 							<form class="main d-flex gap-1 flex-wrap">
 								<div class="card card-body m-0 if-block border-info border border-2">
@@ -71,6 +74,8 @@
 								<button class="btn btn-light btn-sm text-nowrap delete"><i class="fa fa-trash text-danger"></i> [[admin/extend/rewards:delete]]</button>
 							</div>
 						</div>
+					</div>
+				</div>
 
 				<hr/>
 			</li>