editing MySQL binary fiellds

packages/tools/src/stringTools.ts

@@ -1,3 +1,12 @@
-export function toHexString(byteArray) {
+export function arrayToHexString(byteArray) {
   return byteArray.reduce((output, elem) => output + ('0' + elem.toString(16)).slice(-2), '');
 }
+
+export function hexStringToArray(inputString) {
+  var hex = inputString.toString();
+  var res = [];
+  for (var n = 0; n < hex.length; n += 2) {
+    res.push(parseInt(hex.substr(n, 2), 16));
+  }
+  return res;
+}

packages/web/src/datagrid/DataGridCell.svelte

@@ -37,6 +37,7 @@
   import _ from 'lodash';
   import ShowFormButton from '../formview/ShowFormButton.svelte';
   import { getBoolSettingsValue } from '../settings/settingsTools';
+  import { arrayToHexString } from 'dbgate-tools';
 
   export let rowIndex;
   export let col;
@@ -99,7 +100,11 @@
         {highlightSpecialCharacters(value)}
       {/if}
     {:else if value.type == 'Buffer' && _.isArray(value.data)}
-      <span class="null">({value.data.length} bytes)</span>
+      {#if value.data.length <= 16}
+        <span class="value">{arrayToHexString(value.data)}</span>
+      {:else}
+        <span class="null">({value.data.length} bytes)</span>
+      {/if}
     {:else if _.isPlainObject(value)}
       <span class="null" title={JSON.stringify(value, undefined, 2)}>(JSON)</span>
     {:else if _.isArray(value)}

packages/web/src/datagrid/InplaceEditor.svelte

@@ -1,8 +1,19 @@
 <script lang="ts" context="module">
   function getEditedValue(value) {
+    if (value?.type == 'Buffer' && _.isArray(value.data)) return arrayToHexString(value.data);
     if (_.isPlainObject(value) || _.isArray(value)) return JSON.stringify(value);
     return value;
   }
+
+  function getStoredValue(originalValue, newString) {
+    if (originalValue?.type == 'Buffer' && _.isArray(originalValue?.data)) {
+      return {
+        type: 'Buffer',
+        data: hexStringToArray(newString),
+      };
+    }
+    return newString;
+  }
 </script>
 
 <script lang="ts">
@@ -10,6 +21,7 @@
   import { onMount } from 'svelte';
   import createRef from '../utility/createRef';
   import _ from 'lodash';
+  import { arrayToHexString, hexStringToArray } from 'dbgate-tools';
 
   export let inplaceEditorState;
   export let dispatchInsplaceEditor;
@@ -32,7 +44,7 @@
       case keycodes.enter:
         if (isChangedRef.get()) {
           // grider.setCellValue(rowIndex, uniqueName, editor.value);
-          onSetValue(domEditor.value);
+          onSetValue(getStoredValue(cellValue, domEditor.value));
           isChangedRef.set(false);
         }
         domEditor.blur();
@@ -41,7 +53,7 @@
       case keycodes.s:
         if (event.ctrlKey) {
           if (isChangedRef.get()) {
-            onSetValue(domEditor.value);
+            onSetValue(getStoredValue(cellValue, domEditor.value));
             // grider.setCellValue(rowIndex, uniqueName, editor.value);
             isChangedRef.set(false);
           }
@@ -54,7 +66,7 @@
 
   function handleBlur() {
     if (isChangedRef.get()) {
-      onSetValue(domEditor.value);
+      onSetValue(getStoredValue(cellValue, domEditor.value));
       // grider.setCellValue(rowIndex, uniqueName, editor.value);
       isChangedRef.set(false);
     }

packages/web/src/utility/clipboard.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { toHexString } from 'dbgate-tools';
+import { arrayToHexString } from 'dbgate-tools';
 
 export function copyTextToClipboard(text) {
   const oldFocus = document.activeElement;
@@ -67,7 +67,7 @@ export function extractRowCopiedValue(row, col) {
   if (value === undefined) value = _.get(row, col);
   if (value === null) return '(NULL)';
   if (value === undefined) return '(NoField)';
-  if (value.type == 'Buffer' && _.isArray(value.data)) return toHexString(value.data);
+  if (value.type == 'Buffer' && _.isArray(value.data)) return arrayToHexString(value.data);
   if (_.isPlainObject(value) || _.isArray(value)) return JSON.stringify(value);
   return value;
 }

plugins/dbgate-plugin-mysql/src/frontend/Dumper.js

@@ -1,4 +1,4 @@
-const { SqlDumper, toHexString } = global.DBGATE_TOOLS;
+const { SqlDumper, arrayToHexString } = global.DBGATE_TOOLS;
 const _isArray = require('lodash/isArray');
 
 class Dumper extends SqlDumper {
@@ -66,7 +66,7 @@ class Dumper extends SqlDumper {
   }
 
   putValue(value) {
-    if (value.type == 'Buffer' && _isArray(value.data)) this.putRaw(`unhex('${toHexString(value.data)}')`);
+    if (value.type == 'Buffer' && _isArray(value.data)) this.putRaw(`unhex('${arrayToHexString(value.data)}')`);
     else super.putValue(value);
   }
 }