nocodb/packages/nc-gui/components/project/Table.vue

<template>
  <v-container fluid class="pa-0 ma-0 nc-table-tab" style="height: 100%">
    <v-alert v-if="error" type="error" class="ma-2">
      {{ error }}
    </v-alert>
    <template v-else>
      <v-tabs
        v-model="active"
        :height="relationTabs && relationTabs.length ? 38 : 0"
        class="table-tabs"
        :class="{ 'hidden-tab': !relationTabs || !relationTabs.length }"
        color="pink"
        @change="onTabChange"
      >
        <template v-if="_isUIAllowed('smartSheet')">
          <v-tab v-show="relationTabs && relationTabs.length" class="">
            <v-icon small> mdi-table-edit </v-icon>&nbsp;<span class="caption text-capitalize font-weight-bold">
              {{ nodes.title }}</span
            >
          </v-tab>
          <v-tab-item style="height: 100%">
            <rows-xc-data-table
              ref="tabs7"
              :is-view="isView"
              :is-active="isActive"
              :tab-id="tabId"
              :show-tabs="relationTabs && relationTabs.length"
              :table="nodes.table_name"
              :nodes="nodes"
              :new-table="newTableCopy"
              :mtd-new-table-update="mtdNewTableUpdate"
              :delete-table="deleteTable"
              :is-meta-table="isMetaTable"
            />
          </v-tab-item>
        </template>
      </v-tabs>
    </template>
    <dlgLabelSubmitCancel
      v-if="dialogShow"
      type="error"
      :actions-mtd="deleteTable"
      :dialog-show="dialogShow"
      heading="Click Submit to Delete the Table"
    />
  </v-container>
</template>

<script>
import { mapActions } from 'vuex';
import { UITypes } from 'nocodb-sdk';
import dlgLabelSubmitCancel from '../utils/DlgLabelSubmitCancel';
import { isMetaTable } from '@/helpers/xutils';
import RowsXcDataTable from '~/components/project/spreadsheet/RowsXcDataTable';

export default {
  components: {
    RowsXcDataTable,
    dlgLabelSubmitCancel,
  },
  data() {
    return {
      error: false,
      active: 1,
      newTableCopy: !!this.nodes.newTable,
      dialogShow: false,
      loadIndexList: false,
      loadTriggerList: false,
      loadRelationList: false,
      loadConstraintList: false,
      loadRows: false,
      loadColumnsMock: false,
      relationTabs: [],
      deleteId: null,
    };
  },
  methods: {
    async handleKeyDown(event) {
      const activeTabEleKey = `tabs${this.active}`;
      if (this.$refs[activeTabEleKey] && this.$refs[activeTabEleKey].handleKeyDown) {
        await this.$refs[activeTabEleKey].handleKeyDown(event);
      }
    },
    ...mapActions({
      removeTableTab: 'tabs/removeTableTab',
      loadTablesFromParentTreeNode: 'project/loadTablesFromParentTreeNode',
    }),
    mtdNewTableUpdate(value) {
      this.newTableCopy = value;
    },
    async deleteTable(action = '', id) {
      if (id) {
        this.deleteId = id;
      }
      if (action === 'showDialog') {
        this.dialogShow = true;
      } else if (action === 'hideDialog') {
        this.dialogShow = false;
      } else {
        try {
          const meta = await this.$store.dispatch('meta/ActLoadMeta', { id: this.deleteId });

          const relationColumns = meta.columns.filter(c => c.uidt === UITypes.LinkToAnotherRecord);

          if (relationColumns.length) {
            const refColMsgs = await Promise.all(
              relationColumns.map(async (c, i) => {
                const refMeta = await this.$store.dispatch('meta/ActLoadMeta', {
                  id: c.colOptions.fk_related_model_id,
                });
                return `${i + 1}. ${c.title} is a LinkToAnotherRecord of ${(refMeta && refMeta.title) || c.title}`;
              })
            );
            this.$toast
              .info(
                `<div style="padding:10px 4px">Unable to delete tables because of the following.
                <br><br>${refColMsgs.join('<br>')}<br><br>
                Delete them & try again</div>
            `
              )
              .goAway(10000);
            this.dialogShow = false;
            return;
          }

          await this.$api.dbTable.delete(this.deleteId);

          this.removeTableTab({
            env: this.nodes.env,
            dbAlias: this.nodes.dbAlias,
            table_name: this.nodes.table_name,
          });

          await this.loadTablesFromParentTreeNode({
            _nodes: {
              ...this.nodes,
            },
          });

          this.$store.commit('meta/MutMeta', {
            key: this.nodes.table_name,
            value: null,
          });
          this.$store.commit('meta/MutMeta', {
            key: this.deleteId,
            value: null,
          });
          this.$toast.info(`Deleted table ${this.nodes.title} successfully`).goAway(3000);
        } catch (e) {
          const msg = await this._extractSdkResponseErrorMsg(e);
          this.$toast.error(msg).goAway(3000);
        }
        this.dialogShow = false;
        this.$e('a:table:delete');
      }
    },
    onTabChange() {
      this.$emit('update:hideLogWindows', this.active === 2);
    },
  },
  computed: {
    isMetaTable() {
      return isMetaTable(this.nodes.table_name);
    },
  },
  mounted() {
    this.onTabChange();
  },
  props: {
    nodes: Object,
    hideLogWindows: Boolean,
    tabId: String,
    isActive: Boolean,
    isView: Boolean,
  },
};
</script>

<style scoped>
/*/deep/ .table-tabs > .v-tabs-items {
  border-top: 1px solid #7F828B33;
}*/

/deep/ .scaffoldOnSave .v-input__control {
  margin-top: -2px;
}

.table-tabs,
/deep/ .table-tabs > .v-windows {
  height: 100%;
}

/deep/ .v-window-item {
  height: 100%;
}

.rel-row-parent {
  text-align: center;
  left: 0;
  padding: 2px 3px;
  text-transform: none;
  display: inline-block;
  position: absolute;
  top: 0;
  font-size: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
  color: grey;
}
</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/>.
 *
 */
-->