Xmysql is now NocoDB (An Open Source Airtable alternative)

packages/nc-gui/components/project/sqlClient.vue

@@ -0,0 +1,867 @@
+<template>
+  <v-container class="ma-0 pa-0 sql-editor" fluid style="height: 100%">
+    <!--    <v-toolbar class="elevation-0 search-toolbar pa-0" :height="48">-->
+    <!--      <v-autocomplete-->
+    <!--        ref="search"-->
+    <!--        v-model="selectedQueryItem"-->
+    <!--        @change="changedSelectedQuery(selectedQueryItem)"-->
+    <!--        clearable-->
+    <!--        item-text="query"-->
+    <!--        outlined-->
+    <!--        solo-inverted-->
+    <!--        dense-->
+    <!--        single-line-->
+    <!--        hide-details-->
+    <!--        open-on-clear-->
+    <!--        label="Search queries by words ( ⌘ P )"-->
+    <!--        :items="$store.state.sqlClient.list"-->
+    <!--        :filter="queryFilter"-->
+    <!--        prepend-inner-icon="search"-->
+    <!--        no-data-text="No queries in the search history"-->
+    <!--      >-->
+    <!--        <template v-slot:item="{item:query,index:i}">-->
+
+    <!--          <v-hover v-slot:default="{ hover }">-->
+    <!--            <div style="width: 100%">-->
+    <!--              <v-btn class="pl-0 ml-0 " small text :tooltip="query.type"-->
+    <!--              >-->
+    <!--                <b :class="query.typeColor + '&#45;&#45;text'">-->
+    <!--                  <v-icon class="mx-0 ml-n2" :color="query.response.status === 0 ? 'success' : 'error'">-->
+    <!--                    mdi-circle-small-->
+    <!--                  </v-icon>-->
+    <!--                  <span>{{query.type}}</span>-->
+    <!--                </b>-->
+
+    <!--              </v-btn>-->
+
+    <!--              <span class="caption grey&#45;&#45;text ml-2" v-if="query.timeTaken">Query took {{query.timeTaken}} Seconds</span>-->
+    <!--              <div class="float-right">-->
+
+    <!--                <span v-if="query.createdAt" class="caption grey&#45;&#45;text">{{dateToHowManyAgo(query.createdAt)}}</span>-->
+    <!--                <v-btn text primary small class="caption grey&#45;&#45;text"-->
+    <!--                       v-if="query.query.length > 422"-->
+    <!--                       @click.stop="expanded = expanded === i ? -1 : i">...More-->
+    <!--                </v-btn>-->
+    <!--                <v-btn small text class=" " @click.prevent.stop="queryDeleteFromHistory(query)">-->
+    <!--                  <v-icon small color="warning">mdi-delete-outline</v-icon>-->
+    <!--                </v-btn>-->
+
+    <!--                <v-btn text primary small @click="copyAndExecute(query)">-->
+    <!--                  <v-icon color="success">mdi-play</v-icon>-->
+    <!--                </v-btn>-->
+
+    <!--              </div>-->
+    <!--              <div>-->
+    <!--                <v-hover v-slot:default="{ hover }">-->
+    <!--                  <p class="pa-1"-->
+    <!--                     :class="{'white&#45;&#45;text' : hover, 'grey&#45;&#45;text' : !hover}"-->
+    <!--                     style="white-space: normal;cursor: pointer">-->
+    <!--                    {{expanded === i ? query.query : query.query.substr(0,442)}}</p>-->
+    <!--                </v-hover>-->
+    <!--              </div>-->
+    <!--            </div>-->
+    <!--          </v-hover>-->
+    <!--        </template>-->
+    <!--      </v-autocomplete>-->
+
+    <!--    </v-toolbar>-->
+
+
+    <splitpanes style="height:calc(100%); " class="xc-theme">
+      <pane v-if="showsqlTvs" :size="showsqlTvs ? 25 : 0" :max-size="showsqlTvs ? 50 : 0" style="overflow: auto">
+        <div style="width:100%;height:100%" v-if="showsqlTvs">
+          <v-row class="pa-0 ma-0 pa-2 pl-2 d-block">
+            <x-icon class="mr-2 cursor-pointer" @click="openNewCollection('/')" color="primary"
+                    tooltip="Create New SQL Collection">mdi-folder-plus-outline
+            </x-icon>
+
+            <x-icon class="mr-2 cursor-pointer" @click="openSqlFileCollection" color="primary"
+                    tooltip="Open SQL Collection">mdi-folder-open-outline
+            </x-icon>
+
+            <span class="caption float-right warning--text mt-1" style="font-style: italic">
+              SQL Editor is in<v-icon small color="warning">mdi-alpha</v-icon>
+            </span>
+
+          </v-row>
+          <v-divider></v-divider>
+
+          <v-expansion-panels accordion focusable v-model="expandedPanel">
+            <v-expansion-panel
+              v-for="(tv,i) in sqlTvs"
+              :key="i">
+              <v-expansion-panel-header hide-actions>
+                <template v-slot:default="{open}">
+                  <div class="d-flex">
+
+                    <v-icon color="">{{open ? 'mdi-menu-down' : 'mdi-menu-right' }}</v-icon>
+                    <v-icon small color="grey" class="ml-1 mr-2">mdi-folder</v-icon>
+
+                    <span
+                      class="body-2 flex-grow-1">{{$store.getters['sqlClient/GtrCurrentSqlFilePaths'][i].fileName}}</span>
+
+
+                    <x-icon color="white grey" class="float-right mr-3" small
+                            @click="toggle[i]=true,x = $event.clientX,y = $event.clientY"
+                            @click.stop="">
+                      mdi-dots-horizontal
+                    </x-icon>
+
+                    <recursive-menu v-model="toggle[i]"
+                                    :position-x="x"
+                                    :position-y="y"
+                                    :items="{
+                                      'Add Folder':'add-folder',
+                                      'Reveal in Folder':'reveal-in-folder',
+                                      'Delete Collection':'delete-collection',
+                                      'Refresh Collection':'refresh-collection'
+                                    }"
+                                    @click="ctxMenuClickHandler($event,i)">
+                    </recursive-menu>
+
+
+                  </div>
+                </template>
+              </v-expansion-panel-header>
+              <v-expansion-panel-content>
+
+                <vue-tree-list
+                  class="body-2 sql-query-treeview px-1 pt-2"
+                  @click="tvNodeOnClick"
+                  @change-name="tvNodeRename"
+                  @delete-node="tvNodeDelete"
+                  @add-node="onAddNode"
+                  v-if="sqlTvs[i]"
+                  :model="tv"
+                  default-tree-node-name="new node"
+                  default-leaf-node-name="new leaf"
+                  v-bind:default-expanded="false">
+
+                  <span slot="leafNodeIcon"></span>
+                  <v-icon slot="treeNodeIcon" small color="grey" class="mr-1">mdi-folder-star</v-icon>
+
+                  <v-icon slot="addTreeNode" small>mdi-folder-plus</v-icon>
+                  <v-icon slot="addLeafNode" small>mdi-file-plus</v-icon>
+                  <v-icon slot="editNode" small class="mt-n1">mdi-file-edit</v-icon>
+                  <v-icon slot="delNode" small>mdi-delete</v-icon>
+                  <template v-slot:extraLeafNode>
+                    <v-icon small>mdi-delete</v-icon>
+                  </template>
+                  <template v-slot:label="{item}">
+                    <v-icon v-if="item.isLeaf" small class="mr-1"
+                            :color="item.response && item.response.status === 0 ? 'success' : 'error'">
+                      mdi-bookmark-outline
+                    </v-icon>
+                    {{item.name}}
+                  </template>
+                </vue-tree-list>
+              </v-expansion-panel-content>
+            </v-expansion-panel>
+          </v-expansion-panels>
+
+        </div>
+      </pane>
+      <pane style="overflow: auto" :size="showsqlTvs ? 75 :100">
+        <div style="position: relative;height: 100%;min-height: 200px">
+          <v-tabs v-model="tab" style="height: 100%" dense
+                  height="38" class="sql-editor-tab">
+            <v-tab v-for="(c,i) in editors" :key="i">
+              <template v-if="c.type==='file'">{{c.fileName}}
+                <v-icon small class="ml-2" @click.prevent.stop="fileClose('showDialog',i)">close</v-icon>
+              </template>
+              <template v-else> Query - {{i + 1}}</template>
+            </v-tab>
+            <v-tabs-items style="height: calc(100% - 38px)" v-model="tab">
+              <v-tab-item v-for="(c,i) in editors" :key="i" style="height: 100%">
+                <div class="d-flex" style="height: 100%; position: relative">
+
+                  <div style="" class="text-center flex-shrink-1 d-flex flex-column">
+
+                    <x-icon tooltip="Execute Query (⌘ ↵)" icon-class="mx-2 mt-3 elevation-1"
+                            @click="runSelectedSqlCode"
+                            color="success success">mdi-play
+                    </x-icon>
+
+                    <x-icon tooltip="Execute Query (⌘ ⌥ ↵)" icon-class="mx-2 mt-3 elevation-1" @click="runAllSqlCode"
+                            color="info info">mdi-play
+                    </x-icon>
+                    <x-icon tooltip="Bookmark Query (⌘ B)"
+                            icon-class="mx-2 mt-3 elevation-1 py-1"
+                            color="amber amber"
+                            @click="bookmarkQuery" small>
+                      mdi-star
+                    </x-icon>
+                    <x-icon :tooltip="showsqlTvs?'Close Sql Collection( ⌘ K )':'Open Sql Collection( ⌘ K )'"
+                            icon-class="mx-2 mt-3 elevation-1 py-1"
+                            :color="showsqlTvs?'amber amber':'amber amber'"
+                            @click="showSqlCollectionToggle" small>
+                      mdi-folder-star
+                    </x-icon>
+
+                    <x-icon tooltip="Open New File (⌘ O)" icon-class="mx-2 mt-3 elevation-1 py-1"
+                            color="primary blue-grey "
+                            @click="openFile"
+                            small>
+                      mdi-file
+                    </x-icon>
+                    <x-icon tooltip="Save Editor Contents (⌘ S)" icon-class="mx-2 mt-3 elevation-1 py-1"
+                            color="primary blue-grey "
+                            @click="fileSave(editors[tab])" small>save
+                    </x-icon>
+
+                    <x-icon tooltip="Clear Editor (⌘ N)" icon-class="mx-2 mt-3 elevation-1 py-1" @click="editorClear"
+                            color="error blue-grey "
+                            small>
+                      mdi-close-box
+                    </x-icon>
+                  </div>
+                  <div class="flex-grow-1" style="overflow:auto;height:100%">
+                    <MonacoSqlEditor
+                      @execute="runSelectedSqlCode"
+                      @bookmark="bookmarkQuery"
+                      @searchHistory=" $refs.search.$el.querySelector('input').click()"
+                      @toggleBookmark="showSqlCollectionToggle"
+                      @saveFile="fileSave(editors[tab])"
+                      @openFile="openFile"
+                      @runAll="runAllSqlCode"
+                      @clearEditor="editorClear"
+                      :tables="tableList"
+                      :columnNames="tableColumnList"
+                      :ref="`editor-${i}`"
+                      :code.sync="editors[i].code"
+                      :columnNameCbk="columnNameCbk"
+                      cssStyle="height:100%"
+                    />
+                  </div>
+                </div>
+              </v-tab-item>
+            </v-tabs-items>
+          </v-tabs>
+        </div>
+      </pane>
+    </splitpanes>
+
+    <dlgLabelSubmitCancel
+      type="primary"
+      v-if="closeFileDlg"
+      :dialogShow="closeFileDlg"
+      :actionsMtd="fileClose"
+      heading="Save changes ?"
+    />
+
+  </v-container>
+
+
+</template>
+
+<script>
+  // Todo: handling resize bar when hidden
+
+
+  import sqlRightClickOptions from '../../helpers/sqlRightClickOptions'
+  import dlgLabelSubmitCancel from "../utils/dlgLabelSubmitCancel.vue";
+  import {mapGetters, mapActions} from "vuex";
+  import {SqlUI} from '../../helpers/SqlUiFactory';
+  import {VueTreeList, Tree, TreeNode} from 'vue-tree-list'
+  import {Splitpanes, Pane} from 'splitpanes'
+
+
+  // const {app, dialog, path, fs, shell, FileCollection} = require("electron").remote.require(
+  //   "./libs"
+  // );
+
+
+  import Utils from '../../helpers/Utils';
+
+  import MonacoSqlEditor from "../monaco/MonacoSqlEditor";
+
+  export default {
+    components: {
+      MonacoSqlEditor,
+      dlgLabelSubmitCancel,
+      VueTreeList,
+      Splitpanes, Pane
+    },
+    data() {
+      return {
+        expandedPanel: null,
+        toggle: {},
+        tableList: null,
+        tableColumnList: {},
+        data: new Tree([
+          {
+            name: 'Node 1',
+            id: 1,
+            pid: 0,
+            dragDisabled: true,
+            addTreeNodeDisabled: true,
+            addLeafNodeDisabled: true,
+            editNodeDisabled: true,
+            delNodeDisabled: true,
+            children: [
+              {
+                name: 'Node 1-2',
+                id: 2,
+                isLeaf: true,
+                pid: 1
+              }
+            ]
+          },
+          {
+            name: 'Node 2',
+            id: 3,
+            pid: 0,
+            disabled: true
+          },
+          {
+            name: 'Node 3',
+            id: 4,
+            pid: 0
+          }
+        ]),
+        opened: [],
+
+        sqlTvs: [],
+        fileCollections: [],
+        filePaths: [],
+
+        showsqlTvs: true,
+        menuVisible: false,
+        x: 0,
+        y: 0,
+        menuItem: null,
+        closeIndex: null,
+        closeFileDlg: false,
+        selectedQueryItem: null,
+        tab: 0,
+        expanded: null,
+        searchQuery: '',
+        searchOverlay: false,
+        folderOverlay: false,
+        loading: false,
+        editors: [],
+        headers1: [
+          {
+            text: 'API Call History',
+            align: 'left',
+            sortable: false,
+            value: 'query',
+            class: 'text-center black'
+          }
+        ],
+      };
+    },
+    computed: {
+      ...mapGetters({
+        sqlMgr: "sqlMgr/sqlMgr",
+        currentProjectFolder: "project/currentProjectFolder",
+        projectQueriesFolder: "project/projectQueriesFolder"
+      })
+    },
+    methods: {
+      dateToHowManyAgo: Utils.dateToHowManyAgo,
+      findById: Utils.findById,
+
+
+      async openNewCollection() {
+
+        try {
+          var toLocalPath = path.join(this.currentProjectFolder, 'server', 'tool', this.nodes.dbAlias, this.projectQueriesFolder);
+
+          var userChosenPath = dialog.showSaveDialog({
+            defaultPath: toLocalPath,
+            filters: [{name: 'JSON', extensions: ['json']}]
+          });
+
+          if (userChosenPath) {
+            console.log(userChosenPath)
+            fs.writeFileSync(userChosenPath, "[]", 'utf-8');
+            let pathObj = {
+              path: userChosenPath,
+              fileName: path.basename(userChosenPath)
+            };
+            this.$store.commit('sqlClient/MutSqlFilePathsAdd', pathObj)
+            await this.loadFileCollection(pathObj);
+          }
+          this.$toast.success('New collection loaded successfully').goAway(5000);
+        } catch (e) {
+          console.log(e);
+          throw e;
+        }
+
+      },
+
+
+      async columnNameCbk(tn) {
+        // tableColumnList
+        //
+        // const client = await this.sqlMgr.projectGetSqlClient({
+        //   env: this.nodes.env,
+        //   dbAlias: this.nodes.dbAlias
+        // });
+        // const result = await client.columnList({tn});
+        // const columns = result.data.list.map(table => table.cn)
+        // this.$set(this.tableColumnList, tn, columns);
+        // return columns;
+        return [];
+      },
+
+      async tvNodeDelete(node) {
+        console.log(node)
+        node.remove()
+        await this.savefileCollections(this.expandedPanel);
+      },
+
+      async tvNodeRename(params) {
+        console.log(params)
+        await this.savefileCollections(this.expandedPanel);
+      },
+
+      async onAddNode(params) {
+        console.log(params)
+        await this.savefileCollections(this.expandedPanel);
+      },
+
+      tvNodeOnClick(params) {
+        console.log(params)
+        if (params.query)
+          this.selectQuery(params)
+      },
+      async openCollectionFolder(pathString) {
+        shell.showItemInFolder(pathString);
+      },
+      tvToObject(index) {
+
+        var vm = this;
+
+        function _dfs(oldNode) {
+          var newNode = {}
+
+          for (var k in oldNode) {
+            if (k !== 'children' && k !== 'parent') {
+              newNode[k] = oldNode[k]
+            }
+          }
+
+          if (oldNode.children && oldNode.children.length > 0) {
+            newNode.children = []
+            for (var i = 0, len = oldNode.children.length; i < len; i++) {
+              newNode.children.push(_dfs(oldNode.children[i]))
+            }
+          }
+          return newNode
+        }
+
+        return _dfs(vm.sqlTvs[index]).children;
+      },
+
+      async tvNodeFolderAdd(index) {
+        var node = new TreeNode({name: 'New Folder', isLeaf: false})
+        if (!this.sqlTvs[index].children) this.sqlTvs[index].children = []
+        this.sqlTvs[index].addChildren(node)
+        await this.savefileCollections(index);
+      },
+
+      async ctxMenuClickHandler(actionEvent, index) {
+        console.log(actionEvent, index);
+        switch (actionEvent.value) {
+          case 'add-folder':
+            this.tvNodeFolderAdd(index);
+            break;
+          case 'reveal-in-folder':
+            await this.openCollectionFolder(this.$store.getters['sqlClient/GtrCurrentSqlFilePaths'][index].path)
+            break;
+          case  'delete-collection':
+            this.$store.commit('sqlClient/MutSqlFilePathsRemove', index);
+            this.fileCollections.splice(index, 1);
+            this.sqlTvs.splice(index, 1);
+            break;
+          case  'refresh-collection':
+            await this.refreshFileCollection(index);
+            break;
+          default:
+            break;
+        }
+        //this.deleteQueryByPath(this.sqlTvs, this.menuItem.path);
+      },
+      async runSelectedSqlCode() {
+        this.executeQuery(this.$refs[`editor-${this.tab}`][0].getCurrentQuery());
+      },
+      async runAllSqlCode() {
+        const queryString = this.$refs[`editor-${this.tab}`][0].getAllContent();
+
+        const queries = this.sqlUi.splitQueries(queryString);
+        if (queries) {
+          for (const query of queries) {
+            await this.executeQuery(query);
+          }
+        } else
+          await this.executeQuery('');
+
+        console.log(queries)
+      },
+      async runSqlCode() {
+        this.executeQuery(this.editors[this.tab].code);
+      },
+      async executeQuery(query) {
+        if (query.trim() === '') {
+          this.$toast.info('Query is empty').goAway(5000);
+          return;
+        }
+        this.loading = true;
+
+        try {
+          let result = await this.$store.dispatch('sqlClient/executeQuery', {
+            envs: {
+              env: this.nodes.env,
+              dbAlias: this.nodes.dbAlias
+            },
+            query
+          });
+          this.$store.commit('outputs/MutListSet', {sqlUi: this.sqlUi, headers: [], result})
+          // this.result = this.sqlUi.handleRawOutput(result, this.headers);
+        } catch (e) {
+          this.$toast.error('Query failed : ' + e.message).goAway(3000);
+          this.$store.commit('outputs/MutListSet', {
+            headers: [{text: 'Mesage', value: 'message', sortable: false}],
+            result: [{message: e.message}]
+          });
+        } finally {
+          this.loading = false;
+        }
+      },
+      editorClear() {
+        this.editors[this.tab].code = '';
+        this.$store.commit('outputs/MutClear');
+      },
+      queryDeleteFromHistory(item) {
+        this.$store.commit('sqlClient/MutListRemoveItem', item)
+      },
+      selectQuery({query}) {
+        if (this.editors[this.tab].code.trim())
+          this.editors[this.tab].code += '\n\n' + query;
+        else
+          this.editors[this.tab].code = query;
+        this.$refs[`editor-${this.tab}`][0].focus();
+      },
+      async copyAndExecute(query) {
+        this.selectQuery(query);
+        await this.runSqlCode();
+      },
+      queryFilter(item, queryText, itemText) {
+        return item.query.toLowerCase().indexOf(queryText.toLowerCase()) > -1
+      },
+      changedSelectedQuery(query) {
+        this.selectQuery({query})
+      },
+      checkClipboardForQuery(clipboardQuery) {
+        if (clipboardQuery) {
+          this.$set(this.editors[this.tab], 'code', clipboardQuery);
+          this.$store.commit('sqlClient/MutSetClipboardQuery', null)
+        }
+      },
+      openFile() {
+        if (this.editors.filter(({type}) => type === 'file').length >= 4) {
+          this.$toast.info('Only 4 files can be opened').goAway(4000);
+          return;
+        }
+        const vm = this;
+        const file = dialog.showOpenDialog({
+          properties: ["openFile"]
+        });
+        if (file && file[0]) {
+          let fileName = path.basename(file[0]);
+          fs.readFile(file[0], 'utf8', function (err, data) {
+            if (err) return console.log(err);
+            vm.editors.push({code: data, type: 'file', fileName, filePaths: file[0], edited: false});
+            vm.tab = vm.editors.length - 1;
+            // data is the contents of the text file we just read
+          });
+        }
+      },
+      openSqlFileCollection() {
+        const vm = this;
+        const file = dialog.showOpenDialog({
+          properties: ["openFile"]
+        });
+        if (file && file[0]) {
+          let fileName = path.basename(file[0]);
+          const pathObj = {
+            path: file[0] + '',
+            fileName: fileName
+          };
+
+          if (this.$store.getters['sqlClient/GtrCurrentSqlFilePaths'].every(({path: p}) => p !== pathObj.path)) {
+            this.$store.commit('sqlClient/MutSqlFilePathsAdd', pathObj)
+            this.loadFileCollection(pathObj);
+          } else {
+            this.$toast.info('File already exist in collection').goAway(4000);
+          }
+        }
+      },
+      showSqlCollectionToggle(status = true) {
+        this.showsqlTvs = !this.showsqlTvs
+      },
+      fileSave(editor, cbk = null) {
+        console.log(editor);
+        if (editor.type != 'file') {
+          return;
+        }
+        let vm = this;
+        fs.writeFile(editor.filePaths, editor.code, "utf-8", function (err, result) {
+          if (err) {
+            vm.$toast.error('Error saving the file').goAway(5000);
+          } else {
+            vm.$toast.success('File saved successfully').goAway(5000);
+          }
+          if (cbk) cbk(err, result);
+        })
+      },
+      async fileClose(action = "", index) {
+        if (action === "showDialog") {
+          this.closeFileDlg = true;
+          this.closeIndex = index;
+        } else if (action === "hideDialog") {
+          this.editors.splice(this.closeIndex, 1)
+          this.closeFileDlg = false;
+          this.closeIndex = null;
+        } else {
+          const vm = this;
+          this.fileSave(this.editors[this.closeIndex], function (err, result) {
+            vm.editors.splice(vm.closeIndex, 1)
+            vm.closeIndex = null;
+            vm.closeFileDlg = false;
+          })
+        }
+      },
+      queryClickHandler(item) {
+        console.log('bookmark', item)
+        if (item.type !== 'folder')
+          this.selectQuery({query: item.query});
+      },
+      ctxMenuShow(e, item) {
+        if (!item) return;
+        this.menuItem = item;
+        e.preventDefault();
+        this.x = e.clientX;
+        this.y = e.clientY;
+        this.$nextTick(() => {
+          this.menuVisible = true;
+        });
+      },
+      ctxMenuOptions() {
+        if (!this.menuItem || !this.menuItem) return;
+        const options = sqlRightClickOptions[this.menuItem.type === 'folder' ? 'folder' : 'file'];
+        return options;
+      },
+
+      async fileCollectionsReload() {
+        let data = new Tree(await this.fileCollections.read());
+        console.log(data);
+
+
+        this.sqlTvs = data;
+        // this.$set(this, 'sqlTvs', data);
+      },
+
+
+      async savefileCollections(index = 0) {
+        await this.fileCollections[index].write({data: this.tvToObject(index)});
+      },
+
+      async bookmarkQuery() {
+        let q = this.$refs[`editor-${this.tab}`][0].getCurrentQuery();
+
+        if (q.trim()) {
+          this.showsqlTvs = true;
+
+          var node = new TreeNode({
+            "id": Date.now(),
+            "type": "select",
+            "typeColor": "success",
+            "query": q,
+            "response": {"status": 0},
+            "label": "Example",
+            "name": "Last saved query",
+            "pid": 0, isLeaf: true
+          })
+
+          let expandedPanelIndex = this.expandedPanel;
+          if (typeof expandedPanelIndex !== 'number') {
+            expandedPanelIndex = this.$store.getters['sqlClient/GtrCurrentSqlFilePaths'].findIndex(
+              file => file.path === path.join(this.currentProjectFolder, 'server', 'tool', this.nodes.dbAlias, this.projectQueriesFolder, 'queries.xc.json')
+            );
+          }
+
+
+          if (!this.sqlTvs[expandedPanelIndex].children) this.sqlTvs[expandedPanelIndex].children = []
+          this.sqlTvs[expandedPanelIndex].addChildren(node)
+          await this.savefileCollections(expandedPanelIndex);
+
+          this.$toast.success('Query bookmarked').goAway(1000);
+
+        }
+      },
+
+
+      async loadFileCollection(pathObj, index = 0) {
+
+        // try {
+        //   const fileCollection = new FileCollection(pathObj);
+        //   await fileCollection.init();
+        //
+        //   this.fileCollections.push(fileCollection);
+        //
+        //   let data = new Tree(await fileCollection.read());
+        //   this.sqlTvs.push(data);
+        // } catch (e) {
+        //   console.log('Error in loadFileCollection:', e);
+        //   throw e;
+        // }
+
+      },
+      async refreshFileCollection(index = 0) {
+
+        try {
+          const pathObj = this.$store.getters['sqlClient/GtrCurrentSqlFilePaths'][index];
+          const fileCollection = new FileCollection(pathObj);
+          await fileCollection.init();
+
+          this.fileCollections[index] = fileCollection;
+
+          let data = new Tree(await fileCollection.read());
+          this.$set(this.sqlTvs, index, data);
+        } catch (e) {
+          console.log('Error in loadFileCollection:', e);
+          throw e;
+        }
+
+      }
+
+
+    },
+
+    beforeCreated() {
+    },
+    async created() {
+
+
+      this.$store.dispatch('sqlClient/loadSqlCollectionForProject', {
+        projectId: 1,
+        projectName: this.$store.getters['project/GtrProjectName']
+      });
+
+
+      try {
+        /* load all files that are were previously opened */
+        if (!this.$store.getters['sqlClient/GtrCurrentSqlFilePaths'].length) {
+          const defaultPath = ''; // path.join(this.currentProjectFolder, 'server', 'tool', this.nodes.dbAlias, this.projectQueriesFolder, 'queries.xc.json');
+          this.$store.commit('sqlClient/MutSqlFilePathsAdd', {
+            path: defaultPath,
+            fileName: ''//path.basename(defaultPath)
+          })
+        }
+
+        for (let i = 0; i < this.$store.getters['sqlClient/GtrCurrentSqlFilePaths'].length; ++i) {
+          await this.loadFileCollection(this.$store.getters['sqlClient/GtrCurrentSqlFilePaths'][i]);
+        }
+
+
+      } catch (e) {
+        console.log('Failed to load previously opened query collections', e);
+      }
+
+      this.sqlUi = SqlUI.create(this.nodes.dbConnection);
+      console.log('------------', this.nodes)
+      this.editors = this.$store.state.sqlClient.editors.map(editor => ({...editor}))
+      this.checkClipboardForQuery(this.$store.state.sqlClient.clipboardQuery);
+      const vm = this;
+      this.$store.watch(
+        state => state.sqlClient.clipboardQuery,
+        clipboardQuery => vm.checkClipboardForQuery(clipboardQuery)
+      )
+
+      // const client = await this.sqlMgr.projectGetSqlClient({
+      //   env: this.nodes.env,
+      //   dbAlias: this.nodes.dbAlias
+      // });
+      // const result = await client.tableList();
+      // console.log(result)
+      this.tableList = [] // result.data.list.map(table => table.tn)
+
+
+      this.expandedPanel = 0;
+    },
+    mounted() {
+    }
+    ,
+    beforeDestroy() {
+    }
+    ,
+    destroy() {
+    }
+    ,
+    validate({params}) {
+      return true;
+    }
+    ,
+    head() {
+      return {};
+    }
+    ,
+    props: ["nodes"],
+    watch:
+      {
+        editors: {
+          handler(editors) {
+            this.$store.commit('sqlClient/MutSetEditors', editors)
+          }
+          ,
+          deep: true
+        }
+      }
+    ,
+    directives: {}
+  };
+
+
+</script>
+
+<style scoped>
+  .vertical-resizer {
+    height: 5px;
+    background: grey;
+    cursor: ns-resize;
+    position: relative;
+  }
+
+  .vertical-resizer + * {
+    overflow-y: auto;
+  }
+
+</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/>.
+ *
+ */
+-->