mirror of https://github.com/nocodb/nocodb
Wing-Kam Wong
2 years ago
36 changed files with 1393 additions and 307 deletions
@ -0,0 +1,120 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import MdiPlusIcon from '~icons/mdi/plus' |
||||||
|
import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline' |
||||||
|
|
||||||
|
interface Props { |
||||||
|
modelValue: Record<string, any>[] |
||||||
|
} |
||||||
|
|
||||||
|
const props = defineProps<Props>() |
||||||
|
|
||||||
|
const emits = defineEmits(['update:modelValue']) |
||||||
|
|
||||||
|
const vModel = useVModel(props, 'modelValue', emits) |
||||||
|
|
||||||
|
const headerList = ref([ |
||||||
|
'A-IM', |
||||||
|
'Accept', |
||||||
|
'Accept-Charset', |
||||||
|
'Accept-Encoding', |
||||||
|
'Accept-Language', |
||||||
|
'Accept-Datetime', |
||||||
|
'Access-Control-Request-Method', |
||||||
|
'Access-Control-Request-Headers', |
||||||
|
'Authorization', |
||||||
|
'Cache-Control', |
||||||
|
'Connection', |
||||||
|
'Content-Length', |
||||||
|
'Content-Type', |
||||||
|
'Cookie', |
||||||
|
'Date', |
||||||
|
'Expect', |
||||||
|
'Forwarded', |
||||||
|
'From', |
||||||
|
'Host', |
||||||
|
'If-Match', |
||||||
|
'If-Modified-Since', |
||||||
|
'If-None-Match', |
||||||
|
'If-Range', |
||||||
|
'If-Unmodified-Since', |
||||||
|
'Max-Forwards', |
||||||
|
'Origin', |
||||||
|
'Pragma', |
||||||
|
'Proxy-Authorization', |
||||||
|
'Range', |
||||||
|
'Referer', |
||||||
|
'TE', |
||||||
|
'User-Agent', |
||||||
|
'Upgrade', |
||||||
|
'Via', |
||||||
|
'Warning', |
||||||
|
'Non-standard headers', |
||||||
|
'Dnt', |
||||||
|
'X-Requested-With', |
||||||
|
'X-CSRF-Token', |
||||||
|
]) |
||||||
|
|
||||||
|
const addHeaderRow = () => vModel.value.push({}) |
||||||
|
|
||||||
|
const deleteHeaderRow = (idx: number) => vModel.value.splice(idx, 1) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div class="flex flex-row justify-center"> |
||||||
|
<table> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th> |
||||||
|
<!-- Intended to be empty - For checkbox --> |
||||||
|
</th> |
||||||
|
<th> |
||||||
|
<div class="text-center font-normal mb-2">Header Name</div> |
||||||
|
</th> |
||||||
|
<th> |
||||||
|
<div class="text-center font-normal mb-2">Value</div> |
||||||
|
</th> |
||||||
|
<th> |
||||||
|
<!-- Intended to be empty - For delete button --> |
||||||
|
</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
<tr v-for="(headerRow, idx) in vModel" :key="idx"> |
||||||
|
<td class="px-2"> |
||||||
|
<a-form-item> |
||||||
|
<a-checkbox v-model:checked="headerRow.enabled" /> |
||||||
|
</a-form-item> |
||||||
|
</td> |
||||||
|
<td class="px-2"> |
||||||
|
<a-form-item> |
||||||
|
<a-select v-model:value="headerRow.name" size="large" placeholder="Key"> |
||||||
|
<a-select-option v-for="(header, i) in headerList" :key="i" :value="header"> |
||||||
|
{{ header }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</td> |
||||||
|
<td class="px-2"> |
||||||
|
<a-form-item> |
||||||
|
<a-input v-model:value="headerRow.value" size="large" placeholder="Value" /> |
||||||
|
</a-form-item> |
||||||
|
</td> |
||||||
|
<td class="relative"> |
||||||
|
<div v-if="idx !== 0" class="absolute flex flex-col justify-start mt-2 -right-6 top-0"> |
||||||
|
<MdiDeleteOutlineIcon class="cursor-pointer" @click="deleteHeaderRow(idx)" /> |
||||||
|
</div> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td :colspan="12" class="text-center"> |
||||||
|
<a-button type="default" class="!bg-gray-100 rounded-md border-none mr-1" @click="addHeaderRow"> |
||||||
|
<template #icon> |
||||||
|
<MdiPlusIcon class="flex mx-auto" /> |
||||||
|
</template> |
||||||
|
</a-button> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
</template> |
||||||
@ -0,0 +1,74 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import MdiPlusIcon from '~icons/mdi/plus' |
||||||
|
import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline' |
||||||
|
|
||||||
|
interface Props { |
||||||
|
modelValue: Record<string, any>[] |
||||||
|
} |
||||||
|
|
||||||
|
const props = defineProps<Props>() |
||||||
|
|
||||||
|
const emits = defineEmits(['update:modelValue']) |
||||||
|
|
||||||
|
const vModel = useVModel(props, 'modelValue', emits) |
||||||
|
|
||||||
|
const addParamRow = () => vModel.value.push({}) |
||||||
|
|
||||||
|
const deleteParamRow = (idx: number) => vModel.value.splice(idx, 1) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div class="flex flex-row justify-center"> |
||||||
|
<table> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th> |
||||||
|
<!-- Intended to be empty - For checkbox --> |
||||||
|
</th> |
||||||
|
<th> |
||||||
|
<div class="text-center font-normal mb-2">Param Name</div> |
||||||
|
</th> |
||||||
|
<th> |
||||||
|
<div class="text-center font-normal mb-2">Value</div> |
||||||
|
</th> |
||||||
|
<th> |
||||||
|
<!-- Intended to be empty - For delete button --> |
||||||
|
</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
<tr v-for="(paramRow, idx) in vModel" :key="idx"> |
||||||
|
<td class="px-2"> |
||||||
|
<a-form-item> |
||||||
|
<a-checkbox v-model:checked="paramRow.enabled" /> |
||||||
|
</a-form-item> |
||||||
|
</td> |
||||||
|
<td class="px-2"> |
||||||
|
<a-form-item> |
||||||
|
<a-input v-model:value="paramRow.name" size="large" placeholder="Key" /> |
||||||
|
</a-form-item> |
||||||
|
</td> |
||||||
|
<td class="px-2"> |
||||||
|
<a-form-item> |
||||||
|
<a-input v-model:value="paramRow.value" size="large" placeholder="Value" /> |
||||||
|
</a-form-item> |
||||||
|
</td> |
||||||
|
<td class="relative"> |
||||||
|
<div v-if="idx !== 0" class="absolute flex flex-col justify-start mt-2 -right-6 top-0"> |
||||||
|
<MdiDeleteOutlineIcon class="cursor-pointer" @click="deleteParamRow(idx)" /> |
||||||
|
</div> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td :colspan="12" class="text-center"> |
||||||
|
<a-button type="default" class="!bg-gray-100 rounded-md border-none mr-1" @click="addParamRow"> |
||||||
|
<template #icon> |
||||||
|
<MdiPlusIcon class="flex mx-auto" /> |
||||||
|
</template> |
||||||
|
</a-button> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
</template> |
||||||
@ -1,100 +1,28 @@ |
|||||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||||
import { computed, inject, onMounted, ref } from '#imports' |
import { inject, onMounted, ref } from '#imports' |
||||||
|
|
||||||
interface Props { |
interface Props { |
||||||
modelValue: any |
modelValue: any |
||||||
} |
} |
||||||
|
|
||||||
const { modelValue: value } = defineProps<Props>() |
const props = defineProps<Props>() |
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue']) |
const emits = defineEmits(['update:modelValue']) |
||||||
|
|
||||||
const editEnabled = inject<boolean>('editEnabled', false) |
const editEnabled = inject<boolean>('editEnabled', false) |
||||||
|
|
||||||
const root = ref<HTMLInputElement>() |
const root = ref<HTMLInputElement>() |
||||||
|
|
||||||
const localState = computed({ |
const vModel = useVModel(props, 'modelValue', emits) |
||||||
get: () => value, |
|
||||||
set: (val) => emit('update:modelValue', val), |
|
||||||
}) |
|
||||||
|
|
||||||
onMounted(() => { |
const onSetRef = (el: HTMLInputElement) => { |
||||||
root.value?.focus() |
el.focus() |
||||||
}) |
} |
||||||
|
|
||||||
/* export default { |
|
||||||
name: 'TextCell', |
|
||||||
props: { |
|
||||||
value: [String, Object, Number, Boolean, Array], |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
localState: { |
|
||||||
get() { |
|
||||||
return this.value |
|
||||||
}, |
|
||||||
set(val) { |
|
||||||
this.$emit('input', val) |
|
||||||
}, |
|
||||||
}, |
|
||||||
parentListeners() { |
|
||||||
const $listeners = {} |
|
||||||
|
|
||||||
if (this.$listeners.blur) { |
|
||||||
$listeners.blur = this.$listeners.blur |
|
||||||
} |
|
||||||
if (this.$listeners.focus) { |
|
||||||
$listeners.focus = this.$listeners.focus |
|
||||||
} |
|
||||||
|
|
||||||
if (this.$listeners.cancel) { |
|
||||||
$listeners.cancel = this.$listeners.cancel |
|
||||||
} |
|
||||||
|
|
||||||
return $listeners |
|
||||||
}, |
|
||||||
}, |
|
||||||
mounted() { |
|
||||||
this.$el.focus() |
|
||||||
}, |
|
||||||
} */ |
|
||||||
</script> |
</script> |
||||||
|
|
||||||
<template> |
<template> |
||||||
<input v-if="editEnabled" ref="root" v-model="localState" /> |
<input v-if="editEnabled" :ref="onSetRef" v-model="vModel" class="h-full w-full outline-none" /> |
||||||
<span v-else>{{ localState }}</span> |
<span v-else>{{ vModel }}</span> |
||||||
<!-- v-on="parentListeners" /> --> |
|
||||||
</template> |
</template> |
||||||
|
|
||||||
<style scoped> |
<style scoped></style> |
||||||
input, |
|
||||||
textarea { |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
color: var(--v-textColor-base); |
|
||||||
outline: none; |
|
||||||
} |
|
||||||
</style> |
|
||||||
<!-- |
|
||||||
/** |
|
||||||
* @copyright Copyright (c) 2021, Xgene Cloud Ltd |
|
||||||
* |
|
||||||
* @author Naveen MR <oof1lab@gmail.com> |
|
||||||
* @author Pranav C Balan <pranavxc@gmail.com> |
|
||||||
* |
|
||||||
* @license GNU AGPL version 3 or any later version |
|
||||||
* |
|
||||||
* This program is free software: you can redistribute it and/or modify |
|
||||||
* it under the terms of the GNU Affero General Public License as |
|
||||||
* published by the Free Software Foundation, either version 3 of the |
|
||||||
* License, or (at your option) any later version. |
|
||||||
* |
|
||||||
* This program is distributed in the hope that it will be useful, |
|
||||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
|
||||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|
||||||
* GNU Affero General Public License for more details. |
|
||||||
* |
|
||||||
* You should have received a copy of the GNU Affero General Public License |
|
||||||
* along with this program. If not, see <http://www.gnu.org/licenses/>. |
|
||||||
* |
|
||||||
*/ |
|
||||||
--> |
|
||||||
|
|||||||
@ -1,11 +1,15 @@ |
|||||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||||
import MdiAddIcon from '~icons/mdi/plus-outline' |
import MdiAddIcon from '~icons/mdi/plus-outline' |
||||||
|
import { inject, ref } from '#imports' |
||||||
|
import { RightSidebarInj } from '~/context' |
||||||
|
|
||||||
const emits = defineEmits(['addRow']) |
const emits = defineEmits(['addRow']) |
||||||
|
|
||||||
|
const sidebarOpen = inject(RightSidebarInj, ref(true)) |
||||||
</script> |
</script> |
||||||
|
|
||||||
<template> |
<template> |
||||||
<a-tooltip placement="left"> |
<a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'"> |
||||||
<template #title> {{ $t('activity.addRow') }} </template> |
<template #title> {{ $t('activity.addRow') }} </template> |
||||||
|
|
||||||
<div class="nc-sidebar-right-item hover:after:bg-primary/75 group"> |
<div class="nc-sidebar-right-item hover:after:bg-primary/75 group"> |
||||||
@ -1,15 +1,17 @@ |
|||||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||||
import { inject, useTable } from '#imports' |
import { inject, ref, useTable } from '#imports' |
||||||
import { MetaInj } from '~/context' |
import { MetaInj, RightSidebarInj } from '~/context' |
||||||
import MdiDeleteIcon from '~icons/mdi/delete-outline' |
import MdiDeleteIcon from '~icons/mdi/delete-outline' |
||||||
|
|
||||||
const meta = inject(MetaInj) |
const meta = inject(MetaInj) |
||||||
|
|
||||||
const { deleteTable } = useTable() |
const { deleteTable } = useTable() |
||||||
|
|
||||||
|
const sidebarOpen = inject(RightSidebarInj, ref(true)) |
||||||
</script> |
</script> |
||||||
|
|
||||||
<template> |
<template> |
||||||
<a-tooltip placement="left"> |
<a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'"> |
||||||
<template #title> {{ $t('activity.deleteTable') }} </template> |
<template #title> {{ $t('activity.deleteTable') }} </template> |
||||||
|
|
||||||
<div class="nc-sidebar-right-item hover:after:bg-red-500 group"> |
<div class="nc-sidebar-right-item hover:after:bg-red-500 group"> |
||||||
@ -1,12 +1,15 @@ |
|||||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||||
import { ReloadViewDataHookInj } from '~/context' |
import { ReloadViewDataHookInj, RightSidebarInj } from '~/context' |
||||||
import MdiReloadIcon from '~icons/mdi/reload' |
import MdiReloadIcon from '~icons/mdi/reload' |
||||||
|
import { inject, ref } from '#imports' |
||||||
|
|
||||||
const reloadTri = inject(ReloadViewDataHookInj) |
const reloadTri = inject(ReloadViewDataHookInj) |
||||||
|
|
||||||
|
const sidebarOpen = inject(RightSidebarInj, ref(true)) |
||||||
</script> |
</script> |
||||||
|
|
||||||
<template> |
<template> |
||||||
<a-tooltip placement="left"> |
<a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'"> |
||||||
<template #title> {{ $t('general.reload') }} </template> |
<template #title> {{ $t('general.reload') }} </template> |
||||||
|
|
||||||
<div class="nc-sidebar-right-item hover:after:bg-green-500 group"> |
<div class="nc-sidebar-right-item hover:after:bg-green-500 group"> |
||||||
@ -1,24 +1,32 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import AddRow from './AddRow.vue' |
||||||
|
import DeleteTable from './DeleteTable.vue' |
||||||
|
import LockMenu from './LockMenu.vue' |
||||||
|
import Reload from './Reload.vue' |
||||||
|
import ToggleDrawer from './ToggleDrawer.vue' |
||||||
|
</script> |
||||||
|
|
||||||
<template> |
<template> |
||||||
<div class="flex gap-2"> |
<div class="flex gap-2"> |
||||||
<slot name="start" /> |
<slot name="start" /> |
||||||
|
|
||||||
<SmartsheetToolbarLockMenu /> |
<LockMenu /> |
||||||
|
|
||||||
<div class="dot" /> |
<div class="dot" /> |
||||||
|
|
||||||
<SmartsheetToolbarReload /> |
<Reload /> |
||||||
|
|
||||||
<div class="dot" /> |
<div class="dot" /> |
||||||
|
|
||||||
<SmartsheetToolbarAddRow /> |
<AddRow /> |
||||||
|
|
||||||
<div class="dot" /> |
<div class="dot" /> |
||||||
|
|
||||||
<SmartsheetToolbarDeleteTable /> |
<DeleteTable /> |
||||||
|
|
||||||
<div class="dot" /> |
<div class="dot" /> |
||||||
|
|
||||||
<SmartsheetToolbarToggleDrawer /> |
<ToggleDrawer /> |
||||||
|
|
||||||
<slot name="end" /> |
<slot name="end" /> |
||||||
</div> |
</div> |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
// TODO: wait for Count Column implementation |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<span class="prose-sm"></span> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped lang="scss"></style> |
||||||
@ -1,9 +1,9 @@ |
|||||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||||
const { value } = defineProps<{ value?: any }>() |
const value = inject('value') |
||||||
</script> |
</script> |
||||||
|
|
||||||
<template> |
<template> |
||||||
<span> |
<span class="text-center pl-3"> |
||||||
{{ value }} |
{{ value }} |
||||||
</span> |
</span> |
||||||
</template> |
</template> |
||||||
|
|||||||
@ -0,0 +1,35 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
interface Props { |
||||||
|
modelValue: boolean |
||||||
|
} |
||||||
|
|
||||||
|
const props = defineProps<Props>() |
||||||
|
|
||||||
|
const emits = defineEmits(['update:modelValue']) |
||||||
|
|
||||||
|
const editOrAdd = ref(false) |
||||||
|
|
||||||
|
const webhookEditorRef = ref() |
||||||
|
|
||||||
|
const vModel = useVModel(props, 'modelValue', emits) |
||||||
|
|
||||||
|
async function editHook(hook: Record<string, any>) { |
||||||
|
editOrAdd.value = true |
||||||
|
nextTick(async () => { |
||||||
|
webhookEditorRef.value.setHook(hook) |
||||||
|
await webhookEditorRef.value.onEventChange() |
||||||
|
}) |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<a-drawer v-model:visible="vModel" :closable="false" placement="right" width="700px" @keydown.esc="vModel = false"> |
||||||
|
<WebhookEditor v-if="editOrAdd" ref="webhookEditorRef" @back-to-list="editOrAdd = false" /> |
||||||
|
<WebhookList v-else @edit="editHook" @add="editOrAdd = true" /> |
||||||
|
<div class="self-center flex flex-column flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center"> |
||||||
|
<a-button v-t="['e:hiring']" href="https://angel.co/company/nocodb" target="_blank" size="large"> |
||||||
|
🚀 We are Hiring! 🚀 |
||||||
|
</a-button> |
||||||
|
</div> |
||||||
|
</a-drawer> |
||||||
|
</template> |
||||||
@ -0,0 +1,610 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import { Form } from 'ant-design-vue' |
||||||
|
import { useToast } from 'vue-toastification' |
||||||
|
import { MetaInj } from '~/context' |
||||||
|
import MdiContentSaveIcon from '~icons/mdi/content-save' |
||||||
|
import MdiLinkIcon from '~icons/mdi/link' |
||||||
|
import MdiEmailIcon from '~icons/mdi/email' |
||||||
|
import MdiSlackIcon from '~icons/mdi/slack' |
||||||
|
import MdiMicrosoftTeamsIcon from '~icons/mdi/microsoft-teams' |
||||||
|
import MdiDiscordIcon from '~icons/mdi/discord' |
||||||
|
import MdiChatIcon from '~icons/mdi/chat' |
||||||
|
import MdiWhatsAppIcon from '~icons/mdi/whatsapp' |
||||||
|
import MdiCellPhoneMessageIcon from '~icons/mdi/cellphone-message' |
||||||
|
import MdiGestureDoubleTapIcon from '~icons/mdi/gesture-double-tap' |
||||||
|
import MdiInformationIcon from '~icons/mdi/information' |
||||||
|
import MdiArrowLeftBoldIcon from '~icons/mdi/arrow-left-bold' |
||||||
|
import { fieldRequiredValidator } from '~/utils/validation' |
||||||
|
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils' |
||||||
|
|
||||||
|
interface Option { |
||||||
|
label: string |
||||||
|
value: string |
||||||
|
} |
||||||
|
|
||||||
|
const emit = defineEmits(['backToList', 'editOrAdd']) |
||||||
|
|
||||||
|
const { $state, $api, $e } = useNuxtApp() |
||||||
|
|
||||||
|
const toast = useToast() |
||||||
|
|
||||||
|
const meta = inject(MetaInj) |
||||||
|
|
||||||
|
const useForm = Form.useForm |
||||||
|
|
||||||
|
const hook = reactive({ |
||||||
|
id: '', |
||||||
|
title: '', |
||||||
|
event: '', |
||||||
|
operation: '', |
||||||
|
eventOperation: undefined, |
||||||
|
notification: { |
||||||
|
type: 'URL', |
||||||
|
payload: { |
||||||
|
method: 'POST', |
||||||
|
body: '{{ json data }}', |
||||||
|
headers: [{}], |
||||||
|
parameters: [{}], |
||||||
|
} as any, |
||||||
|
}, |
||||||
|
condition: false, |
||||||
|
}) |
||||||
|
|
||||||
|
const urlTabKey = ref('body') |
||||||
|
|
||||||
|
const apps: Record<string, any> = ref() |
||||||
|
|
||||||
|
const webhookTestRef = ref() |
||||||
|
|
||||||
|
const slackChannels = ref<Record<string, any>[]>([]) |
||||||
|
|
||||||
|
const teamsChannels = ref<Record<string, any>[]>([]) |
||||||
|
|
||||||
|
const discordChannels = ref<Record<string, any>[]>([]) |
||||||
|
|
||||||
|
const mattermostChannels = ref<Record<string, any>[]>([]) |
||||||
|
|
||||||
|
const loading = ref(false) |
||||||
|
|
||||||
|
const filters = ref([]) |
||||||
|
|
||||||
|
const formInput = ref({ |
||||||
|
'Email': [ |
||||||
|
{ |
||||||
|
key: 'to', |
||||||
|
label: 'To Address', |
||||||
|
placeholder: 'To Address', |
||||||
|
type: 'SingleLineText', |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
key: 'subject', |
||||||
|
label: 'Subject', |
||||||
|
placeholder: 'Subject', |
||||||
|
type: 'SingleLineText', |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
key: 'body', |
||||||
|
label: 'Body', |
||||||
|
placeholder: 'Body', |
||||||
|
type: 'LongText', |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
], |
||||||
|
'Slack': [ |
||||||
|
{ |
||||||
|
key: 'body', |
||||||
|
label: 'Body', |
||||||
|
placeholder: 'Body', |
||||||
|
type: 'LongText', |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
], |
||||||
|
'Microsoft Teams': [ |
||||||
|
{ |
||||||
|
key: 'body', |
||||||
|
label: 'Body', |
||||||
|
placeholder: 'Body', |
||||||
|
type: 'LongText', |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
], |
||||||
|
'Discord': [ |
||||||
|
{ |
||||||
|
key: 'body', |
||||||
|
label: 'Body', |
||||||
|
placeholder: 'Body', |
||||||
|
type: 'LongText', |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
], |
||||||
|
'Mattermost': [ |
||||||
|
{ |
||||||
|
key: 'body', |
||||||
|
label: 'Body', |
||||||
|
placeholder: 'Body', |
||||||
|
type: 'LongText', |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
], |
||||||
|
'Twilio': [ |
||||||
|
{ |
||||||
|
key: 'body', |
||||||
|
label: 'Body', |
||||||
|
placeholder: 'Body', |
||||||
|
type: 'LongText', |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
key: 'to', |
||||||
|
label: 'Comma separated Mobile #', |
||||||
|
placeholder: 'Comma separated Mobile #', |
||||||
|
type: 'LongText', |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
], |
||||||
|
'Whatsapp Twilio': [ |
||||||
|
{ |
||||||
|
key: 'body', |
||||||
|
label: 'Body', |
||||||
|
placeholder: 'Body', |
||||||
|
type: 'LongText', |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
key: 'to', |
||||||
|
label: 'Comma separated Mobile #', |
||||||
|
placeholder: 'Comma separated Mobile #', |
||||||
|
type: 'LongText', |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
], |
||||||
|
}) |
||||||
|
|
||||||
|
const eventList = ref([ |
||||||
|
// {text: ["Before", "Insert"], value: ['before', 'insert']}, |
||||||
|
{ text: ['After', 'Insert'], value: ['after', 'insert'] }, |
||||||
|
// {text: ["Before", "Update"], value: ['before', 'update']}, |
||||||
|
{ text: ['After', 'Update'], value: ['after', 'update'] }, |
||||||
|
// {text: ["Before", "Delete"], value: ['before', 'delete']}, |
||||||
|
{ text: ['After', 'Delete'], value: ['after', 'delete'] }, |
||||||
|
]) |
||||||
|
|
||||||
|
const notificationList = ref([ |
||||||
|
{ type: 'URL' }, |
||||||
|
{ type: 'Email' }, |
||||||
|
{ type: 'Slack' }, |
||||||
|
{ type: 'Microsoft Teams' }, |
||||||
|
{ type: 'Discord' }, |
||||||
|
{ type: 'Mattermost' }, |
||||||
|
{ type: 'Twilio' }, |
||||||
|
{ type: 'Whatsapp Twilio' }, |
||||||
|
]) |
||||||
|
|
||||||
|
const methodList = ref([ |
||||||
|
{ title: 'GET' }, |
||||||
|
{ title: 'POST' }, |
||||||
|
{ title: 'DELETE' }, |
||||||
|
{ title: 'PUT' }, |
||||||
|
{ title: 'HEAD' }, |
||||||
|
{ title: 'PATCH' }, |
||||||
|
]) |
||||||
|
|
||||||
|
const validators = computed(() => { |
||||||
|
return { |
||||||
|
'title': [fieldRequiredValidator], |
||||||
|
'eventOperation': [fieldRequiredValidator], |
||||||
|
'notification.type': [fieldRequiredValidator], |
||||||
|
...(hook.notification.type === 'URL' && { |
||||||
|
'notification.payload.method': [fieldRequiredValidator], |
||||||
|
'notification.payload.path': [fieldRequiredValidator], |
||||||
|
}), |
||||||
|
...(hook.notification.type === 'Email' && { |
||||||
|
'notification.payload.to': [fieldRequiredValidator], |
||||||
|
'notification.payload.subject': [fieldRequiredValidator], |
||||||
|
'notification.payload.body': [fieldRequiredValidator], |
||||||
|
}), |
||||||
|
...((hook.notification.type === 'Slack' || |
||||||
|
hook.notification.type === 'Microsoft Teams' || |
||||||
|
hook.notification.type === 'Discord' || |
||||||
|
hook.notification.type === 'Mattermost') && { |
||||||
|
'notification.payload.channels': [fieldRequiredValidator], |
||||||
|
'notification.payload.body': [fieldRequiredValidator], |
||||||
|
}), |
||||||
|
...((hook.notification.type === 'Twilio' || hook.notification.type === 'Whatsapp Twilio') && { |
||||||
|
'notification.payload.body': [fieldRequiredValidator], |
||||||
|
'notification.payload.to': [fieldRequiredValidator], |
||||||
|
}), |
||||||
|
} |
||||||
|
}) |
||||||
|
const { resetFields, validate, validateInfos } = useForm(hook, validators) |
||||||
|
|
||||||
|
function onNotTypeChange() { |
||||||
|
hook.notification.payload = {} as any |
||||||
|
|
||||||
|
if (hook.notification.type === 'Slack') { |
||||||
|
slackChannels.value = (apps && apps?.Slack && apps.Slack.parsedInput) || [] |
||||||
|
} |
||||||
|
if (hook.notification.type === 'Microsoft Teams') { |
||||||
|
teamsChannels.value = (apps && apps['Microsoft Teams'] && apps['Microsoft Teams'].parsedInput) || [] |
||||||
|
} |
||||||
|
if (hook.notification.type === 'Discord') { |
||||||
|
discordChannels.value = (apps && apps.Discord && apps.Discord.parsedInput) || [] |
||||||
|
} |
||||||
|
if (hook.notification.type === 'Mattermost') { |
||||||
|
mattermostChannels.value = (apps && apps.Mattermost && apps.Mattermost.parsedInput) || [] |
||||||
|
} |
||||||
|
if (hook.notification.type === 'URL') { |
||||||
|
hook.notification.payload.body = '{{ json data }}' |
||||||
|
hook.notification.payload.parameters = [{}] |
||||||
|
hook.notification.payload.headers = [{}] |
||||||
|
hook.notification.payload.method = 'POST' |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function filterOption(input: string, option: Option) { |
||||||
|
return option.value.toUpperCase().includes(input.toUpperCase()) |
||||||
|
} |
||||||
|
|
||||||
|
function setHook(newHook: any) { |
||||||
|
Object.assign(hook, { |
||||||
|
...newHook, |
||||||
|
notification: { |
||||||
|
...newHook.notification, |
||||||
|
payload: newHook.notification.payload, |
||||||
|
}, |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
async function onEventChange() { |
||||||
|
const { notification: { payload = {}, type = {} } = {}, ...rest } = hook |
||||||
|
|
||||||
|
Object.assign(hook, { |
||||||
|
...hook, |
||||||
|
notification: { |
||||||
|
type, |
||||||
|
payload, |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
hook.notification.payload = payload |
||||||
|
|
||||||
|
let channels: Record<string, any>[] | null = null |
||||||
|
|
||||||
|
switch (hook.notification.type) { |
||||||
|
case 'Slack': |
||||||
|
channels = slackChannels as any |
||||||
|
break |
||||||
|
case 'Microsoft Teams': |
||||||
|
channels = teamsChannels as any |
||||||
|
break |
||||||
|
case 'Discord': |
||||||
|
channels = discordChannels as any |
||||||
|
break |
||||||
|
case 'Mattermost': |
||||||
|
channels = mattermostChannels as any |
||||||
|
break |
||||||
|
} |
||||||
|
|
||||||
|
if (channels) { |
||||||
|
hook.notification.payload.webhook_url = |
||||||
|
hook.notification.payload.webhook_url && |
||||||
|
hook.notification.payload.webhook_url.map((v: Record<string, any>) => |
||||||
|
channels?.find((s: Record<string, any>) => v.webhook_url === s.webhook_url), |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
if (hook.notification.type === 'URL') { |
||||||
|
hook.notification.payload = hook.notification.payload || {} |
||||||
|
hook.notification.payload.parameters = hook.notification.payload.parameters || [{}] |
||||||
|
hook.notification.payload.headers = hook.notification.payload.headers || [{}] |
||||||
|
hook.notification.payload.method = hook.notification.payload.method || 'POST' |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
async function loadPluginList() { |
||||||
|
try { |
||||||
|
const plugins = (await $api.plugin.list()).list as any |
||||||
|
apps.value = plugins.reduce((o: Record<string, any>[], p: Record<string, any>) => { |
||||||
|
p.tags = p.tags ? p.tags.split(',') : [] |
||||||
|
p.parsedInput = p.input && JSON.parse(p.input) |
||||||
|
o[p.title] = p |
||||||
|
return o |
||||||
|
}, {}) |
||||||
|
|
||||||
|
if (hook.event && hook.operation) { |
||||||
|
hook.eventOperation = `${hook.event} ${hook.operation}` |
||||||
|
} |
||||||
|
} catch (e: any) { |
||||||
|
toast.error(extractSdkResponseErrorMsg(e)) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
async function saveHooks() { |
||||||
|
loading.value = true |
||||||
|
try { |
||||||
|
await validate() |
||||||
|
} catch (_: any) { |
||||||
|
toast.error('Invalid Form') |
||||||
|
loading.value = false |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
try { |
||||||
|
let res |
||||||
|
if (hook.id) { |
||||||
|
res = await $api.dbTableWebhook.update(hook.id, { |
||||||
|
...hook, |
||||||
|
notification: { |
||||||
|
...hook.notification, |
||||||
|
payload: hook.notification.payload, |
||||||
|
}, |
||||||
|
} as any) |
||||||
|
} else { |
||||||
|
res = await $api.dbTableWebhook.create( |
||||||
|
meta?.value.id as string, |
||||||
|
{ |
||||||
|
...hook, |
||||||
|
notification: { |
||||||
|
...hook.notification, |
||||||
|
payload: hook.notification.payload, |
||||||
|
}, |
||||||
|
} as any, |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
if (!hook.id && res) { |
||||||
|
hook.id = res.id |
||||||
|
} |
||||||
|
|
||||||
|
// TODO: wait for filter implementation |
||||||
|
// if ($refs.filter) { |
||||||
|
// await $refs.filter.applyChanges(false, { |
||||||
|
// hookId: hook.id, |
||||||
|
// }); |
||||||
|
// } |
||||||
|
|
||||||
|
toast.success('Webhook details updated successfully') |
||||||
|
} catch (e: any) { |
||||||
|
toast.error(extractSdkResponseErrorMsg(e)) |
||||||
|
} finally { |
||||||
|
loading.value = false |
||||||
|
} |
||||||
|
$e('a:webhook:add', { |
||||||
|
operation: hook.operation, |
||||||
|
condition: hook.condition, |
||||||
|
notification: hook.notification.type, |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
async function testWebhook() { |
||||||
|
await webhookTestRef.value.testWebhook() |
||||||
|
} |
||||||
|
|
||||||
|
defineExpose({ |
||||||
|
onEventChange, |
||||||
|
setHook, |
||||||
|
}) |
||||||
|
|
||||||
|
watch( |
||||||
|
() => hook.eventOperation, |
||||||
|
(v) => { |
||||||
|
const [event, operation] = hook.eventOperation.split(' ') |
||||||
|
hook.event = event |
||||||
|
hook.operation = operation |
||||||
|
}, |
||||||
|
) |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
loadPluginList() |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div class="mb-4"> |
||||||
|
<div class="float-left mt-2"> |
||||||
|
<div class="flex items-center"> |
||||||
|
<MdiArrowLeftBoldIcon class="mr-3 text-xl cursor-pointer" @click="emit('backToList')" /> |
||||||
|
<span class="inline text-xl font-bold">{{ meta.title }} : {{ hook.title || 'Webhooks' }} </span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="float-right mb-5"> |
||||||
|
<a-button class="mr-3" size="large" @click="testWebhook"> |
||||||
|
<div class="flex items-center"> |
||||||
|
<MdiGestureDoubleTapIcon class="mr-2" /> |
||||||
|
<!-- TODO: i18n --> |
||||||
|
Test Webhook |
||||||
|
</div> |
||||||
|
</a-button> |
||||||
|
<a-button type="primary" size="large" @click.prevent="saveHooks"> |
||||||
|
<div class="flex items-center"> |
||||||
|
<MdiContentSaveIcon class="mr-2" /> |
||||||
|
<!-- Save --> |
||||||
|
{{ $t('general.save') }} |
||||||
|
</div> |
||||||
|
</a-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<a-divider /> |
||||||
|
<a-form :model="hook" name="create-or-edit-webhook"> |
||||||
|
<a-form-item> |
||||||
|
<a-row type="flex"> |
||||||
|
<a-col :span="24"> |
||||||
|
<a-form-item v-bind="validateInfos.title"> |
||||||
|
<a-input v-model:value="hook.title" size="large" :placeholder="$t('general.title')" /> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row type="flex" :gutter="[16, 16]"> |
||||||
|
<a-col :span="12"> |
||||||
|
<a-form-item v-bind="validateInfos.eventOperation"> |
||||||
|
<a-select v-model:value="hook.eventOperation" size="large" :placeholder="$t('general.event')"> |
||||||
|
<a-select-option v-for="(event, i) in eventList" :key="i" :value="event.value.join(' ')"> |
||||||
|
{{ event.text.join(' ') }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :span="12"> |
||||||
|
<a-form-item v-bind="validateInfos['notification.type']"> |
||||||
|
<a-select |
||||||
|
v-model:value="hook.notification.type" |
||||||
|
size="large" |
||||||
|
:placeholder="$t('general.notification')" |
||||||
|
@change="onNotTypeChange" |
||||||
|
> |
||||||
|
<a-select-option v-for="(notificationOption, i) in notificationList" :key="i" :value="notificationOption.type"> |
||||||
|
<div class="flex items-center"> |
||||||
|
<MdiLinkIcon v-if="notificationOption.type === 'URL'" class="mr-2" /> |
||||||
|
<MdiEmailIcon v-if="notificationOption.type === 'Email'" class="mr-2" /> |
||||||
|
<MdiSlackIcon v-if="notificationOption.type === 'Slack'" class="mr-2" /> |
||||||
|
<MdiMicrosoftTeamsIcon v-if="notificationOption.type === 'Microsoft Teams'" class="mr-2" /> |
||||||
|
<MdiDiscordIcon v-if="notificationOption.type === 'Discord'" class="mr-2" /> |
||||||
|
<MdiChatIcon v-if="notificationOption.type === 'Mattermost'" class="mr-2" /> |
||||||
|
<MdiWhatsAppIcon v-if="notificationOption.type === 'Whatsapp Twilio'" class="mr-2" /> |
||||||
|
<MdiCellPhoneMessageIcon v-if="notificationOption.type === 'Twilio'" class="mr-2" /> |
||||||
|
{{ notificationOption.type }} |
||||||
|
</div> |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row v-if="hook.notification.type === 'URL'" class="mb-5" type="flex" :gutter="[16, 0]"> |
||||||
|
<a-col :span="6"> |
||||||
|
<a-select v-model:value="hook.notification.payload.method" size="large"> |
||||||
|
<a-select-option v-for="(method, i) in methodList" :key="i" :value="method.title">{{ method.title }}</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-col> |
||||||
|
<a-col :span="18"> |
||||||
|
<a-form-item v-bind="validateInfos['notification.payload.path']"> |
||||||
|
<a-input v-model:value="hook.notification.payload.path" size="large" placeholder="http://example.com" /> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
<a-col :span="24"> |
||||||
|
<a-tabs v-model:activeKey="urlTabKey" centered> |
||||||
|
<a-tab-pane key="body" tab="Body"> |
||||||
|
<MonacoEditor v-model="hook.notification.payload.body" :validate="false" class="min-h-60 max-h-80" /> |
||||||
|
</a-tab-pane> |
||||||
|
<a-tab-pane key="params" tab="Params" force-render> |
||||||
|
<ApiClientParams v-model="hook.notification.payload.parameters" /> |
||||||
|
</a-tab-pane> |
||||||
|
<a-tab-pane key="headers" tab="Headers"> |
||||||
|
<ApiClientHeaders v-model="hook.notification.payload.headers" /> |
||||||
|
</a-tab-pane> |
||||||
|
<a-tab-pane key="auth" tab="Auth"> |
||||||
|
<MonacoEditor v-model="hook.notification.payload.auth" class="min-h-60 max-h-80" /> |
||||||
|
<span class="text-gray-600 prose-sm"> |
||||||
|
For more about auth option refer |
||||||
|
<a class="prose-sm" href="https://github.com/axios/axios#request-config" target="_blank">axios docs</a>. |
||||||
|
</span> |
||||||
|
</a-tab-pane> |
||||||
|
</a-tabs> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row v-if="hook.notification.type === 'Slack'" type="flex"> |
||||||
|
<a-col :span="24"> |
||||||
|
<a-form-item v-bind="validateInfos['notification.channels']"> |
||||||
|
<a-auto-complete |
||||||
|
v-model:value="hook.notification.payload.channels" |
||||||
|
size="large" |
||||||
|
:options="slackChannels" |
||||||
|
placeholder="Select Slack channels" |
||||||
|
:filter-option="filterOption" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row v-if="hook.notification.type === 'Microsoft Teams'" type="flex"> |
||||||
|
<a-col :span="24"> |
||||||
|
<a-form-item v-bind="validateInfos['notification.channels']"> |
||||||
|
<a-auto-complete |
||||||
|
v-model:value="hook.notification.payload.channels" |
||||||
|
size="large" |
||||||
|
:options="teamsChannels" |
||||||
|
placeholder="Select Microsoft Teams channels" |
||||||
|
:filter-option="filterOption" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row v-if="hook.notification.type === 'Discord'" type="flex"> |
||||||
|
<a-col :span="24"> |
||||||
|
<a-form-item v-bind="validateInfos['notification.channels']"> |
||||||
|
<a-auto-complete |
||||||
|
v-model:value="hook.notification.payload.channels" |
||||||
|
size="large" |
||||||
|
:options="discordChannels" |
||||||
|
placeholder="Select Discord channels" |
||||||
|
:filter-option="filterOption" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row v-if="hook.notification.type === 'Mattermost'" type="flex"> |
||||||
|
<a-col :span="24"> |
||||||
|
<a-form-item v-bind="validateInfos['notification.channels']"> |
||||||
|
<a-auto-complete |
||||||
|
v-model:value="hook.notification.payload.channels" |
||||||
|
size="large" |
||||||
|
:options="mattermostChannels" |
||||||
|
placeholder="Select Mattermost channels" |
||||||
|
:filter-option="filterOption" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row v-if="formInput[hook.notification.type] && hook.notification.payload" type="flex"> |
||||||
|
<a-col v-for="(input, i) in formInput[hook.notification.type]" :key="i" :span="24"> |
||||||
|
<a-form-item v-if="input.type === 'LongText'" v-bind="validateInfos[`notification.payload.${input.key}`]"> |
||||||
|
<a-textarea v-model:value="hook.notification.payload[input.key]" :placeholder="input.label" size="large" /> |
||||||
|
</a-form-item> |
||||||
|
<a-form-item v-else v-bind="validateInfos[`notification.payload.${input.key}`]"> |
||||||
|
<a-input v-model:value="hook.notification.payload[input.key]" :placeholder="input.label" size="large" /> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row class="mb-5" type="flex"> |
||||||
|
<a-col :span="24"> |
||||||
|
<a-card> |
||||||
|
<a-checkbox v-model:checked="hook.condition">On Condition</a-checkbox> |
||||||
|
<SmartsheetToolbarColumnFilter v-if="hook.condition" /> |
||||||
|
</a-card> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<a-row> |
||||||
|
<a-col :span="24"> |
||||||
|
<div class="text-gray-600"> |
||||||
|
<em>Use context variable <strong>data</strong> to refer the record under consideration</em> |
||||||
|
|
||||||
|
<a-tooltip bottom> |
||||||
|
<template #title> |
||||||
|
<span> <strong>data</strong> : Row data <br /> </span> |
||||||
|
</template> |
||||||
|
<MdiInformationIcon class="ml-2" /> |
||||||
|
</a-tooltip> |
||||||
|
|
||||||
|
<div class="mt-3"> |
||||||
|
<a href="https://docs.nocodb.com/developer-resources/webhooks/" target="_blank"> |
||||||
|
<!-- Document Reference --> |
||||||
|
{{ $t('labels.docReference') }} |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<WebhookTest |
||||||
|
ref="webhookTestRef" |
||||||
|
:hook="{ |
||||||
|
...hook, |
||||||
|
filters, |
||||||
|
notification: { |
||||||
|
...hook.notification, |
||||||
|
payload: hook.notification.payload, |
||||||
|
}, |
||||||
|
}" |
||||||
|
/> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</a-form-item> |
||||||
|
</a-form> |
||||||
|
</template> |
||||||
@ -0,0 +1,99 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import { useToast } from 'vue-toastification' |
||||||
|
import { onMounted } from '@vue/runtime-core' |
||||||
|
import { MetaInj } from '~/context' |
||||||
|
import MdiHookIcon from '~icons/mdi/hook' |
||||||
|
import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline' |
||||||
|
|
||||||
|
const emit = defineEmits(['edit']) |
||||||
|
|
||||||
|
const { $api, $e } = useNuxtApp() |
||||||
|
|
||||||
|
const toast = useToast() |
||||||
|
|
||||||
|
const hooks = ref<Record<string, any>[]>([]) |
||||||
|
|
||||||
|
const meta = inject(MetaInj) |
||||||
|
|
||||||
|
async function loadHooksList() { |
||||||
|
try { |
||||||
|
const hookList = (await $api.dbTableWebhook.list(meta?.value.id as string)).list as Record<string, any>[] |
||||||
|
hooks.value = hookList.map((hook) => { |
||||||
|
hook.notification = hook.notification && JSON.parse(hook.notification) |
||||||
|
return hook |
||||||
|
}) |
||||||
|
} catch (e: any) { |
||||||
|
toast.error(e.message) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
async function deleteHook(item: Record<string, any>, index: number) { |
||||||
|
try { |
||||||
|
if (item.id) { |
||||||
|
await $api.dbTableWebhook.delete(item.id) |
||||||
|
hooks.value.splice(index, 1) |
||||||
|
} else { |
||||||
|
hooks.value.splice(index, 1) |
||||||
|
} |
||||||
|
toast.success('Hook deleted successfully') |
||||||
|
if (!hooks.value.length) { |
||||||
|
hooks.value = [] |
||||||
|
} |
||||||
|
} catch (e: any) { |
||||||
|
toast.error(e.message) |
||||||
|
} |
||||||
|
|
||||||
|
$e('a:webhook:delete') |
||||||
|
} |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
loadHooksList() |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div class="h-5/6"> |
||||||
|
<div class="mb-4"> |
||||||
|
<div class="float-left font-bold text-xl mt-2 mb-4">{{ meta.title }} : Webhooks</div> |
||||||
|
<a-button class="float-right" type="primary" size="large" @click="emit('add')"> |
||||||
|
{{ $t('activity.addWebhook') }} |
||||||
|
</a-button> |
||||||
|
</div> |
||||||
|
<a-divider /> |
||||||
|
<div v-if="hooks.length"> |
||||||
|
<a-list item-layout="horizontal" :data-source="hooks" class="cursor-pointer pl-5 pr-5 pt-2 pb-2"> |
||||||
|
<template #renderItem="{ item, index }"> |
||||||
|
<a-list-item class="pa-2" @click="emit('edit', item)"> |
||||||
|
<a-list-item-meta> |
||||||
|
<template #description> |
||||||
|
<span class="uppercase"> {{ item.event }} {{ item.operation }}</span> |
||||||
|
</template> |
||||||
|
<template #title> |
||||||
|
<span class="text-xl normal-case"> |
||||||
|
{{ item.title }} |
||||||
|
</span> |
||||||
|
</template> |
||||||
|
<template #avatar> |
||||||
|
<div class="mt-4"> |
||||||
|
<MdiHookIcon class="text-xl" /> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</a-list-item-meta> |
||||||
|
<template #extra> |
||||||
|
<div> |
||||||
|
<!-- Notify Via --> |
||||||
|
<div class="mr-2">{{ $t('labels.notifyVia') }} : {{ item?.notification?.type }}</div> |
||||||
|
<div class="float-right pt-2 pr-1"> |
||||||
|
<MdiDeleteOutlineIcon class="text-xl" @click.stop="deleteHook(item, index)" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</a-list-item> |
||||||
|
</template> |
||||||
|
</a-list> |
||||||
|
</div> |
||||||
|
<div v-else class="pa-4 bg-gray-100 text-gray-600"> |
||||||
|
Webhooks list is empty, create new webhook by clicking 'Create webhook' button. |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
@ -0,0 +1,65 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import { onMounted } from '@vue/runtime-core' |
||||||
|
import { useToast } from 'vue-toastification' |
||||||
|
import { MetaInj } from '~/context' |
||||||
|
import { extractSdkResponseErrorMsg } from '~/utils' |
||||||
|
|
||||||
|
interface Props { |
||||||
|
hook: Record<string, any> |
||||||
|
} |
||||||
|
|
||||||
|
const { hook } = defineProps<Props>() |
||||||
|
|
||||||
|
const { $state, $api, $e } = useNuxtApp() |
||||||
|
|
||||||
|
const toast = useToast() |
||||||
|
|
||||||
|
const meta = inject(MetaInj) |
||||||
|
|
||||||
|
const sampleData = ref({ |
||||||
|
data: {}, |
||||||
|
}) |
||||||
|
const activeKey = ref(0) |
||||||
|
|
||||||
|
watch( |
||||||
|
() => hook?.operation, |
||||||
|
async (v) => { |
||||||
|
await loadSampleData() |
||||||
|
}, |
||||||
|
) |
||||||
|
|
||||||
|
async function loadSampleData() { |
||||||
|
sampleData.value = { |
||||||
|
data: await $api.dbTableWebhook.samplePayloadGet(meta?.value?.id as string, hook?.operation), |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
async function testWebhook() { |
||||||
|
try { |
||||||
|
await $api.dbTableWebhook.test(meta?.value.id as string, { |
||||||
|
hook, |
||||||
|
payload: sampleData.value, |
||||||
|
}) |
||||||
|
|
||||||
|
toast.success('Webhook tested successfully') |
||||||
|
} catch (e: any) { |
||||||
|
toast.error(await extractSdkResponseErrorMsg(e)) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
defineExpose({ |
||||||
|
testWebhook, |
||||||
|
}) |
||||||
|
|
||||||
|
onMounted(async () => { |
||||||
|
await loadSampleData() |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<a-collapse v-model:activeKey="activeKey" ghost> |
||||||
|
<a-collapse-panel key="1" header="Sample Payload"> |
||||||
|
<MonacoEditor v-model="sampleData" class="min-h-60 max-h-80" /> |
||||||
|
</a-collapse-panel> |
||||||
|
</a-collapse> |
||||||
|
</template> |
||||||
@ -0,0 +1,66 @@ |
|||||||
|
import type { TableType } from 'nocodb-sdk' |
||||||
|
import { UITypes } from 'nocodb-sdk' |
||||||
|
import { useProject } from './useProject' |
||||||
|
import { useNuxtApp } from '#app' |
||||||
|
import { useToast } from 'vue-toastification' |
||||||
|
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils' |
||||||
|
|
||||||
|
export function useTableCreate(onTableCreate?: (tableMeta: TableType) => void) { |
||||||
|
const table = reactive<{ title: string; table_name: string; columns: string[] }>({ |
||||||
|
title: '', |
||||||
|
table_name: '', |
||||||
|
columns: { |
||||||
|
id: true, |
||||||
|
title: true, |
||||||
|
created_at: true, |
||||||
|
updated_at: true, |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
const { sqlUi, project, tables } = useProject() |
||||||
|
|
||||||
|
const toast = useToast() |
||||||
|
|
||||||
|
const { $api } = useNuxtApp() |
||||||
|
|
||||||
|
const createTable = async () => { |
||||||
|
try { |
||||||
|
if (!sqlUi?.value) return |
||||||
|
const columns = sqlUi?.value?.getNewTableColumns().filter((col) => { |
||||||
|
if (col.column_name === 'id' && table.columns.id_ag) { |
||||||
|
Object.assign(col, sqlUi?.value?.getDataTypeForUiType({ uidt: UITypes.ID }, 'AG')) |
||||||
|
col.dtxp = sqlUi?.value?.getDefaultLengthForDatatype(col.dt) |
||||||
|
col.dtxs = sqlUi?.value?.getDefaultScaleForDatatype(col.dt) |
||||||
|
return true |
||||||
|
} |
||||||
|
return !!table.columns[col.column_name] |
||||||
|
}) |
||||||
|
|
||||||
|
const tableMeta = await $api.dbTable.create(project?.value?.id as string, { |
||||||
|
...table, |
||||||
|
columns, |
||||||
|
}) |
||||||
|
|
||||||
|
onTableCreate?.(tableMeta) |
||||||
|
} catch (e: any) { |
||||||
|
toast.error(await extractSdkResponseErrorMsg(e)) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
watch( |
||||||
|
() => table.title, |
||||||
|
(title) => { |
||||||
|
table.table_name = `${project?.value?.prefix || ''}${title}` |
||||||
|
}, |
||||||
|
) |
||||||
|
|
||||||
|
const generateUniqueTitle = () => { |
||||||
|
let c = 1 |
||||||
|
while (tables?.value?.some((t) => t.title === `Sheet${c}`)) { |
||||||
|
c++ |
||||||
|
} |
||||||
|
table.title = `Sheet${c}` |
||||||
|
} |
||||||
|
|
||||||
|
return { table, createTable, generateUniqueTitle, tables, project } |
||||||
|
} |
||||||
Loading…
Reference in new issue