mirror of https://github.com/nocodb/nocodb
Anbarasu
1 year ago
committed by
GitHub
17 changed files with 389 additions and 505 deletions
|
After Width: | Height: | Size: 712 B |
@ -1,202 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import { message } from 'ant-design-vue' |
||||
import type { ViewType } from 'nocodb-sdk' |
||||
import { |
||||
IsPublicInj, |
||||
ReloadRowDataHookInj, |
||||
iconMap, |
||||
isMac, |
||||
useCopy, |
||||
useExpandedFormStoreOrThrow, |
||||
useRoles, |
||||
useSmartsheetRowStoreOrThrow, |
||||
useSmartsheetStoreOrThrow, |
||||
} from '#imports' |
||||
|
||||
const props = defineProps<{ view?: ViewType }>() |
||||
|
||||
const emit = defineEmits(['cancel', 'duplicateRow']) |
||||
|
||||
const route = useRoute() |
||||
|
||||
const { meta, isSqlView } = useSmartsheetStoreOrThrow() |
||||
|
||||
const isPublic = inject(IsPublicInj, ref(false)) |
||||
|
||||
const { commentsDrawer, displayValue, primaryKey, save: _save, loadRow, deleteRowById } = useExpandedFormStoreOrThrow() |
||||
|
||||
const { isNew, syncLTARRefs, state } = useSmartsheetRowStoreOrThrow() |
||||
|
||||
const { isUIAllowed } = useRoles() |
||||
|
||||
const reloadTrigger = inject(ReloadRowDataHookInj, createEventHook()) |
||||
|
||||
const save = async () => { |
||||
if (isNew.value) { |
||||
const data = await _save(state.value) |
||||
await syncLTARRefs(data) |
||||
reloadTrigger?.trigger() |
||||
} else { |
||||
await _save() |
||||
reloadTrigger?.trigger() |
||||
} |
||||
} |
||||
|
||||
// todo: accept as a prop / inject |
||||
const iconColor = '#1890ff' |
||||
|
||||
const { dashboardUrl } = useDashboard() |
||||
|
||||
const { copy } = useCopy() |
||||
|
||||
const copyRecordUrl = () => { |
||||
copy( |
||||
encodeURI( |
||||
`${dashboardUrl?.value}#/${route.params.typeOrId}/${route.params.projectId}/${meta.value?.id}${ |
||||
props.view ? `/${props.view.title}` : '' |
||||
}?rowId=${primaryKey.value}`, |
||||
), |
||||
) |
||||
message.success('Copied to clipboard') |
||||
} |
||||
|
||||
useEventListener(document, 'keydown', async (e: KeyboardEvent) => { |
||||
const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey |
||||
if (cmdOrCtrl) { |
||||
switch (e.key) { |
||||
case 'Enter': { |
||||
if (isUIAllowed('dataEdit')) { |
||||
await save() |
||||
} |
||||
} |
||||
} |
||||
} |
||||
}) |
||||
|
||||
const showDeleteRowModal = ref(false) |
||||
|
||||
const onDeleteRowClick = () => { |
||||
showDeleteRowModal.value = true |
||||
} |
||||
|
||||
const onConfirmDeleteRowClick = async () => { |
||||
showDeleteRowModal.value = false |
||||
await deleteRowById(primaryKey.value) |
||||
await reloadTrigger.trigger() |
||||
emit('cancel') |
||||
message.success('Row deleted') |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="flex p-2 items-center gap-2 p-4 nc-expanded-form-header"> |
||||
<h5 class="text-lg font-weight-medium flex items-center gap-1 mb-0 min-w-0 overflow-x-hidden truncate"> |
||||
<GeneralTableIcon :style="{ color: iconColor }" :meta="meta" class="mx-2" /> |
||||
|
||||
<template v-if="meta"> |
||||
{{ meta.title }} |
||||
</template> |
||||
|
||||
<template v-if="displayValue">: {{ displayValue }}</template> |
||||
</h5> |
||||
|
||||
<div class="flex-1" /> |
||||
<a-tooltip v-if="!isPublic" placement="bottom"> |
||||
<template #title> |
||||
<!-- todo: i18n --> |
||||
<div class="text-center w-full">Copy record URL</div> |
||||
</template> |
||||
<component |
||||
:is="iconMap.link" |
||||
v-if="!isNew" |
||||
class="nc-icon-transition cursor-pointer select-none text-gray-500 mx-1 nc-copy-row-url min-w-4" |
||||
@click="copyRecordUrl" |
||||
/> |
||||
</a-tooltip> |
||||
|
||||
<a-tooltip v-if="!isSqlView" placement="bottom"> |
||||
<!-- Toggle comments draw --> |
||||
<template #title> |
||||
<div class="text-center w-full">{{ $t('activity.toggleCommentsDraw') }}</div> |
||||
</template> |
||||
<component |
||||
:is="iconMap.comment" |
||||
v-if="isUIAllowed('commentList') && !isNew" |
||||
v-e="['c:row-expand:comment-toggle']" |
||||
class="nc-icon-transition cursor-pointer select-none nc-toggle-comments text-gray-500 mx-1 min-w-4" |
||||
@click="commentsDrawer = !commentsDrawer" |
||||
/> |
||||
</a-tooltip> |
||||
|
||||
<NcButton |
||||
class="nc-expand-form-save-btn !w-[60px]" |
||||
type="primary" |
||||
size="small" |
||||
:disabled="!isUIAllowed('dataEdit')" |
||||
@click="save" |
||||
> |
||||
{{ $t('general.save') }} |
||||
</NcButton> |
||||
|
||||
<a-dropdown> |
||||
<component :is="iconMap.threeDotVertical" class="nc-icon-transition nc-expand-form-more-actions hover:cursor-pointer" /> |
||||
<template #overlay> |
||||
<a-menu> |
||||
<a-menu-item v-if="!isNew" @click="loadRow()"> |
||||
<div v-e="['c:row-expand:reload']" class="py-2 flex gap-2 items-center"> |
||||
<component |
||||
:is="iconMap.reload" |
||||
class="nc-icon-transition cursor-pointer select-none text-gray-500 mx-1 min-w-4 text-primary" |
||||
/> |
||||
{{ $t('general.reload') }} |
||||
</div> |
||||
</a-menu-item> |
||||
<a-menu-item v-if="isUIAllowed('dataEdit') && !isNew" @click="!isNew && emit('duplicateRow')"> |
||||
<div v-e="['c:row-expand:duplicate']" class="py-2 flex gap-2 a"> |
||||
<component |
||||
:is="iconMap.copy" |
||||
class="nc-icon-transition cursor-pointer select-none nc-duplicate-row text-gray-500 mx-1 min-w-4 text-primary" |
||||
/> |
||||
{{ $t('activity.duplicateRow') }} |
||||
</div> |
||||
</a-menu-item> |
||||
<a-menu-item v-if="isUIAllowed('dataEdit') && !isNew" @click="!isNew && onDeleteRowClick()"> |
||||
<div v-e="['c:row-expand:delete']" class="py-2 flex gap-2 items-center"> |
||||
<component |
||||
:is="iconMap.delete" |
||||
class="nc-icon-transition cursor-pointer select-none nc-delete-row text-gray-500 mx-1 min-w-4 text-primary" |
||||
/> |
||||
{{ $t('activity.deleteRow') }} |
||||
</div> |
||||
</a-menu-item> |
||||
<a-menu-item @click="emit('cancel')"> |
||||
<div v-e="['c:row-expand:delete']" class="py-2 flex gap-2 items-center"> |
||||
<component |
||||
:is="iconMap.close" |
||||
class="nc-icon-transition cursor-pointer select-none nc-delete-row text-gray-500 mx-1 min-w-4 text-primary" |
||||
/> |
||||
{{ $t('general.close') }} |
||||
</div> |
||||
</a-menu-item> |
||||
</a-menu> |
||||
</template> |
||||
</a-dropdown> |
||||
<GeneralModal v-model:visible="showDeleteRowModal" class="!w-[25rem]"> |
||||
<div class="p-4"> |
||||
<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"> |
||||
<NcButton type="secondary" @click="showDeleteRowModal = false">{{ $t('general.cancel') }}</NcButton> |
||||
<NcButton @click="onConfirmDeleteRowClick">{{ $t('general.confirm') }} </NcButton> |
||||
</div> |
||||
</GeneralModal> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped> |
||||
:deep(svg) { |
||||
@apply outline-none; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue