Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support in ui-library for tree data structures #10449

Open
asmecher opened this issue Sep 18, 2024 · 1 comment
Open

Add support in ui-library for tree data structures #10449

asmecher opened this issue Sep 18, 2024 · 1 comment
Assignees
Milestone

Comments

@asmecher
Copy link
Member

For #10404, we'll need a UI tool that'll allow the construction of arbitrarily nested trees. For example, we might support a 4-level tree:

  • Subject
    • Mathematics
      • Calculus
        • Integral Calculus
        • Differential Calculus
      • Geometry
        • Trigonometry
        • Non-Euclidean Geometry
      • Discrete Mathematics
        • Logic
        • Set Theory
    • Physics
      • ...
    • Biology
      • ...
  • Funder
    • Agency A
    • Agency B
    • Agency C
  • Thematic Area
    • Adaptation to Climate Change
    • Environmental Sustainability

At the simplest, we could just require a tool that supports the presentation of the tree, and leave editing (and rearrangement and deletion confirmation) to modals.

We may need fine-grained server-side control over how the tree can be re-arranged -- for example, control over "Mathematics" and its contents could belong to User A, and "Geometry" to User B, so while it's tempting to permit drag-and-drop rearrangement, that might complicate things unnecessarily. Rearranging the tree should be an uncommon task.

@Devika008
Copy link

Here's a quick prototype of how the tested tables can work

Screen.Recording.2024-09-19.at.17.16.00.mov

Prototype can be found here: https://www.figma.com/proto/Wf7sDlUg2372jaKKTJ0Mgz/OJS-3.4-3.5?page-id=7200%3A7069&node-id=8927-11021&node-type=frame&viewport=1746%2C-16265%2C0.2&t=xtFViZnaW9GHQRLs-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=7200%3A7075

  1. We already have similar functionality in our new navigation, so implementing this should be straightforward. It will work like the PrimeVue panel menu component found here: https://primevue.org/panelmenu/
  2. The "Add Category" option will only allow the addition of main categories, removing the form field for the parent component.
  3. To add subcategories, you can click "More Options" and add child items below the main categories. The table will keep expanding with nested categories unless a limit is set.
  4. Also I think we should only allow ordering of main categories i.e. the first level and nothing below that
  5. If an editor/section editor is assigned to a category no matter the level we display them in the table

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: UX/UI In Progress
Development

No branches or pull requests

3 participants