|
|
@ -29,15 +29,14 @@ import { |
|
|
|
useVModel, |
|
|
|
useVModel, |
|
|
|
watch, |
|
|
|
watch, |
|
|
|
} from '#imports' |
|
|
|
} from '#imports' |
|
|
|
import type { Row } from '#imports' |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
interface Props { |
|
|
|
interface Props { |
|
|
|
modelValue?: boolean |
|
|
|
modelValue?: boolean |
|
|
|
row: Row |
|
|
|
|
|
|
|
state?: Record<string, any> | null |
|
|
|
state?: Record<string, any> | null |
|
|
|
meta: TableType |
|
|
|
meta: TableType |
|
|
|
loadRow?: boolean |
|
|
|
loadRow?: boolean |
|
|
|
useMetaFields?: boolean |
|
|
|
useMetaFields?: boolean |
|
|
|
|
|
|
|
row?: Row |
|
|
|
rowId?: string |
|
|
|
rowId?: string |
|
|
|
view?: ViewType |
|
|
|
view?: ViewType |
|
|
|
showNextPrevIcons?: boolean |
|
|
|
showNextPrevIcons?: boolean |
|
|
@ -57,7 +56,9 @@ const { isMobileMode } = useGlobal() |
|
|
|
|
|
|
|
|
|
|
|
const { t } = useI18n() |
|
|
|
const { t } = useI18n() |
|
|
|
|
|
|
|
|
|
|
|
const row = ref(props.row) |
|
|
|
const rowId = toRef(props, 'rowId') |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const row = toRef(props, 'row') |
|
|
|
|
|
|
|
|
|
|
|
const state = toRef(props, 'state') |
|
|
|
const state = toRef(props, 'state') |
|
|
|
|
|
|
|
|
|
|
@ -108,19 +109,21 @@ const { |
|
|
|
loadRow: _loadRow, |
|
|
|
loadRow: _loadRow, |
|
|
|
primaryKey, |
|
|
|
primaryKey, |
|
|
|
saveRowAndStay, |
|
|
|
saveRowAndStay, |
|
|
|
|
|
|
|
row: _row, |
|
|
|
syncLTARRefs, |
|
|
|
syncLTARRefs, |
|
|
|
save: _save, |
|
|
|
save: _save, |
|
|
|
|
|
|
|
loadCommentsAndLogs, |
|
|
|
} = useProvideExpandedFormStore(meta, row) |
|
|
|
} = useProvideExpandedFormStore(meta, row) |
|
|
|
|
|
|
|
|
|
|
|
const duplicatingRowInProgress = ref(false) |
|
|
|
const duplicatingRowInProgress = ref(false) |
|
|
|
|
|
|
|
|
|
|
|
if (props.loadRow) { |
|
|
|
if (props.loadRow) { |
|
|
|
await _loadRow() |
|
|
|
await _loadRow(rowId.value) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (props.rowId) { |
|
|
|
if (rowId.value) { |
|
|
|
try { |
|
|
|
try { |
|
|
|
await _loadRow(props.rowId) |
|
|
|
await _loadRow(rowId.value) |
|
|
|
} catch (e: any) { |
|
|
|
} catch (e: any) { |
|
|
|
if (e.response?.status === 404) { |
|
|
|
if (e.response?.status === 404) { |
|
|
|
// todo: i18n |
|
|
|
// todo: i18n |
|
|
@ -149,14 +152,14 @@ const isExpanded = useVModel(props, 'modelValue', emits, { |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const onClose = () => { |
|
|
|
const onClose = () => { |
|
|
|
if (row.value?.rowMeta?.new) emits('cancel') |
|
|
|
if (_row.value?.rowMeta?.new) emits('cancel') |
|
|
|
isExpanded.value = false |
|
|
|
isExpanded.value = false |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const onDuplicateRow = () => { |
|
|
|
const onDuplicateRow = () => { |
|
|
|
duplicatingRowInProgress.value = true |
|
|
|
duplicatingRowInProgress.value = true |
|
|
|
isUnsavedFormExist.value = true |
|
|
|
isUnsavedFormExist.value = true |
|
|
|
const oldRow = { ...row.value.row } |
|
|
|
const oldRow = { ..._row.value.row } |
|
|
|
delete oldRow.ncRecordId |
|
|
|
delete oldRow.ncRecordId |
|
|
|
const newRow = Object.assign( |
|
|
|
const newRow = Object.assign( |
|
|
|
{}, |
|
|
|
{}, |
|
|
@ -167,7 +170,7 @@ const onDuplicateRow = () => { |
|
|
|
}, |
|
|
|
}, |
|
|
|
) |
|
|
|
) |
|
|
|
setTimeout(async () => { |
|
|
|
setTimeout(async () => { |
|
|
|
row.value = newRow |
|
|
|
_row.value = newRow |
|
|
|
duplicatingRowInProgress.value = false |
|
|
|
duplicatingRowInProgress.value = false |
|
|
|
message.success(t('msg.success.rowDuplicatedWithoutSavedYet')) |
|
|
|
message.success(t('msg.success.rowDuplicatedWithoutSavedYet')) |
|
|
|
}, 500) |
|
|
|
}, 500) |
|
|
@ -219,17 +222,12 @@ provide(ReloadRowDataHookInj, reloadHook) |
|
|
|
|
|
|
|
|
|
|
|
if (isKanban.value) { |
|
|
|
if (isKanban.value) { |
|
|
|
// adding column titles to changedColumns if they are preset |
|
|
|
// adding column titles to changedColumns if they are preset |
|
|
|
for (const [k, v] of Object.entries(row.value.row)) { |
|
|
|
for (const [k, v] of Object.entries(_row.value.row)) { |
|
|
|
if (v) { |
|
|
|
if (v) { |
|
|
|
changedColumns.value.add(k) |
|
|
|
changedColumns.value.add(k) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
watch(isUnsavedFormExist, () => { |
|
|
|
|
|
|
|
console.log(isUnsavedFormExist.value, 'HEHEH') |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
provide(IsExpandedFormOpenInj, isExpanded) |
|
|
|
provide(IsExpandedFormOpenInj, isExpanded) |
|
|
|
|
|
|
|
|
|
|
|
const cellWrapperEl = ref() |
|
|
|
const cellWrapperEl = ref() |
|
|
@ -242,7 +240,7 @@ onMounted(() => { |
|
|
|
|
|
|
|
|
|
|
|
const addNewRow = () => { |
|
|
|
const addNewRow = () => { |
|
|
|
setTimeout(async () => { |
|
|
|
setTimeout(async () => { |
|
|
|
row.value = { |
|
|
|
_row.value = { |
|
|
|
row: {}, |
|
|
|
row: {}, |
|
|
|
oldRow: {}, |
|
|
|
oldRow: {}, |
|
|
|
rowMeta: { new: true }, |
|
|
|
rowMeta: { new: true }, |
|
|
@ -340,22 +338,10 @@ const onConfirmDeleteRowClick = async () => { |
|
|
|
showDeleteRowModal.value = false |
|
|
|
showDeleteRowModal.value = false |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
watch( |
|
|
|
watch(rowId, async (nRow) => { |
|
|
|
state, |
|
|
|
await _loadRow(nRow) |
|
|
|
() => { |
|
|
|
await loadCommentsAndLogs() |
|
|
|
if (!state.value?.id) return |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
|
|
const rowDom = wrapper.value?.querySelector(`.nc-expanded-form-row[col-id="${state.value?.id}"]`) |
|
|
|
|
|
|
|
if (rowDom) { |
|
|
|
|
|
|
|
rowDom.scrollIntoView({ behavior: 'smooth', block: 'center' }) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, 650) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
immediate: true, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const showRightSections = computed(() => { |
|
|
|
const showRightSections = computed(() => { |
|
|
|
return !isNew.value && commentsDrawer.value && isUIAllowed('commentList') |
|
|
|
return !isNew.value && commentsDrawer.value && isUIAllowed('commentList') |
|
|
@ -370,7 +356,6 @@ export default { |
|
|
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<NcModal |
|
|
|
<NcModal |
|
|
|
:key="key" |
|
|
|
|
|
|
|
v-model:visible="isExpanded" |
|
|
|
v-model:visible="isExpanded" |
|
|
|
:footer="null" |
|
|
|
:footer="null" |
|
|
|
:width="commentsDrawer && isUIAllowed('commentList') ? 'min(80vw,1280px)' : 'min(80vw,1280px)'" |
|
|
|
:width="commentsDrawer && isUIAllowed('commentList') ? 'min(80vw,1280px)' : 'min(80vw,1280px)'" |
|
|
@ -404,9 +389,15 @@ export default { |
|
|
|
<MdiChevronDown class="text-md" /> |
|
|
|
<MdiChevronDown class="text-md" /> |
|
|
|
</NcButton> |
|
|
|
</NcButton> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-if="displayValue" class="flex items-center truncate font-bold text-gray-800 text-xl"> |
|
|
|
<div |
|
|
|
|
|
|
|
v-if="displayValue && !row.rowMeta?.new" |
|
|
|
|
|
|
|
class="flex items-center truncate w-32 hover:w-64 transition-all font-bold text-gray-800 text-xl" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<span class="truncate"> |
|
|
|
{{ displayValue }} |
|
|
|
{{ displayValue }} |
|
|
|
|
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-if="row.rowMeta?.new" class="flex items-center truncate font-bold text-gray-800 text-xl">New Record</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="flex gap-2"> |
|
|
|
<div class="flex gap-2"> |
|
|
|
<NcDropdown v-if="!isNew"> |
|
|
|
<NcDropdown v-if="!isNew"> |
|
|
@ -505,22 +496,26 @@ export default { |
|
|
|
:data-testid="`nc-expand-col-${col.title}`" |
|
|
|
:data-testid="`nc-expand-col-${col.title}`" |
|
|
|
> |
|
|
|
> |
|
|
|
<div class="flex items-start flex-row xs:(flex-col w-full) nc-expanded-cell"> |
|
|
|
<div class="flex items-start flex-row xs:(flex-col w-full) nc-expanded-cell"> |
|
|
|
<div class="w-[12rem] xs:(w-full) mt-1.5"> |
|
|
|
<div class="w-[12rem] xs:(w-full) mt-1.5 !h-[35px]"> |
|
|
|
<LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" class="nc-expanded-cell-header" :column="col" /> |
|
|
|
<LazySmartsheetHeaderVirtualCell |
|
|
|
|
|
|
|
v-if="isVirtualCol(col)" |
|
|
|
|
|
|
|
class="nc-expanded-cell-header !text-gray-600" |
|
|
|
|
|
|
|
:column="col" |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
|
|
<LazySmartsheetHeaderCell v-else class="nc-expanded-cell-header" :column="col" /> |
|
|
|
<LazySmartsheetHeaderCell v-else class="nc-expanded-cell-header !text-gray-600" :column="col" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<LazySmartsheetDivDataCell |
|
|
|
<LazySmartsheetDivDataCell |
|
|
|
v-if="col.title" |
|
|
|
v-if="col.title" |
|
|
|
:ref="i ? null : (el: any) => (cellWrapperEl = el)" |
|
|
|
:ref="i ? null : (el: any) => (cellWrapperEl = el)" |
|
|
|
class="!bg-white rounded-lg !w-[20rem] !xs:w-full border-1 border-gray-200 px-1 min-h-[35px] flex items-center relative" |
|
|
|
class="!bg-white rounded-lg !w-[20rem] !xs:w-full border-1 overflow-hidden border-gray-200 px-1 min-h-[35px] flex items-center relative" |
|
|
|
> |
|
|
|
> |
|
|
|
<LazySmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row" :column="col" /> |
|
|
|
<LazySmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="_row.row[col.title]" :row="_row" :column="col" /> |
|
|
|
|
|
|
|
|
|
|
|
<LazySmartsheetCell |
|
|
|
<LazySmartsheetCell |
|
|
|
v-else |
|
|
|
v-else |
|
|
|
v-model="row.row[col.title]" |
|
|
|
v-model="_row.row[col.title]" |
|
|
|
:column="col" |
|
|
|
:column="col" |
|
|
|
:edit-enabled="true" |
|
|
|
:edit-enabled="true" |
|
|
|
:active="true" |
|
|
|
:active="true" |
|
|
@ -549,22 +544,22 @@ export default { |
|
|
|
:data-testid="`nc-expand-col-${col.title}`" |
|
|
|
:data-testid="`nc-expand-col-${col.title}`" |
|
|
|
> |
|
|
|
> |
|
|
|
<div class="flex flex-row items-start"> |
|
|
|
<div class="flex flex-row items-start"> |
|
|
|
<div class="w-[12rem] scale-110 mt-2.5"> |
|
|
|
<div class="w-[12rem] scale-110 !h-[35px] mt-2.5"> |
|
|
|
<LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" /> |
|
|
|
<LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" class="!text-gray-600" :column="col" /> |
|
|
|
|
|
|
|
|
|
|
|
<LazySmartsheetHeaderCell v-else :column="col" /> |
|
|
|
<LazySmartsheetHeaderCell v-else class="!text-gray-600" :column="col" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<LazySmartsheetDivDataCell |
|
|
|
<LazySmartsheetDivDataCell |
|
|
|
v-if="col.title" |
|
|
|
v-if="col.title" |
|
|
|
:ref="i ? null : (el: any) => (cellWrapperEl = el)" |
|
|
|
:ref="i ? null : (el: any) => (cellWrapperEl = el)" |
|
|
|
class="!bg-white rounded-lg !w-[20rem] border-1 border-gray-200 px-1 min-h-[35px] flex items-center relative" |
|
|
|
class="!bg-white rounded-lg !w-[20rem] border-1 overflow-hidden border-gray-200 px-1 min-h-[35px] flex items-center relative" |
|
|
|
> |
|
|
|
> |
|
|
|
<LazySmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row" :column="col" /> |
|
|
|
<LazySmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="_row.row[col.title]" :row="_row" :column="col" /> |
|
|
|
|
|
|
|
|
|
|
|
<LazySmartsheetCell |
|
|
|
<LazySmartsheetCell |
|
|
|
v-else |
|
|
|
v-else |
|
|
|
v-model="row.row[col.title]" |
|
|
|
v-model="_row.row[col.title]" |
|
|
|
:column="col" |
|
|
|
:column="col" |
|
|
|
:edit-enabled="true" |
|
|
|
:edit-enabled="true" |
|
|
|
:active="true" |
|
|
|
:active="true" |
|
|
|