|
|
@ -1,11 +1,11 @@ |
|
|
|
<script setup lang="ts"> |
|
|
|
<script setup lang="ts"> |
|
|
|
import Draggable from 'vuedraggable' |
|
|
|
import Draggable from 'vuedraggable' |
|
|
|
import {RelationTypes, UITypes, getSystemColumns, isVirtualCol} from 'nocodb-sdk' |
|
|
|
import { RelationTypes, UITypes, getSystemColumns, isVirtualCol } from 'nocodb-sdk' |
|
|
|
import {message} from 'ant-design-vue' |
|
|
|
import { message } from 'ant-design-vue' |
|
|
|
import type {Permission} from '~/composables/useUIPermission/rolePermissions' |
|
|
|
import type { Permission } from '~/composables/useUIPermission/rolePermissions' |
|
|
|
import {computed, inject, onClickOutside, useDebounceFn} from '#imports' |
|
|
|
import { computed, inject, onClickOutside, useDebounceFn } from '#imports' |
|
|
|
import {ActiveViewInj, IsFormInj, MetaInj} from '~/context' |
|
|
|
import { ActiveViewInj, IsFormInj, MetaInj } from '~/context' |
|
|
|
import {extractSdkResponseErrorMsg} from '~/utils' |
|
|
|
import { extractSdkResponseErrorMsg } from '~/utils' |
|
|
|
|
|
|
|
|
|
|
|
provide(IsFormInj, true) |
|
|
|
provide(IsFormInj, true) |
|
|
|
|
|
|
|
|
|
|
@ -16,9 +16,9 @@ const state = useGlobal() |
|
|
|
|
|
|
|
|
|
|
|
const formRef = ref() |
|
|
|
const formRef = ref() |
|
|
|
|
|
|
|
|
|
|
|
const {$api, $e} = useNuxtApp() |
|
|
|
const { $api, $e } = useNuxtApp() |
|
|
|
|
|
|
|
|
|
|
|
const {isUIAllowed} = useUIPermission() |
|
|
|
const { isUIAllowed } = useUIPermission() |
|
|
|
|
|
|
|
|
|
|
|
const formState = reactive({}) |
|
|
|
const formState = reactive({}) |
|
|
|
|
|
|
|
|
|
|
@ -32,9 +32,9 @@ const view = inject(ActiveViewInj) |
|
|
|
|
|
|
|
|
|
|
|
if (meta) useProvideColumnCreateStore(meta) |
|
|
|
if (meta) useProvideColumnCreateStore(meta) |
|
|
|
|
|
|
|
|
|
|
|
const {loadFormView, insertRow, formColumnData, formViewData, updateFormView} = useViewData(meta, view as any) |
|
|
|
const { loadFormView, insertRow, formColumnData, formViewData, updateFormView } = useViewData(meta, view as any) |
|
|
|
|
|
|
|
|
|
|
|
const {showAll, hideAll, saveOrUpdate} = useViewColumns(view, meta as any, false, async () => { |
|
|
|
const { showAll, hideAll, saveOrUpdate } = useViewColumns(view, meta as any, false, async () => { |
|
|
|
await loadFormView() |
|
|
|
await loadFormView() |
|
|
|
setFormData() |
|
|
|
setFormData() |
|
|
|
}) |
|
|
|
}) |
|
|
@ -90,24 +90,26 @@ function isDbRequired(column: Record<string, any>) { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
let isRequired = |
|
|
|
let isRequired = |
|
|
|
// confirm column is not virtual |
|
|
|
// confirm column is not virtual |
|
|
|
(!isVirtualCol(column) && |
|
|
|
(!isVirtualCol(column) && |
|
|
|
// column required / not null |
|
|
|
// column required / not null |
|
|
|
column.rqd && |
|
|
|
column.rqd && |
|
|
|
// column default value |
|
|
|
// column default value |
|
|
|
!column.cdf && |
|
|
|
!column.cdf && |
|
|
|
// confirm it's not foreign key |
|
|
|
// confirm it's not foreign key |
|
|
|
!columns.value.some( |
|
|
|
!columns.value.some( |
|
|
|
(c: Record<string, any>) => |
|
|
|
(c: Record<string, any>) => |
|
|
|
c.uidt === UITypes.LinkToAnotherRecord && |
|
|
|
c.uidt === UITypes.LinkToAnotherRecord && |
|
|
|
c?.colOptions?.type === RelationTypes.BELONGS_TO && |
|
|
|
c?.colOptions?.type === RelationTypes.BELONGS_TO && |
|
|
|
column.fk_column_id === c.colOptions.fk_child_column_id, |
|
|
|
column.fk_column_id === c.colOptions.fk_child_column_id, |
|
|
|
)) || |
|
|
|
)) || |
|
|
|
// primary column |
|
|
|
// primary column |
|
|
|
(column.pk && !column.ai && !column.cdf) |
|
|
|
(column.pk && !column.ai && !column.cdf) |
|
|
|
if (column.uidt === UITypes.LinkToAnotherRecord && column.colOptions.type === RelationTypes.BELONGS_TO) { |
|
|
|
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, |
|
|
|
const col = columns.value.find((c: Record<string, any>) => c.id === column.colOptions.fk_child_column_id) as Record< |
|
|
|
any> |
|
|
|
string, |
|
|
|
|
|
|
|
any |
|
|
|
|
|
|
|
> |
|
|
|
if (col.rqd && !col.default) { |
|
|
|
if (col.rqd && !col.default) { |
|
|
|
isRequired = true |
|
|
|
isRequired = true |
|
|
|
} |
|
|
|
} |
|
|
@ -117,7 +119,7 @@ function isDbRequired(column: Record<string, any>) { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function onMove(event: any) { |
|
|
|
function onMove(event: any) { |
|
|
|
const {newIndex, element, oldIndex} = event.added || event.moved || event.removed |
|
|
|
const { newIndex, element, oldIndex } = event.added || event.moved || event.removed |
|
|
|
|
|
|
|
|
|
|
|
if (event.added) { |
|
|
|
if (event.added) { |
|
|
|
element.show = true |
|
|
|
element.show = true |
|
|
@ -149,11 +151,11 @@ function hideColumn(idx: number) { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
saveOrUpdate( |
|
|
|
saveOrUpdate( |
|
|
|
{ |
|
|
|
{ |
|
|
|
...localColumns.value[idx], |
|
|
|
...localColumns.value[idx], |
|
|
|
show: false, |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
}, |
|
|
|
idx, |
|
|
|
idx, |
|
|
|
) |
|
|
|
) |
|
|
|
;(localColumns.value[idx] as any).show = false |
|
|
|
;(localColumns.value[idx] as any).show = false |
|
|
|
|
|
|
|
|
|
|
@ -178,7 +180,7 @@ async function removeAllColumns() { |
|
|
|
col.show = false |
|
|
|
col.show = false |
|
|
|
} |
|
|
|
} |
|
|
|
await hideAll( |
|
|
|
await hideAll( |
|
|
|
(localColumns as Record<string, any>)?.value |
|
|
|
(localColumns as Record<string, any>)?.value |
|
|
|
.filter((f: Record<string, any>) => isDbRequired(f) || !!f.required) |
|
|
|
.filter((f: Record<string, any>) => isDbRequired(f) || !!f.required) |
|
|
|
.map((f: Record<string, any>) => f.fk_column_id), |
|
|
|
.map((f: Record<string, any>) => f.fk_column_id), |
|
|
|
) |
|
|
|
) |
|
|
@ -209,36 +211,37 @@ function setFormData() { |
|
|
|
let data: Record<string, boolean> = {} |
|
|
|
let data: Record<string, boolean> = {} |
|
|
|
try { |
|
|
|
try { |
|
|
|
data = JSON.parse(formViewData.value.email as string) || {} |
|
|
|
data = JSON.parse(formViewData.value.email as string) || {} |
|
|
|
} catch (e) { |
|
|
|
} catch (e) {} |
|
|
|
} |
|
|
|
|
|
|
|
data[state.user.value?.email as string] = emailMe.value |
|
|
|
data[state.user.value?.email as string] = emailMe.value |
|
|
|
formViewData.value.email = JSON.stringify(data) |
|
|
|
formViewData.value.email = JSON.stringify(data) |
|
|
|
checkSMTPStatus() |
|
|
|
checkSMTPStatus() |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
localColumns.value = col |
|
|
|
localColumns.value = col |
|
|
|
.filter( |
|
|
|
.filter( |
|
|
|
(f: Record<string, any>) => f.show && f.uidt !== UITypes.Rollup && f.uidt !== UITypes.Lookup && f.uidt !== UITypes.Formula, |
|
|
|
(f: Record<string, any>) => f.show && f.uidt !== UITypes.Rollup && f.uidt !== UITypes.Lookup && f.uidt !== UITypes.Formula, |
|
|
|
) |
|
|
|
) |
|
|
|
.sort((a: Record<string, any>, b: Record<string, any>) => a.order - b.order) |
|
|
|
.sort((a: Record<string, any>, b: Record<string, any>) => a.order - b.order) |
|
|
|
.map((c: Record<string, any>) => ({...c, required: !!(c.required || 0)})) |
|
|
|
.map((c: Record<string, any>) => ({ ...c, required: !!(c.required || 0) })) |
|
|
|
|
|
|
|
|
|
|
|
systemFieldsIds.value = getSystemColumns(col).map((c: Record<string, any>) => c.fk_column_id) |
|
|
|
systemFieldsIds.value = getSystemColumns(col).map((c: Record<string, any>) => c.fk_column_id) |
|
|
|
|
|
|
|
|
|
|
|
hiddenColumns.value = col.filter( |
|
|
|
hiddenColumns.value = col.filter( |
|
|
|
(f: Record<string, any>) => !f.show && !systemFieldsIds.value.includes(f.fk_column_id) && f.uidt !== UITypes.Formula, |
|
|
|
(f: Record<string, any>) => !f.show && !systemFieldsIds.value.includes(f.fk_column_id) && f.uidt !== UITypes.Formula, |
|
|
|
) |
|
|
|
) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function isRequired(_columnObj: Record<string, any>, required = false) { |
|
|
|
function isRequired(_columnObj: Record<string, any>, required = false) { |
|
|
|
let columnObj = _columnObj |
|
|
|
let columnObj = _columnObj |
|
|
|
if ( |
|
|
|
if ( |
|
|
|
columnObj.uidt === UITypes.LinkToAnotherRecord && |
|
|
|
columnObj.uidt === UITypes.LinkToAnotherRecord && |
|
|
|
columnObj.colOptions && |
|
|
|
columnObj.colOptions && |
|
|
|
columnObj.colOptions.type === RelationTypes.BELONGS_TO |
|
|
|
columnObj.colOptions.type === RelationTypes.BELONGS_TO |
|
|
|
) { |
|
|
|
) { |
|
|
|
columnObj = columns.value.find((c: Record<string, any>) => c.id === columnObj.colOptions.fk_child_column_id) as Record<string, |
|
|
|
columnObj = columns.value.find((c: Record<string, any>) => c.id === columnObj.colOptions.fk_child_column_id) as Record< |
|
|
|
any> |
|
|
|
string, |
|
|
|
|
|
|
|
any |
|
|
|
|
|
|
|
> |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return required || (columnObj && columnObj.rqd && !columnObj.cdf) |
|
|
|
return required || (columnObj && columnObj.rqd && !columnObj.cdf) |
|
|
@ -330,19 +333,19 @@ onMounted(async () => { |
|
|
|
<div class="flex flex-row"> |
|
|
|
<div class="flex flex-row"> |
|
|
|
<div class="cursor-pointer mr-2"> |
|
|
|
<div class="cursor-pointer mr-2"> |
|
|
|
<span |
|
|
|
<span |
|
|
|
v-if="hiddenColumns.length" |
|
|
|
v-if="hiddenColumns.length" |
|
|
|
class="mr-2" |
|
|
|
class="mr-2" |
|
|
|
style="border-bottom: 2px solid rgb(218, 218, 218)" |
|
|
|
style="border-bottom: 2px solid rgb(218, 218, 218)" |
|
|
|
@click="addAllColumns" |
|
|
|
@click="addAllColumns" |
|
|
|
> |
|
|
|
> |
|
|
|
<!-- Add all --> |
|
|
|
<!-- Add all --> |
|
|
|
{{ $t('general.addAll') }} |
|
|
|
{{ $t('general.addAll') }} |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
<span |
|
|
|
<span |
|
|
|
v-if="localColumns.length" |
|
|
|
v-if="localColumns.length" |
|
|
|
class="ml-2" |
|
|
|
class="ml-2" |
|
|
|
style="border-bottom: 2px solid rgb(218, 218, 218)" |
|
|
|
style="border-bottom: 2px solid rgb(218, 218, 218)" |
|
|
|
@click="removeAllColumns" |
|
|
|
@click="removeAllColumns" |
|
|
|
> |
|
|
|
> |
|
|
|
<!-- Remove all --> |
|
|
|
<!-- Remove all --> |
|
|
|
{{ $t('general.removeAll') }} |
|
|
|
{{ $t('general.removeAll') }} |
|
|
@ -353,30 +356,30 @@ onMounted(async () => { |
|
|
|
<Draggable :list="hiddenColumns" draggable=".item" group="form-inputs" @start="drag = true" @end="drag = false"> |
|
|
|
<Draggable :list="hiddenColumns" draggable=".item" group="form-inputs" @start="drag = true" @end="drag = false"> |
|
|
|
<template #item="{ element }"> |
|
|
|
<template #item="{ element }"> |
|
|
|
<a-card |
|
|
|
<a-card |
|
|
|
size="small" |
|
|
|
size="small" |
|
|
|
class="ma-0 pa-0 cursor-pointer item mb-2" |
|
|
|
class="ma-0 pa-0 cursor-pointer item mb-2" |
|
|
|
@mousedown="moved = false" |
|
|
|
@mousedown="moved = false" |
|
|
|
@mousemove="moved = false" |
|
|
|
@mousemove="moved = false" |
|
|
|
@mouseup="handleMouseUp(element)" |
|
|
|
@mouseup="handleMouseUp(element)" |
|
|
|
> |
|
|
|
> |
|
|
|
<div class="flex"> |
|
|
|
<div class="flex"> |
|
|
|
<div class="flex flex-row flex-1"> |
|
|
|
<div class="flex flex-row flex-1"> |
|
|
|
<SmartsheetHeaderVirtualCell |
|
|
|
<SmartsheetHeaderVirtualCell |
|
|
|
v-if="isVirtualCol(element)" |
|
|
|
v-if="isVirtualCol(element)" |
|
|
|
:column="{ ...element, title: element.label || element.title }" |
|
|
|
:column="{ ...element, title: element.label || element.title }" |
|
|
|
:required="isRequired(element, element.required)" |
|
|
|
:required="isRequired(element, element.required)" |
|
|
|
:hide-menu="true" |
|
|
|
:hide-menu="true" |
|
|
|
/> |
|
|
|
/> |
|
|
|
<SmartsheetHeaderCell |
|
|
|
<SmartsheetHeaderCell |
|
|
|
v-else |
|
|
|
v-else |
|
|
|
class="w-full" |
|
|
|
class="w-full" |
|
|
|
:column="{ ...element, title: element.label || element.title }" |
|
|
|
:column="{ ...element, title: element.label || element.title }" |
|
|
|
:required="isRequired(element, element.required)" |
|
|
|
:required="isRequired(element, element.required)" |
|
|
|
:hide-menu="true" |
|
|
|
:hide-menu="true" |
|
|
|
/> |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="flex flex-row"> |
|
|
|
<div class="flex flex-row"> |
|
|
|
<mdi-drag-vertical class="flex flex-1"/> |
|
|
|
<mdi-drag-vertical class="flex flex-1" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</a-card> |
|
|
|
</a-card> |
|
|
@ -389,14 +392,13 @@ onMounted(async () => { |
|
|
|
<a-dropdown v-model:visible="showColumnDropdown" :trigger="['click']"> |
|
|
|
<a-dropdown v-model:visible="showColumnDropdown" :trigger="['click']"> |
|
|
|
<a-button type="link" class="w-full caption mt-2" size="large" @click="showColumnDropdown = true"> |
|
|
|
<a-button type="link" class="w-full caption mt-2" size="large" @click="showColumnDropdown = true"> |
|
|
|
<div class="flex items-center prose-sm justify-center text-gray-400"> |
|
|
|
<div class="flex items-center prose-sm justify-center text-gray-400"> |
|
|
|
<mdi-plus/> |
|
|
|
<mdi-plus /> |
|
|
|
<!-- Add new field to this table --> |
|
|
|
<!-- Add new field to this table --> |
|
|
|
{{ $t('activity.addField') }} |
|
|
|
{{ $t('activity.addField') }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</a-button> |
|
|
|
</a-button> |
|
|
|
<template #overlay> |
|
|
|
<template #overlay> |
|
|
|
<SmartsheetColumnEditOrAdd ref="editOrAddRef" @submit="submitCallback" |
|
|
|
<SmartsheetColumnEditOrAdd ref="editOrAddRef" @submit="submitCallback" @cancel="showColumnDropdown = false" /> |
|
|
|
@cancel="showColumnDropdown = false"/> |
|
|
|
|
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</a-dropdown> |
|
|
|
</a-dropdown> |
|
|
|
</template> |
|
|
|
</template> |
|
|
@ -410,110 +412,108 @@ onMounted(async () => { |
|
|
|
<!-- Header --> |
|
|
|
<!-- Header --> |
|
|
|
<a-form-item class="ma-0 gap-0 pa-0"> |
|
|
|
<a-form-item class="ma-0 gap-0 pa-0"> |
|
|
|
<a-input |
|
|
|
<a-input |
|
|
|
v-model:value="formViewData.heading" |
|
|
|
v-model:value="formViewData.heading" |
|
|
|
class="w-full text-bold text-h3" |
|
|
|
class="w-full text-bold text-h3" |
|
|
|
size="large" |
|
|
|
size="large" |
|
|
|
hide-details |
|
|
|
hide-details |
|
|
|
placeholder="Form Title" |
|
|
|
placeholder="Form Title" |
|
|
|
:bordered="false" |
|
|
|
:bordered="false" |
|
|
|
@blur="updateView" |
|
|
|
@blur="updateView" |
|
|
|
@keydown.enter="updateView" |
|
|
|
@keydown.enter="updateView" |
|
|
|
/> |
|
|
|
/> |
|
|
|
</a-form-item> |
|
|
|
</a-form-item> |
|
|
|
<!-- Sub Header --> |
|
|
|
<!-- Sub Header --> |
|
|
|
<a-form-item> |
|
|
|
<a-form-item> |
|
|
|
<a-input |
|
|
|
<a-input |
|
|
|
v-model:value="formViewData.subheading" |
|
|
|
v-model:value="formViewData.subheading" |
|
|
|
class="w-full" |
|
|
|
class="w-full" |
|
|
|
size="large" |
|
|
|
size="large" |
|
|
|
hide-details |
|
|
|
hide-details |
|
|
|
:placeholder="$t('msg.info.formDesc')" |
|
|
|
:placeholder="$t('msg.info.formDesc')" |
|
|
|
:bordered="false" |
|
|
|
:bordered="false" |
|
|
|
@blur="updateView" |
|
|
|
@blur="updateView" |
|
|
|
@click="updateView" |
|
|
|
@click="updateView" |
|
|
|
/> |
|
|
|
/> |
|
|
|
</a-form-item> |
|
|
|
</a-form-item> |
|
|
|
<Draggable |
|
|
|
<Draggable |
|
|
|
ref="draggableRef" |
|
|
|
ref="draggableRef" |
|
|
|
:list="localColumns" |
|
|
|
:list="localColumns" |
|
|
|
item-key="fk_column_id" |
|
|
|
item-key="fk_column_id" |
|
|
|
draggable=".item" |
|
|
|
draggable=".item" |
|
|
|
group="form-inputs" |
|
|
|
group="form-inputs" |
|
|
|
class="h-100" |
|
|
|
class="h-100" |
|
|
|
@change="onMove($event)" |
|
|
|
@change="onMove($event)" |
|
|
|
@start="drag = true" |
|
|
|
@start="drag = true" |
|
|
|
@end="drag = false" |
|
|
|
@end="drag = false" |
|
|
|
> |
|
|
|
> |
|
|
|
<template #item="{ element, index }"> |
|
|
|
<template #item="{ element, index }"> |
|
|
|
<div class="nc-editable item cursor-pointer hover:bg-primary/10 pa-3" |
|
|
|
<div class="nc-editable item cursor-pointer hover:bg-primary/10 pa-3" @click="activeRow = element.title"> |
|
|
|
@click="activeRow = element.title"> |
|
|
|
|
|
|
|
<div class="flex"> |
|
|
|
<div class="flex"> |
|
|
|
<div class="flex flex-1"> |
|
|
|
<div class="flex flex-1"> |
|
|
|
<div class="flex flex-row"> |
|
|
|
<div class="flex flex-row"> |
|
|
|
<mdi-drag-vertical class="flex flex-1"/> |
|
|
|
<mdi-drag-vertical class="flex flex-1" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<SmartsheetHeaderVirtualCell |
|
|
|
<SmartsheetHeaderVirtualCell |
|
|
|
v-if="isVirtualCol(element)" |
|
|
|
v-if="isVirtualCol(element)" |
|
|
|
:column="{ ...element, title: element.label || element.title }" |
|
|
|
:column="{ ...element, title: element.label || element.title }" |
|
|
|
:required="isRequired(element, element.required)" |
|
|
|
:required="isRequired(element, element.required)" |
|
|
|
:hide-menu="true" |
|
|
|
:hide-menu="true" |
|
|
|
/> |
|
|
|
/> |
|
|
|
<SmartsheetHeaderCell |
|
|
|
<SmartsheetHeaderCell |
|
|
|
v-else |
|
|
|
v-else |
|
|
|
:column="{ ...element, title: element.label || element.title }" |
|
|
|
:column="{ ...element, title: element.label || element.title }" |
|
|
|
:required="isRequired(element, element.required)" |
|
|
|
:required="isRequired(element, element.required)" |
|
|
|
:hide-menu="true" |
|
|
|
:hide-menu="true" |
|
|
|
/> |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-if="isUIAllowed('editFormView') && !isRequired(element, element.required)" class="flex"> |
|
|
|
<div v-if="isUIAllowed('editFormView') && !isRequired(element, element.required)" class="flex"> |
|
|
|
<mdi-eye-off-outline class="opacity-0 nc-field-remove-icon" @click.stop="hideColumn(index)"/> |
|
|
|
<mdi-eye-off-outline class="opacity-0 nc-field-remove-icon" @click.stop="hideColumn(index)" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<a-form-item |
|
|
|
<a-form-item |
|
|
|
v-if="isVirtualCol(element)" |
|
|
|
v-if="isVirtualCol(element)" |
|
|
|
class="ma-0 gap-0 pa-0" |
|
|
|
class="ma-0 gap-0 pa-0" |
|
|
|
:name="element.title" |
|
|
|
:name="element.title" |
|
|
|
:rules="[{ required: element.required, message: `${element.title} is required` }]" |
|
|
|
:rules="[{ required: element.required, message: `${element.title} is required` }]" |
|
|
|
> |
|
|
|
> |
|
|
|
<SmartsheetVirtualCell v-model="formState[element.title]" class="nc-input" :column="element"/> |
|
|
|
<SmartsheetVirtualCell v-model="formState[element.title]" class="nc-input" :column="element" /> |
|
|
|
</a-form-item> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item |
|
|
|
<a-form-item |
|
|
|
v-else |
|
|
|
v-else |
|
|
|
class="ma-0 gap-0 pa-0" |
|
|
|
class="ma-0 gap-0 pa-0" |
|
|
|
:name="element.title" |
|
|
|
:name="element.title" |
|
|
|
:rules="[{ required: element.required, message: `${element.title} is required` }]" |
|
|
|
:rules="[{ required: element.required, message: `${element.title} is required` }]" |
|
|
|
> |
|
|
|
> |
|
|
|
<SmartsheetCell |
|
|
|
<SmartsheetCell |
|
|
|
v-model="formState[element.title]" |
|
|
|
v-model="formState[element.title]" |
|
|
|
class="nc-input" |
|
|
|
class="nc-input" |
|
|
|
:column="element" |
|
|
|
:column="element" |
|
|
|
:edit-enabled="true" |
|
|
|
:edit-enabled="true" |
|
|
|
/> |
|
|
|
/> |
|
|
|
</a-form-item> |
|
|
|
</a-form-item> |
|
|
|
<div v-if="activeRow === element.title"> |
|
|
|
<div v-if="activeRow === element.title"> |
|
|
|
<a-form-item class="my-0 w-1/2"> |
|
|
|
<a-form-item class="my-0 w-1/2"> |
|
|
|
<a-input |
|
|
|
<a-input |
|
|
|
v-model:value="element.label" |
|
|
|
v-model:value="element.label" |
|
|
|
size="small" |
|
|
|
size="small" |
|
|
|
class="form-meta-input !bg-[#dbdbdb]" |
|
|
|
class="form-meta-input !bg-[#dbdbdb]" |
|
|
|
:placeholder="$t('msg.info.formInput')" |
|
|
|
:placeholder="$t('msg.info.formInput')" |
|
|
|
@change="updateColMeta(element)" |
|
|
|
@change="updateColMeta(element)" |
|
|
|
> |
|
|
|
> |
|
|
|
</a-input> |
|
|
|
</a-input> |
|
|
|
</a-form-item> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item class="mt-2 mb-0 w-1/2"> |
|
|
|
<a-form-item class="mt-2 mb-0 w-1/2"> |
|
|
|
<a-input |
|
|
|
<a-input |
|
|
|
size="small" |
|
|
|
v-model:value="element.description" |
|
|
|
v-model:value="element.description" |
|
|
|
size="small" |
|
|
|
class="form-meta-input !bg-[#dbdbdb] text-sm" |
|
|
|
class="form-meta-input !bg-[#dbdbdb] text-sm" |
|
|
|
:placeholder="$t('msg.info.formHelpText')" |
|
|
|
:placeholder="$t('msg.info.formHelpText')" |
|
|
|
@change="updateColMeta(element)" |
|
|
|
@change="updateColMeta(element)" |
|
|
|
/> |
|
|
|
/> |
|
|
|
</a-form-item> |
|
|
|
</a-form-item> |
|
|
|
<div class="items-center flex"> |
|
|
|
<div class="items-center flex"> |
|
|
|
<span class="text-sm text-gray-500 mr-2">{{ $t('general.required') }}</span> |
|
|
|
<span class="text-sm text-gray-500 mr-2">{{ $t('general.required') }}</span> |
|
|
|
<a-switch size="small" v-model:checked="element.required" class="my-2" |
|
|
|
<a-switch v-model:checked="element.required" size="small" class="my-2" @change="updateColMeta(element)" /> |
|
|
|
@change="updateColMeta(element)"/> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<span class="text-gray-500">{{ element.description }}</span> |
|
|
|
<span class="text-gray-500">{{ element.description }}</span> |
|
|
@ -521,8 +521,8 @@ onMounted(async () => { |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<template #footer> |
|
|
|
<template #footer> |
|
|
|
<div |
|
|
|
<div |
|
|
|
v-if="!localColumns.length" |
|
|
|
v-if="!localColumns.length" |
|
|
|
class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center" |
|
|
|
class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center" |
|
|
|
> |
|
|
|
> |
|
|
|
Drag and drop fields here to add |
|
|
|
Drag and drop fields here to add |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -535,52 +535,47 @@ onMounted(async () => { |
|
|
|
{{ $t('general.submit') }} |
|
|
|
{{ $t('general.submit') }} |
|
|
|
</a-button> |
|
|
|
</a-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</a-card> |
|
|
|
</a-card> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</a-form> |
|
|
|
</a-form> |
|
|
|
|
|
|
|
|
|
|
|
<div class="mx-10 px-10"> |
|
|
|
<div class="mx-10 px-10"> |
|
|
|
|
|
|
|
|
|
|
|
<!-- After form is submitted --> |
|
|
|
<!-- After form is submitted --> |
|
|
|
<div class="text-gray-500 mt-4 mb-2"> |
|
|
|
<div class="text-gray-500 mt-4 mb-2"> |
|
|
|
{{ $t('msg.info.afterFormSubmitted') }} |
|
|
|
{{ $t('msg.info.afterFormSubmitted') }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- Show this message --> |
|
|
|
<!-- Show this message --> |
|
|
|
<label class="text-gray-600 text-bold"> {{ $t('msg.info.showMessage') }}: </label> |
|
|
|
<label class="text-gray-600 text-bold"> {{ $t('msg.info.showMessage') }}: </label> |
|
|
|
<a-textarea v-model:value="formViewData.success_msg" rows="3" hide-details @change="updateView"/> |
|
|
|
<a-textarea v-model:value="formViewData.success_msg" rows="3" hide-details @change="updateView" /> |
|
|
|
|
|
|
|
|
|
|
|
<!-- Other options --> |
|
|
|
<!-- Other options --> |
|
|
|
<div class="mt-4"> |
|
|
|
<div class="mt-4"> |
|
|
|
<div class="my-4"> |
|
|
|
<div class="my-4"> |
|
|
|
<!-- Show "Submit Another Form" button --> |
|
|
|
<!-- Show "Submit Another Form" button --> |
|
|
|
<a-switch size="small" |
|
|
|
<a-switch |
|
|
|
v-model:checked="formViewData.submit_another_form" |
|
|
|
v-model:checked="formViewData.submit_another_form" |
|
|
|
v-t="[`a:form-view:submit-another-form`]" |
|
|
|
v-t="[`a:form-view:submit-another-form`]" |
|
|
|
@change="updateView" |
|
|
|
size="small" |
|
|
|
|
|
|
|
@change="updateView" |
|
|
|
/> |
|
|
|
/> |
|
|
|
<span class="ml-4">{{ $t('msg.info.submitAnotherForm') }}</span> |
|
|
|
<span class="ml-4">{{ $t('msg.info.submitAnotherForm') }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="my-4"> |
|
|
|
<div class="my-4"> |
|
|
|
<!-- Show a blank form after 5 seconds --> |
|
|
|
<!-- Show a blank form after 5 seconds --> |
|
|
|
<a-switch size="small" |
|
|
|
<a-switch |
|
|
|
v-model:checked="formViewData.show_blank_form" |
|
|
|
v-model:checked="formViewData.show_blank_form" |
|
|
|
v-t="[`a:form-view:show-blank-form`]" |
|
|
|
v-t="[`a:form-view:show-blank-form`]" |
|
|
|
@change="updateView" |
|
|
|
size="small" |
|
|
|
|
|
|
|
@change="updateView" |
|
|
|
/> |
|
|
|
/> |
|
|
|
<span class="ml-4">{{ $t('msg.info.showBlankForm') }}</span> |
|
|
|
<span class="ml-4">{{ $t('msg.info.showBlankForm') }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="my-4"> |
|
|
|
<div class="my-4"> |
|
|
|
<a-switch size="small" v-model:checked="emailMe" v-t="[`a:form-view:email-me`]" |
|
|
|
<a-switch v-model:checked="emailMe" v-t="[`a:form-view:email-me`]" size="small" @change="onEmailChange" /> |
|
|
|
@change="onEmailChange"/> |
|
|
|
|
|
|
|
<!-- Email me at <email> --> |
|
|
|
<!-- Email me at <email> --> |
|
|
|
<span class="ml-4"> |
|
|
|
<span class="ml-4"> |
|
|
|
{{ $t('msg.info.emailForm') }} <span class="text-bold text-gray-600">{{ |
|
|
|
{{ $t('msg.info.emailForm') }} <span class="text-bold text-gray-600">{{ state.user.value?.email }}</span> |
|
|
|
state.user.value?.email |
|
|
|
</span> |
|
|
|
}}</span> |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|