Browse Source

fix(nc-gui): allow user to submit form in locked view (#9705)

* fix(nc-gui): allow user to submit form in locked view

* fix(nc-gui): some minor changes

* fix(nc-gui): update form branding link
pull/9714/head
Ramesh Mane 2 months ago committed by GitHub
parent
commit
6f9ca7af9a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 2
      packages/nc-gui/components/general/FormBranding.vue
  2. 45
      packages/nc-gui/components/smartsheet/Form.vue
  3. 2
      packages/nc-gui/components/smartsheet/details/Fields.vue

2
packages/nc-gui/components/general/FormBranding.vue

@ -3,7 +3,7 @@
<template> <template>
<div <div
class="flex items-center gap-3 cursor-pointer text-gray-700 dark:text-slate-300" class="flex items-center gap-3 cursor-pointer text-gray-700 dark:text-slate-300"
@click="openLink('https://github.com/nocodb/nocodb')" @click="openLink('https://www.nocodb.com')"
> >
<img src="~assets/img/brand/nocodb-logo.svg" alt="NocoDB" class="flex-none w-6 h-6" /> <img src="~assets/img/brand/nocodb-logo.svg" alt="NocoDB" class="flex-none w-6 h-6" />
<div class="text-sm">NocoDB Forms</div> <div class="text-sm">NocoDB Forms</div>

45
packages/nc-gui/components/smartsheet/Form.vue

@ -310,7 +310,7 @@ const updatePreFillFormSearchParams = useDebounceFn(() => {
}, 250) }, 250)
async function submitForm() { async function submitForm() {
if (isLocked.value || !isUIAllowed('dataInsert')) return if (!isUIAllowed('dataInsert')) return
for (const col of localColumns.value) { for (const col of localColumns.value) {
if (col.show && col.title && isRequired(col, col.required) && formState.value[col.title] === undefined) { if (col.show && col.title && isRequired(col, col.required) && formState.value[col.title] === undefined) {
@ -349,7 +349,7 @@ async function submitForm() {
} }
async function clearForm() { async function clearForm() {
if (isLocked.value || !isUIAllowed('dataInsert')) return if (!isUIAllowed('dataInsert')) return
formState.value = {} formState.value = {}
state.value = {} state.value = {}
@ -797,6 +797,14 @@ watch(focusLabel, () => {
} }
}) })
watch(isLocked, (newValue) => {
if (newValue) {
activeRow.value = ''
}
clearForm()
})
useEventListener( useEventListener(
document, document,
'keydown', 'keydown',
@ -965,7 +973,7 @@ useEventListener(
/> />
<div class="absolute bottom-0 right-0 hidden group-hover:block"> <div class="absolute bottom-0 right-0 hidden group-hover:block">
<div class="flex items-center space-x-1 m-2"> <div class="flex items-center space-x-1 m-2">
<NcTooltip :disabled="isEeUI"> <NcTooltip :disabled="isEeUI || isLocked">
<template #title> <template #title>
<div class="text-center"> <div class="text-center">
{{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }} {{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
@ -977,7 +985,7 @@ useEventListener(
size="small" size="small"
class="nc-form-upload-banner-btn" class="nc-form-upload-banner-btn"
data-testid="nc-form-upload-banner-btn" data-testid="nc-form-upload-banner-btn"
:disabled="!isEeUI" :disabled="!isEeUI || isLocked"
@click="openUploadImage(true)" @click="openUploadImage(true)"
> >
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center">
@ -989,13 +997,14 @@ useEventListener(
</div> </div>
</NcButton> </NcButton>
</NcTooltip> </NcTooltip>
<NcTooltip v-if="isEeUI && formViewData.banner_image_url"> <NcTooltip v-if="isEeUI && formViewData.banner_image_url" :disabled="isLocked">
<template #title> {{ $t('general.delete') }} {{ $t('general.banner') }} </template> <template #title> {{ $t('general.delete') }} {{ $t('general.banner') }} </template>
<NcButton <NcButton
type="secondary" type="secondary"
size="small" size="small"
class="nc-form-delete-banner-btn" class="nc-form-delete-banner-btn"
data-testid="nc-form-delete-banner-btn" data-testid="nc-form-delete-banner-btn"
:disabled="isLocked"
@click=" @click="
() => { () => {
if (isEditable) { if (isEditable) {
@ -1044,7 +1053,7 @@ useEventListener(
class="items-center space-x-1 flex-nowrap m-3" class="items-center space-x-1 flex-nowrap m-3"
:class="formViewData.logo_url ? 'hidden absolute top-0 left-0 group-hover:flex' : 'flex'" :class="formViewData.logo_url ? 'hidden absolute top-0 left-0 group-hover:flex' : 'flex'"
> >
<NcTooltip :disabled="isEeUI"> <NcTooltip :disabled="isEeUI || isLocked">
<template #title> <template #title>
<div class="text-center"> <div class="text-center">
{{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }} {{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
@ -1056,7 +1065,7 @@ useEventListener(
size="small" size="small"
class="nc-form-upload-logo-btn" class="nc-form-upload-logo-btn"
data-testid="nc-form-upload-log-btn" data-testid="nc-form-upload-log-btn"
:disabled="!isEeUI" :disabled="!isEeUI || isLocked"
@click="openUploadImage(false)" @click="openUploadImage(false)"
> >
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center">
@ -1065,13 +1074,14 @@ useEventListener(
</div> </div>
</NcButton> </NcButton>
</NcTooltip> </NcTooltip>
<NcTooltip v-if="isEeUI && formViewData.logo_url"> <NcTooltip v-if="isEeUI && formViewData.logo_url" :disabled="isLocked">
<template #title> {{ $t('general.delete') }} {{ $t('general.logo') }} </template> <template #title> {{ $t('general.delete') }} {{ $t('general.logo') }} </template>
<NcButton <NcButton
type="secondary" type="secondary"
size="small" size="small"
class="nc-form-delete-logo-btn" class="nc-form-delete-logo-btn"
data-testid="nc-form-delete-logo-btn" data-testid="nc-form-delete-logo-btn"
:disabled="isLocked"
@click=" @click="
() => { () => {
if (isEditable) { if (isEditable) {
@ -1144,7 +1154,7 @@ useEventListener(
<!-- form description --> <!-- form description -->
<div <div
class="border-transparent px-4 lg:px-6" class="border-transparent px-4 lg:px-6 empty:hidden"
:class="[ :class="[
{ {
'rounded-2xl border-2 cursor-pointer mb-1 py-4 lg:py-6 focus-within:bg-gray-50': isEditable, 'rounded-2xl border-2 cursor-pointer mb-1 py-4 lg:py-6 focus-within:bg-gray-50': isEditable,
@ -1203,6 +1213,7 @@ useEventListener(
> >
<template #item="{ element }"> <template #item="{ element }">
<div <div
v-if="!isLocked || (isLocked && element?.visible)"
:key="element.id" :key="element.id"
class="nc-editable nc-form-focus-element item relative bg-white p-4 lg:p-6" class="nc-editable nc-form-focus-element item relative bg-white p-4 lg:p-6"
:class="[ :class="[
@ -1243,7 +1254,7 @@ useEventListener(
</div> </div>
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<NcTooltip <NcTooltip
v-if="allViewFilters[element.fk_column_id]?.length" v-if="allViewFilters[element.fk_column_id]?.length && !isLocked"
class="relative h-3.5 w-3.5 flex cursor-pointer" class="relative h-3.5 w-3.5 flex cursor-pointer"
placement="topLeft" placement="topLeft"
> >
@ -1363,7 +1374,7 @@ useEventListener(
</a-form> </a-form>
<div v-if="!parseProp(formViewData?.meta).hide_branding" class="px-8 lg:px-12"> <div v-if="!parseProp(formViewData?.meta).hide_branding" class="px-8 lg:px-12">
<a-divider v-if="!isLocked" class="!my-8" /> <a-divider class="!my-8" />
<!-- Nocodb Branding --> <!-- Nocodb Branding -->
<div class="inline-block"> <div class="inline-block">
<GeneralFormBranding /> <GeneralFormBranding />
@ -1417,7 +1428,7 @@ useEventListener(
v-model:visible="dropdownStates.showEditColumn" v-model:visible="dropdownStates.showEditColumn"
:trigger="['click']" :trigger="['click']"
overlay-class-name="nc-dropdown-form-edit-column" overlay-class-name="nc-dropdown-form-edit-column"
:disabled="!isUIAllowed('fieldEdit')" :disabled="!isUIAllowed('fieldEdit') || isLocked"
@visible-change="onVisibilityChange('showEditColumn')" @visible-change="onVisibilityChange('showEditColumn')"
> >
<NcButton type="secondary" size="small" class="nc-form-add-field" data-testid="nc-form-add-field"> <NcButton type="secondary" size="small" class="nc-form-add-field" data-testid="nc-form-add-field">
@ -1503,6 +1514,7 @@ useEventListener(
v-if="isUIAllowed('fieldAdd')" v-if="isUIAllowed('fieldAdd')"
v-model:visible="dropdownStates.showAddColumn" v-model:visible="dropdownStates.showAddColumn"
:trigger="['click']" :trigger="['click']"
:disabled="isLocked"
overlay-class-name="nc-dropdown-form-add-column" overlay-class-name="nc-dropdown-form-add-column"
@visible-change="onVisibilityChange('showAddColumn')" @visible-change="onVisibilityChange('showAddColumn')"
> >
@ -1573,6 +1585,7 @@ useEventListener(
:checked="visibleColumns.length === localColumns.length" :checked="visibleColumns.length === localColumns.length"
size="small" size="small"
class="nc-switch" class="nc-switch"
:disabled="isLocked"
@change="handleAddOrRemoveAllColumns" @change="handleAddOrRemoveAllColumns"
/> />
</div> </div>
@ -2119,12 +2132,16 @@ useEventListener(
} }
} }
.nc-form-after-submit-msg { .nc-form-after-submit-msg {
.editable {
.nc-textarea-rich-editor { .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 { &:hover {
@apply border-brand-400; @apply border-brand-400;
} }
}
}
.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;
&:focus-within { &:focus-within {
@apply shadow-selected; @apply shadow-selected;
} }

2
packages/nc-gui/components/smartsheet/details/Fields.vue

@ -1167,7 +1167,7 @@ watch(
</NcBadge> </NcBadge>
<NcBadge <NcBadge
v-else-if="isColumnValid(field) && fieldStatus(field) === 'add'" v-else-if="isColumnValid(field) && fieldStatus(field) === 'add'"
color="orange" color="green"
:border="false" :border="false"
class="bg-green-50 text-green-700" class="bg-green-50 text-green-700"
data-testid="nc-field-status-new-field" data-testid="nc-field-status-new-field"

Loading…
Cancel
Save