diff --git a/packages/web/src/datagrid/DataGridCell.svelte b/packages/web/src/datagrid/DataGridCell.svelte index fa9b78d03..b785de0ac 100644 --- a/packages/web/src/datagrid/DataGridCell.svelte +++ b/packages/web/src/datagrid/DataGridCell.svelte @@ -51,14 +51,6 @@ $: isJson = _.isPlainObject(value) && !(value?.type == 'Buffer' && _.isArray(value.data)) && !value.$oid; $: jsonParsedValue = isJsonLikeLongString(value) ? safeJsonParse(value) : null; - - function shouldShowTextModalButton(col) { - const m = col?.dataType?.match(/.*char.*\(([^\)]+)\)/); - if (m && m[1]) { - return parseInt(m[1]) >= 200 || m[1]?.toUpperCase() == 'MAX'; - } - return false; - } {/if} - {#if shouldShowTextModalButton(col)} - { - showModal(EditCellDataModal, { - value, - onSave: onSetValue, - }); - }} - /> - {/if} - {#if isAutoFillMarker}
{/if} diff --git a/packages/web/src/datagrid/DataGridCore.svelte b/packages/web/src/datagrid/DataGridCore.svelte index fd1166eb2..23150c63b 100644 --- a/packages/web/src/datagrid/DataGridCore.svelte +++ b/packages/web/src/datagrid/DataGridCore.svelte @@ -1095,6 +1095,11 @@ if (display.focusedColumns) display.focusColumns(null); } + function handleBlur() { + shiftDragStartCell = null; + dragStartCell = null; + } + function showMultilineCellEditorConditional(cell) { if (!cell) return false; const rowData = grider.getRowData(cell[0]); @@ -1655,6 +1660,7 @@ }} on:paste={handlePaste} on:copy={copyToClipboard} + on:blur={handleBlur} /> onSetFormView(rowData, null) : null} /> {#each visibleRealColumns as col (col.uniqueName)} {#if inplaceEditorState.cell && rowIndex == inplaceEditorState.cell[0] && col.colIndex == inplaceEditorState.cell[1]} -
+ import keycodes from '../utility/keycodes'; - import { onMount } from 'svelte'; + 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; @@ -23,12 +26,15 @@ export let fillParent = false; 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); @@ -81,18 +87,39 @@ domEditor.select(); } }); + + $: realWidth = widthCopy ? widthCopy - (showEditorButton ? 16 : 0) : undefined; isChangedRef.set(true)} + on:change={() => { + isChangedRef.set(true); + showEditorButton = false; + }} on:keydown={handleKeyDown} on:blur={handleBlur} bind:this={domEditor} - style={widthCopy ? `width:${widthCopy}px;min-width:${widthCopy}px;max-width:${widthCopy}px` : undefined} + style={widthCopy ? `width:${realWidth}px;min-width:${realWidth}px;max-width:${realWidth}px` : undefined} class:fillParent + class:showEditorButton /> +{#if showEditorButton} + { + isChangedRef.set(false); + dispatchInsplaceEditor({ type: 'close' }); + + showModal(EditCellDataModal, { + value: stringifyCellValue(cellValue), + onSave: onSetValue, + }); + }} + /> +{/if} + diff --git a/packages/web/src/formview/FormView.svelte b/packages/web/src/formview/FormView.svelte index 294ee96a5..d9b4e3c49 100644 --- a/packages/web/src/formview/FormView.svelte +++ b/packages/web/src/formview/FormView.svelte @@ -173,6 +173,7 @@ import { plusExpandIcon } from '../icons/expandIcons'; import FontIcon from '../icons/FontIcon.svelte'; import DictionaryLookupModal from '../modals/DictionaryLookupModal.svelte'; + import EditCellDataModal from '../modals/EditCellDataModal.svelte'; import { showModal } from '../modals/modalTools'; import { apiCall } from '../utility/api'; @@ -295,7 +296,9 @@ if (isDataCell(cell) && !_.isEqual(cell, $inplaceEditorState.cell) && _.isEqual(cell, currentCell)) { // @ts-ignore if (rowData) { - dispatchInsplaceEditor({ type: 'show', cell, selectAll: true }); + if (!showMultilineCellEditorConditional(cell)) { + dispatchInsplaceEditor({ type: 'show', cell, selectAll: true }); + } } } else if (!_.isEqual(cell, $inplaceEditorState.cell)) { // @ts-ignore @@ -426,16 +429,32 @@ } } - if (event.keyCode == keycodes.f2) { + if (event.keyCode == keycodes.f2 || event.keyCode == keycodes.enter) { // @ts-ignore if (rowData) { - dispatchInsplaceEditor({ type: 'show', cell: currentCell, selectAll: true }); + if (!showMultilineCellEditorConditional(currentCell)) { + dispatchInsplaceEditor({ type: 'show', cell: currentCell, selectAll: true }); + } } } handleCursorMove(event); } + function showMultilineCellEditorConditional(cell) { + if (!cell) return false; + const column = getCellColumn(cell); + const cellData = rowData[column.uniqueName]; + if (_.isString(cellData) && cellData.includes('\n')) { + showModal(EditCellDataModal, { + value: cellData, + onSave: value => former.setCellValue(column.uniqueName, value), + }); + return true; + } + return false; + } + const scrollIntoView = cell => { const element = domCells[`${cell[0]},${cell[1]}`]; if (element) element.scrollIntoView(); diff --git a/packages/web/src/formview/ShowFormButton.svelte b/packages/web/src/formview/ShowFormButton.svelte index 0eb4c1901..5c879cecc 100644 --- a/packages/web/src/formview/ShowFormButton.svelte +++ b/packages/web/src/formview/ShowFormButton.svelte @@ -4,7 +4,12 @@ export let icon = 'icon form'; -
+
diff --git a/packages/web/src/modals/EditCellDataModal.svelte b/packages/web/src/modals/EditCellDataModal.svelte index cafac0b78..a8e3e1ee6 100644 --- a/packages/web/src/modals/EditCellDataModal.svelte +++ b/packages/web/src/modals/EditCellDataModal.svelte @@ -1,9 +1,10 @@ - @@ -23,18 +33,18 @@
Edit cell value
- +
{ - onSave(value); + onSave(textValue); closeCurrentModal(); }} /> - +
diff --git a/packages/web/src/query/AceEditor.svelte b/packages/web/src/query/AceEditor.svelte index cf18ea1d6..8544f3b33 100644 --- a/packages/web/src/query/AceEditor.svelte +++ b/packages/web/src/query/AceEditor.svelte @@ -154,6 +154,7 @@ export let menu = null; export let readOnly = false; export let splitterOptions = null; + export let onKeyDown = null; const tabVisible: any = getContext('tabVisible'); @@ -297,6 +298,7 @@ const handleKeyDown = (data, hash, keyString, keyCode, event) => { if (event) handleCommandKeyDown(event); + if (onKeyDown && event) onKeyDown(event); }; function changedQueryParts() {