refactor - simplified filters component

packages/web/src/datagrid/DataGrid.svelte

@@ -63,7 +63,6 @@
   import WidgetColumnBarItem from '../widgets/WidgetColumnBarItem.svelte';
   import ColumnManager from './ColumnManager.svelte';
   import ReferenceManager from './ReferenceManager.svelte';
-  import JsonViewFilters from '../jsonview/JsonViewFilters.svelte';
   import createActivator, { getActiveComponent } from '../utility/createActivator';
   import _ from 'lodash';
   import registerCommand from '../commands/registerCommand';
@@ -171,25 +170,19 @@
 
       <WidgetColumnBarItem
         title="Filters"
-        name="jsonFilters"
+        name="filters"
-        height={'30%'}
+        height={showReferences && display?.hasReferences ? '15%' : '30%'}
-        skip={!isDynamicStructure || !display?.filterable}
+        show={display?.filterable}
-      >
-        <JsonViewFilters {...$$props} {managerSize} {isDynamicStructure} {useEvalFilters} />
-      </WidgetColumnBarItem>
-
-      <WidgetColumnBarItem
-        title="Filters"
-        name="tableFilters"
-        height={'15%'}
-        skip={!display?.filterable || isDynamicStructure || display.filterCount == 0 || isFormView}
         collapsed={isDetailView}
       >
-        <JsonViewFilters {...$$props} {managerSize} {isDynamicStructure} {useEvalFilters} />
+        <FormViewFilters
-      </WidgetColumnBarItem>
+          {...$$props}
-
+          {managerSize}
-      <WidgetColumnBarItem title="Filters" name="filters" height="30%" show={isFormView}>
+          {isDynamicStructure}
-        <FormViewFilters {...$$props} {managerSize} driver={display?.driver} />
+          {useEvalFilters}
+          {isFormView}
+          driver={display?.driver}
+        />
       </WidgetColumnBarItem>
 
       <WidgetColumnBarItem

packages/web/src/datagrid/DataGridCore.svelte

@@ -381,7 +381,7 @@
   import ErrorInfo from '../elements/ErrorInfo.svelte';
   import { dataGridRowHeight } from './DataGridRowHeightMeter.svelte';
   import FormStyledButton from '../buttons/FormStyledButton.svelte';
-  import { editJsonRowDocument } from '../jsonview/CollectionJsonRow.svelte';
+  import { editJsonRowDocument } from '../formview/CollectionJsonRow.svelte';
   import createActivator, { getActiveComponent } from '../utility/createActivator';
   import CollapseButton from './CollapseButton.svelte';
   import GenerateSqlFromDataModal from '../modals/GenerateSqlFromDataModal.svelte';

packages/web/src/formview/FormViewFilterColumn.svelte

@@ -7,7 +7,7 @@
   import InlineButton from '../buttons/InlineButton.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
 
-  export let column;
+  export let uniqueName;
   export let display;
   export let filters;
 
@@ -16,6 +16,24 @@
   export let database;
   export let schemaName;
   export let pureName;
+
+  export let useEvalFilters;
+  export let isDynamicStructure;
+  export let isFormView;
+
+  $: column = isFormView
+    ? display.display.formColumns.find(x => x.uniqueName == uniqueName)
+    : display.findColumn(uniqueName);
+
+  function computeFilterType(display, column, isFormView, isDynamicStructure, useEvalFilters) {
+    if (useEvalFilters) return 'eval';
+    if (isDynamicStructure) return 'mongo';
+
+    if (column) {
+      return column.filterType || getFilterType(column.dataType);
+    }
+    return 'string';
+  }
 </script>
 
 {#if column}
@@ -26,16 +44,16 @@
         square
         narrow
         on:click={() => {
-          display.removeFilter(column.uniqueName);
+          display.removeFilter(uniqueName);
         }}
       >
         <FontIcon icon="icon close" />
       </InlineButton>
     </div>
     <DataFilterControl
-      filterType={getFilterType(column.dataType)}
+      filterType={computeFilterType(display, uniqueName, isFormView, isDynamicStructure, useEvalFilters)}
-      filter={filters[column.uniqueName]}
+      filter={filters[uniqueName]}
-      setFilter={value => display.setFilter(column.uniqueName, value)}
+      setFilter={value => display.setFilter(uniqueName, value)}
       {driver}
       {conid}
       {database}

packages/web/src/formview/FormViewFilters.svelte

@@ -16,6 +16,10 @@
   export let schemaName;
   export let pureName;
 
+  export let isDynamicStructure;
+  export let useEvalFilters;
+  export let isFormView;
+
   $: baseTable = display?.baseTable;
   $: formFilterColumns = display?.config?.formFilterColumns;
   $: filters = display?.config?.filters;
@@ -23,34 +27,39 @@
   $: allFilterNames = _.union(_.keys(filters || {}), formFilterColumns || []);
 </script>
 
-<div class="m-1">
+{#if isFormView}
-  <div>Column filter</div>
+  <div class="m-1">
-  <div class="flex">
+    <div>Column filter</div>
-    <input
+    <div class="flex">
-      type="text"
+      <input
-      value={display?.config?.formColumnFilterText || ''}
+        type="text"
-      on:keydown={e => {
+        value={display?.config?.formColumnFilterText || ''}
-        if (e.keyCode == keycodes.escape) {
+        on:keydown={e => {
+          if (e.keyCode == keycodes.escape) {
+            setConfig(x => ({
+              ...x,
+              formColumnFilterText: '',
+            }));
+          }
+        }}
+        on:input={e =>
           setConfig(x => ({
             ...x,
-            formColumnFilterText: '',
+            // @ts-ignore
-          }));
+            formColumnFilterText: e.target.value,
-        }
+          }))}
-      }}
+      />
-      on:input={e =>
+    </div>
-        setConfig(x => ({
-          ...x,
-          // @ts-ignore
-          formColumnFilterText: e.target.value,
-        }))}
-    />
   </div>
-</div>
+{/if}
 
 <ManagerInnerContainer width={managerSize}>
   {#each allFilterNames as uniqueName}
     <FormViewFilterColumn
-      column={display.formColumns.find(x => x.uniqueName == uniqueName)}
+      {isDynamicStructure}
+      {useEvalFilters}
+      {isFormView}
+      {uniqueName}
       {display}
       {filters}
       {driver}

packages/web/src/jsonview/JsonViewFilterColumn.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-  import DataFilterControl from '../datagrid/DataFilterControl.svelte';
-
-  import ColumnLabel from '../elements/ColumnLabel.svelte';
-  import InlineButton from '../buttons/InlineButton.svelte';
-  import FontIcon from '../icons/FontIcon.svelte';
-  import { getFilterType } from 'dbgate-filterparser';
-
-  export let uniqueName;
-  export let display;
-  export let filters;
-  export let isDynamicStructure;
-  export let useEvalFilters;
-
-  function computeFilterType(isDynamicStructure, display, uniqueName, useEvalFilters) {
-    if (useEvalFilters) return 'eval';
-    if (isDynamicStructure) return 'mongo';
-    const col = display.findColumn(uniqueName);
-    if (col) {
-      return col.filterType || getFilterType(col.dataType);
-    }
-    return 'string';
-  }
-</script>
-
-<div class="m-1">
-  <div class="space-between">
-    <ColumnLabel columnName={uniqueName} />
-    <InlineButton
-      square
-      narrow
-      on:click={() => {
-        display.removeFilter(uniqueName);
-      }}
-    >
-      <FontIcon icon="icon close" />
-    </InlineButton>
-  </div>
-  <DataFilterControl
-    filterType={computeFilterType(isDynamicStructure, display, uniqueName, useEvalFilters)}
-    filter={filters[uniqueName]}
-    setFilter={value => display.setFilter(uniqueName, value)}
-  />
-</div>

packages/web/src/jsonview/JsonViewFilters.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-  import _ from 'lodash';
-
-  import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte';
-  import JsonViewFilterColumn from './JsonViewFilterColumn.svelte';
-
-  export let managerSize;
-  export let display;
-  export let isDynamicStructure;
-  export let useEvalFilters;
-
-  $: filters = display?.config?.filters;
-
-  $: allFilterNames = _.keys(filters || {});
-</script>
-
-<ManagerInnerContainer width={managerSize}>
-  {#each allFilterNames as uniqueName}
-    <JsonViewFilterColumn {uniqueName} {display} {filters} {isDynamicStructure} {useEvalFilters} />
-  {/each}
-</ManagerInnerContainer>

packages/web/src/tabs/CollectionDataTab.svelte

@@ -36,7 +36,7 @@
   import CollectionDataGridCore from '../datagrid/CollectionDataGridCore.svelte';
   import { useCollectionInfo, useConnectionInfo } from '../utility/metadataLoaders';
   import { extensions } from '../stores';
-  import CollectionJsonView from '../jsonview/CollectionJsonView.svelte';
+  import CollectionJsonView from '../formview/CollectionJsonView.svelte';
   import createActivator, { getActiveComponent } from '../utility/createActivator';
   import { showModal } from '../modals/modalTools';
   import ErrorMessageModal from '../modals/ErrorMessageModal.svelte';