Merge pull request #1286 from merico-dev/1285-able-to-collapse-filter…

…s-when-in-dashboard-render-mode

1285 able to collapse filters when in dashboard render mode

api/package.json

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

dashboard/package.json

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

dashboard/src/components/filter/index.tsx

@@ -1,4 +1,6 @@
-import { Group } from '@mantine/core';
+import { Button, Collapse, Group } from '@mantine/core';
+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';
@@ -9,7 +11,26 @@ import { Filter } from './filter';
 import { SearchButton } from './search-button';
 import { useUpdateFilterPreviewValues } from './use-update-filter-preview-values';
 
+const FilterToggler = ({ opened, toggle }: { opened: boolean; toggle: () => void }) => {
+  return (
+    <Group position="right" ml={-4} mt={-4} mb={opened ? 4 : 0}>
+      <Button
+        size="xs"
+        compact
+        variant="subtle"
+        color={opened ? 'gray' : 'blue'}
+        leftIcon={opened ? <IconChevronsUp size={14} /> : <IconChevronsDown size={14} />}
+        onClick={toggle}
+      >
+        {opened ? 'Hide Filters' : 'Show Filters'}
+      </Button>
+    </Group>
+  );
+};
+
 export const Filters = observer(function _Filters({ view }: { view: ViewMetaInstance }) {
+  const [opened, { toggle }] = useDisclosure(true);
+
   const content = useRenderContentModelContext();
 
   const { control, handleSubmit, reset } = useForm({
@@ -48,30 +69,33 @@ export const Filters = observer(function _Filters({ view }: { view: ViewMetaInst
 
   return (
     <form onSubmit={handleSubmit(content.filters.setValues)}>
-      <Group
-        className="dashboard-filters"
-        position="apart"
-        noWrap
-        sx={allAutoSubmit ? {} : { border: '1px solid #e9ecef', borderRadius: '4px', padding: '16px' }}
-      >
-        <Group align="flex-start">
-          {filters.map((filter) => (
-            <Controller
-              key={filter.id}
-              name={filter.key}
-              control={control}
-              render={({ field }) => (
-                <Filter filter={filter} value={field.value} onChange={getChangeHandler(filter, field.onChange)} />
-              )}
-            />
-          ))}
-        </Group>
-        {!allAutoSubmit && (
-          <Group sx={{ alignSelf: 'flex-end' }}>
-            <SearchButton disabled={searchButtonDisabled} />
+      <FilterToggler opened={opened} toggle={toggle} />
+      <Collapse in={opened}>
+        <Group
+          className="dashboard-filters"
+          position="apart"
+          noWrap
+          sx={allAutoSubmit ? {} : { border: '1px solid #e9ecef', borderRadius: '4px', padding: '16px' }}
+        >
+          <Group align="flex-start">
+            {filters.map((filter) => (
+              <Controller
+                key={filter.id}
+                name={filter.key}
+                control={control}
+                render={({ field }) => (
+                  <Filter filter={filter} value={field.value} onChange={getChangeHandler(filter, field.onChange)} />
+                )}
+              />
+            ))}
           </Group>
-        )}
-      </Group>
+          {!allAutoSubmit && (
+            <Group sx={{ alignSelf: 'flex-end' }}>
+              <SearchButton disabled={searchButtonDisabled} />
+            </Group>
+          )}
+        </Group>
+      </Collapse>
     </form>
   );
 });

dashboard/src/components/view/view-component/preview/division.tsx

@@ -5,7 +5,7 @@ import { RenderViewDivision } from '../render';
 
 export const PreviewViewDivision = observer(({ children, view }: { children: ReactNode; view: ViewMetaInstance }) => {
   return (
-    <RenderViewDivision sx={{ paddingTop: '10px', paddingBottom: '100px' }} view={view}>
+    <RenderViewDivision sx={{ paddingBottom: '100px' }} view={view}>
       {children}
     </RenderViewDivision>
   );

dashboard/src/components/view/view-component/render/division.tsx

@@ -62,7 +62,7 @@ export const RenderViewDivision = observer(
     const { ref, downloadScreenshot } = useDownloadDivScreenshot(view);
     return (
       <>
-        <Box ref={ref} sx={sx}>
+        <Box ref={ref} pt={10} sx={sx}>
           {children}
         </Box>
         <DivActions downloadScreenShot={downloadScreenshot} />

dashboard/src/components/view/view-component/render/tabs.tsx

@@ -27,7 +27,7 @@ export const RenderViewTabs = observer(({ view }: { view: ViewRenderModelInstanc
           overflow: config.orientation === 'horizontal' ? 'hidden' : 'auto',
         },
         panel: {
-          padding: config.orientation === 'horizontal' ? '8px 0px 8px' : '0',
+          padding: config.orientation === 'horizontal' ? '0px 0px 8px' : '0',
           height: '100%',
           overflow: 'auto',
         },

package.json

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

settings-form/package.json

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

website/package.json

@@ -2,7 +2,7 @@
   "name": "@devtable/website",
   "private": true,
   "license": "Apache-2.0",
-  "version": "10.57.0",
+  "version": "10.58.0",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview"