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

juliusknorr · 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

juliusknorr · 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

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

Signed-off-by: Elizabeth Danzberger <[email protected]>

Signed-off-by: Julius Härtl <[email protected]>

Signed-off-by: Elizabeth Danzberger <[email protected]>

Changes since review

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

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

This comment was marked as resolved.

Sign in to view