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';
- |