mirrors/dbgate
1
0
Fork 0
mirror of https://github.com/dbgate/dbgate synced 2024-11-07 20:26:23 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

reimplemented filter, sort for new model

Browse Source
This commit is contained in:
Jan Prochazka 2022-08-28 10:50:12 +02:00
parent 1e347f6535
commit 14110cb6db
8 changed files with 193 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/datalib/src/PerspectiveConfig.ts
View File

@ -57,7 +57,7 @@ export interface PerspectiveNodeConfig {
conid?: string; conid?: string;
database?: string; database?: string;
isParentFilter?: true | undefined; isParentFilter?: boolean;
expandedColumns: string[]; expandedColumns: string[];
checkedColumns: string[]; checkedColumns: string[];

2
packages/datalib/src/PerspectiveTreeNode.ts
View File

@ -303,7 +303,7 @@ export abstract class PerspectiveTreeNode {
getOrderBy(table: TableInfo | ViewInfo): PerspectiveDataLoadProps['orderBy'] { getOrderBy(table: TableInfo | ViewInfo): PerspectiveDataLoadProps['orderBy'] {
const res = _compact( const res = _compact(
this.childNodes.map(node => { this.childNodes.map(node => {
const sort = this.parentNodeConfig?.sort?.find(x => x.columnName == node.columnName); const sort = this.nodeConfig?.sort?.find(x => x.columnName == node.columnName);
if (sort) { if (sort) {
return { return {
columnName: node.columnName, columnName: node.columnName,

83
packages/web/src/perspectives/PerspectiveFilters.svelte
View File

@ -1,7 +1,9 @@
<script lang="ts"> <script lang="ts">
import { ChangePerspectiveConfigFunc, PerspectiveConfig, PerspectiveTreeNode } from 'dbgate-datalib'; import { ChangePerspectiveConfigFunc, PerspectiveConfig, PerspectiveTreeNode } from 'dbgate-datalib';
import { keys } from 'localforage';
import _ from 'lodash'; import _, { map } from 'lodash';
import { each } from 'svelte/internal';
import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte'; import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte';
import FontIcon from '../icons/FontIcon.svelte'; import FontIcon from '../icons/FontIcon.svelte';
@ -16,45 +18,60 @@
export let database; export let database;
export let driver; export let driver;
$: allFilterNames = _.keys(config.filters || {}); $: filterCount = _.sum(config.nodes.map(x => _.keys(x.filters).length));
</script> </script>
<ManagerInnerContainer width={managerSize} isFlex={allFilterNames.length == 0}> <ManagerInnerContainer width={managerSize} isFlex={filterCount == 0}>
{#if allFilterNames.length == 0} {#if filterCount == 0}
<div class="msg"> <div class="msg">
<div class="mb-3 bold">No Filters defined</div> <div class="mb-3 bold">No Filters defined</div>
<div><FontIcon icon="img info" /> Use context menu, command "Add to filter" in table or in tree</div> <div><FontIcon icon="img info" /> Use context menu, command "Add to filter" in table or in tree</div>
</div> </div>
{:else} {:else}
{#each allFilterNames as uniqueName} {#each config.nodes as nodeConfig}
{@const node = root?.findNodeByUniqueName(uniqueName)} {#each _.keys(nodeConfig.filters) as filterKey}
{@const filterInfo = node?.filterInfo} {@const tableNode = root?.findNodeByDesignerId(nodeConfig.designerId)}
{#if filterInfo} {@const filterInfo = tableNode?.childNodes?.find(x => x.columnName == filterKey)?.filterInfo}
<PerspectiveFiltersColumn {#if filterInfo}
{filterInfo} <PerspectiveFiltersColumn
{uniqueName} {filterInfo}
{conid} {conid}
{database} {database}
{driver} {driver}
{node} {tableNode}
{config} {config}
{setConfig} {setConfig}
filter={config.filters[uniqueName]} filter={nodeConfig.filters[filterKey]}
onSetFilter={value => onSetFilter={value =>
setConfig(cfg => ({ setConfig(cfg => ({
...cfg, ...cfg,
filters: { nodes: cfg.nodes.map(n =>
...cfg.filters, n.designerId == tableNode.designerId
[uniqueName]: value, ? {
}, ...n,
}))} filters: {
onRemoveFilter={value => ...n.filters,
setConfig(cfg => ({ [filterKey]: value,
...cfg, },
filters: _.omit(cfg.filters, [uniqueName]), }
}))} : n
/> ),
{/if} }))}
onRemoveFilter={value =>
setConfig(cfg => ({
...cfg,
nodes: cfg.nodes.map(n =>
n.designerId == tableNode.designerId
? {
...n,
filters: _.omit(n.filters, [filterKey]),
}
: n
),
}))}
/>
{/if}
{/each}
{/each} {/each}
{/if} {/if}
</ManagerInnerContainer> </ManagerInnerContainer>

45
packages/web/src/perspectives/PerspectiveFiltersColumn.svelte
View File

@ -28,34 +28,33 @@
export let config: PerspectiveConfig; export let config: PerspectiveConfig;
export let setConfig: ChangePerspectiveConfigFunc; export let setConfig: ChangePerspectiveConfigFunc;
export let node: PerspectiveTreeNode; export let tableNode: PerspectiveTreeNode;
$: customCommandIcon = node?.parentNode?.supportsParentFilter // $: console.log('node', node);
? node?.parentNode?.isParentFilter // $: console.log('node?.parentNode?.supportsParentFilter', node?.parentNode?.supportsParentFilter);
// $: console.log('node?.parentNode', node?.parentNode);
$: customCommandIcon = tableNode?.supportsParentFilter
? tableNode?.isParentFilter
? 'icon parent-filter' ? 'icon parent-filter'
: 'icon parent-filter-outline' : 'icon parent-filter-outline'
: null; : null;
function changeParentFilter() { function changeParentFilter() {
const tableNode = node?.parentNode; setConfig(
if (!tableNode) return; cfg => ({
if (tableNode.isParentFilter) { ...cfg,
setConfig( nodes: cfg.nodes.map(n =>
cfg => ({ n.designerId == tableNode?.designerId
...cfg, ? {
parentFilters: cfg.parentFilters.filter(x => x.uniqueName != tableNode.uniqueName), ...n,
}), isParentFilter: !n.isParentFilter,
true }
); : n
} else { ),
setConfig( }),
cfg => ({ true
...cfg, );
parentFilters: [...(cfg.parentFilters || []), { uniqueName: tableNode.uniqueName }],
}),
true
);
}
} }
</script> </script>
@ -78,6 +77,6 @@
foreignKey={filterInfo.foreignKey} foreignKey={filterInfo.foreignKey}
{customCommandIcon} {customCommandIcon}
onCustomCommand={customCommandIcon ? changeParentFilter : null} onCustomCommand={customCommandIcon ? changeParentFilter : null}
customCommandTooltip='Filter parent rows' customCommandTooltip="Filter parent rows"
/> />
</div> </div>

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

@ -9,16 +9,16 @@
export let config: PerspectiveConfig; export let config: PerspectiveConfig;
export let setConfig: ChangePerspectiveConfigFunc; export let setConfig: ChangePerspectiveConfigFunc;
$: parentDesignerId = column.dataNode?.parentNode?.designerId || ''; // $: parentDesignerId = column.dataNode?.parentNode?.designerId || '';
$: nodeDesignerId = column.dataNode.designerId; // $: nodeDesignerId = column.dataNode.designerId;
$: nodeConfig = column.dataNode.nodeConfig; $: tableNodeConfig = column.dataNode.parentNode?.nodeConfig;
$: order = nodeConfig?.sort?.find(x => x.columnName == column.dataNode.columnName)?.order; $: order = tableNodeConfig?.sort?.find(x => x.columnName == column.dataNode.columnName)?.order;
$: orderIndex = -1; // $: orderIndex = -1;
// $: orderIndex = $: orderIndex =
// config.sort?.[parentUniqueName]?.length > 1 tableNodeConfig?.sort?.length > 1
// ? _.findIndex(config.sort?.[parentUniqueName], x => x.uniqueName == uniqueName) ? _.findIndex(tableNodeConfig?.sort, x => x.columnName == column.dataNode.columnName)
// : -1; : -1;
$: isSortDefined = nodeConfig?.sort?.length > 0; // $: isSortDefined = tableNodeConfig?.sort?.length > 0;
</script> </script>
{#if column.isVisible(columnLevel)} {#if column.isVisible(columnLevel)}

78
packages/web/src/perspectives/PerspectiveTable.svelte
View File

@ -212,36 +212,23 @@
}); });
} }
// if (tableNode?.supportsParentFilter) { if (tableNode?.supportsParentFilter) {
// const isParentFilter = (config.parentFilters || []).find(x => x.uniqueName == tableNode.uniqueName); const isParentFilter = tableNode?.isParentFilter;
// if (isParentFilter) { res.push({
// res.push({ text: isParentFilter ? 'Cancel filter parent rows' : 'Filter parent rows',
// text: 'Cancel filter parent rows', onClick: () => {
// onClick: () => { setConfig(
// setConfig( cfg => ({
// cfg => ({ ...cfg,
// ...cfg, nodes: cfg.nodes.map(n =>
// parentFilters: cfg.parentFilters.filter(x => x.uniqueName != tableNode.uniqueName), n.designerId == tableNode?.designerId ? { ...n, isParentFilter: !isParentFilter } : n
// }), ),
// true }),
// ); true
// }, );
// }); },
// } else { });
// res.push({ }
// text: 'Filter parent rows',
// onClick: () => {
// setConfig(
// cfg => ({
// ...cfg,
// parentFilters: [...(cfg.parentFilters || []), { uniqueName: tableNode.uniqueName }],
// }),
// true
// );
// },
// });
// }
// }
const rowIndex = tr?.getAttribute('data-rowIndex'); const rowIndex = tr?.getAttribute('data-rowIndex');
if (rowIndex != null) { if (rowIndex != null) {
@ -296,18 +283,25 @@
}); });
} }
// res.push({ res.push({
// text: 'Filter this value', text: 'Filter this value',
// onClick: () => { onClick: () => {
// setConfig(cfg => ({ setConfig(cfg => ({
// ...cfg, ...cfg,
// filters: { nodes: cfg.nodes.map(n =>
// ...cfg.filters, n.designerId == dataNode?.parentNode?.designerId
// [dataNode.uniqueName]: getFilterValueExpression(value, dataNode.column.dataType), ? {
// }, ...n,
// })); filters: {
// }, ...n.filters,
// }); [dataNode.columnName]: getFilterValueExpression(value, dataNode.column.dataType),
},
}
: n
),
}));
},
});
} }
} }
} }

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

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

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

@ -17,23 +17,25 @@ export function getPerspectiveNodeMenu(props: PerspectiveNodeMenuProps) {
const customJoin = node.customJoinConfig; const customJoin = node.customJoinConfig;
const filterInfo = node.filterInfo; const filterInfo = node.filterInfo;
const parentUniqueName = node?.parentNode?.uniqueName || ''; const parentDesignerId = node?.parentNode?.designerId || '';
const uniqueName = node.uniqueName; const columnName = node.columnName;
const order = config.sort?.[parentUniqueName]?.find(x => x.uniqueName == uniqueName)?.order; const sort = config.nodes?.find(x => x.designerId == parentDesignerId)?.sort;
const orderIndex = const order = sort?.find(x => x.columnName == columnName)?.order;
config.sort?.[parentUniqueName]?.length > 1 const orderIndex = sort?.length > 1 ? _.findIndex(sort, x => x.columnName == columnName) : -1;
? _.findIndex(config.sort?.[parentUniqueName], x => x.uniqueName == uniqueName) const isSortDefined = sort?.length > 0;
: -1;
const isSortDefined = config.sort?.[parentUniqueName]?.length > 0;
const setSort = order => { const setSort = order => {
setConfig( setConfig(
cfg => ({ cfg => ({
...cfg, ...cfg,
sort: { nodes: cfg.nodes.map(n =>
...cfg.sort, n.designerId == parentDesignerId
[parentUniqueName]: [{ uniqueName, order }], ? {
}, ...n,
sort: [{ columnName, order }],
}
: n
),
}), }),
true true
); );
@ -43,26 +45,56 @@ export function getPerspectiveNodeMenu(props: PerspectiveNodeMenuProps) {
setConfig( setConfig(
cfg => ({ cfg => ({
...cfg, ...cfg,
sort: { nodes: cfg.nodes.map(n =>
...cfg.sort, n.designerId == parentDesignerId
[parentUniqueName]: [...(cfg.sort?.[parentUniqueName] || []), { uniqueName, order }], ? {
}, ...n,
sort: [...(n.sort || []), { columnName, order }],
}
: n
),
}), }),
true true
); );
// setConfig(
// cfg => ({
// ...cfg,
// sort: {
// ...cfg.sort,
// [parentUniqueName]: [...(cfg.sort?.[parentUniqueName] || []), { uniqueName, order }],
// },
// }),
// true
// );
}; };
const clearSort = () => { const clearSort = () => {
setConfig( setConfig(
cfg => ({ cfg => ({
...cfg, ...cfg,
sort: { nodes: cfg.nodes.map(n =>
...cfg.sort, n.designerId == parentDesignerId
[parentUniqueName]: [], ? {
}, ...n,
sort: [],
}
: n
),
}), }),
true true
); );
// setConfig(
// cfg => ({
// ...cfg,
// sort: {
// ...cfg.sort,
// [parentUniqueName]: [],
// },
// }),
// true
// );
}; };
return [ return [
@ -78,11 +110,27 @@ export function getPerspectiveNodeMenu(props: PerspectiveNodeMenuProps) {
onClick: () => onClick: () =>
setConfig(cfg => ({ setConfig(cfg => ({
...cfg, ...cfg,
filters: { nodes: cfg.nodes.map(n =>
...cfg.filters, n.designerId == parentDesignerId
[node.uniqueName]: '', ? {
}, ...n,
filters: {
...n.filters,
[columnName]: '',
},
}
: n
),
})), })),
// setConfig(cfg => ({
// ...cfg,
// filters: {
// ...cfg.filters,
// [node.uniqueName]: '',
// },
// })),
}, },
customJoin && { customJoin && {
text: 'Remove custom join', text: 'Remove custom join',