Add shift-click and improved keys multiselect

Author: RobiNN1

assets/js/scripts.js

@@ -144,18 +144,67 @@ if (delete_all) {
     });
 }
 
-const check_all = document.querySelector('.check-all');
-if (check_all) {
-    check_all.addEventListener('change', () => {
-        if (delete_selected) {
-            delete_selected.disabled = check_all.checked !== true;
-        }
+// Check all keys in a table or treeview
+document.addEventListener('change', (e) => {
+    if (!e.target.matches('input[type="checkbox"].check-all')) {
+        return;
+    }
 
-        keys.forEach(key => {
-            key.querySelector('[type="checkbox"]').checked = check_all.checked;
-        });
+    let scope;
+
+    if (e.target.closest('.tree-group')) {
+        const tree_group = e.target.closest('.tree-group');
+        const children = tree_group.querySelector(':scope > .tree-children');
+        scope = children || tree_group;
+    } else {
+        scope = e.target.closest('table') || e.target.closest('.treeview');
+    }
+
+    if (!scope) {
+        return;
+    }
+
+    const checkboxes = scope.querySelectorAll('input[type="checkbox"]:not(.check-all)');
+
+    checkboxes.forEach(cb => {
+        cb.checked = e.target.checked;
+        cb.dispatchEvent(new Event('change', {bubbles: true}));
     });
-}
+});
+
+// Shift-click multi-select
+let last_checked = null;
+document.addEventListener('click', (e) => {
+    if (!e.target.matches('input[type="checkbox"]') || e.target.classList.contains('check-all')) {
+        return;
+    }
+
+    const tree = e.target.closest('.treeview');
+    const table = e.target.closest('table');
+    let checkboxes;
+
+    if (tree) {
+        checkboxes = Array.from(tree.querySelectorAll('.keywrapper input[type="checkbox"]:not(.check-all)'));
+    } else if (table) {
+        checkboxes = Array.from(table.querySelectorAll('input[type="checkbox"]:not(.check-all)'));
+    } else {
+        return;
+    }
+
+    if (e.shiftKey && last_checked) {
+        const start = checkboxes.indexOf(last_checked);
+        const end = checkboxes.indexOf(e.target);
+
+        if (start !== -1 && end !== -1) {
+            for (let i = Math.min(start, end); i <= Math.max(start, end); i++) {
+                checkboxes[i].checked = e.target.checked;
+                checkboxes[i].dispatchEvent(new Event('change', {bubbles: true}));
+            }
+        }
+    }
+
+    last_checked = e.target;
+});
 
 /**
  * Ajax panels

templates/partials/tree_view.twig

@@ -4,13 +4,14 @@
 {% macro render_tree(items, level=0, show_actions, view_key, components) %}
     {% for key, item in items %}
         {% if item.type == 'folder' %}
-            <div class="border-t border-gray-200 dark:border-gray-700" style="--level: {{ level }}">
+            <div class="tree-group border-t border-gray-200 dark:border-gray-700" style="--level: {{ level }}">
                 <div class="flex gap-1 items-center py-1 px-6 hover:bg-gray-50 dark:hover:bg-white/5" style="padding-left: calc({{ level }} * 20px + 1.5rem)">
+                    <div>{{ components.checkbox('check-all') }}</div>
                     <button class="flex gap-1 items-center tree-toggle" data-path="{{ item.path }}">
                         {{ svg('down', 10, '-rotate-90') }}
                         <span class="tree">{{ item.name }}{{ separator }}*</span>
                     </button>
-                    <span class="text-xs text-gray-500 dark:text-gray-400 items-count">({{ item.count }})</span>
+                    <span class="text-xs text-gray-500 dark:text-gray-400 items-count">({{ item.count }} items)</span>
                 </div>
                 <div class="hidden tree-children" data-path="{{ item.path }}">
                     {{ _self.render_tree(item.children, level + 1, show_actions, view_key, components) }}