Merge pull request #1630 from merico-dev/1628-able-to-force-submit-even-when-filter-values-are-not-changed

1628 able to force submit even when filter values are not changed

Author: GerilLeto

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "14.16.1",
+  "version": "14.17.0",
   "description": "",
   "main": "index.js",
   "scripts": {

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "14.16.1",
+  "version": "14.17.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

dashboard/src/components/filter/index.tsx

@@ -3,14 +3,15 @@ import { useDisclosure } from '@mantine/hooks';
 import { IconChevronsDown, IconChevronsUp } from '@tabler/icons-react';
 import _ from 'lodash';
 import { observer } from 'mobx-react-lite';
-import { useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { Controller, useForm, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useRenderContentModelContext } from '~/contexts';
 import { FilterMetaInstance, ViewMetaInstance } from '~/model';
 import { Filter } from './filter';
 import { SearchButton } from './search-button';
 import { useUpdateFilterPreviewValues } from './use-update-filter-preview-values';
+import { OnFiltersSubmit } from '~/index';
 
 export { type IFormattedFilter, useVisibleFilters } from './use-visible-filters';
 
@@ -70,7 +71,16 @@ export const Filters = observer(function _Filters({ view }: { view: ViewMetaInst
       }
     };
 
-  const submit = useMemo(() => handleSubmit(content.filters.setValues), [handleSubmit, content.filters.setValues]);
+  const submit = useCallback<OnFiltersSubmit>(
+    (props) => {
+      const force = _.get(props, 'force', false);
+      handleSubmit(content.filters.setValues);
+      if (force) {
+        content.queries.forceReloadVisibleQueries();
+      }
+    },
+    [handleSubmit, content.filters.setValues],
+  );
 
   return (
     <form>

dashboard/src/components/filter/search-button/index.tsx

@@ -1,15 +1,41 @@
-import { Button } from '@mantine/core';
+import { ActionIcon, Button, Menu } from '@mantine/core';
+import { IconChevronDown, IconRefresh } from '@tabler/icons-react';
+import { useTranslation } from 'react-i18next';
 import { useDashboardThemeContext } from '~/contexts';
 import { RenderSearchButtonProps } from '~/index';
 
 export const SearchButton = ({ disabled, onSubmit }: RenderSearchButtonProps) => {
+  const { t } = useTranslation();
   const { renderSearchButton } = useDashboardThemeContext();
   if (renderSearchButton) {
     return renderSearchButton({ disabled, onSubmit });
   }
   return (
-    <Button color="blue" size="sm" onClick={onSubmit} disabled={disabled}>
-      Search
-    </Button>
+    <Button.Group>
+      <Button color="blue" size="sm" onClick={() => onSubmit()} disabled={disabled}>
+        {t('common.actions.search')}
+      </Button>
+      <Menu trigger="hover" disabled={disabled} position="bottom-end">
+        <Menu.Target>
+          <Button
+            disabled={disabled}
+            color="blue"
+            px="xs"
+            style={{ borderLeft: `1px solid ${disabled ? 'white' : 'var(--mantine-color-gray-4)'}` }}
+          >
+            <IconChevronDown size={16} />
+          </Button>
+        </Menu.Target>
+        <Menu.Dropdown>
+          <Menu.Item
+            leftSection={<IconRefresh size={14} />}
+            disabled={disabled}
+            onClick={() => onSubmit({ force: true })}
+          >
+            {t('common.actions.reload')}
+          </Menu.Item>
+        </Menu.Dropdown>
+      </Menu>
+    </Button.Group>
   );
 };

dashboard/src/i18n/en.ts

@@ -299,6 +299,8 @@ export const en = {
       copied: 'Copied to clipboard',
       action: 'Action',
       actions: {
+        search: 'Search',
+        reload: 'Reload',
         actions: 'Actions',
         open: 'Open',
         close: 'Close',

dashboard/src/i18n/zh.ts

@@ -299,6 +299,8 @@ export const zh = {
       copied: '已复制到剪切板',
       action: '操作',
       actions: {
+        search: '查询',
+        reload: '刷新',
         actions: '操作',
         open: '打开',
         close: '关闭',

dashboard/src/index.ts

@@ -20,9 +20,11 @@ export * from './model';
 export * from './api-caller/request';
 export type { AnyObject } from './types/utils';
 
+export type OnFiltersSubmit = (props?: { force?: boolean }) => void;
+
 export type RenderSearchButtonProps = {
   disabled: boolean;
-  onSubmit: () => void;
+  onSubmit: OnFiltersSubmit;
 };
 export interface IDashboardConfig {
   basename: string;

dashboard/src/model/render-model/dashboard/content/queries/queries.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { Instance, SnapshotIn, getParent, getRoot, types } from 'mobx-state-tree';
+import { Instance, SnapshotIn, flow, getParent, getRoot, types } from 'mobx-state-tree';
 import { CURRENT_SCHEMA_VERSION, QueryMetaSnapshotIn } from '~/model/meta-model';
 import { downloadDataAsCSV, downloadDataListAsZip, downloadJSON } from '~/utils/download';
 import { QueryRenderModel, QueryRenderModelInstance } from './query';
@@ -35,11 +35,11 @@ export const QueriesRenderModel = types
       return this.root.name;
     },
     get contentModel() {
-      return getParent(self, 1);
+      // FIXME: type
+      return getParent(self, 1) as any;
     },
     get visibleQueryIDSet() {
-      // FIXME: type
-      const { views, filters, queries } = this.contentModel as any;
+      const { views, filters } = this.contentModel;
       const queryIDs: string[] = [];
 
       views.visibleViews.forEach((v: any) => {
@@ -62,7 +62,7 @@ export const QueriesRenderModel = types
         }
       });
 
-      queries.findByIDSet(new Set(queryIDs)).forEach((q: QueryRenderModelInstance) => {
+      this.findByIDSet(new Set(queryIDs)).forEach((q: QueryRenderModelInstance) => {
         const config = q.config as TransformQueryMetaInstance;
         if (!q.isTransform || config.dep_query_ids.length === 0) {
           return;
@@ -77,6 +77,59 @@ export const QueriesRenderModel = types
     isQueryInUse(queryID: string) {
       return this.visibleQueryIDSet.has(queryID);
     },
+    addTransformDepQueryIDs(targetSet: Set<string>, excludeSet?: Set<string>) {
+      this.findByIDSet(targetSet).forEach((q: QueryRenderModelInstance) => {
+        const config = q.config as TransformQueryMetaInstance;
+        if (!q.isTransform || config.dep_query_ids.length === 0) {
+          return;
+        }
+        config.dep_query_ids.forEach((id) => {
+          if (excludeSet?.has(id)) {
+            return;
+          }
+          targetSet.add(id);
+        });
+      });
+    },
+    get querisToForceReload() {
+      const filterQueryIDSet = new Set<string>();
+      const panelQueryIDSet = new Set<string>();
+
+      const { views, filters } = this.contentModel;
+      const visibleViewIDs: string[] = _.uniq(views.visibleViews.map((v: any) => v.renderViewIDs).flat());
+
+      // make filterQueryIDSet
+      filters.current.forEach((f: any) => {
+        const id = _.get(f, 'config.options_query_id');
+        if (!id) {
+          return;
+        }
+
+        const visible = visibleViewIDs.some((viewID) => f.visibleInViewsIDSet.has(viewID));
+        if (visible) {
+          filterQueryIDSet.add(id);
+        }
+      });
+      this.addTransformDepQueryIDs(filterQueryIDSet);
+
+      // make panelQueryIDSet
+      views.visibleViews.forEach((v: any) => {
+        v.panels.forEach((p: any) => {
+          p.queryIDs.forEach((id: string) => {
+            if (filterQueryIDSet.has(id)) {
+              return;
+            }
+            panelQueryIDSet.add(id);
+          });
+        });
+      });
+      this.addTransformDepQueryIDs(panelQueryIDSet, filterQueryIDSet);
+
+      return {
+        filterQueries: this.findByIDSet(filterQueryIDSet),
+        panelQueries: this.findByIDSet(panelQueryIDSet),
+      };
+    },
   }))
   .actions((self) => {
     return {
@@ -134,6 +187,22 @@ export const QueriesRenderModel = types
         const filename = 'Queries';
         downloadJSON(filename, schema);
       },
+      forceReloadVisibleQueries: flow(function* () {
+        const { filterQueries, panelQueries } = self.querisToForceReload;
+        console.log('🟡 Force reloading queries');
+        if (filterQueries.length > 0) {
+          const result = yield Promise.allSettled(filterQueries.map((q) => q.fetchData(true)));
+          console.log('🟡 Queries from filters reloaded', result);
+        } else {
+          console.log('🟡 Found no query from visible filters, skipping');
+        }
+        if (panelQueries.length > 0) {
+          const result = yield Promise.allSettled(panelQueries.map((q) => q.fetchData(true)));
+          console.log('🟡 Queries from filters reloaded', result);
+        } else {
+          console.log('🟡 Found no query from visible panels, skipping');
+        }
+      }),
     };
   });
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/root",
-  "version": "14.16.1",
+  "version": "14.17.0",
   "private": true,
   "workspaces": [
     "api",

settings-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "14.16.1",
+  "version": "14.17.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",