Task #1351
closed
Tree structure - develop new frontend component for tree nodes
90%
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
Related issues
Updated by Radek Tomiška over 5 years ago
- 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
Updated by Radek Tomiška over 5 years ago
- Related to Defect #1064: Opening sub nodes of another root added
Updated by Radek Tomiška over 5 years ago
- Category changed from Frontend to Tree structures
Updated by Radek Tomiška over 5 years ago
- Related to Task #491: Filling the organization element filter by clicking on org. tree. added
Updated by Radek Tomiška over 5 years ago
- Related to Task #168: Component Tree - implement pagination added
Updated by Radek Tomiška over 5 years ago
- Related to Task #1358: Save tree state (expanded, selected node) in redux store added
Updated by Radek Tomiška over 5 years ago
- 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
Updated by Radek Tomiška over 5 years ago
- Related to Task #1359: FE: CodeableField component added
Updated by Radek Tomiška over 5 years ago
- Related to Task #908: Empty line in the organizational structure added
Updated by Radek Tomiška over 5 years ago
- Related to Task #1369: FE: Tree component - multi select, usage for role composition (business roles) added
Updated by Radek Tomiška over 5 years ago
- File catalogue-selected.png catalogue-selected.png added
- File tree-selected.png tree-selected.png added
- Status changed from In Progress to Needs feedback
- Assignee changed from Radek Tomiška to Ondřej Kopr
- % Done changed from 60 to 90
Tree node component is implemented with needed features and is used on all places. New renderers for selecting tree nodes, roles and role catalogue in eav were added. Quick buttons on the top of the tree (e.g. detail button) was not implemented - selected node is implemented a different way (screenshots added).
I refactored 'RoleSelect' component - it works the same way as other two components.
I simplified tree node selection - choosing tree type is possible in the modal. Default tree type (overridable by the force search parametrs) is used in the single select box.
Additional features will be implemented in related tasks (e.g. multi select).
Commit:
https://github.com/bcvsolutions/CzechIdMng/commit/f0dd9a102ecc22c35b5223e4cd4cc71d805fbaba
Doc:
https://github.com/bcvsolutions/CzechIdMng/tree/develop/Realization/frontend/czechidm-core/src/components/advanced/Tree
https://github.com/bcvsolutions/CzechIdMng/commit/f0dd9a102ecc22c35b5223e4cd4cc71d805fbaba#diff-4ac32a78649ca5bdd8e0ba38b7006a1e
Could you do a feedback please?
Updated by Ondřej Kopr over 5 years ago
- Assignee changed from Ondřej Kopr to Radek Tomiška
- 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.
Updated by Radek Tomiška over 5 years ago
- 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.