Merge pull request #353 from qishibo/viewer_binary

Viewer binary
qishibo · Oct 3, 2020 · aa38cb9 · aa38cb9
2 parents 3723d03 + 3b0772e
commit aa38cb9
Show file tree

Hide file tree

Showing 14 changed files with 187 additions and 73 deletions.
diff --git a/src/components/FormatViewer.vue b/src/components/FormatViewer.vue
@@ -9,13 +9,14 @@
         :value="item.value">
       </el-option>
     </el-select>
-    <span v-if='binary' class='formater-binary'>Hex</span>
+    <span v-if='!contentVisible' class='formater-binary-tag'>Hex</span>
     <br>
 
     <component
       ref='viewer'
       :is='selectedView'
       :content='content'
+      :contentVisible='contentVisible'
       :textrows='textrows'
       @updateContent="$emit('update:content', $event)">
     </component>
@@ -25,6 +26,7 @@
 <script type="text/javascript">
 import ViewerText from '@/components/ViewerText';
 import ViewerJson from '@/components/ViewerJson';
+import ViewerBinary from '@/components/ViewerBinary';
 import ViewerUnserialize from '@/components/ViewerUnserialize';
 
 export default {
@@ -34,19 +36,24 @@ export default {
       viewers: [
         { value: 'ViewerText', text: 'Text' },
         { value: 'ViewerJson', text: 'Json' },
+        { value: 'ViewerBinary', text: 'Binary' },
         { value: 'ViewerUnserialize', text: 'Unserialize' },
       ],
       selectStyle: {
         float: this.float,
       },
     };
   },
-  components: {ViewerText, ViewerJson, ViewerUnserialize},
+  components: {ViewerText, ViewerJson, ViewerBinary, ViewerUnserialize},
   props: {
     float: {default: 'right'},
-    content: {default: ''},
+    content: {default: () => Buffer.from('')},
     textrows: {default: 6},
-    binary: {default: false},
+  },
+  computed: {
+    contentVisible() {
+      return this.$util.bufVisible(this.content);
+    },
   },
   methods: {
     autoFormat() {
@@ -113,8 +120,8 @@ export default {
     float: right;
     padding: 9px 0;
   }
-  .formater-binary {
-    padding-left: 5px;
+  .formater-binary-tag {
+    /*padding-left: 5px;*/
     color: #7ab3ef;
     font-size: 80%;
   }

diff --git a/src/components/InputBinary.vue b/src/components/InputBinary.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <span v-if="!buffVisible" class='input-binary-tag'>Hex</span>
+    <el-input :value='contentDisplay' @change="updateContent($event)"></el-input>
+  </div>
+</template>
+
+<script type="text/javascript">
+export default {
+  props: ['content'],
+  computed: {
+    contentDisplay() {
+      if (!this.content) {
+        return '';
+      }
+
+      return this.$util.bufToString(this.content);
+    },
+    buffVisible() {
+      if (!this.content) {
+        return true;
+      }
+
+      return this.$util.bufVisible(this.content);
+    },
+  },
+  methods: {
+    updateContent(value) {
+      let newContent = this.buffVisible ? Buffer.from(value) : this.$util.xToBuffer(value);
+      this.$emit('update:content', newContent);
+    },
+  },
+}
+</script>
+
+<style type="text/css">
+  .input-binary-tag {
+    color: #7ab3ef;
+    font-size: 80%;
+    /*float: left;*/
+  }
+</style>
diff --git a/src/components/KeyContentHash.vue b/src/components/KeyContentHash.vue
@@ -12,12 +12,10 @@
       <el-dialog :title='dialogTitle' :visible.sync="editDialog" @open='openDialog' :close-on-click-modal='false'>
         <el-form>
           <el-form-item label="Field">
-            <span v-if='editLineItem.binaryK' class='content-binary'>Hex</span>
-            <el-input v-model="editLineItem.key" autocomplete="off"></el-input>
+            <InputBinary :content.sync="editLineItem.key"></InputBinary>
           </el-form-item>
 
           <el-form-item label="Value">
-            <span v-if='editLineItem.binaryV' class='content-binary'>Hex</span>
             <FormatViewer ref='formatViewer' :content.sync='editLineItem.value'></FormatViewer>
           </el-form-item>
         </el-form>
@@ -43,15 +41,15 @@
         width="150">
       </el-table-column>
       <el-table-column
-        prop="key"
+        prop="keyDisplay"
         sortable
         resizable
         label="Key"
         width=150
         >
       </el-table-column>
       <el-table-column
-        prop="value"
+        prop="valueDisplay"
         resizable
         sortable
         show-overflow-tooltip
@@ -92,6 +90,7 @@
 <script>
 import PaginationTable from '@/components/PaginationTable';
 import FormatViewer from '@/components/FormatViewer';
+import InputBinary from '@/components/InputBinary';
 
 export default {
   data() {
@@ -110,7 +109,7 @@ export default {
       loadMoreDisable: false,
     };
   },
-  components: {PaginationTable, FormatViewer},
+  components: {PaginationTable, FormatViewer, InputBinary},
   props: ['client', 'redisKey'],
   computed: {
     dialogTitle() {
@@ -160,10 +159,10 @@ export default {
 
         for (let i = 0; i < reply.length; i += 2) {
           hashData.push({
-            key: this.$util.bufToString(reply[i]),
-            value: this.$util.bufToString(reply[i + 1]),
-            binaryK: !this.$util.bufVisible(reply[i]),
-            binaryV: !this.$util.bufVisible(reply[i + 1]),
+            key: reply[i],
+            keyDisplay: this.$util.bufToString(reply[i]),
+            value: reply[i + 1],
+            valueDisplay: this.$util.bufToString(reply[i + 1]),
           });
         }
 
@@ -191,7 +190,7 @@ export default {
     },
     showEditDialog(row) {
       this.editLineItem = row;
-      this.beforeEditItem = JSON.parse(JSON.stringify(row));
+      this.beforeEditItem = this.$util.cloneObjWithBuff(row);
       this.editDialog = true;
     },
     editLine() {
@@ -208,14 +207,14 @@ export default {
 
       client.hset(
         key,
-        before.binaryK ? this.$util.xToBuffer(after.key) : after.key,
-        before.binaryV ? this.$util.xToBuffer(after.value) : after.value
+        after.key,
+        after.value
       ).then((reply) => {
         // edit key && key changed
-        if (before.key && before.key !== after.key) {
+        if (before.key && !before.key.equals(after.key)) {
           client.hdel(
             key,
-            before.binaryK ? this.$util.xToBuffer(before.key) : before.key
+            before.key
           ).then((reply) => {
             this.initShow();
           });
@@ -239,7 +238,7 @@ export default {
       ).then(() => {
         this.client.hdel(
           this.redisKey,
-          row.binaryK ? this.$util.xToBuffer(row.key) : row.key
+          row.key
         ).then((reply) => {
           if (reply === 1) {
             this.$message.success({

diff --git a/src/components/KeyContentList.vue b/src/components/KeyContentList.vue
@@ -12,7 +12,6 @@
       <el-dialog :title="dialogTitle" :visible.sync="editDialog" @open='openDialog' :close-on-click-modal='false'>
         <el-form>
           <el-form-item label="Value">
-            <span v-if='editLineItem.binary' class='content-binary'>Hex</span>
             <FormatViewer ref='formatViewer' :content.sync='editLineItem.value'></FormatViewer>
           </el-form-item>
         </el-form>
@@ -38,7 +37,7 @@
         width="150">
       </el-table-column>
       <el-table-column
-        prop="value"
+        prop="valueDisplay"
         resizable
         sortable
         show-overflow-tooltip
@@ -108,8 +107,8 @@ export default {
 
         for (const i of reply) {
           listData.push({
-            value: this.$util.bufToString(i),
-            binary: !this.$util.bufVisible(i),
+            value: i,
+            valueDisplay: this.$util.bufToString(i),
           });
         }
 
@@ -142,7 +141,7 @@ export default {
     },
     showEditDialog(row) {
       this.editLineItem = row;
-      this.beforeEditItem = JSON.parse(JSON.stringify(row));
+      this.beforeEditItem = this.$util.cloneObjWithBuff(row);
       this.editDialog = true;
     },
     editLine() {
@@ -153,13 +152,13 @@ export default {
 
       this.editDialog = false;
 
-      if (!after.value || before.value == after.value) {
+      if (!after.value || (before.value && before.value.equals(after.value))) {
         return;
       }
 
       client.rpush(
         key,
-        before.binary ? this.$util.xToBuffer(after.value) : after.value
+        after.value
       ).then((reply) => {
         // reply return list length if success
         if (reply > 0) {
@@ -168,7 +167,7 @@ export default {
             client.lrem(
               key,
               1,
-              before.binary ? this.$util.xToBuffer(before.value) : before.value
+              before.value
             ).then((reply) => {
               this.initShow();
             });
@@ -193,7 +192,7 @@ export default {
         this.client.lrem(
           this.redisKey,
           1,
-          row.binary ? this.$util.xToBuffer(row.value) : row.value
+          row.value
         ).then((reply) => {
           if (reply === 1) {
             this.$message.success({

diff --git a/src/components/KeyContentSet.vue b/src/components/KeyContentSet.vue
@@ -9,11 +9,10 @@
       </el-form>
 
       <!-- edit & add dialog -->
-      <el-dialog :title="dialogTitle" :visible.sync="editDialog" :close-on-click-modal='false'>
+      <el-dialog :title="dialogTitle" :visible.sync="editDialog" @open='openDialog' :close-on-click-modal='false'>
         <el-form>
           <el-form-item label="Value">
-            <span v-if='editLineItem.binary' class='content-binary'>Hex</span>
-            <el-input type="textarea" :rows="6" v-model="editLineItem.value" autocomplete="off"></el-input>
+            <FormatViewer ref='formatViewer' :content.sync='editLineItem.value'></FormatViewer>
           </el-form-item>
         </el-form>
 
@@ -38,7 +37,7 @@
         width="150">
       </el-table-column>
       <el-table-column
-        prop="value"
+        prop="valueDisplay"
         resizable
         sortable
         show-overflow-tooltip
@@ -77,6 +76,7 @@
 
 <script>
 import PaginationTable from '@/components/PaginationTable';
+import FormatViewer from '@/components/FormatViewer';
 
 export default {
   data() {
@@ -96,7 +96,7 @@ export default {
     };
   },
   props: ['client', 'redisKey'],
-  components: {PaginationTable},
+  components: {PaginationTable, FormatViewer},
   computed: {
     dialogTitle() {
       return this.beforeEditItem.value ? this.$t('message.edit_line') :
@@ -145,8 +145,8 @@ export default {
 
         for (const i of reply) {
           setData.push({
-            value: this.$util.bufToString(i),
-            binary: !this.$util.bufVisible(i),
+            value: i,
+            valueDisplay: this.$util.bufToString(i),
           });
         }
 
@@ -167,9 +167,14 @@ export default {
     getScanMatch() {
       return this.filterValue ? `*${this.filterValue}*` : '*';
     },
+    openDialog() {
+      this.$nextTick(() => {
+        this.$refs.formatViewer.autoFormat();
+      });
+    },
     showEditDialog(row) {
       this.editLineItem = row;
-      this.beforeEditItem = JSON.parse(JSON.stringify(row));
+      this.beforeEditItem = this.$util.cloneObjWithBuff(row);
       this.editDialog = true;
     },
     editLine() {
@@ -180,21 +185,21 @@ export default {
 
       this.editDialog = false;
 
-      if (!after.value || before.value == after.value) {
+      if (!after.value || (before.value && before.value.equals(after.value))) {
         return;
       }
 
       client.sadd(
         key,
-        before.binary ? this.$util.xToBuffer(after.value) : after.value
+        after.value
       ).then((reply) => {
         // add success
         if (reply === 1) {
           // edit key remove previous value
           if (before.value) {
             client.srem(
               key,
-              before.binary ? this.$util.xToBuffer(before.value) : before.value
+              before.value
             ).then((reply) => {
               this.initShow();
             });
@@ -226,7 +231,7 @@ export default {
       ).then(() => {
         this.client.srem(
           this.redisKey,
-          row.binary ? this.$util.xToBuffer(row.value) : row.value
+          row.value
         ).then((reply) => {
           if (reply === 1) {
             this.$message.success({