feature/OC-703/dynamic-pagination-limit

pwa/package.json

@@ -16,7 +16,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@conduction/components": "2.1.27",
+    "@conduction/components": "2.1.30",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.1.18",

pwa/src/components/paginationLimitSelect/PaginationLimitSelectComponent.module.css

@@ -0,0 +1,12 @@
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gateway-ui-size-sm);
+  align-items: center;
+  list-style-type: none;
+
+  padding: 0;
+  margin: 0;
+
+  user-select: none;
+}

pwa/src/components/paginationLimitSelect/PaginationLimitSelectComponent.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import * as styles from "./PaginationLimitSelectComponent.module.css";
+
+import clsx from "clsx";
+import { useForm } from "react-hook-form";
+import { SelectSingle } from "@conduction/components";
+import { IQueryLimitContext, useQueryLimitContext } from "../../context/queryLimit";
+
+interface PaginationLimitSelectProps {
+  queryLimitName: string;
+  layoutClassName?: string;
+}
+
+export const PaginationLimitSelectComponent: React.FC<PaginationLimitSelectProps> = ({
+  queryLimitName,
+  layoutClassName,
+}) => {
+  const {
+    watch,
+    register,
+    control,
+    setValue,
+    formState: { errors },
+  } = useForm();
+  const { queryLimit, setQueryLimit } = useQueryLimitContext();
+
+  const watchLimit = watch("limit");
+
+  const value = queryLimit[queryLimitName as keyof IQueryLimitContext];
+
+  React.useEffect(() => {
+    if (!watchLimit) return;
+    if (parseInt(watchLimit.value) === value) return;
+
+    const selectedLimit = limitSelectOptions.find((LimitOption) => LimitOption.value === watchLimit.value);
+
+    selectedLimit !== undefined && setQueryLimit({ ...queryLimit, [queryLimitName]: parseInt(selectedLimit.value) });
+  }, [watchLimit]);
+
+  React.useEffect(() => {
+    setValue(
+      "limit",
+      limitSelectOptions.find((LimitOption) => LimitOption.value === (value !== undefined && value.toString())),
+    );
+  }, []);
+
+  return (
+    <div className={clsx(styles.container, layoutClassName && layoutClassName)}>
+      <span>Results per page:</span>
+      <SelectSingle {...{ register, errors, control }} name="limit" options={limitSelectOptions} menuPlacement="auto" />
+    </div>
+  );
+};
+
+const limitSelectOptions = [
+  { label: "5", value: "5" },
+  { label: "10", value: "10" },
+  { label: "20", value: "20" },
+  { label: "50", value: "50" },
+  { label: "100", value: "100" },
+  { label: "500", value: "500" },
+  { label: "1000", value: "1000" },
+  { label: "2000", value: "2000" },
+  { label: "5000", value: "5000" },
+  { label: "10000", value: "10000" },
+];

pwa/src/context/global.ts

@@ -6,6 +6,7 @@ import { defaultLogFiltersContext, ILogFiltersContext } from "./logs";
 import { defaultTabsContext, ITabsContext } from "./tabs";
 import { defaultObjectsContext, IObjectsStateContext } from "./objects";
 import { defaultTableColumnsContext, ITableColumnsContext } from "./tableColumns";
+import { defaultQueryLimitContext, IQueryLimitContext } from "./queryLimit";
 
 export interface IGlobalContext {
   gatsby: IGatsbyContext;
@@ -15,6 +16,7 @@ export interface IGlobalContext {
   deletedItems: IDeletedItemsContext;
   objectsState: IObjectsStateContext;
   tableColumns: ITableColumnsContext;
+  queryLimit: IQueryLimitContext;
 }
 
 export const defaultGlobalContext: IGlobalContext = {
@@ -25,6 +27,7 @@ export const defaultGlobalContext: IGlobalContext = {
   deletedItems: defaultDeletedItemsContext,
   objectsState: defaultObjectsContext,
   tableColumns: defaultTableColumnsContext,
+  queryLimit: defaultQueryLimitContext,
 };
 
 export const GlobalContext = React.createContext<

pwa/src/context/queryLimit.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { GlobalContext } from "./global";
+
+const queryLimitDefault = 10;
+
+export interface IQueryLimitContext {
+  objectsQueryLimit?: number;
+}
+
+export const defaultQueryLimitContext: IQueryLimitContext = {
+  objectsQueryLimit: queryLimitDefault,
+};
+
+export const useQueryLimitContext = () => {
+  const [globalContext, setGlobalContext] = React.useContext(GlobalContext);
+
+  const queryLimit: IQueryLimitContext = globalContext.queryLimit;
+
+  const setQueryLimit = (query: IQueryLimitContext) => {
+    setGlobalContext((context) => ({ ...context, queryLimit: { ...globalContext.queryLimit, ...query } }));
+  };
+
+  return { setQueryLimit, queryLimit };
+};

pwa/src/hooks/object.ts

@@ -13,7 +13,7 @@ export const useObject = () => {
 
   const getAll = (currentPage: number, order: string, limit?: number, searchQuery?: string) =>
     useQuery<any, Error>(
-      ["objects", order, currentPage, searchQuery],
+      ["objects", order, currentPage, limit, searchQuery],
       () => API.Object.getAll(currentPage, order, limit, searchQuery),
       {
         onError: (error) => {

pwa/src/hooks/usePagination.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Paginate } from "../components/paginate/Paginate";
 import { PaginationLocationIndicatorComponent } from "../components/paginationLocationIndicatorComponent/PaginationLocationIndicatorComponent";
+import { PaginationLimitSelectComponent } from "../components/paginationLimitSelect/PaginationLimitSelectComponent";
 
 export interface PaginationDataProps {
   count: number;
@@ -17,6 +18,15 @@ interface PaginationLocationIndicator {
   layoutClassName?: string;
 }
 
+interface PaginationLimitSelect {
+  queryLimitName: string;
+  layoutClassName?: string;
+}
+
+interface ReactHookFormProps {
+  errors: { [x: string]: any };
+}
+
 export const usePagination = (
   data: PaginationDataProps,
   currentPage: number,
@@ -35,5 +45,9 @@ export const usePagination = (
     />
   );
 
-  return { Pagination, PaginationLocationIndicator };
+  const PaginationLimitSelect: React.FC<PaginationLimitSelect> = ({ queryLimitName, layoutClassName }) => (
+    <PaginationLimitSelectComponent {...{ layoutClassName, queryLimitName }} />
+  );
+
+  return { Pagination, PaginationLocationIndicator, PaginationLimitSelect };
 };

pwa/src/templates/objectTemplate/ObjectTemplate.tsx

@@ -9,14 +9,20 @@ import { OverviewPageHeaderTemplate } from "../templateParts/overviewPageHeader/
 import { ObjectsTable } from "../templateParts/objectsTable/ObjectsTable";
 import { useObject } from "../../hooks/object";
 import { useObjectsStateContext } from "../../context/objects";
+import { useQueryLimitContext } from "../../context/queryLimit";
 
 export const ObjectTemplate: React.FC = () => {
   const { t } = useTranslation();
   const { objectsState } = useObjectsStateContext();
   const [searchQuery, setSearchQuery] = React.useState<string>("");
   const [currentPage, setCurrentPage] = React.useState<number>(1);
+  const { queryLimit } = useQueryLimitContext();
 
-  const getObjects = useObject().getAll(currentPage, objectsState.order, undefined, searchQuery);
+  const getObjects = useObject().getAll(currentPage, objectsState.order, queryLimit.objectsQueryLimit, searchQuery);
+
+  React.useEffect(() => {
+    setCurrentPage(1);
+  }, [queryLimit.objectsQueryLimit]);
 
   return (
     <Container layoutClassName={styles.container}>

pwa/src/templates/templateParts/objectsTable/ObjectsTable.module.css

@@ -39,3 +39,8 @@
   display: flex;
   justify-content: flex-end;
 }
+
+.pagination {
+  display: flex;
+  justify-content: space-between;
+}

pwa/src/templates/templateParts/objectsTable/ObjectsTable.tsx

@@ -26,8 +26,8 @@ interface ObjectsTableProps {
     setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
   };
   search: {
-    setSearchQuery: React.Dispatch<React.SetStateAction<string>>;
     searchQuery: string;
+    setSearchQuery: React.Dispatch<React.SetStateAction<string>>;
   };
 }
 
@@ -41,7 +41,7 @@ export const ObjectsTable: React.FC<ObjectsTableProps> = ({
     setColumns,
   } = useTableColumnsContext();
   const { toggleOrder, objectsState, setObjectsState } = useObjectsStateContext();
-  const { Pagination, PaginationLocationIndicator } = usePagination(
+  const { Pagination, PaginationLocationIndicator, PaginationLimitSelect } = usePagination(
     { ...objectsQuery.data },
     pagination.currentPage,
     pagination.setCurrentPage,
@@ -194,7 +194,12 @@ export const ObjectsTable: React.FC<ObjectsTableProps> = ({
             </TableBody>
           </Table>
 
-          {objectsQuery.data.results && <Pagination />}
+          {objectsQuery.data.results && (
+            <div className={styles.pagination}>
+              <Pagination />
+              <PaginationLimitSelect queryLimitName={"objectsQueryLimit"} />
+            </div>
+          )}
         </>
       )}
     </div>