UX: Seitenbaum mit Parent-Child-Auswahl und indeterminate Status

contao/templates/be_dummy_copier.html5

@@ -11,6 +11,12 @@
       .dc-section { border: 1px solid #ccc; padding: 1rem; margin-bottom: 1.5rem; border-radius: 4px; }
       .dc-section h3 { margin: 0 0 0.75rem; font-size: 1rem; font-weight: bold; }
       .dc-hint { color: #666; font-size: 0.85rem; margin: 0.25rem 0 0.75rem; }
+      .dc-page-tree { border: 1px solid #ddd; border-radius: 4px; background: #fff; max-height: 360px; overflow: auto; padding: 0.5rem; }
+      .dc-page-tree ul { list-style: none; margin: 0.1rem 0 0.1rem 1.1rem; padding: 0; }
+      .dc-page-tree > ul { margin-left: 0; }
+      .dc-page-tree li { margin: 0.1rem 0; }
+      .dc-page-item { display: flex; align-items: center; gap: 0.45rem; }
+      .dc-page-id { color: #777; font-size: 0.8rem; }
     </style>
 
     <!-- Abschnitt 1: Quell-Seiten -->
@@ -19,16 +25,48 @@
       <p class="dc-hint">Alle Artikel und Inhaltselemente der gewaehlten Seiten werden automatisch mitkopiert (sofern Option "inkl. Content" aktiv ist).</p>
       <p>
         <label>Quell-Seiten (Mehrfachauswahl):<br>
-          <input class="dc-filter" type="text" data-filter-for="sourcePages" placeholder="Seiten filtern...">
+          <input class="dc-filter" type="text" data-filter-for-tree="sourcePages" placeholder="Seiten im Baum filtern...">
           <span class="dc-tools">
-            <button class="dc-button" type="button" data-select-all="sourcePages">Alle</button>
+            <button class="dc-button" type="button" data-check-all="sourcePages">Alle</button>
-            <button class="dc-button" type="button" data-select-none="sourcePages">Keine</button>
+            <button class="dc-button" type="button" data-check-none="sourcePages">Keine</button>
           </span>
-          <select id="sourcePages" name="sourcePages[]" multiple size="12" style="width:100%;">
+          <div class="dc-page-tree" id="sourcePages">
-            <?php foreach (($this->pageChoices ?? []) as $id => $label): ?>
+            <?php
-              <option value="<?= (int) $id; ?>" <?= in_array((int) $id, ($this->selected['sourcePages'] ?? []), true) ? 'selected' : ''; ?>><?= htmlspecialchars((string) $label, ENT_QUOTES, 'UTF-8'); ?></option>
+            $selectedSourcePages = (array) ($this->selected['sourcePages'] ?? []);
-            <?php endforeach; ?>
+
-          </select>
+            $renderNodes = static function (array $nodes) use (&$renderNodes, $selectedSourcePages): void {
+                if ($nodes === []) {
+                    return;
+                }
+
+                echo '<ul>';
+
+                foreach ($nodes as $node) {
+                    $id = (int) ($node['id'] ?? 0);
+                    $label = (string) ($node['label'] ?? ('Seite ' . $id));
+                    $children = (array) ($node['children'] ?? []);
+                    $checked = in_array($id, $selectedSourcePages, true) ? 'checked' : '';
+
+                    echo '<li data-tree-item="sourcePages" data-tree-label="' . htmlspecialchars(strtolower($label), ENT_QUOTES, 'UTF-8') . '">';
+                    echo '<label class="dc-page-item">';
+                    echo '<input type="checkbox" name="sourcePages[]" value="' . $id . '" ' . $checked . '>';
+                    echo '<span>' . htmlspecialchars($label, ENT_QUOTES, 'UTF-8') . '</span>';
+                    echo '<span class="dc-page-id">[ID ' . $id . ']</span>';
+                    echo '</label>';
+
+                    if ($children !== []) {
+                        $renderNodes($children);
+                    }
+
+                    echo '</li>';
+                }
+
+                echo '</ul>';
+            };
+
+            $renderNodes((array) ($this->pageTreeNodes ?? []));
+            ?>
+          </div>
         </label>
       </p>
     </div>
@@ -174,6 +212,87 @@
       (function () {
         function byId(id) { return document.getElementById(id); }
 
+        function childCheckboxesOf(li) {
+          var nested = li.querySelector(':scope > ul');
+          return nested ? nested.querySelectorAll('input[type="checkbox"]') : [];
+        }
+
+        function parentLiOf(li) {
+          var parentUl = li.parentElement;
+          if (!parentUl || parentUl.classList.contains('dc-page-tree')) {
+            return null;
+          }
+
+          var candidate = parentUl.closest('li[data-tree-item="sourcePages"]');
+          return candidate || null;
+        }
+
+        function updateParentState(li) {
+          var children = childCheckboxesOf(li);
+          if (!children.length) {
+            return;
+          }
+
+          var own = li.querySelector(':scope > label input[type="checkbox"]');
+          if (!own) {
+            return;
+          }
+
+          var checkedCount = 0;
+          children.forEach(function (cb) {
+            if (cb.checked) {
+              checkedCount++;
+            }
+          });
+
+          if (checkedCount === 0) {
+            own.checked = false;
+            own.indeterminate = false;
+          } else if (checkedCount === children.length) {
+            own.checked = true;
+            own.indeterminate = false;
+          } else {
+            own.checked = false;
+            own.indeterminate = true;
+          }
+        }
+
+        function cascadeToChildren(li, checked) {
+          childCheckboxesOf(li).forEach(function (cb) {
+            cb.checked = checked;
+            cb.indeterminate = false;
+          });
+        }
+
+        function refreshAllParentStates() {
+          var nodes = Array.prototype.slice.call(document.querySelectorAll('li[data-tree-item="sourcePages"]'));
+          nodes.reverse();
+          nodes.forEach(function (li) {
+            updateParentState(li);
+          });
+        }
+
+        document.querySelectorAll('li[data-tree-item="sourcePages"] > label input[type="checkbox"]').forEach(function (checkbox) {
+          checkbox.addEventListener('change', function () {
+            var li = checkbox.closest('li[data-tree-item="sourcePages"]');
+            if (!li) {
+              return;
+            }
+
+            if (!checkbox.indeterminate) {
+              cascadeToChildren(li, checkbox.checked);
+            }
+
+            var parent = parentLiOf(li);
+            while (parent) {
+              updateParentState(parent);
+              parent = parentLiOf(parent);
+            }
+          });
+        });
+
+        refreshAllParentStates();
+
         document.querySelectorAll('[data-filter-for]').forEach(function (input) {
           input.addEventListener('input', function () {
             var select = byId(input.getAttribute('data-filter-for'));
@@ -185,6 +304,18 @@
           });
         });
 
+        document.querySelectorAll('[data-filter-for-tree]').forEach(function (input) {
+          input.addEventListener('input', function () {
+            var key = input.getAttribute('data-filter-for-tree');
+            var query = (input.value || '').toLowerCase();
+
+            document.querySelectorAll('[data-tree-item="' + key + '"]').forEach(function (item) {
+              var label = item.getAttribute('data-tree-label') || '';
+              item.hidden = query !== '' && label.indexOf(query) === -1;
+            });
+          });
+        });
+
         document.querySelectorAll('[data-select-all]').forEach(function (button) {
           button.addEventListener('click', function () {
             var select = byId(button.getAttribute('data-select-all'));
@@ -204,6 +335,34 @@
             });
           });
         });
+
+        document.querySelectorAll('[data-check-all]').forEach(function (button) {
+          button.addEventListener('click', function () {
+            var key = button.getAttribute('data-check-all');
+
+            document.querySelectorAll('[data-tree-item="' + key + '"] input[type="checkbox"]').forEach(function (checkbox) {
+              if (!checkbox.closest('li').hidden) {
+                checkbox.checked = true;
+                checkbox.indeterminate = false;
+              }
+            });
+
+            refreshAllParentStates();
+          });
+        });
+
+        document.querySelectorAll('[data-check-none]').forEach(function (button) {
+          button.addEventListener('click', function () {
+            var key = button.getAttribute('data-check-none');
+
+            document.querySelectorAll('[data-tree-item="' + key + '"] input[type="checkbox"]').forEach(function (checkbox) {
+              checkbox.checked = false;
+              checkbox.indeterminate = false;
+            });
+
+            refreshAllParentStates();
+          });
+        });
       })();
     </script>
 </form>

src/Backend/DummyCopierModule.php

@@ -27,6 +27,7 @@ class DummyCopierModule extends BackendModule
         $this->Template->action = Environment::get('request');
         $this->Template->requestToken = $this->getCsrfToken();
         $this->Template->pageChoices = $this->getPageChoices($connection);
+        $this->Template->pageTreeNodes = $this->getPageTreeNodes($connection);
         $this->Template->moduleChoices = $this->getModuleChoices($connection);
         $this->Template->newsArchiveChoices = $this->getNewsArchiveChoices($connection);
         $this->Template->calendarChoices = $this->getCalendarChoices($connection);
@@ -229,6 +230,50 @@ class DummyCopierModule extends BackendModule
         return $choices;
     }
 
+    /**
+     * @return array<int,array<string,mixed>>
+     */
+    private function getPageTreeNodes(Connection $connection): array
+    {
+        $rows = $connection->fetchAllAssociative('SELECT id, pid, title, alias FROM tl_page ORDER BY sorting, id');
+        $rowsByParent = [];
+
+        foreach ($rows as $row) {
+            $pid = (int) ($row['pid'] ?? 0);
+            $rowsByParent[$pid][] = $row;
+        }
+
+        $build = function (int $pid) use (&$build, $rowsByParent): array {
+            $nodes = [];
+
+            foreach ($rowsByParent[$pid] ?? [] as $row) {
+                $id = (int) ($row['id'] ?? 0);
+
+                if ($id < 1) {
+                    continue;
+                }
+
+                $title = trim((string) ($row['title'] ?? ''));
+                $alias = trim((string) ($row['alias'] ?? ''));
+                $label = $title !== '' ? $title : ('Seite ' . $id);
+
+                if ($alias !== '') {
+                    $label .= ' (' . $alias . ')';
+                }
+
+                $nodes[] = [
+                    'id' => $id,
+                    'label' => $label,
+                    'children' => $build($id),
+                ];
+            }
+
+            return $nodes;
+        };
+
+        return $build(0);
+    }
+
     /**
      * @return array<int,string>
      */