|
|
|
@ -101,6 +101,8 @@ const expandedFormScrollWrapper = ref()
|
|
|
|
|
|
|
|
|
|
const reloadTrigger = inject(ReloadRowDataHookInj, createEventHook()) |
|
|
|
|
|
|
|
|
|
const reloadViewDataTrigger = inject(ReloadViewDataHookInj) |
|
|
|
|
|
|
|
|
|
const { addOrEditStackRow } = useKanbanViewStoreOrThrow() |
|
|
|
|
|
|
|
|
|
const { isExpandedFormCommentMode } = storeToRefs(useConfigStore()) |
|
|
|
@ -211,12 +213,14 @@ const save = async () => {
|
|
|
|
|
kanbanClbk, |
|
|
|
|
}) |
|
|
|
|
reloadTrigger?.trigger() |
|
|
|
|
reloadViewDataTrigger?.trigger() |
|
|
|
|
} else { |
|
|
|
|
await _save(undefined, undefined, { |
|
|
|
|
kanbanClbk, |
|
|
|
|
}) |
|
|
|
|
_loadRow() |
|
|
|
|
reloadTrigger?.trigger() |
|
|
|
|
reloadViewDataTrigger?.trigger() |
|
|
|
|
} |
|
|
|
|
isUnsavedFormExist.value = false |
|
|
|
|
|
|
|
|
@ -507,14 +511,14 @@ export default {
|
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
|
<NcModal |
|
|
|
|
:visible="isExpanded" |
|
|
|
|
:footer="null" |
|
|
|
|
:width="commentsDrawer && isUIAllowed('commentList') ? 'min(80vw,1280px)' : 'min(80vw,1280px)'" |
|
|
|
|
:body-style="{ padding: 0 }" |
|
|
|
|
:class="{ active: isExpanded }" |
|
|
|
|
:closable="false" |
|
|
|
|
size="small" |
|
|
|
|
:footer="null" |
|
|
|
|
:visible="isExpanded" |
|
|
|
|
:width="commentsDrawer && isUIAllowed('commentList') ? 'min(80vw,1280px)' : 'min(80vw,1280px)'" |
|
|
|
|
class="nc-drawer-expanded-form" |
|
|
|
|
:class="{ active: isExpanded }" |
|
|
|
|
size="small" |
|
|
|
|
@update:visible="onIsExpandedUpdate" |
|
|
|
|
> |
|
|
|
|
<div class="h-[85vh] xs:(max-h-full) max-h-215 flex flex-col p-6"> |
|
|
|
@ -525,8 +529,8 @@ export default {
|
|
|
|
|
<NcButton |
|
|
|
|
v-if="props.showNextPrevIcons" |
|
|
|
|
:disabled="isFirstRow" |
|
|
|
|
type="secondary" |
|
|
|
|
class="nc-prev-arrow !w-10" |
|
|
|
|
type="secondary" |
|
|
|
|
@click="$emit('prev')" |
|
|
|
|
> |
|
|
|
|
<MdiChevronUp class="text-md" /> |
|
|
|
@ -534,15 +538,15 @@ export default {
|
|
|
|
|
<NcButton |
|
|
|
|
v-if="props.showNextPrevIcons" |
|
|
|
|
:disabled="islastRow" |
|
|
|
|
type="secondary" |
|
|
|
|
class="nc-next-arrow !w-10" |
|
|
|
|
type="secondary" |
|
|
|
|
@click="onNext" |
|
|
|
|
> |
|
|
|
|
<MdiChevronDown class="text-md" /> |
|
|
|
|
</NcButton> |
|
|
|
|
</div> |
|
|
|
|
<div v-if="isLoading"> |
|
|
|
|
<a-skeleton-input class="!h-8 !sm:mr-14 !w-52 mt-1 !rounded-md !overflow-hidden" active size="small" /> |
|
|
|
|
<a-skeleton-input active class="!h-8 !sm:mr-14 !w-52 mt-1 !rounded-md !overflow-hidden" size="small" /> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
v-if="row.rowMeta?.new || props.newRecordHeader" |
|
|
|
@ -559,9 +563,9 @@ export default {
|
|
|
|
|
<div class="flex gap-2"> |
|
|
|
|
<NcButton |
|
|
|
|
v-if="!isNew && rowId" |
|
|
|
|
type="secondary" |
|
|
|
|
class="!<lg:hidden text-gray-700" |
|
|
|
|
:disabled="isLoading" |
|
|
|
|
class="!<lg:hidden text-gray-700" |
|
|
|
|
type="secondary" |
|
|
|
|
@click="copyRecordUrl()" |
|
|
|
|
> |
|
|
|
|
<div v-e="['c:row-expand:copy-url']" data-testid="nc-expanded-form-copy-url" class="flex gap-2 items-center"> |
|
|
|
@ -597,8 +601,8 @@ export default {
|
|
|
|
|
<NcMenuItem v-if="isUIAllowed('dataEdit')" class="text-gray-700" @click="!isNew ? onDuplicateRow() : () => {}"> |
|
|
|
|
<div |
|
|
|
|
v-e="['c:row-expand:duplicate']" |
|
|
|
|
data-testid="nc-expanded-form-duplicate" |
|
|
|
|
class="flex gap-2 items-center" |
|
|
|
|
data-testid="nc-expanded-form-duplicate" |
|
|
|
|
> |
|
|
|
|
<component :is="iconMap.copy" class="cursor-pointer nc-duplicate-row" /> |
|
|
|
|
<span class="-ml-0.25"> |
|
|
|
@ -612,7 +616,7 @@ export default {
|
|
|
|
|
class="!text-red-500 !hover:bg-red-50" |
|
|
|
|
@click="!isNew && onDeleteRowClick()" |
|
|
|
|
> |
|
|
|
|
<div v-e="['c:row-expand:delete']" data-testid="nc-expanded-form-delete" class="flex gap-2 items-center"> |
|
|
|
|
<div v-e="['c:row-expand:delete']" class="flex gap-2 items-center" data-testid="nc-expanded-form-delete"> |
|
|
|
|
<component :is="iconMap.delete" class="cursor-pointer nc-delete-row" /> |
|
|
|
|
<span class="-ml-0.25"> |
|
|
|
|
{{ $t('activity.deleteRecord') }} |
|
|
|
@ -623,12 +627,12 @@ export default {
|
|
|
|
|
</template> |
|
|
|
|
</NcDropdown> |
|
|
|
|
<NcButton |
|
|
|
|
type="secondary" |
|
|
|
|
class="nc-expand-form-close-btn w-10" |
|
|
|
|
data-testid="nc-expanded-form-close" |
|
|
|
|
type="secondary" |
|
|
|
|
@click="onClose" |
|
|
|
|
> |
|
|
|
|
<GeneralIcon icon="close" class="text-md text-gray-700" /> |
|
|
|
|
<GeneralIcon class="text-md text-gray-700" icon="close" /> |
|
|
|
|
</NcButton> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
@ -637,11 +641,11 @@ export default {
|
|
|
|
|
<NcButton |
|
|
|
|
v-if="props.showNextPrevIcons && !isFirstRow" |
|
|
|
|
v-e="['c:row-expand:prev']" |
|
|
|
|
type="secondary" |
|
|
|
|
class="nc-prev-arrow !w-10" |
|
|
|
|
type="secondary" |
|
|
|
|
@click="$emit('prev')" |
|
|
|
|
> |
|
|
|
|
<GeneralIcon icon="arrowLeft" class="text-lg text-gray-700" /> |
|
|
|
|
<GeneralIcon class="text-lg text-gray-700" icon="arrowLeft" /> |
|
|
|
|
</NcButton> |
|
|
|
|
<div v-else class="min-w-10.5"></div> |
|
|
|
|
<div class="flex flex-grow justify-center items-center font-semibold text-lg"> |
|
|
|
@ -652,9 +656,10 @@ export default {
|
|
|
|
|
v-e="['c:row-expand:next']" |
|
|
|
|
type="secondary" |
|
|
|
|
class="nc-next-arrow !w-10" |
|
|
|
|
type="secondary" |
|
|
|
|
@click="onNext" |
|
|
|
|
> |
|
|
|
|
<GeneralIcon icon="arrowRight" class="text-lg text-gray-700" /> |
|
|
|
|
<GeneralIcon class="text-lg text-gray-700" icon="arrowRight" /> |
|
|
|
|
</NcButton> |
|
|
|
|
<div v-else class="min-w-10.5"></div> |
|
|
|
|
</div> |
|
|
|
@ -662,11 +667,11 @@ export default {
|
|
|
|
|
</div> |
|
|
|
|
<div ref="wrapper" class="flex flex-grow flex-row h-[calc(100%-4rem)] w-full gap-4"> |
|
|
|
|
<div |
|
|
|
|
class="flex xs:w-full flex-col border-1 rounded-xl overflow-hidden border-gray-200 xs:(border-0 rounded-none)" |
|
|
|
|
:class="{ |
|
|
|
|
'w-full': !showRightSections, |
|
|
|
|
'w-2/3': showRightSections, |
|
|
|
|
}" |
|
|
|
|
class="flex xs:w-full flex-col border-1 rounded-xl overflow-hidden border-gray-200 xs:(border-0 rounded-none)" |
|
|
|
|
> |
|
|
|
|
<div |
|
|
|
|
ref="expandedFormScrollWrapper" |
|
|
|
@ -676,20 +681,20 @@ export default {
|
|
|
|
|
v-for="(col, i) of fields" |
|
|
|
|
v-show="isFormula(col) || !isVirtualCol(col) || !isNew || isLinksOrLTAR(col)" |
|
|
|
|
:key="col.title" |
|
|
|
|
class="nc-expanded-form-row mt-2 py-2 <lg:w-full" |
|
|
|
|
:class="`nc-expand-col-${col.title}`" |
|
|
|
|
:col-id="col.id" |
|
|
|
|
:data-testid="`nc-expand-col-${col.title}`" |
|
|
|
|
class="nc-expanded-form-row mt-2 py-2 <lg:w-full" |
|
|
|
|
> |
|
|
|
|
<div class="flex items-start flex-row sm:(gap-x-6) <lg:(flex-col w-full) nc-expanded-cell min-h-10"> |
|
|
|
|
<div class="w-48 <lg:(w-full) mt-0.25 !h-[35px]"> |
|
|
|
|
<LazySmartsheetHeaderVirtualCell |
|
|
|
|
v-if="isVirtualCol(col)" |
|
|
|
|
class="nc-expanded-cell-header h-full" |
|
|
|
|
:column="col" |
|
|
|
|
class="nc-expanded-cell-header h-full" |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<LazySmartsheetHeaderCell v-else class="nc-expanded-cell-header" :column="col" /> |
|
|
|
|
<LazySmartsheetHeaderCell v-else :column="col" class="nc-expanded-cell-header" /> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<template v-if="isLoading"> |
|
|
|
@ -699,8 +704,8 @@ export default {
|
|
|
|
|
></div> |
|
|
|
|
<a-skeleton-input |
|
|
|
|
v-else |
|
|
|
|
class="!h-8.5 !xs:h-9.5 !xs:bg-white sm:mr-21 !w-60 mt-0.75 !rounded-lg !overflow-hidden" |
|
|
|
|
active |
|
|
|
|
class="!h-8.5 !xs:h-9.5 !xs:bg-white sm:mr-21 !w-60 mt-0.75 !rounded-lg !overflow-hidden" |
|
|
|
|
size="small" |
|
|
|
|
/> |
|
|
|
|
</template> |
|
|
|
@ -708,28 +713,28 @@ export default {
|
|
|
|
|
<SmartsheetDivDataCell |
|
|
|
|
v-if="col.title" |
|
|
|
|
:ref="i ? null : (el: any) => (cellWrapperEl = el)" |
|
|
|
|
class="bg-white w-80 <lg:w-full px-1 sm:min-h-[35px] xs:min-h-13 flex items-center relative" |
|
|
|
|
:class="{ |
|
|
|
|
'!bg-gray-50 !select-text nc-system-field': isReadOnlyVirtualCell(col), |
|
|
|
|
}" |
|
|
|
|
class="bg-white w-80 <lg:w-full px-1 sm:min-h-[35px] xs:min-h-13 flex items-center relative" |
|
|
|
|
> |
|
|
|
|
<LazySmartsheetVirtualCell |
|
|
|
|
v-if="isVirtualCol(col)" |
|
|
|
|
v-model="_row.row[col.title]" |
|
|
|
|
:row="_row" |
|
|
|
|
:column="col" |
|
|
|
|
:class="{ |
|
|
|
|
'px-1': isReadOnlyVirtualCell(col), |
|
|
|
|
}" |
|
|
|
|
:column="col" |
|
|
|
|
:read-only="readOnly" |
|
|
|
|
:row="_row" |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<LazySmartsheetCell |
|
|
|
|
v-else |
|
|
|
|
v-model="_row.row[col.title]" |
|
|
|
|
:active="true" |
|
|
|
|
:column="col" |
|
|
|
|
:edit-enabled="true" |
|
|
|
|
:active="true" |
|
|
|
|
:read-only="readOnly" |
|
|
|
|
@update:model-value="changedColumns.add(col.title)" |
|
|
|
|
/> |
|
|
|
@ -740,14 +745,14 @@ export default {
|
|
|
|
|
<div v-if="hiddenFields.length > 0" class="flex w-full lg:px-12 <lg:(px-1 mt-2) items-center py-3"> |
|
|
|
|
<div class="flex-grow h-px mr-1 bg-gray-100"></div> |
|
|
|
|
<NcButton |
|
|
|
|
type="secondary" |
|
|
|
|
:size="isMobileMode ? 'medium' : 'small'" |
|
|
|
|
class="flex-shrink !text-sm overflow-hidden" |
|
|
|
|
type="secondary" |
|
|
|
|
@click="toggleHiddenFields" |
|
|
|
|
> |
|
|
|
|
{{ showHiddenFields ? `Hide ${hiddenFields.length} hidden` : `Show ${hiddenFields.length} hidden` }} |
|
|
|
|
{{ hiddenFields.length > 1 ? `fields` : `field` }} |
|
|
|
|
<MdiChevronDown class="ml-1" :class="showHiddenFields ? 'transform rotate-180' : ''" /> |
|
|
|
|
<MdiChevronDown :class="showHiddenFields ? 'transform rotate-180' : ''" class="ml-1" /> |
|
|
|
|
</NcButton> |
|
|
|
|
<div class="flex-grow h-px ml-1 bg-gray-100"></div> |
|
|
|
|
</div> |
|
|
|
@ -756,15 +761,15 @@ export default {
|
|
|
|
|
v-for="(col, i) of hiddenFields" |
|
|
|
|
v-show="isFormula(col) || !isVirtualCol(col) || !isNew || isLinksOrLTAR(col)" |
|
|
|
|
:key="col.title" |
|
|
|
|
class="sm:(mt-2) py-2 <lg:w-full" |
|
|
|
|
:class="`nc-expand-col-${col.title}`" |
|
|
|
|
:data-testid="`nc-expand-col-${col.title}`" |
|
|
|
|
class="sm:(mt-2) py-2 <lg:w-full" |
|
|
|
|
> |
|
|
|
|
<div class="sm:gap-x-6 flex sm:flex-row <lg:(flex-col w-full) items-start min-h-10"> |
|
|
|
|
<div class="sm:w-48 <lg:w-full scale-110 !h-[35px]"> |
|
|
|
|
<LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" class="nc-expanded-cell-header" /> |
|
|
|
|
|
|
|
|
|
<LazySmartsheetHeaderCell v-else class="nc-expanded-cell-header" :column="col" /> |
|
|
|
|
<LazySmartsheetHeaderCell v-else :column="col" class="nc-expanded-cell-header" /> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<template v-if="isLoading"> |
|
|
|
@ -774,8 +779,8 @@ export default {
|
|
|
|
|
></div> |
|
|
|
|
<a-skeleton-input |
|
|
|
|
v-else |
|
|
|
|
class="!h-8.5 !xs:h-12 !xs:bg-white sm:mr-21 w-60 mt-0.75 !rounded-lg !overflow-hidden" |
|
|
|
|
active |
|
|
|
|
class="!h-8.5 !xs:h-12 !xs:bg-white sm:mr-21 w-60 mt-0.75 !rounded-lg !overflow-hidden" |
|
|
|
|
size="small" |
|
|
|
|
/> |
|
|
|
|
</template> |
|
|
|
@ -788,17 +793,17 @@ export default {
|
|
|
|
|
<LazySmartsheetVirtualCell |
|
|
|
|
v-if="isVirtualCol(col)" |
|
|
|
|
v-model="_row.row[col.title]" |
|
|
|
|
:row="_row" |
|
|
|
|
:column="col" |
|
|
|
|
:read-only="readOnly" |
|
|
|
|
:row="_row" |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<LazySmartsheetCell |
|
|
|
|
v-else |
|
|
|
|
v-model="_row.row[col.title]" |
|
|
|
|
:active="true" |
|
|
|
|
:column="col" |
|
|
|
|
:edit-enabled="true" |
|
|
|
|
:active="true" |
|
|
|
|
:read-only="readOnly" |
|
|
|
|
@update:model-value="changedColumns.add(col.title)" |
|
|
|
|
/> |
|
|
|
@ -814,8 +819,8 @@ export default {
|
|
|
|
|
class="w-full h-16 border-t-1 border-gray-200 bg-white flex items-center justify-end p-3 xs:(p-0 mt-4 border-t-0 gap-x-4 justify-between)" |
|
|
|
|
> |
|
|
|
|
<NcDropdown v-if="!isNew && isMobileMode" placement="bottomRight"> |
|
|
|
|
<NcButton type="secondary" class="nc-expand-form-more-actions w-10" :disabled="isLoading"> |
|
|
|
|
<GeneralIcon icon="threeDotVertical" class="text-md" :class="isLoading ? 'text-gray-300' : 'text-gray-700'" /> |
|
|
|
|
<NcButton :disabled="isLoading" class="nc-expand-form-more-actions w-10" type="secondary"> |
|
|
|
|
<GeneralIcon :class="isLoading ? 'text-gray-300' : 'text-gray-700'" class="text-md" icon="threeDotVertical" /> |
|
|
|
|
</NcButton> |
|
|
|
|
<template #overlay> |
|
|
|
|
<NcMenu> |
|
|
|
@ -826,7 +831,7 @@ export default {
|
|
|
|
|
</div> |
|
|
|
|
</NcMenuItem> |
|
|
|
|
<NcMenuItem v-if="rowId" class="text-gray-700" @click="!isNew ? copyRecordUrl() : () => {}"> |
|
|
|
|
<div v-e="['c:row-expand:copy-url']" data-testid="nc-expanded-form-copy-url" class="flex gap-2 items-center"> |
|
|
|
|
<div v-e="['c:row-expand:copy-url']" class="flex gap-2 items-center" data-testid="nc-expanded-form-copy-url"> |
|
|
|
|
<component :is="iconMap.link" class="cursor-pointer nc-duplicate-row" /> |
|
|
|
|
{{ $t('labels.copyRecordURL') }} |
|
|
|
|
</div> |
|
|
|
@ -850,21 +855,21 @@ export default {
|
|
|
|
|
<div class="flex flex-row gap-x-3"> |
|
|
|
|
<NcButton |
|
|
|
|
v-if="isMobileMode" |
|
|
|
|
type="secondary" |
|
|
|
|
size="medium" |
|
|
|
|
data-testid="nc-expanded-form-save" |
|
|
|
|
class="nc-expand-form-save-btn !xs:(text-base)" |
|
|
|
|
data-testid="nc-expanded-form-save" |
|
|
|
|
size="medium" |
|
|
|
|
type="secondary" |
|
|
|
|
@click="onClose" |
|
|
|
|
> |
|
|
|
|
<div class="px-1">Close</div> |
|
|
|
|
</NcButton> |
|
|
|
|
<NcButton |
|
|
|
|
v-e="['c:row-expand:save']" |
|
|
|
|
:disabled="changedColumns.size === 0 && !isUnsavedFormExist" |
|
|
|
|
class="nc-expand-form-save-btn !xs:(text-base)" |
|
|
|
|
data-testid="nc-expanded-form-save" |
|
|
|
|
type="primary" |
|
|
|
|
size="medium" |
|
|
|
|
class="nc-expand-form-save-btn !xs:(text-base)" |
|
|
|
|
:disabled="changedColumns.size === 0 && !isUnsavedFormExist" |
|
|
|
|
@click="save" |
|
|
|
|
> |
|
|
|
|
<div class="xs:px-1">Save</div> |
|
|
|
@ -874,8 +879,8 @@ export default {
|
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
v-if="showRightSections" |
|
|
|
|
class="nc-comments-drawer border-1 relative border-gray-200 w-1/3 max-w-125 bg-gray-50 rounded-xl min-w-50 overflow-hidden h-full xs:hidden" |
|
|
|
|
:class="{ active: commentsDrawer && isUIAllowed('commentList') }" |
|
|
|
|
class="nc-comments-drawer border-1 relative border-gray-200 w-1/3 max-w-125 bg-gray-50 rounded-xl min-w-0 overflow-hidden h-full xs:hidden" |
|
|
|
|
> |
|
|
|
|
<SmartsheetExpandedFormComments :loading="isLoading" /> |
|
|
|
|
</div> |
|
|
|
|