handle no data, clear filter

packages/datalib/src/TableFormViewDisplay.ts

@@ -18,7 +18,7 @@ import stableStringify from 'json-stable-stringify';
 import { ChangeSetFieldDefinition, ChangeSetRowDefinition } from './ChangeSet';
 
 export class TableFormViewDisplay extends FormViewDisplay {
-  // use utility functions from GridDisplay and publish result in FromViewDisplat interface
+  // use utility functions from GridDisplay and publish result in FromViewDisplay interface
   private gridDisplay: TableGridDisplay;
 
   constructor(

packages/web/src/datagrid/CollectionDataGridCore.svelte

@@ -1,11 +1,9 @@
 <script context="module" lang="ts">
-  async function loadDataPage(props, offset, limit) {
+  function buildCondition(props) {
-    const { conid, database, display } = props;
+    const filters = props?.display?.config?.filters;
-
-    const filters = display?.config?.filters;
 
     const conditions = [];
-    for (const uniqueName in filters) {
+    for (const uniqueName in filters || {}) {
       if (!filters[uniqueName]) continue;
       try {
         const ast = parseFilter(filters[uniqueName], 'mongo');
@@ -22,6 +20,16 @@
       }
     }
 
+    return conditions.length > 0
+      ? {
+          $and: conditions,
+        }
+      : undefined;
+  }
+
+  async function loadDataPage(props, offset, limit) {
+    const { conid, database } = props;
+
     const response = await axiosInstance.request({
       url: 'database-connections/collection-data',
       method: 'post',
@@ -34,12 +42,7 @@
           pureName: props.pureName,
           limit,
           skip: offset,
-          condition:
+          condition: buildCondition(props),
-            conditions.length > 0
-              ? {
-                  $and: conditions,
-                }
-              : undefined,
         },
       },
     });
@@ -69,6 +72,7 @@
         options: {
           pureName: props.pureName,
           countDocuments: true,
+          condition: buildCondition(props),
         },
       },
     });
@@ -82,6 +86,7 @@
   import { parseFilter } from 'dbgate-filterparser';
   import { scriptToSql } from 'dbgate-sqltree';
   import _ from 'lodash';
+  import ErrorInfo from '../elements/ErrorInfo.svelte';
   import ConfirmSqlModal from '../modals/ConfirmSqlModal.svelte';
   import ErrorMessageModal from '../modals/ErrorMessageModal.svelte';
   import ImportExportModal from '../modals/ImportExportModal.svelte';
@@ -216,5 +221,4 @@
   frameSelection={!!macroPreview}
   {grider}
   onSave={handleSave}
-  isDynamicStructure
 />

packages/web/src/datagrid/DataGrid.svelte

@@ -38,6 +38,7 @@
   export let showReferences = false;
   export let showMacros;
   export let freeTableColumn = false;
+  export let isDynamicStructure = false;
   export let macroCondition;
   export let onRunMacro;
 

packages/web/src/datagrid/DataGridCore.svelte

@@ -246,6 +246,7 @@
   import openNewTab from '../utility/openNewTab';
   import ErrorInfo from '../elements/ErrorInfo.svelte';
   import { dataGridRowHeight } from './DataGridRowHeightMeter.svelte';
+  import FormStyledButton from '../elements/FormStyledButton.svelte';
 
   export let onLoadNextData = undefined;
   export let grider = undefined;
@@ -1033,6 +1034,13 @@
   <LoadingInfo wrapper message="Waiting for structure" />
 {:else if errorMessage}
   <ErrorInfo message={errorMessage} alignTop />
+{:else if isDynamicStructure && isLoadedAll && grider?.rowCount == 0}
+  <div>
+    <ErrorInfo alignTop message="No rows loaded, check filter or add new documents" />
+    {#if display.filterCount > 0}
+      <FormStyledButton value="Reset filter" on:click={() => display.clearFilters()} />
+    {/if}
+  </div>
 {:else if grider.errors && grider.errors.length > 0}
   <div>
     {#each grider.errors as err}

packages/web/src/tabs/CollectionDataTab.svelte

@@ -72,4 +72,5 @@
   {changeSetStore}
   {dispatchChangeSet}
   gridCoreComponent={CollectionDataGridCore}
+  isDynamicStructure
 />