refactor - simplified filters component

packages/web/src/formview/CollectionJsonRow.svelte

@@ -0,0 +1,60 @@
+<script lang="ts" context="module">
+  export function editJsonRowDocument(grider, rowIndex) {
+    const rowData = grider.getRowData(rowIndex);
+    showModal(EditJsonModal, {
+      json: rowData,
+      onSave: value => {
+        if (
+          grider.getRowStatus(rowIndex).status != 'inserted' &&
+          rowData._id &&
+          stableStringify(value._id) != stableStringify(rowData._id)
+        ) {
+          showModal(ErrorMessageModal, { message: '_id attribute cannot be changed' });
+          return false;
+        }
+        grider.setRowData(rowIndex, value);
+        return true;
+      },
+    });
+  }
+</script>
+
+<script lang="ts">
+  import JSONTree from '../jsontree/JSONTree.svelte';
+  import EditJsonModal from '../modals/EditJsonModal.svelte';
+  import ErrorMessageModal from '../modals/ErrorMessageModal.svelte';
+  import { showModal } from '../modals/modalTools';
+  import { copyTextToClipboard } from '../utility/clipboard';
+  import { getContextMenu, registerMenu } from '../utility/contextMenu';
+  import stableStringify from 'json-stable-stringify';
+
+  export let rowIndex;
+  export let grider;
+
+  $: rowData = grider.getRowData(rowIndex);
+  $: rowStatus = grider.getRowStatus(rowIndex);
+
+  function handleEditDocument() {
+    editJsonRowDocument(grider, rowIndex);
+  }
+
+  function handleCopyJsonDocument() {
+    const rowData = grider.getRowData(rowIndex);
+    copyTextToClipboard(JSON.stringify(rowData, undefined, 2));
+  }
+
+  registerMenu([
+    { text: 'Copy JSON document', onClick: handleCopyJsonDocument },
+    { text: 'Edit document', onClick: handleEditDocument },
+    { text: 'Delete document', onClick: () => grider.deleteRow(rowIndex) },
+    { text: 'Revert row changes', onClick: () => grider.revertRowChanges(rowIndex) },
+  ]);
+</script>
+
+<JSONTree
+  value={rowData}
+  labelOverride="({rowIndex + 1}) "
+  isModified={rowStatus.status == 'updated'}
+  isInserted={rowStatus.status == 'inserted'}
+  isDeleted={rowStatus.status == 'deleted'}
+/>

packages/web/src/formview/CollectionJsonView.svelte

@@ -0,0 +1,102 @@
+<script lang="ts" context="module">
+  const getCurrentEditor = () => getActiveComponent('CollectionJsonView');
+</script>
+
+<script lang="ts">
+  import _ from 'lodash';
+
+  import { onMount } from 'svelte';
+  import registerCommand from '../commands/registerCommand';
+  import ChangeSetGrider from '../datagrid/ChangeSetGrider';
+  import createActivator, { getActiveComponent } from '../utility/createActivator';
+
+  import { loadCollectionDataPage } from '../datagrid/CollectionDataGridCore.svelte';
+  import LoadingInfo from '../elements/LoadingInfo.svelte';
+  import Pager from '../elements/Pager.svelte';
+
+  import contextMenu, { getContextMenu, registerMenu } from '../utility/contextMenu';
+  import CollectionJsonRow from './CollectionJsonRow.svelte';
+
+  export let conid;
+  export let database;
+  export let cache;
+  export let display;
+  export let setConfig;
+
+  export let changeSetState;
+  export let dispatchChangeSet;
+
+  export const activator = createActivator('CollectionJsonView', true);
+
+  let isLoading = false;
+  let loadedTime = null;
+
+  export let loadedRows = [];
+  let skip = 0;
+  let limit = 50;
+
+  async function loadData() {
+    isLoading = true;
+    // @ts-ignore
+    loadedRows = await loadCollectionDataPage($$props, parseInt(skip) || 0, parseInt(limit) || 50);
+    isLoading = false;
+    loadedTime = new Date().getTime();
+  }
+
+  $: if (cache?.refreshTime > loadedTime) {
+    loadData();
+  }
+
+  onMount(() => {
+    loadData();
+  });
+
+  registerMenu({ placeTag: 'switch' });
+
+  const menu = getContextMenu();
+
+  $: grider = new ChangeSetGrider(loadedRows, changeSetState, dispatchChangeSet, display);
+
+  // $: console.log('GRIDER', grider);
+</script>
+
+<div class="wrapper" use:contextMenu={menu}>
+  <div class="toolbar">
+    <Pager bind:skip bind:limit on:load={() => display.reload()} />
+  </div>
+  <div class="json">
+    {#each _.range(0, grider.rowCount) as rowIndex}
+      <CollectionJsonRow {grider} {rowIndex} />
+    {/each}
+  </div>
+</div>
+
+{#if isLoading}
+  <LoadingInfo wrapper message="Loading data" />
+{/if}
+
+<style>
+  .toolbar {
+    background: var(--theme-bg-1);
+    display: flex;
+    border-bottom: 1px solid var(--theme-border);
+    border-top: 2px solid var(--theme-border);
+    margin-bottom: 3px;
+  }
+
+  .json {
+    overflow: auto;
+    flex: 1;
+    /* position: relative; */
+  }
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+</style>

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)}
-      filter={filters[column.uniqueName]}
-      setFilter={value => display.setFilter(column.uniqueName, value)}
+      filterType={computeFilterType(display, uniqueName, isFormView, isDynamicStructure, useEvalFilters)}
+      filter={filters[uniqueName]}
+      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">
-  <div>Column filter</div>
-  <div class="flex">
-    <input
-      type="text"
-      value={display?.config?.formColumnFilterText || ''}
-      on:keydown={e => {
-        if (e.keyCode == keycodes.escape) {
+{#if isFormView}
+  <div class="m-1">
+    <div>Column filter</div>
+    <div class="flex">
+      <input
+        type="text"
+        value={display?.config?.formColumnFilterText || ''}
+        on:keydown={e => {
+          if (e.keyCode == keycodes.escape) {
+            setConfig(x => ({
+              ...x,
+              formColumnFilterText: '',
+            }));
+          }
+        }}
+        on:input={e =>
           setConfig(x => ({
             ...x,
-            formColumnFilterText: '',
-          }));
-        }
-      }}
-      on:input={e =>
-        setConfig(x => ({
-          ...x,
-          // @ts-ignore
-          formColumnFilterText: e.target.value,
-        }))}
-    />
+            // @ts-ignore
+            formColumnFilterText: e.target.value,
+          }))}
+      />
+    </div>
   </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}