多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1876 lines
71 KiB

<script setup lang="ts">
import Draggable from 'vuedraggable'
import tinycolor from 'tinycolor2'
import { Pane, Splitpanes } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
Nc feat/form validation (#8409) * feat(nc-gui): custom validation setup * fix(nc-gui): custom validation table rounded issue * fix: add custom field validation type * fix(nc-gui): updated custom validator * feat(nc-gui): custom validation working state * fix(nc-gui): udpate default warning msg * chore(nc-gui): lint * fix(nc-gui): grayed out errors if input is focused * fix(nc-gui): input ring issue * fix(nc-gui): increase max height of validator select dropdown * fix(nc-gui): validator select dropdown item text color * fix(nc-gui): regex validation condition update * fix(nc-gui): add missing string validation types * fix(nc-gui): remove unwanted code * fix(nc-gui): move custom validation to ee * refacor(nc-gui): form view code * refactor(nc-gui): separate out formviewstore for ce & ee * fix(nc-gui): move all validations to another file * feat(nc-gui): add validation input component * feat(nc-gui): add time, month types * fix(nc-gui): add form field limit validations * fix(nc-gui): add limit link record validation * fix(nc-gui): add phonenumber & url validation type * feat(nc-gui): add email, url & phone number validators * fix(nc-gui): non working phone, email, url validation * chore(nc-giu): lint * feat(nc-gui): add attchment type validation * chore(nc-gui): lint * fix(nc-gui): add form field validation in shared form * fix(nc-gui): add form field validation in shared form oss * fix(nc-gui): oss validation conflict * fix(nc-gui): enter number validation function * fix(nc-gui): add config validators * fix(nc-gui): validation config error handling * fix(nc-gui): placeholder issue * fix(nc-gui): custom validation config error handling * fix(nc-gui): allow negative value validation * fix(nc-gui): add tooltip for required field switch * fix(nc-gui): refactor field validation from builder side * chore(nc-gui): lint * fix(nc-gui): update number validation logic * fix(nc-gui): rating field alignment issue * fix(nc-gui): small changes * fix(nc-gui): required field validation issue * fix(nc-gui): allow click on title to enable field config * feat(nc-gui): business email validation support * fix(nc-gui): add remove image btn in cell itself * fix(nc-gui): small changes * fix(nc-gui): survey form required field validation issue * fix(nc-gui): error field border issue * fix(nc-gui): currency validation input cell prefix issue * fix(nc-gui): remove console * chore(nc-gui): lint * fix: information text * fix(nc-gui): remove contains & doesn't contain option from phone number custom validation * fix(nc-gui): attachment merge conflict * fix(nc-gui): attachment cell expand btn size * fix(nc-gui): PR review changes * fix(nc-gui): lint * fix(nc-gui): updated form config heading text color * fix(nc-gui): small changes --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
8 months ago
import {
type AttachmentResType,
ProjectRoles,
RelationTypes,
UITypes,
ViewTypes,
getSystemColumns,
isLinksOrLTAR,
10 months ago
isVirtualCol,
} from 'nocodb-sdk'
import type { ImageCropperConfig } from '~/lib/types'
provide(IsFormInj, ref(true))
provide(IsGalleryInj, ref(false))
// todo: generate hideCols based on default values
const hiddenCols = ['created_at', 'updated_at']
12 months ago
const hiddenColTypes = [
UITypes.Rollup,
UITypes.Lookup,
UITypes.Formula,
UITypes.QrCode,
UITypes.Barcode,
UITypes.SpecificDBType,
UITypes.CreatedTime,
UITypes.LastModifiedTime,
UITypes.CreatedBy,
UITypes.LastModifiedBy,
12 months ago
]
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
const hiddenBubbleMenuOptions = [
RichTextBubbleMenuOptions.code,
RichTextBubbleMenuOptions.blockQuote,
RichTextBubbleMenuOptions.bulletList,
RichTextBubbleMenuOptions.numberedList,
RichTextBubbleMenuOptions.taskList,
]
const enum NcForm {
heading = 'nc-form-heading',
subheading = 'nc-form-sub-heading',
}
const { isMobileMode, user } = useGlobal()
const { $api, $e } = useNuxtApp()
const { isUIAllowed } = useRoles()
const { base } = storeToRefs(useBase())
const { getPossibleAttachmentSrc } = useAttachment()
const secondsRemain = ref(0)
const isLocked = inject(IsLockedInj, ref(false))
const isEditable = isUIAllowed('viewFieldEdit' as Permission)
const meta = inject(MetaInj, ref())
const view = inject(ActiveViewInj, ref())
feat: Improved UI (#6222) * feat: Improved ui (#6156) * refactor: revert Signed-off-by: Pranav C <pranavxc@gmail.com> feat: shared base Signed-off-by: Pranav C <pranavxc@gmail.com> fix: remove duplicate import statement Signed-off-by: Pranav C <pranavxc@gmail.com> fix: disable starred & license menu Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: fix airtable wait issue Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: enable mysql in ci Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: fix checkbox order for sqlite Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: disable quick tests Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: fix dbType env variable for CI Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: workspace API access error fix Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: enable SQLite CI CD Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: use DB_TYPE env variable Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: enable SQLite UT Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: isHub cleanup Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: add check for EE Timezone spec Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> chore: cleanup Signed-off-by: Pranav C <pranavxc@gmail.com> chore: cleanup Signed-off-by: Pranav C <pranavxc@gmail.com> test: EE check fix Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> chore: test correction Signed-off-by: Pranav C <pranavxc@gmail.com> chore: sync latest changes Signed-off-by: Pranav C <pranavxc@gmail.com> test: set EE=false Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: set NC Edition to community in workflow file Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> chore: update sdk build command Signed-off-by: Pranav C <pranavxc@gmail.com> refactor: i18n and other changes Signed-off-by: Pranav C <pranavxc@gmail.com> feat: new ui Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: sync tests Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: lint Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: shared view/base related bugs Signed-off-by: Pranav C <pranavxc@gmail.com> * test: checkbox verification sort order fix Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: fix sqlite reset Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: enable selfhosted runners Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * docs: table ops (draft) Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * Docs: screenshots for table-operations.md * refactor: introduce missing buttons Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: get all fields Signed-off-by: Pranav C <pranavxc@gmail.com> * test: UT fix- new data API response Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: EE is false Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: webhook lookup as string in CE Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * fix: include created_at and updated_at Signed-off-by: Pranav C <pranavxc@gmail.com> * test: fix UT newDataAPI response for PG Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * fix: separate api for webhook related plugins Signed-off-by: Pranav C <pranavxc@gmail.com> * test: msyql filter corrections Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: mysql group by test corrections Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: fix datatype for rating field in groupby spec for pg Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: kanban datatype correction Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: column edit for mysql- rating field Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: misc fixes Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: enable 4 workers Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: enable 2 workers per shard only Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * docs: table CRUD * Rename table-operations.md to table-crud.md * Create column-crud.md * docs: row CRUD * Rename row.md to row-crud.md * docs: project crud * docs: toolbar (skeleton) * refactor: single page UI and bug fixes Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: sync tests playwright Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: add missing dependency Signed-off-by: Pranav C <pranavxc@gmail.com> * feat: single page ui, test corrections Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: tests Signed-off-by: Pranav C <pranavxc@gmail.com> * test: project rename test correction Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: remove only Signed-off-by: Pranav C <pranavxc@gmail.com> * test: remove wrong import statement Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: delete option not visible in project context menu Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: move ws access within isEE() Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: fix groupby * test: groupby fix Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * docs: signup & landing page * docs: project crud * docs: project-crud misc * docs: toolbar fields * docs: toolbar / filters * docs: toolbar / group by * docs: toolbar / sort * docs: toolbar / row height * docs: filters additional options * docs: file re-order Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * docs: add links to column types * docs: code snippets * docs: links * docs: lookup * docs: rollup * docs: formula * docs: primary key * docs: display value * docs: development setup * docs: swagger * fix(nc-gui): encodeURIComponent for row id - closes: #6202 * docs: language * docs: expanded record * docs: import airtable * docs: airtable * docs: webhook * docs: revert file rename Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * docs: account settings * docs: audit * docs: meta management * docs: project settings * docs: shared base * docs: shared view * docs: meta sync * docs: team-auth * docs: views * docs: fix URL * docs: URL corrections * fix: shared base, view related bugs Signed-off-by: Pranav C <pranavxc@gmail.com> * test: EE check for WSaccess Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: exclude EE tests Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * fix: missing project delete closes #6215 Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: merge existing project meta if found closes #6216 Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: merge existing project meta if found closes #6216 Signed-off-by: Pranav C <pranavxc@gmail.com> --------- Signed-off-by: Pranav C <pranavxc@gmail.com> Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com> Co-authored-by: DarkPhoenix2704 <anbarasun123@gmail.com> Co-authored-by: Wing-Kam Wong <wingkwong.code@gmail.com> * refactor: docs and other bug fixes Signed-off-by: Pranav C <pranavxc@gmail.com> * feat: populate default project on super admin signup Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: include created project details in signup response if avail, missing Dockerfile Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: use custom function for resolving ts path aliases Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: add missing generate script Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: webpack build correction - ts path resolve Signed-off-by: Pranav C <pranavxc@gmail.com> --------- Signed-off-by: Pranav C <pranavxc@gmail.com> Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> Co-authored-by: mertmit <mertmit99@gmail.com> Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com> Co-authored-by: DarkPhoenix2704 <anbarasun123@gmail.com> Co-authored-by: Wing-Kam Wong <wingkwong.code@gmail.com>
1 year ago
const isPublic = inject(IsPublicInj, ref(false))
const { loadFormView, insertRow, formColumnData, formViewData, updateFormView } = useViewData(meta, view)
Nc feat/form validation (#8409) * feat(nc-gui): custom validation setup * fix(nc-gui): custom validation table rounded issue * fix: add custom field validation type * fix(nc-gui): updated custom validator * feat(nc-gui): custom validation working state * fix(nc-gui): udpate default warning msg * chore(nc-gui): lint * fix(nc-gui): grayed out errors if input is focused * fix(nc-gui): input ring issue * fix(nc-gui): increase max height of validator select dropdown * fix(nc-gui): validator select dropdown item text color * fix(nc-gui): regex validation condition update * fix(nc-gui): add missing string validation types * fix(nc-gui): remove unwanted code * fix(nc-gui): move custom validation to ee * refacor(nc-gui): form view code * refactor(nc-gui): separate out formviewstore for ce & ee * fix(nc-gui): move all validations to another file * feat(nc-gui): add validation input component * feat(nc-gui): add time, month types * fix(nc-gui): add form field limit validations * fix(nc-gui): add limit link record validation * fix(nc-gui): add phonenumber & url validation type * feat(nc-gui): add email, url & phone number validators * fix(nc-gui): non working phone, email, url validation * chore(nc-giu): lint * feat(nc-gui): add attchment type validation * chore(nc-gui): lint * fix(nc-gui): add form field validation in shared form * fix(nc-gui): add form field validation in shared form oss * fix(nc-gui): oss validation conflict * fix(nc-gui): enter number validation function * fix(nc-gui): add config validators * fix(nc-gui): validation config error handling * fix(nc-gui): placeholder issue * fix(nc-gui): custom validation config error handling * fix(nc-gui): allow negative value validation * fix(nc-gui): add tooltip for required field switch * fix(nc-gui): refactor field validation from builder side * chore(nc-gui): lint * fix(nc-gui): update number validation logic * fix(nc-gui): rating field alignment issue * fix(nc-gui): small changes * fix(nc-gui): required field validation issue * fix(nc-gui): allow click on title to enable field config * feat(nc-gui): business email validation support * fix(nc-gui): add remove image btn in cell itself * fix(nc-gui): small changes * fix(nc-gui): survey form required field validation issue * fix(nc-gui): error field border issue * fix(nc-gui): currency validation input cell prefix issue * fix(nc-gui): remove console * chore(nc-gui): lint * fix: information text * fix(nc-gui): remove contains & doesn't contain option from phone number custom validation * fix(nc-gui): attachment merge conflict * fix(nc-gui): attachment cell expand btn size * fix(nc-gui): PR review changes * fix(nc-gui): lint * fix(nc-gui): updated form config heading text color * fix(nc-gui): small changes --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
8 months ago
const {
formState,
localColumns,
visibleColumns,
activeRow,
activeField,
activeColumn,
isRequired,
updateView,
updateColMeta,
validateInfos,
validate,
clearValidate,
fieldMappings,
Nc feat/form validation (#8409) * feat(nc-gui): custom validation setup * fix(nc-gui): custom validation table rounded issue * fix: add custom field validation type * fix(nc-gui): updated custom validator * feat(nc-gui): custom validation working state * fix(nc-gui): udpate default warning msg * chore(nc-gui): lint * fix(nc-gui): grayed out errors if input is focused * fix(nc-gui): input ring issue * fix(nc-gui): increase max height of validator select dropdown * fix(nc-gui): validator select dropdown item text color * fix(nc-gui): regex validation condition update * fix(nc-gui): add missing string validation types * fix(nc-gui): remove unwanted code * fix(nc-gui): move custom validation to ee * refacor(nc-gui): form view code * refactor(nc-gui): separate out formviewstore for ce & ee * fix(nc-gui): move all validations to another file * feat(nc-gui): add validation input component * feat(nc-gui): add time, month types * fix(nc-gui): add form field limit validations * fix(nc-gui): add limit link record validation * fix(nc-gui): add phonenumber & url validation type * feat(nc-gui): add email, url & phone number validators * fix(nc-gui): non working phone, email, url validation * chore(nc-giu): lint * feat(nc-gui): add attchment type validation * chore(nc-gui): lint * fix(nc-gui): add form field validation in shared form * fix(nc-gui): add form field validation in shared form oss * fix(nc-gui): oss validation conflict * fix(nc-gui): enter number validation function * fix(nc-gui): add config validators * fix(nc-gui): validation config error handling * fix(nc-gui): placeholder issue * fix(nc-gui): custom validation config error handling * fix(nc-gui): allow negative value validation * fix(nc-gui): add tooltip for required field switch * fix(nc-gui): refactor field validation from builder side * chore(nc-gui): lint * fix(nc-gui): update number validation logic * fix(nc-gui): rating field alignment issue * fix(nc-gui): small changes * fix(nc-gui): required field validation issue * fix(nc-gui): allow click on title to enable field config * feat(nc-gui): business email validation support * fix(nc-gui): add remove image btn in cell itself * fix(nc-gui): small changes * fix(nc-gui): survey form required field validation issue * fix(nc-gui): error field border issue * fix(nc-gui): currency validation input cell prefix issue * fix(nc-gui): remove console * chore(nc-gui): lint * fix: information text * fix(nc-gui): remove contains & doesn't contain option from phone number custom validation * fix(nc-gui): attachment merge conflict * fix(nc-gui): attachment cell expand btn size * fix(nc-gui): PR review changes * fix(nc-gui): lint * fix(nc-gui): updated form config heading text color * fix(nc-gui): small changes --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
8 months ago
} = useProvideFormViewStore(meta, view, formViewData, updateFormView, isEditable)
const { preFillFormSearchParams } = storeToRefs(useViewsStore())
const reloadEventHook = inject(ReloadViewDataHookInj, createEventHook())
reloadEventHook.on(async () => {
await loadFormView()
setFormData()
})
const { fields, showAll, hideAll } = useViewColumnsOrThrow()
const { state, row } = useProvideSmartsheetRowStore(
ref({
row: formState.value,
oldRow: {},
rowMeta: { new: true },
}),
)
const columns = computed(() => meta?.value?.columns || [])
const draggableRef = ref()
const systemFieldsIds = ref<Record<string, any>[]>([])
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
const dropdownStates = ref({
showColumnMenu: false,
showEditColumn: false,
showAddColumn: false,
})
const drag = ref(false)
const emailMe = ref(false)
const submitted = ref(false)
const isLoadingFormView = ref(false)
const showCropper = ref(false)
const imageCropperData = ref<{
imageConfig: {
src: string
type: string
name: string
}
cropperConfig: ImageCropperConfig
uploadConfig?: {
path?: string
}
cropFor: 'banner' | 'logo'
}>({
imageConfig: {
src: '',
type: '',
name: '',
},
cropperConfig: {
stencilProps: {},
minHeight: 0,
minWidth: 0,
imageRestriction: 'none',
},
uploadConfig: {
path: '',
},
cropFor: 'banner',
})
const focusLabel = ref<HTMLTextAreaElement>()
const searchQuery = ref('')
const autoScrollFormField = ref(false)
const { t } = useI18n()
const { open, onChange: onChangeFile } = useFileDialog({
accept: 'image/*',
multiple: false,
reset: true,
})
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
const getFormLogoSrc = computed(() => getPossibleAttachmentSrc(parseProp(formViewData.value?.logo_url)))
const updatePreFillFormSearchParams = useDebounceFn(() => {
if (isLocked.value || !isUIAllowed('dataInsert')) return
const preFilledData = { ...formState.value, ...state.value }
const searchParams = new URLSearchParams()
for (const c of visibleColumns.value) {
if (c.title && preFilledData[c.title] && !isVirtualCol(c) && !(UITypes.Attachment === c.uidt)) {
searchParams.append(c.title, preFilledData[c.title])
}
}
preFillFormSearchParams.value = searchParams.toString()
}, 250)
async function submitForm() {
if (isLocked.value || !isUIAllowed('dataInsert')) return
Nc feat/form validation (#8409) * feat(nc-gui): custom validation setup * fix(nc-gui): custom validation table rounded issue * fix: add custom field validation type * fix(nc-gui): updated custom validator * feat(nc-gui): custom validation working state * fix(nc-gui): udpate default warning msg * chore(nc-gui): lint * fix(nc-gui): grayed out errors if input is focused * fix(nc-gui): input ring issue * fix(nc-gui): increase max height of validator select dropdown * fix(nc-gui): validator select dropdown item text color * fix(nc-gui): regex validation condition update * fix(nc-gui): add missing string validation types * fix(nc-gui): remove unwanted code * fix(nc-gui): move custom validation to ee * refacor(nc-gui): form view code * refactor(nc-gui): separate out formviewstore for ce & ee * fix(nc-gui): move all validations to another file * feat(nc-gui): add validation input component * feat(nc-gui): add time, month types * fix(nc-gui): add form field limit validations * fix(nc-gui): add limit link record validation * fix(nc-gui): add phonenumber & url validation type * feat(nc-gui): add email, url & phone number validators * fix(nc-gui): non working phone, email, url validation * chore(nc-giu): lint * feat(nc-gui): add attchment type validation * chore(nc-gui): lint * fix(nc-gui): add form field validation in shared form * fix(nc-gui): add form field validation in shared form oss * fix(nc-gui): oss validation conflict * fix(nc-gui): enter number validation function * fix(nc-gui): add config validators * fix(nc-gui): validation config error handling * fix(nc-gui): placeholder issue * fix(nc-gui): custom validation config error handling * fix(nc-gui): allow negative value validation * fix(nc-gui): add tooltip for required field switch * fix(nc-gui): refactor field validation from builder side * chore(nc-gui): lint * fix(nc-gui): update number validation logic * fix(nc-gui): rating field alignment issue * fix(nc-gui): small changes * fix(nc-gui): required field validation issue * fix(nc-gui): allow click on title to enable field config * feat(nc-gui): business email validation support * fix(nc-gui): add remove image btn in cell itself * fix(nc-gui): small changes * fix(nc-gui): survey form required field validation issue * fix(nc-gui): error field border issue * fix(nc-gui): currency validation input cell prefix issue * fix(nc-gui): remove console * chore(nc-gui): lint * fix: information text * fix(nc-gui): remove contains & doesn't contain option from phone number custom validation * fix(nc-gui): attachment merge conflict * fix(nc-gui): attachment cell expand btn size * fix(nc-gui): PR review changes * fix(nc-gui): lint * fix(nc-gui): updated form config heading text color * fix(nc-gui): small changes --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
8 months ago
for (const col of visibleColumns.value) {
if (isRequired(col, col.required) && formState.value[col.title] === undefined) {
formState.value[col.title] = null
}
}
try {
await validate(Object.keys(formState.value).map((title) => fieldMappings.value[title]))
} catch (e: any) {
if (e?.errorFields?.length) {
message.error(t('msg.error.someOfTheRequiredFieldsAreEmpty'))
return
}
}
await insertRow({
row: { ...formState.value, ...state.value },
oldRow: {},
rowMeta: { new: true },
})
submitted.value = true
}
async function clearForm() {
if (isLocked.value || !isUIAllowed('dataInsert')) return
formState.value = {}
state.value = {}
Nc feat/form validation (#8409) * feat(nc-gui): custom validation setup * fix(nc-gui): custom validation table rounded issue * fix: add custom field validation type * fix(nc-gui): updated custom validator * feat(nc-gui): custom validation working state * fix(nc-gui): udpate default warning msg * chore(nc-gui): lint * fix(nc-gui): grayed out errors if input is focused * fix(nc-gui): input ring issue * fix(nc-gui): increase max height of validator select dropdown * fix(nc-gui): validator select dropdown item text color * fix(nc-gui): regex validation condition update * fix(nc-gui): add missing string validation types * fix(nc-gui): remove unwanted code * fix(nc-gui): move custom validation to ee * refacor(nc-gui): form view code * refactor(nc-gui): separate out formviewstore for ce & ee * fix(nc-gui): move all validations to another file * feat(nc-gui): add validation input component * feat(nc-gui): add time, month types * fix(nc-gui): add form field limit validations * fix(nc-gui): add limit link record validation * fix(nc-gui): add phonenumber & url validation type * feat(nc-gui): add email, url & phone number validators * fix(nc-gui): non working phone, email, url validation * chore(nc-giu): lint * feat(nc-gui): add attchment type validation * chore(nc-gui): lint * fix(nc-gui): add form field validation in shared form * fix(nc-gui): add form field validation in shared form oss * fix(nc-gui): oss validation conflict * fix(nc-gui): enter number validation function * fix(nc-gui): add config validators * fix(nc-gui): validation config error handling * fix(nc-gui): placeholder issue * fix(nc-gui): custom validation config error handling * fix(nc-gui): allow negative value validation * fix(nc-gui): add tooltip for required field switch * fix(nc-gui): refactor field validation from builder side * chore(nc-gui): lint * fix(nc-gui): update number validation logic * fix(nc-gui): rating field alignment issue * fix(nc-gui): small changes * fix(nc-gui): required field validation issue * fix(nc-gui): allow click on title to enable field config * feat(nc-gui): business email validation support * fix(nc-gui): add remove image btn in cell itself * fix(nc-gui): small changes * fix(nc-gui): survey form required field validation issue * fix(nc-gui): error field border issue * fix(nc-gui): currency validation input cell prefix issue * fix(nc-gui): remove console * chore(nc-gui): lint * fix: information text * fix(nc-gui): remove contains & doesn't contain option from phone number custom validation * fix(nc-gui): attachment merge conflict * fix(nc-gui): attachment cell expand btn size * fix(nc-gui): PR review changes * fix(nc-gui): lint * fix(nc-gui): updated form config heading text color * fix(nc-gui): small changes --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
8 months ago
clearValidate()
reloadEventHook.trigger()
}
function isDbRequired(column: Record<string, any>) {
if (hiddenCols.includes(column.fk_column_id)) {
return false
}
let isRequired =
// confirm column is not virtual
(!isVirtualCol(column) &&
// column required / not null
column.rqd &&
// column default value
!column.cdf &&
// confirm it's not foreign key
!columns.value.some(
(c: Record<string, any>) =>
feat: Improved UI (#6222) * feat: Improved ui (#6156) * refactor: revert Signed-off-by: Pranav C <pranavxc@gmail.com> feat: shared base Signed-off-by: Pranav C <pranavxc@gmail.com> fix: remove duplicate import statement Signed-off-by: Pranav C <pranavxc@gmail.com> fix: disable starred & license menu Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: fix airtable wait issue Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: enable mysql in ci Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: fix checkbox order for sqlite Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: disable quick tests Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: fix dbType env variable for CI Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: workspace API access error fix Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: enable SQLite CI CD Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: use DB_TYPE env variable Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: enable SQLite UT Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: isHub cleanup Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: add check for EE Timezone spec Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> chore: cleanup Signed-off-by: Pranav C <pranavxc@gmail.com> chore: cleanup Signed-off-by: Pranav C <pranavxc@gmail.com> test: EE check fix Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> chore: test correction Signed-off-by: Pranav C <pranavxc@gmail.com> chore: sync latest changes Signed-off-by: Pranav C <pranavxc@gmail.com> test: set EE=false Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: set NC Edition to community in workflow file Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> chore: update sdk build command Signed-off-by: Pranav C <pranavxc@gmail.com> refactor: i18n and other changes Signed-off-by: Pranav C <pranavxc@gmail.com> feat: new ui Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: sync tests Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: lint Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: shared view/base related bugs Signed-off-by: Pranav C <pranavxc@gmail.com> * test: checkbox verification sort order fix Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: fix sqlite reset Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: enable selfhosted runners Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * docs: table ops (draft) Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * Docs: screenshots for table-operations.md * refactor: introduce missing buttons Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: get all fields Signed-off-by: Pranav C <pranavxc@gmail.com> * test: UT fix- new data API response Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: EE is false Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: webhook lookup as string in CE Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * fix: include created_at and updated_at Signed-off-by: Pranav C <pranavxc@gmail.com> * test: fix UT newDataAPI response for PG Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * fix: separate api for webhook related plugins Signed-off-by: Pranav C <pranavxc@gmail.com> * test: msyql filter corrections Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: mysql group by test corrections Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: fix datatype for rating field in groupby spec for pg Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: kanban datatype correction Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: column edit for mysql- rating field Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: misc fixes Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: enable 4 workers Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: enable 2 workers per shard only Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * docs: table CRUD * Rename table-operations.md to table-crud.md * Create column-crud.md * docs: row CRUD * Rename row.md to row-crud.md * docs: project crud * docs: toolbar (skeleton) * refactor: single page UI and bug fixes Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: sync tests playwright Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: add missing dependency Signed-off-by: Pranav C <pranavxc@gmail.com> * feat: single page ui, test corrections Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: tests Signed-off-by: Pranav C <pranavxc@gmail.com> * test: project rename test correction Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: remove only Signed-off-by: Pranav C <pranavxc@gmail.com> * test: remove wrong import statement Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: delete option not visible in project context menu Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: move ws access within isEE() Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: fix groupby * test: groupby fix Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * docs: signup & landing page * docs: project crud * docs: project-crud misc * docs: toolbar fields * docs: toolbar / filters * docs: toolbar / group by * docs: toolbar / sort * docs: toolbar / row height * docs: filters additional options * docs: file re-order Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * docs: add links to column types * docs: code snippets * docs: links * docs: lookup * docs: rollup * docs: formula * docs: primary key * docs: display value * docs: development setup * docs: swagger * fix(nc-gui): encodeURIComponent for row id - closes: #6202 * docs: language * docs: expanded record * docs: import airtable * docs: airtable * docs: webhook * docs: revert file rename Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * docs: account settings * docs: audit * docs: meta management * docs: project settings * docs: shared base * docs: shared view * docs: meta sync * docs: team-auth * docs: views * docs: fix URL * docs: URL corrections * fix: shared base, view related bugs Signed-off-by: Pranav C <pranavxc@gmail.com> * test: EE check for WSaccess Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: exclude EE tests Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * fix: missing project delete closes #6215 Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: merge existing project meta if found closes #6216 Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: merge existing project meta if found closes #6216 Signed-off-by: Pranav C <pranavxc@gmail.com> --------- Signed-off-by: Pranav C <pranavxc@gmail.com> Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com> Co-authored-by: DarkPhoenix2704 <anbarasun123@gmail.com> Co-authored-by: Wing-Kam Wong <wingkwong.code@gmail.com> * refactor: docs and other bug fixes Signed-off-by: Pranav C <pranavxc@gmail.com> * feat: populate default project on super admin signup Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: include created project details in signup response if avail, missing Dockerfile Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: use custom function for resolving ts path aliases Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: add missing generate script Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: webpack build correction - ts path resolve Signed-off-by: Pranav C <pranavxc@gmail.com> --------- Signed-off-by: Pranav C <pranavxc@gmail.com> Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> Co-authored-by: mertmit <mertmit99@gmail.com> Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com> Co-authored-by: DarkPhoenix2704 <anbarasun123@gmail.com> Co-authored-by: Wing-Kam Wong <wingkwong.code@gmail.com>
1 year ago
isLinksOrLTAR(c.uidt) &&
c?.colOptions?.type === RelationTypes.BELONGS_TO &&
column.fk_column_id === c.colOptions.fk_child_column_id,
)) ||
// primary column
(column.pk && !column.ai && !column.cdf)
if (column.uidt === UITypes.LinkToAnotherRecord && column.colOptions.type === RelationTypes.BELONGS_TO) {
const col = columns.value.find((c: Record<string, any>) => c.id === column.colOptions.fk_child_column_id) as Record<
string,
any
>
if (col.rqd && !col.default) {
isRequired = true
}
}
return isRequired
}
/** Block user from drag n drop required column to hidden fields */
function onMoveCallback(event: any) {
if (event.from !== event.to && shouldSkipColumn(event.draggedContext.element)) {
return false
}
}
async function onMove(event: any, isVisibleFormFields = false) {
if (isLocked.value || !isEditable) return
10 months ago
let { newIndex, element } = event.moved
const fieldIndex = fields.value?.findIndex((f) => f?.fk_column_id === element.fk_column_id)
if (fieldIndex === -1 || fieldIndex === undefined || !fields.value?.[fieldIndex]) return
if (isVisibleFormFields) {
element = localColumns.value[localColumns.value?.findIndex((c) => c.fk_column_id === element.fk_column_id)]
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
newIndex = localColumns.value.findIndex((c) => c.fk_column_id === visibleColumns.value[newIndex].fk_column_id)
}
if (!localColumns.value.length || localColumns.value.length === 1) {
element.order = 1
} else if (localColumns.value.length - 1 === newIndex) {
element.order = Math.max(...localColumns.value.map((e) => e?.order ?? 0)) + 1
} else if (newIndex === 0) {
element.order = Math.min(...localColumns.value.map((e) => e?.order ?? 0)) / 2
} else {
element.order = ((localColumns.value[newIndex - 1]?.order ?? 0) + (localColumns.value[newIndex + 1].order ?? 0)) / 2
}
await $api.dbView.formColumnUpdate(element.id, element)
fields.value[fieldIndex] = element as any
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
localColumns.value = [...localColumns.value].sort((a, b) => {
if (a.order !== undefined && b.order !== undefined) {
return a.order - b.order
}
return 0
})
$e('a:form-view:reorder')
}
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
async function showOrHideColumn(column: Record<string, any>, show: boolean, isFormSettings = false) {
if (isLocked.value || !isEditable) return
if (shouldSkipColumn(column)) {
// Required field can't be moved
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
!isFormSettings && message.info(t('msg.info.requriedFieldsCantBeMoved'))
return
}
const fieldIndex = fields.value?.findIndex((f) => f?.fk_column_id === column.fk_column_id)
if (fieldIndex !== -1 && fieldIndex !== undefined && fields.value?.[fieldIndex]) {
column.show = show
await $api.dbView.formColumnUpdate(column.id, column)
fields.value[fieldIndex] = column as any
reloadEventHook.trigger()
if (show) {
$e('a:form-view:show-columns')
} else {
$e('a:form-view:hide-columns')
}
}
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
if (!show && !isFormSettings && activeRow.value) {
activeRow.value = ''
}
}
function shouldSkipColumn(col: Record<string, any>) {
return (
isDbRequired(col) || !!col.required || (!!col.rqd && !col.cdf) || col.uidt === UITypes.QrCode || col.uidt === UITypes.Barcode
)
}
async function handleAddOrRemoveAllColumns<T>(value: T) {
if (isLocked.value || !isEditable) return
if (value) {
for (const col of (localColumns as Record<string, any>)?.value) {
col.show = true
}
await showAll(systemFieldsIds.value)
$e('a:form-view:add-all')
} else {
for (const col of (localColumns as Record<string, any>)?.value) {
if (!shouldSkipColumn(col)) col.show = false
}
await hideAll(
(localColumns as Record<string, any>)?.value
.filter((col: Record<string, any>) => shouldSkipColumn(col))
.map((col: Record<string, any>) => col.fk_column_id),
)
$e('a:form-view:remove-all')
}
}
async function checkSMTPStatus() {
if (emailMe.value) {
const emailPluginActive = await $api.plugin.status('SMTP')
if (!emailPluginActive) {
emailMe.value = false
// Please activate SMTP plugin in App store for enabling email notification
message.info(t('msg.toast.formEmailSMTP'))
return false
}
}
return true
}
function setFormData() {
const col = formColumnData?.value || []
systemFieldsIds.value = getSystemColumns(col).map((c) => c.fk_column_id)
formViewData.value = {
banner_image_url: null,
logo_url: null,
...formViewData.value,
submit_another_form: !!(formViewData.value?.submit_another_form ?? 0),
show_blank_form: !!(formViewData.value?.show_blank_form ?? 0),
meta: {
hide_branding: false,
background_color: '#F9F9FA',
hide_banner: false,
...(parseProp(formViewData.value?.meta) ?? {}),
},
}
// email me
let data: Record<string, boolean> = {}
try {
data = JSON.parse(formViewData.value?.email || '') || {}
} catch (e) {}
emailMe.value = data[user.value?.email as string]
localColumns.value = col
.filter((f) => !hiddenColTypes.includes(f.uidt) && !systemFieldsIds.value.includes(f.fk_column_id))
.sort((a, b) => a.order - b.order)
.map((c) => ({ ...c, required: !!c.required }))
}
async function updateEmail() {
try {
if (!(await checkSMTPStatus())) return
const data = formViewData.value?.email ? JSON.parse(formViewData.value?.email) : {}
data[user.value?.email as string] = emailMe.value
formViewData.value!.email = JSON.stringify(data)
} catch (e) {}
}
function onEmailChange() {
updateEmail()
updateView()
}
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
function resetFormFieldState() {
if (!activeField.value) return
// Reset the formstate if column type is changed or if column is deleted
delete formState.value[activeField.value.title]
if (isVirtualCol(activeField.value)) {
delete state.value[activeField.value.title]
}
}
async function addColumnCallback() {
dropdownStates.value.showAddColumn = false
reloadEventHook.trigger()
}
async function editColumnCallback() {
dropdownStates.value.showEditColumn = false
if (activeField.value && activeField.value.uidt !== activeColumn.value?.uidt) {
resetFormFieldState()
}
reloadEventHook.trigger()
}
async function deleteColumnCallback() {
resetFormFieldState()
reloadEventHook.trigger()
}
const onFormItemClick = (element: any, sidebarClick: boolean = false) => {
if (isLocked.value || !isEditable) return
if (sidebarClick) {
autoScrollFormField.value = true
}
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
activeRow.value = element.id
}
const handleChangeBackground = (color: string) => {
if (isLocked.value || !isEditable) return
const tcolor = tinycolor(color)
if (tcolor.isValid()) {
;(formViewData.value?.meta as Record<string, any>).background_color = color
updateView()
}
}
const openUploadImage = (isUploadBanner: boolean) => {
if (!isEditable || !isEeUI) return
imageCropperData.value.uploadConfig = {
path: [NOCO, base.value.id, meta.value?.id, formViewData.value?.id].join('/'),
}
if (isUploadBanner) {
imageCropperData.value.cropperConfig = {
...imageCropperData.value.cropperConfig,
stencilProps: {
aspectRatio: 4 / 1,
},
minHeight: 100,
minWidth: 0,
}
imageCropperData.value.cropFor = 'banner'
} else {
imageCropperData.value.cropperConfig = {
...imageCropperData.value.cropperConfig,
stencilProps: {
aspectRatio: undefined,
},
minHeight: 150,
minWidth: 150,
}
imageCropperData.value.cropFor = 'logo'
}
open()
}
onChangeFile((files) => {
if (files && files[0]) {
// 1. Revoke the object URL, to allow the garbage collector to destroy the uploaded before file
if (imageCropperData.value.imageConfig.src) {
URL.revokeObjectURL(imageCropperData.value.imageConfig.src)
}
// 2. Create the blob link to the file to optimize performance:
const blob = URL.createObjectURL(files[0])
// 3. Update the image. The type will be derived from the extension
imageCropperData.value.imageConfig = {
src: blob,
type: files[0].type,
name: files[0].name,
}
showCropper.value = true
}
})
const handleOnUploadImage = (data: AttachmentResType = null) => {
if (imageCropperData.value.cropFor === 'banner') {
formViewData.value!.banner_image_url = data
} else {
formViewData.value!.logo_url = data
}
updateView()
}
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
const onFocusActiveFieldLabel = (e: FocusEvent) => {
;(e.target as HTMLTextAreaElement).select()
}
const updateFieldTitle = (value: string) => {
if (!activeField.value) return
if (activeField.value.title === value) {
activeField.value.label = null
} else {
activeField.value.label = value
}
}
onMounted(async () => {
if (imageCropperData.value.src) {
URL.revokeObjectURL(imageCropperData.value.imageConfig.src)
}
preFillFormSearchParams.value = ''
isLoadingFormView.value = true
await loadFormView()
setFormData()
isLoadingFormView.value = false
})
watch(submitted, (v) => {
if (v && formViewData.value?.show_blank_form) {
secondsRemain.value = 5
const intvl = setInterval(() => {
if (--secondsRemain.value < 0) {
submitted.value = false
clearForm()
clearInterval(intvl)
}
}, 1000)
}
})
watch(view, (nextView) => {
if (nextView?.type === ViewTypes.FORM) {
reloadEventHook.trigger()
}
})
watch(
[formState, state],
async () => {
for (const virtualField in state.value) {
formState.value[virtualField] = state.value[virtualField]
}
updatePreFillFormSearchParams()
try {
await validate(Object.keys(formState.value).map((title) => fieldMappings.value[title]))
Nc feat/form validation (#8409) * feat(nc-gui): custom validation setup * fix(nc-gui): custom validation table rounded issue * fix: add custom field validation type * fix(nc-gui): updated custom validator * feat(nc-gui): custom validation working state * fix(nc-gui): udpate default warning msg * chore(nc-gui): lint * fix(nc-gui): grayed out errors if input is focused * fix(nc-gui): input ring issue * fix(nc-gui): increase max height of validator select dropdown * fix(nc-gui): validator select dropdown item text color * fix(nc-gui): regex validation condition update * fix(nc-gui): add missing string validation types * fix(nc-gui): remove unwanted code * fix(nc-gui): move custom validation to ee * refacor(nc-gui): form view code * refactor(nc-gui): separate out formviewstore for ce & ee * fix(nc-gui): move all validations to another file * feat(nc-gui): add validation input component * feat(nc-gui): add time, month types * fix(nc-gui): add form field limit validations * fix(nc-gui): add limit link record validation * fix(nc-gui): add phonenumber & url validation type * feat(nc-gui): add email, url & phone number validators * fix(nc-gui): non working phone, email, url validation * chore(nc-giu): lint * feat(nc-gui): add attchment type validation * chore(nc-gui): lint * fix(nc-gui): add form field validation in shared form * fix(nc-gui): add form field validation in shared form oss * fix(nc-gui): oss validation conflict * fix(nc-gui): enter number validation function * fix(nc-gui): add config validators * fix(nc-gui): validation config error handling * fix(nc-gui): placeholder issue * fix(nc-gui): custom validation config error handling * fix(nc-gui): allow negative value validation * fix(nc-gui): add tooltip for required field switch * fix(nc-gui): refactor field validation from builder side * chore(nc-gui): lint * fix(nc-gui): update number validation logic * fix(nc-gui): rating field alignment issue * fix(nc-gui): small changes * fix(nc-gui): required field validation issue * fix(nc-gui): allow click on title to enable field config * feat(nc-gui): business email validation support * fix(nc-gui): add remove image btn in cell itself * fix(nc-gui): small changes * fix(nc-gui): survey form required field validation issue * fix(nc-gui): error field border issue * fix(nc-gui): currency validation input cell prefix issue * fix(nc-gui): remove console * chore(nc-gui): lint * fix: information text * fix(nc-gui): remove contains & doesn't contain option from phone number custom validation * fix(nc-gui): attachment merge conflict * fix(nc-gui): attachment cell expand btn size * fix(nc-gui): PR review changes * fix(nc-gui): lint * fix(nc-gui): updated form config heading text color * fix(nc-gui): small changes --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
8 months ago
} catch {}
},
{
deep: true,
},
)
const handleAutoScrollFormField = (title: string, isSidebar: boolean) => {
const field = document.querySelector(
`${isSidebar ? '.nc-form-field-item-' : '.nc-form-drag-'}${CSS.escape(title?.replaceAll(' ', ''))}`,
)
if (field) {
setTimeout(() => {
field?.scrollIntoView({ behavior: 'smooth', block: 'center' })
}, 50)
}
}
watch(activeField, (newValue, oldValue) => {
if (newValue && autoScrollFormField.value) {
nextTick(() => {
handleAutoScrollFormField(newValue.title, false)
})
} else if (oldValue) {
nextTick(() => {
handleAutoScrollFormField(oldValue.title, true)
})
}
autoScrollFormField.value = false
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
dropdownStates.value = {
...dropdownStates.value,
showColumnMenu: false,
showEditColumn: false,
}
})
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
watch([focusLabel, activeField], () => {
if (activeField && focusLabel.value) {
nextTick(() => {
focusLabel.value?.focus()
})
}
})
useEventListener(
document,
'keydown',
(e: KeyboardEvent) => {
const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
switch (e.key?.toLowerCase()) {
case 's':
if (
cmdOrCtrl &&
!(
['input', 'textarea'].includes((e.target as any).nodeName.toLowerCase()) ||
(e.target as any)?.getAttribute('contenteditable')
)
) {
e.preventDefault()
updateView()
}
break
}
},
true,
)
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
useEventListener(
document,
'mousedown',
(e: MouseEvent) => {
if (
(draggableRef.value?.targetDomElement && draggableRef.value?.targetDomElement.contains(e.target)) ||
(e.target as HTMLElement)?.closest(
'.nc-form-right-panel, [class*="dropdown"], .nc-form-rich-text-field, .ant-modal, .ant-modal-wrap, .nc-share-base-button, .nc-form-right-sidebar-content-resizable-wrapper .splitpanes__splitter',
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
)
) {
return
}
activeRow.value = ''
},
true,
)
</script>
<template>
<div class="h-full relative">
<template v-if="isMobileMode">
<div class="pl-6 pr-[120px] py-6 bg-white flex-col justify-start items-start gap-2.5 inline-flex">
<div class="text-gray-500 text-5xl font-semibold leading-16">
{{ $t('general.available') }}<br />{{ $t('title.inDesktop') }}
</div>
<div class="text-gray-500 text-base font-medium leading-normal">
{{ $t('msg.formViewNotSupportedOnMobile') }}
</div>
</div>
</template>
<template v-else>
<div
v-if="submitted"
class="h-full p-6 overflow-auto nc-form-scrollbar"
:style="{ background: parseProp(formViewData?.meta)?.background_color || '#F9F9FA' }"
data-testid="nc-form-wrapper-submit"
>
<div class="max-w-[max(33%,688px)] mx-auto">
<GeneralFormBanner
v-if="!parseProp(formViewData?.meta).hide_banner"
:banner-image-url="formViewData?.banner_image_url"
/>
<div
class="transition-all duration-300 ease-in relative my-6 bg-white rounded-3xl border-1 border-gray-200 px-4 py-8 lg:p-12 md:(p-8 dark:bg-slate-700)"
>
<div v-if="formViewData" class="items-center justify-center text-left mt-2">
<div>
<h1 class="text-2xl font-bold text-gray-900 mb-4">
{{ formViewData.heading }}
</h1>
<div v-if="formViewData.subheading?.trim()">
<LazyCellRichText
:value="formViewData.subheading"
class="font-medium text-base text-gray-500 !h-auto mb-4 -ml-1"
is-form-field
read-only
sync-value-change
/>
</div>
</div>
<div class="flex justify-center">
<div class="w-full">
<a-alert class="nc-form-success-msg !my-4 !py-4 text-left !rounded-lg" type="success" outlined>
<template #message>
<LazyCellRichText
v-if="formViewData?.success_msg?.trim()"
:value="formViewData?.success_msg"
class="!h-auto -ml-1"
is-form-field
read-only
sync-value-change
/>
<span v-else> {{ $t('msg.successfullySubmittedFormData') }} </span>
</template>
</a-alert>
<div class="mt-16 w-full flex justify-between items-center gap-3">
<div v-if="formViewData.show_blank_form" class="text-gray-400">
{{
$t('msg.newFormWillBeLoaded', {
seconds: secondsRemain,
})
}}
</div>
<div v-if="formViewData.submit_another_form || !isPublic" class="flex-1 flex justify-end">
<NcButton
type="primary"
size="small"
@click="
() => {
submitted = false
clearForm()
}
"
>
{{ $t('activity.submitAnotherForm') }}
</NcButton>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-else class="nc-form-wrapper h-full w-full flex relative" data-testid="nc-form-wrapper">
<div v-if="isLoadingFormView" class="flex-1 flex items-center justify-center text-center h-full">
<div>
<GeneralLoader size="xlarge" />
<div class="mt-2">
{{ $t('general.loading') }}
</div>
</div>
</div>
<template v-else-if="formViewData">
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<SmartsheetFormLayout>
<template #preview>
<div
class="w-full h-full overflow-auto nc-form-scrollbar p-6"
:style="{background:(formViewData?.meta as Record<string,any>).background_color || '#F9F9FA'}"
>
<div class="min-w-[616px] overflow-x-auto nc-form-scrollbar">
<GeneralImageCropper
v-if="isEditable"
v-model:show-cropper="showCropper"
:image-config="imageCropperData.imageConfig"
:cropper-config="imageCropperData.cropperConfig"
:upload-config="imageCropperData.uploadConfig"
@submit="handleOnUploadImage"
></GeneralImageCropper>
<!-- cover image -->
<div v-if="!parseProp(formViewData?.meta).hide_banner" class="group relative max-w-[max(33%,688px)] mx-auto">
<GeneralFormBanner
:key="formViewData.banner_image_url?.path"
:banner-image-url="formViewData.banner_image_url"
/>
<div class="absolute bottom-0 right-0 hidden group-hover:block">
<div class="flex items-center space-x-1 m-2">
<NcTooltip :disabled="isEeUI">
<template #title>
<div class="text-center">
{{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
</div>
</template>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<NcButton
type="secondary"
size="small"
class="nc-form-upload-banner-btn"
data-testid="nc-form-upload-banner-btn"
:disabled="!isEeUI"
@click="openUploadImage(true)"
>
<div class="flex gap-2 items-center">
<component :is="iconMap.upload" class="w-4 h-4" />
<span>
{{ formViewData.banner_image_url ? $t('general.replace') : $t('general.upload') }}
{{ $t('general.banner') }}
</span>
</div>
</NcButton>
</NcTooltip>
<NcTooltip v-if="isEeUI && formViewData.banner_image_url">
<template #title> {{ $t('general.delete') }} {{ $t('general.banner') }} </template>
<NcButton
type="secondary"
size="small"
class="nc-form-delete-banner-btn"
data-testid="nc-form-delete-banner-btn"
@click="
() => {
if (isEditable) {
formViewData!.banner_image_url = null
updateView()
}
}
"
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
>
<div class="flex gap-2 items-center">
<component :is="iconMap.delete" class="w-4 h-4" />
</div>
</NcButton>
</NcTooltip>
</div>
</div>
</div>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<a-card
class="!py-8 !lg:py-12 !border-gray-200 !rounded-3xl !mt-6 !max-w-[max(33%,688px)] !mx-auto"
:body-style="{
margin: '0 auto',
padding: '0px !important',
}"
>
Nc feat/form validation (#8409) * feat(nc-gui): custom validation setup * fix(nc-gui): custom validation table rounded issue * fix: add custom field validation type * fix(nc-gui): updated custom validator * feat(nc-gui): custom validation working state * fix(nc-gui): udpate default warning msg * chore(nc-gui): lint * fix(nc-gui): grayed out errors if input is focused * fix(nc-gui): input ring issue * fix(nc-gui): increase max height of validator select dropdown * fix(nc-gui): validator select dropdown item text color * fix(nc-gui): regex validation condition update * fix(nc-gui): add missing string validation types * fix(nc-gui): remove unwanted code * fix(nc-gui): move custom validation to ee * refacor(nc-gui): form view code * refactor(nc-gui): separate out formviewstore for ce & ee * fix(nc-gui): move all validations to another file * feat(nc-gui): add validation input component * feat(nc-gui): add time, month types * fix(nc-gui): add form field limit validations * fix(nc-gui): add limit link record validation * fix(nc-gui): add phonenumber & url validation type * feat(nc-gui): add email, url & phone number validators * fix(nc-gui): non working phone, email, url validation * chore(nc-giu): lint * feat(nc-gui): add attchment type validation * chore(nc-gui): lint * fix(nc-gui): add form field validation in shared form * fix(nc-gui): add form field validation in shared form oss * fix(nc-gui): oss validation conflict * fix(nc-gui): enter number validation function * fix(nc-gui): add config validators * fix(nc-gui): validation config error handling * fix(nc-gui): placeholder issue * fix(nc-gui): custom validation config error handling * fix(nc-gui): allow negative value validation * fix(nc-gui): add tooltip for required field switch * fix(nc-gui): refactor field validation from builder side * chore(nc-gui): lint * fix(nc-gui): update number validation logic * fix(nc-gui): rating field alignment issue * fix(nc-gui): small changes * fix(nc-gui): required field validation issue * fix(nc-gui): allow click on title to enable field config * feat(nc-gui): business email validation support * fix(nc-gui): add remove image btn in cell itself * fix(nc-gui): small changes * fix(nc-gui): survey form required field validation issue * fix(nc-gui): error field border issue * fix(nc-gui): currency validation input cell prefix issue * fix(nc-gui): remove console * chore(nc-gui): lint * fix: information text * fix(nc-gui): remove contains & doesn't contain option from phone number custom validation * fix(nc-gui): attachment merge conflict * fix(nc-gui): attachment cell expand btn size * fix(nc-gui): PR review changes * fix(nc-gui): lint * fix(nc-gui): updated form config heading text color * fix(nc-gui): small changes --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
8 months ago
<a-form :model="formState" class="nc-form" no-style>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<!-- form header -->
<div class="flex flex-col px-4 lg:px-6">
<!-- Form logo -->
<div class="mb-4">
<div
class="nc-form-logo-wrapper mx-6 group relative inline-block h-56px overflow-hidden flex items-center"
:class="
formViewData.logo_url
? 'max-w-189px hover:(w-full bg-gray-100 rounded-xl) '
: 'bg-gray-100 max-w-147px rounded-xl'
"
style="transition: all 0.3s ease-in"
>
<LazyCellAttachmentImage
v-if="formViewData.logo_url"
:key="formViewData.logo_url?.path"
:srcs="getFormLogoSrc"
class="flex-none nc-form-logo !object-contain object-left max-h-full max-w-full !m-0"
/>
<div
class="items-center space-x-1 flex-nowrap m-3"
:class="formViewData.logo_url ? 'hidden absolute top-0 left-0 group-hover:flex' : 'flex'"
>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<NcTooltip :disabled="isEeUI">
<template #title>
<div class="text-center">
{{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
</div>
</template>
<NcButton
v-if="isEditable"
type="secondary"
size="small"
class="nc-form-upload-logo-btn"
data-testid="nc-form-upload-log-btn"
:disabled="!isEeUI"
@click="openUploadImage(false)"
>
<div class="flex gap-2 items-center">
<component :is="iconMap.upload" class="w-4 h-4" />
<span> {{ formViewData.logo_url ? $t('general.replace') : $t('general.upload') }} Logo</span>
</div>
</NcButton>
</NcTooltip>
<NcTooltip v-if="isEeUI && formViewData.logo_url">
<template #title> {{ $t('general.delete') }} {{ $t('general.logo') }} </template>
<NcButton
type="secondary"
size="small"
class="nc-form-delete-logo-btn"
data-testid="nc-form-delete-logo-btn"
@click="
() => {
if (isEditable) {
formViewData!.logo_url = null
updateView()
}
}
"
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
>
<div class="flex gap-2 items-center">
<component :is="iconMap.delete" class="w-4 h-4" />
</div>
</NcButton>
</NcTooltip>
</div>
</div>
</div>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<!-- form title -->
<div
class="border-transparent px-4 lg:px-6"
:class="[
{
'rounded-2xl overflow-hidden border-2 cursor-pointer mb-1 py-4 lg:py-6 focus-within:bg-gray-50':
isEditable,
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
},
{
'mb-4 py-0 lg:py-0': !isEditable,
},
{
'hover:bg-gray-50': activeRow !== NcForm.heading && isEditable,
},
{
'bg-gray-50': activeRow === NcForm.heading && isEditable,
},
{
'!hover:bg-white !ring-0 !cursor-auto': isLocked,
},
]"
@click.stop="onFormItemClick({ id: NcForm.heading })"
>
<a-form-item v-if="isEditable" class="!my-0">
<a-textarea
v-model:value="formViewData.heading"
class="nc-form-focus-element !p-0 !m-0 w-full !font-bold !text-2xl !border-0 !rounded-none !text-gray-900"
:style="{
'borderRightWidth': '0px !important',
'height': '70px',
'max-height': '250px',
'resize': 'vertical',
}"
auto-size
size="large"
hide-details
:disabled="isLocked"
placeholder="Form Title"
:bordered="false"
:data-testid="NcForm.heading"
:data-title="NcForm.heading"
@input="updateView"
@focus="activeRow = NcForm.heading"
@blur="activeRow = ''"
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
/>
</a-form-item>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<div v-else class="font-bold text-2xl text-gray-900">
{{ formViewData.heading }}
</div>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
</div>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<!-- form description -->
<div
class="border-transparent px-4 lg:px-6"
:class="[
{
'rounded-2xl border-2 cursor-pointer mb-1 py-4 lg:py-6 focus-within:bg-gray-50': isEditable,
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
},
{
'mb-4 py-0 lg:py-0': !isEditable,
},
{
'hover:bg-gray-50': activeRow !== NcForm.subheading && isEditable,
},
{
'bg-gray-50': activeRow === NcForm.subheading && isEditable,
},
{
'!hover:bg-white !ring-0 !cursor-auto': isLocked,
},
]"
@click.stop="onFormItemClick({ id: NcForm.subheading })"
>
<LazyCellRichText
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
v-if="isEditable && !isLocked"
v-model:value="formViewData.subheading"
:placeholder="$t('msg.info.formDesc')"
class="nc-form-description nc-form-focus-element font-medium text-base !text-gray-500 -ml-1"
is-form-field
:autofocus="activeRow === NcForm.subheading"
:data-testid="NcForm.subheading"
:data-title="NcForm.subheading"
@update:value="updateView"
@focus="activeRow = NcForm.subheading"
@blur="activeRow = ''"
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
/>
<LazyCellRichText
v-else-if="formViewData.subheading"
:value="formViewData.subheading"
class="font-medium text-base !text-gray-500 -ml-1"
is-form-field
read-only
sync-value-change
/>
</div>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
</div>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<Draggable
ref="draggableRef"
:model-value="visibleColumns"
item-key="fk_column_id"
draggable=".item"
handle=".nc-form-field-drag-handler"
group="form-inputs"
ghost-class="nc-form-field-ghost"
class="h-full px-4 lg:px-6"
:move="onMoveCallback"
:disabled="isLocked || !isEditable"
@change="onMove($event, true)"
>
<template #item="{ element }">
<div
:key="element.id"
class="nc-editable nc-form-focus-element item relative bg-white p-4 lg:p-6"
:class="[
`nc-form-drag-${element.title.replaceAll(' ', '')}`,
{
'rounded-2xl border-2 my-1': isEditable,
},
{
'border-transparent my-0': !isEditable,
},
{
'nc-form-field-drag-handler border-transparent hover:(bg-gray-50) cursor-pointer':
activeRow !== element.id && isEditable,
},
{
'border-brand-500': activeRow === element.id,
},
{
'!hover:bg-white !ring-0 !cursor-auto': isLocked,
},
]"
:data-title="element.title"
data-testid="nc-form-fields"
@click.stop="onFormItemClick(element)"
>
<div v-if="activeRow === element.id" class="absolute -left-3 top-6">
<NcButton
type="primary"
size="small"
class="nc-form-field-drag-handler !cursor-move !p-1 !min-w-6 !h-auto !rounded"
>
<component
:is="iconMap.drag"
class="nc-form-field-drag-handler flex-none !h-4 !w-4 text-white font-bold"
/>
</NcButton>
</div>
<div class="text-sm font-semibold text-gray-800">
<span data-testid="nc-form-input-label">
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
{{ element.label || element.title }}
</span>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<span v-if="isRequired(element, element.required)" class="text-red-500 text-base leading-[18px]"
>&nbsp;*</span
>
</div>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<LazyCellRichText
v-if="element.description"
:value="element.description"
is-form-field
read-only
sync-value-change
class="nc-form-help-text text-gray-500 text-sm mt-2 -ml-1"
data-testid="nc-form-help-text"
@update:value="updateColMeta(element)"
/>
<!-- Field Body -->
<div class="nc-form-field-body">
<div class="mt-2">
<a-form-item
v-if="fieldMappings[element.title]"
:name="fieldMappings[element.title]"
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
class="!my-0 nc-input-required-error nc-form-input-item"
v-bind="validateInfos[fieldMappings[element.title]]"
>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<LazySmartsheetDivDataCell class="relative" @click.stop>
<LazySmartsheetVirtualCell
v-if="isVirtualCol(element)"
v-model="formState[element.title]"
:row="row"
class="nc-input"
:class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
:data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
:column="element"
/>
<LazySmartsheetCell
v-else
v-model="formState[element.title]"
class="nc-input truncate"
:class="[
`nc-form-input-${element.title.replaceAll(' ', '')}`,
{ 'layout-list': element.meta.isList },
]"
:data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
:column="element"
:edit-enabled="true"
/>
</LazySmartsheetDivDataCell>
</a-form-item>
Nc feat/form validation (#8409) * feat(nc-gui): custom validation setup * fix(nc-gui): custom validation table rounded issue * fix: add custom field validation type * fix(nc-gui): updated custom validator * feat(nc-gui): custom validation working state * fix(nc-gui): udpate default warning msg * chore(nc-gui): lint * fix(nc-gui): grayed out errors if input is focused * fix(nc-gui): input ring issue * fix(nc-gui): increase max height of validator select dropdown * fix(nc-gui): validator select dropdown item text color * fix(nc-gui): regex validation condition update * fix(nc-gui): add missing string validation types * fix(nc-gui): remove unwanted code * fix(nc-gui): move custom validation to ee * refacor(nc-gui): form view code * refactor(nc-gui): separate out formviewstore for ce & ee * fix(nc-gui): move all validations to another file * feat(nc-gui): add validation input component * feat(nc-gui): add time, month types * fix(nc-gui): add form field limit validations * fix(nc-gui): add limit link record validation * fix(nc-gui): add phonenumber & url validation type * feat(nc-gui): add email, url & phone number validators * fix(nc-gui): non working phone, email, url validation * chore(nc-giu): lint * feat(nc-gui): add attchment type validation * chore(nc-gui): lint * fix(nc-gui): add form field validation in shared form * fix(nc-gui): add form field validation in shared form oss * fix(nc-gui): oss validation conflict * fix(nc-gui): enter number validation function * fix(nc-gui): add config validators * fix(nc-gui): validation config error handling * fix(nc-gui): placeholder issue * fix(nc-gui): custom validation config error handling * fix(nc-gui): allow negative value validation * fix(nc-gui): add tooltip for required field switch * fix(nc-gui): refactor field validation from builder side * chore(nc-gui): lint * fix(nc-gui): update number validation logic * fix(nc-gui): rating field alignment issue * fix(nc-gui): small changes * fix(nc-gui): required field validation issue * fix(nc-gui): allow click on title to enable field config * feat(nc-gui): business email validation support * fix(nc-gui): add remove image btn in cell itself * fix(nc-gui): small changes * fix(nc-gui): survey form required field validation issue * fix(nc-gui): error field border issue * fix(nc-gui): currency validation input cell prefix issue * fix(nc-gui): remove console * chore(nc-gui): lint * fix: information text * fix(nc-gui): remove contains & doesn't contain option from phone number custom validation * fix(nc-gui): attachment merge conflict * fix(nc-gui): attachment cell expand btn size * fix(nc-gui): PR review changes * fix(nc-gui): lint * fix(nc-gui): updated form config heading text color * fix(nc-gui): small changes --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
8 months ago
<LazySmartsheetFormFieldConfigError :column="element" />
</div>
</div>
</div>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
</template>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<template #footer>
<div
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
v-if="!visibleColumns.length && isEditable"
class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center"
>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
{{ $t('title.selectFieldsFromRightPannelToAddHere') }}
</div>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
</template>
</Draggable>
<div class="flex justify-between items-center mt-6 !px-8 !lg:px-12">
<NcButton
type="secondary"
size="small"
:disabled="!isUIAllowed('dataInsert') || !visibleColumns.length"
class="nc-form-clear nc-form-focus-element"
data-testid="nc-form-clear"
data-title="nc-form-clear"
@click="clearForm"
>
{{ $t('activity.clearForm') }}
</NcButton>
<NcButton
html-type="submit"
type="primary"
size="small"
:disabled="!isUIAllowed('dataInsert') || !visibleColumns.length"
class="nc-form-submit nc-form-focus-element"
data-testid="nc-form-submit"
data-title="nc-form-submit"
@click="submitForm"
>
{{ $t('general.submit') }}
</NcButton>
</div>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
</a-form>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<div v-if="!parseProp(formViewData?.meta).hide_branding" class="px-8 lg:px-12">
<a-divider v-if="!isLocked" class="!my-8" />
<!-- Nocodb Branding -->
<div class="inline-block">
<GeneralFormBranding />
</div>
</div>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
</a-card>
</div>
</div>
</template>
<template #sidebar>
<!-- Right Panel -->
<div
class="nc-form-right-panel h-full flex-grow max-w-full"
:class="{
'overflow-y-auto nc-form-scrollbar': activeField,
}"
>
<!-- Form Field settings -->
<div v-if="activeField && activeColumn" :key="activeField?.id" class="nc-form-field-right-panel">
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<!-- Field header -->
<div class="px-3 pt-4 pb-2 flex items-center justify-between border-b border-gray-200 font-medium">
<div class="flex items-center">
<div class="text-gray-600 font-medium cursor-pointer select-none hover:underline" @click="activeRow = ''">
{{ $t('objects.viewType.form') }}
</div>
<div class="px-1.75 text-gray-500 text-xl font-normal">/</div>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<div class="flex items-center pr-1 py-1.5 text-gray-800">
<SmartsheetHeaderVirtualCellIcon
v-if="isVirtualCol(activeField)"
:column-meta="activeField"
class="flex-none"
/>
<SmartsheetHeaderCellIcon v-else :column-meta="activeField" class="flex-none" />
<NcTooltip class="truncate max-w-[120px] text-sm font-semibold" show-on-truncate-only>
<template #title>
<div class="text-center">
{{ activeField.title }}
</div>
</template>
<span data-testid="nc-form-input-label">
{{ activeField.title }}
</span>
</NcTooltip>
</div>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
</div>
<div class="flex items-center space-x-2">
<a-dropdown
v-model:visible="dropdownStates.showEditColumn"
:trigger="['click']"
overlay-class-name="nc-dropdown-form-edit-column"
:disabled="!isUIAllowed('fieldEdit')"
>
<NcButton type="secondary" size="small" class="nc-form-add-field" data-testid="nc-form-add-field">
{{ $t('general.edit') }} {{ $t('objects.field') }}
</NcButton>
<template #overlay>
<SmartsheetColumnEditOrAddProvider
v-if="dropdownStates.showEditColumn"
:column="activeColumn"
@submit="editColumnCallback"
@cancel="dropdownStates.showEditColumn = false"
@click.stop
@keydown.stop
/>
</template>
</a-dropdown>
<SmartsheetFormFieldMenu
v-model:is-open="dropdownStates.showColumnMenu"
:column="activeColumn"
:form-column="activeField"
:is-required="isRequired(activeField, activeField.required)"
:on-delete="
() => {
deleteColumnCallback()
}
"
@hide-field="showOrHideColumn(activeField, false, false)"
/>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
</div>
</div>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<!-- Field text -->
<div class="nc-form-field-text p-4 flex flex-col gap-4 border-b border-gray-200">
<div class="text-base font-bold text-gray-600">
{{ $t('objects.field') }} {{ $t('general.text').toLowerCase() }}
</div>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<a-textarea
ref="focusLabel"
:value="activeField.label || activeField.title"
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
:rows="1"
auto-size
hide-details
class="form-meta-input nc-form-input-label !max-h-7.5rem nc-form-scrollbar"
data-testid="nc-form-input-label"
:placeholder="$t('msg.info.formInput')"
@focus="onFocusActiveFieldLabel"
@keydown.enter.prevent
@input="updateFieldTitle($event.target.value)"
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
@change="updateColMeta(activeField)"
/>
<LazyCellRichText
v-model:value="activeField.description"
:placeholder="$t('msg.info.formHelpText')"
class="form-meta-input nc-form-input-help-text"
is-form-field
:hidden-bubble-menu-options="hiddenBubbleMenuOptions"
data-testid="nc-form-input-help-text"
@update:value="updateColMeta(activeField)"
/>
</div>
Nc feat/form validation (#8409) * feat(nc-gui): custom validation setup * fix(nc-gui): custom validation table rounded issue * fix: add custom field validation type * fix(nc-gui): updated custom validator * feat(nc-gui): custom validation working state * fix(nc-gui): udpate default warning msg * chore(nc-gui): lint * fix(nc-gui): grayed out errors if input is focused * fix(nc-gui): input ring issue * fix(nc-gui): increase max height of validator select dropdown * fix(nc-gui): validator select dropdown item text color * fix(nc-gui): regex validation condition update * fix(nc-gui): add missing string validation types * fix(nc-gui): remove unwanted code * fix(nc-gui): move custom validation to ee * refacor(nc-gui): form view code * refactor(nc-gui): separate out formviewstore for ce & ee * fix(nc-gui): move all validations to another file * feat(nc-gui): add validation input component * feat(nc-gui): add time, month types * fix(nc-gui): add form field limit validations * fix(nc-gui): add limit link record validation * fix(nc-gui): add phonenumber & url validation type * feat(nc-gui): add email, url & phone number validators * fix(nc-gui): non working phone, email, url validation * chore(nc-giu): lint * feat(nc-gui): add attchment type validation * chore(nc-gui): lint * fix(nc-gui): add form field validation in shared form * fix(nc-gui): add form field validation in shared form oss * fix(nc-gui): oss validation conflict * fix(nc-gui): enter number validation function * fix(nc-gui): add config validators * fix(nc-gui): validation config error handling * fix(nc-gui): placeholder issue * fix(nc-gui): custom validation config error handling * fix(nc-gui): allow negative value validation * fix(nc-gui): add tooltip for required field switch * fix(nc-gui): refactor field validation from builder side * chore(nc-gui): lint * fix(nc-gui): update number validation logic * fix(nc-gui): rating field alignment issue * fix(nc-gui): small changes * fix(nc-gui): required field validation issue * fix(nc-gui): allow click on title to enable field config * feat(nc-gui): business email validation support * fix(nc-gui): add remove image btn in cell itself * fix(nc-gui): small changes * fix(nc-gui): survey form required field validation issue * fix(nc-gui): error field border issue * fix(nc-gui): currency validation input cell prefix issue * fix(nc-gui): remove console * chore(nc-gui): lint * fix: information text * fix(nc-gui): remove contains & doesn't contain option from phone number custom validation * fix(nc-gui): attachment merge conflict * fix(nc-gui): attachment cell expand btn size * fix(nc-gui): PR review changes * fix(nc-gui): lint * fix(nc-gui): updated form config heading text color * fix(nc-gui): small changes --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
8 months ago
<LazySmartsheetFormFieldSettings v-if="activeField"></LazySmartsheetFormFieldSettings>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
</div>
<!-- Form Settings -->
<template v-else>
<Splitpanes v-if="formViewData" horizontal class="nc-form-settings w-full nc-form-right-splitpane">
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<Pane min-size="30" size="50" class="nc-form-right-splitpane-item p-4 flex flex-col space-y-4 !min-h-200px">
<div class="flex flex-wrap justify-between items-center gap-2">
<div class="flex gap-3">
<div class="text-base font-bold text-gray-600">
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
{{ $t('objects.viewType.form') }} {{ $t('objects.fields') }}
</div>
<NcBadge color="border-gray-200">
{{ visibleColumns.length }}/{{ localColumns.length }} {{ $t('objects.field') }}
</NcBadge>
</div>
<a-dropdown
v-if="isUIAllowed('fieldAdd')"
v-model:visible="dropdownStates.showAddColumn"
:trigger="['click']"
overlay-class-name="nc-dropdown-form-add-column"
>
<NcButton type="secondary" size="small" class="nc-form-add-field" data-testid="nc-form-add-field">
<div class="flex gap-2 items-center">
<component :is="iconMap.plus" class="w-4 h-4" />
<span> {{ $t('activity.addFieldFromFormView') }} </span>
</div>
</NcButton>
<template #overlay>
<SmartsheetColumnEditOrAddProvider
v-if="dropdownStates.showAddColumn"
@submit="addColumnCallback"
@cancel="dropdownStates.showAddColumn = false"
@click.stop
@keydown.stop
/>
</template>
</a-dropdown>
</div>
<form autocomplete="off">
<a-input
key="nc-form-field-search-input"
v-model:value="searchQuery"
type="text"
autocomplete="off"
class="!h-9 !px-3 !py-1 !rounded-lg"
:placeholder="`${$t('placeholder.searchFields')}...`"
name="nc-form-field-search-input"
data-testid="nc-form-field-search-input"
>
<template #prefix>
<GeneralIcon icon="search" class="mr-2 h-4 w-4 text-gray-500 group-hover:text-black" />
</template>
<template #suffix>
<GeneralIcon
v-if="searchQuery.length > 0"
icon="close"
class="ml-2 h-4 w-4 text-gray-500 group-hover:text-black"
data-testid="nc-form-field-clear-search"
@click="searchQuery = ''"
/>
</template>
</a-input>
</form>
<div class="nc-form-fields-list border-1 border-gray-200 rounded-lg overflow-y-auto nc-form-scrollbar">
<div v-if="!localColumns.length" class="px-0.5 py-2 text-gray-500 text-center">
{{ $t('title.noFieldsFound') }}
</div>
<template v-if="localColumns.length">
<div
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
key="nc-form-show-all-fields"
class="w-full flex items-center border-b-1 rounded-t-lg border-gray-200 bg-gray-50 sticky top-0 z-100"
data-testid="nc-form-show-all-fields"
@click.stop
>
<div class="w-4 h-4 flex-none mx-2"></div>
<div class="flex-1 flex flex-row items-center truncate cursor-pointer">
<div class="flex-1 font-base my-1.5">{{ $t('activity.selectAllFields') }}</div>
<div class="flex items-center px-2">
<a-switch
:checked="visibleColumns.length === localColumns.length"
size="small"
class="nc-switch"
@change="handleAddOrRemoveAllColumns"
/>
</div>
</div>
</div>
<Draggable
:list="localColumns"
item-key="id"
ghost-class="nc-form-field-ghost"
:style="{ height: 'calc(100% - 64px)' }"
:disabled="isLocked || !isEditable"
@change="onMove($event)"
@start="drag = true"
@end="drag = false"
>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<template #item="{ element: field }">
<div
v-if="field.title.toLowerCase().includes(searchQuery.toLowerCase())"
:key="field.id"
class="w-full px-2 flex flex-row items-center border-b-1 last:border-none border-gray-200"
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
:class="[
`nc-form-field-item-${field.title.replaceAll(' ', '')}`,
`${activeRow === field.id ? 'bg-brand-50 font-medium' : 'hover:bg-gray-50'}`,
]"
:data-testid="`nc-form-field-item-${field.title}`"
>
<div class="py-1.5 flex items-center">
<component :is="iconMap.drag" class="flex-none cursor-move !h-4 !w-4 text-gray-600 mr-1" />
</div>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<div
class="flex-1 flex items-center justify-between cursor-pointer max-w-[calc(100%_-_20px)] py-1.5"
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
>
<div
class="flex-1 flex items-center cursor-pointer max-w-[calc(100%_-_40px)]"
@click.prevent="onFormItemClick(field, true)"
>
<SmartsheetHeaderVirtualCellIcon v-if="field && isVirtualCol(field)" :column-meta="field" />
<SmartsheetHeaderCellIcon v-else :column-meta="field" />
<div class="flex-1 flex items-center justify-start max-w-[calc(100%_-_28px)]">
<div class="w-full flex items-center">
<div class="ml-1 inline-flex" :class="field.label?.trim() ? 'max-w-1/2' : 'max-w-[95%]'">
<NcTooltip class="truncate text-sm" :disabled="drag" show-on-truncate-only>
<template #title>
<div class="text-center">
{{ field.title }}
</div>
</template>
<span data-testid="nc-field-title"> {{ field.title }} </span>
</NcTooltip>
</div>
<div
v-if="field.label?.trim()"
class="truncate inline-flex text-xs font-normal text-gray-700"
>
<span>&nbsp;(</span>
<NcTooltip class="truncate" :disabled="drag" show-on-truncate-only>
<template #title>
<div class="text-center">
{{ field.label }}
</div>
</template>
<span data-testid="nc-field-title ">{{ field.label?.trim() }}</span>
</NcTooltip>
<span>)</span>
</div>
<span v-if="isRequired(field, field.required)" class="text-red-500 text-sm align-top"
>&nbsp;*</span
>
</div>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
</div>
</div>
Nc feat/form validation (#8409) * feat(nc-gui): custom validation setup * fix(nc-gui): custom validation table rounded issue * fix: add custom field validation type * fix(nc-gui): updated custom validator * feat(nc-gui): custom validation working state * fix(nc-gui): udpate default warning msg * chore(nc-gui): lint * fix(nc-gui): grayed out errors if input is focused * fix(nc-gui): input ring issue * fix(nc-gui): increase max height of validator select dropdown * fix(nc-gui): validator select dropdown item text color * fix(nc-gui): regex validation condition update * fix(nc-gui): add missing string validation types * fix(nc-gui): remove unwanted code * fix(nc-gui): move custom validation to ee * refacor(nc-gui): form view code * refactor(nc-gui): separate out formviewstore for ce & ee * fix(nc-gui): move all validations to another file * feat(nc-gui): add validation input component * feat(nc-gui): add time, month types * fix(nc-gui): add form field limit validations * fix(nc-gui): add limit link record validation * fix(nc-gui): add phonenumber & url validation type * feat(nc-gui): add email, url & phone number validators * fix(nc-gui): non working phone, email, url validation * chore(nc-giu): lint * feat(nc-gui): add attchment type validation * chore(nc-gui): lint * fix(nc-gui): add form field validation in shared form * fix(nc-gui): add form field validation in shared form oss * fix(nc-gui): oss validation conflict * fix(nc-gui): enter number validation function * fix(nc-gui): add config validators * fix(nc-gui): validation config error handling * fix(nc-gui): placeholder issue * fix(nc-gui): custom validation config error handling * fix(nc-gui): allow negative value validation * fix(nc-gui): add tooltip for required field switch * fix(nc-gui): refactor field validation from builder side * chore(nc-gui): lint * fix(nc-gui): update number validation logic * fix(nc-gui): rating field alignment issue * fix(nc-gui): small changes * fix(nc-gui): required field validation issue * fix(nc-gui): allow click on title to enable field config * feat(nc-gui): business email validation support * fix(nc-gui): add remove image btn in cell itself * fix(nc-gui): small changes * fix(nc-gui): survey form required field validation issue * fix(nc-gui): error field border issue * fix(nc-gui): currency validation input cell prefix issue * fix(nc-gui): remove console * chore(nc-gui): lint * fix: information text * fix(nc-gui): remove contains & doesn't contain option from phone number custom validation * fix(nc-gui): attachment merge conflict * fix(nc-gui): attachment cell expand btn size * fix(nc-gui): PR review changes * fix(nc-gui): lint * fix(nc-gui): updated form config heading text color * fix(nc-gui): small changes --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
8 months ago
<NcTooltip
:disabled="!field.required || isLocked || !isEditable"
class="flex"
placement="topRight"
>
<template #title> You can't hide a required field.</template>
<a-switch
:checked="!!field.show"
:disabled="field.required || isLocked || !isEditable"
class="flex-none nc-switch"
size="small"
@change="
(value) => {
showOrHideColumn(field, value, true)
}
"
/>
</NcTooltip>
</div>
</div>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
</template>
<template
v-if="
!localColumns?.filter((el) => el.title.toLowerCase().includes(searchQuery.toLowerCase())).length
"
#footer
>
<div class="px-0.5 py-2 text-gray-500 text-center">
{{ $t('title.noFieldsFound') }} with title `{{ searchQuery }}`
</div>
</template>
</Draggable>
</template>
</div>
</Pane>
<Pane min-size="20" size="50" class="nc-form-right-splitpane-item !overflow-y-auto nc-form-scrollbar">
<div class="p-4 flex flex-col space-y-4 border-b border-gray-200">
<!-- Appearance Settings -->
Nc feat/form validation (#8409) * feat(nc-gui): custom validation setup * fix(nc-gui): custom validation table rounded issue * fix: add custom field validation type * fix(nc-gui): updated custom validator * feat(nc-gui): custom validation working state * fix(nc-gui): udpate default warning msg * chore(nc-gui): lint * fix(nc-gui): grayed out errors if input is focused * fix(nc-gui): input ring issue * fix(nc-gui): increase max height of validator select dropdown * fix(nc-gui): validator select dropdown item text color * fix(nc-gui): regex validation condition update * fix(nc-gui): add missing string validation types * fix(nc-gui): remove unwanted code * fix(nc-gui): move custom validation to ee * refacor(nc-gui): form view code * refactor(nc-gui): separate out formviewstore for ce & ee * fix(nc-gui): move all validations to another file * feat(nc-gui): add validation input component * feat(nc-gui): add time, month types * fix(nc-gui): add form field limit validations * fix(nc-gui): add limit link record validation * fix(nc-gui): add phonenumber & url validation type * feat(nc-gui): add email, url & phone number validators * fix(nc-gui): non working phone, email, url validation * chore(nc-giu): lint * feat(nc-gui): add attchment type validation * chore(nc-gui): lint * fix(nc-gui): add form field validation in shared form * fix(nc-gui): add form field validation in shared form oss * fix(nc-gui): oss validation conflict * fix(nc-gui): enter number validation function * fix(nc-gui): add config validators * fix(nc-gui): validation config error handling * fix(nc-gui): placeholder issue * fix(nc-gui): custom validation config error handling * fix(nc-gui): allow negative value validation * fix(nc-gui): add tooltip for required field switch * fix(nc-gui): refactor field validation from builder side * chore(nc-gui): lint * fix(nc-gui): update number validation logic * fix(nc-gui): rating field alignment issue * fix(nc-gui): small changes * fix(nc-gui): required field validation issue * fix(nc-gui): allow click on title to enable field config * feat(nc-gui): business email validation support * fix(nc-gui): add remove image btn in cell itself * fix(nc-gui): small changes * fix(nc-gui): survey form required field validation issue * fix(nc-gui): error field border issue * fix(nc-gui): currency validation input cell prefix issue * fix(nc-gui): remove console * chore(nc-gui): lint * fix: information text * fix(nc-gui): remove contains & doesn't contain option from phone number custom validation * fix(nc-gui): attachment merge conflict * fix(nc-gui): attachment cell expand btn size * fix(nc-gui): PR review changes * fix(nc-gui): lint * fix(nc-gui): updated form config heading text color * fix(nc-gui): small changes --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
8 months ago
<div class="text-base font-bold text-gray-600">{{ $t('labels.appearanceSettings') }}</div>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<div class="flex flex-col space-y-3">
<div :class="isLocked || !isEditable ? 'pointer-events-none' : ''">
<div class="text-gray-800">{{ $t('labels.backgroundColor') }}</div>
<div class="flex justify-start">
<LazyGeneralColorPicker
:model-value="(formViewData.meta as Record<string,any>).background_color"
:colors="[
'#FFFFFF',
'#FFDBD9',
'#FEE6D6',
'#FFF0D1',
'#D4F7E0',
'#D7F2FF',
'#FED8F4',
'#E5D4F5',
'#FFCFE6',
]"
color-box-border
is-new-design
class="nc-form-theme-color-picker !pb-0 !pl-0 -ml-1"
@input="handleChangeBackground"
/>
</div>
</div>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<div class="flex items-center justify-between gap-3">
<!-- Hide NocoDB Branding -->
<span>{{ $t('labels.hideNocodbBranding') }}</span>
<a-switch
v-if="isEeUI"
v-e="[`a:form-view:hide-branding`]"
:checked="parseProp(formViewData.meta)?.hide_branding"
size="small"
class="nc-form-hide-branding"
data-testid="nc-form-hide-branding"
:disabled="isLocked || !isEditable"
@change="(value) => {
if (isLocked || !isEditable) return
(formViewData!.meta as Record<string,any>).hide_branding = value
updateView()
}"
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
/>
<NcTooltip v-else placement="top">
<template #title>
<div class="text-center">
{{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
</div>
</template>
<a-switch :checked="false" size="small" :disabled="true" />
</NcTooltip>
</div>
<div class="flex items-center justify-between gap-3">
<!-- Hide Banner -->
<span>{{ $t('general.hide') }} {{ $t('general.banner') }}</span>
<a-switch
v-e="[`a:form-view:hide-banner`]"
:checked="parseProp(formViewData.meta)?.hide_banner"
size="small"
class="nc-form-hide-banner"
data-testid="nc-form-hide-banner"
:disabled="isLocked || !isEditable"
@change="(value) => {
if (isLocked || !isEditable) return
(formViewData!.meta as Record<string,any>).hide_banner = value
updateView()
}"
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
/>
</div>
</div>
</div>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<div class="p-4 flex flex-col space-y-4">
<!-- Post Form Submission Settings -->
Nc feat/form validation (#8409) * feat(nc-gui): custom validation setup * fix(nc-gui): custom validation table rounded issue * fix: add custom field validation type * fix(nc-gui): updated custom validator * feat(nc-gui): custom validation working state * fix(nc-gui): udpate default warning msg * chore(nc-gui): lint * fix(nc-gui): grayed out errors if input is focused * fix(nc-gui): input ring issue * fix(nc-gui): increase max height of validator select dropdown * fix(nc-gui): validator select dropdown item text color * fix(nc-gui): regex validation condition update * fix(nc-gui): add missing string validation types * fix(nc-gui): remove unwanted code * fix(nc-gui): move custom validation to ee * refacor(nc-gui): form view code * refactor(nc-gui): separate out formviewstore for ce & ee * fix(nc-gui): move all validations to another file * feat(nc-gui): add validation input component * feat(nc-gui): add time, month types * fix(nc-gui): add form field limit validations * fix(nc-gui): add limit link record validation * fix(nc-gui): add phonenumber & url validation type * feat(nc-gui): add email, url & phone number validators * fix(nc-gui): non working phone, email, url validation * chore(nc-giu): lint * feat(nc-gui): add attchment type validation * chore(nc-gui): lint * fix(nc-gui): add form field validation in shared form * fix(nc-gui): add form field validation in shared form oss * fix(nc-gui): oss validation conflict * fix(nc-gui): enter number validation function * fix(nc-gui): add config validators * fix(nc-gui): validation config error handling * fix(nc-gui): placeholder issue * fix(nc-gui): custom validation config error handling * fix(nc-gui): allow negative value validation * fix(nc-gui): add tooltip for required field switch * fix(nc-gui): refactor field validation from builder side * chore(nc-gui): lint * fix(nc-gui): update number validation logic * fix(nc-gui): rating field alignment issue * fix(nc-gui): small changes * fix(nc-gui): required field validation issue * fix(nc-gui): allow click on title to enable field config * feat(nc-gui): business email validation support * fix(nc-gui): add remove image btn in cell itself * fix(nc-gui): small changes * fix(nc-gui): survey form required field validation issue * fix(nc-gui): error field border issue * fix(nc-gui): currency validation input cell prefix issue * fix(nc-gui): remove console * chore(nc-gui): lint * fix: information text * fix(nc-gui): remove contains & doesn't contain option from phone number custom validation * fix(nc-gui): attachment merge conflict * fix(nc-gui): attachment cell expand btn size * fix(nc-gui): PR review changes * fix(nc-gui): lint * fix(nc-gui): updated form config heading text color * fix(nc-gui): small changes --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
8 months ago
<div class="text-base font-bold text-gray-600">
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
{{ $t('msg.info.postFormSubmissionSettings') }}
</div>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<div class="flex flex-col gap-3">
<div class="flex items-center justify-between gap-3">
<!-- Show "Submit Another Form" button -->
<span>{{ $t('msg.info.submitAnotherForm') }}</span>
<a-switch
v-model:checked="formViewData.submit_another_form"
v-e="[`a:form-view:submit-another-form`]"
size="small"
class="nc-form-checkbox-submit-another-form"
data-testid="nc-form-checkbox-submit-another-form"
:disabled="isLocked || !isEditable"
@change="updateView"
/>
</div>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<div class="flex items-center justify-between gap-3">
<!-- Show a blank form after 5 seconds -->
<span>{{ $t('msg.info.showBlankForm') }}</span>
<a-switch
v-model:checked="formViewData.show_blank_form"
v-e="[`a:form-view:show-blank-form`]"
size="small"
class="nc-form-checkbox-show-blank-form"
data-testid="nc-form-checkbox-show-blank-form"
:disabled="isLocked || !isEditable"
@change="updateView"
/>
</div>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<div class="flex items-center justify-between gap-3">
<!-- Email me at <email> -->
<span>
{{ $t('msg.info.emailForm') }}
<span class="text-bold text-gray-600">{{ user?.email }}</span>
</span>
<a-switch
v-model:checked="emailMe"
v-e="[`a:form-view:email-me`]"
size="small"
class="nc-form-checkbox-send-email"
data-testid="nc-form-checkbox-send-email"
:disabled="isLocked || !isEditable"
@change="onEmailChange"
/>
</div>
</div>
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<!-- Show this message -->
<div class="pb-10">
<div class="text-gray-800 mb-2">
{{ $t('msg.info.formDisplayMessage') }}
</div>
<a-form-item class="!my-0">
<LazyCellRichText
v-if="!isLocked && isEditable"
v-model:value="formViewData.success_msg"
class="nc-form-after-submit-msg editable"
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
is-form-field
:hidden-bubble-menu-options="hiddenBubbleMenuOptions"
data-testid="nc-form-after-submit-msg"
@update:value="updateView" />
<LazyCellRichText
v-else
:value="formViewData.success_msg"
class="nc-form-after-submit-msg"
is-form-field
read-only
data-testid="nc-form-after-submit-msg"
/></a-form-item>
</div>
</div>
</Pane>
</Splitpanes>
</template>
</div>
</template>
</SmartsheetFormLayout>
</template>
</div>
</template>
<div
v-if="user?.base_roles?.viewer || user?.base_roles?.commenter"
class="absolute inset-0 bg-black/40 z-500 grid place-items-center"
>
<div class="text-center bg-white px-6 py-8 rounded-xl max-w-lg">
<div class="text-2xl text-gray-800 font-bold">
{{ $t('msg.info.yourCurrentRoleIs') }}
'<span class="capitalize"> {{ Object.keys(user.base_roles)?.[0] ?? ProjectRoles.NO_ACCESS }}</span
>'.
</div>
<div class="text-sm text-gray-700 pt-6">
{{ $t('msg.info.pleaseRequestAccessForView', { viewName: 'form view' }) }}
</div>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
.nc-editable:hover {
:deep(.nc-field-remove-icon) {
@apply opacity-100;
}
}
.nc-input {
@apply appearance-none w-full;
&:not(.layout-list) {
@apply !bg-white rounded-lg border-solid border-1 border-gray-200 !focus-within:border-brand-500;
}
&.layout-list {
@apply h-auto !pl-0 !py-1;
}
Nc feat/form validation (#8409) * feat(nc-gui): custom validation setup * fix(nc-gui): custom validation table rounded issue * fix: add custom field validation type * fix(nc-gui): updated custom validator * feat(nc-gui): custom validation working state * fix(nc-gui): udpate default warning msg * chore(nc-gui): lint * fix(nc-gui): grayed out errors if input is focused * fix(nc-gui): input ring issue * fix(nc-gui): increase max height of validator select dropdown * fix(nc-gui): validator select dropdown item text color * fix(nc-gui): regex validation condition update * fix(nc-gui): add missing string validation types * fix(nc-gui): remove unwanted code * fix(nc-gui): move custom validation to ee * refacor(nc-gui): form view code * refactor(nc-gui): separate out formviewstore for ce & ee * fix(nc-gui): move all validations to another file * feat(nc-gui): add validation input component * feat(nc-gui): add time, month types * fix(nc-gui): add form field limit validations * fix(nc-gui): add limit link record validation * fix(nc-gui): add phonenumber & url validation type * feat(nc-gui): add email, url & phone number validators * fix(nc-gui): non working phone, email, url validation * chore(nc-giu): lint * feat(nc-gui): add attchment type validation * chore(nc-gui): lint * fix(nc-gui): add form field validation in shared form * fix(nc-gui): add form field validation in shared form oss * fix(nc-gui): oss validation conflict * fix(nc-gui): enter number validation function * fix(nc-gui): add config validators * fix(nc-gui): validation config error handling * fix(nc-gui): placeholder issue * fix(nc-gui): custom validation config error handling * fix(nc-gui): allow negative value validation * fix(nc-gui): add tooltip for required field switch * fix(nc-gui): refactor field validation from builder side * chore(nc-gui): lint * fix(nc-gui): update number validation logic * fix(nc-gui): rating field alignment issue * fix(nc-gui): small changes * fix(nc-gui): required field validation issue * fix(nc-gui): allow click on title to enable field config * feat(nc-gui): business email validation support * fix(nc-gui): add remove image btn in cell itself * fix(nc-gui): small changes * fix(nc-gui): survey form required field validation issue * fix(nc-gui): error field border issue * fix(nc-gui): currency validation input cell prefix issue * fix(nc-gui): remove console * chore(nc-gui): lint * fix: information text * fix(nc-gui): remove contains & doesn't contain option from phone number custom validation * fix(nc-gui): attachment merge conflict * fix(nc-gui): attachment cell expand btn size * fix(nc-gui): PR review changes * fix(nc-gui): lint * fix(nc-gui): updated form config heading text color * fix(nc-gui): small changes --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
8 months ago
&.nc-cell-geodata {
@apply !py-1;
}
&.nc-cell-currency {
@apply !py-0 !pl-0 flex items-stretch;
}
:deep(input) {
@apply !px-1;
}
&.nc-cell-longtext {
@apply p-0 h-auto;
}
&.nc-cell:not(.nc-cell-longtext) {
@apply p-2;
}
&.nc-virtual-cell {
Nc feat/form validation (#8409) * feat(nc-gui): custom validation setup * fix(nc-gui): custom validation table rounded issue * fix: add custom field validation type * fix(nc-gui): updated custom validator * feat(nc-gui): custom validation working state * fix(nc-gui): udpate default warning msg * chore(nc-gui): lint * fix(nc-gui): grayed out errors if input is focused * fix(nc-gui): input ring issue * fix(nc-gui): increase max height of validator select dropdown * fix(nc-gui): validator select dropdown item text color * fix(nc-gui): regex validation condition update * fix(nc-gui): add missing string validation types * fix(nc-gui): remove unwanted code * fix(nc-gui): move custom validation to ee * refacor(nc-gui): form view code * refactor(nc-gui): separate out formviewstore for ce & ee * fix(nc-gui): move all validations to another file * feat(nc-gui): add validation input component * feat(nc-gui): add time, month types * fix(nc-gui): add form field limit validations * fix(nc-gui): add limit link record validation * fix(nc-gui): add phonenumber & url validation type * feat(nc-gui): add email, url & phone number validators * fix(nc-gui): non working phone, email, url validation * chore(nc-giu): lint * feat(nc-gui): add attchment type validation * chore(nc-gui): lint * fix(nc-gui): add form field validation in shared form * fix(nc-gui): add form field validation in shared form oss * fix(nc-gui): oss validation conflict * fix(nc-gui): enter number validation function * fix(nc-gui): add config validators * fix(nc-gui): validation config error handling * fix(nc-gui): placeholder issue * fix(nc-gui): custom validation config error handling * fix(nc-gui): allow negative value validation * fix(nc-gui): add tooltip for required field switch * fix(nc-gui): refactor field validation from builder side * chore(nc-gui): lint * fix(nc-gui): update number validation logic * fix(nc-gui): rating field alignment issue * fix(nc-gui): small changes * fix(nc-gui): required field validation issue * fix(nc-gui): allow click on title to enable field config * feat(nc-gui): business email validation support * fix(nc-gui): add remove image btn in cell itself * fix(nc-gui): small changes * fix(nc-gui): survey form required field validation issue * fix(nc-gui): error field border issue * fix(nc-gui): currency validation input cell prefix issue * fix(nc-gui): remove console * chore(nc-gui): lint * fix: information text * fix(nc-gui): remove contains & doesn't contain option from phone number custom validation * fix(nc-gui): attachment merge conflict * fix(nc-gui): attachment cell expand btn size * fix(nc-gui): PR review changes * fix(nc-gui): lint * fix(nc-gui): updated form config heading text color * fix(nc-gui): small changes --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
8 months ago
@apply px-2 py-1 min-h-10;
}
&.nc-cell-json {
@apply h-auto;
& > div {
@apply w-full;
}
}
:deep(.ant-picker) {
@apply !py-0;
}
:deep(input.nc-cell-field) {
@apply !py-0;
}
}
.nc-form-input-label {
@apply !px-4 !py-2 font-semibold text-gray-800 !rounded-lg !text-sm;
}
.nc-form-help-text,
.nc-input-required-error {
max-width: 100%;
white-space: pre-line;
:deep(.ant-form-item-explain-error) {
Nc feat/form validation (#8409) * feat(nc-gui): custom validation setup * fix(nc-gui): custom validation table rounded issue * fix: add custom field validation type * fix(nc-gui): updated custom validator * feat(nc-gui): custom validation working state * fix(nc-gui): udpate default warning msg * chore(nc-gui): lint * fix(nc-gui): grayed out errors if input is focused * fix(nc-gui): input ring issue * fix(nc-gui): increase max height of validator select dropdown * fix(nc-gui): validator select dropdown item text color * fix(nc-gui): regex validation condition update * fix(nc-gui): add missing string validation types * fix(nc-gui): remove unwanted code * fix(nc-gui): move custom validation to ee * refacor(nc-gui): form view code * refactor(nc-gui): separate out formviewstore for ce & ee * fix(nc-gui): move all validations to another file * feat(nc-gui): add validation input component * feat(nc-gui): add time, month types * fix(nc-gui): add form field limit validations * fix(nc-gui): add limit link record validation * fix(nc-gui): add phonenumber & url validation type * feat(nc-gui): add email, url & phone number validators * fix(nc-gui): non working phone, email, url validation * chore(nc-giu): lint * feat(nc-gui): add attchment type validation * chore(nc-gui): lint * fix(nc-gui): add form field validation in shared form * fix(nc-gui): add form field validation in shared form oss * fix(nc-gui): oss validation conflict * fix(nc-gui): enter number validation function * fix(nc-gui): add config validators * fix(nc-gui): validation config error handling * fix(nc-gui): placeholder issue * fix(nc-gui): custom validation config error handling * fix(nc-gui): allow negative value validation * fix(nc-gui): add tooltip for required field switch * fix(nc-gui): refactor field validation from builder side * chore(nc-gui): lint * fix(nc-gui): update number validation logic * fix(nc-gui): rating field alignment issue * fix(nc-gui): small changes * fix(nc-gui): required field validation issue * fix(nc-gui): allow click on title to enable field config * feat(nc-gui): business email validation support * fix(nc-gui): add remove image btn in cell itself * fix(nc-gui): small changes * fix(nc-gui): survey form required field validation issue * fix(nc-gui): error field border issue * fix(nc-gui): currency validation input cell prefix issue * fix(nc-gui): remove console * chore(nc-gui): lint * fix: information text * fix(nc-gui): remove contains & doesn't contain option from phone number custom validation * fix(nc-gui): attachment merge conflict * fix(nc-gui): attachment cell expand btn size * fix(nc-gui): PR review changes * fix(nc-gui): lint * fix(nc-gui): updated form config heading text color * fix(nc-gui): small changes --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
8 months ago
&:first-child {
@apply mt-2;
}
}
}
.nc-input-required-error {
&:focus-within {
:deep(.ant-form-item-explain-error) {
@apply text-gray-400;
}
}
}
:deep(.ant-form-item-has-error .ant-select:not(.ant-select-disabled) .ant-select-selector) {
border: none !important;
}
:deep(.ant-form-item-has-success .ant-select:not(.ant-select-disabled) .ant-select-selector) {
border: none !important;
}
:deep(.nc-cell-attachment) {
@apply p-0;
.nc-attachment-cell {
@apply px-4 min-h-[75px] w-full h-full;
.nc-attachment {
@apply md: (w-[50px] h-[50px]) lg:(w-[75px] h-[75px]) min-h-[50px] min-w-[50px];
}
.nc-attachment-cell-dropzone {
@apply rounded bg-gray-400/75;
}
}
}
.nc-form-input-item .nc-data-cell {
@apply !border-none rounded-none;
&:focus-within {
@apply !border-none;
}
}
.nc-form-input-enable-scanner-form-item {
:deep(.ant-form-item-control-input) {
@apply min-h-max;
}
}
:deep(.nc-form-right-splitpane .splitpanes__splitter) {
@apply !border-t-1 !border-gray-200 relative;
&::before {
@apply content-[':::'] block h-4 leading-12px px-2 font-bold text-gray-800 border-1 border-gray-200 rounded bg-white absolute -top-2.5 z-100 left-[calc(50%_-_16px)];
}
}
.nc-form-scrollbar {
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
@apply scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent;
&::-webkit-scrollbar-thumb:hover {
@apply !scrollbar-thumb-gray-300;
}
}
:deep(.nc-form-theme-color-picker .color-selector) {
@apply !text-white;
}
:deep(.nc-form-field-body .nc-cell) {
@apply my-0;
}
.nc-form-field-ghost {
@apply bg-gray-50;
}
:deep(.nc-form-input-required + button):focus-visible {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3366ff;
}
:deep(.nc-form-switch-focus):focus-visible {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3366ff;
}
.nc-form-field-layout {
@apply !flex !items-center w-full space-x-3;
:deep(.ant-radio-wrapper) {
@apply border-1 border-gray-200 rounded-lg !py-2 !px-3 basis-full !mr-0 !items-center bg-white;
.ant-radio {
@apply !top-0;
.ant-radio-input:focus-visible + .ant-radio-inner {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3366ff;
}
}
}
}
</style>
<style lang="scss">
.form-meta-input {
.nc-textarea-rich-editor {
@apply pl-3 pr-4 !rounded-lg !text-sm border-1 border-gray-200 focus-within:border-brand-500;
&:hover {
@apply border-brand-400;
}
&:focus-within {
@apply shadow-selected;
}
}
&.nc-form-input-label .nc-textarea-rich-editor {
@apply pt-2 pb-1 font-semibold text-gray-800;
}
&.nc-form-input-help-text .nc-textarea-rich-editor {
@apply pt-1 text-gray-700;
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
.ProseMirror {
max-height: 7.5rem !important;
}
}
}
.nc-form-after-submit-msg {
.nc-textarea-rich-editor {
@apply pl-1 pr-2 pt-2 pb-1 !rounded-lg !text-sm border-1 border-gray-200 focus-within:border-brand-500;
&:hover {
@apply border-brand-400;
}
&:focus-within {
@apply shadow-selected;
}
.ProseMirror {
min-height: 5rem;
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
max-height: 7.5rem !important;
}
}
}
Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
.nc-form-description {
.nc-form-field-bubble-menu-wrapper {
@apply -bottom-12;
}
}
</style>