Repository navigation
feat(grid): add the grid canvas and widgets for application pages - #37
Open
rubenvdlinde wants to merge 2 commits into
Open
rubenvdlinde wants to merge 2 commits into
rubenvdlinde wants to merge 2 commits into
Conversation
The canvas places widgets on a 12 column grid with GridStack and lets them be moved and resized in edit mode, or through the widget menu with a keyboard. Header and text widgets render their content; a data widget shows a table or view of the application with the components the start page uses. The widget dialog builds its form from the widget type schemas and picks the table or view of a data widget. gridLayout.js reads a page into a grid and turns the grid back into the widgets the page API saves, by node relation when the application has the node. The store gains actions for the page endpoints. Assisted-by: ClaudeCode:claude-opus-5-5
This was referenced Oct 15, 2026
Collaborator
Author
|
Superseded by #48 (rebuilt on the nextcloud#3100 model, see #13). Kept open for reference until Remko has ported. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Third step of the page rework from nextcloud#3075 (reply: the canvas and widget forms come back on top of the page model). Stacked on #36. Frontend building blocks only; #4 of the stack puts them on the application pages.
What changes
src/modules/grid/:GridCanvas(GridStack, 12 columns, 6 and 1 on narrow canvases, ResizeObserver; GridStack kept out of Vue reactivity),GridWidget(card, title, configure/remove and keyboard move/resize actions),HeaderWidget,TextWidget,DataWidget,SchemaForm,widgetRegistry,gridLayout.js;src/shared/utils/gridColors.js;AddWidgetdialog. Carried over from the grid view stack (feat(grid): render grid widgets on a gridstack canvas聽nextcloud/tables#3079, feat(grid): add schema-driven widget forms and the table or view widget聽nextcloud/tables#3081) with the view parts removed.pageToGridresolves each content row'snode_rel_idthrough the application's nodes, andDataWidgetrenders the table or view withTableWrapper/View, the components the start page uses today. A row whose node is gone shows "This table or view is not available".AddWidgetpicks the table or view of a data widget;gridToWidgetssaves it bynodeRelIdwhen the application has it, else asnode: {nodeType, nodeId}so the server adds it.SchemaFormdrops thetargetandintegerfield types: the server schemas no longer have them.loadWidgetTypes(/api/2/widget-types),loadContextPages,createContextPage,updateContextPage,deleteContextPage,saveContextPageWidgets(reloads the application afterwards, since saving can add nodes).gridstack@^13.3.0(MIT, verified on npm); the lock file only gains that package.Size: 1,600 added lines, about 1,580 without the lock file, slightly over the 1,500 line guide. It is one coherent set of components, so it is not split.
Tests
npx cypress run --component --spec cypress/component/gridLayout.cy.js:9 passing(page to grid, gone nodes, saving by node relation or node, placement, columns by width, colors).npm run lint: 0 errors (1 inherited warning instore.jsline 176).npm run stylelintclean.npm run buildOK.Prepared in the Conduction fork for porting upstream by @remko48. Prepared with Claude Code.