fix(nc-gui): form view elements over the attachment/pdf viewer #9867
Conversation
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
📝 WalkthroughWalkthroughThe changes in this pull request focus on enhancing the form handling functionality within the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
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? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
DarkPhoenix2704
approved these changes
Nov 20, 2024
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (3)
packages/nc-gui/components/smartsheet/Form.vue (3)
Line range hint
1-39: Consider organizing imports and dependencies more efficientlyThe component has quite a few dependencies which could impact load time and maintainability. Consider:
- Lazy loading non-critical dependencies
- Grouping related imports together (e.g., all UI components, all types, all utilities)
<script setup lang="ts"> + // UI Components import Draggable from 'vuedraggable' import { Pane, Splitpanes } from 'splitpanes' import 'splitpanes/dist/splitpanes.css' + // Utilities import tinycolor from 'tinycolor2' + // Types import { type AttachmentResType, type ColumnType, // ... rest of types } from 'nocodb-sdk'
Line range hint
365-404: Improve error handling in form submissionThe current error handling has several issues:
- Errors are logged but the function continues execution
- Generic error message doesn't help users understand what's wrong
- No proper error propagation to the UI
Consider this improved implementation:
async function submitForm() { if (!isUIAllowed('dataInsert')) return try { for (const col of localColumns.value) { if (col.show && col.title && isRequired(col, col.required) && formState.value[col.title] === undefined) { formState.value[col.title] = null } if ((!col.visible || !col.show) && col.title) { delete formState.value[col.title] delete state.value[col.title] } } await validate( Object.keys(formState.value) .map((title) => fieldMappings.value[title]) .filter((v) => v !== undefined), ) - } catch (e: any) { - console.error(e) - if (e?.errorFields?.length) { - message.error(t('msg.error.someOfTheRequiredFieldsAreEmpty')) - return - } + } catch (e: any) { + console.error('Form validation failed:', e) + if (e?.errorFields?.length) { + const fieldErrors = e.errorFields.map(f => f.name).join(', ') + message.error(t('msg.error.validationFailed', { fields: fieldErrors })) + return + } + message.error(t('msg.error.submissionFailed')) + return } const res = await insertRow({ row: { ...formState.value, ...state.value }, oldRow: {}, rowMeta: { new: true }, }) if (res) { submitted.value = true } + else { + message.error(t('msg.error.submissionFailed')) + } }
Line range hint
509-512: Refactor field visibility logic for better maintainabilityThe
shouldSkipColumnfunction mixes multiple concerns and has hardcoded field types. This could make maintenance difficult as new field types are added.-function shouldSkipColumn(col: Record<string, any>) { - return ( - isDbRequired(col) || !!col.required || (!!col.rqd && !col.cdf) || col.uidt === UITypes.QrCode || col.uidt === UITypes.Barcode - ) +} + +const IMMUTABLE_FIELD_TYPES = [UITypes.QrCode, UITypes.Barcode] as const + +function isImmutableFieldType(fieldType: string): boolean { + return IMMUTABLE_FIELD_TYPES.includes(fieldType as typeof IMMUTABLE_FIELD_TYPES[number]) +} + +function shouldSkipColumn(col: Record<string, any>) { + return ( + isDbRequired(col) || + !!col.required || + (!!col.rqd && !col.cdf) || + isImmutableFieldType(col.uidt) + ) }
7 tasks
This was referenced Nov 29, 2024
Merged
This was referenced Dec 7, 2024
This was referenced Jan 14, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Change Summary
Provide summary of changes with issue number if any.
Change type
Test/ Verification
Provide summary of changes.
Additional information / screenshots (optional)
Anything for maintainers to be made aware of