JSON filters view

packages/web/src/datagrid/DataGrid.svelte

@@ -25,6 +25,7 @@
   import ColumnManager from './ColumnManager.svelte';
   import ReferenceManager from './ReferenceManager.svelte';
   import FreeTableColumnEditor from '../freetable/FreeTableColumnEditor.svelte';
+  import JsonViewFilters from '../jsonview/JsonViewFilters.svelte';
 
   export let config;
   export let gridCoreComponent;
@@ -85,6 +86,10 @@
         <ColumnManager {...$$props} {managerSize} />
       </WidgetColumnBarItem>
 
+      <WidgetColumnBarItem title="Filters" name="jsonFilters" height="30%" skip={!isDynamicStructure}>
+        <JsonViewFilters {...$$props} {managerSize} />
+      </WidgetColumnBarItem>
+
       <WidgetColumnBarItem title="Columns" name="freeColumns" height="40%" skip={!freeTableColumn}>
         <FreeTableColumnEditor {...$$props} {managerSize} />
       </WidgetColumnBarItem>

packages/web/src/jsonview/JsonViewFilterColumn.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import DataFilterControl from '../datagrid/DataFilterControl.svelte';
+
+  import ColumnLabel from '../elements/ColumnLabel.svelte';
+  import InlineButton from '../elements/InlineButton.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  export let uniqueName;
+  export let display;
+  export let filters;
+</script>
+
+<div class="m-1">
+  <div class="space-between">
+    <ColumnLabel columnName={uniqueName} />
+    <InlineButton
+      square
+      on:click={() => {
+        display.removeFilter(uniqueName);
+      }}
+    >
+      <FontIcon icon="icon delete" />
+    </InlineButton>
+  </div>
+  <DataFilterControl
+    filterType="mongo"
+    filter={filters[uniqueName]}
+    setFilter={value => display.setFilter(uniqueName, value)}
+  />
+</div>

packages/web/src/jsonview/JsonViewFilters.svelte

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