Fixed input data flow issue, related to latest element ui package version

Author: Arattian

package-lock.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"

package.json

@@ -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>

src/components/RecordFooter.vue

@@ -10,7 +10,7 @@
         :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-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")

src/components/SidebarTables.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>

src/containers/TableRecords.vue

@@ -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> = {