Generic implementation for the editing of show orders via drag and drop

ts/WoltLabSuite/Core/Api/GetObject.ts

@@ -0,0 +1,24 @@
+/**
+ * Sends a get request to the given endpoint.
+ *
+ * @author Marcel Werk
+ * @copyright 2001-2025 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.2
+ * @woltlabExcludeBundle tiny
+ */
+
+import { prepareRequest } from "WoltLabSuite/Core/Ajax/Backend";
+import { ApiResult, apiResultFromError, apiResultFromValue } from "./Result";
+
+export async function getObject<T = unknown>(endpoint: string): Promise<ApiResult<T>> {
+  let response: T;
+
+  try {
+    response = (await prepareRequest(endpoint).get().fetchAsJson()) as T;
+  } catch (e) {
+    return apiResultFromError(e);
+  }
+
+  return apiResultFromValue(response);
+}

ts/WoltLabSuite/Core/Component/ChangeShowOrder.ts

@@ -0,0 +1,82 @@
+/**
+ * Handles the change of the show order of elements.
+ *
+ * @author Marcel Werk
+ * @copyright 2001-2025 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.2
+ */
+
+import { getObject } from "../Api/GetObject";
+import { postObject } from "../Api/PostObject";
+import { promiseMutex } from "../Helper/PromiseMutex";
+import { getPhrase } from "../Language";
+import { dialogFactory } from "./Dialog";
+import Sortable from "sortablejs";
+import { showDefaultSuccessSnackbar } from "./Snackbar";
+
+type Item = {
+  id: number;
+  label: string;
+};
+
+async function showDialog(endpoint: string): Promise<void> {
+  const items = await getItems(endpoint);
+
+  const dialog = dialogFactory().fromHtml(getHtml(items)).asPrompt();
+  dialog.show(getPhrase("wcf.global.changeShowOrder"));
+
+  const sortable = new Sortable(dialog.content.querySelector(".sortableList")!, {
+    direction: "vertical",
+    animation: 150,
+    fallbackOnBody: true,
+    dataIdAttr: "data-object-id",
+    draggable: "li",
+    handle: ".sortableList__handle",
+  });
+
+  dialog.addEventListener("primary", () => {
+    void saveItems(endpoint, sortable.toArray().map(Number)).then(() => {
+      showDefaultSuccessSnackbar().addEventListener("snackbar:close", () => {
+        window.location.reload();
+      });
+    });
+  });
+}
+
+async function getItems(endpoint: string): Promise<Item[]> {
+  return (await getObject<Item[]>(`${window.WSC_RPC_API_URL}${endpoint}`)).unwrap();
+}
+
+async function saveItems(endpoint: string, values: number[]): Promise<void> {
+  await postObject(`${window.WSC_RPC_API_URL}${endpoint}`, { values });
+}
+
+function getHtml(items: Item[]): string {
+  const list = document.createElement("ol");
+  list.classList.add("sortableList");
+
+  items.forEach((item) => {
+    const listItem = document.createElement("li");
+    listItem.dataset.objectId = item.id.toString();
+    listItem.textContent = item.label;
+
+    const icon = document.createElement("fa-icon");
+    icon.setIcon("up-down");
+    const handle = document.createElement("span");
+    handle.append(icon);
+    handle.classList.add("sortableList__handle");
+    listItem.prepend(handle);
+
+    list.append(listItem);
+  });
+
+  return list.outerHTML;
+}
+
+export function setup(button: HTMLElement, endpoint: string): void {
+  button.addEventListener(
+    "click",
+    promiseMutex(() => showDialog(endpoint)),
+  );
+}

wcfsetup/install/files/acp/templates/labelGroupAdd.tpl

@@ -23,6 +23,7 @@
 	<nav class="contentHeaderNavigation">
 		<ul>
 			{if $action == 'edit'}
+				<li><button type="button" class="button jsChangeShowOrder">{icon name='up-down'} <span>{lang}wcf.global.changeShowOrder{/lang}</span></a></li>
 				<li><a href="{link controller='LabelList' id=$groupID}{/link}" class="button">{icon name='list'} <span>{lang}wcf.acp.label.list{/lang}</span></a></li>
 			{/if}
 			<li><a href="{link controller='LabelGroupList'}{/link}" class="button">{icon name='list'} <span>{lang}wcf.acp.label.group.list{/lang}</span></a></li>
@@ -123,4 +124,15 @@
 	</div>
 </form>
 
+<script data-relocate="true">
+	require(["WoltLabSuite/Core/Component/ChangeShowOrder"], ({ setup }) => {
+		{jsphrase name='wcf.global.changeShowOrder'}
+
+		setup(
+			document.querySelector('.jsChangeShowOrder'),
+			'core/labels/groups/{$labelGroup->groupID}/labels/show-order'
+		);
+	});
+</script>
+
 {include file='footer'}

wcfsetup/install/files/acp/templates/labelGroupList.tpl

@@ -7,6 +7,9 @@
 
 	<nav class="contentHeaderNavigation">
 		<ul>
+			{if $gridView->countRows() > 1}
+				<li><button type="button" class="button jsChangeShowOrder">{icon name='up-down'} <span>{lang}wcf.global.changeShowOrder{/lang}</span></a></li>
+			{/if}
 			<li><a href="{link controller='LabelGroupAdd'}{/link}" class="button">{icon name='plus'} <span>{lang}wcf.acp.label.group.add{/lang}</span></a></li>
 
 			{event name='contentHeaderNavigation'}
@@ -18,4 +21,17 @@
 	{unsafe:$gridView->render()}
 </div>
 
+{if $gridView->countRows() > 1}
+	<script data-relocate="true">
+		require(["WoltLabSuite/Core/Component/ChangeShowOrder"], ({ setup }) => {
+			{jsphrase name='wcf.global.changeShowOrder'}
+
+			setup(
+				document.querySelector('.jsChangeShowOrder'),
+				'core/labels/groups/show-order'
+			);
+		});
+	</script>
+{/if}
+
 {include file='footer'}

wcfsetup/install/files/lib/bootstrap/com.woltlab.wcf.php

@@ -187,7 +187,11 @@ static function (\wcf\event\endpoint\ControllerCollecting $event) {
             $event->register(new \wcf\system\endpoint\controller\core\languages\EnableLanguage());
             $event->register(new \wcf\system\endpoint\controller\core\languages\SetAsDefaultLanguage());
             $event->register(new \wcf\system\endpoint\controller\core\languages\items\DeleteItem());
+            $event->register(new \wcf\system\endpoint\controller\core\labels\groups\ChangeLabelShowOrder());
+            $event->register(new \wcf\system\endpoint\controller\core\labels\groups\ChangeShowOrder());
             $event->register(new \wcf\system\endpoint\controller\core\labels\groups\DeleteGroup());
+            $event->register(new \wcf\system\endpoint\controller\core\labels\groups\GetLabelShowOrder());
+            $event->register(new \wcf\system\endpoint\controller\core\labels\groups\GetShowOrder());
             $event->register(new \wcf\system\endpoint\controller\core\pages\DeletePage());
             $event->register(new \wcf\system\endpoint\controller\core\pages\DisablePage());
             $event->register(new \wcf\system\endpoint\controller\core\pages\EnablePage());

wcfsetup/install/files/lib/system/endpoint/controller/core/labels/groups/ChangeLabelShowOrder.class.php

@@ -0,0 +1,67 @@
+<?php
+
+namespace wcf\system\endpoint\controller\core\labels\groups;
+
+use Laminas\Diactoros\Response\JsonResponse;
+use Psr\Http\Message\ResponseInterface;
+use Psr\Http\Message\ServerRequestInterface;
+use wcf\data\label\group\LabelGroup;
+use wcf\data\label\Label;
+use wcf\data\label\LabelEditor;
+use wcf\http\Helper;
+use wcf\system\endpoint\IController;
+use wcf\system\endpoint\PostRequest;
+use wcf\system\label\LabelHandler;
+use wcf\system\showOrder\ShowOrderHandler;
+use wcf\system\showOrder\ShowOrderItem;
+use wcf\system\WCF;
+
+/**
+ * API endpoint for changing the show order of the labels in a label group.
+ *
+ * @author      Marcel Werk
+ * @copyright   2001-2025 WoltLab GmbH
+ * @license     GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since       6.2
+ */
+#[PostRequest('/core/labels/groups/{id:\d+}/labels/show-order')]
+final class ChangeLabelShowOrder implements IController
+{
+    public function __invoke(ServerRequestInterface $request, array $variables): ResponseInterface
+    {
+        WCF::getSession()->checkPermissions(['admin.content.label.canManageLabel']);
+
+        $labelGroup = Helper::fetchObjectFromRequestParameter($variables['id'], LabelGroup::class);
+        $items = \array_map(
+            static fn(Label $label) => new ShowOrderItem($label->labelID, $label->getTitle()),
+            LabelHandler::getInstance()->getLabelGroup($labelGroup->groupID)->getLabels()
+        );
+
+        $sortedItems = (new ShowOrderHandler($items))->getSortedItemsFromRequest($request);
+        $this->saveShowOrder($sortedItems);
+
+        return new JsonResponse([]);
+    }
+
+    /**
+     * @param list<ShowOrderItem> $items
+     */
+    private function saveShowOrder(array $items): void
+    {
+        $sql = "UPDATE  wcf1_label
+                SET     showOrder = ?
+                WHERE   labelID = ?";
+        $statement = WCF::getDB()->prepare($sql);
+
+        WCF::getDB()->beginTransaction();
+        for ($i = 0, $length = \count($items); $i < $length; $i++) {
+            $statement->execute([
+                $i + 1,
+                $items[$i]->id,
+            ]);
+        }
+        WCF::getDB()->commitTransaction();
+
+        LabelEditor::resetCache();
+    }
+}

wcfsetup/install/files/lib/system/endpoint/controller/core/labels/groups/ChangeShowOrder.class.php

@@ -0,0 +1,60 @@
+<?php
+
+namespace wcf\system\endpoint\controller\core\labels\groups;
+
+use Laminas\Diactoros\Response\JsonResponse;
+use Psr\Http\Message\ResponseInterface;
+use Psr\Http\Message\ServerRequestInterface;
+use wcf\data\label\group\ViewableLabelGroup;
+use wcf\system\endpoint\IController;
+use wcf\system\endpoint\PostRequest;
+use wcf\system\label\LabelHandler;
+use wcf\system\showOrder\ShowOrderHandler;
+use wcf\system\showOrder\ShowOrderItem;
+use wcf\system\WCF;
+
+/**
+ * API endpoint for changing the show order of label groups.
+ *
+ * @author      Marcel Werk
+ * @copyright   2001-2025 WoltLab GmbH
+ * @license     GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since       6.2
+ */
+#[PostRequest('/core/labels/groups/show-order')]
+final class ChangeShowOrder implements IController
+{
+    public function __invoke(ServerRequestInterface $request, array $variables): ResponseInterface
+    {
+        WCF::getSession()->checkPermissions(['admin.content.label.canManageLabel']);
+
+        $items = \array_map(
+            static fn(ViewableLabelGroup $labelGroup) => new ShowOrderItem($labelGroup->groupID, $labelGroup->getTitle()),
+            LabelHandler::getInstance()->getLabelGroups()
+        );
+
+        $sortedItems = (new ShowOrderHandler($items))->getSortedItemsFromRequest($request);
+        $this->saveShowOrder($sortedItems);
+
+        return new JsonResponse([]);
+    }
+
+    /**
+     * @param list<ShowOrderItem> $items
+     */
+    private function saveShowOrder(array $items): void
+    {
+        WCF::getDB()->beginTransaction();
+        $sql = "UPDATE  wcf1_label_group
+                SET     showOrder = ?
+                WHERE   groupID = ?";
+        $statement = WCF::getDB()->prepare($sql);
+        for ($i = 0, $length = \count($items); $i < $length; $i++) {
+            $statement->execute([
+                $i + 1,
+                $items[$i]->id,
+            ]);
+        }
+        WCF::getDB()->commitTransaction();
+    }
+}