@ -4,7 +4,7 @@ import { toRef } from '@vue/reactivity'
import { message } from 'ant-design-vue'
import { message } from 'ant-design-vue'
import { storeToRefs } from 'pinia'
import { storeToRefs } from 'pinia'
import { ProjectRoleInj , TreeViewInj , useMagicKeys , useNuxtApp , useRoles , useTabs } from '#imports'
import { ProjectRoleInj , TreeViewInj , useCopy , use MagicKeys , useNuxtApp , useRoles , useTabs } from '#imports'
import type { SidebarTableNode } from '~/lib'
import type { SidebarTableNode } from '~/lib'
const props = withDefaults (
const props = withDefaults (
@ -41,6 +41,8 @@ useTableNew({
const { meta : metaKey , control } = useMagicKeys ( )
const { meta : metaKey , control } = useMagicKeys ( )
const { copy } = useCopy ( )
const baseRole = inject ( ProjectRoleInj )
const baseRole = inject ( ProjectRoleInj )
provide ( SidebarTableInj , table )
provide ( SidebarTableInj , table )
@ -90,6 +92,9 @@ const canUserEditEmote = computed(() => {
const isExpanded = ref ( false )
const isExpanded = ref ( false )
const isLoading = ref ( false )
const isLoading = ref ( false )
/ / T r a c k s i f t h e t a b l e I D h a s b e e n s u c c e s s f u l l y c o p i e d t o t h e c l i p b o a r d
const isTableIdCopied = ref ( false )
const onExpand = async ( ) => {
const onExpand = async ( ) => {
if ( isExpanded . value ) {
if ( isExpanded . value ) {
isExpanded . value = false
isExpanded . value = false
@ -127,6 +132,25 @@ const onOpenTable = async () => {
isExpanded . value = true
isExpanded . value = true
}
}
}
}
let tableIdCopiedTimeout : NodeJS . Timeout
const onTableIdCopy = async ( ) => {
if ( tableIdCopiedTimeout ) {
clearTimeout ( tableIdCopiedTimeout )
}
try {
await copy ( table . value ! . id ! )
isTableIdCopied . value = true
tableIdCopiedTimeout = setTimeout ( ( ) => {
isTableIdCopied . value = false
clearTimeout ( tableIdCopiedTimeout )
} , 5000 )
} catch ( e : any ) {
message . error ( e . message )
}
}
watch (
watch (
( ) => activeView . value ? . id ,
( ) => activeView . value ? . id ,
@ -276,12 +300,7 @@ watch(openedTableId, () => {
< / NcTooltip >
< / NcTooltip >
< div class = "flex flex-grow h-full" > < / div >
< div class = "flex flex-grow h-full" > < / div >
< div class = "flex flex-row items-center" >
< div class = "flex flex-row items-center" >
< div
< div v-e ="['c:table:option']" >
v - if = "
! isSharedBase && ( isUIAllowed ( 'tableRename' , { roles : baseRole } ) || isUIAllowed ( 'tableDelete' , { roles : baseRole } ) )
"
v - e = "['c:table:option']"
>
< NcDropdown :trigger ="['click']" class = "nc-sidebar-node-btn" @ click.stop >
< NcDropdown :trigger ="['click']" class = "nc-sidebar-node-btn" @ click.stop >
< MdiDotsHorizontal
< MdiDotsHorizontal
data - testid = "nc-sidebar-table-context-menu"
data - testid = "nc-sidebar-table-context-menu"
@ -289,44 +308,73 @@ watch(openedTableId, () => {
/ >
/ >
< template # overlay >
< template # overlay >
< NcMenu >
< NcMenu class = "!min-w-70" :data-testid ="`sidebar-table-context-menu-list-${table.title}`" >
< NcMenuItem
< NcTooltip >
v - if = "isUIAllowed('tableRename', { roles: baseRole })"
< template # title > { { $t ( 'labels.clickToCopyTableID' ) } } < / template >
: data - testid = "`sidebar-table-rename-${table.title}`"
< div
@ click = "openRenameTableDialog(table, base.sources[sourceIndex].id)"
class = "flex items-center justify-between p-2 mx-1.5 rounded-md cursor-pointer hover:bg-gray-100 group"
>
@ click . stop = "onTableIdCopy"
< div v-e ="['c:table:rename']" class="flex gap-2 items-center" >
>
< GeneralIcon icon = "rename" class = "text-gray-700" / >
< div class = "flex text-xs font-bold text-gray-500 ml-1" >
{ { $t ( 'general.rename' ) } }
{ {
$t ( 'labels.tableIdColon' , {
tableId : table ? . id ,
} )
} }
< / div >
< NcButton class = "!group-hover:bg-gray-100" size = "xsmall" type = "secondary" >
< GeneralIcon v -if = " isTableIdCopied " class = "max-h-4 min-w-4" icon = "check" / >
< GeneralIcon v -else class = "max-h-4 min-w-4" else icon = "copy" / >
< / NcButton >
< / div >
< / div >
< / NcMenuItem >
< / NcTooltip >
< NcMenuItem
< template
v - if = "
v - if = "
isUIAllowed ( 'tableDuplicate' ) &&
! isSharedBase &&
base . sources ? . [ sourceIndex ] &&
( isUIAllowed ( 'tableRename' , { roles : baseRole } ) || isUIAllowed ( 'tableDelete' , { roles : baseRole } ) )
( base . sources [ sourceIndex ] . is _meta || base . sources [ sourceIndex ] . is _local )
"
"
: data - testid = "`sidebar-table-duplicate-${table.title}`"
@ click = "duplicateTable(table)"
>
>
< div v-e ="['c:table:duplicate']" class="flex gap-2 items-center" >
< NcDivider / >
< GeneralIcon icon = "duplicate" class = "text-gray-700" / >
< NcMenuItem
{ { $t ( 'general.duplicate' ) } }
v - if = "isUIAllowed('tableRename', { roles: baseRole })"
< / div >
: data - testid = "`sidebar-table-rename-${table.title}`"
< / NcMenuItem >
@ click = "openRenameTableDialog(table, base.sources[sourceIndex].id)"
>
< NcMenuItem
< div v-e ="['c:table:rename']" class="flex gap-2 items-center" >
v - if = "isUIAllowed('tableDelete', { roles: baseRole })"
< GeneralIcon icon = "rename" class = "text-gray-700" / >
: data - testid = "`sidebar-table-delete-${table.title}`"
{ { $t ( 'general.rename' ) } } { { $t ( 'objects.table' ) } }
class = "!text-red-500 !hover:bg-red-50"
< / div >
@ click = "isTableDeleteDialogVisible = true"
< / NcMenuItem >
>
< div v-e ="['c:table:delete']" class="flex gap-2 items-center" >
< NcMenuItem
< GeneralIcon icon = "delete" / >
v - if = "
{ { $t ( 'general.delete' ) } }
isUIAllowed ( 'tableDuplicate' ) &&
< / div >
base . sources ? . [ sourceIndex ] &&
< / NcMenuItem >
( base . sources [ sourceIndex ] . is _meta || base . sources [ sourceIndex ] . is _local )
"
: data - testid = "`sidebar-table-duplicate-${table.title}`"
@ click = "duplicateTable(table)"
>
< div v-e ="['c:table:duplicate']" class="flex gap-2 items-center" >
< GeneralIcon icon = "duplicate" class = "text-gray-700" / >
{ { $t ( 'general.duplicate' ) } } { { $t ( 'objects.table' ) } }
< / div >
< / NcMenuItem >
< NcDivider / >
< NcMenuItem
v - if = "isUIAllowed('tableDelete', { roles: baseRole })"
: data - testid = "`sidebar-table-delete-${table.title}`"
class = "!text-red-500 !hover:bg-red-50"
@ click = "isTableDeleteDialogVisible = true"
>
< div v-e ="['c:table:delete']" class="flex gap-2 items-center" >
< GeneralIcon icon = "delete" / >
{ { $t ( 'general.delete' ) } } { { $t ( 'objects.table' ) } }
< / div >
< / NcMenuItem >
< / template >
< / NcMenu >
< / NcMenu >
< / template >
< / template >
< / NcDropdown >
< / NcDropdown >