dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-20 04:16:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

grid data types WIP

Browse Source
This commit is contained in:
SPRINX0\prochazka
2024-08-23 14:42:18 +02:00
parent 4ea55644c4
commit 23a52dc79e
14 changed files with 275 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
packages/web/src/datagrid/DataGridCell.svelte
View File

@@ -1,13 +1,14 @@
<script lang="ts">
import _ from 'lodash';
import ShowFormButton from '../formview/ShowFormButton.svelte';
import { isJsonLikeLongString, safeJsonParse } from 'dbgate-tools';
import { detectTypeIcon, getConvertValueMenu, isJsonLikeLongString, safeJsonParse } from 'dbgate-tools';
import { openJsonDocument } from '../tabs/JsonTab.svelte';
import openNewTab from '../utility/openNewTab';
import CellValue from './CellValue.svelte';
import { showModal } from '../modals/modalTools';
import EditCellDataModal from '../modals/EditCellDataModal.svelte';
import { openJsonLinesData } from '../utility/openJsonLinesData';
import ShowFormDropDownButton from '../formview/ShowFormDropDownButton.svelte';
export let rowIndex;
export let col;
@@ -33,6 +34,7 @@
export let isCurrentCell = false;
export let onDictionaryLookup = null;
export let onSetValue;
export let editorTypes = null;
$: value = col.isStructured ? _.get(rowData || {}, col.uniquePath) : (rowData || {})[col.uniqueName];
@@ -51,7 +53,9 @@
$: style = computeStyle(maxWidth, col);
$: isJson = _.isPlainObject(value) && !(value?.type == 'Buffer' && _.isArray(value.data)) && !value.$oid;
$: jsonParsedValue = isJsonLikeLongString(value) ? safeJsonParse(value) : null;
// don't parse JSON for explicit data types
$: jsonParsedValue = !editorTypes?.explicitDataType && isJsonLikeLongString(value) ? safeJsonParse(value) : null;
</script>
<td
@@ -76,23 +80,22 @@
>
{/if}
{#if col.foreignKey && rowData && rowData[col.uniqueName] && !isCurrentCell}
{#if editorTypes?.explicitDataType}
{#if value !== undefined}
<ShowFormDropDownButton
icon={detectTypeIcon(value)}
menu={() => getConvertValueMenu(value, onSetValue, editorTypes)}
/>
{/if}
{:else if col.foreignKey && rowData && rowData[col.uniqueName] && !isCurrentCell}
<ShowFormButton on:click={() => onSetFormView(rowData, col)} />
{/if}
{#if col.foreignKey && isCurrentCell && onDictionaryLookup}
{:else if col.foreignKey && isCurrentCell && onDictionaryLookup}
<ShowFormButton icon="icon dots-horizontal" on:click={onDictionaryLookup} />
{/if}
{#if isJson}
{:else if isJson}
<ShowFormButton icon="icon open-in-new" on:click={() => openJsonDocument(value, undefined, true)} />
{/if}
{#if jsonParsedValue && _.isPlainObject(jsonParsedValue)}
{:else if jsonParsedValue && _.isPlainObject(jsonParsedValue)}
<ShowFormButton icon="icon open-in-new" on:click={() => openJsonDocument(jsonParsedValue, undefined, true)} />
{/if}
{#if _.isArray(jsonParsedValue || value)}
{:else if _.isArray(jsonParsedValue || value)}
<ShowFormButton
icon="icon open-in-new"
on:click={() => {

2
packages/web/src/datagrid/DataGridCore.svelte
View File

@@ -1557,7 +1557,7 @@
}
let colIndex = startCol;
for (const cell of rowData) {
setCellValue([rowIndex, colIndex], parseCellValue(cell));
setCellValue([rowIndex, colIndex], parseCellValue(cell, display?.driver?.dataEditorTypesBehaviour));
colIndex += 1;
}
rowIndex += 1;

2
packages/web/src/datagrid/DataGridRow.svelte
View File

@@ -62,6 +62,7 @@
options="{col.options}"
canSelectMultipleOptions="{col.canSelectMultipleOptions}"
onSetValue={value => grider.setCellValue(rowIndex, col.uniqueName, value)}
{driver}
/>
{:else}
<DataGridCell
@@ -70,6 +71,7 @@
{col}
{conid}
{database}
editorTypes={driver?.dataEditorTypesBehaviour}
allowHintField={hintFieldsAllowed?.includes(col.uniqueName)}
isSelected={frameSelection ? false : cellIsSelected(rowIndex, col.colIndex, selectedCells)}
isCurrentCell={col.colIndex == currentCellColumn}

3
packages/web/src/datagrid/InplaceEditor.svelte
View File

@@ -9,6 +9,7 @@
export let cellValue;
export let options;
export let canSelectMultipleOptions;
export let driver;
</script>
<td class="editor">
@@ -21,6 +22,7 @@
{onSetValue}
{options}
{canSelectMultipleOptions}
{driver}
/>
{:else}
<InplaceInput
@@ -29,6 +31,7 @@
{dispatchInsplaceEditor}
{cellValue}
{onSetValue}
{driver}
/>
{/if}
</div>

15
packages/web/src/datagrid/InplaceInput.svelte
View File

@@ -14,6 +14,7 @@
export let onSetValue;
export let width;
export let cellValue;
export let driver;
let domEditor;
let showEditorButton = true;
@@ -22,6 +23,8 @@
const isChangedRef = createRef(!!inplaceEditorState.text);
$: editorTypes = driver?.dataEditorTypesBehaviour;
function handleKeyDown(event) {
showEditorButton = false;
@@ -32,7 +35,7 @@
break;
case keycodes.enter:
if (isChangedRef.get()) {
onSetValue(parseCellValue(domEditor.value));
onSetValue(parseCellValue(domEditor.value, editorTypes));
isChangedRef.set(false);
}
domEditor.blur();
@@ -41,7 +44,7 @@
break;
case keycodes.tab:
if (isChangedRef.get()) {
onSetValue(parseCellValue(domEditor.value));
onSetValue(parseCellValue(domEditor.value, editorTypes));
isChangedRef.set(false);
}
domEditor.blur();
@@ -51,7 +54,7 @@
case keycodes.s:
if (isCtrlOrCommandKey(event)) {
if (isChangedRef.get()) {
onSetValue(parseCellValue(domEditor.value));
onSetValue(parseCellValue(domEditor.value, editorTypes));
isChangedRef.set(false);
}
event.preventDefault();
@@ -63,7 +66,7 @@
function handleBlur() {
if (isChangedRef.get()) {
onSetValue(parseCellValue(domEditor.value));
onSetValue(parseCellValue(domEditor.value, editorTypes));
// grider.setCellValue(rowIndex, uniqueName, editor.value);
isChangedRef.set(false);
}
@@ -71,7 +74,7 @@
}
onMount(() => {
domEditor.value = inplaceEditorState.text || stringifyCellValue(cellValue);
domEditor.value = inplaceEditorState.text || stringifyCellValue(cellValue, editorTypes);
domEditor.focus();
if (inplaceEditorState.selectAll) {
domEditor.select();
@@ -102,7 +105,7 @@
dispatchInsplaceEditor({ type: 'close' });
showModal(EditCellDataModal, {
value: stringifyCellValue(cellValue),
value: stringifyCellValue(cellValue, editorTypes),
onSave: onSetValue,
});
}}

3
packages/web/src/datagrid/InplaceSelect.svelte
View File

@@ -11,6 +11,7 @@
export let cellValue;
export let options;
export let canSelectMultipleOptions;
export let driver;
let value;
let valueInit;
@@ -18,7 +19,7 @@
let isOptionsHidden = false;
onMount(() => {
value = inplaceEditorState.text || stringifyCellValue(cellValue);
value = inplaceEditorState.text || stringifyCellValue(cellValue, driver?.dataEditorTypesBehaviour);
valueInit = value;
const optionsSelected = value.split(',');

20
packages/web/src/formview/FormView.svelte
View File

@@ -273,7 +273,10 @@
export function copyToClipboard() {
const column = getCellColumn(currentCell);
if (!column) return;
const text = currentCell[1] % 2 == 1 ? extractRowCopiedValue(rowData, column.uniqueName) : column.columnName;
const text =
currentCell[1] % 2 == 1
? extractRowCopiedValue(rowData, column.uniqueName, display?.driver?.dataEditorTypesBehaviour)
: column.columnName;
copyTextToClipboard(text);
}
@@ -631,11 +634,12 @@
{#if rowData && $inplaceEditorState.cell && rowIndex == $inplaceEditorState.cell[0] && chunkIndex * 2 + 1 == $inplaceEditorState.cell[1]}
<InplaceEditor
width={getCellWidth(rowIndex, chunkIndex * 2 + 1)}
driver={display?.driver}
inplaceEditorState={$inplaceEditorState}
{dispatchInsplaceEditor}
cellValue={rowData[col.uniqueName]}
options="{col.options}"
canSelectMultipleOptions="{col.canSelectMultipleOptions}"
options={col.options}
canSelectMultipleOptions={col.canSelectMultipleOptions}
onSetValue={value => {
grider.setCellValue(0, col.uniqueName, value);
}}
@@ -644,6 +648,7 @@
<DataGridCell
maxWidth={(wrapperWidth * 2) / 3}
minWidth={200}
editorTypes={display?.driver?.dataEditorTypesBehaviour}
{rowIndex}
{col}
{rowData}
@@ -654,11 +659,14 @@
bind:domCell={domCells[`${rowIndex},${chunkIndex * 2 + 1}`]}
onSetFormView={handleSetFormView}
showSlot={!rowData ||
($inplaceEditorState.cell &&
rowIndex == $inplaceEditorState.cell[0] &&
chunkIndex * 2 + 1 == $inplaceEditorState.cell[1])}
($inplaceEditorState.cell &&
rowIndex == $inplaceEditorState.cell[0] &&
chunkIndex * 2 + 1 == $inplaceEditorState.cell[1])}
isCurrentCell={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2 + 1}
onDictionaryLookup={() => handleLookup(col)}
onSetValue={value => {
grider.setCellValue(0, col.uniqueName, value);
}}
/>
{/if}
</tr>

44
packages/web/src/formview/ShowFormDropDownButton.svelte Normal file
View File

@@ -0,0 +1,44 @@
<script lang="ts">
import FontIcon from '../icons/FontIcon.svelte';
import { currentDropDownMenu } from '../stores';
export let icon = 'icon form';
export let menu;
let domButton;
function handleClick() {
const rect = domButton.getBoundingClientRect();
const left = rect.left;
const top = rect.bottom;
currentDropDownMenu.set({ left, top, items: menu });
}
</script>
<div
on:click|stopPropagation|preventDefault={handleClick}
bind:this={domButton}
on:mousedown|stopPropagation|preventDefault
on:mouseup|stopPropagation|preventDefault
class="showFormButtonMarker"
>
<FontIcon {icon} />
</div>
<style>
div {
position: absolute;
right: 0px;
top: 1px;
color: var(--theme-font-3);
background-color: var(--theme-bg-1);
border: 1px solid var(--theme-bg-1);
}
div:hover {
color: var(--theme-font-hover);
border: var(--theme-border);
top: 1px;
right: 0px;
}
</style>

10
packages/web/src/icons/FontIcon.svelte
View File

@@ -186,6 +186,16 @@
'icon num-9-outline': 'mdi mdi-numeric-9-circle-outline',
'icon num-9-plus-outline': 'mdi mdi-numeric-9-plus-circle-outline',
'icon type-string': 'mdi mdi-code-string',
'icon type-object': 'mdi mdi-code-braces-box',
'icon type-array': 'mdi mdi-code-array',
'icon type-number': 'mdi mdi-pound-box',
'icon type-boolean': 'mdi mdi-code-equal',
'icon type-date': 'mdi mdi-alpha-d-box',
'icon type-objectid': 'mdi mdi-alpha-i-box',
'icon type-null': 'mdi mdi-code-equal',
'icon type-unknown': 'mdi mdi-help-box',
'img ok': 'mdi mdi-check-circle color-icon-green',
'img ok-inv': 'mdi mdi-check-circle color-icon-inv-green',
'img alert': 'mdi mdi-alert-circle color-icon-blue',

7
packages/web/src/utility/clipboard.ts
View File

@@ -1,6 +1,7 @@
import _ from 'lodash';
import { arrayToHexString, stringifyCellValue } from 'dbgate-tools';
import yaml from 'js-yaml';
import { DataEditorTypesBehaviour } from 'dbgate-types';
export function copyTextToClipboard(text) {
const oldFocus = document.activeElement;
@@ -71,13 +72,13 @@ export async function getClipboardText() {
return await navigator.clipboard.readText();
}
export function extractRowCopiedValue(row, col) {
export function extractRowCopiedValue(row, col, editorTypes?: DataEditorTypesBehaviour) {
let value = row[col];
if (value === undefined) value = _.get(row, col);
return stringifyCellValue(value);
return stringifyCellValue(value, editorTypes);
}
const clipboardHeadersFormatter = (delimiter) => (columns) => {
const clipboardHeadersFormatter = delimiter => columns => {
return columns.join(delimiter);
};