多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

121 lines
3.0 KiB

<template>
<div>
<v-card-title>
<span class="text-capitalize mr-1">{{ meta.title }}</span> : Webhooks
<v-spacer />
<v-btn
tooltip="Save"
class="primary"
@click.prevent="$emit('add')"
>
Create Webhook
</v-btn>
</v-card-title>
<v-divider />
<div v-if="hooks " class="pa-6">
<template v-if=" hooks.length">
<v-card v-for="(hook,i) in hooks" :key="hook.id" max-width="500px" class="mx-auto elevation-0 backgroundColor nc-hook mb-4" @click="$emit('edit', hook)">
<div class="d-flex">
<v-icon class="ml-4">
mdi-hook
</v-icon>
<div class="pa-4 flex-grow-1">
<div class="d-flex">
<h4 class="nc-text mb-2">
{{ hook.title }}
</h4>
<v-spacer />
<!--Notify Via-->
<span class="caption textColor1--text mt-1">{{
$t("labels.notifyVia")
}} : {{ hook.notification && hook.notification.type }}
</span>
</div>
<div class="d-flex">
<!--Title-->
<span class="caption textColor1--text text-uppercase"> {{ hook.event }} {{
hook.operation
}}</span>
</div>
</div>
<v-icon class="nc-hook-delete-icon" small @click.stop="deleteHook(hook,i)">
mdi-delete-outline
</v-icon>
</div>
</v-card>
</template>
<div v-else class="pa-4 backgroundColor caption textColor--text text--lighten-3">
Webhooks list is empty, create new webhook by clicking 'Create webhook' button.
</div>
</div>
</div>
</template>
<script>
import { calculateDiff } from '~/helpers'
export default {
name: 'WebhookList',
props: { meta: Object },
data: () => ({
hooks: null, loading: false
}),
mounted() {
this.loadHooksList()
},
methods: {
calculateDiff,
async loadHooksList() {
this.key++
this.loading = true
const hooks = await this.$api.dbTableWebhook.list(this.meta.id)
this.hooks = hooks.list.map((h) => {
h.notification = h.notification && JSON.parse(h.notification)
return h
})
this.loading = false
},
async deleteHook(item, i) {
try {
if (item.id) {
await this.$api.dbTableWebhook.delete(item.id)
this.hooks.splice(i, 1)
} else {
this.hooks.splice(i, 1)
}
this.$toast.success('Hook deleted successfully').goAway(3000)
if (!this.hooks.length) {
this.hook = null
}
} catch (e) {
this.$toast.error(e.message).goAway(3000)
}
this.$e('a:webhook:delete')
}
}
}
</script>
<style scoped lang="scss">
.nc-hook {
position: relative;
.nc-hook-delete-icon {
position: absolute;
opacity: 0;
transition: .3s opacity;
right: 16px;
bottom: 16px
}
&:hover .nc-hook-delete-icon {
opacity: 1;
}
}
</style>