多维表格
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.
 
 
 
 
 
 

228 lines
7.1 KiB

<script lang="ts" setup>
import type { HookType } from 'nocodb-sdk'
// const showWebhookDrawer = ref(false)
const { hooks } = storeToRefs(useWebhooksStore())
const { loadHooksList, deleteHook: _deleteHook, copyHook } = useWebhooksStore()
const modalDeleteButtonRef = ref(null)
const { activeTable } = storeToRefs(useTablesStore())
/*
const eventList = ref<Record<string, any>[]>([
{ text: ['After', 'Insert'], value: ['after', 'insert'] },
{ text: ['After', 'Update'], value: ['after', 'update'] },
{ text: ['After', 'Delete'], value: ['after', 'delete'] },
{ text: ['After', 'Bulk Insert'], value: ['after', 'bulkInsert'] },
{ text: ['After', 'Bulk Update'], value: ['after', 'bulkUpdate'] },
{ text: ['After', 'Bulk Delete'], value: ['after', 'bulkDelete'] },
])
*/
const deleteHookId = ref('')
const toBeDeleteHook = computed(() => {
return hooks.value.find((hook) => hook.id === deleteHookId.value)
})
const selectedHookId = ref<string | undefined>(undefined)
const selectedHook = computed(() => {
if (!selectedHookId.value) return undefined
return hooks.value.find((hook) => hook.id === selectedHookId.value)
})
const showDeleteModal = ref(false)
const isDeleting = ref(false)
const isCopying = ref(false)
const showEditModal = ref(false)
const copyWebhook = async (hook: HookType) => {
if (isCopying.value) return
isCopying.value = true
try {
await copyHook(hook)
} finally {
isCopying.value = false
}
}
const openDeleteModal = (hookId: string) => {
deleteHookId.value = hookId
showDeleteModal.value = true
}
const deleteHook = async () => {
isDeleting.value = true
try {
await _deleteHook(deleteHookId.value)
} finally {
isDeleting.value = false
showDeleteModal.value = false
deleteHookId.value = ''
}
}
const openEditor = (hookId?: string | undefined) => {
selectedHookId.value = hookId
showEditModal.value = true
}
watch(showDeleteModal, () => {
if (!showDeleteModal.value) return
nextTick(() => {
modalDeleteButtonRef.value?.$el?.focus()
})
})
watch(showEditModal, () => {
if (!showEditModal.value) {
selectedHookId.value = undefined
}
})
watch(
() => activeTable.value?.id,
() => {
if (!activeTable.value?.id) return
selectedHookId.value = undefined
loadHooksList()
},
{
immediate: true,
},
)
</script>
<template>
<div class="flex flex-col mt-2 pt-1 border-t-1 border-gray-50 px-2 nc-view-sidebar-webhook">
<div
v-e="['c:actions:webhook']"
class="py-2 flex gap-2 items-center justify-between button text-gray-700"
@click="openEditor()"
>
<div class="flex flex-row items-center gap-x-2 nc-view-sidebar-webhook-label">
<component :is="iconMap.hook" class="text-gray-600" />
{{ $t('objects.webhooks') }}
</div>
<div class="flex !rounded-md hover:(bg-gray-50 text-black) p-1 cursor-pointer">
<component :is="iconMap.plus" class="text-primary-600 nc-view-sidebar-webhook-plus-icon" />
</div>
</div>
<div v-if="hooks.length === 0" class="flex flex-col px-1.5 py-2.5 ml-6.5 text-gray-500">Empty</div>
<div v-else class="flex flex-col ml-6">
<div
v-for="hook in hooks"
:key="hook.id"
class="flex flex-row items-center hover:bg-gray-50 rounded-md px-1.5 py-2.5 cursor-pointer group nc-view-sidebar-webhook-item"
>
<div class="flex flex-row items-center gap-x-2 flex-grow" @click="openEditor(hook.id!)">
<div class="circle">
<div
class="dot"
:class="{
'bg-green-500': hook?.active,
'bg-gray-400': !hook?.active,
}"
></div>
</div>
<div class="flex flex-col">
<div class="text-gray-600 group-hover:text-black">
{{ hook?.title }}
</div>
<div class="text-gray-400 text-xs select-none">Trigger {{ hook.event }} {{ hook.operation }}</div>
</div>
</div>
<div class="flex">
<a-dropdown placement="bottom" trigger="click">
<div
class="nc-docs-sidebar-page-options px-0.5 hover:(!bg-gray-300 !bg-opacity-30 rounded-md) cursor-pointer select-none"
data-testid="nc-view-sidebar-webhook-context-menu"
:class="{
'hidden group-hover:block': !isOptionOpen,
}"
>
<MdiDotsHorizontal />
</div>
<template #overlay>
<div class="flex flex-col p-1 bg-white rounded-md w-28 gap-y-0.5 border-1 border-gray-100">
<div
class="flex items-center cursor-pointer select-none px-2 py-1.5 text-xs gap-x-1.5 hover:bg-gray-50 rounded-md"
:class="{
'cursor-not-allowed': isCopying,
}"
data-testid="nc-view-sidebar-webhook-copy"
@click="copyWebhook(hook)"
>
<GeneralLoader v-if="isCopying" class="!h-4.75" />
<MdiContentCopy v-else class="!h-4.75" />
<div class="flex">{{ isCopying ? 'Copying' : 'Copy' }}</div>
</div>
<div
class="flex items-center cursor-pointer select-none px-2 py-1.5 text-xs gap-x-1.5 hover:bg-gray-50 rounded-md !text-red-500"
data-testid="nc-view-sidebar-webhook-delete"
@click="openDeleteModal(hook.id!)"
>
<MdiDeleteOutline class="!h-4.75" />
<div class="flex">Delete</div>
</div>
</div>
</template>
</a-dropdown>
</div>
</div>
</div>
</div>
<GeneralDeleteModal v-model:visible="showDeleteModal" :entity-name="$t('objects.webhook')" :on-delete="deleteHook">
<template #entity-preview>
<div v-if="toBeDeleteHook" class="flex flex-row items-center py-2 px-3 bg-gray-50 rounded-lg text-gray-700 mb-4">
<component :is="iconMap.hook" class="text-gray-600" />
<div
class="capitalize text-ellipsis overflow-hidden select-none w-full pl-2.5"
:style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
>
{{ toBeDeleteHook.title }}
</div>
</div>
</template>
</GeneralDeleteModal>
<GeneralModal v-model:visible="showEditModal" width="48rem" destroy-on-close>
<div class="py-6">
<div class="webhook-scroll px-5 nc-drawer-webhook-body">
<WebhookEditor :key="selectedHookId" :hook="selectedHook" @close="showEditModal = false" />
</div>
</div>
</GeneralModal>
<!-- <LazyWebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" /> -->
</template>
<style lang="scss" scoped>
.button {
@apply px-2 cursor-pointer hover:bg-gray-50 text-gray-700 rounded hover:text-black;
}
.circle {
width: 0.6rem;
height: 0.6rem;
background-color: #ffffff;
border-radius: 50%;
position: relative;
}
.button {
@apply px-2 cursor-pointer hover:bg-gray-50 text-gray-700 rounded hover:text-black;
}
.dot {
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-52.5%, -52.5%);
}
</style>