Apply bug fixes from Noteforms

[madassdev]

Summary by CodeRabbit

• New Features

  • Enhanced file upload reliability by adding a pre-upload check in the FileInput component.
  • Improved form editing robustness with error handling enhancements in the isDirty function and custom code appending process.
  • Updated the home page layout to include the form creator's name, enhancing information clarity for users.

• Bug Fixes

  • Fixed event emission in multiple components (VSwitch, Modal, Collapsible) by correcting method names and usage.
  • Added error handling in the password update function and improved error logging.

• Refactor

  • Optimized SEO meta handling in form pages for better readability and efficiency.
  • Updated the working form store's methods for clarity and consistency.

• Chores

  • Adjusted Sentry configuration to exclude specific validation exceptions, reducing noise in error reporting.

[coderabbitai]

Walkthrough

The recent updates across various Vue components and pages in the client application focus on improving code quality and error handling. Changes include renaming emits to emit in component event declarations, adding try-catch blocks for better error management, refining UI elements, and enhancing readability and efficiency in code. These adjustments aim to make the application more robust, user-friendly, and maintainable.

Changes

File(s)	Change Summary
.../forms/FileInput.vue	Added a check for the existence of a specific reference in the openFileUpload method.
.../forms/components/VSwitch.vue, .../global/Modal.vue, .../global/transitions/Collapsible.vue	Renamed emits to emit in event declarations and updated related logic for emitting events.
.../forms/[slug]/edit.vue, .../forms/[slug]/index.vue	Introduced try-catch blocks for error handling in specific functions and refactored for better readability and efficiency.
.../home.vue	Adjusted styling and content layout within a list element to improve UI presentation.
.../settings/password.vue	Added error logging in the update function for better error tracking.
.../plugins/sentry.js	Modified error sending logic to exclude certain types of validation exceptions from being sent to Sentry.
.../stores/working_form.js	Updated the setProperties method for better data handling and modified the reset method for code clarity.

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

---

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit-tests for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit tests for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit tests.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• The JSON schema for the configuration file is available here.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json

CodeRabbit Discord Community

Join our Discord Community to get help, request features, and share feedback.

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 30587fb and b1944ac.

Files selected for processing (10)

• client/components/forms/FileInput.vue (1 hunks)
• client/components/forms/components/VSwitch.vue (1 hunks)
• client/components/global/Modal.vue (2 hunks)
• client/components/global/transitions/Collapsible.vue (2 hunks)
• client/pages/forms/[slug]/edit.vue (1 hunks)
• client/pages/forms/[slug]/index.vue (3 hunks)
• client/pages/home.vue (1 hunks)
• client/pages/settings/password.vue (1 hunks)
• client/plugins/sentry.js (1 hunks)
• client/stores/working_form.js (2 hunks)

Additional comments: 15

client/components/forms/components/VSwitch.vue (2)

• 16-16: The change from defineEmits(['update:modelValue']) correctly aligns with Vue 3's composition API for defining component events. This ensures that the component can emit the update:modelValue event properly.
• 20-20: Correct usage of the emit function within the onClick method to toggle the modelValue based on user interaction. This logic ensures that the switch component behaves as expected, toggling its state when clicked, provided it's not disabled.

client/components/global/transitions/Collapsible.vue (2)

• 20-20: The change from defineEmits(['click-away']) correctly aligns with Vue 3's composition API for defining component events. This ensures that the component can emit the click-away event properly when the user clicks outside of the collapsible element.
• 50-50: Correct usage of the emit function within the onClickAway method to emit the click-away event. This logic ensures that the collapsible component behaves as expected, emitting an event when a click occurs outside of its bounds.

client/pages/settings/password.vue (1)

• 44-45: Adding error logging within the catch block of the update function is a good practice for debugging and identifying issues during the password update process. However, consider also implementing user feedback (e.g., a notification or alert) to inform the user when an error occurs, enhancing the user experience.

client/stores/working_form.js (2)

• 17-17: The update to the setProperties method to spread the properties array is a good practice for ensuring that the content.properties array is replaced with a new array, rather than mutating the existing array. This approach helps maintain reactivity and ensures that Vue's reactivity system can track changes to the array.
• 47-47: Adding spaces around the reset method name improves readability and consistency with other method declarations in the file. It's a minor stylistic change but contributes to the overall maintainability of the code.

client/plugins/sentry.js (1)

• 49-49: The update to the beforeSend function in the Sentry configuration to exclude certain validation exceptions (specifically those with '422', '401', or 'FetchError' in their values) from being sent to Sentry is a good practice. This helps reduce noise in Sentry by filtering out expected validation errors that do not require immediate attention. Ensure that this filtering aligns with your error monitoring and handling strategy.

client/pages/forms/[slug]/edit.vue (1)

• 36-40: Wrapping the logic in the isDirty function within a try-catch block is a prudent measure to gracefully handle any unexpected errors that may occur during the comparison of form data. This ensures that the function fails safely by returning false in case of an exception, preventing potential disruptions in the user experience. Consider logging the error for debugging purposes.

client/components/global/Modal.vue (2)

• 74-74: The change from defineEmits(['close']) correctly aligns with Vue 3's composition API for defining component events. This ensures that the component can emit the close event properly when the modal is requested to close.
• 155-155: Correct usage of the emit function within the close method to emit the close event. This logic ensures that the modal component behaves as expected, emitting an event when a request to close the modal occurs. This is crucial for parent components to react accordingly to the modal's close action.

client/pages/forms/[slug]/index.vue (2)

• 126-130: Adding a try-catch block when appending custom code to the document head is a good practice to handle potential errors gracefully. This prevents the entire page from breaking due to issues in the custom code. Consider providing feedback to the user or logging the error for further investigation.
• 142-163: Refactoring the useOpnSeoMeta hook to use a computed property pageMeta for better readability and efficiency is a positive change. It simplifies the logic for setting SEO meta properties and ensures consistency in referencing these properties. This approach enhances maintainability and readability of the code.

client/components/forms/FileInput.vue (1)

• 178-178: Adding a check for the existence of the actual-input reference in the openFileUpload method before proceeding with the file upload action is a good practice. This ensures that the method does not attempt to trigger a click event on a non-existent element, which could lead to errors. This change enhances the robustness of the file input component.

client/pages/home.vue (1)

• 72-86: The adjustments made to the styling and content layout within the list element displaying form information, including adding margin classes, adjusting text size, and introducing a new list item to display the form creator's name, enhance the visual appeal and usability of the form list. These changes contribute to a more informative and user-friendly interface.