UI: Refactored CollectionScene.show_collections for easier handling

radicale/web/internal_data/js/scenes/CollectionsScene.js

@@ -135,13 +135,12 @@ export class CollectionsScene {
     }
 
     /**
-     * @param {any[]} collections
+     * @param {Collection[]} collections
      * @param {import("../api/sharing.js").Share[]} shares
-     * @param {boolean} clear_error
      */
-    _show_collections(collections, shares, clear_error) {
+    _sort_collections(collections, shares) {
         collections.sort((a, b) => {
-            const getShare = (col) => (shares || []).find(
+            const getShare = (/** @type {Collection} */ col) => (shares || []).find(
                 s => (s.ShareType === "map") &&
                     decodeURIComponent(s.PathOrToken || "").replace(/\/+$/, "") === decodeURIComponent(col.href || "").replace(/\/+$/, ""));
 
@@ -156,25 +155,35 @@ export class CollectionsScene {
 
             return extract_title(a).localeCompare(extract_title(b));
         });
-
-        /** @type {HTMLElement} */ let navBar = get_element(document, "#logoutview");
-        let heightOfNavBar = navBar.offsetHeight + "px";
-        this._html_scene.style.marginTop = heightOfNavBar;
-        this._html_scene.style.height = "calc(100vh - " + heightOfNavBar + ")";
-
-        if (clear_error) {
-            this._errorHandler.clearError();
     }
 
-        // Clear old nodes
+    /**
+     * Clears all collection nodes from the DOM and resets the nodes array.
+     */
+    _clear_collections_display() {
         this._nodes.forEach(function (node) {
             if (node.parentNode) {
                 node.parentNode.removeChild(node);
             }
         });
         this._nodes = [];
+    }
 
-        collections.forEach((/** @type {Collection} */ collection) => {
+    /**
+     * Sets up the scene layout by adjusting margins based on the navbar height.
+     */
+    _setup_layout() {
+        /** @type {HTMLElement} */ let navBar = get_element(document, "#logoutview");
+        let heightOfNavBar = navBar.offsetHeight + "px";
+        this._html_scene.style.marginTop = heightOfNavBar;
+        this._html_scene.style.height = "calc(100vh - " + heightOfNavBar + ")";
+    }
+
+    /**
+     * @param {Collection} collection
+     * @param {import("../api/sharing.js").Share[]} shares
+     */
+    _render_collection(collection, shares) {
         /** @type {HTMLElement} */ let node = /** @type {HTMLElement} */(this._template.cloneNode(true));
         node.classList.remove("hidden");
         /** @type {HTMLElement} */ let title_form = get_element(node, "[data-name=title]");
@@ -295,6 +304,24 @@ export class CollectionsScene {
         if (this._template.parentNode) {
             this._template.parentNode.insertBefore(node, this._template);
         }
+    }
+
+    /**
+     * @param {Collection[]} collections
+     * @param {import("../api/sharing.js").Share[]} shares
+     * @param {boolean} clear_error
+     */
+    _show_collections(collections, shares, clear_error) {
+        this._setup_layout();
+        if (clear_error) {
+            this._errorHandler.clearError();
+        }
+
+        this._sort_collections(collections, shares);
+        this._clear_collections_display();
+
+        collections.forEach((collection) => {
+            this._render_collection(collection, shares);
         });
     }
 
@@ -317,13 +344,7 @@ export class CollectionsScene {
         this._new_btn.onclick = null;
         this._upload_btn.onclick = null;
         this._incomingshares_btn.onclick = null;
-        // remove collection
+        this._clear_collections_display();
-        this._nodes.forEach(function (node) {
-            if (node.parentNode) {
-                node.parentNode.removeChild(node);
-            }
-        });
-        this._nodes = [];
     }
 
     release() {