nocodb/packages/nc-gui/components/environment.vue

<!--eslint-disable-->

<template>
  <v-dialog
    v-model="dialogShow"
    width="60%"
  >
    <v-tabs
      v-model="activeTab"
      height="32"
    >
      <v-tabs-slider />

      <v-tab
        v-for="env in envs"
        :key="env"
        :to="`#${env}`"
      >
        {{ env }}
      </v-tab>
      <div style="padding:0;margin-top:3px;margin-left:20px">
        <x-btn
          v-if="!isDashboard"
          small
          tooltip="Add a new environment"
          outlined
          @click="addNewEnvDialog = true"
        >
          Add Env
        </x-btn>
      </div>

      <v-spacer />
      <div style="padding:0;margin-left:20px">
        <x-btn
          v-if="!isDashboard && activeTab !== 'global'"
          small
          color="error"
          tooltip="Deletes environment(without confirmation dialog)"
          outlined
          @click="deleteEnvironemt(activeTab)"
        >
          Delete '{{ activeTab }}' Env
        </x-btn>
        <x-btn
          outlined
          color="primary"
          :tooltip="`Save all the environemtns`"
          btn.class="ma-1"
          small
          @click="saveEnvironment(env)"
        >
          <v-icon
            small
          >
            save
          </v-icon> &nbsp;Save All
        </x-btn>
      </div>
      <v-tab-item
        v-for="(env) in envs"
        :key="env"
        :value="env"
      >
        <div class="d-flex" style="height: 100%; width:100%">
          <v-simple-table class="ignore-height-style params-table my-4" style="width: 100%" dense>
            <template #default>
              <thead>
                <tr>
                  <th class="text-left body-2" width="5%" />
                  <th class="text-left body-2 grey--text" width="40%">
                    Key
                  </th>
                  <th class="text-left body-2 grey--text" width="40%">
                    Value
                  </th>
                  <th class="text-left body-2" width="5%" />
                </tr>
              </thead>
              <draggable v-if="value" v-model="envValues[env].data" tag="tbody">
                <tr v-for="(item,i) in envValues[env].data" :key="i">
                  <td>
                    <v-checkbox
                      v-model="item.enabled"
                      small
                      class="mt-0"
                      color="primary lighten-1"
                      hide-details
                      dense
                    />
                  </td>
                  <td>
                    <v-text-field
                      v-model="item.key"
                      class="body-2"
                      :disabled="!item.enabled"
                      placeholder="Key"
                      hide-details
                      single-line
                      dense
                      @input="handleInput(env,i,item.key)"
                    />
                  </td>
                  <td style="height: auto">
                    <v-text-field
                      v-model="item.value"
                      class="body-2"
                      :disabled="!item.enabled"
                      :placeholder="'Value'"
                      hide-details
                      single-line
                      dense
                    />
                  </td>
                  <td class="">
                    <x-icon
                      tooltip="Delete environment key"
                      color="error grey"
                      small
                      @click="removeKey(env,i)"
                    >
                      mdi-delete-outline
                    </x-icon>
                  </td>
                </tr>
              </draggable>
            </template>
          </v-simple-table>
        </div>
      </v-tab-item>
    </v-tabs>
    <v-dialog v-model="addNewEnvDialog" max-width="500">
      <v-card>
        <v-card-title class="headline">
          New Environment
        </v-card-title>

        <v-card-text>
          <v-text-field v-model="newEnvName" hide-details outlined dense label="Enter environment name" />
        </v-card-text>

        <v-card-actions>
          <v-spacer />

          <v-btn
            color="green darken-1"
            text
            @click="addNewEnvDialog = false"
          >
            <!-- Cancel -->
            {{ $t('general.cancel') }}
          </v-btn>

          <v-btn
            color="green darken-1"
            text
            @click="addNewEnvironment(newEnvName)"
          >
            Create
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-dialog>
</template>

<script>
/* eslint-disable */

import draggable from 'vuedraggable'
//
// const {promisify, fs, path, config, Handlebars} = require("electron").remote.require(
//   "./libs"
// );
export default {
  name: 'Environment',
  directives: {},
  components: {
    draggable
  },
  validate ({ params }) {
    return true
  },
  props: {
    value: Boolean,
    env: String
  },
  data () {
    return {
      addNewEnvDialog: false,
      newEnvName: '',
      activeTab: 'global',
      envValues: {}
    }
  },
  head () {
    return {}
  },
  computed: {
    dialogShow: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    },
    envs () {
      if (this.isDashboard) {
        return ['global', ...(Object.keys(this.$store.getters['project/GtrProjectJson'].envs))]
      } else {
        return ['global', ...(Object.keys(this.$store.state.project.defaultProject.envs))]
      }
    }
  },
  watch: {
    env (env) {
      this.activeTab = env
    }
  },
  created () {
    this.activeTab = this.env
    this.loadEnvironments()

    // listen for active project change
    this.$store.watch(
      state => state.project.unserializedList,
      (unserializedList) => {
        if (unserializedList.envs) { this.loadEnvironments() }
      }
    )
  },
  mounted () {
  },
  beforeDestroy () {
  },
  methods: {
    async addNewEnvironment (name) {
      this.addNewEnvDialog = false
      if (!this.isDashboard) {
        const projectJsonPath = config.electron.defaultProjectPath
        const freshProjectObj = JSON.parse(JSON.stringify(this.$store.state.project.defaultProject))
        freshProjectObj.envs[name] = { apiClient: { data: [] } }
        fs.writeFileSync(
          projectJsonPath,
          JSON.stringify(freshProjectObj, null, 2),
          'utf-8')
        this.$store.commit('project/setDefaultProjectJson', JSON.parse(JSON.stringify(freshProjectObj)))
        this.loadEnvironments()
      }
    },
    deleteEnvironemt (env) {
      if (!this.isDashboard) {
        const projectJsonPath = config.electron.defaultProjectPath
        const freshProjectObj = JSON.parse(JSON.stringify(this.$store.state.project.defaultProject))
        delete freshProjectObj.envs[env]
        fs.writeFileSync(
          projectJsonPath,
          JSON.stringify(freshProjectObj, null, 2),
          'utf-8')
        this.$store.commit('project/setDefaultProjectJson', JSON.parse(JSON.stringify(freshProjectObj)))
        this.loadEnvironments()
      }
    },
    // add extra column if last row is filled
    handleInput (env, i, key) {
      if (i === this.envValues[env].data.length - 1 && key.length) {
        this.envValues[env].data = [...this.envValues[env].data, { key: '', value: '', enabled: true }]
      }
    },
    // remove environment key
    removeKey (env, i) {
      this.envValues[env].data.splice(i, 1)
      if (!this.envValues[env].data.length) {
        this.envValues[env].data = [{ key: '', value: '', enabled: true }]
      }
    },
    // filter empty environments and save project JSON
    async saveEnvironmentFile (projectJsonPath, freshProject) {
      this.envs.forEach((env) => {
        let envObj = {}
        if (!this.envValues[env] || !this.envValues[env].data) { this.$set(this.envValues, env, { data: [] }) } else { envObj = this.envValues[env] }
        if (env === 'global') {
          freshProject.apiClient.data = envObj.data.filter(o => o.key.trim())
        } else {
          freshProject.envs[env].apiClient.data = envObj.data.filter(o => o.key.trim())
        }
      })

      fs.writeFileSync(
        projectJsonPath,
        JSON.stringify(freshProject, null, 2),
        'utf-8')
    },
    async saveEnvironment (env) {
      console.log(env, this.envValues[env])
      try {
        let projectJsonPath, freshProjectObj

        // make a copy of project json and get it's file path
        // save the changes made to project json and update in state
        if (this.isDashboard) {
          projectJsonPath = path.join(this.$store.getters['project/currentProjectFolder'], 'config.xc.json')
          freshProjectObj = JSON.parse(fs.readFileSync(projectJsonPath))
          await this.saveEnvironmentFile(projectJsonPath, freshProjectObj)
          this.$store.commit('project/setProjectJson', JSON.parse(JSON.stringify(freshProjectObj), (key, value) => {
            return typeof value === 'string' ? Handlebars.compile(value, { noEscape: true })(process.env) : value
          }))
        } else {
          projectJsonPath = config.electron.defaultProjectPath
          freshProjectObj = JSON.parse(JSON.stringify(this.$store.state.project.defaultProject))
          await this.saveEnvironmentFile(projectJsonPath, freshProjectObj)
          this.$store.commit('project/setDefaultProjectJson', JSON.parse(JSON.stringify(freshProjectObj)))
        }

        this.$toast.success('Environment saved successfully').goAway(3000)
      } catch (e) {
        console.log(e)
        this.$toast.error('Invalid JSON failed to save environment').goAway(3000)
      }
    },
    // load current environment values for active project from state
    loadEnvironments () {
      let projectJsonObj
      if (this.isDashboard) {
        projectJsonObj = this.$store.getters['project/GtrProjectJson']
      } else {
        projectJsonObj = this.$store.state.project.defaultProject
      }

      // extract environment object (key-value pair)
      this.envValues = JSON.parse(JSON.stringify({
        global: projectJsonObj.apiClient,
        ...(projectJsonObj.envs
          ? Object.entries(projectJsonObj.envs)
            .reduce((obj, [name, env]) => ({ [name]: env.apiClient, ...obj }), {})
          : [])
      }))

      // add extra empty environment to show in form
      for (const env in this.envValues) {
        this.envValues[env].data.push({ key: '', value: '', enabled: true })
      }
    }
  },
  beforeCreated () {
  },
  destroy () {
  }
}
</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/>.
 *
 */
-->