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

<script setup lang="ts">
import { MetaInj } from '~/context'
import MdiHookIcon from '~icons/mdi/hook'
import MdiDeleteIcon from '~icons/mdi/delete'

const emit = defineEmits(['edit'])
const hooks = ref([])
const meta = inject(MetaInj)
</script>

<template>
  <div class="h-5/6">
    <a-typography-title class="inline" :level="4">{{ meta.title }} : Webhooks </a-typography-title>
    <a-button class="float-right" type="primary" size="large" @click="emit('add')">
      <!-- TODO: i18n -->
      Create Webhook
    </a-button>
    <a-divider />
    <div v-if="hooks.length">
      <a-list item-layout="horizontal" :data-source="hooks" class="cursor-pointer bg-gray-100 pl-5 pr-5 pt-2 pb-2">
        <template #renderItem="{ item }">
          <a-list-item @click="emit('edit', item)">
            <a-list-item-meta :description="item.event">
              <template #title>
                {{ item.title }}
              </template>
              <template #avatar>
                <div class="mt-4">
                  <MdiHookIcon />
                </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">
                  <MdiDeleteIcon />
                </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>