search

pkp / pkp-lib

The library used by PKP's applications OJS, OMP and OPS, open source software for scholarly publishing.
https://pkp.sfu.ca
GNU General Public License v3.0
307 stars 447 forks source link

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

Open asmecher opened 2 months ago

asmecher commented 2 months ago

For https://github.com/pkp/pkp-lib/issues/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:

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.

Specs Update - Friday, September 27th, 2024

Workflows Affected by This Change

Detailed Specs

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

https://github.com/user-attachments/assets/f18d3796-d845-4a66-ba19-54124322a98b

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 Link to Designs: https://www.figma.com/design/Wf7sDlUg2372jaKKTJ0Mgz/OJS-3.4-3.5?node-id=8927-9658&t=L8lZRbByMRi3ASfK-4

Some Considerations

  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 when adding a category
  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
  6. Assigning the editors/section editors to categories. Image
  7. Editors/Section Editors can be assigned to each sub-category as well. I don't want to limit this functionality and want to keep it at the discretion of the journal.
Devika008 commented 2 months ago

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

https://github.com/user-attachments/assets/f18d3796-d845-4a66-ba19-54124322a98b

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