Merge pull request #200 from Dias999/feature/FilterModule_CustomFilters

Feature/filter module custom filters
conceptadev · Sep 6, 2024 · d72dce8 · d72dce8
2 parents a426e5b + 5883e8d
commit d72dce8
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 11 deletions.
diff --git a/packages/react-material-ui/src/components/Table/types.ts b/packages/react-material-ui/src/components/Table/types.ts
@@ -4,13 +4,17 @@ export type BasicType = string | number | boolean;
 
 export type SimpleFilter = Record<string, BasicType | BasicType[] | null>;
 
+export type CustomFilter = (data: unknown) => SimpleFilter;
+
 export type UpdateSimpleFilter = (
   simpleFilter: SimpleFilter | null,
   resetPage?: boolean,
 ) => void;
 
 export type Search = Record<string, any>;
 
+export type CustomSearch = (data: unknown) => Record<string, any>;
+
 export type HeaderProps = {
   disablePadding?: boolean;
   id: string;

diff --git a/packages/react-material-ui/src/components/submodules/Filter/index.tsx b/packages/react-material-ui/src/components/submodules/Filter/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, ReactNode } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import {
   Filter,
   FilterVariant,
@@ -51,11 +51,23 @@ const FilterSubmodule = (props: Props) => {
     updateSearch,
     simpleFilter,
     updateSimpleFilter,
-    externalSearch,
+    externalSearch: _externalSearch,
     filterValues,
     setFilterValues,
+    customFilter,
+    customSearch,
   } = useCrudRoot();
 
+  const customSearchData = useMemo(
+    () => customSearch?.(filterValues),
+    [filterValues],
+  );
+
+  const externalSearch = useMemo(
+    () => ({ ..._externalSearch, ...customSearchData }),
+    [customSearchData, _externalSearch],
+  );
+
   const hasExternalSearch =
     externalSearch &&
     Object.values(externalSearch).filter((value) => value).length > 0;
@@ -85,11 +97,22 @@ const FilterSubmodule = (props: Props) => {
   useEffect(() => {
     if (!hasExternalSearch) {
       updateSearch(null);
-      updateSimpleFilter(reduceFilters(filterValues, 'simpleFilter'), true);
+      const filterObj = {
+        ...reduceFilters(filterValues, 'simpleFilter'),
+        ...customFilter?.(filterValues),
+      };
+
+      updateSimpleFilter(filterObj, true);
     }
+
     if (hasExternalSearch) {
-      const combinedFilter = {
+      const filterObj = {
         ...reduceFilters(filterValues, 'search'),
+        ...customFilter?.(filterValues),
+      };
+
+      const combinedFilter = {
+        ...filterObj,
         ...externalSearch,
       };
 
@@ -106,10 +129,12 @@ const FilterSubmodule = (props: Props) => {
       const newFilterValues = { ...prv, [id]: value };
 
       if (updateFilter) {
-        updateSimpleFilter(
-          reduceFilters(newFilterValues, 'simpleFilter'),
-          true,
-        );
+        const filterObj = {
+          ...reduceFilters(newFilterValues, 'simpleFilter'),
+          ...customFilter?.(newFilterValues),
+        };
+
+        updateSimpleFilter(filterObj, true);
       }
       return newFilterValues;
     });

diff --git a/packages/react-material-ui/src/modules/crud/CrudRoot.tsx b/packages/react-material-ui/src/modules/crud/CrudRoot.tsx
@@ -8,6 +8,8 @@ type Props = Omit<CrudContextProps, 'filterValues' | 'setFilterValues'> & {
 
 const CrudRoot = (props: PropsWithChildren<Props>) => {
   const {
+    customFilter,
+    customSearch,
     filters,
     search,
     updateSearch,
@@ -44,6 +46,8 @@ const CrudRoot = (props: PropsWithChildren<Props>) => {
   return (
     <CrudContext.Provider
       value={{
+        customFilter,
+        customSearch,
         filters,
         search,
         updateSearch,

diff --git a/packages/react-material-ui/src/modules/crud/index.tsx b/packages/react-material-ui/src/modules/crud/index.tsx
@@ -15,7 +15,11 @@ import TableSubmodule, {
 } from '../../components/submodules/Table';
 import DrawerFormSubmodule from '../../components/submodules/DrawerForm';
 import ModalFormSubmodule from '../../components/submodules/ModalForm';
-import { Search } from '../../components/Table/types';
+import {
+  Search,
+  CustomFilter,
+  CustomSearch,
+} from '../../components/Table/types';
 import CrudRoot from './CrudRoot';
 import { FilterDetails } from '../../components/submodules/Filter';
 import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
@@ -38,6 +42,8 @@ interface TableProps {
   hasAllOption?: boolean;
   hideActionsColumn?: boolean;
   reordable?: boolean;
+  customFilter?: CustomFilter;
+  customSearch?: CustomSearch;
   filters?: FilterDetails[];
   paginationStyle?: PaginationStyle;
   onDeleteSuccess?: (data: unknown) => void;
@@ -188,13 +194,16 @@ const CrudModule = (props: ModuleProps) => {
   delete enhancedFormProps.onSuccess;
   delete enhancedFormProps.onDeleteSuccess;
 
-  const { filters, ...tableSubmoduleProps } = props.tableProps;
+  const { customFilter, customSearch, filters, ...tableSubmoduleProps } =
+    props.tableProps;
 
   const { isPending, tableQueryState } = useTableReturn;
 
   return (
     <CrudRoot
       filters={filters}
+      customFilter={customFilter}
+      customSearch={customSearch}
       search={useTableReturn.search}
       updateSearch={useTableReturn.updateSearch}
       simpleFilter={useTableReturn.simpleFilter}

diff --git a/packages/react-material-ui/src/modules/crud/useCrudRoot.tsx b/packages/react-material-ui/src/modules/crud/useCrudRoot.tsx
@@ -1,11 +1,23 @@
 import { createContext, useContext } from 'react';
 import { UseTableResult } from '../../components/Table/useTable';
-import { Search } from '../../components/Table/types';
+import { Search, SimpleFilter } from '../../components/Table/types';
 import { FilterDetails } from '../../components/submodules/Filter';
 
 export type FilterValues = Record<string, string | Date | null>;
 
 export type CrudContextProps = {
+  /**
+   *
+   * @param data - Object containing values of filter inputs
+   * @returns - Object for filtering Table data in a more intricate way
+   */
+  customFilter?: (data: FilterValues) => SimpleFilter | null;
+  /**
+   *
+   * @param data - Object containing values of filter inputs
+   * @returns - Object for filtering Table data in a more intricate way
+   */
+  customSearch?: (data: FilterValues) => Search | null;
   /**
    * Array of objects, where each contain details regarding filter inputs.
    */