enum + set for mysql (#693)

* enum + set for mysql

* enum + set for mysql | dropdown

* enum for mysql | removed empty option

packages/tools/src/SqlDumper.ts

@@ -205,7 +205,18 @@ export class SqlDumper implements AlterProcessor {
       if (column.isPersisted) this.put(' ^persisted');
       return;
     }
-    this.put('%k', column.dataType || this.dialect.fallbackDataType);
+
+    const type = column.dataType || this.dialect.fallbackDataType;
+    const typeWithValues = type.match(/([^(]+)(\(.+[^)]\))/);
+
+    if (typeWithValues?.length) {
+      typeWithValues.shift();
+      this.putRaw(SqlDumper.convertKeywordCase(typeWithValues.shift()));
+      this.putRaw(typeWithValues);
+    } else {
+      this.putRaw(SqlDumper.convertKeywordCase(type));
+    }
+
     if (column.autoIncrement) {
       this.autoIncrement();
     }

packages/types/dbinfo.d.ts

@@ -60,6 +60,8 @@ export interface ColumnInfo extends NamedObjectInfo {
   columnComment?: string;
   isUnsigned?: boolean;
   isZerofill?: boolean;
+  options?: [];
+  canSelectMultipleOptions?: boolean,
 }
 
 export interface DatabaseObjectInfo extends NamedObjectInfo {

packages/web/src/datagrid/DataGridCore.svelte

@@ -1162,7 +1162,7 @@
     if (event.target.closest('.resizeHandleControl')) return;
     if (event.target.closest('.collapseButtonMarker')) return;
     if (event.target.closest('.showFormButtonMarker')) return;
-    if (event.target.closest('input')) return;
+    if (event.target.closest('.inplaceeditor-container')) return;
 
     shiftDragStartCell = null;
     // event.target.closest('table').focus();

packages/web/src/datagrid/DataGridRow.svelte

@@ -54,15 +54,15 @@
   <RowHeaderCell {rowIndex} onShowForm={onSetFormView ? () => onSetFormView(rowData, null) : null} />
   {#each visibleRealColumns as col (col.uniqueName)}
     {#if inplaceEditorState.cell && rowIndex == inplaceEditorState.cell[0] && col.colIndex == inplaceEditorState.cell[1]}
-      <td class='editor'>
       <InplaceEditor
         width={col.width}
         {inplaceEditorState}
         {dispatchInsplaceEditor}
         cellValue={rowData[col.uniqueName]}
+        options="{col.options}"
+        canSelectMultipleOptions="{col.canSelectMultipleOptions}"
         onSetValue={value => grider.setCellValue(rowIndex, col.uniqueName, value)}
       />
-      </td>
     {:else}
       <DataGridCell
         {rowIndex}
@@ -100,10 +100,6 @@
     background-color: var(--theme-bg-0);
   }
 
-  td.editor {
-    position: relative;
-  }
-
   tr:nth-child(6n + 3) {
     background-color: var(--theme-bg-1);
   }

packages/web/src/datagrid/InplaceEditor.svelte

@@ -1,134 +1,41 @@
 <script lang="ts">
-  import keycodes from '../utility/keycodes';
+  import InplaceInput from './InplaceInput.svelte';
-  import { onMount, tick } from 'svelte';
+  import InplaceSelect from './InplaceSelect.svelte';
-  import createRef from '../utility/createRef';
-  import _ from 'lodash';
-  import { arrayToHexString, parseCellValue, stringifyCellValue } from 'dbgate-tools';
-  import { isCtrlOrCommandKey } from '../utility/common';
-  import ShowFormButton from '../formview/ShowFormButton.svelte';
-  import { showModal } from '../modals/modalTools';
-  import EditCellDataModal from '../modals/EditCellDataModal.svelte';
 
   export let inplaceEditorState;
   export let dispatchInsplaceEditor;
   export let onSetValue;
   export let width;
   export let cellValue;
-  export let fillParent = false;
+  export let options;
-
+  export let canSelectMultipleOptions;
-  let domEditor;
-  let showEditorButton = true;
-
-  const widthCopy = width;
-
-  const isChangedRef = createRef(!!inplaceEditorState.text);
-
-  function handleKeyDown(event) {
-    showEditorButton = false;
-
-    switch (event.keyCode) {
-      case keycodes.escape:
-        isChangedRef.set(false);
-        dispatchInsplaceEditor({ type: 'close' });
-        break;
-      case keycodes.enter:
-        if (isChangedRef.get()) {
-          onSetValue(parseCellValue(domEditor.value));
-          isChangedRef.set(false);
-        }
-        domEditor.blur();
-        event.preventDefault();
-        dispatchInsplaceEditor({ type: 'close', mode: 'enter' });
-        break;
-      case keycodes.tab:
-        if (isChangedRef.get()) {
-          onSetValue(parseCellValue(domEditor.value));
-          isChangedRef.set(false);
-        }
-        domEditor.blur();
-        event.preventDefault();
-        dispatchInsplaceEditor({ type: 'close', mode: event.shiftKey ? 'shiftTab' : 'tab' });
-        break;
-      case keycodes.s:
-        if (isCtrlOrCommandKey(event)) {
-          if (isChangedRef.get()) {
-            onSetValue(parseCellValue(domEditor.value));
-            isChangedRef.set(false);
-          }
-          event.preventDefault();
-          dispatchInsplaceEditor({ type: 'close', mode: 'save' });
-        }
-        break;
-    }
-  }
-
-  function handleBlur() {
-    if (isChangedRef.get()) {
-      onSetValue(parseCellValue(domEditor.value));
-      // grider.setCellValue(rowIndex, uniqueName, editor.value);
-      isChangedRef.set(false);
-    }
-    dispatchInsplaceEditor({ type: 'close' });
-  }
-
-  onMount(() => {
-    domEditor.value = inplaceEditorState.text || stringifyCellValue(cellValue);
-    domEditor.focus();
-    if (inplaceEditorState.selectAll) {
-      domEditor.select();
-    }
-  });
-
-  $: realWidth = widthCopy ? widthCopy - (showEditorButton ? 16 : 0) : undefined;
 </script>
 
-<input
+<td class="editor">
-  type="text"
+  <div class="inplaceeditor-container">
-  on:change={() => {
+    {#if options}
-    isChangedRef.set(true);
+      <InplaceSelect
-    showEditorButton = false;
+        {inplaceEditorState}
-  }}
+        {dispatchInsplaceEditor}
-  on:keydown={handleKeyDown}
+        {cellValue}
-  on:blur={handleBlur}
+        {onSetValue}
-  bind:this={domEditor}
+        {options}
-  style={widthCopy ? `width:${realWidth}px;min-width:${realWidth}px;max-width:${realWidth}px` : undefined}
+        {canSelectMultipleOptions}
-  class:fillParent
-  class:showEditorButton
-/>
-
-{#if showEditorButton}
-  <ShowFormButton
-    icon="icon edit"
-    on:click={() => {
-      isChangedRef.set(false);
-      dispatchInsplaceEditor({ type: 'close' });
-
-      showModal(EditCellDataModal, {
-        value: stringifyCellValue(cellValue),
-        onSave: onSetValue,
-      });
-    }}
       />
-{/if}
+    {:else}
+      <InplaceInput
+        {width}
+        {inplaceEditorState}
+        {dispatchInsplaceEditor}
+        {cellValue}
+        {onSetValue}
+      />
+    {/if}
+  </div>
+</td>
 
 <style>
-  input {
+  td.editor {
-    border: 0px solid;
+    position: relative;
-    outline: none;
-    margin: 0px;
-    padding: 0px;
-  }
-
-  input.fillParent {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto;
-  }
-
-  input.showEditorButton {
-    margin-right: 16px;
   }
 </style>

packages/web/src/datagrid/InplaceInput.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import keycodes from '../utility/keycodes';
+  import { onMount, tick } from 'svelte';
+  import createRef from '../utility/createRef';
+  import _ from 'lodash';
+  import { arrayToHexString, parseCellValue, stringifyCellValue } from 'dbgate-tools';
+  import { isCtrlOrCommandKey } from '../utility/common';
+  import ShowFormButton from '../formview/ShowFormButton.svelte';
+  import { showModal } from '../modals/modalTools';
+  import EditCellDataModal from '../modals/EditCellDataModal.svelte';
+
+  export let inplaceEditorState;
+  export let dispatchInsplaceEditor;
+  export let onSetValue;
+  export let width;
+  export let cellValue;
+
+  let domEditor;
+  let showEditorButton = true;
+
+  const widthCopy = width;
+
+  const isChangedRef = createRef(!!inplaceEditorState.text);
+
+  function handleKeyDown(event) {
+    showEditorButton = false;
+
+    switch (event.keyCode) {
+      case keycodes.escape:
+        isChangedRef.set(false);
+        dispatchInsplaceEditor({ type: 'close' });
+        break;
+      case keycodes.enter:
+        if (isChangedRef.get()) {
+          onSetValue(parseCellValue(domEditor.value));
+          isChangedRef.set(false);
+        }
+        domEditor.blur();
+        event.preventDefault();
+        dispatchInsplaceEditor({ type: 'close', mode: 'enter' });
+        break;
+      case keycodes.tab:
+        if (isChangedRef.get()) {
+          onSetValue(parseCellValue(domEditor.value));
+          isChangedRef.set(false);
+        }
+        domEditor.blur();
+        event.preventDefault();
+        dispatchInsplaceEditor({ type: 'close', mode: event.shiftKey ? 'shiftTab' : 'tab' });
+        break;
+      case keycodes.s:
+        if (isCtrlOrCommandKey(event)) {
+          if (isChangedRef.get()) {
+            onSetValue(parseCellValue(domEditor.value));
+            isChangedRef.set(false);
+          }
+          event.preventDefault();
+          dispatchInsplaceEditor({ type: 'close', mode: 'save' });
+        }
+        break;
+    }
+  }
+
+  function handleBlur() {
+    if (isChangedRef.get()) {
+      onSetValue(parseCellValue(domEditor.value));
+      // grider.setCellValue(rowIndex, uniqueName, editor.value);
+      isChangedRef.set(false);
+    }
+    dispatchInsplaceEditor({ type: 'close' });
+  }
+
+  onMount(() => {
+    domEditor.value = inplaceEditorState.text || stringifyCellValue(cellValue);
+    domEditor.focus();
+    if (inplaceEditorState.selectAll) {
+      domEditor.select();
+    }
+  });
+
+  $: realWidth = widthCopy ? widthCopy - (showEditorButton ? 16 : 0) : undefined;
+</script>
+
+<input
+  type="text"
+  on:change={() => {
+    isChangedRef.set(true);
+    showEditorButton = false;
+  }}
+  on:keydown={handleKeyDown}
+  on:blur={handleBlur}
+  bind:this={domEditor}
+  style={widthCopy ? `width:${realWidth}px;min-width:${realWidth}px;max-width:${realWidth}px` : undefined}
+  class:showEditorButton
+/>
+
+{#if showEditorButton}
+  <ShowFormButton
+    icon="icon edit"
+    on:click={() => {
+      isChangedRef.set(false);
+      dispatchInsplaceEditor({ type: 'close' });
+
+      showModal(EditCellDataModal, {
+        value: stringifyCellValue(cellValue),
+        onSave: onSetValue,
+      });
+    }}
+  />
+{/if}
+
+<style>
+  input {
+    border: 0 solid;
+    outline: none;
+    margin: 0;
+    padding: 0 1px;
+  }
+
+  input.showEditorButton {
+    margin-right: 16px;
+  }
+</style>

packages/web/src/datagrid/InplaceSelect.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+  import { stringifyCellValue } from 'dbgate-tools';
+  import { onMount } from 'svelte';
+  import ShowFormButton from '../formview/ShowFormButton.svelte';
+  import clickOutside from '../utility/clickOutside';
+  import keycodes from '../utility/keycodes';
+
+  export let inplaceEditorState;
+  export let dispatchInsplaceEditor;
+  export let onSetValue;
+  export let cellValue;
+  export let options;
+  export let canSelectMultipleOptions;
+
+  let value;
+  let valueInit;
+  let optionsData;
+  let isOptionsHidden = false;
+
+  onMount(() => {
+    value = inplaceEditorState.text || stringifyCellValue(cellValue);
+    valueInit = value;
+
+    const optionsSelected = value.split(',');
+    optionsData = options
+      .map(function(option) {
+        return {
+          value: option,
+          isSelected: optionsSelected.includes(option)
+        };
+      });
+  });
+
+  function handleCheckboxChanged(e, option) {
+    if (!canSelectMultipleOptions) {
+      optionsData.forEach(option => option.isSelected = false);
+      option.isSelected = true;
+    } else {
+      option.isSelected = e.target.checked;
+    }
+
+    value = optionsData
+      .filter(option => option.isSelected)
+      .map(option => option.value)
+      .join(',');
+
+    if(!canSelectMultipleOptions)
+      handleConfirm();
+  }
+
+  function handleConfirm() {
+    if (value !== valueInit) {
+      onSetValue(value);
+      dispatchInsplaceEditor({ type: 'close', mode: 'save' });
+    } else {
+      dispatchInsplaceEditor({ type: 'close' });
+    }
+  }
+
+  function handleKeyDown(e) {
+    if (e.keyCode == keycodes.enter) {
+      handleConfirm();
+    }
+  }
+
+  function handleClickOutside() {
+    isOptionsHidden = true;
+    handleConfirm();
+  }
+</script>
+
+<div
+  use:clickOutside
+  on:clickOutside={handleClickOutside}
+  on:keydown={handleKeyDown}
+  class="inplaceselect"
+>
+  <div on:click={() => isOptionsHidden = !isOptionsHidden} class="value">
+    {value}
+  </div>
+
+  {#if canSelectMultipleOptions}
+    <div class="confirm">
+      <ShowFormButton icon="icon ok" on:click={handleConfirm} />
+    </div>
+  {/if}
+
+  <div class="options" class:hidden={isOptionsHidden}>
+    {#each optionsData ?? [] as option}
+      <label>
+        <input type="checkbox"
+          on:change={e => handleCheckboxChanged(e, option)}
+          bind:checked={option.isSelected}
+          class:hidden={!canSelectMultipleOptions}
+        >
+        {option.value}
+      </label>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .options {
+    position: absolute;
+    z-index: 10;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    background-color: var(--theme-bg-alt);
+    max-height: 150px;
+    overflow: auto;
+    box-shadow: 0 1px 10px 1px var(--theme-bg-inv-3);;
+  }
+
+  .value {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 20;
+    min-height: 17px;
+    background-color: var(--theme-bg-0);
+    height: 100%;
+    width: calc(100% - 4px);
+    padding: 0 2px;
+    display: flex;
+    align-items: center;
+    overflow-x: hidden;
+  }
+
+  .confirm {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 30;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  label {
+    padding: 2px 3px;
+    border-bottom: 1px solid var(--theme-border);
+    display: block;
+    min-height: 16px;
+  }
+
+  label:hover {
+    background-color: var(--theme-bg-hover);
+  }
+</style>

packages/web/src/formview/FormView.svelte

@@ -321,7 +321,7 @@
   const handleTableMouseDown = event => {
     if (event.target.closest('.buttonLike')) return;
     if (event.target.closest('.resizeHandleControl')) return;
-    if (event.target.closest('input')) return;
+    if (event.target.closest('.inplaceeditor-container')) return;
     if (event.target.closest('.showFormButtonMarker')) return;
 
     event.preventDefault();
@@ -628,6 +628,19 @@
                 <ColumnLabel {...col} headerText={col.columnName} showDataType {conid} {database} />
               </div>
             </td>
+            {#if rowData && $inplaceEditorState.cell && rowIndex == $inplaceEditorState.cell[0] && chunkIndex * 2 + 1 == $inplaceEditorState.cell[1]}
+              <InplaceEditor
+                width={getCellWidth(rowIndex, chunkIndex * 2 + 1)}
+                inplaceEditorState={$inplaceEditorState}
+                {dispatchInsplaceEditor}
+                cellValue={rowData[col.uniqueName]}
+                options="{col.options}"
+                canSelectMultipleOptions="{col.canSelectMultipleOptions}"
+                onSetValue={value => {
+                  grider.setCellValue(0, col.uniqueName, value);
+                }}
+              />
+            {:else}
               <DataGridCell
                 maxWidth={(wrapperWidth * 2) / 3}
                 minWidth={200}
@@ -646,20 +659,8 @@
                   chunkIndex * 2 + 1 == $inplaceEditorState.cell[1])}
                 isCurrentCell={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2 + 1}
                 onDictionaryLookup={() => handleLookup(col)}
-            >
-              {#if rowData && $inplaceEditorState.cell && rowIndex == $inplaceEditorState.cell[0] && chunkIndex * 2 + 1 == $inplaceEditorState.cell[1]}
-                <InplaceEditor
-                  fillParent
-                  width={getCellWidth(rowIndex, chunkIndex * 2 + 1)}
-                  inplaceEditorState={$inplaceEditorState}
-                  {dispatchInsplaceEditor}
-                  cellValue={rowData[col.uniqueName]}
-                  onSetValue={value => {
-                    grider.setCellValue(0, col.uniqueName, value);
-                  }}
               />
             {/if}
-            </DataGridCell>
           </tr>
         {/each}
       </table>

plugins/dbgate-plugin-mysql/src/backend/Analyser.js

@@ -31,12 +31,22 @@ function getColumnInfo(
   driver
 ) {
   const { quoteDefaultValues } = driver.__analyserInternals;
+  let optionsInfo = {};
 
   const columnTypeTokens = _.isString(columnType) ? columnType.split(' ').map(x => x.trim().toLowerCase()) : [];
   let fullDataType = dataType;
   if (charMaxLength && isTypeString(dataType)) fullDataType = `${dataType}(${charMaxLength})`;
-  if (numericPrecision && numericScale && isTypeNumeric(dataType))
+  else if (numericPrecision && numericScale && isTypeNumeric(dataType))
     fullDataType = `${dataType}(${numericPrecision},${numericScale})`;
+  else {
+    const optionsTypeParts = columnType.match(/^(enum|set)\((.+)\)/i);
+    if (optionsTypeParts?.length) {
+      fullDataType = columnType;
+      optionsInfo.options = optionsTypeParts[2].split(',').map(option => option.substring(1, option.length - 1));
+      optionsInfo.canSelectMultipleOptions = optionsTypeParts[1] == 'set';
+    }
+  }
+
   return {
     notNull: !isNullable || isNullable == 'NO' || isNullable == 'no',
     autoIncrement: !!(extra && extra.toLowerCase().includes('auto_increment')),
@@ -46,6 +56,7 @@ function getColumnInfo(
     defaultValue: quoteDefaultValues ? quoteDefaultValue(defaultValue) : defaultValue,
     isUnsigned: columnTypeTokens.includes('unsigned'),
     isZerofill: columnTypeTokens.includes('zerofill'),
+    ...optionsInfo,
   };
 }
 

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

@@ -63,8 +63,8 @@ const dialect = {
     'mediumblob',
     'longtext',
     'longblob',
-    'enum(val1,val2,val3)',
+    "enum('val1','val2','val3')",
-    'set(val1,val2,val3)',
+    "set('val1','val2','val3')",
     'bit(32)',
     'tinyint',
     'bool',