mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
3.2 KiB
113 lines
3.2 KiB
<script lang="ts" setup> |
|
import { message } from 'ant-design-vue' |
|
import type { ViewType } from 'nocodb-sdk' |
|
import { |
|
ReloadRowDataHookInj, |
|
useExpandedFormStoreOrThrow, |
|
useSmartsheetRowStoreOrThrow, |
|
useSmartsheetStoreOrThrow, |
|
useUIPermission, |
|
} from '#imports' |
|
|
|
const props = defineProps<{ view?: ViewType }>() |
|
|
|
const emit = defineEmits(['cancel']) |
|
|
|
const route = useRoute() |
|
|
|
const { meta, isSqlView } = useSmartsheetStoreOrThrow() |
|
|
|
const { commentsDrawer, primaryValue, primaryKey, save: _save, loadRow } = useExpandedFormStoreOrThrow() |
|
|
|
const { isNew, syncLTARRefs } = useSmartsheetRowStoreOrThrow() |
|
|
|
const { isUIAllowed } = useUIPermission() |
|
|
|
const reloadTrigger = inject(ReloadRowDataHookInj, createEventHook()) |
|
|
|
const save = async () => { |
|
if (isNew.value) { |
|
const data = await _save() |
|
await syncLTARRefs(data) |
|
reloadTrigger?.trigger() |
|
} else { |
|
await _save() |
|
reloadTrigger?.trigger() |
|
} |
|
} |
|
|
|
// todo: accept as a prop / inject |
|
const iconColor = '#1890ff' |
|
|
|
const { dashboardUrl } = useDashboard() |
|
|
|
const { copy } = useClipboard() |
|
|
|
const copyRecordUrl = () => { |
|
copy( |
|
`${dashboardUrl?.value}#/${route.params.projectType}/${route.params.projectId}/${route.params.type}/${meta.value?.title}${ |
|
props.view ? `/${props.view.title}` : '' |
|
}?rowId=${primaryKey.value}`, |
|
) |
|
message.success('Copied to clipboard') |
|
} |
|
</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"> |
|
<mdi-table-arrow-right :style="{ color: iconColor }" /> |
|
|
|
<template v-if="meta"> |
|
{{ meta.title }} |
|
</template> |
|
|
|
<template v-if="primaryValue">: {{ primaryValue }}</template> |
|
</h5> |
|
|
|
<div class="flex-1" /> |
|
|
|
<a-tooltip placement="bottom"> |
|
<template #title> |
|
<div class="text-center w-full">{{ $t('general.reload') }}</div> |
|
</template> |
|
<mdi-reload v-if="!isNew" class="cursor-pointer select-none text-gray-500 mx-1 min-w-4" @click="loadRow" /> |
|
</a-tooltip> |
|
<a-tooltip placement="bottom"> |
|
<template #title> |
|
<!-- todo: i18n --> |
|
<div class="text-center w-full">Copy record URL</div> |
|
</template> |
|
<mdi-link |
|
v-if="!isNew" |
|
class="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> |
|
<MdiCommentTextOutline |
|
v-if="isUIAllowed('rowComments') && !isNew" |
|
v-e="['c:row-expand:comment-toggle']" |
|
class="cursor-pointer select-none nc-toggle-comments text-gray-500 mx-1 min-w-4" |
|
@click="commentsDrawer = !commentsDrawer" |
|
/> |
|
</a-tooltip> |
|
|
|
<a-button class="!text mx-1 nc-expand-form-close-btn" @click="emit('cancel')"> |
|
<!-- Cancel --> |
|
{{ $t('general.cancel') }} |
|
</a-button> |
|
|
|
<a-button :disabled="!isUIAllowed('tableRowUpdate')" type="primary" class="mx-1" @click="save"> |
|
<!-- Save Row --> |
|
{{ $t('activity.saveRow') }} |
|
</a-button> |
|
</div> |
|
</template> |
|
|
|
<style scoped></style>
|
|
|