From 83037d0b706acef0c46582a71d2cc6edf985b7e0 Mon Sep 17 00:00:00 2001
From: Juned KH <kjuned007@gmail.com>
Date: Fri, 6 Dec 2024 17:43:12 +0530
Subject: [PATCH] Folder rename implemented. fix some ui issue in web page add
 invert select and select everything button.

---
 web/templates/page.html | 110 +++++++++++++++++++++++++++++++++++++---
 web/wserver.py          |   7 ++-
 2 files changed, 109 insertions(+), 8 deletions(-)

diff --git a/web/templates/page.html b/web/templates/page.html
index 749f1fc4203..4483900b6dc 100644
--- a/web/templates/page.html
+++ b/web/templates/page.html
@@ -312,6 +312,7 @@
             display: flex;
             flex-direction: column;
             flex-grow: 1;
+            min-width: 0;
         }
 
         .file-info-row {
@@ -340,6 +341,12 @@
             justify-content: center;
             width: 40px;
         }
+
+        .file-name {
+            word-break: break-word;
+            max-width: 100%;
+            overflow-wrap: break-word;
+        }
     </style>
 </head>
 
@@ -372,10 +379,20 @@ <h2 class="text-xl font-bold mb-4">Enter PIN</h2>
         </div>
 
         <div id="fileManager" class="card p-6 hidden">
-            <div class="flex justify-between items-center mb-4">
-                <button id="selectAllBtn" class="btn btn-primary">Select
-                    All</button>
-                <button id="submitBtn" class="btn btn-primary">Submit</button>
+            <div class="flex flex-wrap justify-between items-start mb-4">
+                <div class="flex flex-col items-center mr-2 mb-2">
+                    <button id="selectAllBtn" class="btn btn-primary">Select All</button>
+                    <span class="text-xs mt-1">in this folder</span>
+                </div>
+                <div class="flex flex-col items-center mr-2 mb-2">
+                    <button id="invertSelectionBtn" class="btn btn-primary">Invert Selection</button>
+                    <span class="text-xs mt-1">in this folder</span>
+                </div>
+                <div class="flex flex-col items-center mr-2 mb-2">
+                    <button id="selectEverythingBtn" class="btn btn-primary">Select Everything</button>
+                    <span class="text-xs mt-1">all files</span>
+                </div>
+                <button id="submitBtn" class="btn btn-primary mb-2">Submit</button>
             </div>
             <div class="mb-4">
                 <p>Selected files: <span id="selectedCount">0</span> / <span id="totalCount">0</span></p>
@@ -566,10 +583,18 @@ <h2 id="modalTitle" class="text-xl font-bold mb-4"></h2>
                     } else if (areSomeChildrenSelected(node)) {
                         checkbox.indeterminate = true;
                     }
+                    if (allowEdit) {
+                        const editBtn = document.createElement('span');
+                        editBtn.textContent = ' | Edit ✏️';
+                        editBtn.className = 'edit-btn';
+                        sizeInfo.appendChild(editBtn);
+                    }
                 }
 
                 fileTree.appendChild(div);
             });
+            updateSelectAllButtonText();
+            updateSelectEverythingButtonText();
         }
 
         function areAllChildrenSelected(folder) {
@@ -681,18 +706,66 @@ <h2 id="modalTitle" class="text-xl font-bold mb-4"></h2>
         }
 
         function selectAll() {
+            const nodes = currentFolder ? currentFolder.children : files;
+            const allSelected = nodes.every(node => node.type === 'folder' ? areAllChildrenSelected(node) : node.selected);
+            nodes.forEach(node => {
+                if (node.type === 'folder') {
+                    toggleFolder(node, !allSelected);
+                } else {
+                    node.selected = !allSelected;
+                }
+            });
+            updateStats();
+            renderFileTree(nodes);
+            updateSelectAllButtonText();
+        }
+
+        function invertSelection() {
             const nodes = currentFolder ? currentFolder.children : files;
             nodes.forEach(node => {
                 if (node.type === 'folder') {
-                    toggleFolder(node, true);
+                    invertFolderSelection(node);
                 } else {
-                    node.selected = true;
+                    node.selected = !node.selected;
                 }
             });
             updateStats();
             renderFileTree(nodes);
         }
 
+        function invertFolderSelection(folder) {
+            folder.selected = !folder.selected;
+            if (folder.children) {
+                folder.children.forEach(child => {
+                    if (child.type === 'folder') {
+                        invertFolderSelection(child);
+                    } else {
+                        child.selected = !child.selected;
+                    }
+                });
+            }
+        }
+
+        function selectEverything() {
+            const allSelected = files.every(node => node.type === 'folder' ? areAllChildrenSelected(node) : node.selected);
+            function recursiveSelect(nodes, select) {
+                nodes.forEach(node => {
+                    if (node.type === 'folder') {
+                        node.selected = select;
+                        if (node.children) {
+                            recursiveSelect(node.children, select);
+                        }
+                    } else {
+                        node.selected = select;
+                    }
+                });
+            }
+            recursiveSelect(files, !allSelected);
+            updateStats();
+            renderFileTree(currentFolder ? currentFolder.children : files);
+            updateSelectEverythingButtonText();
+        }
+
         function getFullPath(node) {
             const path = [];
             let currentNode = findParent(files[0], node.id);
@@ -704,7 +777,7 @@ <h2 id="modalTitle" class="text-xl font-bold mb-4"></h2>
         }
 
         function openEditFileNameModal(node) {
-            modalTitle.textContent = 'Edit File Name';
+            modalTitle.textContent = `Edit ${node.type === 'folder' ? 'Folder' : 'File'} Name`;
             modalBody.innerHTML = `
                 <input type="text" id="editNameInput" class="edit-name-input" value="${node.name}">
             `;
@@ -725,6 +798,7 @@ <h2 id="modalTitle" class="text-xl font-bold mb-4"></h2>
                     const body = {
                         old_path: fullPath ? `${fullPath}/${node.name}` : node.name,
                         new_path: fullPath ? `${fullPath}/${newName}` : newName,
+                        type: node.type,
                     };
                     fetch(requestUrl, {
                         'method': 'POST',
@@ -833,6 +907,8 @@ <h2 id="modalTitle" class="text-xl font-bold mb-4"></h2>
                                 fileManager.classList.remove('hidden');
                                 renderFileTree(files);
                                 updateStats();
+                                updateSelectAllButtonText();
+                                updateSelectEverythingButtonText();
                             }, 500)
                         }
                     });
@@ -850,13 +926,33 @@ <h2 id="modalTitle" class="text-xl font-bold mb-4"></h2>
             });
         });
         themeToggle.addEventListener('change', toggleTheme);
+        const invertSelectionBtn = document.getElementById('invertSelectionBtn');
+        const selectEverythingBtn = document.getElementById('selectEverythingBtn');
+
+        invertSelectionBtn.addEventListener('click', invertSelection);
+        selectEverythingBtn.addEventListener('click', selectEverything);
+
         selectAllBtn.addEventListener('click', selectAll);
+        selectEverythingBtn.addEventListener('click', selectEverything);
         submitBtn.addEventListener('click', submitData);
+
         reusableModal.addEventListener('click', (event) => {
             if (event.target === reusableModal) {
                 event.stopPropagation();
             }
         });
+
+        function updateSelectAllButtonText() {
+            const nodes = currentFolder ? currentFolder.children : files;
+            const allSelected = nodes.every(node => node.type === 'folder' ? areAllChildrenSelected(node) : node.selected);
+            selectAllBtn.textContent = allSelected ? 'Deselect All' : 'Select All';
+        }
+
+        function updateSelectEverythingButtonText() {
+            const allSelected = selectedCount === totalCount;
+            selectEverythingBtn.textContent = allSelected ? 'Deselect Everything' : 'Select Everything';
+        }
+
         loadThemePreference();
     </script>
 </body>
diff --git a/web/wserver.py b/web/wserver.py
index 16e14ff2419..8bae61b1049 100644
--- a/web/wserver.py
+++ b/web/wserver.py
@@ -179,7 +179,12 @@ def handle_torrent():
 
 def handle_rename(gid, data):
     try:
-        qbittorrent_client.torrents_rename_file(torrent_hash=gid, **data)
+        _type = data["type"]
+        del data["type"]
+        if _type == "file":
+            qbittorrent_client.torrents_rename_file(torrent_hash=gid, **data)
+        else:
+            qbittorrent_client.torrents_rename_folder(torrent_hash=gid, **data)
     except NotFound404Error as e:
         raise NotFound404Error from e
     except Exception as e: