Added code editor support, in creating modals

Author: Arattian

.prettierrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  singleQuote: true,
+  trailingComma: 'all',
+};

README.md

@@ -4,11 +4,11 @@
 
 [![GitHub](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/Arattian/DynamoDb-GUI-Client/blob/master/LICENSE)
 
-### [Release v3.2.6](https://github.com/Arattian/DynamoDb-GUI-Client/releases/tag/3.2.6)
+### [Release v3.3.0](https://github.com/Arattian/DynamoDb-GUI-Client/releases/tag/3.3.0)
 
-#### [Download for MacOS (.dmg)](https://github.com/Arattian/DynamoDb-GUI-Client/releases/download/3.2.6/DynamoDbGUI-mac-3.2.6.dmg)
+#### [Download for MacOS (.dmg)](https://github.com/Arattian/DynamoDb-GUI-Client/releases/download/3.3.0/DynamoDbGUI-mac-3.3.0.dmg)
 
-#### [Download for MacOS (.zip)](https://github.com/Arattian/DynamoDb-GUI-Client/releases/download/3.2.6/DynamoDbGUI-mac-3.2.6.zip)
+#### [Download for MacOS (.zip)](https://github.com/Arattian/DynamoDb-GUI-Client/releases/download/3.3.0/DynamoDbGUI-mac-3.3.0.zip)
 
 ### [Release v2.1.1 || Old UI](https://github.com/Arattian/DynamoDb-GUI-Client/releases/tag/v2.1.1)
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "dynamodb-gui-client",
-  "version": "3.2.6",
+  "version": "3.3.0",
   "description": "DynamoDb-GUI-Client",
   "author": {
     "name": "Misak Poghosyan",
@@ -16,41 +16,38 @@
     "test:unit": "vue-cli-service test:unit --coverage"
   },
   "dependencies": {
-    "aws-sdk": "^2.418.0",
-    "awscred": "^1.4.2",
+    "aws-sdk": "^2.432.0",
     "electron-default-menu": "^1.0.1",
-    "element-ui": "^2.6.1",
-    "lodash": "^4.17.11",
-    "vue": "^2.6.8",
-    "vue-awesome": "^3.4.0",
-    "vue-class-component": "^6.3.2",
-    "vue-json-editor": "^1.2.3",
-    "vue-property-decorator": "^8.0.0",
+    "element-ui": "^2.7.0",
+    "vue": "^2.6.10",
+    "vue-awesome": "^3.5.1",
+    "vue-class-component": "^7.0.2",
+    "vue-json-editor": "1.2.3",
+    "vue-property-decorator": "^8.1.0",
     "vue-resize-split-pane": "^0.1.5",
-    "vue-virtual-scroll-list": "^1.3.1",
+    "vue-virtual-scroll-list": "^1.3.2",
     "vuex": "^3.1.0",
-    "vuex-class": "^0.3.1"
+    "vuex-class": "^0.3.2"
   },
   "devDependencies": {
     "@types/jest": "^24.0.11",
-    "@types/lodash": "^4.14.122",
-    "@vue/cli-plugin-babel": "3.5.0",
-    "@vue/cli-plugin-typescript": "3.5.0",
-    "@vue/cli-plugin-unit-jest": "3.5.0",
-    "@vue/cli-service": "3.5.0",
+    "@vue/cli-plugin-babel": "3.5.3",
+    "@vue/cli-plugin-typescript": "3.5.3",
+    "@vue/cli-plugin-unit-jest": "3.5.3",
+    "@vue/cli-service": "3.5.3",
     "@vue/test-utils": "^1.0.0-beta.29",
     "babel-core": "^7.0.0-bridge.0",
-    "electron": "^4.0.8",
+    "electron": "^4.1.3",
     "element-theme-dark": "^1.0.3",
     "pug": "^2.0.3",
     "pug-plain-loader": "^1.0.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
-    "ts-jest": "^24.0.0",
-    "typescript": "^3.3.3333",
-    "vue-cli-plugin-electron-builder": "1.1.2",
+    "ts-jest": "^24.0.1",
+    "typescript": "^3.4.1",
+    "vue-cli-plugin-electron-builder": "1.2.0",
     "vue-cli-plugin-element": "^1.0.1",
-    "vue-template-compiler": "^2.6.8"
+    "vue-template-compiler": "^2.6.10"
   },
   "keywords": [
     "element-ui",

package.json

@@ -41,7 +41,6 @@ export default class App extends Vue {}
 *
   padding 0
   margin 0
-  font-family 'Roboto', sans-serif
   box-sizing border-box
 
 *::-webkit-scrollbar
@@ -67,6 +66,9 @@ html, body
 ::placeholder
   opacity .5
 
+[class^="el-"],.el-col,.el-row
+  font-family 'Roboto', sans-serif
+
 #app
   display flex
   width 100%
@@ -195,6 +197,46 @@ td
 .jsoneditor-previous
   display none !important
 
+.jsoneditor-contextmenu .jsoneditor-menu
+  background-color #222933 !important
+  border 1px solid #191d25 !important
+  box-shadow none !important
+
+div.jsoneditor-contextmenu ul li button
+  color #fff !important
+
+div.jsoneditor-contextmenu ul li button:hover
+  background-color #191d25 !important
+
+.ace-jsoneditor .ace_scroller
+  background-color #2c323a !important
+  border 1px solid #191d25 !important
+
+.jsoneditor-poweredBy
+  display none !important
+
+.ace_gutter
+  background #2c323f !important
+  border 1px solid #191d25 !important
+
+.ace-jsoneditor .ace_marker-layer .ace_active-line
+  background #2f3f3f !important
+
+.ace-jsoneditor .ace_text-layer
+  color #fff !important
+
+.ace_variable
+  color #FF007F !important
+
+.ace_string
+  color #52E3F6 !important
+
+.ace-jsoneditor .ace_indent-guide
+  background none !important
+
+.ace-jsoneditor.ace_editor
+  height 50vh !important
+
 @media screen and (max-height: 600px)
   .table
     height 65vh !important

src/App.vue

@@ -1,15 +1,20 @@
 <template lang="pug">
   el-dialog(center :visible="isVisible" :show-close="false" width="800px")
     el-row(class="hint-container")
+      el-select(v-model="editor")
+        el-option(value="Tree") Tree
+        el-option(value="Code") Code
       el-popover(
         placement="left-end"
         title="Hint"
         width="500"
         trigger="hover"
         :content="hintText")
         i(class="el-icon-question hint" slot="reference")
-    el-row(class="editor")
+    el-row(class="tree-editor" v-show="editor === 'Tree'")
       vue-json-editor(:value="metaValue" @json-change="metaChange" :showBtns="false" ref="editorInstance")
+    el-row(class="code-editor" v-show="editor === 'Code'")
+      vue-json-editor(:value="metaValue" @json-change="metaChange" :showBtns="false" :mode="'code'")
     ActionButtons(
       :cancelHandler="cancelHandler"
       :confirmHandler="confirmHandler"
@@ -27,6 +32,7 @@ import ActionButtons from './ActionButtons.vue';
   },
 })
 export default class CreateModal extends Vue {
+  private editor: string = 'Tree';
   @Prop(Function) private confirmHandler: any;
   @Prop(Function) private cancelHandler: any;
   @Prop(Function) private metaChange: any;
@@ -35,8 +41,10 @@ export default class CreateModal extends Vue {
   @Prop(String) private hintText!: string;
   private mounted() {
     setTimeout(() => {
-      const { editor }: any = this.$refs.editorInstance;
-      editor.expandAll();
+      if (this.editor === 'tree') {
+        const { editor }: any = this.$refs.editorInstance;
+        editor.expandAll();
+      }
     }, 200);
   }
 }
@@ -46,6 +54,7 @@ export default class CreateModal extends Vue {
 .hint-container
   display flex
   justify-content flex-end
+  align-items center
 
 .hint
   color #fdb416
@@ -55,6 +64,10 @@ export default class CreateModal extends Vue {
 .hint:hover
   color #ffd272
 
+.el-select
+  margin-right 10px
+  width 116px
+
 .editor
   height 50vh
   overflow-y auto

src/components/CreateModal.vue

@@ -0,0 +1,71 @@
+<template lang="pug">
+  el-dialog(:visible="true" :show-close="false" width="800px")
+    el-form(:model="submitForm.configs")
+      el-form-item(label="Database Name (Optional)")
+        el-input(placeholder="Database display name" v-model="submitForm.name")
+          template(slot="append")
+            el-color-picker(v-model="submitForm.color" size="mini")
+      .remote(v-if="submitForm.configs.region !== 'localhost'")
+        el-form-item(label="AWS region" required)
+          el-select(v-model="submitForm.configs.region" placeholder="AWS Region")
+            el-option(v-for="(region, index) in regionList" :key="index" :label="region" :value="region")
+        el-form-item(label="Access Key Id" required)
+          el-input(v-model="submitForm.configs.accessKeyId" placeholder="AWS access key id")
+        el-form-item(label="Secret Access Key"  @keyup.enter.native="submitRemoteForm" required)
+          el-input(v-model="submitForm.configs.secretAccessKey" :type="inputType" placeholder="AWS secret access key")
+            template(slot="append")
+              el-button(icon="el-icon-view" @click="showSecretKey")
+      .local(v-if="submitForm.configs.region === 'localhost'")
+        el-form-item(label="Local Database Endpoint" required)
+          el-input(placeholder="Enter Endpoint" @keyup.enter.native="submitLocalForm" v-model="submitForm.configs.endpoint")
+    ActionButtons(
+      :cancelHandler="cancelHandler"
+      :confirmHandler="submitForm.configs.region === 'localhost' ? submitLocalForm : submitRemoteForm"
+      confirmType="success"
+      confirmText="Save"
+    )
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import ActionButtons from './ActionButtons.vue';
+
+@Component({
+  components: {
+    ActionButtons,
+  },
+})
+export default class EditDatabaseModal extends Vue {
+  private inputType: string = 'password';
+  @Prop(String) private currentDb!: string;
+  @Prop(Function) private cancelHandler!: any;
+  @Prop(Function) private submitRemoteForm!: any;
+  @Prop(Function) private submitLocalForm!: any;
+  @Prop(Function) private fillEditForm!: any;
+  @Prop(Array) private regionList!: string[];
+  @Prop(Object) private submitForm!: any;
+  private created() {
+    this.fillEditForm(this.currentDb);
+  }
+
+  private showSecretKey() {
+    if (this.inputType === 'password') {
+      this.inputType = 'text';
+    } else {
+      this.inputType = 'password';
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.header
+  display flex
+  flex-direction column
+  align-items center
+
+.el-icon-warning
+  color #fdb416
+  font-size 5em
+  margin-bottom 20px
+</style>

src/components/EditDatabaseModal.vue

@@ -3,13 +3,17 @@
     .inner-fixed
       el-button(type="primary" plain @click="initialState")
         span Quick Connect
-      el-row(class="change-title") Change Database
-      el-select(:value="currentDb" @change="getCurrentDb" placeholder="Select Database" spellcheck="false" :title="currentDb" class="input-field")
-        el-option(
-          v-for="db in databaseList"
-          :key="db.name"
-          :value="db.name"
-        )
+      .input-field
+        el-select(:value="currentDb" @change="getCurrentDb" placeholder="Select Database" spellcheck="false" :title="currentDb")
+          el-option(
+            v-for="db in databaseList"
+            :key="db.name"
+            :value="db.name"
+          )
+      el-row(class="change-title")
+        el-col(:span="22") Edit Database
+        el-col(:span="2" class="edit")
+          i(class="el-icon-edit" @click="toggleEditModal")
       el-row(class="input-field")
         el-input(placeholder="Search Table" @input="filterTextChange" :value="filterText" suffix-icon="el-icon-search" spellcheck="false")
       el-row(class="table-actions")
@@ -38,6 +42,7 @@ export default class SidebarTables extends Vue {
   @Prop(Function) private initialState: any;
   @Prop(Function) private toggleCreateModal: any;
   @Prop(Function) private toggleDeleteModal: any;
+  @Prop(Function) private toggleEditModal: any;
   @Prop(Array) private databaseList!: string[];
   @Prop(Array) private tableList!: string[];
   @Prop(String) private currentTable!: string;
@@ -93,6 +98,16 @@ export default class SidebarTables extends Vue {
 .el-select
   width 100%
 
+.edit
+  margin-left 10px
+  display flex
+  justify-content flex-end
+  align-items center
+
+.edit:hover
+  color #00d986
+  cursor pointer
+
 .list-item
   background #121820
   margin 5px 10px

src/components/SidebarTables.vue

@@ -0,0 +1,36 @@
+<template lang="pug">
+  EditDatabaseModal(
+    :currentDb="currentDb"
+    :cancelHandler="toggleEditModal"
+    :fillEditForm="fillEditForm"
+    :submitRemoteForm="submitRemoteForm"
+    :submitLocalForm="submitLocalForm"
+    :regionList="database.regionList"
+    :submitForm="database.submitForm"
+  )
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import { Action, Mutation, Getter, State } from 'vuex-class';
+import { TableModuleState } from '../store/modules/table/types';
+import EditDatabaseModal from '../components/EditDatabaseModal.vue';
+
+const namespace: string = 'database';
+@Component({
+  components: {
+    EditDatabaseModal,
+  },
+})
+export default class DatabaseModals extends Vue {
+  @Getter private currentDb!: string;
+  @State(namespace) private database!: any;
+  @Mutation('toggleEditModal', { namespace }) private toggleEditModal!: any;
+  @Mutation('fillEditForm', { namespace }) private fillEditForm!: any;
+  @Action('submitRemoteForm', { namespace }) private submitRemoteForm!: any;
+  @Action('submitLocalForm', { namespace }) private submitLocalForm!: any;
+}
+</script>
+
+<style lang="stylus" scoped>
+</style>