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

show sort in perspective deisgner and tree

Browse Source
This commit is contained in:
Jan Prochazka
2022-08-28 12:02:38 +02:00
parent 14110cb6db
commit f405db7685
8 changed files with 147 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
packages/web/src/designer/ColumnLine.svelte
View File

@@ -6,6 +6,7 @@
import CheckboxField from '../forms/CheckboxField.svelte';
import FontIcon from '../icons/FontIcon.svelte';
import contextMenu from '../utility/contextMenu';
import SortOrderIcon from './SortOrderIcon.svelte';
export let column;
export let table;
export let designer;
@@ -25,6 +26,16 @@
function createMenu() {
const foreignKey = findForeignKeyForColumn(table, column);
if (settings?.columnMenu) {
return settings?.columnMenu({
designer,
designerId,
column,
foreignKey,
});
}
const setSortOrder = sortOrder => {
onChangeColumn(
{
@@ -47,6 +58,8 @@
foreignKey && { text: 'Add reference', onClick: addReference },
];
}
$: sortOrderProps = settings?.getSortOrderProps ? settings?.getSortOrderProps(designerId, column.columnName) : null;
</script>
<div
@@ -144,6 +157,10 @@
<FontIcon icon="img group" />
{/if}
{#if sortOrderProps}
<SortOrderIcon {...sortOrderProps} />
{/if}
{#if designer?.style?.showNullability || designer?.style?.showDataType}
<div class="space" />
{#if designer?.style?.showDataType && column?.dataType}

23
packages/web/src/designer/SortOrderIcon.svelte Normal file
View File

@@ -0,0 +1,23 @@
<script lang="ts">
import FontIcon from '../icons/FontIcon.svelte';
export let order;
export let orderIndex;
</script>
{#if order == 'ASC'}
<span class="icon">
<FontIcon icon="img sort-asc" />
{#if orderIndex >= 0}
<span class="color-icon-green order-index">{orderIndex + 1}</span>
{/if}
</span>
{/if}
{#if order == 'DESC'}
<span class="icon">
<FontIcon icon="img sort-desc" />
{#if orderIndex >= 0}
<span class="color-icon-green order-index">{orderIndex + 1}</span>
{/if}
</span>
{/if}

34
packages/web/src/perspectives/PerspectiveDesigner.svelte
View File

@@ -5,12 +5,13 @@
PerspectiveConfig,
perspectiveNodesHaveStructure,
} from 'dbgate-datalib';
import _ from 'lodash';
import _, { findIndex } from 'lodash';
import { tick } from 'svelte';
import runCommand from '../commands/runCommand';
import Designer from '../designer/Designer.svelte';
import QueryDesignerReference from '../designer/QueryDesignerReference.svelte';
import { addToPerspectiveSort, clearPerspectiveSort, setPerspectiveSort } from './perspectiveMenu';
export let config: PerspectiveConfig;
export let dbInfos: MultipleDatabaseInfo;
@@ -130,6 +131,30 @@
referenceMenu: ({ designer, reference, onChangeReference, onRemoveReference }) => {
return [{ text: 'Remove', onClick: () => onRemoveReference(reference) }];
},
columnMenu: ({ designer, designerId, column, foreignKey }) => {
return [
{
text: 'Sort ascending',
onClick: () => onChange(cfg => setPerspectiveSort(cfg, designerId, column.columnName, 'ASC')),
},
{
text: 'Sort descending',
onClick: () => onChange(cfg => setPerspectiveSort(cfg, designerId, column.columnName, 'DESC')),
},
{
text: 'Add to sort ascending',
onClick: () => onChange(cfg => addToPerspectiveSort(cfg, designerId, column.columnName, 'ASC')),
},
{
text: 'Add to sort descending',
onClick: () => onChange(cfg => addToPerspectiveSort(cfg, designerId, column.columnName, 'DESC')),
},
{
text: 'Clear sort criteria',
onClick: () => onChange(cfg => clearPerspectiveSort(cfg, designerId)),
},
];
},
createReferenceText: reference => (reference.isAutoGenerated ? 'FK' : 'Custom'),
isColumnChecked: (designerId, columnName) => {
return config.nodes.find(x => x.designerId == designerId)?.checkedColumns?.includes(columnName);
@@ -163,6 +188,13 @@
),
}));
},
getSortOrderProps: (designerId, columnName) => {
const sort = config.nodes.find(x => x.designerId == designerId)?.sort;
const order = sort?.find(x => x.columnName == columnName)?.order;
if (!order) return null;
const orderIndex = sort.length > 1 ? _.findIndex(sort, x => x.columnName == columnName) : -1;
return { order, orderIndex };
},
}}
referenceComponent={QueryDesignerReference}
value={createDesignerModel(config, dbInfos)}

30
packages/web/src/perspectives/PerspectiveHeaderControl.svelte
View File

@@ -4,21 +4,14 @@
import DropDownButton from '../buttons/DropDownButton.svelte';
import FontIcon from '../icons/FontIcon.svelte';
import SortOrderIcon from '../designer/SortOrderIcon.svelte';
export let column: PerspectiveDisplayColumn;
export let columnLevel;
export let config: PerspectiveConfig;
export let setConfig: ChangePerspectiveConfigFunc;
// $: parentDesignerId = column.dataNode?.parentNode?.designerId || '';
// $: nodeDesignerId = column.dataNode.designerId;
$: tableNodeConfig = column.dataNode.parentNode?.nodeConfig;
$: order = tableNodeConfig?.sort?.find(x => x.columnName == column.dataNode.columnName)?.order;
// $: orderIndex = -1;
$: orderIndex =
tableNodeConfig?.sort?.length > 1
? _.findIndex(tableNodeConfig?.sort, x => x.columnName == column.dataNode.columnName)
: -1;
// $: isSortDefined = tableNodeConfig?.sort?.length > 0;
$: order = column.dataNode?.sortOrder;
$: orderIndex = column.dataNode?.sortOrderIndex;
</script>
{#if column.isVisible(columnLevel)}
@@ -28,22 +21,7 @@
{column.title}
</div>
{#if order == 'ASC'}
<span class="icon">
<FontIcon icon="img sort-asc" />
{#if orderIndex >= 0}
<span class="color-icon-green order-index">{orderIndex + 1}</span>
{/if}
</span>
{/if}
{#if order == 'DESC'}
<span class="icon">
<FontIcon icon="img sort-desc" />
{#if orderIndex >= 0}
<span class="color-icon-green order-index">{orderIndex + 1}</span>
{/if}
</span>
{/if}
<SortOrderIcon {order} {orderIndex} />
</div>
</th>
{/if}

3
packages/web/src/perspectives/PerspectiveNodeRow.svelte
View File

@@ -8,6 +8,7 @@
import contextMenu from '../utility/contextMenu';
import CustomJoinModal from './CustomJoinModal.svelte';
import { getPerspectiveNodeMenu } from './perspectiveMenu';
import SortOrderIcon from '../designer/SortOrderIcon.svelte';
export let conid;
export let database;
@@ -71,6 +72,8 @@
<FontIcon icon={node.icon} />
<span>{node.title}</span>
<SortOrderIcon order={node.sortOrder} orderIndex={node.sortOrderIndex} />
</div>
<style>

2
packages/web/src/perspectives/PerspectiveView.svelte
View File

@@ -156,7 +156,7 @@
}
}
$: console.log('PERSPECTIVE', config);
// $: console.log('PERSPECTIVE', config);
</script>
<HorizontalSplitter initialValue={getInitialManagerSize()} bind:size={managerSize}>

97
packages/web/src/perspectives/perspectiveMenu.ts
View File

@@ -12,6 +12,58 @@ interface PerspectiveNodeMenuProps {
setConfig: ChangePerspectiveConfigFunc;
}
export function setPerspectiveSort(
cfg: PerspectiveConfig,
designerId: string,
columnName: string,
order: 'ASC' | 'DESC'
): PerspectiveConfig {
return {
...cfg,
nodes: cfg.nodes.map(n =>
n.designerId == designerId
? {
...n,
sort: [{ columnName, order }],
}
: n
),
};
}
export function addToPerspectiveSort(
cfg: PerspectiveConfig,
designerId: string,
columnName: string,
order: 'ASC' | 'DESC'
): PerspectiveConfig {
return {
...cfg,
nodes: cfg.nodes.map(n =>
n.designerId == designerId
? {
...n,
sort: [...(n.sort || []).filter(x => x.columnName != columnName), { columnName, order }],
}
: n
),
};
}
export function clearPerspectiveSort(cfg: PerspectiveConfig, designerId: string) {
return {
...cfg,
nodes: cfg.nodes.map(n =>
n.designerId == designerId
? {
...n,
sort: [],
}
: n
),
};
}
export function getPerspectiveNodeMenu(props: PerspectiveNodeMenuProps) {
const { node, conid, database, root, config, setConfig } = props;
const customJoin = node.customJoinConfig;
@@ -25,37 +77,11 @@ export function getPerspectiveNodeMenu(props: PerspectiveNodeMenuProps) {
const isSortDefined = sort?.length > 0;
const setSort = order => {
setConfig(
cfg => ({
...cfg,
nodes: cfg.nodes.map(n =>
n.designerId == parentDesignerId
? {
...n,
sort: [{ columnName, order }],
}
: n
),
}),
true
);
setConfig(cfg => setPerspectiveSort(cfg, parentDesignerId, columnName, order), true);
};
const addToSort = order => {
setConfig(
cfg => ({
...cfg,
nodes: cfg.nodes.map(n =>
n.designerId == parentDesignerId
? {
...n,
sort: [...(n.sort || []), { columnName, order }],
}
: n
),
}),
true
);
setConfig(cfg => addToPerspectiveSort(cfg, parentDesignerId, columnName, order), true);
// setConfig(
// cfg => ({
@@ -70,20 +96,7 @@ export function getPerspectiveNodeMenu(props: PerspectiveNodeMenuProps) {
};
const clearSort = () => {
setConfig(
cfg => ({
...cfg,
nodes: cfg.nodes.map(n =>
n.designerId == parentDesignerId
? {
...n,
sort: [],
}
: n
),
}),
true
);
setConfig(cfg => clearPerspectiveSort(cfg, parentDesignerId), true);
// setConfig(
// cfg => ({