reimplemented filter, sort for new model

2024-11-07 20:26:23 +00:00 · 2022-08-28 10:50:12 +02:00 · 2022-08-28 10:50:12 +02:00 · 14110cb6db
commit 14110cb6db
parent 1e347f6535
8 changed files with 193 additions and 135 deletions
--- a/packages/datalib/src/PerspectiveConfig.ts
+++ b/packages/datalib/src/PerspectiveConfig.ts
@ -57,7 +57,7 @@ export interface PerspectiveNodeConfig {
  conid?: string;
  database?: string;

-  isParentFilter?: true | undefined;
+  isParentFilter?: boolean;

  expandedColumns: string[];
  checkedColumns: string[];
--- a/packages/datalib/src/PerspectiveTreeNode.ts
+++ b/packages/datalib/src/PerspectiveTreeNode.ts
@ -303,7 +303,7 @@ export abstract class PerspectiveTreeNode {
  getOrderBy(table: TableInfo | ViewInfo): PerspectiveDataLoadProps['orderBy'] {
    const res = _compact(
      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) {
          return {
            columnName: node.columnName,
--- a/packages/web/src/perspectives/PerspectiveFilters.svelte
+++ b/packages/web/src/perspectives/PerspectiveFilters.svelte
@ -1,7 +1,9 @@
 <script lang="ts">
  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 FontIcon from '../icons/FontIcon.svelte';
@ -16,45 +18,60 @@
  export let database;
  export let driver;

-  $: allFilterNames = _.keys(config.filters || {});
+  $: filterCount = _.sum(config.nodes.map(x => _.keys(x.filters).length));
 </script>

-<ManagerInnerContainer width={managerSize} isFlex={allFilterNames.length == 0}>
-  {#if allFilterNames.length == 0}
+<ManagerInnerContainer width={managerSize} isFlex={filterCount == 0}>
+  {#if filterCount == 0}
    <div class="msg">
      <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>
  {:else}
-    {#each allFilterNames as uniqueName}
-      {@const node = root?.findNodeByUniqueName(uniqueName)}
-      {@const filterInfo = node?.filterInfo}
-      {#if filterInfo}
-        <PerspectiveFiltersColumn
-          {filterInfo}
-          {uniqueName}
-          {conid}
-          {database}
-          {driver}
-          {node}
-          {config}
-          {setConfig}
-          filter={config.filters[uniqueName]}
-          onSetFilter={value =>
-            setConfig(cfg => ({
-              ...cfg,
-              filters: {
-                ...cfg.filters,
-                [uniqueName]: value,
-              },
-            }))}
-          onRemoveFilter={value =>
-            setConfig(cfg => ({
-              ...cfg,
-              filters: _.omit(cfg.filters, [uniqueName]),
-            }))}
-        />
-      {/if}
+    {#each config.nodes as nodeConfig}
+      {#each _.keys(nodeConfig.filters) as filterKey}
+        {@const tableNode = root?.findNodeByDesignerId(nodeConfig.designerId)}
+        {@const filterInfo = tableNode?.childNodes?.find(x => x.columnName == filterKey)?.filterInfo}
+        {#if filterInfo}
+          <PerspectiveFiltersColumn
+            {filterInfo}
+            {conid}
+            {database}
+            {driver}
+            {tableNode}
+            {config}
+            {setConfig}
+            filter={nodeConfig.filters[filterKey]}
+            onSetFilter={value =>
+              setConfig(cfg => ({
+                ...cfg,
+                nodes: cfg.nodes.map(n =>
+                  n.designerId == tableNode.designerId
+                    ? {
+                        ...n,
+                        filters: {
+                          ...n.filters,
+                          [filterKey]: value,
+                        },
+                      }
+                    : n
+                ),
+              }))}
+            onRemoveFilter={value =>
+              setConfig(cfg => ({
+                ...cfg,
+                nodes: cfg.nodes.map(n =>
+                  n.designerId == tableNode.designerId
+                    ? {
+                        ...n,
+                        filters: _.omit(n.filters, [filterKey]),
+                      }
+                    : n
+                ),
+              }))}
+          />
+        {/if}
+      {/each}
    {/each}
  {/if}
 </ManagerInnerContainer>
--- a/packages/web/src/perspectives/PerspectiveFiltersColumn.svelte
+++ b/packages/web/src/perspectives/PerspectiveFiltersColumn.svelte
@ -28,34 +28,33 @@
  export let config: PerspectiveConfig;
  export let setConfig: ChangePerspectiveConfigFunc;

-  export let node: PerspectiveTreeNode;
+  export let tableNode: PerspectiveTreeNode;

-  $: customCommandIcon = node?.parentNode?.supportsParentFilter
-    ? node?.parentNode?.isParentFilter
+  // $: console.log('node', node);
+  // $: 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-outline'
    : null;

  function changeParentFilter() {
-    const tableNode = node?.parentNode;
-    if (!tableNode) return;
-    if (tableNode.isParentFilter) {
-      setConfig(
-        cfg => ({
-          ...cfg,
-          parentFilters: cfg.parentFilters.filter(x => x.uniqueName != tableNode.uniqueName),
-        }),
-        true
-      );
-    } else {
-      setConfig(
-        cfg => ({
-          ...cfg,
-          parentFilters: [...(cfg.parentFilters || []), { uniqueName: tableNode.uniqueName }],
-        }),
-        true
-      );
-    }
+    setConfig(
+      cfg => ({
+        ...cfg,
+        nodes: cfg.nodes.map(n =>
+          n.designerId == tableNode?.designerId
+            ? {
+                ...n,
+                isParentFilter: !n.isParentFilter,
+              }
+            : n
+        ),
+      }),
+      true
+    );
  }
 </script>

@ -78,6 +77,6 @@
    foreignKey={filterInfo.foreignKey}
    {customCommandIcon}
    onCustomCommand={customCommandIcon ? changeParentFilter : null}
-    customCommandTooltip='Filter parent rows'
+    customCommandTooltip="Filter parent rows"
  />
 </div>
--- a/packages/web/src/perspectives/PerspectiveHeaderControl.svelte
+++ b/packages/web/src/perspectives/PerspectiveHeaderControl.svelte
@ -9,16 +9,16 @@
  export let config: PerspectiveConfig;
  export let setConfig: ChangePerspectiveConfigFunc;

-  $: parentDesignerId = column.dataNode?.parentNode?.designerId || '';
-  $: nodeDesignerId = column.dataNode.designerId;
-  $: nodeConfig = column.dataNode.nodeConfig;
-  $: order = nodeConfig?.sort?.find(x => x.columnName == column.dataNode.columnName)?.order;
-  $: orderIndex = -1;
-  // $: orderIndex =
-  //   config.sort?.[parentUniqueName]?.length > 1
-  //     ? _.findIndex(config.sort?.[parentUniqueName], x => x.uniqueName == uniqueName)
-  //     : -1;
-  $: isSortDefined = nodeConfig?.sort?.length > 0;
+  // $: 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;
 </script>

 {#if column.isVisible(columnLevel)}
--- a/packages/web/src/perspectives/PerspectiveTable.svelte
+++ b/packages/web/src/perspectives/PerspectiveTable.svelte
@ -212,36 +212,23 @@
        });
      }

-      // if (tableNode?.supportsParentFilter) {
-      //   const isParentFilter = (config.parentFilters || []).find(x => x.uniqueName == tableNode.uniqueName);
-      //   if (isParentFilter) {
-      //     res.push({
-      //       text: 'Cancel filter parent rows',
-      //       onClick: () => {
-      //         setConfig(
-      //           cfg => ({
-      //             ...cfg,
-      //             parentFilters: cfg.parentFilters.filter(x => x.uniqueName != tableNode.uniqueName),
-      //           }),
-      //           true
-      //         );
-      //       },
-      //     });
-      //   } else {
-      //     res.push({
-      //       text: 'Filter parent rows',
-      //       onClick: () => {
-      //         setConfig(
-      //           cfg => ({
-      //             ...cfg,
-      //             parentFilters: [...(cfg.parentFilters || []), { uniqueName: tableNode.uniqueName }],
-      //           }),
-      //           true
-      //         );
-      //       },
-      //     });
-      //   }
-      // }
+      if (tableNode?.supportsParentFilter) {
+        const isParentFilter = tableNode?.isParentFilter;
+        res.push({
+          text: isParentFilter ? 'Cancel filter parent rows' : 'Filter parent rows',
+          onClick: () => {
+            setConfig(
+              cfg => ({
+                ...cfg,
+                nodes: cfg.nodes.map(n =>
+                  n.designerId == tableNode?.designerId ? { ...n, isParentFilter: !isParentFilter } : n
+                ),
+              }),
+              true
+            );
+          },
+        });
+      }

      const rowIndex = tr?.getAttribute('data-rowIndex');
      if (rowIndex != null) {
@ -296,18 +283,25 @@
            });
          }

-          // res.push({
-          //   text: 'Filter this value',
-          //   onClick: () => {
-          //     setConfig(cfg => ({
-          //       ...cfg,
-          //       filters: {
-          //         ...cfg.filters,
-          //         [dataNode.uniqueName]: getFilterValueExpression(value, dataNode.column.dataType),
-          //       },
-          //     }));
-          //   },
-          // });
+          res.push({
+            text: 'Filter this value',
+            onClick: () => {
+              setConfig(cfg => ({
+                ...cfg,
+                nodes: cfg.nodes.map(n =>
+                  n.designerId == dataNode?.parentNode?.designerId
+                    ? {
+                        ...n,
+                        filters: {
+                          ...n.filters,
+                          [dataNode.columnName]: getFilterValueExpression(value, dataNode.column.dataType),
+                        },
+                      }
+                    : n
+                ),
+              }));
+            },
+          });
        }
      }
    }
--- a/packages/web/src/perspectives/PerspectiveView.svelte
+++ b/packages/web/src/perspectives/PerspectiveView.svelte
@ -156,7 +156,7 @@
    }
  }

-  // $: console.log('PERSPECTIVE', config);
+  $: console.log('PERSPECTIVE', config);
 </script>

 <HorizontalSplitter initialValue={getInitialManagerSize()} bind:size={managerSize}>
--- a/packages/web/src/perspectives/perspectiveMenu.ts
+++ b/packages/web/src/perspectives/perspectiveMenu.ts
@ -17,23 +17,25 @@ export function getPerspectiveNodeMenu(props: PerspectiveNodeMenuProps) {
  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 parentDesignerId = node?.parentNode?.designerId || '';
+  const columnName = node.columnName;
+  const sort = config.nodes?.find(x => x.designerId == parentDesignerId)?.sort;
+  const order = sort?.find(x => x.columnName == columnName)?.order;
+  const orderIndex = sort?.length > 1 ? _.findIndex(sort, x => x.columnName == columnName) : -1;
+  const isSortDefined = sort?.length > 0;

  const setSort = order => {
    setConfig(
      cfg => ({
        ...cfg,
-        sort: {
-          ...cfg.sort,
-          [parentUniqueName]: [{ uniqueName, order }],
-        },
+        nodes: cfg.nodes.map(n =>
+          n.designerId == parentDesignerId
+            ? {
+                ...n,
+                sort: [{ columnName, order }],
+              }
+            : n
+        ),
      }),
      true
    );
@ -43,26 +45,56 @@ export function getPerspectiveNodeMenu(props: PerspectiveNodeMenuProps) {
    setConfig(
      cfg => ({
        ...cfg,
-        sort: {
-          ...cfg.sort,
-          [parentUniqueName]: [...(cfg.sort?.[parentUniqueName] || []), { uniqueName, order }],
-        },
+        nodes: cfg.nodes.map(n =>
+          n.designerId == parentDesignerId
+            ? {
+                ...n,
+                sort: [...(n.sort || []), { columnName, order }],
+              }
+            : n
+        ),
      }),
      true
    );
+
+    // setConfig(
+    //   cfg => ({
+    //     ...cfg,
+    //     sort: {
+    //       ...cfg.sort,
+    //       [parentUniqueName]: [...(cfg.sort?.[parentUniqueName] || []), { uniqueName, order }],
+    //     },
+    //   }),
+    //   true
+    // );
  };

  const clearSort = () => {
    setConfig(
      cfg => ({
        ...cfg,
-        sort: {
-          ...cfg.sort,
-          [parentUniqueName]: [],
-        },
+        nodes: cfg.nodes.map(n =>
+          n.designerId == parentDesignerId
+            ? {
+                ...n,
+                sort: [],
+              }
+            : n
+        ),
      }),
      true
    );
+
+    // setConfig(
+    //   cfg => ({
+    //     ...cfg,
+    //     sort: {
+    //       ...cfg.sort,
+    //       [parentUniqueName]: [],
+    //     },
+    //   }),
+    //   true
+    // );
  };

  return [
@ -78,11 +110,27 @@ export function getPerspectiveNodeMenu(props: PerspectiveNodeMenuProps) {
      onClick: () =>
        setConfig(cfg => ({
          ...cfg,
-          filters: {
-            ...cfg.filters,
-            [node.uniqueName]: '',
-          },
+          nodes: cfg.nodes.map(n =>
+            n.designerId == parentDesignerId
+              ? {
+                  ...n,
+                  filters: {
+                    ...n.filters,
+                    [columnName]: '',
+                  },
+                }
+              : n
+          ),
        })),
+
+      // setConfig(cfg => ({
+      //   ...cfg,
+
+      //   filters: {
+      //     ...cfg.filters,
+      //     [node.uniqueName]: '',
+      //   },
+      // })),
    },
    customJoin && {
      text: 'Remove custom join',