Merge pull request #120 from ConductionNL/feature/XW-94/Dymanic-pagin…

…ation-limit feature/XW-94/Dymanic-pagination-limit
ConductionNL · Oct 17, 2023 · 51a4274 · 51a4274
2 parents ba361f7 + c094cee
commit 51a4274
Show file tree

Hide file tree

Showing 13 changed files with 209 additions and 60 deletions.
diff --git a/pwa/package-lock.json b/pwa/package-lock.json
diff --git a/pwa/package.json b/pwa/package.json
@@ -22,8 +22,8 @@
     "prepare": "cd .. && husky install"
   },
   "dependencies": {
-    "@conduction/components": "2.2.17",
-    "@conduction/theme": "1.0.49",
+    "@conduction/components": "2.2.18",
+    "@conduction/theme": "1.0.50",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.1.18",
@@ -57,7 +57,7 @@
     "@tabler/icons-react": "2.21.0",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
-    "@utrecht/component-library-react": "^1.0.0-alpha.355",
+    "@utrecht/component-library-react": "^1.0.0-alpha.394",
     "@utrecht/design-tokens": "^1.0.0-alpha.524",
     "axios": "^0.25.0",
     "clsx": "^1.1.1",

diff --git a/pwa/src/apiService/resources/openWoo.ts b/pwa/src/apiService/resources/openWoo.ts
@@ -14,8 +14,10 @@ export default class OpenWoo {
     this._send = send;
   }
 
-  public getAll = async (filters: IFiltersContext, currentPage: number): Promise<any> => {
-    let endpoint = `/openWOO?extend[]=all${filtersToQueryParams(filters)}&_order[Publicatiedatum]=desc&_limit=${OPEN_WOO_LIMIT}&_page=${currentPage}`;
+  public getAll = async (filters: IFiltersContext, currentPage: number, limit: number): Promise<any> => {
+    let endpoint = `/openWOO?extend[]=all${filtersToQueryParams(
+      filters,
+    )}&_order[Publicatiedatum]=desc&_limit=${limit}&_page=${currentPage}`;
 
     if (process.env.GATSBY_OIDN_NUMBER) {
       endpoint += `&oidn=${process.env.GATSBY_OIDN_NUMBER}`;

diff --git a/pwa/src/components/paginationLimitSelect/PaginationLimitSelect.module.css b/pwa/src/components/paginationLimitSelect/PaginationLimitSelect.module.css
@@ -0,0 +1,12 @@
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  list-style-type: none;
+
+  padding: 0;
+  margin: 0;
+
+  user-select: none;
+}
diff --git a/pwa/src/components/paginationLimitSelect/PaginationLimitSelect.tsx b/pwa/src/components/paginationLimitSelect/PaginationLimitSelect.tsx
@@ -0,0 +1,72 @@
+import * as React from "react";
+import * as styles from "./PaginationLimitSelect.module.css";
+import clsx from "clsx";
+import { useForm } from "react-hook-form";
+import { SelectSingle } from "@conduction/components";
+import { IQueryLimitContext, queryLimitDefault, useQueryLimitContext } from "../../context/queryLimit";
+import { useTranslation } from "react-i18next";
+
+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 { t } = useTranslation();
+
+  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>{`${t("Results per page")}:`}</span>
+      <SelectSingle
+        ariaLabel={t("Select result limit")}
+        {...{ register, errors, control }}
+        defaultValue={queryLimitDefault}
+        name="limit"
+        options={limitSelectOptions}
+        menuPlacement="auto"
+        placeholder={t("Limit")}
+      />
+    </div>
+  );
+};
+
+const limitSelectOptions = [
+  { label: "6", value: "6" },
+  { label: "9", value: "9" },
+  { label: "12", value: "12" },
+  { label: "21", value: "21" },
+  { label: "30", value: "30" },
+  { label: "60", value: "60" },
+  { label: "120", value: "120" },
+];
diff --git a/pwa/src/context/global.ts b/pwa/src/context/global.ts
@@ -3,13 +3,15 @@ import { defaultGatsbyContext, IGatsbyContext } from "./gatsby";
 import { defaultFiltersContext, IFiltersContext } from "./filters";
 import { defaultDisplayContext, IDisplayContext } from "./displays";
 import { defaultPaginationContext, IPaginationContext } from "./pagination";
+import { defaultQueryLimitContext, IQueryLimitContext } from "./queryLimit";
 
 export interface IGlobalContext {
   initiated: boolean;
   gatsby: IGatsbyContext;
   filters: IFiltersContext;
   displays: IDisplayContext;
   pagination: IPaginationContext;
+  queryLimit: IQueryLimitContext;
 }
 
 export const defaultGlobalContext: IGlobalContext = {
@@ -18,6 +20,7 @@ export const defaultGlobalContext: IGlobalContext = {
   filters: defaultFiltersContext,
   displays: defaultDisplayContext,
   pagination: defaultPaginationContext,
+  queryLimit: defaultQueryLimitContext,
 };
 
 export const GlobalContext = React.createContext<

diff --git a/pwa/src/context/queryLimit.ts b/pwa/src/context/queryLimit.ts
@@ -0,0 +1,24 @@
+import * as React from "react";
+import { GlobalContext } from "./global";
+
+export const queryLimitDefault = 12;
+
+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 };
+};
diff --git a/pwa/src/hooks/openWoo.ts b/pwa/src/hooks/openWoo.ts
@@ -7,8 +7,8 @@ import { IFiltersContext } from "../context/filters";
 export const useOpenWoo = (queryClient: QueryClient) => {
   const API: APIService | null = React.useContext(APIContext);
 
-  const getAll = (filters: IFiltersContext, currentPage: number) =>
-    useQuery<any, Error>(["OpenWoo", filters, currentPage], () => API?.OpenWoo.getAll(filters, currentPage), {
+  const getAll = (filters: IFiltersContext, currentPage: number, limit: number) =>
+    useQuery<any, Error>(["OpenWoo", filters, currentPage, limit], () => API?.OpenWoo.getAll(filters, currentPage, limit), {
       onError: (error) => {
         console.warn(error.message);
       },

diff --git a/pwa/src/templates/landing/LandingTemplate.module.css b/pwa/src/templates/landing/LandingTemplate.module.css
@@ -6,7 +6,7 @@
   margin-block-end: var(--utrecht-space-block-lg);
 }
 
-.header1 {
-  margin-block-start: 0px;
-  margin-block-end: 0px;
+.pagination {
+  display: flex;
+  justify-content: space-between;
 }
diff --git a/pwa/src/templates/landing/LandingTemplate.tsx b/pwa/src/templates/landing/LandingTemplate.tsx
@@ -11,18 +11,20 @@ import { QueryClient } from "react-query";
 import { Pagination } from "@conduction/components";
 import { usePaginationContext } from "../../context/pagination";
 import { useTranslation } from "react-i18next";
+import { useQueryLimitContext } from "../../context/queryLimit";
+import { PaginationLimitSelectComponent } from "../../components/paginationLimitSelect/PaginationLimitSelect";
 
 export const LandingTemplate: React.FC = () => {
   const { currentPage, setCurrentPage } = usePaginationContext();
   const { filters } = useFiltersContext();
   const { t } = useTranslation();
+  const { queryLimit } = useQueryLimitContext();
 
   const queryClient = new QueryClient();
-  const getItems = useOpenWoo(queryClient).getAll(filters, currentPage);
+  const getItems = useOpenWoo(queryClient).getAll(filters, currentPage, queryLimit.objectsQueryLimit);
 
   return (
     <>
-      <h1 className={styles.header1}></h1>
       <JumbotronTemplate />
 
       <Page>
@@ -33,12 +35,14 @@ export const LandingTemplate: React.FC = () => {
           {getItems.data?.results && getItems.data?.results?.length > 0 && (
             <div id="mainContent">
               <ResultsDisplayTemplate displayKey="landing-results" requests={getItems.data.results} />
-
-              <Pagination
-                ariaLabels={{ previousPage: t("Previous page"), nextPage: t("Next page"), page: t("Page") }}
-                totalPages={getItems.data.pages}
-                {...{ currentPage, setCurrentPage }}
-              />
+              <div className={styles.pagination}>
+                <Pagination
+                  ariaLabels={{ previousPage: t("Previous page"), nextPage: t("Next page"), page: t("Page") }}
+                  totalPages={getItems.data.pages}
+                  {...{ currentPage, setCurrentPage }}
+                />
+                <PaginationLimitSelectComponent queryLimitName={"objectsQueryLimit"} />
+              </div>
             </div>
           )}
           {getItems.isLoading && <Skeleton height={"200px"} />}

diff --git a/pwa/src/templates/templateParts/tableResultsTemplate/TableResultsTemplate.tsx b/pwa/src/templates/templateParts/tableResultsTemplate/TableResultsTemplate.tsx
@@ -11,6 +11,7 @@ import {
 import { navigate } from "gatsby";
 import { translateDate } from "../../../services/dateFormat";
 import { useTranslation } from "react-i18next";
+import { HorizontalOverflowWrapper } from "@conduction/components";
 
 interface TableResultsTemplateProps {
   requests: any[];
@@ -20,35 +21,42 @@ export const TableResultsTemplate: React.FC<TableResultsTemplateProps> = ({ requ
   const { t, i18n } = useTranslation();
 
   return (
-    <Table className={styles.table}>
-      <TableHeader className={styles.tableHeader}>
-        <TableRow>
-          <TableHeaderCell>{t("Subject")}</TableHeaderCell>
-          <TableHeaderCell>{t("Publication date")}</TableHeaderCell>
-          <TableHeaderCell>{t("Summary")}</TableHeaderCell>
-        </TableRow>
-      </TableHeader>
-      <TableBody className={styles.tableBody}>
-        {requests.map((request) => (
-          <TableRow
-            className={styles.tableRow}
-            key={request.id}
-            onClick={() => navigate(request.id)}
-            tabIndex={0}
-            aria-label={`${request.Titel},  ${
-              request.Publicatiedatum ? translateDate(i18n.language, request.Publicatiedatum) : t("N/A")
-            }, ${request.Samenvatting}`}
-          >
-            <TableCell>{request.Titel ?? t("No subject available")}</TableCell>
-            <TableCell>
-              {request.Publicatiedatum
-                ? translateDate(i18n.language, request.Publicatiedatum)
-                : t("No publication date available")}
-            </TableCell>
-            <TableCell>{request.Samenvatting ?? t("No summary available")}</TableCell>
+    <HorizontalOverflowWrapper
+      ariaLabels={{
+        scrollLeftButton: t("Scroll table to the left"),
+        scrollRightButton: t("Scroll table to the right"),
+      }}
+    >
+      <Table className={styles.table}>
+        <TableHeader className={styles.tableHeader}>
+          <TableRow>
+            <TableHeaderCell>{t("Subject")}</TableHeaderCell>
+            <TableHeaderCell>{t("Publication date")}</TableHeaderCell>
+            <TableHeaderCell>{t("Summary")}</TableHeaderCell>
           </TableRow>
-        ))}
-      </TableBody>
-    </Table>
+        </TableHeader>
+        <TableBody className={styles.tableBody}>
+          {requests.map((request) => (
+            <TableRow
+              className={styles.tableRow}
+              key={request.id}
+              onClick={() => navigate(request.id)}
+              tabIndex={0}
+              aria-label={`${request.Titel},  ${
+                request.Publicatiedatum ? translateDate(i18n.language, request.Publicatiedatum) : t("N/A")
+              }, ${request.Samenvatting}`}
+            >
+              <TableCell>{request.Titel ?? t("No subject available")}</TableCell>
+              <TableCell>
+                {request.Publicatiedatum
+                  ? translateDate(i18n.language, request.Publicatiedatum)
+                  : t("No publication date available")}
+              </TableCell>
+              <TableCell>{request.Samenvatting ?? t("No summary available")}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </HorizontalOverflowWrapper>
   );
 };