show sort in perspective deisgner and tree

packages/datalib/src/PerspectiveTreeNode.ts

@@ -26,6 +26,7 @@ import _flatten from 'lodash/flatten';
 import _uniqBy from 'lodash/uniqBy';
 import _sortBy from 'lodash/sortBy';
 import _cloneDeepWith from 'lodash/cloneDeepWith';
+import _findIndex from 'lodash/findIndex';
 import {
   PerspectiveDatabaseConfig,
   PerspectiveDataLoadProps,
@@ -440,6 +441,16 @@ export abstract class PerspectiveTreeNode {
   getParentJoinCondition(alias: string, parentAlias: string): Condition[] {
     return [];
   }
+
+  get sortOrder() {
+    return this.parentNodeConfig?.sort?.find(x => x.columnName == this.columnName)?.order;
+  }
+
+  get sortOrderIndex() {
+    return this.parentNodeConfig?.sort?.length > 1
+      ? _findIndex(this.parentNodeConfig?.sort, x => x.columnName == this.columnName)
+      : -1;
+  }
 }
 
 export class PerspectiveTableColumnNode extends PerspectiveTreeNode {

packages/web/src/designer/ColumnLine.svelte

@@ -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}

packages/web/src/designer/SortOrderIcon.svelte

@@ -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}

packages/web/src/perspectives/PerspectiveDesigner.svelte

@@ -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)}

packages/web/src/perspectives/PerspectiveHeaderControl.svelte

@@ -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 || '';
+  $: order = column.dataNode?.sortOrder;
-  // $: nodeDesignerId = column.dataNode.designerId;
+  $: orderIndex = column.dataNode?.sortOrderIndex;
-  $: 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)}
@@ -28,22 +21,7 @@
         {column.title}
       </div>
 
-      {#if order == 'ASC'}
+      <SortOrderIcon {order} {orderIndex} />
-        <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}
     </div>
   </th>
 {/if}

packages/web/src/perspectives/PerspectiveNodeRow.svelte

@@ -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>

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}>

packages/web/src/perspectives/perspectiveMenu.ts

@@ -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(
+    setConfig(cfg => setPerspectiveSort(cfg, parentDesignerId, columnName, order), true);
-      cfg => ({
-        ...cfg,
-        nodes: cfg.nodes.map(n =>
-          n.designerId == parentDesignerId
-            ? {
-                ...n,
-                sort: [{ columnName, order }],
-              }
-            : n
-        ),
-      }),
-      true
-    );
   };
 
   const addToSort = order => {
-    setConfig(
+    setConfig(cfg => addToPerspectiveSort(cfg, parentDesignerId, columnName, order), true);
-      cfg => ({
-        ...cfg,
-        nodes: cfg.nodes.map(n =>
-          n.designerId == parentDesignerId
-            ? {
-                ...n,
-                sort: [...(n.sort || []), { columnName, order }],
-              }
-            : n
-        ),
-      }),
-      true
-    );
 
     // setConfig(
     //   cfg => ({
@@ -70,20 +96,7 @@ export function getPerspectiveNodeMenu(props: PerspectiveNodeMenuProps) {
   };
 
   const clearSort = () => {
-    setConfig(
+    setConfig(cfg => clearPerspectiveSort(cfg, parentDesignerId), true);
-      cfg => ({
-        ...cfg,
-        nodes: cfg.nodes.map(n =>
-          n.designerId == parentDesignerId
-            ? {
-                ...n,
-                sort: [],
-              }
-            : n
-        ),
-      }),
-      true
-    );
 
     // setConfig(
     //   cfg => ({