form view filters

packages/web/src/formview/FormView.svelte

@@ -155,6 +155,8 @@
 </script>
 
 <script lang="ts">
+  import { getFilterValueExpression } from 'dbgate-filterparser';
+
   import { filterName } from 'dbgate-tools';
 
   import _ from 'lodash';
@@ -223,7 +225,14 @@
   $: rowCountInfo = getRowCountInfo(allRowCount);
 
   function getRowCountInfo(allRowCount) {
-    if (rowData == null) return 'No data';
+    if (rowData == null) {
+      if (allRowCount != null) {
+        return `Out of bounds: ${(
+          (display.config.formViewRecordNumber || 0) + 1
+        ).toLocaleString()} / ${allRowCount.toLocaleString()}`;
+      }
+      return 'No data';
+    }
     if (allRowCount == null || display == null) return 'Loading row count...';
     return `Row: ${(
       (display.config.formViewRecordNumber || 0) + 1
@@ -274,11 +283,33 @@
   }
 
   export function filterSelectedValue() {
-    // display.filterCellValue(getCellColumn(currentCell), rowData);
+    const column = getCellColumn(currentCell);
+    if (!column || !rowData) return;
+    const value = rowData[column.uniqueName];
+    const expr = getFilterValueExpression(value, column.dataType);
+    if (expr) {
+      setConfig(cfg => ({
+        ...cfg,
+        formViewRecordNumber: 0,
+        filters: {
+          ...cfg.filters,
+          [column.uniqueName]: expr,
+        },
+        addedColumns: cfg.addedColumns.includes(column.uniqueName)
+          ? cfg.addedColumns
+          : [...cfg.addedColumns, column.uniqueName],
+      }));
+      display.reload();
+    }
   }
 
   export function addToFilter() {
-    // display.addFilterColumn(getCellColumn(currentCell));
+    const column = getCellColumn(currentCell);
+    if (!column) return;
+    setConfig(cfg => ({
+      ...cfg,
+      formFilterColumns: [...(cfg.formFilterColumns || []), column.uniqueName],
+    }));
   }
 
   export const activator = createActivator('FormView', false);

packages/web/src/formview/FormViewFilterColumn.svelte

@@ -8,7 +8,7 @@
   import FontIcon from '../icons/FontIcon.svelte';
 
   export let column;
-  export let formDisplay;
+  export let display;
   export let filters;
 
   export let driver;
@@ -26,7 +26,7 @@
         square
         narrow
         on:click={() => {
-          formDisplay.removeFilter(column.uniqueName);
+          display.removeFilter(column.uniqueName);
         }}
       >
         <FontIcon icon="icon close" />
@@ -35,7 +35,7 @@
     <DataFilterControl
       filterType={getFilterType(column.dataType)}
       filter={filters[column.uniqueName]}
-      setFilter={value => formDisplay.setFilter(column.uniqueName, value)}
+      setFilter={value => display.setFilter(column.uniqueName, value)}
       {driver}
       {conid}
       {database}

packages/web/src/formview/FormViewFilters.svelte

@@ -4,10 +4,10 @@
   import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte';
   import keycodes from '../utility/keycodes';
   import FormViewFilterColumn from './FormViewFilterColumn.svelte';
-  import PrimaryKeyFilterEditor from './PrimaryKeyFilterEditor.svelte';
+  // import PrimaryKeyFilterEditor from './PrimaryKeyFilterEditor.svelte';
 
   export let managerSize;
-  export let formDisplay;
+  export let display;
   export let setConfig;
 
   export let driver;
@@ -16,9 +16,9 @@
   export let schemaName;
   export let pureName;
 
-  $: baseTable = formDisplay?.baseTable;
-  $: formFilterColumns = formDisplay?.config?.formFilterColumns;
-  $: filters = formDisplay?.config?.filters;
+  $: baseTable = display?.baseTable;
+  $: formFilterColumns = display?.config?.formFilterColumns;
+  $: filters = display?.config?.filters;
 
   $: allFilterNames = _.union(_.keys(filters || {}), formFilterColumns || []);
 </script>
@@ -28,7 +28,7 @@
   <div class="flex">
     <input
       type="text"
-      value={formDisplay?.config?.formColumnFilterText || ''}
+      value={display?.config?.formColumnFilterText || ''}
       on:keydown={e => {
         if (e.keyCode == keycodes.escape) {
           setConfig(x => ({
@@ -47,23 +47,17 @@
   </div>
 </div>
 
-{#if baseTable?.primaryKey}
-  <ManagerInnerContainer width={managerSize}>
-    {#each baseTable.primaryKey.columns as col}
-      <PrimaryKeyFilterEditor {baseTable} column={col} {formDisplay} />
-    {/each}
-
-    {#each allFilterNames as uniqueName}
-      <FormViewFilterColumn
-        column={formDisplay.columns.find(x => x.uniqueName == uniqueName)}
-        {formDisplay}
-        {filters}
-        {driver}
-        {conid}
-        {database}
-        {schemaName}
-        {pureName}
-      />
-    {/each}
-  </ManagerInnerContainer>
-{/if}
+<ManagerInnerContainer width={managerSize}>
+  {#each allFilterNames as uniqueName}
+    <FormViewFilterColumn
+      column={display.formColumns.find(x => x.uniqueName == uniqueName)}
+      {display}
+      {filters}
+      {driver}
+      {conid}
+      {database}
+      {schemaName}
+      {pureName}
+    />
+  {/each}
+</ManagerInnerContainer>

packages/web/src/formview/PrimaryKeyFilterEditor.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<!-- <script lang="ts">
   import ColumnLabel from '../elements/ColumnLabel.svelte';
   import InlineButton from '../buttons/InlineButton.svelte';
 
@@ -48,4 +48,4 @@
   <div class="flex">
     <input bind:this={domEditor} type="text" on:blur={applyFilter} on:keydown={handleKeyDown} />
   </div>
-</div>
+</div> -->