feat(UI & API): Manage views in the frontend #414
Conversation
Change project serialization step to include `views` dictionary rather than a single `layout`.
Remove duplicate test
Coverage Report for ./frontend
File Coverage |
|
Really awesome! |
|
On the design side, it looks like removing a card from the view could be 1 click instead of 2? What do you think @anasstarfaoui ? |
augustebaum
changed the title
|
That's an amazing app so far guys, big kuddos to all of you :) Just one suggestion, would it be possible to fixed the position of the Views list by default? I feel like it would be preferrable to not have something who grows @rouk1 :) |
Oh ! Understood it's minimum height is 2 times the inner padding it's maximum height is 20% of the height of the viewport then a scrollbar appears. Is it ok for you @anasstarfaoui ? |
|
Huge work 👏🏻 , the video is awesome. |
There was a problem hiding this comment.
I found a UX issue: when first starting the UI, adding cards to the canvas doesn't work, with no explanation why. I think it's because no view is selected by default.
Some ways to solve this:
- Select the first view in the list at startup
- Allow the user to set a "default" view, and select that one at startup
- Warn the user that they need to select a view
The easiest is probably the warning. @anasstarfaoui do you see a better way of dealing with this?
EDIT: Resolved
There was a problem hiding this comment.
I think the "intermediate view" mechanic when creating a view is a bit strange. I would expect a view either to exist, or not to exist. Some alternatives we discussed with @rouk1:
- If the user clicks away during the view naming process, either validate or cancel the view creation (like in VSCode when you create a file: if you click away and the text box is empty, the creation is aborted; if the text box is not empty, the file is created). Essentially, clicking away should be as effectful as pressing "Enter"
- Ask for the view name before creating anything (e.g. in a modal)
EDIT: Resolved (if the user clicks away, the name is validated; also we now forbid more than 1 view to be in "pending" mode, and to name 2 views the same)
@augustebaum an error toast will now pop if a user tries to double click or drag an item if no view is selected. |
## This PR allows user to create/duplicate/edit & delete views.
### Backend
All project endpoints are now below the same prefix.
- `GET /api/project/items` lists all items of a project.
- `POST /api/project/views/share/{key}` returns a static shareable HTML
file named `{view name}-{yyyy-MM-dd-HH-mm}.html`.
- `PUT /api/project/views/{key}` save a view in the project.
- `DELETE /api/project/views/{key}` delete a view from the project.
### Frontend
- A new `EditableList` component as been implemented to manage views.
- A lot of renaming to get rid of the concept of "report".
- Plug everything to the new layout.
- Rework view card layout and add an action dropdown to it.
- Rework dropdowns using floating UI to make them fixed.
https://github.com/user-attachments/assets/3f94e483-ecea-4d5a-8433-50f9150fc6e6
Co-authored with @augustebaum.
Fixes #336, #407, #377, #332
---------
Co-authored-by: Auguste Baum <auguste@probabl.ai>
Co-authored-by: Auguste Baum <52001167+augustebaum@users.noreply.github.com>
This PR allows user to create/duplicate/edit & delete views.
Backend
All project endpoints are now below the same prefix.
GET /api/project/itemslists all items of a project.POST /api/project/views/share/{key}returns a static shareable HTML file named{view name}-{yyyy-MM-dd-HH-mm}.html.PUT /api/project/views/{key}save a view in the project.DELETE /api/project/views/{key}delete a view from the project.Frontend
EditableListcomponent as been implemented to manage views.manage-views.mp4
Co-authored with @augustebaum.
Fixes #336, #407, #377, #332