Notes - Treeview UI/UX revamping

[Julien-Dubois-eXo]

Rationale

Currently the treeview is hidden in a button. End-users are frequently searching it and disturbed by the location hidden. To facilitate the access to the treeview, this MIP aims to:

• display the treeview directly on the left of the page of notes in the spaces and the personal notes
• review the UI/UX of the filter to match the new treeview UI
• be able to adapt the treeview width to display more of it
• manually order the notes avoiding using numbers to sort them

1. Functional Requirements

Top User Stories

Side navigation treeview

Given I'm a platform/user
When I access to the note app on My Workspace or a space, I have the treeview displayed on the left side of the note.
I have a button to hide/display it. By default, it's displayed.

I can drag and drop the edge of the treeview to increase the treeview width in order to display more the notes. If I move to another page (outside note) or reload the page then the size is reset to the default one.

NB: On My Space, I still see only my personal notes.

Filter notes

Filter by name
On the Treeview header, I have an action button "Filter"

When I click on it, I display the "Filter by name" option.

I can filter the treeview by the name of the notes.

Filter by type
When the filter is opened, I have an action button "advanced filter"
When I click on it, I open a drawer "Filter notes". I can filter on 2 options:

• Published (selected by default): to display the note already saved and available for me and other users (only for spaces)
• Draft: to filter the treeview on the notes with drafts

When I open another page and come back the advanced filter are reseted to the default choice.

Notes manual sorting

When I do a drag and drop I can move the position to:

• sort it when I drop it between 2 notes at the same level of the selected note
• move it to another location of the treeview if I drop it at a different level
• move it as sub-note if I drop it on a note

The location is memorized after the drag and drop.

The sort rule is no longer by name of the note. The note are added to the end of already created note then we can order them manually.

Impacts

Gamification

Notifications

Analytics

Unified Search

2. Technical Requirements

Expected Volume & Performance

Feature Flags

N/A

3. Software Architecture

Access

New Rest API will be added for note Manual Ordering

New treeview component will be implement for note application (same component and interaction patterns as the Document App)

Use a draggable component for manual ordering and tree resizing

Services & processing

Manually order :

• Builds the hierarchical tree structure based on parentId

• Orders sibling notes using a new position field

• Newly created notes are assigned position = max(position) + 1 within their parent

Data and persistence

Add new POSITION column in WIKI_PAGES (default nullable)

For each group of notes sharing the same parentId:

• Sort by existing rule (name or creation date)

• Assign incremental position values starting from 1

[Julien-Dubois-eXo]

@srenault-meeds ready to review

[srenault-meeds]

Thanks.

My Space

Why do you use this label? Indeed, the product label is "My Workspace" (for exo or for meeds BTW). Thanks

[Julien-Dubois-eXo]

@srenault-meeds it's just a mistake. I have not the english name in mind and I probably put this without thinking. I have updated the description.

[srenault-meeds]

Thanks. Go fonc added

[AzmiTouil]

Ready for Tech Spec Review by DAO members (eXo: @rdenarie )

[rdenarie]

Ok for me on tech side