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"> |
||||
import { computed, inject, onMounted, ref } from '#imports' |
||||
import { inject, onMounted, ref } from '#imports' |
||||
|
||||
interface Props { |
||||
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 root = ref<HTMLInputElement>() |
||||
|
||||
const localState = computed({ |
||||
get: () => value, |
||||
set: (val) => emit('update:modelValue', val), |
||||
}) |
||||
const vModel = useVModel(props, 'modelValue', emits) |
||||
|
||||
onMounted(() => { |
||||
root.value?.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() |
||||
}, |
||||
} */ |
||||
const onSetRef = (el: HTMLInputElement) => { |
||||
el.focus() |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<input v-if="editEnabled" ref="root" v-model="localState" /> |
||||
<span v-else>{{ localState }}</span> |
||||
<!-- v-on="parentListeners" /> --> |
||||
<input v-if="editEnabled" :ref="onSetRef" v-model="vModel" class="h-full w-full outline-none" /> |
||||
<span v-else>{{ vModel }}</span> |
||||
</template> |
||||
|
||||
<style scoped> |
||||
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/>. |
||||
* |
||||
*/ |
||||
--> |
||||
<style scoped></style> |
||||
|
||||
@ -1,11 +1,15 @@
|
||||
<script setup lang="ts"> |
||||
import MdiAddIcon from '~icons/mdi/plus-outline' |
||||
import { inject, ref } from '#imports' |
||||
import { RightSidebarInj } from '~/context' |
||||
|
||||
const emits = defineEmits(['addRow']) |
||||
|
||||
const sidebarOpen = inject(RightSidebarInj, ref(true)) |
||||
</script> |
||||
|
||||
<template> |
||||
<a-tooltip placement="left"> |
||||
<a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'"> |
||||
<template #title> {{ $t('activity.addRow') }} </template> |
||||
|
||||
<div class="nc-sidebar-right-item hover:after:bg-primary/75 group"> |
||||
@ -1,15 +1,17 @@
|
||||
<script setup lang="ts"> |
||||
import { inject, useTable } from '#imports' |
||||
import { MetaInj } from '~/context' |
||||
import { inject, ref, useTable } from '#imports' |
||||
import { MetaInj, RightSidebarInj } from '~/context' |
||||
import MdiDeleteIcon from '~icons/mdi/delete-outline' |
||||
|
||||
const meta = inject(MetaInj) |
||||
|
||||
const { deleteTable } = useTable() |
||||
|
||||
const sidebarOpen = inject(RightSidebarInj, ref(true)) |
||||
</script> |
||||
|
||||
<template> |
||||
<a-tooltip placement="left"> |
||||
<a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'"> |
||||
<template #title> {{ $t('activity.deleteTable') }} </template> |
||||
|
||||
<div class="nc-sidebar-right-item hover:after:bg-red-500 group"> |
||||
@ -1,12 +1,15 @@
|
||||
<script setup lang="ts"> |
||||
import { ReloadViewDataHookInj } from '~/context' |
||||
import { ReloadViewDataHookInj, RightSidebarInj } from '~/context' |
||||
import MdiReloadIcon from '~icons/mdi/reload' |
||||
import { inject, ref } from '#imports' |
||||
|
||||
const reloadTri = inject(ReloadViewDataHookInj) |
||||
|
||||
const sidebarOpen = inject(RightSidebarInj, ref(true)) |
||||
</script> |
||||
|
||||
<template> |
||||
<a-tooltip placement="left"> |
||||
<a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'"> |
||||
<template #title> {{ $t('general.reload') }} </template> |
||||
|
||||
<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> |
||||
<div class="flex gap-2"> |
||||
<slot name="start" /> |
||||
|
||||
<SmartsheetToolbarLockMenu /> |
||||
<LockMenu /> |
||||
|
||||
<div class="dot" /> |
||||
|
||||
<SmartsheetToolbarReload /> |
||||
<Reload /> |
||||
|
||||
<div class="dot" /> |
||||
|
||||
<SmartsheetToolbarAddRow /> |
||||
<AddRow /> |
||||
|
||||
<div class="dot" /> |
||||
|
||||
<SmartsheetToolbarDeleteTable /> |
||||
<DeleteTable /> |
||||
|
||||
<div class="dot" /> |
||||
|
||||
<SmartsheetToolbarToggleDrawer /> |
||||
<ToggleDrawer /> |
||||
|
||||
<slot name="end" /> |
||||
</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"> |
||||
const { value } = defineProps<{ value?: any }>() |
||||
const value = inject('value') |
||||
</script> |
||||
|
||||
<template> |
||||
<span> |
||||
<span class="text-center pl-3"> |
||||
{{ value }} |
||||
</span> |
||||
</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