From 8afba9248f036abb8bf1bda8e10ae490c3bcbea1 Mon Sep 17 00:00:00 2001
From: Cyperghost <olaf_schmitz_1@t-online.de>
Date: Wed, 27 Nov 2024 14:36:07 +0100
Subject: [PATCH] Store Sortable objects

---
 ts/WoltLabSuite/Core/Ui/Sortable/List.ts      | 48 +++++++++++++++----
 .../js/WoltLabSuite/Core/Ui/Sortable/List.js  | 33 +++++++++----
 2 files changed, 64 insertions(+), 17 deletions(-)

diff --git a/ts/WoltLabSuite/Core/Ui/Sortable/List.ts b/ts/WoltLabSuite/Core/Ui/Sortable/List.ts
index 89cc63a1f3..68ba0dff4f 100644
--- a/ts/WoltLabSuite/Core/Ui/Sortable/List.ts
+++ b/ts/WoltLabSuite/Core/Ui/Sortable/List.ts
@@ -43,6 +43,7 @@ function getNestingLevel(element: HTMLElement, container?: HTMLElement): number
 class UiSortableList {
   protected readonly _options: SortableListOptions;
   readonly #container: HTMLElement | null;
+  readonly #sortables = new Map<number, Sortable>();
 
   /**
    * Initializes the sortable list controller.
@@ -59,7 +60,7 @@ class UiSortableList {
           animation: 150,
           swapThreshold: 0.65,
           fallbackOnBody: true,
-          dataIdAttr: "object-id",
+          dataIdAttr: "data-object-id",
           chosenClass: "sortablePlaceholder",
           ghostClass: "",
           draggable: "li",
@@ -140,18 +141,47 @@ class UiSortableList {
         this._options.toleranceElement = undefined;
       }
 
-      new Sortable(sortableList, {
-        direction: "vertical",
-        ...this._options.options,
-      });
+      this.#sortables.set(
+        0,
+        new Sortable(sortableList, {
+          direction: "vertical",
+          ...this._options.options,
+        }),
+      );
     } else {
       this.#container.querySelectorAll(".sortableList").forEach((list: HTMLElement) => {
-        new Sortable(list, {
-          group: "nested",
-          ...this._options.options,
-        });
+        this.#sortables.set(
+          parseInt(list.dataset.objectId!, 10),
+          new Sortable(list, {
+            group: "nested",
+            ...this._options.options,
+          }),
+        );
       });
     }
+
+    if (this._options.className) {
+      let formSubmit = this.#container.querySelector(".formSubmit");
+      if (!formSubmit) {
+        formSubmit = this.#container.nextElementSibling;
+      }
+      if (!formSubmit) {
+        console.debug("[UiSortableList] Unable to find form submit for saving, aborting.");
+        return;
+      }
+
+      formSubmit.querySelector('button[data-type="submit"]')?.addEventListener("click", () => {
+        this.save();
+      });
+    }
+  }
+
+  public save(): void {
+    if (!this._options.className) {
+      return;
+    }
+
+    // TODO save postions and send them to server
   }
 }
 
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Sortable/List.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Sortable/List.js
index e95549caa8..ef4a8a5edd 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Sortable/List.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Sortable/List.js
@@ -23,6 +23,7 @@ define(["require", "exports", "tslib", "../../Core", "sortablejs"], function (re
     class UiSortableList {
         _options;
         #container;
+        #sortables = new Map();
         /**
          * Initializes the sortable list controller.
          */
@@ -37,7 +38,7 @@ define(["require", "exports", "tslib", "../../Core", "sortablejs"], function (re
                     animation: 150,
                     swapThreshold: 0.65,
                     fallbackOnBody: true,
-                    dataIdAttr: "object-id",
+                    dataIdAttr: "data-object-id",
                     chosenClass: "sortablePlaceholder",
                     ghostClass: "",
                     draggable: "li",
@@ -69,13 +70,10 @@ define(["require", "exports", "tslib", "../../Core", "sortablejs"], function (re
                         if (closest && sortablejs_1.default.utils.is(closest, ".sortableNoNesting")) {
                             return false;
                         }
-                        console.log(event.dragged);
                         const levelOfDraggedNode = Math.max(...Array.from(event.dragged.querySelectorAll(".sortableList")).map((list) => {
-                            console.log(list);
                             return getNestingLevel(list, event.dragged);
                         }));
                         if (getNestingLevel(event.to) + levelOfDraggedNode > this._options.maxNestingLevel) {
-                            console.log(`${getNestingLevel(event.to)} + ${levelOfDraggedNode} > ${this._options.maxNestingLevel}`);
                             return false;
                         }
                         return true;
@@ -107,19 +105,38 @@ define(["require", "exports", "tslib", "../../Core", "sortablejs"], function (re
                     this._options.options.draggable = "tr";
                     this._options.toleranceElement = undefined;
                 }
-                new sortablejs_1.default(sortableList, {
+                this.#sortables.set(0, new sortablejs_1.default(sortableList, {
                     direction: "vertical",
                     ...this._options.options,
-                });
+                }));
             }
             else {
                 this.#container.querySelectorAll(".sortableList").forEach((list) => {
-                    new sortablejs_1.default(list, {
+                    this.#sortables.set(parseInt(list.dataset.objectId, 10), new sortablejs_1.default(list, {
                         group: "nested",
                         ...this._options.options,
-                    });
+                    }));
                 });
             }
+            if (this._options.className) {
+                let formSubmit = this.#container.querySelector(".formSubmit");
+                if (!formSubmit) {
+                    formSubmit = this.#container.nextElementSibling;
+                }
+                if (!formSubmit) {
+                    console.debug("[UiSortableList] Unable to find form submit for saving, aborting.");
+                    return;
+                }
+                formSubmit.querySelector('button[data-type="submit"]')?.addEventListener("click", () => {
+                    this.save();
+                });
+            }
+        }
+        save() {
+            if (!this._options.className) {
+                return;
+            }
+            // TODO save postions and send them to server
         }
     }
     return UiSortableList;
-- 
2.20.1