nocodb/packages/nc-gui/components/project/apiClientSwagger.vue

<template>
  <v-container fluid class="api-client grid-list-xs pa-0 " style="height: 100%;">

    <splitpanes style="height:100%;" class="xc-theme">
      <pane min-size="20" max-size="50" size="30" style="overflow: auto">
        <!--        <p class="body-2 my-1 text-center grey&#45;&#45;text text&#45;&#45;lighten-1" v-show="!isDashboard">-->
        <!--          {..} REST API CLIENT</p>-->
        <v-row class="pa-0 ma-0 pa-2 pl-2">
          <div class=" cursor-pointer d-flex" style="width: 100%">
            <x-icon icon-class="mr-1 cursor-pointer"
                    small v-ge="['api-client','open-new-collection']" @click="openNewCollection('/')" color="primary"
                    tooltip="Create New API Collection">mdi-folder-plus-outline
            </x-icon>

            <!--            <x-icon class="mr-1" color="primary" tooltip="Open API Collection" @click="openApiFileCollection">-->
            <!--              mdi-folder-open-outline-->
            <!--            </x-icon>-->
            <v-dialog v-model="importCollection.modal" persistent max-width="550">
              <template v-slot:activator="{ on }">
                <v-icon color="" v-on="on">
                  mdi-import
                </v-icon>
              </template>
              <v-card class="pa-3" style="position: relative">

                <v-icon style="position: absolute;right:20px; top:20px;"
                        v-ge="['api-client','open-new-collection-close']" @click="importCollection.modal = false">
                  mdi-close
                </v-icon>

                <v-card-title class="headline justify-center mb-2">Import</v-card-title>
                <v-card-subtitle class="text-center">(JSON Format Only)</v-card-subtitle>

                <div style="" class="py-3">
                  <v-card-text>

                    <v-select
                      dense
                      hide-details
                      outlined
                      v-model="importCollection.type"
                      :items="importCollection.types"
                      filled
                      label="API Specification"
                    ></v-select>
                  </v-card-text>
                  <v-card-actions>
                    <v-tabs background-color="indigo accent-4" dark style="border: 1px solid indigo ; margin:0 10px">
                      <v-tab>FILE</v-tab>
                      <v-tab :disabled="!isSwaggerImport">URL</v-tab>
                      <v-tab :disabled="!isSwaggerImport">JSON</v-tab>
                      <v-tab-item>
                        <div class="px-2 py-10 text-center" style="min-height: 250px;">

                          <v-row>
                            <v-col>
                              <v-text-field hide-details label="Select file" dense outlined
                                            v-model="importCollection.file.srcFilePath">
                                <template v-slot:append>
                                  <v-btn v-ge="['api-client','select-import-file']" small @click="selectImportFile()">
                                    Choose File ...
                                  </v-btn>
                                </template>
                              </v-text-field>
                            </v-col>
                          </v-row>

                          <v-row v-show="isSwaggerImport">
                            <v-col>
                              <v-text-field hide-details label="Destination file path"
                                            v-model="importCollection.file.dstFilePath" dense outlined
                                            hide-details></v-text-field>
                            </v-col>
                          </v-row>

                          <v-btn
                            class="mt-4"
                            color="primary"
                            v-ge="['api-client','import-collection']"
                            @click="importFile(importCollection.type,importCollection.file.srcFilePath,importCollection.file.dstFilePath)">
                            Import
                          </v-btn>


                        </div>
                      </v-tab-item>
                      <v-tab-item
                      >
                        <div style="min-height: 250px;" class="text-center">

                          <div class="px-2 pt-10 ">
                            <v-text-field v-model="importCollection.url" placeholder="Enter url"></v-text-field>
                          </div>

                          <v-btn color="primary"
                                 v-ge="['api-client','import-collection-from-url']"
                                 @click="importFromUrl(importCollection.type,importCollection.url)">Import
                          </v-btn>
                        </div>
                      </v-tab-item>
                      <v-tab-item
                      >
                        <div style="min-height: 250px;" class="text-center">
                          <div class="px-2  pt-2 ">
                            <v-textarea v-model="importCollection.text"
                                        placeholder="Enter JSON String"></v-textarea>
                          </div>
                          <v-btn color="primary"
                                 v-ge="['api-client','import-collection-from-text']"
                                 @click="importFromText(importCollection.type,importCollection.text)">Import
                          </v-btn>
                        </div>
                      </v-tab-item>

                    </v-tabs>
                  </v-card-actions>
                </div>
              </v-card>
            </v-dialog>
            <v-spacer></v-spacer>
            <span class="flex-shrink-1 body-2 my-1 text-center grey--text" v-show="!isDashboard">
              {..} REST API CLIENT ( is in <v-icon small color="warning">mdi-alpha</v-icon>)</span>

            <span v-show="isDashboard" class="caption float-right warning--text mt-1" style="font-style: italic">
              API Client is in<v-icon small color="warning">mdi-alpha</v-icon>
            </span>
          </div>
        </v-row>
        <v-divider></v-divider>

        <v-tabs height="32" v-model="apiRootTab" style="border-top:1px solid darkgrey">
          <v-tab style="text-transform: none">History</v-tab>
          <v-tab style="text-transform: none">Collections</v-tab>


          <v-tab-item style="border-top: 1px solid grey">
            <div class="apis-list">
              <div v-for="(api,i) in historyList" :key="i" class="pa-0 ma-0 ">
                <v-list-item dense two-line v-ge="['api-client','history']" @click="apiClickedOnHistoryList(api)">

                  <v-hover v-slot:default="{ hover }">
                    <v-list-item-content>
                      <v-list-item-title class="grey--text">
                        <v-btn class="pl-0 ml-0" small text :tooltip="api.meta.path"
                               :color="apiMethodMeta[api.meta.method.toUpperCase()].color"
                        >
                          <b>
                            <v-icon class="mx-0 ml-n2"
                                    :class="{
                              'white--text':  !api.meta.response || !api.meta.response.status,
                              'red--text': api.meta.response && api.meta.response.status >= 400,
                               'green--text':api.meta.response && api.meta.response.status < 400
                            }">
                              mdi-circle-small
                            </v-icon>
                            {{ api.meta.method }} </b>
                        </v-btn>


                        {{ api.meta.path }}
                      </v-list-item-title>
                      <v-list-item-subtitle v-show="!i || hover" class="text-right">
                        <span v-show="!i && !hover" class="grey--text text--darken-1 caption">(Last invoked API) </span>

                        <v-icon v-if="_isDev" small v-ge="['api-client','node-info']" @click.stop="showNodeInfo(api)">
                          mdi-information
                        </v-icon>
                        <v-btn small text v-show="hover" class=" " v-ge="['api-client','delete-list']"
                               @click="apiDeleteFromList(i)">
                          <v-icon small>mdi-delete</v-icon>
                        </v-btn>
                      </v-list-item-subtitle>
                    </v-list-item-content>
                  </v-hover>
                </v-list-item>
                <v-divider></v-divider>
              </div>
            </div>
          </v-tab-item>
          <v-tab-item style="border-top: 1px solid grey">

            <v-expansion-panels accordion focusable v-model="curApiCollectionPanel">

              <v-expansion-panel
                v-for="(apiTv,i) in apiTvs"
                :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['apiClientSwagger/GtrCurrentApiFilePaths'][i].fileName }}</span>

                      <x-icon color="white grey" class="float-right mr-3" small
                              @click="showCtxMenu[i]=true,x = $event.clientX,y = $event.clientY"
                              @click.stop="">
                        mdi-dots-horizontal
                      </x-icon>

                      <recursive-menu v-model="showCtxMenu[i]"
                                      :position-x="x"
                                      :position-y="y"
                                      :items="{
                                        'Add Folder':'add-folder',
                                        'Add Request':'add-request',
                                        'Reveal in Folder':'reveal-in-folder',
                                        'Delete Collection':'delete-collection',
                                        'Refresh Collection' : 'refresh-collection'
                                      }"
                                      v-ge="['api-client','collection-context-menu']"
                                      @click="ctxMenuClickHandler($event,i)">
                      </recursive-menu>

                    </div>
                  </template>
                </v-expansion-panel-header>
                <v-expansion-panel-content class="expansion-wrap-0 pl-4">
                  <vue-tree-list
                    style="cursor: pointer"
                    v-if="apiTvs[i]"
                    class="body-2 sql-query-treeview px-1 pt-2 api-treeview"
                    @click="tvNodeOnClick"
                    @change-name="tvNodeRename"
                    @delete-node="tvNodeDelete"
                    @add-node="onAddNode"
                    :model="apiTv"
                    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:label="{item:api}">
                      <div v-if="api.isLeaf" class="d-flex pa-1 ma-n1" style="width: 100%" :style="
                                api.id === currentApi.id && !currentApi.meta.history ? 'background:rgb(240, 240, 240)' :''
                                ">
                        <!--                    <v-icon class="mx-0"-->
                        <!--                            :class="`${apiMeta[api.method].color}&#45;&#45;text`"-->
                        <!--                            small>-->
                        <!--                              mdi-bookmark-outline-->
                        <!--                            </v-icon>-->
                        <span style="display: inline-block;min-width: 45px;"
                              :class=" apiMethodMeta[api.meta.method.toUpperCase()] ? `${apiMethodMeta[api.meta.method.toUpperCase()].color}--text` : ''">
                                                  {{ api.meta.method.toUpperCase() === 'DELETE' ? 'DEL' : api.meta.method.toUpperCase() }} </span>


                        <span class="grey--text d-block text--darken-1" style="text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;">{{ api.name }}</span>
                        <v-spacer></v-spacer>
                        <v-icon v-if="_isDev" v-ge="['api-client','node-info']" small @click.stop="showNodeInfo(api)">
                          mdi-information
                        </v-icon>
                      </div>
                      <div class="d-flex" v-else style="width: 100%;text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;">
                        <span>{{ api.name }}</span>

                        <v-spacer></v-spacer>
                        <v-icon v-if="_isDev" small @click.stop="showNodeInfo(api)" v-ge="['api-client','node-info']">
                          mdi-information
                        </v-icon>
                      </div>
                    </template>
                  </vue-tree-list>
                </v-expansion-panel-content>
              </v-expansion-panel>
            </v-expansion-panels>
          </v-tab-item>
        </v-tabs>
      </pane>
      <pane min-size="10" size="70" style="overflow: auto">

        <v-toolbar class=" toolbar-border-bottom  elevation-0 d-flex req-inputs" height="55"
                   style="position: relative;z-index:2;width: 100%">

          <v-select
            :items="Object.keys(apiMethodMeta)"
            v-model="api.method"
            v-ge="['api-client','method']"
            dense
            solo
            hide-details
            outlined
            class="body-2"
            style="max-width:130px;border-bottom-right-radius: 0;border-top-right-radius: 0;border-right: 1px solid grey"
          ></v-select>


          <xAutoComplete
            outlined
            class="flex-grow-1"
            :env="selectedEnv"
            placeholder="Enter HTTP URL"
            solo
            dense
            hide-details
            autofocus
            styles="border-bottom-left-radius: 0;border-top-left-radius:0 "
            v-model="api.path"></xAutoComplete>


          <x-btn btn.class="primary" dense @click.prevent="apiSend()" v-ge="['api-client','api-send']"
                 tooltip="Send Request">
            <v-icon small class="ml-n3" v-if="isPerfFilled">mdi-truck-fast</v-icon>
            <v-icon small class="ml-n3" v-else>mdi-send</v-icon>
            &nbsp;SEND
          </x-btn>
          <x-btn btn.class="outlined" dense v-ge="['api-client','save']" @click.prevent="saveOrUpdateApi(api)"
                 :icon="api.history ? 'save' : 'mdi-content-save-edit'"
                 tooltip="Save API">
          </x-btn>
          <x-btn icon="mdi-eye-outline"
                 v-ge="['api-client','environment']"
                 @click="environmentDialog = true" tooltip="Environments">

          </x-btn>

        </v-toolbar>


        <splitpanes horizontal style="height:calc(100% - 64px)" class="xc-theme">
          <pane min-size="25" size="50" style="overflow: auto;" class="pa-1">

            <v-tabs
              class="req-tabs"
              height="24"
            >
              <v-tab v-ge="['api-client','params']" class="caption">Params&nbsp;<b v-if="paramsCount"
                                                                                   class="green--text">({{ paramsCount }})</b>
              </v-tab>
              <v-tab class="caption" v-ge="['api-client','headers']">Headers&nbsp;<b v-if="headersCount"
                                                                                     class="green--text">({{
                  headersCount
                }})</b>
              </v-tab>
              <v-tab class="caption" v-ge="['api-client','body']">Body</v-tab>
              <v-tab class="caption" v-ge="['api-client','auth']">Auth</v-tab>
              <v-tab class="caption" v-ge="['api-client','perf-test']">Perf Test</v-tab>
              <div class="flex-grow-1 d-flex text-right pr-4 justify-end ">
                <div class="flex-shrink-1 ">
                  <v-select
                    v-model="selectedEnv"
                    height="19"
                    class="caption envs"
                    dense
                    :items="environmentList"
                    placeholder="Environment"
                    single-line
                  >
                    <template v-slot:selection="{item}">
                      <span
                        style="text-transform: uppercase">{{ item }}</span>&nbsp; <span class="grey--text">(env)</span>
                    </template>

                  </v-select>

                </div>
              </div>
              <!--              <div class="flex-grow-1 text-right pr-4 caption" v-if="api.response">-->
              <!--                &lt;!&ndash;                <x-icon iconClass="mr-4"  v-if="$store.getters['project/GtrProjectJson']" @click="environmentDialog = true" tooltip="Environments">&ndash;&gt;-->
              <!--                &lt;!&ndash;                  mdi-eye-outline&ndash;&gt;-->
              <!--                &lt;!&ndash;                </x-icon>&ndash;&gt;-->
              <!--              </div>-->
              <v-tab-item>

                <params v-model="api.parameters"
                        :env.sync="selectedEnv"
                ></params>
              </v-tab-item>
              <v-tab-item>
                <headers v-model="api.headers"
                         :env.sync="selectedEnv"
                ></headers>
              </v-tab-item>
              <v-tab-item>
                <monaco-json-editor
                  style="height: 250px"
                  class="editor card"
                  theme="vs-dark"
                  v-model="api.body"
                  language="json"
                  :options="{validate:true,documentFormattingEdits:true,foldingRanges:true}"
                >
                </monaco-json-editor>

              </v-tab-item>
              <v-tab-item>
                <!--                <monaco-editor-->
                <!--                  :code.sync="api.auth"-->
                <!--                  cssStyle="height:250px"></monaco-editor>-->
              </v-tab-item>

              <v-tab-item>
                <perf-test v-model="api.perf"></perf-test>
              </v-tab-item>

            </v-tabs>
          </pane>
          <pane min-size="25" size="50" style="overflow: auto" class="pa-1">
            <!--            <h3 class="mb-2 grey&#45;&#45;text lighten-1">-->
            <!--              Response Body :-->
            <!--              <div v-if="api.response">-->
            <!--                <span v-if="api.response.status === 200" class="green&#45;&#45;text">{{api.response.status}}</span>-->
            <!--                <span v-if="api.response.status !== 200" class="red&#45;&#45;text">{{api.response.status}}</span>-->
            <!--              </div>-->
            <!--            </h3>-->


            <v-tabs
              v-if="api.response"
              height="24"
            >
              <v-tab v-ge="['api-client','response-body']" class="caption">Body</v-tab>
              <v-tab v-ge="['api-client','respomse-headers']" class="caption">Headers<span class="green--text"
                                                                                           v-if="api.response.headers">( {{ Object.keys(api.response.headers).length }} )</span>
              </v-tab>
              <div class="flex-grow-1 text-right pr-4 caption" v-if="api.response">
                <template v-if="api.response.status"><span class="grey--text">Status:</span><span :class="{
                   'green--text' : api.response.status === 200 ,
                    'red--text' : api.response.status !== 200
                    }"><b>{{ api.response.status }}</b></span></template>
                &nbsp;
                &nbsp;
                <template v-if="api.timeTaken"><span class="grey--text">Time:</span><span
                  class="green--text"><b>{{ api.timeTaken }}ms</b></span>
                </template>


              </div>
              <v-tab-item>
                <pre v-if="api.response" class="black pa-1 grey--text w-100 caption"
                      style="overflow-x: auto;min-height:100px;overflow-y:auto;min-width: 100%">{{ api.response.data }}</pre>

                <!--                <pre v-if="api.response" class="black pa-1" style="overflow-x: auto;min-height:50px;overflow-y:auto">{{api.response.data}}</pre>-->
              </v-tab-item>
              <v-tab-item>
                <pre v-if="api.response" class="black pa-1 grey--text w-100 caption"
                      style="overflow-x: auto;min-height:100px;overflow-y:auto;min-width: 100%">{{ api.response.headers }}</pre>
              </v-tab-item>
            </v-tabs>
          </pane>
        </splitpanes>

      </pane>
    </splitpanes>
    <environment env="dev" v-model="environmentDialog"></environment>


    <v-dialog v-model="bookmarkApiDialog" max-width="500">
      <v-card>
        <v-card-title class="justify-center">Bookmark API</v-card-title>

        <v-card-text>
          <div class="text-right">
            <v-btn small color="primary" outlined v-ge="['api-client','open-new-collection']"
                   @click="openNewCollection('/')">
              <v-icon small>mdi-plus</v-icon> &nbsp;New Collection
            </v-btn>
          </div>
          <v-list dense>

            <v-list-item-group v-model="choosenApiCollection">
              <v-list-item v-for="(item,i)  in $store.getters['apiClientSwagger/GtrCurrentApiFilePaths']" :value="i"
                           :key="i"
                           style="border: 1px solid grey">
                <v-list-item-title>{{ item.fileName }}</v-list-item-title>
              </v-list-item>
            </v-list-item-group>
          </v-list>
        </v-card-text>
        <v-card-actions class="justify-center pb-5">
          <v-btn small v-ge="['api-client','bookmark']" @click="bookmarkApiDialog = false">Cancel</v-btn>
          <v-btn small color="primary" :disabled="choosenApiCollection === null  || choosenApiCollection === undefined"
                 @click="bookmarkApi(choosenApiCollection)">Save API
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>
<script>
import {mapGetters} from "vuex";

import Vue from 'vue';


import {VueTreeList, Tree, TreeNode} from 'vue-tree-list'
import {Splitpanes, Pane} from 'splitpanes'
import params from "../apiClient/params";
import headers from "../apiClient/headers";

import {MonacoJsonEditor} from "../monaco/index";

import environment from "../environment";
import PerfTest from "../apiClient/perfTest";

// const {app, dialog, path, fs, shell, XcApis} = require("electron").remote.require(
//   "./libs"
// );

import * as XcApiHelp from '../../helpers/XcApiHelp';

// const {config} = require('electron').remote.require('./libs');

export default {
  components: {
    PerfTest,
    MonacoJsonEditor,
    VueTreeList,
    Splitpanes, Pane,
    params,
    headers,
    environment
  },
  data() {
    return {
      choosenApiCollection: null,
      bookmarkApiDialog: false,
      apiRootTab: 0,
      importCollection: {
        modal: false,
        type: 'Swagger 3.0',
        types: [{
          text: 'Swagger 3.0',
          value: 'Swagger 3.0',
        }, {
          text: 'XC',
          value: 'XC',
        }],
        file: {
          srcFilePath: '',
          dstFilePath: ''
        }
      },
      fileHistory: null,
      historyList: [],
      environmentDialog: false,
      showCtxMenu: {},
      apiTvs: [],
      apiFilePaths: [],
      apiFileCollections: [],
      curApiCollectionPanel: null,

      x: 0,
      y: 0,

      apiMethodMeta: {
        GET: {
          color: 'success'
        },
        POST: {
          color: 'warning'
        },
        DELETE: {
          color: 'error'
        },
        PUT: {
          color: 'info'
        },
        HEAD: {
          color: 'info'
        },
        PATCH: {
          color: 'info'
        },
      },

      // current api
      api: {
        method: 'GET',
        path: '',
        body: '',
        params: [],
        auth: '',
        headers: [],
        response: {},
        perf: {},
        meta: {}
      },
      currentApi: {},
      currentNode: null

    }
  },
  computed: {
    isPerfFilled() {
      return this.api.perf && Object.values(this.api.perf).some(v => v)
    },
    ...mapGetters({
      sqlMgr: "sqlMgr/sqlMgr",
      currentProjectFolder: "project/currentProjectFolder",
      projectApisFolderPath: "project/projectApisFolderPath",
      projectApisFolder: "project/projectApisFolder"
    }),
    isSwaggerImport() {
      return this.importCollection.type === 'Swagger 3.0';
    },
    paramsCount() {
      return this.api.parameters && this.api.parameters.filter(p => p.name && p.enabled).length;
    },
    headersCount() {

      return this.api.headers && this.api.headers.filter(h => h.name && h.enabled).length;
    },
    environmentList() {
      if (this.isDashboard) {
        return Object.keys(this.$store.getters['project/GtrApiEnvironment']);
      } else {
        return Object.keys(this.$store.getters['project/GtrDefaultApiEnvironment']);
      }
    },
    selectedEnv: {
      get() {
        return this.$store.state.apiClientSwagger.activeEnvironment[this.$store.state.apiClientSwagger.currentProjectKey] || this.environmentList[0];
      }, set(env) {
        this.$store.commit('apiClientSwagger/MutActiveEnvironment', {env});
      }
    }
  },
  methods: {

    showNodeInfo(api) {
      console.log('Node info : ', api)
    },
    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.bookmarkApi();
          break;
        case 'true_e' :
          this.environmentDialog = true
          break;
        // case 'true_n' :
        //   this.addColumn();
        //   break;
        case 'true_d' :
          await this.deleteProcedure('showDialog');
          break;
        case 'true_Enter' :
          await this.apiSend();
          break;
      }
    },

    async openCollectionFolder(pathString) {
      shell.showItemInFolder(pathString);
    },
    async openNewCollection() {
      try {
        let toLocalPath = this.isDashboard ? path.join(this.currentProjectFolder, 'server', 'tool', this.projectApisFolder) : '';

        let 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('apiClientSwagger/MutApiFilePathsAdd', pathObj)
          await this.loadFileCollection(pathObj);
        }
        this.$toast.success('New API collection loaded successfully').goAway(5000);
      } catch (e) {
        console.log(e);
        throw e;
      }

    },
    async openSwaggerJSONFile(srcPath, dstPath) {
      let dstFileName = path.basename(dstPath);
      await XC.importSwaggerJson({
        srcPath,
        dstPath
      });
      const pathObj = {
        path: dstPath,
        fileName: dstFileName
      };
      this.$store.commit('apiClientSwagger/MutApiFilePathsAdd', pathObj)
      await this.loadFileCollection(pathObj);
    },
    selectImportFile() {

      const file = dialog.showOpenDialog({
        properties: ["openFile"]
      });

      let dstFileName = `${path.basename(file[0], '.json')}.xc.json`;


      let dstPath = '';
      if (this.isDashboard) {
        dstPath = this.projectApisFolderPath;
      } else {
        dstPath = path.dirname(config.electron.apiHistoryPath)
      }


      if (file && file[0]) {
        this.$set(this.importCollection.file, 'srcFilePath', file[0] + '');
        this.$set(this.importCollection.file, 'dstFilePath', path.join(dstPath, dstFileName));
      }


    },
    async importFile(type, srcPath, dstPath) {
      this.apiRootTab = 1;
      this.$set(this.importCollection, 'modal', false);
      try {
        if (type === 'Swagger 3.0') {
          await this.openSwaggerJSONFile(srcPath, dstPath);
        } else {
          await this.openApiFileCollection(srcPath, dstPath);
        }
        this.$toast.success('File imported successfully').goAway(3000);
      } catch (e) {
        console.log('File import error : ', e);
        this.$toast.error('File importing failed').goAway(3000);
      }

    },
    async importFromUrl(type, url) {
      this.apiRootTab = 1;
      this.$set(this.importCollection, 'modal', false);
      try {
        if (type === 'Swagger 3.0') {
          await this.importSwaggerFromUrl(url);
        } else {
          await this.importXcFromUrl(url);
        }
        this.$toast.success('Import from URL completed successfully').goAway(3000);
      } catch (e) {
        console.log('URL import error : ', e);
        this.$toast.error('Import from URL failed').goAway(3000);
      }
    },
    async importFromText(type, text) {
      this.apiRootTab = 1;
      this.$set(this.importCollection, 'modal', false);
      try {
        if (type === 'Swagger 3.0') {
          await this.importSwaggerFromText(text);
        } else {
          await this.importXcFromText(text);
        }
        this.$toast.success('Import from Text completed successfully').goAway(3000);
      } catch (e) {
        console.log('Text import error : ', e);
        this.$toast.error('Import from Text failed').goAway(3000);
      }
    },


    async importSwaggerFromUrl(url) {
      let data = await this.$axios.$get(url);

      let dstFileName = `${Date.now()}.xc.json`;

      let dstPath = '';
      if (this.isDashboard) {
        dstPath = this.projectApisFolderPath;
      } else {
        dstPath = path.dirname(config.electron.apiHistoryPath)
      }

      await XC.importSwaggerObject({
        swagger: data,
        dstPath: path.join(dstPath, dstFileName)
      })

      const pathObj = {
        path: path.join(dstPath, dstFileName),
        fileName: dstFileName
      };

      this.$store.commit('apiClientSwagger/MutApiFilePathsAdd', pathObj)
      await this.loadFileCollection(pathObj);


    },
    async importSwaggerFromText(text) {
      let data = JSON.parse(text);

      let dstFileName = `${Date.now()}.xc.json`;

      let dstPath = '';
      if (this.isDashboard) {
        dstPath = this.projectApisFolderPath;
      } else {
        dstPath = path.dirname(config.electron.apiHistoryPath)
      }

      await XC.importSwaggerObject({
        swagger: data,
        dstPath: path.join(dstPath, dstFileName)
      })

      const pathObj = {
        path: path.join(dstPath, dstFileName),
        fileName: dstFileName
      };

      this.$store.commit('apiClientSwagger/MutApiFilePathsAdd', pathObj)
      await this.loadFileCollection(pathObj);

      this.$toast.success('Import from Text completed successfully').goAway(3000);

    },
    async importXcFromUrl(url) {
      let data = await this.$axios.$get(url);

      let dstFileName = `${Date.now()}.xc.json`;

      let dstPath = '';
      if (this.isDashboard) {
        dstPath = this.projectApisFolderPath;
      } else {
        dstPath = path.dirname(config.electron.apiHistoryPath)
      }

      // await XcApis.importSwaggerObject({
      //   swagger: data,
      //   dstPath: path.join(dstPath, dstFileName)
      // })

      const pathObj = {
        path: path.join(dstPath, dstFileName),
        fileName: dstFileName
      };

      this.$store.commit('apiClientSwagger/MutApiFilePathsAdd', pathObj)
      await this.loadFileCollection(pathObj);


    },
    async importXcFromText(text) {
      let data = JSON.parse(text);

      let dstFileName = `${Date.now()}.xc.json`;

      let dstPath = '';
      if (this.isDashboard) {
        dstPath = this.projectApisFolderPath;
      } else {
        dstPath = path.dirname(config.electron.apiHistoryPath)
      }
      //
      // await XcApis.importSwaggerObject({
      //   swagger: data,
      //   dstPath: path.join(dstPath, dstFileName)
      // })

      const pathObj = {
        path: path.join(dstPath, dstFileName),
        fileName: dstFileName
      };

      this.$store.commit('apiClientSwagger/MutApiFilePathsAdd', pathObj)
      await this.loadFileCollection(pathObj);

      this.$toast.success('Import from Text completed successfully').goAway(3000);

    },


    async ctxMenuClickHandler(actionEvent, index) {
      console.log(actionEvent, index);
      switch (actionEvent.value) {
        case 'add-folder':
          this.tvNodeFolderAdd(index);
          break;
        case 'add-request':
          this.curApiCollectionPanel = index;
          this.tvNodeRequestAdd(index);
          break;
        case 'reveal-in-folder':
          await this.openCollectionFolder(this.$store.getters['apiClientSwagger/GtrCurrentApiFilePaths'][index].path)
          break;
        case  'delete-collection':
          this.$store.commit('apiClientSwagger/MutApiFilePathsRemove', index);
          this.apiFileCollections.splice(index, 1);
          this.apiTvs.splice(index, 1);
          break;
        case  'refresh-collection':
          await this.refreshFileCollection(index);
          break;
        default:
          break;
      }
      //this.deleteQueryByPath(this.apiTvs, this.menuItem.path);
    },
    openUrl(url) {
      shell.openExternal(url);
    },

    apiClickedOnList(api) {
      if (api.isLeaf) {
        api = XcApiHelp.apiPrepareForInvocation(api);


        this.currentApi = JSON.parse(JSON.stringify(api));
        this.api = {
          perf: {},
          ...this.currentApi.meta
        };
      }
    },

    apiClickedOnHistoryList(api) {
      this.currentApi = JSON.parse(JSON.stringify(api));
      this.api = {
        perf: {},
        ...api.meta,
        history: true,
        isLeaf: true
      };
    },

    apiDeleteFromList(index) {
      this.$store.commit('apiClientSwagger/MutListRemove', index);
    },

    async apiSend() {

      console.log('apiSend')

      if (!this.api.path.trim()) {
        this.$toast.info('Please enter http url').goAway(3000);
        return;
      }


      const envs = this.isDashboard ?
        this.$store.getters['project/GtrApiEnvironment'][this.selectedEnv]
        : this.$store.getters['project/GtrDefaultApiEnvironment'][this.selectedEnv];

      let apiDecoded = JSON.parse(
        JSON.stringify(this.api).replace(/{{\s*(\w+)\s*}}/g, (m, m1) => {
          if (m1 in envs) {
            return envs[m1];
          } else {
            this.$toast.info('Environment variable is not found : ' + m1).goAway(3000);
            return m;
          }
        })
      )


      let swaggerResult = await this.$store.dispatch('apiClientSwagger/send', {api: this.api, apiDecoded});

      this.historyList = [{...this.currentApi, meta: swaggerResult, pid: 0}, ...this.historyList];

      let result = swaggerResult.response;
      this.api = swaggerResult;

      if (result) {
        if (result.status === 200) {
          //this.$toast.success('API invoked successfully',{duration:1000});
        } else {
          this.$toast.error(`Error:${result.status}`, {duration: 1000});
        }
      } else {
        this.$toast.error(`Some internal error occurred`, {duration: 1000});
      }

    },

    async fileCollectionReload() {
      let data = new Tree(await this.apiFileCollection.read());
      console.log(data);

      this.apiTv = data;
      // this.$set(this, 'apiCollections', data);
    },

    async tvNodeDelete(node) {
      console.log(node, this.curApiCollectionPanel)
      node.remove()
      await this.savefileCollections(this.curApiCollectionPanel);
    },

    async tvNodeRename(params) {
      console.log(params)
      await this.savefileCollections(this.curApiCollectionPanel);
    },

    async onAddNode(params) {
      console.log(params)
      await this.savefileCollections(this.curApiCollectionPanel);
    },

    async tvNodeOnClick(node) {
      const {parent, children, ...params} = node;
      this.currentNode = node;

      console.log(params)
      this.apiClickedOnList(params);
      // if (params.query) ;
      // this.selectQuery(params)
    },

    async savefileCollections(index = 0) {
      await this.apiFileCollections[index].write({data: this.tvToObject(index)});
      // this.apiTvs = await this.fileCollections.read();
      // this.$set(this.apiTvs, index, this.apiTvs);
    },

    tvToObject(index) {
      try {
        var vm = this

        function _dfs(oldNode) {
          var newNode = {};

          XcApiHelp.nodeHandleIfNew(oldNode)

          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.apiTvs[index]).children
      } catch (e) {
        this.$toast.error('Error while parsing api collection').goAway(3000);
      }

    },

    async tvNodeFolderAdd(index) {
      var node = new TreeNode({name: 'New Folder', isLeaf: false, children: []})
      if (!this.apiTvs[index].children) this.apiTvs[index].children = []
      this.apiTvs[index].addChildren(node);

      await this.saveFileCollection(index);

    },
    async tvNodeRequestAdd(index) {
      var node = new TreeNode({name: 'New Request', isLeaf: true})
      if (!this.apiTvs[index].children) this.apiTvs[index].children = []
      this.apiTvs[index].addChildren(node);

      await this.saveFileCollection(index);

    },

    openApiFileCollection(filePath = null) {
      const vm = this;
      // console.log(obj, key);

      const file = filePath ? [filePath] : 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['apiClientSwagger/GtrCurrentApiFilePaths'].every(({path: p}) => p !== pathObj.path)) {
          this.$store.commit('apiClientSwagger/MutApiFilePathsAdd', pathObj)
          this.loadFileCollection(pathObj);
        } else {
          this.$toast.info('File already exist in collection').goAway(4000);
        }
      }
    },

    async saveFileCollection(index = 0) {
      await this.apiFileCollections[index].write({data: this.tvToObject(index)});
    },

    async loadFileCollection(path, index = 0) {

      try {

        /* create file collection and get its data */
        const fileCollection = new XC(path);
        await fileCollection.init();
        this.apiFileCollections.push(fileCollection);
        let treeData = await fileCollection.read();

        /* create a tree view and push it */
        let data = new Tree(treeData.length && treeData[0].name === 'swagger.json' ? treeData[0].children : treeData);
        this.apiTvs.push(data);

        this.curApiCollectionPanel = this.apiFileCollections.length - 1;

      } catch (e) {
        console.log('Error in loadFileCollection:', e);
        throw e;
      }

    },
    async loadHistoryFile() {
      // try {
      //   this.fileHistory = new XcApis({path: config.electron.apiHistoryPath});
      //   this.historyList = await this.fileHistory.read();
      // } catch (e) {
      //   console.log('Error in loadFileHistory:', e);
      //   throw e;
      // }
    },
    async refreshFileCollection(index = 0) {
      try {
        const path = this.$store.getters['apiClientSwagger/GtrCurrentApiFilePaths'][index];
        const fileCollection = new XC(path);
        await fileCollection.init();
        this.apiFileCollections[index] = fileCollection;
        const data = new Tree(await fileCollection.read());
        this.$set(this.apiTvs, index, data);
      } catch (e) {
        console.log('Error in loadFileCollection:', e);
        throw e;
      }

    },

    async bookmarkApi(panelIndex) {
      this.bookmarkApiDialog = false;
      if (this.apiFileCollections.length) {
        delete this.currentApi.meta.history;
        let q = this.currentApi;
        var node = new TreeNode({
          name: q.meta.path,
          swagger: {},
          isLeaf: true,
          "id": Date.now(),
          "pid": 0,
          ...q,
        })

        if (!this.apiTvs[panelIndex].children) this.apiTvs[panelIndex].children = []
        this.apiTvs[panelIndex].addChildren(node)
        await this.savefileCollections(panelIndex);
        await this.refreshFileCollection(panelIndex);

        this.$toast.success(`API added to ${this.$store.getters['apiClientSwagger/GtrCurrentApiFilePaths'][panelIndex].fileName} collection successfully`).goAway(3000)
      } else {
        this.$toast.info('Create a new collection to bookmark the api.').goAway(3000);
        this.openNewCollection('/');
      }

    },
    async saveOrUpdateApi() {
      if (this.api.history) {
        this.bookmarkApiDialog = true;
      } else {

        let q = this.currentApi;
        const api = {
          ...q,
          meta: {...this.api},
          "pid": 0
        };
        let activePanelIndex = this.curApiCollectionPanel;
        await this.apiFileCollections[activePanelIndex].updateApi({api});
        await this.refreshFileCollection(activePanelIndex);
        this.$toast.success(`API updated in ${this.$store.getters['apiClientSwagger/GtrCurrentApiFilePaths'][activePanelIndex].fileName} collection successfully`).goAway(3000)


      }
    }

  },

  beforeCreated() {
  },

  async created() {


    try {

      /* load history collection - default path is within app directory*/
      await this.loadHistoryFile();

      if (this.$route.params && this.$route.params.project) {
        /* get collection paths previously opened for this project */
        this.$store.dispatch('apiClientSwagger/loadApiCollectionForProject', {
          projectId: this.$route.params.project,
          projectName: this.$store.getters['project/GtrProjectName']
        })
      } else {
        /* get collection paths previously opened */
        this.$store.dispatch('apiClientSwagger/loadApiCollectionForProject', {})
      }

      /* load the filecollection json as treeviews */
      for (let i = 0; i < this.$store.getters['apiClientSwagger/GtrCurrentApiFilePaths'].length; ++i) {
        await this.loadFileCollection(this.$store.getters['apiClientSwagger/GtrCurrentApiFilePaths'][i]);
      }

      // console.log(this.$store.getters['apiClientSwagger/GtrCurrentApiFilePaths']);


    } catch (e) {
      console.log('Failed to load previously opened query collections', e);
    }

    if (this.nodes && this.nodes.url) {
      Vue.set(this.api, 'method', 'GET');
      this.api.path = this.nodes.url
    }

    this.api.meta = {}

    console.log(this.nodes);
    try {
      const info = (await this.$axios.get('/nc/projectApiInfo', {
        headers: {
          'xc-auth': this.$store.state.users.token
        }
      })).data;
      const rest = Object.values(info).find(v => v.apiUrl);
      if (rest) {
        Vue.set(this.api, 'method', 'GET');
        Vue.set(this.api, 'path', rest.apiUrl);
      }
    } catch (e) {  }
  },
  mounted() {
  },
  beforeDestroy() {
  },
  destroy() {
  },
  validate({params}) {
    return true;
  },
  head() {
    return {};
  },
  props: ["nodes"],
  watch: {
    async historyList(newData) {
      await this.fileHistory.write({
        path: config.electron.apiHistoryPath,
        data: newData
      })
    }
  },
  directives: {}
};
</script>

<style scoped>

.apis-list {
  height: calc(100%);
  overflow-y: auto;
}

.apis-request {
  overflow-y: auto;
}

/deep/ > .req-inputs .v-toolbar__content {
  width: 100%;
  display: flex;
  padding: 2px;
}

/deep/ .req-tabs > .v-tabs-items {
  border-top: 1px solid #7F828B33;
}

.envs /deep/ .v-select__selections {
  color: var(--v-accent-base)
}

/*.envs /deep/ .v-select__selections input { display: none}*/
code{
  min-height:200px;
}
</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/>.
 *
 */
-->