nocodb/packages/nc-gui/components/project/tableTabs/webhooks-old.vue

<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/>.
 *
 */
-->