nocodb/packages/nc-gui/components/project/dlgs/DlgAddRelation.vue

<template>
  <v-row justify="center">
    <v-dialog
      :value="dialogShow"
      persistent
      max-width="600"
      @keydown.esc="mtdDialogCancel()"
      @keydown.enter="mtdDialogSubmit(relation)"
    >
      <template #activator="{ on }">
        <p class="hidden" v-on="on" />
      </template>
      <v-card class="elevation-20">
        <v-card-title class="grey darken-2 subheading" style="height: 30px">
          <!-- {{ this.heading }} for {{ this.column.column_name }} -->
        </v-card-title>
        <v-form v-model="valid">
          <v-card-text class="pt-4 pl-4">
            <p class="headline">{{ heading }} for {{ column.column_name }}</p>
            <v-row justify="space-between">
              <v-col class="pa-1" cols="6">
                <v-autocomplete
                  v-model="relation.parentTable"
                  :loading="isRefTablesLoading"
                  label="Select Reference Table"
                  :full-width="false"
                  :items="refTables"
                  item-text="table_name"
                  required
                  dense
                />
              </v-col>
              <v-col class="pa-1" cols="6">
                <v-autocomplete
                  ref="parentColumnRef"
                  v-model="relation.parentColumn"
                  :loading="isRefColumnsLoading"
                  label="Select Reference Column"
                  :full-width="false"
                  :items="refColumns"
                  item-text="column_name"
                  required
                  dense
                />
              </v-col>
            </v-row>

            <v-row justify="space-between">
              <v-col class="pa-1" cols="6">
                <v-autocomplete
                  v-model="relation.onUpdate"
                  :label="$t('labels.onUpdate')"
                  :full-width="false"
                  :items="onUpdateDeleteOptions"
                  required
                  dense
                  :disabled="relation.type !== 'real'"
                />
              </v-col>
              <v-col class="pa-1" cols="6">
                <v-autocomplete
                  v-model="relation.onDelete"
                  :label="$t('labels.onDelete')"
                  :full-width="false"
                  :items="onUpdateDeleteOptions"
                  required
                  dense
                  :disabled="relation.type !== 'real'"
                />
              </v-col>
            </v-row>

            <v-row>
              <v-col class="pa-1">
                <v-checkbox
                  v-model="relation.type"
                  false-value="real"
                  true-value="virtual"
                  label="Virtual Relation"
                  :full-width="false"
                  required
                  class="mt-0"
                  dense
                />
              </v-col>
            </v-row>
          </v-card-text>
          <v-divider />

          <v-card-actions class="pa-4">
            <v-spacer />
            <v-btn class="" @click="mtdDialogCancel()">
              <!-- Cancel -->
              {{ $t('general.cancel') }}
            </v-btn>
            <v-btn class="primary" :disabled="!valid" @click="mtdDialogSubmit(relation)">
              <u class="shortkey">S</u>ubmit
            </v-btn>
          </v-card-actions>
        </v-form>
      </v-card>
    </v-dialog>
  </v-row>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  data() {
    return {
      valid: false,
      onUpdateDeleteOptions: ['NO ACTION', 'CASCADE', 'RESTRICT', 'SET NULL', 'SET DEFAULT'],
      relation: {
        childColumn: this.column.column_name,
        childTable: this.nodes.table_name,
        parentTable: this.column.rtn || '',
        parentColumn: this.column.rcn || '',
        onDelete: 'CASCADE',
        onUpdate: 'CASCADE',
        updateRelation: !!this.column.rtn,
        type: 'real',
      },
      isRefTablesLoading: false,
      isRefColumnsLoading: false,
      refColumns: [],
      refTables: [],
      relationColumnChanged: false,
    };
  },
  methods: {
    async loadColumnList() {
      if (!this.relation.parentTable) {
        return;
      }
      this.isRefColumnsLoading = true;
      // const client = await this.sqlMgr.projectGetSqlClient({
      //   env: this.nodes.env,
      //   dbAlias: this.nodes.dbAlias
      // });
      // const result = await client.columnList({
      //   table_name: this.relation.parentTable
      // });

      // const result = await this.sqlMgr.sqlOp({
      //   env: this.nodes.env,
      //   dbAlias: this.nodes.dbAlias
      // }, 'columnList', {   table_name: this.relation.parentTable})

      const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [
        {
          env: this.nodes.env,
          dbAlias: this.nodes.dbAlias,
        },
        'columnList',
        { table_name: this.relation.parentTable },
      ]);

      const columns = result.data.list;
      this.refColumns = JSON.parse(JSON.stringify(columns));

      if (this.relation.updateRelation && !this.relationColumnChanged) {
        // only first time when editing add defaault value to this field
        this.relation.parentColumn = this.column.rcn;
        this.relationColumnChanged = true;
      } else {
        // find pk column and assign to parentColumn
        const pkKeyColumns = this.refColumns.filter(el => el.pk);
        this.relation.parentColumn = (pkKeyColumns[0] || {}).column_name || '';
      }

      this.isRefColumnsLoading = false;
    },
    async loadTablesList() {
      this.isRefTablesLoading = true;
      // const client = await this.sqlMgr.projectGetSqlClient({
      //   env: this.nodes.env,
      //   dbAlias: this.nodes.dbAlias
      // });
      // const result = await client.tableList();

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

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

      const tables = result.data.list;

      this.refTables = JSON.parse(JSON.stringify(tables));
      this.isRefTablesLoading = false;
    },
  },
  computed: { ...mapGetters({ sqlMgr: 'sqlMgr/sqlMgr' }) },

  beforeCreated() {},
  watch: {
    'relation.parentTable'() {
      this.loadColumnList();
    },
  },
  async created() {
    await this.loadTablesList();

    if (!this.relation.parentTable) {
      let table_name = (this.refTables[0] || {}).table_name || '';
      if (table_name === 'nc_evolutions' || table_name === '_evolutions') {
        table_name = (this.refTables[1] || {}).table_name || '';
      }
      this.relation.parentTable = table_name;
    }
    if (this.column.rtn) {
      this.relation.parentTable = this.column.rtn;
    }
  },
  mounted() {},
  beforeDestroy() {},
  destroy() {},
  directives: {},
  components: {},
  validate({ params }) {
    return true;
  },
  head() {
    return {};
  },
  props: ['nodes', 'column', 'heading', 'dialogShow', 'mtdDialogCancel', 'mtdDialogSubmit'],
};
</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/>.
 *
 */
-->