多维表格
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.

246 lines
7.0 KiB

<template>
<div>
<v-toolbar flat height="42" class="toolbar-border-bottom">
<v-toolbar-title>
<v-breadcrumbs :items="[{
text: nodes.env,
disabled: true,
href: '#'
},{
text: nodes.dbAlias,
disabled: true,
href: '#'
},
{
text: nodes.tn + ' (Webhooks)',
disabled: true,
href: '#'
}]" divider=">" small>
<template v-slot:divider>
<v-icon small color="grey lighten-2">forward</v-icon>
</template>
</v-breadcrumbs>
</v-toolbar-title>
<v-spacer></v-spacer>
<x-btn outlined tooltip="Save Changes"
color="primary"
small
:disabled="loading || !valid || !hook.event"
v-ge="['rows','save']"
@click.prevent="saveHooks">
<v-icon small left>save</v-icon>
Save
</x-btn>
</v-toolbar>
<v-form
v-model="valid"
class="mx-auto"
ref="form"
lazy-validation
>
<v-card>
<v-container fluid>
<v-row>
<v-col cols="6">
<v-radio-group v-model="hook.event" @change="onEventChange">
<template v-slot:default>
<v-simple-table dense>
<template v-slot:default>
<thead>
<tr>
<th></th>
<th>Operation</th>
<th>Event</th>
</tr>
</thead>
<tbody>
<tr v-for="(e,i) in eventList" :key="i"
:class="{'primary lighten-4 black--text': e.value === hook.event}">
<td>
<v-radio :value="e.value"></v-radio>
</td>
<td> {{ e.text[1] }}
</td>
<td> {{ e.text[0] }}
</td>
</tr>
</tbody>
</template>
</v-simple-table>
</template>
</v-radio-group>
<!-- <v-radio-group v-model="hook.event" @change="onEventChage">-->
<!-- <v-radio v-for="(e,i) in eventList" :key="i" :label="e.text" :value="e.v"></v-radio>-->
<!-- </v-radio-group>-->
<!-- <v-select-->
<!-- v-model="hook.event"-->
<!-- :items="['Before','After']"-->
<!-- label="Event"-->
<!-- required-->
<!-- ></v-select>-->
<!-- <v-select-->
<!-- v-model="hook.operation"-->
<!-- :items="['Insert','Update','Delete']"-->
<!-- label="Operation"-->
<!-- required-->
<!-- ></v-select>-->
</v-col>
<v-col cols="6">
<v-card class="">
<v-card-title>Webhook</v-card-title>
<v-card-text>
<v-text-field
:disabled="!hook.event"
v-model="hook.title"
label="Title"
required
:rules="[v => !!v || 'Title Required']"
></v-text-field>
<v-text-field
:disabled="!hook.event"
v-model="hook.url"
label="URL"
required
type="url"
:rules="urlRules"
></v-text-field>
<!-- <v-textarea-->
<!-- v-model="hook.header"-->
<!-- label="Headers"-->
<!-- required-->
<!-- ></v-textarea>-->
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</v-card>
</v-form>
</div>
</template>
<script>
export default {
name: "webhooks",
props: ['nodes'],
data: () => ({
valid: false,
loading: false,
eventList: [
{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']},
],
hook: {},
urlRules: [
v => !v || !v.trim() || /^https?:\/\/.{1,}/.test(v) || 'Not a valid URL',
]
}),
methods: {
async onEventChange() {
this.loading = true;
this.hook = {
...this.hook,
url: '',
title: this.hook.event.join('.')
}
const result = (await this.$store.dispatch('sqlMgr/ActSqlOp', [
{
env: this.nodes.env,
dbAlias: this.nodes.dbAlias,
}, 'tableXcHooksGet', {
tn: this.nodes.tn,
data: {
event: this.hook.event[0],
operation: this.hook.event[1],
}
}
]));
const hooksDetails = result && result.data.list && result.data.list[0];
if (hooksDetails) {
this.hook = {
...this.hook,
url: hooksDetails.url,
title: hooksDetails.title
}
}
this.loading = false;
},
async saveHooks() {
if (!this.valid || !this.hook.event) {
return;
}
this.loading = true;
let hooksDetails = (await this.$store.dispatch('sqlMgr/ActSqlOp', [
{
env: this.nodes.env,
dbAlias: this.nodes.dbAlias,
}, 'tableXcHooksSet', {
tn: this.nodes.tn,
data: {
...this.hook,
event: this.hook.event[0],
operation: this.hook.event[1],
}
}
])).data;
this.$toast.success('Webhook details updated successfully').goAway(3000);
this.loading = false;
}
}
}
</script>
<style scoped>
/*tr.selected{*/
/* background: #8ceaf6;*/
/*}*/
</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/>.
*
*/
-->