feat: edit/create rows from tables interactive content widget #952

elzody · 2024-03-25T18:34:16Z

Issue(s)

Fixes #879

Overview

If a user has the ability to create/edit rows on a table/view, the user can also do so from the interactive table widget. The same "create row" button is used, as well as the "edit row" action button when hovering over a row. I made some edits to other components to better support this feature, such as dynamic importing of store.js and data.js and styling of the CreateRow.vue and EditRow.vue components (mostly from within ContentReferenceWidget.vue so as to not alter the original components elsewhere).

src/modules/modals/CreateRow.vue

src/modules/modals/EditRow.vue

src/views/ContentReferenceWidget.vue

lib/Reference/ContentReferenceHelper.php

juliushaertl · 2024-03-28T07:53:30Z

Might be a dumb question, but what is the "interactive content widget"? Is that what pops up when I use the smartpicker?
I ask because I have no idea how to view what this PR changes 😅

When you open the smart picker and insert a table you will first see a custom picker element which is unrelated to the PR but just for understanding. The widgets then define the rendering of a preview for a link inserted through the smart picker or manually. We already have those widgets for a while but now make them more interactive by adding the ability to create/edit rows directly from the link preview widget. Hope that makes it a bit clearer :)

In short, to test it use the smart picker to insert a table link with content preview in a text document and toggle the preview on.

webpack.config.js

juliushaertl · 2024-06-13T13:18:02Z

Pushed a small backend commit to ensure that the rich text fields are properly rendered, otherwise 👍

mejo-

Thanks @elzody.

The CSS/style fixes look great, much better now 👌

Regarding the problems with editing from Collectives, it's still the same:

Editing is possible in edit mode, and it alters the table. When I open the table in the Tables app afterwards, the changes are visible. But for some reason, after reloading the collectives page, the old state of the table before the change is displayed.
Editing in view mode is still possible. When switching to view mode in Collectives, all the buttons to edit the table in place are still there, and when editing the table the changes are pushed to the server.

I recorded a screencast to make more clear what I mean:

Screencast

juliushaertl · 2024-06-26T10:22:05Z

Editing in view mode is still possible. When switching to view mode in Collectives, all the buttons to edit the table in place are still there, and when editing the table the changes are pushed to the server.

I'd not consider this one a blocker for now. We also have this behaviour in other interactive widgets and it would require larger work to make the context of the widget exposed to the rendering provider.

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de> fix: set store in widget Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de> fix: properly access store to create new row Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de> fix: search functionality Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de> fix: row reactivity Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de> feat: add component testing skeleton files Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de> test: start component testing for content reference widget Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de> fix: point package.json scripts to webpack.config.js Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de> fix(test): properly mount component Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de> fix(test): use default options and mix in given mount options Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de> fix(tests): add styles for components Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de> refactor(tests): move richObject to fixture Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de> test: verify table title after mounting component Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de> test: test searching in widget Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de> refactor(tests): organize mount test Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de> fix: resolve pagination issues Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de> fix: change viewport dimensions in cypress config Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de> fix: refine row selector Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de> feat: create and edit rows from tables interactive widget Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de> fix(css): edit row delete & save buttons Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de> fix(css): fullscreen rich text edit Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>

Signed-off-by: Julius Härtl <jus@bitgrid.net>

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>

Changes since review

elzody added enhancement New feature or request 3. to review Waiting for reviews labels Mar 25, 2024

elzody requested review from juliushaertl and enjeck March 25, 2024 18:34

This comment was marked as resolved.

Sign in to view