cell display refactor

packages/web/src/datagrid/CellValue.svelte

@@ -1,105 +1,34 @@
-<script context="module">
-  function makeBulletString(value) {
-    return _.pad('', value.length, '•');
-  }
-
-  function highlightSpecialCharacters(value) {
-    value = value.replace(/\n/g, '↲');
-    value = value.replace(/\r/g, '');
-    value = value.replace(/^(\s+)/, makeBulletString);
-    value = value.replace(/(\s+)$/, makeBulletString);
-    value = value.replace(/(\s\s+)/g, makeBulletString);
-    return value;
-  }
-
-  // const dateTimeRegex = /^\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d(\.\d\d\d)?Z?$/;
-  const dateTimeRegex =
-    /^([0-9]+)-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])[Tt]([01][0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9]|60)(\.[0-9]+)?(([Zz])|()|([\+|\-]([01][0-9]|2[0-3]):[0-5][0-9]))$/;
-
-  function formatNumber(value) {
-    if (value >= 10000 || value <= -10000) {
-      if (getBoolSettingsValue('dataGrid.thousandsSeparator', false)) {
-        return value.toLocaleString();
-      } else {
-        return value.toString();
-      }
-    }
-
-    return value.toString();
-  }
-
-  function formatDateTime(testedString) {
-    const m = testedString.match(dateTimeRegex);
-    return `${m[1]}-${m[2]}-${m[3]} ${m[4]}:${m[5]}:${m[6]}`;
-  }
-</script>
-
 <script lang="ts">
   import _ from 'lodash';
   import { getBoolSettingsValue } from '../settings/settingsTools';
-  import { arrayToHexString } from 'dbgate-tools';
+  import { stringifyCellValue } from 'dbgate-tools';
 
   export let rowData;
   export let value;
   export let jsonParsedValue = undefined;
+  export let editorTypes;
+
+  $: stringified = stringifyCellValue(
+    value,
+    'gridCellIntent',
+    editorTypes,
+    { useThousandsSeparator: getBoolSettingsValue('dataGrid.thousandsSeparator', false) },
+    jsonParsedValue
+  );
 </script>
 
 {#if rowData == null}
   <span class="null">(No row)</span>
-{:else if value === null}
-  <span class="null">(NULL)</span>
-{:else if value === undefined}
-  <span class="null">(No field)</span>
-{:else if _.isDate(value)}
-  {value.toString()}
-{:else if value === true}
-  <span class="value">true</span>
-{:else if value === false}
-  <span class="value">false</span>
-{:else if _.isNumber(value)}
-  <span class="value">{formatNumber(value)}</span>
-{:else if _.isString(value) && !jsonParsedValue}
-  {#if dateTimeRegex.test(value)}
-    <span class="value">
-      {formatDateTime(value)}
-    </span>
-  {:else}
-    {highlightSpecialCharacters(value)}
-  {/if}
-{:else if value?.type == 'Buffer' && _.isArray(value.data)}
-  {#if value.data.length <= 16}
-    <span class="value">{'0x' + arrayToHexString(value.data)}</span>
-  {:else}
-    <span class="null">({value.data.length} bytes)</span>
-  {/if}
-{:else if value.$oid}
-  <span class="value">ObjectId("{value.$oid}")</span>
-{:else if _.isPlainObject(value)}
-  {@const svalue = JSON.stringify(value, undefined, 2)}
-  <span class="null" title={svalue}
-    >{#if svalue.length < 100}{JSON.stringify(value)}{:else}(JSON){/if}</span
-  >
-{:else if _.isArray(value)}
-  <span class="null" title={value.map(x => JSON.stringify(x)).join('\n')}>[{value.length} items]</span>
-{:else if _.isPlainObject(jsonParsedValue)}
-  {@const svalue = JSON.stringify(jsonParsedValue, undefined, 2)}
-  <span class="null" title={svalue}
-    >{#if svalue.length < 100}{JSON.stringify(jsonParsedValue)}{:else}(JSON){/if}</span
-  >
-{:else if _.isArray(jsonParsedValue)}
-  <span class="null" title={jsonParsedValue.map(x => JSON.stringify(x)).join('\n')}
-    >[{jsonParsedValue.length} items]</span
-  >
 {:else}
-  {value.toString()}
+  <span class={stringified.gridStyle} title={stringified.gridTitle}>{stringified.value}</span>
 {/if}
 
 <style>
-  .null {
+  .nullCellStyle {
     color: var(--theme-font-3);
     font-style: italic;
   }
-  .value {
+  .valueCellStyle {
     color: var(--theme-icon-green);
   }
 </style>

packages/web/src/datagrid/DataGridCell.svelte

@@ -72,7 +72,7 @@
   class:isFocusedColumn
   {style}
 >
-  <CellValue {rowData} {value} {jsonParsedValue} />
+  <CellValue {rowData} {value} {jsonParsedValue} {editorTypes} />
 
   {#if allowHintField && rowData && _.some(col.hintColumnNames, hintColumnName => rowData[hintColumnName])}
     <span class="hint"

packages/web/src/datagrid/InplaceInput.svelte

@@ -74,7 +74,7 @@
   }
 
   onMount(() => {
-    domEditor.value = inplaceEditorState.text || stringifyCellValue(cellValue, editorTypes);
+    domEditor.value = inplaceEditorState.text || stringifyCellValue(cellValue, 'inlineEditorIntent', editorTypes).value;
     domEditor.focus();
     if (inplaceEditorState.selectAll) {
       domEditor.select();
@@ -105,7 +105,7 @@
       dispatchInsplaceEditor({ type: 'close' });
 
       showModal(EditCellDataModal, {
-        value: stringifyCellValue(cellValue, editorTypes),
+        value: stringifyCellValue(cellValue, 'multilineEditorIntent', editorTypes).value,
         onSave: onSetValue,
       });
     }}

packages/web/src/datagrid/InplaceSelect.svelte

@@ -19,22 +19,22 @@
   let isOptionsHidden = false;
 
   onMount(() => {
-    value = inplaceEditorState.text || stringifyCellValue(cellValue, driver?.dataEditorTypesBehaviour);
+    value =
+      inplaceEditorState.text || stringifyCellValue(cellValue, 'inlineEditorIntent', driver?.dataEditorTypesBehaviour).value;
     valueInit = value;
 
     const optionsSelected = value.split(',');
-    optionsData = options
-      .map(function(option) {
-        return {
-          value: option,
-          isSelected: optionsSelected.includes(option)
-        };
-      });
+    optionsData = options.map(function (option) {
+      return {
+        value: option,
+        isSelected: optionsSelected.includes(option),
+      };
+    });
   });
 
   function handleCheckboxChanged(e, option) {
     if (!canSelectMultipleOptions) {
-      optionsData.forEach(option => option.isSelected = false);
+      optionsData.forEach(option => (option.isSelected = false));
       option.isSelected = true;
     } else {
       option.isSelected = e.target.checked;
@@ -45,8 +45,7 @@
       .map(option => option.value)
       .join(',');
 
-    if(!canSelectMultipleOptions)
-      handleConfirm();
+    if (!canSelectMultipleOptions) handleConfirm();
   }
 
   function handleConfirm() {
@@ -70,13 +69,8 @@
   }
 </script>
 
-<div
-  use:clickOutside
-  on:clickOutside={handleClickOutside}
-  on:keydown={handleKeyDown}
-  class="inplaceselect"
->
-  <div on:click={() => isOptionsHidden = !isOptionsHidden} class="value">
+<div use:clickOutside on:clickOutside={handleClickOutside} on:keydown={handleKeyDown} class="inplaceselect">
+  <div on:click={() => (isOptionsHidden = !isOptionsHidden)} class="value">
     {value}
   </div>
 
@@ -89,11 +83,12 @@
   <div class="options" class:hidden={isOptionsHidden}>
     {#each optionsData ?? [] as option}
       <label>
-        <input type="checkbox"
+        <input
+          type="checkbox"
           on:change={e => handleCheckboxChanged(e, option)}
           bind:checked={option.isSelected}
           class:hidden={!canSelectMultipleOptions}
-        >
+        />
         {option.value}
       </label>
     {/each}
@@ -113,7 +108,7 @@
     background-color: var(--theme-bg-alt);
     max-height: 150px;
     overflow: auto;
-    box-shadow: 0 1px 10px 1px var(--theme-bg-inv-3);;
+    box-shadow: 0 1px 10px 1px var(--theme-bg-inv-3);
   }
 
   .value {

packages/web/src/elements/SelectionMapView.svelte

@@ -37,7 +37,7 @@
   function createColumnsTable(cells) {
     if (cells.length == 0) return '';
     return `<table>${cells
-      .map(cell => `<tr><td>${cell.column}</td><td>${stringifyCellValue(cell.value)}</td></tr>`)
+      .map(cell => `<tr><td>${cell.column}</td><td>${stringifyCellValue(cell.value, 'exportIntent').value}</td></tr>`)
       .join('\n')}</table>`;
   }
 

packages/web/src/perspectives/PerspectiveCell.svelte

@@ -15,7 +15,7 @@
     if (force && value?.type == 'Buffer' && _.isArray(value.data)) {
       return String.fromCharCode.apply(String, value.data);
     }
-    return stringifyCellValue(value);
+    return stringifyCellValue(value, 'gridCellIntent').value;
   }
 </script>
 

packages/web/src/utility/clipboard.ts

@@ -75,7 +75,7 @@ export async function getClipboardText() {
 export function extractRowCopiedValue(row, col, editorTypes?: DataEditorTypesBehaviour) {
   let value = row[col];
   if (value === undefined) value = _.get(row, col);
-  return stringifyCellValue(value, editorTypes);
+  return stringifyCellValue(value, 'exportIntent', editorTypes).value;
 }
 
 const clipboardHeadersFormatter = delimiter => columns => {