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

SYNC: table cell view UX

Browse Source
This commit is contained in:
SPRINX0\prochazka
2025-12-12 12:40:12 +01:00
committed by Diflow
parent 078f74db97
commit 60f31008c0
1 changed files with 11 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
packages/web/src/celldata/TableCellView.svelte
View File

@@ -2,7 +2,7 @@
import _ from 'lodash'; import _ from 'lodash';
import { tick } from 'svelte'; import { tick } from 'svelte';
import CellValue from '../datagrid/CellValue.svelte'; import CellValue from '../datagrid/CellValue.svelte';
import { isJsonLikeLongString, safeJsonParse, parseCellValue, stringifyCellValue } from 'dbgate-tools'; import { isJsonLikeLongString, safeJsonParse, parseCellValue, stringifyCellValue, filterName } from 'dbgate-tools';
import keycodes from '../utility/keycodes'; import keycodes from '../utility/keycodes';
import createRef from '../utility/createRef'; import createRef from '../utility/createRef';
import { showModal } from '../modals/modalTools'; import { showModal } from '../modals/modalTools';
@@ -13,6 +13,7 @@
import SearchInput from '../elements/SearchInput.svelte'; import SearchInput from '../elements/SearchInput.svelte';
import CloseSearchButton from '../buttons/CloseSearchButton.svelte'; import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
import { _t } from '../translations'; import { _t } from '../translations';
import ColumnLabel from '../elements/ColumnLabel.svelte';
export let selection; export let selection;
@@ -52,24 +53,19 @@
if (!col) return null; if (!col) return null;
const { value, hasMultipleValues } = getFieldValue(colName); const { value, hasMultipleValues } = getFieldValue(colName);
return { return {
columnName: col.columnName || colName, ...col,
uniqueName: colName,
value, value,
hasMultipleValues, hasMultipleValues,
col, // columnName: col.columnName || colName,
// uniqueName: colName,
// value,
// hasMultipleValues,
// col,
}; };
}) })
.filter(Boolean); .filter(Boolean);
$: filteredFields = orderedFields.filter(field => { $: filteredFields = orderedFields.filter(field => filterName(filter, field.columnName));
if (!filter) return true;
try {
const regex = new RegExp(filter, 'i');
return regex.test(field.columnName);
} catch (e) {
return field.columnName.toLowerCase().includes(filter.toLowerCase());
}
});
let editingColumn = null; let editingColumn = null;
let editValue = ''; let editValue = '';
@@ -221,7 +217,7 @@
<div class="search-wrapper" on:keydown={handleSearchKeyDown}> <div class="search-wrapper" on:keydown={handleSearchKeyDown}>
<SearchBoxWrapper noMargin> <SearchBoxWrapper noMargin>
<SearchInput <SearchInput
placeholder={_t('tableCell.filterColumns', { defaultMessage: 'Filter columns (regex)' })} placeholder={_t('tableCell.filterColumns', { defaultMessage: 'Filter columns' })}
bind:value={filter} bind:value={filter}
/> />
<CloseSearchButton bind:filter /> <CloseSearchButton bind:filter />
@@ -234,7 +230,7 @@
{:else} {:else}
{#each filteredFields as field (field.uniqueName)} {#each filteredFields as field (field.uniqueName)}
<div class="field"> <div class="field">
<div class="field-name">{field.columnName}</div> <div class="field-name"><ColumnLabel {...field} showDataType /></div>
<div class="field-value" class:editable on:dblclick={() => handleDoubleClick(field)}> <div class="field-value" class:editable on:dblclick={() => handleDoubleClick(field)}>
{#if editingColumn === field.uniqueName} {#if editingColumn === field.uniqueName}
<div class="editor-wrapper"> <div class="editor-wrapper">