|
|
@ -39,6 +39,8 @@ const props = defineProps<Props>() |
|
|
|
|
|
|
|
|
|
|
|
const emits = defineEmits(['update:modelValue', 'cancel', 'next', 'prev']) |
|
|
|
const emits = defineEmits(['update:modelValue', 'cancel', 'next', 'prev']) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const { t } = useI18n() |
|
|
|
|
|
|
|
|
|
|
|
const row = ref(props.row) |
|
|
|
const row = ref(props.row) |
|
|
|
|
|
|
|
|
|
|
|
const state = toRef(props, 'state') |
|
|
|
const state = toRef(props, 'state') |
|
|
@ -60,6 +62,8 @@ provide(MetaInj, meta) |
|
|
|
|
|
|
|
|
|
|
|
const { commentsDrawer, changedColumns, state: rowState, isNew, loadRow } = useProvideExpandedFormStore(meta, row) |
|
|
|
const { commentsDrawer, changedColumns, state: rowState, isNew, loadRow } = useProvideExpandedFormStore(meta, row) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const duplicatingRowInProgress = ref(false) |
|
|
|
|
|
|
|
|
|
|
|
if (props.loadRow) { |
|
|
|
if (props.loadRow) { |
|
|
|
await loadRow() |
|
|
|
await loadRow() |
|
|
|
} |
|
|
|
} |
|
|
@ -101,6 +105,23 @@ const onClose = () => { |
|
|
|
isExpanded.value = false |
|
|
|
isExpanded.value = false |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const onDuplicateRow = () => { |
|
|
|
|
|
|
|
duplicatingRowInProgress.value = true |
|
|
|
|
|
|
|
const newRow = Object.assign( |
|
|
|
|
|
|
|
{}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
row: row.value.row, |
|
|
|
|
|
|
|
oldRow: {}, |
|
|
|
|
|
|
|
rowMeta: { new: true }, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
setTimeout(async () => { |
|
|
|
|
|
|
|
row.value = newRow |
|
|
|
|
|
|
|
duplicatingRowInProgress.value = false |
|
|
|
|
|
|
|
message.success(t('msg.success.rowDuplicatedWithoutSavedYet')) |
|
|
|
|
|
|
|
}, 500) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const reloadParentRowHook = inject(ReloadRowDataHookInj, createEventHook()) |
|
|
|
const reloadParentRowHook = inject(ReloadRowDataHookInj, createEventHook()) |
|
|
|
|
|
|
|
|
|
|
|
// override reload trigger and use it to reload grid and the form itself |
|
|
|
// override reload trigger and use it to reload grid and the form itself |
|
|
@ -148,7 +169,7 @@ export default { |
|
|
|
class="nc-drawer-expanded-form" |
|
|
|
class="nc-drawer-expanded-form" |
|
|
|
:class="{ active: isExpanded }" |
|
|
|
:class="{ active: isExpanded }" |
|
|
|
> |
|
|
|
> |
|
|
|
<SmartsheetExpandedFormHeader :view="props.view" @cancel="onClose" /> |
|
|
|
<SmartsheetExpandedFormHeader :view="props.view" @cancel="onClose" @duplicateRow="onDuplicateRow" /> |
|
|
|
|
|
|
|
|
|
|
|
<div class="!bg-gray-100 rounded flex-1 relative"> |
|
|
|
<div class="!bg-gray-100 rounded flex-1 relative"> |
|
|
|
<template v-if="props.showNextPrevIcons"> |
|
|
|
<template v-if="props.showNextPrevIcons"> |
|
|
@ -169,8 +190,10 @@ export default { |
|
|
|
<div class="flex h-full nc-form-wrapper items-stretch min-h-[max(70vh,100%)]"> |
|
|
|
<div class="flex h-full nc-form-wrapper items-stretch min-h-[max(70vh,100%)]"> |
|
|
|
<div class="flex-1 overflow-auto scrollbar-thin-dull nc-form-fields-container"> |
|
|
|
<div class="flex-1 overflow-auto scrollbar-thin-dull nc-form-fields-container"> |
|
|
|
<div class="w-[500px] mx-auto"> |
|
|
|
<div class="w-[500px] mx-auto"> |
|
|
|
|
|
|
|
<a-spin v-if="duplicatingRowInProgress" class="!flex items-center" /> |
|
|
|
<div |
|
|
|
<div |
|
|
|
v-for="(col, i) of fields" |
|
|
|
v-for="(col, i) of fields" |
|
|
|
|
|
|
|
v-if="!duplicatingRowInProgress" |
|
|
|
v-show="!isVirtualCol(col) || !isNew || col.uidt === UITypes.LinkToAnotherRecord" |
|
|
|
v-show="!isVirtualCol(col) || !isNew || col.uidt === UITypes.LinkToAnotherRecord" |
|
|
|
:key="col.title" |
|
|
|
:key="col.title" |
|
|
|
class="mt-2 py-2" |
|
|
|
class="mt-2 py-2" |
|
|
@ -237,9 +260,11 @@ export default { |
|
|
|
.nc-next-arrow { |
|
|
|
.nc-next-arrow { |
|
|
|
@apply absolute opacity-70 rounded-full transition-transform transition-background transition-opacity transform bg-white hover: (bg-gray-200) active:(scale-125 opacity-100) text-xl; |
|
|
|
@apply absolute opacity-70 rounded-full transition-transform transition-background transition-opacity transform bg-white hover: (bg-gray-200) active:(scale-125 opacity-100) text-xl; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.nc-prev-arrow { |
|
|
|
.nc-prev-arrow { |
|
|
|
@apply left-4 top-4; |
|
|
|
@apply left-4 top-4; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.nc-next-arrow { |
|
|
|
.nc-next-arrow { |
|
|
|
@apply right-4 top-4; |
|
|
|
@apply right-4 top-4; |
|
|
|
} |
|
|
|
} |
|
|
|