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

<template>
  <v-container class="pa-0 ma-0 h-100" fluid>
    <v-tabs :key="!nodes.newView || created ? 'old' : 'new'" height="28" class="view-tab" color="pink">

      <!--    <v-tab class="caption text-capitalize">

            <v-icon small>mdi-table-column</v-icon>&nbsp;
            Columns
          </v-tab>
          <v-tab-item>
            <ViewColumns
              :nodes="nodes"
            ></ViewColumns>
          </v-tab-item>

          <template v-if="!isMvc && !isMetaTable">
            <template v-if="isRest">
              <v-tab ripple >
                <v-icon small>mdi-nodejs</v-icon>&nbsp;
                <span class="caption  text-capitalize">APIs</span>
              </v-tab>


              <v-tab-item :transition="false">

                <logic-rest
                  ref="tabs0"
                  :nodes="nodes"
                  :newTable="newTableCopy"
                />
              </v-tab-item>
            </template>
            <template v-if="isGraphql">

              <v-tab ripple class="divider" style="border-right:1px solid grey;">
                <v-icon small>mdi-graphql</v-icon>&nbsp;
                <span class="caption  text-capitalize">Schema & Resolvers</span>
              </v-tab>


              <v-tab-item :transition="false">

                <logic-gql
                  ref="tabs0"
                  is-view
                  :nodes="nodes"
                  :newTable="newTableCopy"
                />
              </v-tab-item>
            </template>
            <template v-if="isGrpc">
              <v-tab ripple class="divider" style="border-right:1px solid grey;">
                <v-icon small>mdi-nodejs</v-icon>&nbsp;
                <span class="caption text-capitalize">APIs</span>
              </v-tab>


              <v-tab-item :transition="false">

                <logic-grpc
                  ref="tabs0"
                  :nodes="nodes"
                  :newTable="newTableCopy"
                />
              </v-tab-item>
            </template>
          </template>-->


      <!--      <v-tab class="caption text-capitalize">
              <v-icon small>mdi-shield-edit-outline</v-icon>&nbsp;
              ACL
            </v-tab>
            <v-tab-item>
              <table-acl
                :nodes="nodes"
              />
            </v-tab-item>-->
      <template v-if="!nodes.newView || created">
        <v-tab class="caption text-capitalize">
          <v-icon small>mdi-table-row</v-icon>&nbsp;
          Spreadsheet
        </v-tab>
        <v-tab-item>
          <!--        <rows-->
          <!--          ref="tabs3"-->
          <!--          :nodes="nodes"-->
          <!--        />-->
          <spreadsheet
            class="h-100"
            :nodes="nodes"
          ></spreadsheet>
        </v-tab-item>
      </template>


      <template v-if="_isUIAllowed('view-create')">
        <v-tab class="caption text-capitalize">

          <v-icon small>mdi-database-edit</v-icon>&nbsp;
          SQL
        </v-tab>
        <v-tab-item>
          <view-query
            @created="created = true"
            :nodes="nodes"></view-query>
        </v-tab-item>
      </template>

    </v-tabs>
  </v-container>
</template>

<script>

import ViewQuery from "./viewTabs/viewQuery";
import ViewColumns from "./viewTabs/viewColumns";
import {mapGetters} from "vuex";
import Spreadsheet from "@/components/project/viewTabs/viewSpreadsheet";

export default {
  components: {Spreadsheet, ViewColumns, ViewQuery},
  props: ["nodes"],
  data: () => ({created: false, newTableCopy: null, isMetaTable: null}),
  computed: {
    ...mapGetters({
      sqlMgr: "sqlMgr/sqlMgr",
      isGraphql: "project/GtrProjectIsGraphql",
      isNoApis: "project/GtrProjectIsNoApis",
      isMvc: 'project/GtrProjectIsMvc',
      isDocker: 'project/GtrProjectIsDocker',
      isPackage: 'project/GtrProjectIsPackage',
      isTs: 'project/GtrProjectIsTs',
      isRest: 'project/GtrProjectIsRest',
      isGrpc: 'project/GtrProjectIsGrpc',
    }),
  }
};
</script>
<style scoped>
.view-tab {
  height: 100%;
}

/deep/ .view-tab .v-window {
  height: calc(100% - 28px);
}

/deep/ .view-tab .v-window > .v-window__container {
  height: 100%;
}

/deep/ .v-window-item {
  height: 100%
}</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/>.
 *
 */
-->