Merge pull request #26 from Arattian/dev-feature

Dev feature
Arattian · Feb 4, 2019 · d782e54 · d782e54
2 parents de559f6 + fd3fd37
commit d782e54
Show file tree

Hide file tree

Showing 8 changed files with 920 additions and 501 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
   "dependencies": {
     "aws-sdk": "^2.395.0",
     "electron-default-menu": "^1.0.1",
-    "element-ui": "^2.5.2",
+    "element-ui": "^2.5.4",
     "lodash": "^4.17.11",
     "vue": "^2.5.22",
     "vue-awesome": "^3.3.1",
@@ -32,11 +32,11 @@
   "devDependencies": {
     "@types/jest": "^23.3.13",
     "@types/lodash": "^4.14.120",
-    "@vue/cli-plugin-babel": "3.3.0",
-    "@vue/cli-plugin-typescript": "3.3.0",
-    "@vue/cli-plugin-unit-jest": "3.3.0",
-    "@vue/cli-service": "3.3.1",
-    "@vue/test-utils": "^1.0.0-beta.28",
+    "@vue/cli-plugin-babel": "3.4.0",
+    "@vue/cli-plugin-typescript": "3.4.0",
+    "@vue/cli-plugin-unit-jest": "3.4.0",
+    "@vue/cli-service": "3.4.0",
+    "@vue/test-utils": "^1.0.0-beta.29",
     "babel-core": "^7.0.0-bridge.0",
     "electron": "^4.0.2",
     "element-theme-dark": "^1.0.2",
@@ -45,7 +45,7 @@
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
     "ts-jest": "^23.10.5",
-    "typescript": "^3.2.4",
+    "typescript": "^3.3.1",
     "vue-cli-plugin-electron-builder": "github:nklayman/vue-cli-plugin-electron-builder",
     "vue-cli-plugin-element": "^1.0.1",
     "vue-template-compiler": "^2.5.22"

diff --git a/src/App.vue b/src/App.vue
@@ -65,6 +65,7 @@
   #app
     display flex
     width 100%
+    height 100%
 
   // customizing some imported components and theme selectors
   input[type='text']:disabled

diff --git a/src/components/RecordFooter.vue b/src/components/RecordFooter.vue
@@ -11,25 +11,25 @@
           el-row
             el-row(class="popover-row") Maximum rows in table
             el-row(class="popover-row")
-              el-input(placeholder="Row Count" @change="getLimitedRows" :disabled="checked" :value="limit" spellcheck="false") rows
+              el-input(placeholder="Row Count" @change="getLimitedRows" :disabled="checked" v-model="records.limit" spellcheck="false") rows
             el-row(class="popover-row")
               el-checkbox(v-model="checked" @change="getLimitedRows(null)") No Limit
         el-row(class="popover-close")
           el-button(size="mini" plain type="primary" @click="visible = false") Close
         i(class="el-icon-setting settings" slot="reference" title="Table Settings")
       i(
         class="el-icon-arrow-left"
-        :class="{disabled: lastEvaluatedKeyIndex < 1}"
-        @click="lastEvaluatedKeyIndex >= 1 && getPreviousRecords()"
+        :class="{disabled: records.lastEvaluatedKeyIndex < 1}"
+        @click="records.lastEvaluatedKeyIndex >= 1 && getPreviousRecords()"
         )
       .pageIndex(
-      ) {{ lastEvaluatedKeyIndex + 1 }}
+      ) {{ records.lastEvaluatedKeyIndex + 1 }}
       i(
         class="el-icon-arrow-right"
-        :class="{disabled: (lastEvaluatedKeyIndex + 1) * limit >= itemCount || evaluatedKeys.length < 1}"
-        @click="(lastEvaluatedKeyIndex + 1) * limit < itemCount && evaluatedKeys.length > 0 && getNextRecords()"
+        :class="{disabled: (records.lastEvaluatedKeyIndex + 1) * records.limit >= itemCount || records.evaluatedKeys.length < 1}"
+        @click="(records.lastEvaluatedKeyIndex + 1) * records.limit < itemCount && records.evaluatedKeys.length > 0 && getNextRecords()"
         )
-      .filter-result(v-if="filtered") {{list.length}} matches in {{ limit * lastEvaluatedKeyIndex + 1 }} - {{ (lastEvaluatedKeyIndex + 1) * limit > itemCount ? itemCount : (lastEvaluatedKeyIndex + 1) * limit}} range
+      .filter-result(v-if="records.filtered") {{list.length}} matches in {{ records.limit * records.lastEvaluatedKeyIndex + 1 }} - {{ (records.lastEvaluatedKeyIndex + 1) * records.limit > itemCount ? itemCount : (records.lastEvaluatedKeyIndex + 1) * records.limit}} range
     el-col(:span="6" class="itemCount") {{itemCount ? itemCount : 0}} rows in {{currentTable}}
 </template>
 
@@ -46,14 +46,11 @@
     @Prop(Function) private generateMeta: any;
     @Prop(Function) private refreshTable: any;
     @Prop(Function) private getNextRecords: any;
+    @Prop(Object) private records!: any;
     @Prop(Function) private getPreviousRecords: any;
     @Prop(Function) private getLimitedRows: any;
     @Prop(String) private currentTable!: string;
     @Prop(Number) private itemCount!: number;
-    @Prop(Number) private limit!: number;
-    @Prop(Number) private lastEvaluatedKeyIndex!: number;
-    @Prop(Array) private evaluatedKeys!: any[];
-    @Prop(Boolean) private filtered!: boolean;
     @Prop(Array) private list!: any[];
   }
 </script>

diff --git a/src/components/SidebarTables.vue b/src/components/SidebarTables.vue
@@ -1,23 +1,24 @@
 <template lang="pug">
-  el-row
-    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"
-      )
-    el-row(class="input-field")
-      el-input(placeholder="Search Table" @keyup.native="filterTextChange" :value="filterText" suffix-icon="el-icon-search" spellcheck="false")
-    el-row(class="table-actions")
-      el-col(:span="12" class="title") TABLES
-      el-col(:span="12" class="actions")
-        i(:class="[loading ? 'el-icon-loading' : '', 'el-icon-refresh refresh']" @click="getDbTables() && toggleLoading()" title="Refresh Table List")
-        i(class="el-icon-circle-plus-outline add" @click="toggleCreateModal" title="Create Table")
-        i(class="el-icon-delete remove" v-if="currentTable" @click="toggleDeleteModal" title="Delete Table" :disabled="true")
-    el-row(class="container")
+  .outer
+    .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"
+        )
+      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")
+        el-col(:span="12" class="title") TABLES
+        el-col(:span="12" class="actions")
+          i(:class="[loading ? 'el-icon-loading' : '', 'el-icon-refresh refresh']" @click="getDbTables() && toggleLoading()" title="Refresh Table List")
+          i(class="el-icon-circle-plus-outline add" @click="toggleCreateModal" title="Create Table")
+          i(class="el-icon-delete remove" v-if="currentTable" @click="toggleDeleteModal" title="Delete Table" :disabled="true")
+    .inner-remaining
       .list-item(v-for="(table, index) in tableList" :key="index" @click="switchTable(table)" :class="{active: isActive(table)}")
         .info
           span {{ table }}
@@ -99,7 +100,6 @@
     align-items center
     display flex
     border-radius 5px
-    transition .1s linear
 
   .list-item:hover
     cursor pointer
@@ -124,9 +124,13 @@
   .refresh:hover
     color #52ceff
 
-  .container
-    height 100vh
+  .outer
+    display flex
+    flex-flow column
+    height 100%
+
+  .inner-remaining
+    flex-grow 1
     overflow-y auto
-    transition .5s linear
     font-size 1em
 </style>
diff --git a/src/containers/Sidebar.vue b/src/containers/Sidebar.vue
@@ -61,7 +61,7 @@
 
 <style lang="stylus" scoped>
   .sidebar
-    height 100vh
+    height 100%
     width 100%
     min-width 150px
 </style>
diff --git a/src/containers/TableRecords.vue b/src/containers/TableRecords.vue
@@ -32,12 +32,9 @@
       :currentTable="currentTable"
       :itemCount="itemCount"
       :getLimitedRows="getLimitedRows"
-      :limit="records.limit"
+      :records="records"
       :getPreviousRecords="getPreviousRecords"
       :getNextRecords="getNextRecords"
-      :evaluatedKeys="records.evaluatedKeys"
-      :lastEvaluatedKeyIndex="records.lastEvaluatedKeyIndex"
-      :filtered="records.filtered"
       :list="tableDataPage"
     )
 </template>

diff --git a/src/store/mutations.ts b/src/store/mutations.ts
@@ -86,7 +86,7 @@ function setCurrentTable(state: RootState, tableName: string) {
 }
 
 function filterTextChange(state: RootState, filterField: any) {
-  state.filterText = filterField.target.value;
+  state.filterText = filterField;
 }
 
 const mutations: MutationTree<RootState> = {