feat: edit/create rows from tables interactive content widget

[elzody]

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).

[juliushaertl]

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.

[elzody]

I don't think the failing Cypress tests are related, they are also failing on main it seems. Unsure what caused it 😔

[mejo-]

I tested it in Collectives and faced some issues:

• In document editors with limited width (670px per default in Text and Collectives) the styling looks a bit off when scrolling completely to the right. See screenshot below.

  • There's a big padding right to the table that allows scrolling further than required.
  • the most right column (with the edit buttons) doesn't have a visible border to the right, but the line that splits heading rows from content rows extends over this most right column.

• I'm able to edit the table in place, but when I reload the page afterwards, my changes are gone. Both changed to existing columns and added new columns. I see a PUT request to the tables app when saving changes in the widget, but for some reason it's not persisted.

• In read-only mode I'm still able to edit the table in place, this is unexpected. Maybe it's better to display the non-interactive version there?

I don't know the code base well enough to fully understand each line of code change, but changes look sensible to me.

[elzody]

@mejo- Thanks for bringing these up. A lot of the styling issues were present before I even started; I tried to fix some up as best I could, but there are definitely still some present. I will look at it some more

[elzody]

I made some styling changes which I think make the widget look better than before. Specifically, I made the following changes:

• The table headers for the rich text editor fields were misaligned, because the action button does not have any available actions due to it being a widget and less sophisticated than opening the actual table. I made it so that the spot where the action button goes will always take up a 44px * 44px space, aligning it with the other headers. This was the only way I knew how to do it after thinking on it for several hours; flexbox was NOT working properly there.
• The extra space off to the right of the table was caused by the pagination footer, so I adjusted the space it takes up when rendered in a widget like this. It no longer takes up extra space, that I can see anyway.
• There was some transparent space in the widget header off to the right, which has been fixed now by adding an element to group the table title and options row. They also stick properly now to the top.

The other things that you mentioned were not reproducible on my end. I tried the following:

• When I add or edit a row, it is reflected immediately in the widget. If I reload normally, the changes are still there, as well as in the tables app. This also goes for a hard reload of the page.
• I tested the permissions thing briefly, by sharing it with a non-admin account without write/update permissions for the table. At first, the buttons were still there, but after submitting the new/altered content, an error popped up stating I did not have sufficient permissions to update the table. When I did a hard reload on the page, the buttons disappeared. My guess is the browser caches the JS related to this, but not sure about it yet.

Maybe it would be worth it to expand the tests a bit to check for the read-only permissions or something? Also, I rebased onto main and resolved a small merge conflict.

@mejo-

[juliushaertl]

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