nocodb/packages/nc-gui/components/project/projectMetadata/DisableOrEnableModels.vue

<template>
  <div>
    <v-tabs v-model="dbsTab" color="x-active" height="30">
      <!--      <v-tab href="#xc-project-meta">-->
      <!--        <v-icon icon x-small class="mr-2">-->
      <!--          mdi-file-table-box-multiple-outline-->
      <!--        </v-icon>-->
      <!--        <span class="caption text-capitalize nc-exp-imp-metadata">-->
      <!--          &lt;!&ndash; Export/Import Metadata &ndash;&gt;-->
      <!--          {{ $t('title.exportImportMeta') }}-->
      <!--        </span>-->
      <!--      </v-tab>-->
      <v-tab-item value="xc-project-meta">
        <div class="d-flex justify-center d-100">
          <xc-meta />
        </div>
      </v-tab-item>

      <template v-for="(db, i) in bases">
        <v-tab :key="db.id + i" :href="'#' + db.id + 'meta'" class="text-capitalize caption nc-meta-mgmt-metadata-tab">
          <!--          {{ db.connection.database | extractDbName }} {{ db.id }} -->
          <!-- Metadata -->
          {{ $t('title.metadata') }}
        </v-tab>
        <v-tab-item :key="db.id + 't' + i" :value="db.id + 'meta'">
          <metaDiffSync :nodes="nodes" :db="db" :db-id="db.id" />
        </v-tab-item>
        <template v-if="uiacl">
          <v-tab :key="db.id + 'acl'" :href="'#' + db.id + 'acl'" class="text-capitalize caption nc-ui-acl-tab">
            <!--UI Access Control-->
            {{ $t('title.uiACL') }}
          </v-tab>
          <v-tab-item :key="db.id + 'aclt'" :value="db.id + 'acl'">
            <v-tabs color="x-active" height="28">
              <v-tab class="text-capitalize caption">
                <!-- Tables -->
                {{ $t('objects.tables') }}
              </v-tab>
              <v-tab-item>
                <toggle-table-ui-acl :nodes="nodes" :db="db" :db-alias="db.id" />
              </v-tab-item>
            </v-tabs>
          </v-tab-item>
        </template>
      </template>
    </v-tabs>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import XcMeta from '../settings/XcMeta';
import { isMetaTable } from '@/helpers/xutils';
import metaDiffSync from '~/components/project/projectMetadata/sync/MetaDiffSync';
import ToggleTableUiAcl from '~/components/project/projectMetadata/uiAcl/ToggleTableUIAcl';

export default {
  name: 'DisableOrEnableModels',
  components: {
    ToggleTableUiAcl,
    metaDiffSync,
    XcMeta,
  },
  props: ['nodes'],
  data: () => ({
    uiacl: true,
    edited: false,
    models: null,
    updating: false,
    // dbsTab: 0,
    filter: '',
    tables: null,
  }),
  async mounted() {},
  methods: {},
  computed: {
    bases() {
      return this.$store.state.project.project && this.$store.state.project.project.bases;
    },
    dbsTab: {
      set(tab) {
        if (!tab) {
          // return this.$router.push({
          //   query: {}
          // })
          return;
        }
        // eslint-disable-next-line camelcase
        const nested_1 = tab;
        this.$router.push({
          query: {
            ...this.$route.query,
            nested_1,
          },
        });
      },
      get() {
        return this.$route.query.nested_1;
      },
    },

    ...mapGetters({
      dbAliasList: 'project/GtrDbAliasList',
    }),
    enableCountText() {
      return this.models ? `${this.models.filter(m => m.enabled).length}/${this.models.length} enabled` : '';
    },

    isNewOrDeletedModelFound() {
      return this.comparedModelList.some(m => m.new || m.deleted);
    },
    comparedModelList() {
      const res = [];
      const getPriority = item => {
        if (item.new) {
          return 2;
        }
        if (item.deleted) {
          return 1;
        }
        return 0;
      };
      if (this.tables && this.models) {
        const tables = this.tables.filter(t => !isMetaTable(t.table_name)).map(t => t.table_name);
        res.push(
          ...this.models.map(m => {
            const i = tables.indexOf(m.title);
            if (i === -1) {
              m.deleted = true;
            } else {
              tables.splice(i, 1);
            }
            return m;
          })
        );
        res.push(
          ...tables.map(t => ({
            title: t,
            new: true,
          }))
        );
      }
      res.sort((a, b) => getPriority(b) - getPriority(a));
      return res;
    },
  },
  filters: {
    extractDbName(name) {
      return (name || '').split('/').pop();
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep {
  .v-tabs-bar {
    border-bottom: solid 1px #7f828b33;
  }

  .v-tab {
    border-right: 1px solid #7f828b33;
  }
}
</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/>.
 *
 */
-->