Z flow edit cards fix & docs update - #233
Conversation
Signed-off-by: Sobyt483 <andrianingomel@gmail.com>
Signed-off-by: Sobyt483 <andrianingomel@gmail.com>
Sobyt483
added
bug
📝 WalkthroughWalkthroughChangesThe dashboard now normalizes z-flow ordering after card additions or removals and commits layout changes during grid updates. The custom element forwards dashboard navigation and edit methods. Documentation and tests cover the revised APIs, dialogs, persistence rules, and Shadow DOM queries. Dashboard layout and API updates
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant Caller
participant DashboardElement
participant AngularDashboard
Caller->>DashboardElement: invoke dashboard method
DashboardElement->>AngularDashboard: delegate when initialized
AngularDashboard-->>DashboardElement: return navigation result or handle action
DashboardElement-->>Caller: return result
Possibly related issues
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
projects/webcomponents-dashboard/main.tsParsing error: /projects/webcomponents-dashboard/main.ts was not found by the project service. Consider either including it in the tsconfig.json or including it in allowDefaultProject. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/dashboard.md`:
- Around line 413-414: Update the “### Public methods” table in
docs/dashboard.md to list the documented custom-dialog handlers and their
signatures: saveEdit(), cancelEdit(), confirmDiscard(), and each onUnsavedNav*()
handler. Keep the existing requestNavigation() and
Dashboard.registerAngularComponents() entries, or explicitly mark the
custom-dialog handler path as internal if those methods are not public.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: da907317-7890-4846-bfdd-afae9f5a2c9e
📒 Files selected for processing (8)
docs/dashboard.mdprojects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.htmlprojects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.spec.tsprojects/ngx/declarative-ui/dashboard/dashboard/dashboard.component.tsprojects/ngx/declarative-ui/dashboard/dashboard/engines/zflow/z-flow-engine.spec.tsprojects/ngx/declarative-ui/dashboard/dashboard/engines/zflow/z-flow-engine.tsprojects/ngx/declarative-ui/dashboard/dashboard/engines/zflow/z-flow.helpers.tsprojects/ngx/declarative-ui/dashboard/models/dashboard.model.ts
Signed-off-by: Sobyt483 <andrianingomel@gmail.com>
github-project-automation
Bot
moved this from Waiting For Review
to Done
in OpenMFP Development
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/dashboard.md`:
- Around line 220-222: Update the Web-component consumers note to state that the
WC bundle forwards only the instance methods above onto the custom element, not
the static Dashboard.registerAngularComponents(types[]) method. Keep the
existing behavior and examples for requestNavigation and the void instance
handlers unchanged.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 380f439a-94a9-4659-9dc7-8f4cff7540c8
📒 Files selected for processing (5)
docs/dashboard.mdprojects/ngx/declarative-ui/dashboard/dashboard/dashboard-element-methods.spec.tsprojects/ngx/declarative-ui/dashboard/dashboard/dashboard-element-methods.tsprojects/ngx/declarative-ui/dashboard/dashboard/index.tsprojects/webcomponents-dashboard/main.ts
| | `Dashboard.registerAngularComponents(types[])` | `void` | Static — registers standalone Angular card components by their element selector name. | | ||
|
|
||
| > **Web-component consumers:** `@angular/elements` only proxies inputs and outputs onto the custom element — instance methods are **not** reachable on the DOM node by default. The dashboard's WC bundle (`mfp-wc-dashboard.js`) explicitly forwards all of the methods above onto `<mfp-wc-dashboard>`, so they are callable directly on the DOM element (e.g. `document.querySelector('mfp-wc-dashboard').saveEdit()`). If the Angular component has not been created yet, `requestNavigation()` runs its callback synchronously and returns `true`, and the void handlers are no-ops. |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Do not state that the static registration method is forwarded to the DOM node.
Dashboard.registerAngularComponents(types[]) is static. defineDashboardElementMethods() only defines requestNavigation and the void instance handlers on elementCtor.prototype. The current text promises that element.registerAngularComponents(...) is available, but it is not.
Change “all of the methods above” to “the instance methods above”, or add an explicit static proxy.
🧰 Tools
🪛 LanguageTool
[style] ~222-~222: Consider removing “of” to be more concise
Context: ...p-wc-dashboard.js) explicitly forwards all of the methods above onto `...
(ALL_OF_THE)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/dashboard.md` around lines 220 - 222, Update the Web-component consumers
note to state that the WC bundle forwards only the instance methods above onto
the custom element, not the static Dashboard.registerAngularComponents(types[])
method. Keep the existing behavior and examples for requestNavigation and the
void instance handlers unchanged.
2 participants
Fixes documentation errors in
docs/dashboard.mdreported in #232 (verifiedagainst source), and extends the web-component bundle so its public methods are
callable on the DOM node.
Bug fix
Fixes a z-flow ordering bug: adding or removing loose cards via the Edit
Cards dialog left the z-flow engine's internal order out of sync with the
grid, so cards jumped to wrong positions after save.
onCardsEdited()nowre-syncs the z-flow order on loose-card changes,
onGridChange()commits thelayout, and a new
normalizeNodeOrder()re-indexeszFlowOrderinto a dense0..nsequence (replacingseedNodeOrderincommitZFlowLayout).Docs (#232)
@openmfp/webcomponents→@openmfp/ngx(WC bundleships no type declarations).
languageinputrows — the three dialogs aren't exported and have no
languageinput.hasUnsavedChangesdocumented asprotected(not consumer-readable);documented the
unsavedChangesChangeoutput as the replacement.x/ypersistence (loose cards only), corrected the "warning icon"dialog claims (
state="Critical", no icon), and noted dialog test IDs live inshadow DOM.
dashboard.model.ts, and documented the fullset of public methods (
saveEdit,cancelEdit,confirmDiscard,onUnsavedNav*).Web-component methods
@angular/elementsonly proxies inputs/outputs, so instance methods weren'treachable on
<mfp-wc-dashboard>. Extracted the method-forwarding into a testeddefineDashboardElementMethods()helper and extended it beyondrequestNavigationto cover all public edit-mode / unsaved-changes handlers.Tests
Added
dashboard-element-methods.spec.ts(delegation + not-yet-createdfallback). All 557 ngx tests pass; typecheck and lint clean.
Change Log
<mfp-wc-dashboard>now exposessaveEdit(),cancelEdit(),confirmDiscard(),onUnsavedNavSave(),onUnsavedNavDiscard(), andonUnsavedNavCancel()as callable methods on the DOM node (previously onlyrequestNavigation()was forwarded).@openmfp/ngxexports a newdefineDashboardElementMethods()helper forwiring these methods onto a custom-element constructor.
Summary by CodeRabbit