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

<template>
  <div>
    <v-progress-linear
      v-show="loading"
      color="success"
      indeterminate
      absolute
      height="4"
    />

    <v-tabs
      v-model="tab"
      style="height: 100%"
      height="40"
    >
      <v-tab
        v-for="(n,i) in terminals"
        :key="n"
        class="caption"
      >
        <span @dblclick="dblClick"> Local ({{ i + 1 }})</span>
        <v-icon
          v-if="terminals.length > 1"
          class="ml-2 grey--text text--lighten-1"
          small
          @click.native.stop="closeTerminal(i)"
        >
          mdi-close
        </v-icon>
      </v-tab>

      <x-icon class="mx-2" small @click="addTerminal">
        mdi-plus
      </x-icon>
      <span v-shortkey="['meta','t']" @shortkey="addTerminal" />
      <span v-if="isModal" v-shortkey="['meta','w']" @shortkey="terminals.length && closeTerminal(tab)" />

      <div v-if="!isDocker" class="flex-grow-1 d-flex text-right pr-4 justify-end ">
        <x-icon
          v-if="_isWindows"
          icon-class="mr-4"
          :disabled="loading"
          tooltip="Set-ExecutionPolicy"
          color="success success"
          @click="setExecutionPolicy()"
        >
          mdi-consolidate
        </x-icon>

        <template v-if="!isNoApis">
          <x-icon
            v-if="isDashboard && !isGraphql"
            icon-class="mr-4"
            :disabled="loading"
            tooltip="Generate REST Code (^ ⇧ M)"
            color="success success"
            @click="runXcGenApisRest()"
          >
            {{ isTsEnabled ? 'mdi-language-typescript' : 'mdi-language-javascript' }}
          </x-icon>
          <span v-if="isDashboard" v-shortkey="['ctrl','shift','m']" @shortkey="runXcGenApisRest()" />

          <x-icon
            v-if="isDashboard && isGraphql"
            icon-class="mr-4"
            :disabled="loading"
            color="pink pink"
            tooltip="Generate GraphQL Code (^ ⇧ Q)"
            @click="runXcGenApisGql()"
          >
            {{ isTsEnabled ? 'mdi-language-typescript' : 'mdi-language-javascript' }}
          </x-icon>

          <span v-if="isDashboard" v-shortkey="['ctrl','shift','q']" @shortkey="runXcGenApisGql()" />

          <x-icon
            v-if="isDashboard && showDelete"
            icon-class="mr-4"
            :disabled="loading"
            color="error error"
            tooltip="Delete all code (^ ⇧ C)"
            @click="codeClear()"
          >
            mdi-delete-variant
          </x-icon>
          <span v-if="isDashboard" v-shortkey="['ctrl','shift','c']" @shortkey="codeClear()" />

          <x-icon
            v-if="isDashboard"
            icon-class="mr-4"
            :disabled="loading"
            size="30"
            color="error error"
            tooltip="npm install (^ ⇧ I)"
            @click="runNpmInstall()"
          >
            mdi-npm
          </x-icon>
          <span v-if="isDashboard" v-shortkey="['ctrl','shift','i']" @shortkey="runNpmInstall()" />

          <x-icon
            color="success success"
            :disabled="loading"
            tooltip="Run Command (^ ⇧ R)"
            icon-class="mr-2"
            size="29"
            @click="runScript"
          >
            mdi-play
          </x-icon>
          <span v-if="isDashboard" v-shortkey="['ctrl','shift','r']" @shortkey="runScript()" />

          <x-icon
            color="red red"
            :disabled="loading"
            tooltip="Stop Command (^ ⇧ S)"
            icon-class="mr-2"
            @click="stopScript"
          >
            mdi-stop
          </x-icon>
          <span v-if="isDashboard" v-shortkey="['ctrl','shift','s']" @shortkey="stopScript()" />

          <x-icon
            color="info info"
            :disabled="loading"
            tooltip="Clear (^ ⇧ E)"
            icon-class="mr-2"
            @click="clearScript"
          >
            mdi-notification-clear-all
          </x-icon>
          <span v-if="isDashboard" v-shortkey="['ctrl','shift','e']" @shortkey="stopScript()" />
          <v-tooltip bottom>
            <template #activator="{on}">
              <img height="24" class="mt-2 mr-2 pointer" src="~/assets/img/brand/favicon-64.png" v-on="on" @click="installCliTool">
            </template>
            Installs NocoDB CLI<br>( npm install -g xc-cli )
          </v-tooltip>

          <div class="flex-shrink-1 ">
            <v-select
              v-model="selectedScript"
              height="32"
              class="caption envs"
              dense
              :items="scripts"
              placeholder="package.json"
              single-line
              outlined
            >
              <template #selection="{item}">
                <span
                  style="text-transform: uppercase"
                >{{ item }}</span>&nbsp; <span class="grey--text">(env)</span>
              </template>

              <!--            <template v-slot:prepend-outer>-->
              <!--       -->
              <!--            </template>-->
            </v-select>
          </div>
        </template>
      </div>

      <v-tab-item
        v-for="i in terminals"
        :key="i"
      >
        <div :key="i" ref="term" style="height:100%" class="terminal-window" />
      </v-tab-item>
    </v-tabs>
  </div>
</template>

<script>
import { Terminal } from 'xterm'
import { FitAddon } from 'xterm-addon-fit'
import { WebLinksAddon } from 'xterm-addon-web-links'
import { mapGetters } from 'vuex'
import XIcon from './global/XIcon'

export default {
  name: 'XTerm',
  components: { XIcon },
  props: {
    isModal: {
      default: false,
      type: Boolean
    }
  },
  computed: {
    ...mapGetters({
      currentProjectFolder: 'project/currentProjectFolder',
      sqlMgr: 'sqlMgr/sqlMgr',
      phql: 'project/GtrProjectIsGraphql',
      isNoApis: 'project/GtrProjectIsNoApis',
      isDocker: 'project/GtrIsDocker'
    }),
    isTsEnabled() {
      return false // return process.env.TS_ENABLED;
    }
  },
  data() {
    return {
      tab: 0,
      terminals: [Date.now()],
      termRef: [],
      scripts: [],
      selectedScript: null,
      loading: false,
      showDelete: false
    }
  },
  async mounted() {
    // try {
    //   const packageData = await jsonfile.readFileSync(path.join(this.currentProjectFolder, 'package.json'));
    //   this.scripts = Object.keys(packageData.scripts);
    // } catch (e) {
    //   console.log('package============', e)
    // }

    setTimeout(() => {
      this.initTerminal(this.$refs.term[0], 0)
    }, 200)
  },
  destroyed() {
    let l = this.terminals.length
    while (l--) { this.closeTerminal(l) }
  },
  methods: {
    dblClick() {
    },
    async setExecutionPolicy() {
    },
    async handleKeyDown(event) {
    },

    async codeGenerateMvc() {
      this.loading = true
    },
    async codeGenerateMvcGql() {
      this.loading = true
    },
    async codeClear() {
      this.loading = true
    },

    runXcGenApisRest() {
    },

    runXcGenApisGql() {
    },

    runNpmInstall() {
      const { client } = this.termRef[this.tab]
      client.emit('req', '\n\rnpm install;\n\r')
    },

    runScript() {
    },
    stopScript() {
    },
    clearScript() {
    },
    installCliTool() {
    },
    addTerminal() {
      if (this.terminals.length > 4) {
        this.$toast.info('Only 5 terminals can be opened').goAway()
        return
      }
      this.terminals.push(Date.now())
      this.tab = this.terminals.length - 1
      this.$nextTick(() => {
        this.initTerminal(this.$refs.term[this.terminals.length - 1], this.terminals.length - 1)
      })
    },

    initTerminal($el, index) {
      try {
        // todo: change to hostname
        const client = require('socket.io-client')('http://localhost:8081')

        const term = new Terminal({
          theme: {
            background: 'black',
            foreground: 'green'
          }
        })

        term.loadAddon(new WebLinksAddon((e, url) => {
          e.preventDefault()
        }))
        // //
        // //
        const fitAddon = new FitAddon()
        term.loadAddon(fitAddon)
        // //
        term.open($el)
        // //
        fitAddon.fit()
        term.onData((data) => {
          client.emit('req', data)
        })

        client.on('res', (data) => {
          term.write(`${data}`)
        })
        term.focus()
        //
        this.termRef[index] = {
          term,
          client
        }
      } catch (e) {
        this.$toast.error('Error opening the terminal\n\nPlease use your system terminal').goAway(5000)
      }
    },
    closeTerminal(index) {
      try {
        const proc = this.termRef.splice(index, 1)[0]
        proc.term.dispose()
        proc.client.off()
        proc.client.disconnect()
        this.terminals.splice(index, 1)
      } catch (e) {
        console.log(e)
        throw e
      }
    }
  }
}
</script>

<style scoped>
  /deep/ .v-tabs-items {
    height: calc(100% - 40px);
  }

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

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

  /deep/ .terminal-window > div {
    padding: 0 5px;
  }
</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/>.
 *
 */
-->