diff --git a/packages/web/src/elements/ManagerInnerContainer.svelte b/packages/web/src/elements/ManagerInnerContainer.svelte index 33fedb63..fba5bf99 100644 --- a/packages/web/src/elements/ManagerInnerContainer.svelte +++ b/packages/web/src/elements/ManagerInnerContainer.svelte @@ -1,8 +1,9 @@ -
+
@@ -12,4 +13,8 @@ overflow-y: auto; overflow-x: auto; } + + div.isFlex { + display: flex; + } diff --git a/packages/web/src/perspectives/PerspectiveFilters.svelte b/packages/web/src/perspectives/PerspectiveFilters.svelte index 6f3e4f85..aa0dbb6e 100644 --- a/packages/web/src/perspectives/PerspectiveFilters.svelte +++ b/packages/web/src/perspectives/PerspectiveFilters.svelte @@ -4,6 +4,7 @@ import _ from 'lodash'; import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte'; +import FontIcon from '../icons/FontIcon.svelte'; import PerspectiveFiltersColumn from './PerspectiveFiltersColumn.svelte'; export let managerSize; @@ -13,26 +14,41 @@ $: allFilterNames = _.keys(config.filterInfos || {}); - - {#each allFilterNames as uniqueName} - - setConfig(cfg => ({ - ...cfg, - filters: { - ...cfg.filters, - [uniqueName]: value, - }, - }))} - onRemoveFilter={value => - setConfig(cfg => ({ - ...cfg, - filters: _.omit(cfg.filters, [uniqueName]), - filterInfos: _.omit(cfg.filterInfos, [uniqueName]), - }))} - /> - {/each} + + {#if allFilterNames.length == 0} +
+
No Filters defined
+
Use context menu, command "Add to filter" in table or in tree
+
+ {:else} + {#each allFilterNames as uniqueName} + + setConfig(cfg => ({ + ...cfg, + filters: { + ...cfg.filters, + [uniqueName]: value, + }, + }))} + onRemoveFilter={value => + setConfig(cfg => ({ + ...cfg, + filters: _.omit(cfg.filters, [uniqueName]), + filterInfos: _.omit(cfg.filterInfos, [uniqueName]), + }))} + /> + {/each} + {/if}
+ + diff --git a/packages/web/src/perspectives/PerspectiveHeaderControl.svelte b/packages/web/src/perspectives/PerspectiveHeaderControl.svelte index 773964fa..eba3c5c9 100644 --- a/packages/web/src/perspectives/PerspectiveHeaderControl.svelte +++ b/packages/web/src/perspectives/PerspectiveHeaderControl.svelte @@ -9,8 +9,6 @@ export let config: PerspectiveConfig; export let setConfig: ChangePerspectiveConfigFunc; - let mouseIn; - $: parentUniqueName = column.dataNode?.parentNode?.uniqueName || ''; $: uniqueName = column.dataNode.uniqueName; $: order = config.sort?.[parentUniqueName]?.find(x => x.uniqueName == uniqueName)?.order; @@ -20,54 +18,6 @@ : -1; $: isSortDefined = config.sort?.[parentUniqueName]?.length > 0; - const setSort = order => { - setConfig( - cfg => ({ - ...cfg, - sort: { - ...cfg.sort, - [parentUniqueName]: [{ uniqueName, order }], - }, - }), - true - ); - }; - - const addToSort = order => { - setConfig( - cfg => ({ - ...cfg, - sort: { - ...cfg.sort, - [parentUniqueName]: [...(cfg.sort?.[parentUniqueName] || []), { uniqueName, order }], - }, - }), - true - ); - }; - - const clearSort = () => { - setConfig( - cfg => ({ - ...cfg, - sort: { - ...cfg.sort, - [parentUniqueName]: [], - }, - }), - true - ); - }; - - function getMenu() { - return [ - { onClick: () => setSort('ASC'), text: 'Sort ascending' }, - { onClick: () => setSort('DESC'), text: 'Sort descending' }, - isSortDefined && !order && { onClick: () => addToSort('ASC'), text: 'Add to sort - ascending' }, - isSortDefined && !order && { onClick: () => addToSort('DESC'), text: 'Add to sort - descending' }, - order && { onClick: () => clearSort(), text: 'Clear sort criteria' }, - ]; - } {#if column.isVisible(columnLevel)} @@ -75,8 +25,6 @@ rowspan={column.rowSpan} class="columnHeader" data-column={column.columnIndex} - on:mouseenter={() => (mouseIn = true)} - on:mouseleave={() => (mouseIn = false)} >
@@ -100,12 +48,6 @@ {/if}
- - {#if mouseIn} - - {/if} {/if} {#if column.showParent(columnLevel)} @@ -116,11 +58,6 @@ .wrap { display: flex; } - .menuButton { - position: absolute; - right: 0; - bottom: 0; - } .label { flex-wrap: nowrap; } @@ -143,12 +80,6 @@ align-self: center; font-size: 18px; } - /* .resizer { - background-color: var(--theme-border); - width: 2px; - cursor: col-resize; - z-index: 1; - } */ .grouping { color: var(--theme-font-alt); white-space: nowrap; diff --git a/packages/web/src/perspectives/perspectiveMenu.ts b/packages/web/src/perspectives/perspectiveMenu.ts index e4fea761..36fb9016 100644 --- a/packages/web/src/perspectives/perspectiveMenu.ts +++ b/packages/web/src/perspectives/perspectiveMenu.ts @@ -1,4 +1,5 @@ import { ChangePerspectiveConfigFunc, PerspectiveConfig, PerspectiveTreeNode } from 'dbgate-datalib'; +import _ from 'lodash'; import { showModal } from '../modals/modalTools'; import CustomJoinModal from './CustomJoinModal.svelte'; @@ -15,7 +16,63 @@ export function getPerspectiveNodeMenu(props: PerspectiveNodeMenuProps) { const { node, conid, database, root, config, setConfig } = props; const customJoin = node.customJoinConfig; const filterInfo = node.filterInfo; + + const parentUniqueName = node?.parentNode?.uniqueName || ''; + const uniqueName = node.uniqueName; + const order = config.sort?.[parentUniqueName]?.find(x => x.uniqueName == uniqueName)?.order; + const orderIndex = + config.sort?.[parentUniqueName]?.length > 1 + ? _.findIndex(config.sort?.[parentUniqueName], x => x.uniqueName == uniqueName) + : -1; + const isSortDefined = config.sort?.[parentUniqueName]?.length > 0; + + const setSort = order => { + setConfig( + cfg => ({ + ...cfg, + sort: { + ...cfg.sort, + [parentUniqueName]: [{ uniqueName, order }], + }, + }), + true + ); + }; + + const addToSort = order => { + setConfig( + cfg => ({ + ...cfg, + sort: { + ...cfg.sort, + [parentUniqueName]: [...(cfg.sort?.[parentUniqueName] || []), { uniqueName, order }], + }, + }), + true + ); + }; + + const clearSort = () => { + setConfig( + cfg => ({ + ...cfg, + sort: { + ...cfg.sort, + [parentUniqueName]: [], + }, + }), + true + ); + }; + return [ + { onClick: () => setSort('ASC'), text: 'Sort ascending' }, + { onClick: () => setSort('DESC'), text: 'Sort descending' }, + isSortDefined && !order && { onClick: () => addToSort('ASC'), text: 'Add to sort - ascending' }, + isSortDefined && !order && { onClick: () => addToSort('DESC'), text: 'Add to sort - descending' }, + order && { onClick: () => clearSort(), text: 'Clear sort criteria' }, + { divider: true }, + filterInfo && { text: 'Add to filter', onClick: () =>