Browse Source

Merge pull request #3260 from nocodb/fix/gui-v2-webhook-layout

fix(gui-v2): webhook layout
pull/3254/head
Raju Udava 2 years ago committed by GitHub
parent
commit
9071b2d2f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 14
      packages/nc-gui-v2/components/webhook/Drawer.vue
  2. 8
      packages/nc-gui-v2/components/webhook/Editor.vue
  3. 16
      packages/nc-gui-v2/components/webhook/List.vue

14
packages/nc-gui-v2/components/webhook/Drawer.vue

@ -28,17 +28,19 @@ async function editHook(hook: Record<string, any>) {
:closable="false"
placement="right"
width="700px"
:body-style="{ background: 'rgba(67, 81, 232, 0.05)', padding: '50px' }"
:body-style="{ background: 'rgba(67, 81, 232, 0.05)', padding: '0px 0px', overflow: 'hidden' }"
@keydown.esc="vModel = false"
>
<div>
<a-layout class="">
<a-layout-content class="px-10 py-5 scrollbar-thin-primary">
<WebhookEditor v-if="editOrAdd" ref="webhookEditorRef" @back-to-list="editOrAdd = false" />
<WebhookList v-else @edit="editHook" @add="editOrAdd = true" />
</div>
<div class="self-center flex flex-col 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">
</a-layout-content>
<a-layout-footer class="!bg-white flex">
<a-button v-t="['e:hiring']" class="mx-auto mb-4" href="https://angel.co/company/nocodb" target="_blank" size="large">
🚀 We are Hiring! 🚀
</a-button>
</div>
</a-layout-footer>
</a-layout>
</a-drawer>
</template>

8
packages/nc-gui-v2/components/webhook/Editor.vue

@ -383,14 +383,14 @@ onMounted(async () => {
</script>
<template>
<div class="mb-4">
<div class="float-left mt-2">
<div class="flex items-center">
<div class="flex">
<div class="flex-1">
<div class="flex items-center mt-2">
<MdiArrowLeftBold 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">
<div>
<a-button class="mr-3" size="large" @click="testWebhook">
<div class="flex items-center">
<MdiGestureDoubleTap class="mr-2" />

16
packages/nc-gui-v2/components/webhook/List.vue

@ -49,20 +49,16 @@ onMounted(() => {
</script>
<template>
<div class="h-5/6">
<div class="mb-4">
<div class="">
<div class="mb-2">
<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 max-h-[75vh] overflow-y-auto scrollbar-thin-primary"
>
<div v-if="hooks.length" class="">
<a-list item-layout="horizontal" :data-source="hooks" class="cursor-pointer scrollbar-thin-primary">
<template #renderItem="{ item, index }">
<a-list-item class="p-2" @click="emit('edit', item)">
<a-list-item-meta>
@ -93,8 +89,10 @@ onMounted(() => {
</template>
</a-list>
</div>
<div v-else class="p-4 bg-gray-100 text-gray-600">
<div v-else class="min-h-[75vh]">
<div class="p-4 bg-gray-100 text-gray-600">
Webhooks list is empty, create new webhook by clicking 'Create webhook' button.
</div>
</div>
</div>
</template>

Loading…
Cancel
Save