Implement sorting for attachments (#6259)

* Implement sorting for attachments

* Simplify and fix the attachment sorting

---------

Co-authored-by: Alexander Ebert <ebert@woltlab.com>

Author: Cyperghost

ts/WoltLabSuite/Core/Component/Attachment/List.ts

@@ -3,6 +3,9 @@ import { CkeditorDropEvent } from "../File/Upload";
 import { createAttachmentFromFile } from "./Entry";
 import { listenToCkeditor } from "../Ckeditor/Event";
 import { getTabMenu } from "../Message/MessageTabMenu";
+import Sortable from "sortablejs";
+import { promiseMutex } from "WoltLabSuite/Core/Helper/PromiseMutex";
+import { postObject } from "WoltLabSuite/Core/Api/PostObject";
 
 function fileToAttachment(fileList: HTMLElement, file: WoltlabCoreFileElement, editor: HTMLElement): void {
   fileList.append(createAttachmentFromFile(file, editor));
@@ -44,6 +47,36 @@ export function setup(editorId: string): void {
     uploadButton.insertAdjacentElement("afterend", fileList);
   }
 
+  new Sortable(fileList, {
+    direction: "vertical",
+    dragClass: ".fileList__item",
+    ghostClass: "fileList__item--ghost",
+    handle: ".fileList__item__file",
+    animation: 150,
+    fallbackOnBody: true,
+    onChange(event) {
+      const file = event.item.querySelector("woltlab-core-file")!;
+      const thumbnail = file.thumbnails.find((thumbnail) => thumbnail.identifier === "tiny");
+      if (thumbnail !== undefined) {
+        file.thumbnail = thumbnail;
+      } else if (file.link) {
+        file.previewUrl = file.link;
+      }
+    },
+    onEnd: promiseMutex(async (event) => {
+      if (event.oldIndex === event.newIndex) {
+        return;
+      }
+
+      const attachmentIDs = Array.from(fileList.querySelectorAll("woltlab-core-file"))
+        .map((file) => file.data?.attachmentID)
+        .filter((attachmentID) => attachmentID !== undefined);
+      const context = JSON.parse(uploadButton.dataset.context!);
+
+      await postObject(`${window.WSC_RPC_API_URL}core/attachments/show-order`, { ...context, attachmentIDs });
+    }),
+  });
+
   let showOrder = -1;
   uploadButton.addEventListener("uploadStart", (event: CustomEvent<WoltlabCoreFileElement>) => {
     fileToAttachment(fileList, event.detail, editor);

wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/List.js

@@ -238,6 +238,7 @@ static function (\wcf\event\endpoint\ControllerCollecting $event) {
             $event->register(new \wcf\system\endpoint\controller\core\smilies\ChangeShowOrder());
             $event->register(new \wcf\system\endpoint\controller\core\smilies\categories\GetSmileyShowOrder());
             $event->register(new \wcf\system\endpoint\controller\core\smilies\categories\ChangeSmileyShowOrder());
+            $event->register(new \wcf\system\endpoint\controller\core\attachments\ChangeShowOrder());
         }
     );
 

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

@@ -0,0 +1,100 @@
+<?php
+
+namespace wcf\system\endpoint\controller\core\attachments;
+
+use Laminas\Diactoros\Response\JsonResponse;
+use Psr\Http\Message\ResponseInterface;
+use Psr\Http\Message\ServerRequestInterface;
+use wcf\http\Helper;
+use wcf\system\attachment\AttachmentHandler;
+use wcf\system\endpoint\IController;
+use wcf\system\endpoint\PostRequest;
+use wcf\system\exception\PermissionDeniedException;
+use wcf\system\WCF;
+
+/**
+ * API endpoint for changing the show order of attachments.
+ *
+ * @author Olaf Braun
+ * @copyright 2001-2025 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.2
+ */
+#[PostRequest('/core/attachments/show-order')]
+final class ChangeShowOrder implements IController
+{
+    #[\Override]
+    public function __invoke(ServerRequestInterface $request, array $variables): ResponseInterface
+    {
+        $parameters = Helper::mapApiParameters($request, ChangeShowOrderParameters::class);
+
+        $attachmentHandler = new AttachmentHandler(
+            $parameters->objectType,
+            $parameters->objectID,
+            $parameters->tmpHash,
+            $parameters->parentObjectID,
+        );
+
+        $this->assertAttachmentsCanBeSorted($attachmentHandler, $parameters->attachmentIDs);
+
+        $this->saveShowOrder($parameters->attachmentIDs);
+
+        return new JsonResponse([]);
+    }
+
+    /**
+     * @param list<int> $attachmentIDs
+     */
+    private function assertAttachmentsCanBeSorted(AttachmentHandler $attachmentHandler, array $attachmentIDs): void
+    {
+        if (!$attachmentHandler->canUpload()) {
+            throw new PermissionDeniedException();
+        }
+
+        $attachmentList = $attachmentHandler->getAttachmentList();
+        foreach ($attachmentIDs as $attachmentID) {
+            if (!\in_array($attachmentID, $attachmentList->getObjectIDs(), true)) {
+                throw new PermissionDeniedException();
+            }
+        }
+    }
+
+    /**
+     * @param list<int> $attachmentIDs
+     */
+    private function saveShowOrder(array $attachmentIDs): void
+    {
+        WCF::getDB()->beginTransaction();
+
+        $sql = "UPDATE wcf1_attachment
+                SET    showOrder = ?
+                WHERE  attachmentID = ?";
+        $statement = WCF::getDB()->prepare($sql);
+
+        foreach ($attachmentIDs as $showOrder => $attachmentID) {
+            $statement->execute([
+                $showOrder + 1,
+                $attachmentID,
+            ]);
+        }
+
+        WCF::getDB()->commitTransaction();
+    }
+}
+
+/** @internal */
+final class ChangeShowOrderParameters
+{
+    public function __construct(
+        /** @var non-empty-string */
+        public readonly string $objectType,
+        /** @var non-negative-int */
+        public readonly int $objectID,
+        /** @var non-negative-int */
+        public readonly int $parentObjectID,
+        public readonly string $tmpHash,
+        /** @var list<positive-int> */
+        public readonly array $attachmentIDs,
+    ) {
+    }
+}

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

@@ -39,6 +39,10 @@
 	color: var(--wcfStatusErrorText);
 }
 
+.fileList__item--ghost {
+	opacity: 0.54;
+}
+
 .fileList__item .innerError {
 	grid-area: error;
 }
@@ -106,3 +110,9 @@ woltlab-core-file img {
 .woltlabCoreFileUpload__input::-webkit-file-upload-button {
 	cursor: pointer;
 }
+
+@media (hover: hover) {
+	.fileList__item__file:hover {
+		cursor: move;
+	}
+}