|
|
|
|
@ -50,6 +50,10 @@ const emits = defineEmits(['update:modelValue', 'cancel', 'next', 'prev'])
|
|
|
|
|
|
|
|
|
|
const key = ref(0) |
|
|
|
|
|
|
|
|
|
const wrapper = ref() |
|
|
|
|
|
|
|
|
|
const { isMobileMode } = useGlobal() |
|
|
|
|
|
|
|
|
|
const { t } = useI18n() |
|
|
|
|
|
|
|
|
|
const row = ref(props.row) |
|
|
|
|
@ -329,6 +333,23 @@ const onConfirmDeleteRowClick = async () => {
|
|
|
|
|
onClose() |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
watch( |
|
|
|
|
state, |
|
|
|
|
() => { |
|
|
|
|
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, |
|
|
|
|
}, |
|
|
|
|
) |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<script lang="ts"> |
|
|
|
|
@ -338,38 +359,41 @@ export default {
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
|
<a-modal |
|
|
|
|
<NcModal |
|
|
|
|
:key="key" |
|
|
|
|
v-model:visible="isExpanded" |
|
|
|
|
:footer="null" |
|
|
|
|
:width="commentsDrawer && isUIAllowed('commentList') ? 'min(90vw,1280px)' : 'min(90vw,1280px)'" |
|
|
|
|
:width="commentsDrawer && isUIAllowed('commentList') ? 'min(80vw,1280px)' : 'min(80vw,1280px)'" |
|
|
|
|
:body-style="{ padding: 0 }" |
|
|
|
|
:closable="false" |
|
|
|
|
class="nc-drawer-expanded-form max-h-[856px]" |
|
|
|
|
size="large" |
|
|
|
|
class="nc-drawer-expanded-form" |
|
|
|
|
:class="{ active: isExpanded }" |
|
|
|
|
> |
|
|
|
|
<div class="flex flex-shrink-0 w-full items-center nc-expanded-form-header relative pb-2 justify-between"> |
|
|
|
|
<div class="h-[75vh] xs:(h-[95vh] max-h-full) max-h-215 flex flex-col p-6"> |
|
|
|
|
<div class="flex h-8 flex-shrink-0 w-full items-center nc-expanded-form-header relative mb-4 justify-between"> |
|
|
|
|
<template v-if="!isMobileMode"> |
|
|
|
|
<div class="flex gap-3"> |
|
|
|
|
<div class="flex gap-1"> |
|
|
|
|
<NcButton v-if="props.showNextPrevIcons" type="secondary" size="small" class="nc-prev-arrow" @click="$emit('prev')"> |
|
|
|
|
<div class="flex gap-2"> |
|
|
|
|
<NcButton v-if="props.showNextPrevIcons" type="secondary" class="nc-prev-arrow !w-10" @click="$emit('prev')"> |
|
|
|
|
<MdiChevronUp class="text-md text-gray-700" /> |
|
|
|
|
</NcButton> |
|
|
|
|
<NcButton v-if="!props.lastRow" type="secondary" size="small" class="nc-next-arrow" @click="onNext"> |
|
|
|
|
<NcButton v-if="!props.lastRow" type="secondary" class="nc-next-arrow !w-10" @click="onNext"> |
|
|
|
|
<MdiChevronDown class="text-md text-gray-700" /> |
|
|
|
|
</NcButton> |
|
|
|
|
</div> |
|
|
|
|
<div v-if="displayValue" class="flex items-center truncate max-w-32 font-bold text-gray-800 text-xl"> |
|
|
|
|
{{ displayValue }} |
|
|
|
|
</div> |
|
|
|
|
<div class="bg-gray-100 px-2 gap-1 flex items-center rounded-md text-gray-800"> |
|
|
|
|
<div class="bg-gray-100 px-2 gap-1 flex my-1 items-center rounded-lg text-gray-800 font-medium"> |
|
|
|
|
<TableIcon class="w-6 h-6 text-sm" /> |
|
|
|
|
All {{ meta.title }} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="flex gap-1"> |
|
|
|
|
<div class="flex gap-2"> |
|
|
|
|
<NcDropdown v-if="!isNew"> |
|
|
|
|
<NcButton type="secondary" size="small" class="nc-expand-form-more-actions"> |
|
|
|
|
<MdiMoreVert class="text-md text-gray-700" /> |
|
|
|
|
<NcButton type="secondary" class="nc-expand-form-more-actions w-10"> |
|
|
|
|
<GeneralIcon icon="threeDotVertical" class="text-md text-gray-700" /> |
|
|
|
|
</NcButton> |
|
|
|
|
<template #overlay> |
|
|
|
|
<NcMenu> |
|
|
|
|
@ -389,7 +413,7 @@ export default {
|
|
|
|
|
Duplicate record |
|
|
|
|
</div> |
|
|
|
|
</NcMenuItem> |
|
|
|
|
<a-menu-divider class="my-1" /> |
|
|
|
|
<NcDivider /> |
|
|
|
|
<NcMenuItem |
|
|
|
|
v-if="isUIAllowed('dataEdit') && !isNew" |
|
|
|
|
v-e="['c:row-expand:delete']" |
|
|
|
|
@ -402,35 +426,50 @@ export default {
|
|
|
|
|
</NcMenu> |
|
|
|
|
</template> |
|
|
|
|
</NcDropdown> |
|
|
|
|
<NcButton type="secondary" size="small" class="nc-expand-form-close-btn" @click="onClose"> |
|
|
|
|
<MdiClose class="text-md text-gray-700" /> |
|
|
|
|
<NcButton type="secondary" class="nc-expand-form-close-btn w-10" @click="onClose"> |
|
|
|
|
<GeneralIcon icon="close" class="text-md text-gray-700" /> |
|
|
|
|
</NcButton> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<template v-else> |
|
|
|
|
<div class="flex flex-row w-full"> |
|
|
|
|
<NcButton v-if="props.showNextPrevIcons" type="secondary" class="nc-prev-arrow !w-10" @click="$emit('prev')"> |
|
|
|
|
<GeneralIcon icon="arrowLeft" class="text-lg text-gray-700" /> |
|
|
|
|
</NcButton> |
|
|
|
|
<div class="flex flex-grow justify-center items-center font-semibold text-lg"> |
|
|
|
|
<div>{{ meta.title }}</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="flex flex-row w-full gap-4"> |
|
|
|
|
<div class="flex w-full flex-col h-[85vh] max-h-[770px] border-1 rounded-xl border-gray-200"> |
|
|
|
|
<NcButton v-if="!props.lastRow" type="secondary" class="nc-next-arrow !w-10" @click="onNext"> |
|
|
|
|
<GeneralIcon icon="arrowRight" class="text-lg text-gray-700" /> |
|
|
|
|
</NcButton> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
<div ref="wrapper" class="flex flex-grow flex-row h-[calc(100%-3rem)] w-full gap-4"> |
|
|
|
|
<div class="flex w-full flex-col border-1 rounded-xl overflow-hidden border-gray-200 xs:(border-0 rounded-none)"> |
|
|
|
|
<div |
|
|
|
|
class="flex flex-grow-1 h-full flex-col !pb-12 nc-scrollbar-md overflow-y-scroll items-center w-full rounded-xl bg-white p-4" |
|
|
|
|
class="flex flex-col flex-grow mt-2 h-full max-h-full nc-scrollbar-md !pb-2 items-center w-full bg-white p-4 xs:p-0" |
|
|
|
|
> |
|
|
|
|
<div |
|
|
|
|
v-for="(col, i) of fields" |
|
|
|
|
v-show="isFormula(col) || !isVirtualCol(col) || !isNew || isLinksOrLTAR(col)" |
|
|
|
|
:key="col.title" |
|
|
|
|
class="mt-2 py-2" |
|
|
|
|
class="nc-expanded-form-row mt-2 py-2 xs:w-full" |
|
|
|
|
:class="`nc-expand-col-${col.title}`" |
|
|
|
|
:col-id="col.id" |
|
|
|
|
:data-testid="`nc-expand-col-${col.title}`" |
|
|
|
|
> |
|
|
|
|
<div class="flex items-start flex-row"> |
|
|
|
|
<div class="w-[12rem] mt-2.5 scale-110"> |
|
|
|
|
<LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" /> |
|
|
|
|
<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"> |
|
|
|
|
<LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" class="nc-expanded-cell-header" :column="col" /> |
|
|
|
|
|
|
|
|
|
<LazySmartsheetHeaderCell v-else :column="col" /> |
|
|
|
|
<LazySmartsheetHeaderCell v-else class="nc-expanded-cell-header" :column="col" /> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<LazySmartsheetDivDataCell |
|
|
|
|
v-if="col.title" |
|
|
|
|
: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] !xs:w-full border-1 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" /> |
|
|
|
|
|
|
|
|
|
@ -494,31 +533,97 @@ export default {
|
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
v-if="isUIAllowed('dataEdit')" |
|
|
|
|
class="w-full flex-shrink-1 rounded-xl border-t-1 border-gray-200 bottom-0 z-10 bg-white flex justify-end p-2" |
|
|
|
|
class="w-full h-14 border-t-1 border-gray-200 bg-white flex items-center justify-end p-2 xs:(p-0 mt-4 border-t-0 gap-x-4 justify-between)" |
|
|
|
|
> |
|
|
|
|
<NcButton type="primary" size="medium" class="nc-expand-form-save-btn" @click="save"> Save </NcButton> |
|
|
|
|
<NcDropdown v-if="!isNew && isMobileMode"> |
|
|
|
|
<NcButton type="secondary" class="nc-expand-form-more-actions w-10"> |
|
|
|
|
<GeneralIcon icon="threeDotVertical" class="text-md text-gray-700" /> |
|
|
|
|
</NcButton> |
|
|
|
|
<template #overlay> |
|
|
|
|
<NcMenu> |
|
|
|
|
<NcMenuItem v-if="!isNew" class="text-gray-700" @click="_loadRow()"> |
|
|
|
|
<div v-e="['c:row-expand:reload']" class="flex gap-2 items-center"> |
|
|
|
|
<component :is="iconMap.reload" class="cursor-pointer" /> |
|
|
|
|
{{ $t('general.reload') }} |
|
|
|
|
</div> |
|
|
|
|
</NcMenuItem> |
|
|
|
|
<NcDivider /> |
|
|
|
|
<NcMenuItem |
|
|
|
|
v-if="isUIAllowed('dataEdit') && !isNew" |
|
|
|
|
v-e="['c:row-expand:delete']" |
|
|
|
|
class="!text-red-500" |
|
|
|
|
@click="!isNew && onDeleteRowClick()" |
|
|
|
|
> |
|
|
|
|
<component :is="iconMap.delete" class="cursor-pointer nc-delete-row" /> |
|
|
|
|
Delete record |
|
|
|
|
</NcMenuItem> |
|
|
|
|
</NcMenu> |
|
|
|
|
</template> |
|
|
|
|
</NcDropdown> |
|
|
|
|
|
|
|
|
|
<div class="flex flex-row gap-x-3"> |
|
|
|
|
<NcButton |
|
|
|
|
v-if="isMobileMode" |
|
|
|
|
type="secondary" |
|
|
|
|
size="medium" |
|
|
|
|
class="nc-expand-form-save-btn !xs:(text-base)" |
|
|
|
|
@click="onClose" |
|
|
|
|
> |
|
|
|
|
<div class="px-1">Close</div> |
|
|
|
|
</NcButton> |
|
|
|
|
<NcButton type="primary" size="medium" class="nc-expand-form-save-btn !xs:(text-base)" @click="save"> |
|
|
|
|
<div class="xs:px-1">Save</div> |
|
|
|
|
</NcButton> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
v-if="!isNew && commentsDrawer && isUIAllowed('commentList')" |
|
|
|
|
class="nc-comments-drawer border-1 relative border-gray-200 w-[380px] bg-gray-50 rounded-lg min-w-0" |
|
|
|
|
class="nc-comments-drawer border-1 relative border-gray-200 w-[380px] bg-gray-50 rounded-xl min-w-0 overflow-hidden h-full xs:hidden" |
|
|
|
|
:class="{ active: commentsDrawer && isUIAllowed('commentList') }" |
|
|
|
|
> |
|
|
|
|
<LazySmartsheetExpandedFormComments /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</a-modal> |
|
|
|
|
</div> |
|
|
|
|
</NcModal> |
|
|
|
|
|
|
|
|
|
<GeneralModal v-model:visible="showDeleteRowModal" class="!w-[25rem]"> |
|
|
|
|
<div class="p-4"> |
|
|
|
|
<NcModal v-model:visible="showDeleteRowModal" class="!w-[25rem] !xs-"> |
|
|
|
|
<div class=""> |
|
|
|
|
<div class="prose-xl font-bold self-center">Delete row ?</div> |
|
|
|
|
|
|
|
|
|
<div class="mt-4">Are you sure you want to delete this row?</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="flex flex-row gap-x-2 mt-1 pt-1.5 justify-end p-4"> |
|
|
|
|
<div class="flex flex-row gap-x-2 mt-4 pt-1.5 justify-end pt-4 gap-x-3"> |
|
|
|
|
<NcButton v-if="isMobileMode" type="secondary" @click="showDeleteRowModal = false">{{ $t('general.cancel') }} </NcButton> |
|
|
|
|
<NcButton @click="onConfirmDeleteRowClick">{{ $t('general.confirm') }} </NcButton> |
|
|
|
|
</div> |
|
|
|
|
</GeneralModal> |
|
|
|
|
</NcModal> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<style scoped lang="scss"></style> |
|
|
|
|
<style lang="scss"> |
|
|
|
|
.nc-drawer-expanded-form { |
|
|
|
|
@apply xs:my-0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.nc-expanded-cell { |
|
|
|
|
input { |
|
|
|
|
@apply xs:(h-12 text-base); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.nc-expanded-cell-header { |
|
|
|
|
@apply w-full text-gray-700 xs:mb-2; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.nc-expanded-cell-header > :nth-child(2) { |
|
|
|
|
@apply !text-sm !xs:text-base; |
|
|
|
|
} |
|
|
|
|
.nc-expanded-cell-header > :first-child { |
|
|
|
|
@apply !text-xl; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.nc-drawer-expanded-form .nc-modal { |
|
|
|
|
@apply !p-0; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
Muhammed Mustafa
1 year ago
committed by
GitHub
