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

<template>
  <div class="">
    <v-card style="">
      <v-toolbar height="42" flat class="toolbar-border-bottom">
        <v-toolbar-title>
          <v-breadcrumbs
            :items="[
              {
                text: nodes.env,
                disabled: true,
                href: '#',
              },
              {
                text: nodes.dbAlias,
                disabled: true,
                href: '#',
              },
              {
                text: nodes.table_name + ' (mocks)',
                disabled: true,
                href: '#',
              },
            ]"
            divider=">"
            small
          >
            <template #divider>
              <v-icon small> forward </v-icon>
            </template>
          </v-breadcrumbs>
        </v-toolbar-title>
        <v-spacer />
        <x-btn
          v-ge="['mocks', 'load']"
          outlined
          tooltip="Reload Rows"
          small
          color="primary"
          class="primary"
          @click="loadColumnList"
        >
          <v-icon small left> refresh </v-icon>
          <!-- Reload -->
          {{ $t('general.reload') }}
        </x-btn>

        <x-btn
          v-ge="['mocks', 'load-faker-fns']"
          outlined
          tooltip="Load suggested faker function based on field name"
          color="primary"
          class="primary"
          small
          @click="mapFieldWithSuggestedFakerFn"
        >
          <v-icon left small> mdi-function </v-icon>
          Predict Faker Functions
        </x-btn>

        <x-btn
          v-ge="['mocks', 'save']"
          outlined
          :tooltip="$t('tooltip.saveChanges')"
          color="success"
          class="success"
          small
          :disabled="disableSaveButton"
          @click="saveFakeFunctions"
        >
          <v-icon small left> save </v-icon>
          <!-- Save -->
          {{ $t('general.save') }}
        </x-btn>
      </v-toolbar>

      <v-data-table dense :headers="colsHeader" :items="cols" class="column-table">
        <template #item="{ item }">
          <tr>
            <td>
              {{ item.column_name }}<span class="font-weight-thin"> - {{ item.dt }}</span>
            </td>
            <td>
              <span v-if="item.pk" class="font-weight-thin"> (Primary Key)</span>
              <span v-else-if="item.rcn" class="font-weight-thin"> (Foreign Key)</span>
              <v-autocomplete
                v-else
                v-model="item.fakerFunction"
                v-ge="['mocks', 'change-faker-fn']"
                :items="fakerFunctionList | filterFakerList(item.dt)"
                item-text="name"
                item-value="value"
                @change="disableSaveButton = false"
              >
                <template #selection="{ item }">
                  <div class="body-2">
                    {{ item.name }}<span v-if="item.type" class="font-weight-thin"> &nbsp;- {{ item.type }}</span>
                  </div>
                </template>

                <template #item="data">
                  <v-list-item-content>
                    <v-list-item-title v-html="data.item.name" />
                    <v-list-item-subtitle v-html="data.item.group" />
                  </v-list-item-content>
                </template>
              </v-autocomplete>
            </td>
          </tr>
        </template>
      </v-data-table>
    </v-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import fakerFunctionList from '../../../helpers/fakerFunctionList';
import dataTypeMapping from '../../../helpers/findDataTypeMapping';
const levenshtein = require('fast-levenshtein');

export default {
  components: {},
  data() {
    return {
      colsHeader: [{ text: 'Column Name' }, { text: 'Mapper Function' }],
      cols: [],
      primaryKeys: [],
      fakerFunctionList,
      disableSaveButton: true,
    };
  },
  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.saveFakeFunctions();
          break;
        case 'true_l':
          await this.loadColumnList();
          break;
        // case 'true_n' :
        //   this.addColumn();
        //   break;
        // case 'true_d' :
        //   await this.deleteTable('showDialog');
        //   break;
      }
    },

    async loadColumnList() {
      this.disableSaveButton = true;
      const columnsList = await this.client.fakerColumnsList({
        table_name: this.nodes.table_name,
        seedsFolder: this.seedsFolder,
      });
      console.log(columnsList);
      this.cols = columnsList.data.list;

      // columnsList.data.list.map(({cn, dt, ai, pk}) => {
      //   if (pk) this.primaryKeys.push(cn);
      //   return {
      //     text: cn, value: cn, type: dt, ai
      //   }
      // })
    },
    mapFieldWithSuggestedFakerFn() {
      this.cols = this.cols.map(col => {
        let suggestion = null;
        let lScore = Infinity;
        const nativeType = dataTypeMapping(col.dt);
        fakerFunctionList.forEach((fakerFn, i) => {
          if (nativeType !== 'string' && nativeType !== fakerFn.type) {
            return;
          }

          if (i) {
            const ls = levenshtein.get(col.column_name.toLowerCase(), fakerFn.name.toLowerCase());
            if (lScore > ls) {
              lScore = ls;
              suggestion = fakerFn;
            }
          } else {
            suggestion = fakerFn;
            lScore = levenshtein.get(col.column_name.toLowerCase(), fakerFn.name.toLowerCase());
          }
        });

        if (lScore < 3) {
          this.disableSaveButton = false;
          return { ...col, fakerFunction: suggestion.value };
        }
        return col;
      });
    },
    async saveFakeFunctions() {
      try {
        await this.client.fakerColumnsCreate({
          fakerColumns: this.cols,
          seedsFolder: this.seedsFolder,
          table_name: this.nodes.table_name,
        });
      } catch (e) {
        this.$toast.error('Saving changes to faker functions failed').goAway(3000);
        throw e;
      }
    },
  },
  computed: {
    ...mapGetters({ sqlMgr: 'sqlMgr/sqlMgr' }),
  },
  beforeCreated() {},
  watch: {},
  async created() {
    try {
      this.seedsFolder = this.sqlMgr.projectGetFolder({
        env: this.nodes.env,
        dbAlias: this.nodes.dbAlias,
      });
      this.client = await this.sqlMgr.projectGetSqlClient({
        env: this.nodes.env,
        dbAlias: this.nodes.dbAlias,
      });
      await this.loadColumnList();
    } catch (e) {
      console.log(e);
      this.$toast.error('Loading columns and faker functions failed').goAway(3000);
      throw e;
    }
  },
  mounted() {},
  beforeDestroy() {},
  destroy() {},
  directives: {},
  filters: {
    filterFakerList(list, type) {
      const nativeType = dataTypeMapping(type);
      return list.filter(item => nativeType === 'string' || nativeType === item.type);
    },
  },
  validate({ params }) {
    return true;
  },
  head() {
    return {};
  },
  props: ['nodes', 'newTable', 'mtdNewTableUpdate', 'deleteTable'],
};
</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/>.
 *
 */
-->