WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

Conversation

@DaxServer
Copy link
Owner

This commit adds a new "Replace" functionality to the ColumnHeaderMenu component. The changes include:

  • Adding a new showReplaceDialog ref to track the visibility of the replace dialog.
  • Implementing a handleReplaceCompleted function that is called when the replace operation is completed, displaying a success message.
  • Updating the "Replace" menu item to toggle the showReplaceDialog when clicked.
  • Adding a new ReplaceDialog component that handles the replace operation.
  • Updating the auto-imports to include the useReplaceApi composable and the Dialog component.

These changes allow users to easily replace values in a column directly from the column header menu.

This commit adds a new "Replace" functionality to the ColumnHeaderMenu component. The changes include:

- Adding a new `showReplaceDialog` ref to track the visibility of the replace dialog.
- Implementing a `handleReplaceCompleted` function that is called when the replace operation is completed, displaying a success message.
- Updating the "Replace" menu item to toggle the `showReplaceDialog` when clicked.
- Adding a new `ReplaceDialog` component that handles the replace operation.
- Updating the auto-imports to include the `useReplaceApi` composable and the `Dialog` component.

These changes allow users to easily replace values in a column directly from the column header menu.
@coderabbitai
Copy link

coderabbitai bot commented Sep 28, 2025

📝 Walkthrough

Summary by CodeRabbit

  • New Features
    • Added a Replace dialog accessible from column header menus to perform find-and-replace within a selected column.
    • Supports options for case sensitivity and whole-word matching, with clear form inputs and loading states.
    • Displays a success message indicating the number of affected rows after completion.
    • The dialog opens and closes smoothly, resets fields on close, and keeps visibility in sync with the menu.
    • Checkbox and dialog components are now available globally for consistent usage across the app.

Walkthrough

Adds global component typings for Checkbox, Dialog, and a new ReplaceDialog. Updates ColumnHeaderMenu to open ReplaceDialog and handle completion. Introduces ReplaceDialog component that performs a replace operation via an API, emits completion with affected rows, and manages visibility and form state.

Changes

Cohort / File(s) Summary
Global components declarations
frontend/components.d.ts
Extends GlobalComponents with Checkbox (primevue/checkbox), Dialog (primevue/dialog), and ReplaceDialog (local Vue component) for global usage.
Data-processing UI integration
frontend/src/features/data-processing/components/ColumnHeaderMenu.vue
Replaces previous Replace action handler with opening ReplaceDialog; adds local state for dialog visibility; handles replace-completed event to show success feedback; wires v-model for visibility.
Replace dialog component
frontend/src/features/data-processing/components/ReplaceDialog.vue
New modal component: props for visibility and column info; inputs for find/replace and options (case sensitive, whole word); calls project replace API; emits replace-completed with affectedRows; resets state on close and during lifecycle; loading/disabled states and error handling.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant CHM as ColumnHeaderMenu
  participant RD as ReplaceDialog
  participant API as Backend API

  U->>CHM: Click "Replace" on column
  CHM->>RD: Open dialog (v-model:visible, columnField/header)

  U->>RD: Enter find/replace, options
  U->>RD: Click "Replace"
  RD->>RD: Set isLoading, disable inputs
  RD->>API: POST /projects/:id/replace { column, find, replace, caseSensitive, wholeWord }
  API-->>RD: Response { affectedRows | error }

  alt Success with affectedRows
    RD-->>CHM: emit replace-completed(affectedRows)
    RD->>RD: Reset form, close dialog
  else Error or no affectedRows
    RD->>RD: Show error, keep or close per logic
  end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Title Check ✅ Passed The title “feat(ColumnHeaderMenu): add replace functionality” succinctly summarizes the primary change of adding replace functionality to the ColumnHeaderMenu component, is concise and clear, and uses conventional commit style without unnecessary details.
Description Check ✅ Passed The description clearly outlines the changes made—introducing a showReplaceDialog ref, implementing handleReplaceCompleted, updating the Replace menu item, adding the ReplaceDialog component, and adjusting auto-imports—and directly relates to how these enable users to replace column values from the header menu.
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.
✨ Finishing touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch add-replace-functionality-to-column-header-menu

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ccc1771 and 7e2b8fb.

📒 Files selected for processing (3)
  • frontend/components.d.ts (3 hunks)
  • frontend/src/features/data-processing/components/ColumnHeaderMenu.vue (3 hunks)
  • frontend/src/features/data-processing/components/ReplaceDialog.vue (1 hunks)

Comment on lines +44 to +51
if (!data?.affectedRows) {
showError([{ code: 'NOT_FOUND', message: 'Replace operation failed' }])
return
}

if (data?.affectedRows !== undefined && data?.affectedRows !== null) {
emit('replace-completed', data.affectedRows)
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Handle 0-row results without flagging failure.

Line 44 treats data.affectedRows === 0 as a failure, which is a valid outcome when nothing matched the search. That branch shows an error and returns before we emit replace-completed, so callers never learn that the operation succeeded (with zero matches) and users see a spurious failure message. Please adjust the guard to only bail out when affectedRows is null/undefined, and continue to emit the event (and close the dialog) when it’s 0.

-    if (!data?.affectedRows) {
-      showError([{ code: 'NOT_FOUND', message: 'Replace operation failed' }])
+    if (data?.affectedRows == null) {
+      showError([{ code: 'NOT_FOUND', message: 'Replace operation failed' }])
       return
     }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
if (!data?.affectedRows) {
showError([{ code: 'NOT_FOUND', message: 'Replace operation failed' }])
return
}
if (data?.affectedRows !== undefined && data?.affectedRows !== null) {
emit('replace-completed', data.affectedRows)
}
if (data?.affectedRows == null) {
showError([{ code: 'NOT_FOUND', message: 'Replace operation failed' }])
return
}
if (data?.affectedRows !== undefined && data?.affectedRows !== null) {
emit('replace-completed', data.affectedRows)
}
🤖 Prompt for AI Agents
In frontend/src/features/data-processing/components/ReplaceDialog.vue around
lines 44 to 51, the current guard treats data.affectedRows === 0 as a failure
and returns early; change it to only treat affectedRows as missing (null or
undefined) as an error. Specifically, remove the check that interprets falsy
affectedRows as failure, instead check for affectedRows === null || affectedRows
=== undefined before calling showError and returning, and ensure
emit('replace-completed', data.affectedRows) runs for 0 as well so callers get
the zero-match result and the dialog can close.

@DaxServer DaxServer merged commit c5db975 into main Sep 28, 2025
6 checks passed
@DaxServer DaxServer deleted the add-replace-functionality-to-column-header-menu branch September 28, 2025 16:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants