perspective sorting

packages/web/src/perspectives/PerspectiveHeaderControl.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+  import { ChangePerspectiveConfigFunc, PerspectiveConfig, PerspectiveDisplayColumn } from 'dbgate-datalib';
+  import _ from 'lodash';
+
+  import DropDownButton from '../buttons/DropDownButton.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+  export let label;
+  export let column: PerspectiveDisplayColumn;
+  export let columnLevel;
+  export let config: PerspectiveConfig;
+  export let setConfig: ChangePerspectiveConfigFunc;
+
+  //   export let setSort = undefined;
+  //   export let addToSort = undefined;
+  //   export let clearSort = undefined;
+  //   export let grouping = undefined;
+  //   export let order = undefined;
+  //   export let orderIndex = undefined;
+  //   export let isSortDefined = false;
+  let mouseIn;
+
+  $: uniqueName = column.dataNode.uniqueName;
+  // $: console.log('CFG', config);
+  $: order = config.sort?.find(x => x.uniqueName == uniqueName)?.order;
+  $: orderIndex = config.sort?.length > 1 ? _.findIndex(config.sort, x => x.uniqueName == uniqueName) : -1;
+  $: isSortDefined = config.sort?.length > 0;
+
+  const setSort = order => {
+    setConfig(
+      cfg => ({
+        ...cfg,
+        sort: [{ uniqueName, order }],
+      }),
+      true
+    );
+  };
+
+  const addToSort = order => {
+    setConfig(
+      cfg => ({
+        ...cfg,
+        sort: [...(cfg.sort || []), { uniqueName, order }],
+      }),
+      true
+    );
+  };
+
+  const clearSort = () => {
+    setConfig(
+      cfg => ({
+        ...cfg,
+        sort: [],
+      }),
+      true
+    );
+  };
+
+  //   display.setSort(col.uniqueName, order)
+  //                 addToSort={display.sortable ? order => display.addToSort(col.uniqueName, order) : null}
+  //                 order={display.sortable ? display.getSortOrder(col.uniqueName) : null}
+  //                 orderIndex={display.sortable ? display.getSortOrderIndex(col.uniqueName) : -1}
+  //                 isSortDefined={display.sortable ? display.isSortDefined() : false}
+  //                 clearSort={display.sortable ? () => display.clearSort() : null}
+
+  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' },
+    ];
+  }
+</script>
+
+{#if column.isVisible(columnLevel)}
+  <th
+    rowspan={column.rowSpan}
+    class="columnHeader"
+    on:mouseenter={() => (mouseIn = true)}
+    on:mouseleave={() => (mouseIn = false)}
+  >
+    <div class="wrap">
+      <div class="label">
+        {column.title}
+      </div>
+
+      {#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}
+    </div>
+
+    {#if mouseIn}
+      <div class="menuButton">
+        <DropDownButton menu={getMenu} narrow />
+      </div>
+    {/if}
+  </th>
+{/if}
+{#if column.showParent(columnLevel)}
+  <th colspan={column.getColSpan(columnLevel)} class="tableHeader">{column.getParentName(columnLevel)}</th>
+{/if}
+
+<style>
+  .wrap {
+    display: flex;
+  }
+  .menuButton {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+  }
+  .label {
+    flex-wrap: nowrap;
+  }
+  .order-index {
+    font-size: 10pt;
+    margin-left: -3px;
+    margin-right: 2px;
+    top: -1px;
+    position: relative;
+  }
+  .label {
+    flex: 1;
+    min-width: 10px;
+    padding: 2px;
+    margin: auto;
+    white-space: nowrap;
+  }
+  .icon {
+    margin-left: 3px;
+    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;
+  }
+  .data-type {
+    color: var(--theme-font-3);
+  }
+
+  th {
+    /* border: 1px solid var(--theme-border); */
+    text-align: left;
+    padding: 2px;
+    margin: 0;
+    background-color: var(--theme-bg-1);
+    overflow: hidden;
+    vertical-align: center;
+    z-index: 100;
+    font-weight: normal;
+
+    border-bottom: 1px solid var(--theme-border);
+    border-right: 1px solid var(--theme-border);
+  }
+
+  th.tableHeader {
+    font-weight: bold;
+  }
+
+  th.columnHeader {
+    position: relative;
+  }
+</style>