Advanced Filters (refinedev#455)

* Export TitleProps on antd. * Add CrudFilter interfaces. * Optimize new CrudFilter interface for core. * Optimize new CrudFilter interface for example. * Add filter mapper on nestjsx-curd data provider. * Map Antd:Filter -> Refine:CrudFilter on useTable onChange event. * Implemted new CrudFilter interface for ExportButton. * Implemted new CrudFilter interface for useRadioGroup. * Implemted new CrudFilter interface for useSelect. * Implemted new CrudFilter interface for syncWithLocation. * Replace query-string -> qs library. * Fixed core tests. * Fixed useTable permanentFilter. * Export crud interfaces. * Add filter mapper on json-server data provider. * Fixed useCheckboxGroup filters param. * Fixed json-server data provider tests. * Add RcFile, UploadFile export for useStrapiUpload. * Fixed tests on strapi data provider. * cleanup * Fixed tests.
landofcoder · May 18, 2021 · fb224a6 · fb224a6
1 parent fdf4d37
commit fb224a6
Show file tree

Hide file tree

Showing 26 changed files with 19,709 additions and 81,957 deletions.
diff --git a/example/package-lock.json b/example/package-lock.json
diff --git a/example/src/components/pages/post.tsx b/example/src/components/pages/post.tsx
@@ -68,9 +68,13 @@ interface ICategory {
 export const PostList = (props: any) => {
  const translate = useTranslate();
  const { tableProps, sorter, filters } = useTable<IPost>({
- // permanentFilter: {
- // categoryId: [50, 49],
- // },
+ // permanentFilter: [
+ // {
+ // field: "createdAt",
+ // operator: "gte",
+ // value: "2021-05-17",
+ // },
+ // ],
  initialSorter: [
  {
  field: "createdAt",

diff --git a/examples/strapi/package-lock.json b/examples/strapi/package-lock.json
diff --git a/packages/core/package-lock.json b/packages/core/package-lock.json
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -38,6 +38,7 @@
  "@testing-library/user-event": "^7.2.1",
  "@types/lodash": "^4.14.168",
  "@types/pluralize": "^0.0.29",
+ "@types/qs": "^6.9.6",
  "@types/react": "^17.0.1",
  "@types/react-csv": "^1.1.1",
  "@types/react-dom": "^17.0.0",
@@ -62,7 +63,7 @@
  "lodash": "^4.17.21",
  "papaparse": "^5.3.0",
  "pluralize": "^8.0.0",
- "query-string": "^6.14.0",
+ "qs": "^6.10.1",
  "react-csv": "^2.0.3",
  "react-markdown": "^5.0.3",
  "react-query": "^3.8.2",

diff --git a/packages/core/src/components/antd/antd.ts b/packages/core/src/components/antd/antd.ts
@@ -203,6 +203,7 @@ export { default as Tooltip } from "antd/lib/tooltip";
 
 export type { TypographyProps } from "antd/lib/typography";
 export { default as Typography } from "antd/lib/typography";
+export type { TitleProps } from "antd/lib/typography/Title";
 
 export type { UploadProps } from "antd/lib/upload";
 

diff --git a/packages/core/src/components/buttons/export/index.tsx b/packages/core/src/components/buttons/export/index.tsx
@@ -8,17 +8,17 @@ import { useResourceWithRoute, useTranslate } from "@hooks";
 import {
  ResourceRouterParams,
  Sort,
- Filters,
  IDataContext,
  BaseRecord,
+ CrudFilters,
 } from "../../../interfaces";
 import { DataContext } from "@contexts/data";
 import { CSVDownloadProps } from "./csvDownload.interface";
 
 type ExportButtonProps = ButtonProps & {
  resourceName?: string;
  sorter?: Sort;
- filters?: Filters;
+ filters?: CrudFilters;
  maxItemCount?: number;
  pageSize?: number;
  mapData?(value: BaseRecord, index: number, array: BaseRecord[]): BaseRecord;

diff --git a/packages/core/src/contexts/data/IDataContext.ts b/packages/core/src/contexts/data/IDataContext.ts
@@ -14,7 +14,46 @@ export interface Search {
  value?: string;
 }
 
-export type Filters = Record<string, (string | number | boolean)[] | null>;
+// Filters are used as a suffix of a field name:
+
+// | Filter | Description |
+// | ------------------- | ------------------------------ |
+// | No suffix or `eq` | Equal |
+// | ne | Not equal |
+// | lt | Less than |
+// | gt | Greater than |
+// | lte | Less than or equal to |
+// | gte | Greater than or equal to |
+// | in | Included in an array |
+// | nin | Not included in an array |
+// | contains | Contains |
+// | ncontains | Doesn't contain |
+// | containss | Contains, case sensitive |
+// | ncontainss | Doesn't contain, case sensitive|
+// | null | Is null or not null |
+
+export type CrudOperators =
+ | "eq"
+ | "ne"
+ | "lt"
+ | "gt"
+ | "lte"
+ | "gte"
+ | "in"
+ | "nin"
+ | "contains"
+ | "ncontains"
+ | "containss"
+ | "ncontainss"
+ | "null";
+
+export type CrudFilter = {
+ field: string;
+ operator: CrudOperators;
+ value: any;
+};
+
+export type CrudFilters = CrudFilter[];
 
 export interface GetListResponse<RecordType = BaseRecord> {
  data: RecordType[];
@@ -60,7 +99,7 @@ export interface IDataContext {
  pagination?: Pagination;
  search?: Search;
  sort?: Sort;
- filters?: Filters;
+ filters?: CrudFilter[];
  },
  ) => Promise<GetListResponse<RecordType>>;
  getMany: <RecordType extends BaseRecord = BaseRecord>(

diff --git a/packages/core/src/definitions/table/__snapshots__/index.spec.ts.snap b/packages/core/src/definitions/table/__snapshots__/index.spec.ts.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`definitions/table stringify table params correctly 1`] = `"current=1&pageSize=10&categoryId[]=1&categoryId[]=2&sort[]=id&sort[]=title&order[]=descend&order[]=descend"`;
+exports[`definitions/table stringify table params correctly 1`] = `"current=1&pageSize=10&categoryId__in[]=1&categoryId__in[]=2&sort[]=id&sort[]=title&order[]=descend&order[]=descend"`;
 
-exports[`definitions/table stringify table single sort params correctly 1`] = `"current=1&pageSize=10&categoryId[]=1&categoryId[]=2&sort=id&order=descend"`;
+exports[`definitions/table stringify table single sort params correctly 1`] = `"current=1&pageSize=10&categoryId__in[]=1&categoryId__in[]=2&sort=id&order=descend"`;
diff --git a/packages/core/src/definitions/table/index.spec.ts b/packages/core/src/definitions/table/index.spec.ts
@@ -1,6 +1,6 @@
 import { stringifyTableParams, parseTableParams } from "./";
 import { TablePaginationConfig } from "@components/antd";
-import { Sort, Filters } from "../../interfaces";
+import { Sort, CrudFilters } from "../../interfaces";
 
 describe("definitions/table", () => {
  it("stringify table params correctly", async () => {
@@ -19,9 +19,14 @@ describe("definitions/table", () => {
  order: "descend",
  },
  ];
- const filters: Filters = {
- categoryId: [1, 2],
- };
+
+ const filters: CrudFilters = [
+ {
+ field: "categoryId",
+ operator: "in",
+ value: [1, 2],
+ },
+ ];
 
  const url = stringifyTableParams({ pagination, sorter, filters });
  expect(url).toMatchSnapshot();
@@ -34,37 +39,34 @@ describe("definitions/table", () => {
  };
 
  const sorter: Sort = { field: "id", order: "descend" };
- const filters: Filters = {
- categoryId: [1, 2],
- };
+ const filters: CrudFilters = [
+ {
+ field: "categoryId",
+ operator: "in",
+ value: [1, 2],
+ },
+ ];
 
  const url = stringifyTableParams({ pagination, sorter, filters });
  expect(url).toMatchSnapshot();
  });
 
  it("parse table params with single sorter correctly", async () => {
  const url =
- "current=1&pageSize=10&categoryId[]=1&categoryId[]=2&sort=id&order=descend";
-
- const initialSorter: Sort = [];
- const initialFilter: Filters = {};
+ "?current=1&pageSize=10&categoryId__in[]=1&categoryId__in[]=2&sort=id&order=descend";
 
  const {
  parsedCurrent,
  parsedPageSize,
  parsedSorter,
  parsedFilters,
- } = parseTableParams({
- initialSorter,
- initialFilter,
- url,
- });
+ } = parseTableParams(url);
 
  expect(parsedCurrent).toBe(1);
  expect(parsedPageSize).toBe(10);
  expect(parsedSorter).toStrictEqual([{ field: "id", order: "descend" }]);
- expect(parsedFilters).toStrictEqual({
- categoryId: ["1", "2"],
- });
+ expect(parsedFilters).toStrictEqual([
+ { field: "categoryId", operator: "in", value: ["1", "2"] },
+ ]);
  });
 });
diff --git a/packages/core/src/definitions/table/index.ts b/packages/core/src/definitions/table/index.ts
@@ -1,48 +1,31 @@
-import qs, { StringifyOptions } from "query-string";
+import qs, { IStringifyOptions } from "qs";
 
-import { Sort, Filters } from "../../interfaces";
+import { Sort, CrudFilters, CrudOperators } from "../../interfaces";
 import {
  SorterResult,
  SortOrder,
  TablePaginationConfig,
 } from "antd/lib/table/interface";
 import mergeWith from "lodash/mergeWith";
-import isArray from "lodash/isArray";
-import get from "lodash/get";
-
-const queryStringOptions = (): StringifyOptions => {
- return {
- arrayFormat: "bracket",
- skipNull: true,
- };
-};
 
 export const merge = (object: any, source: any) => {
  return mergeWith(object, source, (val, src): any => {
- if (isArray(val)) {
+ if (Array.isArray(val)) {
  return val.concat(src);
  }
  });
 };
 
-export const parseTableParams = (params: {
- initialSorter?: Sort;
- initialFilter?: Filters;
- url: string;
-}) => {
- const options = queryStringOptions();
- const { initialSorter, initialFilter, url } = params;
-
+export const parseTableParams = (url: string) => {
  const { current, pageSize, sort, order, ...filters } = qs.parse(
- url,
- options,
+ url.substring(1), // remove first ? character
  );
 
- let parsedSorter: Sort;
+ let parsedSorter: Sort = [];
  if (Array.isArray(sort) && Array.isArray(order)) {
  const arrSorter: SorterResult<any>[] = [];
 
- sort.map((item, index) => {
+ sort.forEach((item: any, index: any) => {
  const sortOrder = order[index] as SortOrder;
  arrSorter.push({
  field: item,
@@ -60,23 +43,39 @@ export const parseTableParams = (params: {
  ];
  }
 
+ const parsedFilters: CrudFilters = [];
+ Object.keys(filters).map((item) => {
+ const [field, operator] = item.split("__");
+ const value = filters[item];
+
+ parsedFilters.push({
+ field,
+ operator: operator as CrudOperators,
+ value,
+ });
+ });
+
  return {
  parsedCurrent: current && Number(current),
  parsedPageSize: pageSize && Number(pageSize),
- parsedSorter: merge(initialSorter, parsedSorter),
- parsedFilters: merge(initialFilter, filters) as Filters,
+ parsedSorter,
+ parsedFilters,
  };
 };
 
 export const stringifyTableParams = (params: {
  pagination: TablePaginationConfig;
  sorter: Sort;
- filters: Filters;
+ filters: CrudFilters;
 }): string => {
+ const options: IStringifyOptions = {
+ skipNulls: true,
+ arrayFormat: "brackets",
+ encode: false,
+ };
+
  const { pagination, sorter, filters } = params;
- const options = queryStringOptions();
 
- const qsFilters = qs.stringify(filters, options);
  let sortFields;
  let sortOrders;
 
@@ -93,6 +92,13 @@ export const stringifyTableParams = (params: {
 
  let queryString = `current=${pagination.current}&pageSize=${pagination.pageSize}`;
 
+ const qsFilterItems: { [key: string]: string } = {};
+ filters.map((filterItem) => {
+ qsFilterItems[`${filterItem.field}__${filterItem.operator}`] =
+ filterItem.value;
+ });
+
+ const qsFilters = qs.stringify(qsFilterItems, options);
  if (qsFilters) {
  queryString = `${queryString}&${qsFilters}`;
  }
@@ -127,12 +133,13 @@ export const getDefaultSortOrder = (
 
 export const getDefaultFilter = (
  columnName: string,
- filters?: Filters,
+ filters?: CrudFilters,
 ): string[] | undefined => {
- const value = get(filters, columnName);
- if (!filters || !value) {
- return undefined;
+ const value = filters?.find(({ field }) => field === columnName);
+
+ if (value) {
+ return value.value || [];
  }
 
- return (value ?? []) as string[];
+ return undefined;
 };
diff --git a/packages/core/src/hooks/data/useList.ts b/packages/core/src/hooks/data/useList.ts
@@ -7,7 +7,7 @@ import {
  IDataContext,
  Sort,
  Search,
- Filters,
+ CrudFilters,
  Pagination,
  BaseRecord,
 } from "../../interfaces";
@@ -16,7 +16,7 @@ interface UseListConfig {
  pagination?: Pagination;
  search?: Search;
  sort?: Sort;
- filters?: Filters;
+ filters?: CrudFilters;
 }
 
 export const useList = <RecordType = BaseRecord>(

diff --git a/packages/core/src/hooks/fields/useCheckboxGroup/index.ts b/packages/core/src/hooks/fields/useCheckboxGroup/index.ts
@@ -3,14 +3,20 @@ import { CheckboxGroupProps } from "antd/lib/checkbox";
 import { QueryObserverResult } from "react-query";
 
 import { useList } from "@hooks";
-import { Sort, Option, BaseRecord, GetListResponse } from "../../../interfaces";
+import {
+ Sort,
+ Option,
+ BaseRecord,
+ GetListResponse,
+ CrudFilters,
+} from "../../../interfaces";
 
 export type useCheckboxGroupProps = {
  resource: string;
  optionLabel?: string;
  optionValue?: string;
  sort?: Sort;
- filters?: Record<string, (string | number | boolean)[] | null>;
+ filters?: CrudFilters;
 };
 
 export type UseCheckboxGroupReturnType<