Task #1351
closed
Tree structure - develop new frontend component for tree nodes
Added by Radek Tomiška about 6 years ago.
Updated about 6 years ago.
Description
Find and use or develop new FE component for rendering and selecting tree nodes.
Requirements:
- traversing tree structure (use component for organizations and role catalogues)
- selecting items in forms (e.g. on identity contract detail - work position)
Implementation notes:
- traversing tree structure:
-- expand tree node children with pagination + show more link (or load automatically by waypoint)
-- "+" for expand tree node, "click" on node name - show path above and children as root (idea of standard desktop explorers)
-- show quick buttons on the top (with path from root) for operations with the selected node (e.g. show detail + custom buttons which depends on component usage - the same as Table component)
- selecting items:
-- single select at least
-- multiselect with ctrl / shift can be implemented
-- add basic validation support (required, validation callback + asterisk)
Files
- File tree.png added
- % Done changed from 0 to 60
Basic tree component is implemented and is used on tree structure and role catalogue
Remains:
- using component in forms
- extract styles to less
- add tooltips + locales
- readme
- Related to Defect #1064: Opening sub nodes of another root added
- Category changed from Frontend to Tree structures
- Related to Task #491: Filling the organization element filter by clicking on org. tree. added
- Related to Task #168: Component Tree - implement pagination added
- Related to Task #1358: Save tree state (expanded, selected node) in redux store added
- Estimated time changed from 40.00 h to 48.00 h
Tree component used in:
- role catalogue form
- contact form
- other position form
- filters - identity table, role table, tree node table
Remain:
- use tree component in time slices, automatic roles by tree structure, synchronization
- extract styles to less
- readme
- new renderers for usage in eavs
- Related to Task #1359: FE: CodeableField component added
- Related to Task #908: Empty line in the organizational structure added
- Related to Task #1369: FE: Tree component - multi select, usage for role composition (business roles) added
- Assignee changed from Ondřej Kopr to Radek Tomiška
I tested your new component on these browsers:
- Google chrome 70.0.3538.67,
- IE 11.345.17134.0,
- Edge 42.17134.1.0,
- Opera 56.0.3051.99,
- Firefox 63.0.
Behavior with select and filtering works for all browsers (user agenda and request for roles)
I only change icon for tree structure, from tree to folder. Commit: https://github.com/bcvsolutions/CzechIdMng/commit/c1695151c185dceca491886fafabbd65b7fa2574
I have only one question about behavior with select tree node that contains another nodes, we can consult this behavior tomorrow.
- Status changed from Needs feedback to Closed
Thx for feedback!
I changed behavior with tree node selection - tree mode is used now everywhere, as we consulted.
Also available in: Atom
PDF
