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

refactor: joined FreeTableGrid and DataGrid into one component

Browse Source
This commit is contained in:
Jan Prochazka
2021-04-04 08:05:29 +02:00
parent 9e9991c675
commit 0413f4b4d9
4 changed files with 71 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
packages/web/src/datagrid/DataGrid.svelte
View File

@@ -1,3 +1,14 @@
<script lang="ts" context="module">
function extractMacroValuesForMacro(macroValues, macro) {
// return {};
if (!macro) return {};
return {
..._.fromPairs((macro.args || []).filter(x => x.default != null).map(x => [x.name, x.default])),
..._.mapKeys(macroValues, (v, k) => k.replace(/^.*#/, '')),
};
}
</script>
<script lang="ts">
import { setContext } from 'svelte';
import { writable } from 'svelte/store';
@@ -6,7 +17,6 @@
import HorizontalSplitter from '../elements/HorizontalSplitter.svelte';
import VerticalSplitter from '../elements/VerticalSplitter.svelte';
import FormViewFilters from '../formview/FormViewFilters.svelte';
import { extractMacroValuesForMacro } from '../freetable/FreeTableGrid.svelte';
import MacroDetail from '../freetable/MacroDetail.svelte';
import MacroManager from '../freetable/MacroManager.svelte';
import createRef from '../utility/createRef';
@@ -14,6 +24,7 @@
import WidgetColumnBarItem from '../widgets/WidgetColumnBarItem.svelte';
import ColumnManager from './ColumnManager.svelte';
import ReferenceManager from './ReferenceManager.svelte';
import FreeTableColumnEditor from '../freetable/FreeTableColumnEditor.svelte';
export let config;
export let gridCoreComponent;
@@ -26,6 +37,9 @@
export let isDetailView = false;
export let showReferences = false;
export let showMacros;
export let freeTableColumn = false;
export let macroCondition;
export let onRunMacro;
export let loadedRows;
@@ -41,27 +55,39 @@
$: isFormView = !!(formDisplay && formDisplay.config && formDisplay.config.isFormView);
const handleExecuteMacro = () => {
const newChangeSet = runMacroOnChangeSet(
$selectedMacro,
extractMacroValuesForMacro($macroValues, $selectedMacro),
selectedCellsPublished,
changeSetState?.value,
display
);
if (newChangeSet) {
dispatchChangeSet({ type: 'set', value: newChangeSet });
}
onRunMacro($selectedMacro, extractMacroValuesForMacro($macroValues, $selectedMacro), selectedCellsPublished);
$selectedMacro = null;
// const newChangeSet = runMacroOnChangeSet(
// $selectedMacro,
// extractMacroValuesForMacro($macroValues, $selectedMacro),
// selectedCellsPublished,
// changeSetState?.value,
// display
// );
// if (newChangeSet) {
// dispatchChangeSet({ type: 'set', value: newChangeSet });
// }
// $selectedMacro = null;
};
</script>
<HorizontalSplitter initialValue="300px" bind:size={managerSize}>
<div class="left" slot="1">
<WidgetColumnBar>
<WidgetColumnBarItem title="Columns" name="columns" height={showReferences ? '40%' : '60%'} skip={isFormView}>
<WidgetColumnBarItem
title="Columns"
name="columns"
height={showReferences ? '40%' : '60%'}
skip={freeTableColumn || isFormView}
>
<ColumnManager {...$$props} {managerSize} />
</WidgetColumnBarItem>
<WidgetColumnBarItem title="Columns" name="freeColumns" height="40%" skip={!freeTableColumn}>
<FreeTableColumnEditor {...$$props} {managerSize} />
</WidgetColumnBarItem>
<WidgetColumnBarItem title="Filters" name="filters" height="30%" skip={!isFormView}>
<FormViewFilters {...$$props} {managerSize} />
</WidgetColumnBarItem>
@@ -77,7 +103,7 @@
</WidgetColumnBarItem>
<WidgetColumnBarItem title="Macros" name="macros" skip={!showMacros} collapsed={isDetailView}>
<MacroManager {...$$props} {managerSize} macroCondition={macro => macro.type == 'transformValue'} />
<MacroManager {...$$props} {managerSize} />
</WidgetColumnBarItem>
</WidgetColumnBar>
</div>

20
packages/web/src/datagrid/TableDataGrid.svelte
View File

@@ -1,5 +1,11 @@
<script lang="ts">
import { createGridCache, createGridConfig, TableFormViewDisplay, TableGridDisplay } from 'dbgate-datalib';
import {
createGridCache,
createGridConfig,
runMacroOnChangeSet,
TableFormViewDisplay,
TableGridDisplay,
} from 'dbgate-datalib';
import { getFilterValueExpression } from 'dbgate-filterparser';
import { findEngineDriver } from 'dbgate-tools';
import _ from 'lodash';
@@ -20,6 +26,9 @@
export let schemaName;
export let pureName;
export let changeSetState;
export let dispatchChangeSet;
export let config;
export let setConfig;
@@ -106,6 +115,13 @@
setChildConfig(null, null);
};
function handleRunMacro(macro, params, cells) {
const newChangeSet = runMacroOnChangeSet(macro, params, cells, changeSetState?.value, display);
if (newChangeSet) {
dispatchChangeSet({ type: 'set', value: newChangeSet });
}
}
$: reference = config.reference;
$: childConfig = config.childConfig;
</script>
@@ -120,6 +136,8 @@
{formDisplay}
showReferences
showMacros
onRunMacro={handleRunMacro}
macroCondition={macro => macro.type == 'transformValue'}
onReferenceSourceChanged={reference ? handleReferenceSourceChanged : null}
onReferenceClick={value => {
if (value && value.referenceId && reference && reference.referenceId == value.referenceId) {

101
packages/web/src/freetable/FreeTableGrid.svelte
View File

@@ -1,101 +0,0 @@
<script lang="ts" context="module">
export function extractMacroValuesForMacro(macroValues, macro) {
// return {};
if (!macro) return {};
return {
..._.fromPairs((macro.args || []).filter(x => x.default != null).map(x => [x.name, x.default])),
..._.mapKeys(macroValues, (v, k) => k.replace(/^.*#/, '')),
};
}
</script>
<script lang="ts">
import HorizontalSplitter from '../elements/HorizontalSplitter.svelte';
import VerticalSplitter from '../elements/VerticalSplitter.svelte';
import WidgetColumnBar from '../widgets/WidgetColumnBar.svelte';
import WidgetColumnBarItem from '../widgets/WidgetColumnBarItem.svelte';
import ColumnManager from '../datagrid/ColumnManager.svelte';
import ReferenceManager from '../datagrid/ReferenceManager.svelte';
import FreeTableGridCore from './FreeTableGridCore.svelte';
import FreeTableColumnEditor from './FreeTableColumnEditor.svelte';
import MacroManager from './MacroManager.svelte';
import { setContext } from 'svelte';
import { writable } from 'svelte/store';
import MacroDetail from './MacroDetail.svelte';
import { runMacro } from 'dbgate-datalib';
import _ from 'lodash';
export let modelState;
export let dispatchModel;
let managerSize;
let selectedCellsPublished = [];
const selectedMacro = writable(null);
setContext('selectedMacro', selectedMacro);
const macroValues = writable({});
setContext('macroValues', macroValues);
const handleExecuteMacro = () => {
const newModel = runMacro(
$selectedMacro,
extractMacroValuesForMacro($macroValues, $selectedMacro),
modelState.value,
false,
selectedCellsPublished
);
dispatchModel({ type: 'set', value: newModel });
$selectedMacro = null;
};
</script>
<HorizontalSplitter initialValue="300px" bind:size={managerSize}>
<div class="left" slot="1">
<WidgetColumnBar>
<WidgetColumnBarItem title="Columns" name="columns" height="40%">
<FreeTableColumnEditor {...$$props} {managerSize} />
</WidgetColumnBarItem>
<WidgetColumnBarItem title="Macros" name="macros">
<MacroManager {...$$props} {managerSize} />
</WidgetColumnBarItem>
</WidgetColumnBar>
</div>
<div class="grid" slot="2">
<VerticalSplitter initialValue="70%" isSplitter={!!$selectedMacro}>
<svelte:fragment slot="1">
<FreeTableGridCore
{...$$props}
onSelectionChanged={value => (selectedCellsPublished = value)}
macroValues={extractMacroValuesForMacro($macroValues, $selectedMacro)}
{selectedCellsPublished}
macroPreview={$selectedMacro}
/>
</svelte:fragment>
<!-- macroPreview={selectedMacro}
macroValues={extractMacroValuesForMacro(macroValues, selectedMacro)}
onSelectionChanged={setSelectedCells}
{setSelectedMacro} -->
<svelte:fragment slot="2">
{#if $selectedMacro}
<MacroDetail onExecute={handleExecuteMacro} />
{/if}
</svelte:fragment>
</VerticalSplitter>
</div>
</HorizontalSplitter>
<style>
.left {
display: flex;
flex: 1;
background-color: var(--theme-bg-0);
}
.grid {
position: relative;
flex-grow: 1;
}
</style>

15
packages/web/src/tabs/FreeTableTab.svelte
View File

@@ -1,9 +1,11 @@
<script lang="ts">
import { createFreeTableModel } from 'dbgate-datalib';
import { createFreeTableModel, runMacro } from 'dbgate-datalib';
import DataGrid from '../datagrid/DataGrid.svelte';
import ErrorInfo from '../elements/ErrorInfo.svelte';
import LoadingInfo from '../elements/LoadingInfo.svelte';
import FreeTableGrid from '../freetable/FreeTableGrid.svelte';
import FreeTableGridCore from '../freetable/FreeTableGridCore.svelte';
import { showModal } from '../modals/modalTools';
import SaveArchiveModal from '../modals/SaveArchiveModal.svelte';
import useEditorData from '../query/useEditorData';
@@ -52,6 +54,11 @@
props: { archiveFile: file, archiveFolder: folder },
}));
};
function handleRunMacro(macro, params, cells) {
const newModel = runMacro(macro, params, $modelState.value, false, cells);
dispatchModel({ type: 'set', value: newModel });
}
</script>
{#if isLoading}
@@ -59,12 +66,16 @@
{:else if errorMessage}
<ErrorInfo message={errorMessage} />
{:else}
<FreeTableGrid
<DataGrid
config={$config}
setConfig={config.update}
modelState={$modelState}
{dispatchModel}
onSave={handleSave}
focusOnVisible
gridCoreComponent={FreeTableGridCore}
freeTableColumn
showMacros
onRunMacro={handleRunMacro}
/>
{/if}