nocodb/packages/nc-gui/components/project/tableTabs/triggers.vue

<template>
  <v-row class="pa-0 ma-0">

    <v-overlay absolute v-if="isMetaTable">
      <v-alert type="info">Meta tables are not editable</v-alert>
    </v-overlay>

    <v-col cols="12 pa-0">
      <v-card class="elevation-0">
        <v-toolbar flat height="42" class="toolbar-border-bottom">
          <v-toolbar-title>
            <v-breadcrumbs :items="[{
          text: this.nodes.env,
          disabled: true,
          href: '#'
        },{
          text: this.nodes.dbAlias,
          disabled: true,
          href: '#'
        },
        {
          text: this.nodes._tn + ' (table)',
          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="Load Triggers"
                 small
                 class="primary"
                 color="primary"
                 @click="loadTriggerList"
                 v-ge="['triggers','load']"
          >
            <v-icon small left>refresh</v-icon>
            Reload
          </x-btn>
          <x-btn outlined tooltip="Create New Trigger"
                 small
                 @click="showTriggerDlg()"
                 class="primary"
                 color="primary"
                 icon="mdi-plus"
                 v-ge="['triggers','new']"
          >New Trigger
          </x-btn>
          <x-btn outlined tooltip="Delete Table"
                 small
                 icon="mdi-delete-outline"
                 @click="deleteTable('showDialog')"
                 class="error text-right"
                 color="error "
                 v-ge="['triggers','delete']"
          >Delete Table
          </x-btn
          >


        </v-toolbar
        >
        <v-skeleton-loader type="table" v-if="loading"></v-skeleton-loader>
        <v-data-table
          v-else
          dense
          :headers="headers"
          :items="triggers"
          footer-props.items-per-page-options="30"
        >
          <template v-slot:item="props">
            <tr>
              <td>{{ props.item.trigger }}</td>
              <td>{{ props.item.event }}</td>
              <td>{{ props.item.timing }}</td>
              <td>{{ props.item.statement }}</td>
              <td>
                <div>
                  <x-icon color="primary" @click="showTriggerDlg(props.item)"
                          small
                          v-ge="['triggers','edit']"
                  >mdi-square-edit-outline
                  </x-icon>
                  <x-icon
                    small
                    color="error"
                    @click="deleteTrigger('showDialog', props.item)"
                    v-ge="['triggers','delete']"
                  >mdi-delete-forever
                  </x-icon>
                </div>
              </td>
            </tr>
          </template>
        </v-data-table>
      </v-card>
      <triggerAddEditDlg
        v-if="dialogShow"
        :nodes="nodes"
        :triggerObject="selectedTrigger"
        :newTrigger="!selectedTrigger.trigger"
        :dialogShow="dialogShow"
        :mtdDialogSubmit="mtdTriggerDlgSubmit"
        :mtdDialogCancel="mtdTriggerDlgCancel"
      />
      <dlgLabelSubmitCancel
        type="error"
        v-if="showTriggerDeleteDialog"
        :dialogShow="showTriggerDeleteDialog"
        :actionsMtd="deleteTrigger"
        heading="Click Submit to Delete the Trigger"
      />
    </v-col>
  </v-row>
</template>

<script>
import {mapGetters, mapActions} from "vuex";

import triggerAddEditDlg from "../dlgs/dlgTriggerAddEdit";
import dlgLabelSubmitCancel from "../../utils/dlgLabelSubmitCancel";

export default {
  components: {triggerAddEditDlg, dlgLabelSubmitCancel},
  data() {
    return {
      loading: false,
      showTriggerDeleteDialog: false,
      triggers: [],
      headers: [
        {
          text: "Trigger Name",
          sortable: false
        },
        {text: "Event", sortable: false},
        {text: "Timing", sortable: false},
        {text: "Statement", sortable: false},
        {text: "", sortable: false}
      ],
      dialogShow: false,
      selectedTrigger: null
    };
  },
  methods: {
    async handleKeyDown({metaKey, key, altKey, shiftKey, ctrlKey}) {
      console.log(metaKey, key, altKey, shiftKey, ctrlKey)
      // cmd + s -> save
      // cmd + l -> reload
      // cmd + n -> new
      // cmd + d -> delete
      // cmd + enter -> send api

      switch ([metaKey, key].join('_')) {
        // case 'true_s' :
        //   await this.applyChanges();
        //   break;
        case 'true_l' :
          await this.loadTriggerList();
          break;
        case 'true_n' :
          this.showTriggerDlg();
          break;
        case 'true_d' :
          await this.deleteTable('showDialog');
          break;

      }
    },

    async loadTriggerList() {
      this.loading = true;
      try {
        this.$store.commit('notification/MutToggleProgressBar', true);
        if (this.newTable) {
          this.$store.commit('notification/MutToggleProgressBar', false);
          return;
        }
        // const client = await this.sqlMgr.projectGetSqlClient({
        //   env: this.nodes.env,
        //   dbAlias: this.nodes.dbAlias
        // });
        // const result = await client.triggerList({
        //   tn: this.nodes.tn
        // });

        //
        // const result = await this.sqlMgr.sqlOp({
        //   env: this.nodes.env,
        //   dbAlias: this.nodes.dbAlias
        // }, 'triggerList', {
        //   tn: this.nodes.tn
        // })

        const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
          env: this.nodes.env,
          dbAlias: this.nodes.dbAlias
        }, 'triggerList', {
          tn: this.nodes.tn
        }])

        console.log("triggers", result.data.list);
        this.triggers = result.data.list;
      } catch (e) {
        console.log(e);
      } finally {
        this.$store.commit('notification/MutToggleProgressBar', false);
      }
      this.loading = false;

    },
    showTriggerDlg(trigger) {
      if (trigger) this.selectedTrigger = trigger;
      else this.selectedTrigger = {};
      this.dialogShow = true;
    },
    async mtdTriggerDlgSubmit(triggerObject, newTrigger) {
      try {
        // const client = await this.sqlMgr.projectGetSqlClient({
        //   env: this.nodes.env,
        //   dbAlias: this.nodes.dbAlias
        // });
        if (newTrigger) {


          let result = await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
            {
              env: this.nodes.env,
              dbAlias: this.nodes.dbAlias
            },
            "triggerCreate",
            triggerObject
          ]);
          console.log("triggerCreate result: ", result);
          this.$toast.success('Trigger created successfully').goAway(3000);
        } else {

          let result = await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
            {
              env: this.nodes.env,
              dbAlias: this.nodes.dbAlias
            },
            "triggerUpdate",
            {
              ...triggerObject,
              oldStatement: this.selectedTrigger.statement
            }]);

          console.log("triggerUpdate result: ", result);
          this.$toast.success('Trigger updated successfully').goAway(3000);
        }

        await this.loadTriggerList();
        this.selectedTrigger = null;
        this.dialogShow = false;
      } catch (error) {
        console.error("triggerCreate error: ", error);
      }
    },
    mtdTriggerDlgCancel() {
      this.dialogShow = false;
      this.selectedTrigger = null;
    },
    async deleteTrigger(action = "", trigger) {
      if (action === "showDialog") {
        this.showTriggerDeleteDialog = true;
        this.selectedTriggerForDelete = trigger;
      } else if (action === "hideDialog") {
        this.showTriggerDeleteDialog = false;
        this.selectedTriggerForDelete = null;
      } else {

        let result = await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
          {
            env: this.nodes.env,
            dbAlias: this.nodes.dbAlias
          },
          "triggerDelete",
          {
            ...this.selectedTriggerForDelete,
            tn: this.nodes.tn,
            oldStatement: this.selectedTriggerForDelete.statement
          }]);

        console.log("triggerDelete result ", result);
        await this.loadTriggerList();
        this.showTriggerDeleteDialog = false;
        this.selectedTriggerForDelete = null;

        this.$toast.success('Trigger deleted successfully').goAway(3000);
      }
    }
  },
  computed: {...mapGetters({sqlMgr: "sqlMgr/sqlMgr"})},

  beforeCreated() {
  },
  created() {
    this.loadTriggerList();
  },
  mounted() {
  },
  beforeDestroy() {
    console.log("triggerlist before destroy");
  },
  destroy() {
  },
  validate({params}) {
    return true;
  },
  head() {
    return {};
  },
  props: ["nodes", "newTable", "deleteTable", 'isMetaTable'],
  watch: {},
  directives: {}
};
</script>

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