Skip to content

feat(tree-view-table-layout): shift-click a chevron to expand/collapse the whole subtree#322

Open
seltzdesign wants to merge 1 commit into
directus-labs:mainfrom
seltzdesign:feat/shift-click-expand-collapse-subtree
Open

feat(tree-view-table-layout): shift-click a chevron to expand/collapse the whole subtree#322
seltzdesign wants to merge 1 commit into
directus-labs:mainfrom
seltzdesign:feat/shift-click-expand-collapse-subtree

Conversation

@seltzdesign

Copy link
Copy Markdown

Problem

The expand/collapse chevron only ever toggles one level. Fully opening or closing a deep branch means clicking down (or up) through every intermediate node by hand, which is tedious on large trees.

Fix

Add a power-user gesture: shift-click a chevron to expand or collapse the entire subtree under that node in one action. A plain click is unchanged (single level).

Implementation:

  • src/components/table-row.vue — the chevron's click handler now forwards the modifier state: $emit('toggle-children', $event.shiftKey). A normal click emits false, a shift-click emits true.

  • src/components/v-table.vueonToggleChildren(item, deep = false) gains a deep flag. When deep is true it delegates to a new toggleChildrenDeep(item), which:

    • picks a single target collapsed state (the opposite of the clicked node's current state), so the whole branch ends up consistently open or consistently closed regardless of the mixed states it started in;
    • collects the clicked node plus every descendant container (descendants that themselves have children) from internalItems;
    • drives only the containers that are not already at the target state to that state, reusing the existing toggleItem / collapseChildren primitives.

    The template binding is updated to pass the flag through: @toggle-children="(deep) => onToggleChildren(item, deep)".

Defaulting deep to false keeps the single-level behaviour for every existing caller and for plain clicks.

Verification

  • Shift-clicking a collapsed top-level node expands the full branch (all nested containers open) in one gesture; shift-clicking it again collapses the whole branch.
  • Shift-clicking a branch that is in a mixed state (some children open, some closed) drives the entire branch to a single consistent state rather than toggling each node independently.
  • Plain (non-shift) clicks still toggle exactly one level, unchanged.

Note for reviewers

This PR touches src/components/table-row.vue, but only the @click emit hunk in the <template> (forwarding $event.shiftKey). A separate PR ("fix: point the collapsed-row chevron right") also touches this file, but in a different, non-overlapping hunk — the transform: rotate(...) rule in the <style> block. The two changes are independent and do not conflict.

…e the whole subtree

The chevron only toggles one level; fully opening/closing a deep branch means clicking
through every node. Shift-click now expands/collapses the entire subtree in one gesture;
a plain click is unchanged.

- table-row.vue: forward the modifier via $emit('toggle-children', $event.shiftKey)
- v-table.vue: onToggleChildren(item, deep=false); when deep, drive the clicked node and
  every descendant container to a single target collapsed state
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant