diff --git a/packages/web/src/perspectives/PerspectiveCell.svelte b/packages/web/src/perspectives/PerspectiveCell.svelte index 8304fc4c6..8bde09d23 100644 --- a/packages/web/src/perspectives/PerspectiveCell.svelte +++ b/packages/web/src/perspectives/PerspectiveCell.svelte @@ -4,9 +4,10 @@ export let value; export let rowSpan; export let rowData; + export let columnIndex; - + {#if value !== undefined} {/if} diff --git a/packages/web/src/perspectives/PerspectiveHeaderControl.svelte b/packages/web/src/perspectives/PerspectiveHeaderControl.svelte index 8601a2cd6..fae412f8f 100644 --- a/packages/web/src/perspectives/PerspectiveHeaderControl.svelte +++ b/packages/web/src/perspectives/PerspectiveHeaderControl.svelte @@ -74,6 +74,7 @@ (mouseIn = true)} on:mouseleave={() => (mouseIn = false)} > diff --git a/packages/web/src/perspectives/PerspectiveNodeRow.svelte b/packages/web/src/perspectives/PerspectiveNodeRow.svelte index 5147893e4..7a7b2b295 100644 --- a/packages/web/src/perspectives/PerspectiveNodeRow.svelte +++ b/packages/web/src/perspectives/PerspectiveNodeRow.svelte @@ -7,6 +7,7 @@ import { showModal } from '../modals/modalTools'; import contextMenu from '../utility/contextMenu'; import CustomJoinModal from './CustomJoinModal.svelte'; + import { getPerspectiveNodeMenu } from './perspectiveMenu'; export let conid; export let database; @@ -16,41 +17,14 @@ export let setConfig: ChangePerspectiveConfigFunc; function createMenu() { - const customJoin = node.customJoinConfig; - const filterInfo = node.filterInfo; - return [ - filterInfo && { - text: 'Add to filter', - onClick: () => - setConfig(cfg => ({ - ...cfg, - filterInfos: { - ...cfg.filterInfos, - [node.uniqueName]: filterInfo, - }, - })), - }, - customJoin && { - text: 'Remove custom join', - onClick: () => - setConfig(cfg => ({ - ...cfg, - customJoins: (cfg.customJoins || []).filter(x => x.joinid != customJoin.joinid), - })), - }, - customJoin && { - text: 'Edit custom join', - onClick: () => - showModal(CustomJoinModal, { - config, - setConfig, - conid, - database, - root, - editValue: customJoin, - }), - }, - ]; + return getPerspectiveNodeMenu({ + conid, + database, + node, + root, + config, + setConfig, + }); } diff --git a/packages/web/src/perspectives/PerspectiveTable.svelte b/packages/web/src/perspectives/PerspectiveTable.svelte index ecf7323ac..576df50f6 100644 --- a/packages/web/src/perspectives/PerspectiveTable.svelte +++ b/packages/web/src/perspectives/PerspectiveTable.svelte @@ -29,6 +29,7 @@ import PerspectiveLoadingIndicator from './PerspectiveLoadingIndicator.svelte'; import PerspectiveHeaderControl from './PerspectiveHeaderControl.svelte'; import createRef from '../utility/createRef'; + import { getPerspectiveNodeMenu } from './perspectiveMenu'; const dbg = debug('dbgate:PerspectivaTable'); export const activator = createActivator('PerspectiveTable', true); @@ -37,6 +38,8 @@ export let loadedCounts; export let config; export let setConfig; + export let conid; + export let database; let dataRows; let domWrapper; @@ -151,18 +154,34 @@ checkLoadAdditionalData(); } - function buildMenu() { - return [ - { - command: 'perspective.refresh', - }, - { - command: 'perspective.openJson', - }, - { - command: 'perspective.customJoin', - }, - ]; + function buildMenu({ targetElement }) { + const res = []; + const td = targetElement.closest('td') || targetElement.closest('th'); + + if (td) { + const columnIndex = td.getAttribute('data-column'); + const column = display?.columns?.[columnIndex]; + if (column) + res.push( + getPerspectiveNodeMenu({ + config, + conid, + database, + node: column.dataNode, + root, + setConfig, + }) + ); + } + + res.push([ + { divider: true }, + { command: 'perspective.refresh' }, + { command: 'perspective.openJson' }, + { command: 'perspective.customJoin' }, + ]); + + return res; } function getLastVisibleRowIndex() { @@ -301,6 +320,7 @@ {#each display.columns as column} {#if !row.rowCellSkips[column.columnIndex]} - + diff --git a/packages/web/src/perspectives/perspectiveMenu.ts b/packages/web/src/perspectives/perspectiveMenu.ts new file mode 100644 index 000000000..e4fea7619 --- /dev/null +++ b/packages/web/src/perspectives/perspectiveMenu.ts @@ -0,0 +1,51 @@ +import { ChangePerspectiveConfigFunc, PerspectiveConfig, PerspectiveTreeNode } from 'dbgate-datalib'; +import { showModal } from '../modals/modalTools'; +import CustomJoinModal from './CustomJoinModal.svelte'; + +interface PerspectiveNodeMenuProps { + node: PerspectiveTreeNode; + conid: string; + database: string; + root: PerspectiveTreeNode; + config: PerspectiveConfig; + setConfig: ChangePerspectiveConfigFunc; +} + +export function getPerspectiveNodeMenu(props: PerspectiveNodeMenuProps) { + const { node, conid, database, root, config, setConfig } = props; + const customJoin = node.customJoinConfig; + const filterInfo = node.filterInfo; + return [ + filterInfo && { + text: 'Add to filter', + onClick: () => + setConfig(cfg => ({ + ...cfg, + filterInfos: { + ...cfg.filterInfos, + [node.uniqueName]: filterInfo, + }, + })), + }, + customJoin && { + text: 'Remove custom join', + onClick: () => + setConfig(cfg => ({ + ...cfg, + customJoins: (cfg.customJoins || []).filter(x => x.joinid != customJoin.joinid), + })), + }, + customJoin && { + text: 'Edit custom join', + onClick: () => + showModal(CustomJoinModal, { + config, + setConfig, + conid, + database, + root, + editValue: customJoin, + }), + }, + ]; +}