From 53e7c12b0a4f6d9a0c60d79daf41bbf9ebfd22c9 Mon Sep 17 00:00:00 2001 From: Remko Date: Tue, 31 Oct 2023 11:19:41 +0100 Subject: [PATCH 1/8] added pagination limit to searc/components --- pwa/src/apiService/resources/search.ts | 4 +- .../PaginationLimitSelect.module.css | 12 +++ .../PaginationLimitSelect.tsx | 75 +++++++++++++++++++ pwa/src/context/global.ts | 3 + pwa/src/context/queryLimit.ts | 28 +++++++ pwa/src/hooks/search.ts | 4 +- .../components/ComponentsTemplate.module.css | 7 ++ .../components/ComponentsTemplate.tsx | 15 +++- pwa/src/translations/en.ts | 4 + pwa/src/translations/nl.ts | 5 ++ pwa/static/.env.development | 2 +- 11 files changed, 150 insertions(+), 9 deletions(-) create mode 100644 pwa/src/components/paginationLimitSelect/PaginationLimitSelect.module.css create mode 100644 pwa/src/components/paginationLimitSelect/PaginationLimitSelect.tsx create mode 100644 pwa/src/context/queryLimit.ts diff --git a/pwa/src/apiService/resources/search.ts b/pwa/src/apiService/resources/search.ts index 6af38eada..fb9fbbc29 100644 --- a/pwa/src/apiService/resources/search.ts +++ b/pwa/src/apiService/resources/search.ts @@ -10,10 +10,10 @@ export default class Search { this._instance = _instance; } - public getSearch = async (filters: IFiltersContext): Promise => { + public getSearch = async (filters: IFiltersContext, limit: number): Promise => { let endpoint = `/search?page=${ filters.currentPage - }&order[_self.dateCreated]=desc&limit=10&extend[]=all${filtersToQueryParams(filters)}`; + }&order[_self.dateCreated]=desc&limit=${limit}&extend[]=all${filtersToQueryParams(filters)}`; if (process.env.GATSBY_GITHUB_ORGANIZATION_URL) { endpoint += `&embedded.url.embedded.organisation.github=${process.env.GATSBY_GITHUB_ORGANIZATION_URL}`; diff --git a/pwa/src/components/paginationLimitSelect/PaginationLimitSelect.module.css b/pwa/src/components/paginationLimitSelect/PaginationLimitSelect.module.css new file mode 100644 index 000000000..4357e4cd3 --- /dev/null +++ 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 new file mode 100644 index 000000000..d672ee43f --- /dev/null +++ b/pwa/src/components/paginationLimitSelect/PaginationLimitSelect.tsx @@ -0,0 +1,75 @@ +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, QUERY_LIMIT_DEFAULT, useQueryLimitContext } from "../../context/queryLimit"; +import { useTranslation } from "react-i18next"; + +interface PaginationLimitSelectProps { + queryLimitName: string; + layoutClassName?: string; +} + +export const PaginationLimitSelectComponent: React.FC = ({ + 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); + + if (selectedLimit) { + setQueryLimit({ ...queryLimit, [queryLimitName]: parseInt(selectedLimit.value) }); + } + }, [watchLimit]); + + React.useEffect(() => { + setValue( + "limit", + limitSelectOptions.find((limitOption) => limitOption.value === (value !== undefined && value.toString())), + ); + }, []); + + return ( +
+ {t("Results per page")}: + +
+ ); +}; + +const limitSelectOptions = [ + { label: "6", value: "6" }, + { label: "8", value: "8" }, + { label: "10", value: "10" }, + { label: "16", value: "16" }, + { label: "20", value: "20" }, + { label: "40", value: "40" }, + { label: "60", value: "60" }, + { label: "100", value: "100" }, +]; diff --git a/pwa/src/context/global.ts b/pwa/src/context/global.ts index fff2aa008..a271a8b74 100644 --- a/pwa/src/context/global.ts +++ b/pwa/src/context/global.ts @@ -1,17 +1,20 @@ import * as React from "react"; import { defaultGatsbyContext, IGatsbyContext } from "./gatsby"; import { defaultFiltersContext, IFiltersContext } from "./filters"; +import { defaultQueryLimitContext, IQueryLimitContext } from "./queryLimit"; export interface IGlobalContext { initiated: boolean; gatsby: IGatsbyContext; filters: IFiltersContext; + queryLimit: IQueryLimitContext; } export const defaultGlobalContext: IGlobalContext = { initiated: false, gatsby: defaultGatsbyContext, filters: defaultFiltersContext, + queryLimit: defaultQueryLimitContext, }; export const GlobalContext = React.createContext< diff --git a/pwa/src/context/queryLimit.ts b/pwa/src/context/queryLimit.ts new file mode 100644 index 000000000..be9aa1a9f --- /dev/null +++ b/pwa/src/context/queryLimit.ts @@ -0,0 +1,28 @@ +import * as React from "react"; +import { GlobalContext } from "./global"; + +export const QUERY_LIMIT_DEFAULT = 10; + +export interface IQueryLimitContext { + componentsSearchQueryLimit: number; + organizationsQueryLimit: number; + applicationsQueryLimit: number; +} + +export const defaultQueryLimitContext: IQueryLimitContext = { + componentsSearchQueryLimit: QUERY_LIMIT_DEFAULT, + organizationsQueryLimit: QUERY_LIMIT_DEFAULT, + applicationsQueryLimit: QUERY_LIMIT_DEFAULT, +}; + +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/search.ts b/pwa/src/hooks/search.ts index f6eb47c11..797dd9a09 100644 --- a/pwa/src/hooks/search.ts +++ b/pwa/src/hooks/search.ts @@ -7,8 +7,8 @@ import { IFiltersContext } from "../context/filters"; export const useSearch = (_: QueryClient) => { const API: APIService | null = React.useContext(APIContext); - const getSearch = (filters: IFiltersContext) => - useQuery(["search", filters], () => API?.Search.getSearch(filters), { + const getSearch = (filters: IFiltersContext, limit: number) => + useQuery(["search", filters, limit], () => API?.Search.getSearch(filters, limit), { onError: (error) => { throw new Error(error.message); }, diff --git a/pwa/src/templates/components/ComponentsTemplate.module.css b/pwa/src/templates/components/ComponentsTemplate.module.css index 166597f95..d68ece6e5 100644 --- a/pwa/src/templates/components/ComponentsTemplate.module.css +++ b/pwa/src/templates/components/ComponentsTemplate.module.css @@ -55,6 +55,13 @@ align-items: center; } +.pagination { + display: grid; + justify-content: unset; + justify-items: center; + margin-block-start: var(--web-app-size-lg); +} + @media only screen and (min-width: 992px) { .header { display: flex; diff --git a/pwa/src/templates/components/ComponentsTemplate.tsx b/pwa/src/templates/components/ComponentsTemplate.tsx index 55d3fa3f5..516e5d271 100644 --- a/pwa/src/templates/components/ComponentsTemplate.tsx +++ b/pwa/src/templates/components/ComponentsTemplate.tsx @@ -15,14 +15,20 @@ import ResultsDisplaySwitch from "../../components/resultsDisplaySwitch/ResultsD import { Alert, Heading, Icon, Paragraph } from "@utrecht/component-library-react/dist/css-module"; import { IconInfoCircle } from "@tabler/icons-react"; import { useComponent } from "../../hooks/components"; +import { PaginationLimitSelectComponent } from "../../components/paginationLimitSelect/PaginationLimitSelect"; +import { useQueryLimitContext } from "../../context/queryLimit"; export const ComponentsTemplate: React.FC = () => { const { filters, setFilters } = useFiltersContext(); const { t } = useTranslation(); + const { queryLimit } = useQueryLimitContext(); const queryClient = new QueryClient(); const _useSearch = useSearch(queryClient); - const getComponents = _useSearch.getSearch({ ...filters, resultDisplayLayout: "table", organizationSearch: "" }); // Ensure no refetch on resultDisplayLayout change + const getComponents = _useSearch.getSearch( + { ...filters, resultDisplayLayout: "table", organizationSearch: "" }, + queryLimit.componentsSearchQueryLimit, + ); // Ensure no refetch on resultDisplayLayout change const _useComponents = useComponent(queryClient); const componentsCount = _useComponents.getCount(defaultFiltersContext); @@ -32,7 +38,7 @@ export const ComponentsTemplate: React.FC = () => {
- Componenten {componentsCount.data && `(${componentsCount.data})`} + {t("Components")} {componentsCount.data >= 0 && `(${componentsCount.data})`}
@@ -94,7 +100,7 @@ export const ComponentsTemplate: React.FC = () => { {getComponents.data.results.length && ( - <> +
{ setCurrentPage={(page: any) => setFilters({ ...filters, currentPage: page })} ariaLabels={{ nextPage: t("Next page"), previousPage: t("Previous page"), page: t("Page") }} /> - + +
)} )} diff --git a/pwa/src/translations/en.ts b/pwa/src/translations/en.ts index 0c97c813c..29006969a 100644 --- a/pwa/src/translations/en.ts +++ b/pwa/src/translations/en.ts @@ -140,4 +140,8 @@ export const en = { "Hide forks": "Hide forks", "Hide obsolete": "Hide obsolete", "Phone number": "Phone number", + "No results found": "No results found", + "No results available": "No results available", + "Results per page": "Results per page", + "Select result limit": "Select result limit", }; diff --git a/pwa/src/translations/nl.ts b/pwa/src/translations/nl.ts index a14355ed7..46b37ba89 100644 --- a/pwa/src/translations/nl.ts +++ b/pwa/src/translations/nl.ts @@ -69,6 +69,7 @@ export const nl = { Publications: "Publicaties", Usage: "Gebruik", Page: "Pagina", + Limit: "Limiet", "Open Catalogs": "OpenCatalogi", "Reusable components within the government": "Herbruikbare componenten binnen de overheid", "Information Models": "Informatiemodellen", @@ -141,4 +142,8 @@ export const nl = { "Hide forks": "Forks verbergen", "Hide obsolete": "Uitgefaseerd verbergen", "Phone number": "Telefoonnummer", + "No results found": "Geen resultaten gevonden", + "No results available": "Geen resultaten beschikbaar", + "Results per page": "Resultaten per pagina", + "Select result limit": "Selecteer resultaten limiet", }; diff --git a/pwa/static/.env.development b/pwa/static/.env.development index 80de8ebd0..1c4bbc7fd 100644 --- a/pwa/static/.env.development +++ b/pwa/static/.env.development @@ -13,7 +13,7 @@ GATSBY_ADMIN_DASHBOARD_URL=https://admin.opencatalogi.nl # Config GATSBY_NL_DESIGN_THEME_CLASSNAME=rotterdam-theme -GATSBY_GITHUB_ORGANIZATION_URL="https://github.com/ConductionNL" +# GATSBY_GITHUB_ORGANIZATION_URL="https://github.com/ConductionNL" # Header GATSBY_HEADER_LOGO_URL=https://www.rotterdam.nl/images/logo-base.svg From 201f96e939149f37884b5baae9ec9d3a95fc45ba Mon Sep 17 00:00:00 2001 From: Remko Date: Tue, 31 Oct 2023 11:55:29 +0100 Subject: [PATCH 2/8] added hook to set current page to 1 on limit change --- pwa/src/templates/components/ComponentsTemplate.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/pwa/src/templates/components/ComponentsTemplate.tsx b/pwa/src/templates/components/ComponentsTemplate.tsx index 516e5d271..f640f7604 100644 --- a/pwa/src/templates/components/ComponentsTemplate.tsx +++ b/pwa/src/templates/components/ComponentsTemplate.tsx @@ -33,6 +33,10 @@ export const ComponentsTemplate: React.FC = () => { const _useComponents = useComponent(queryClient); const componentsCount = _useComponents.getCount(defaultFiltersContext); + React.useEffect(() => { + setFilters({ ...filters, currentPage: 1 }); + }, [queryLimit.componentsSearchQueryLimit]); + return (
From 9276dd6c13865f1a124784c4283e212a4adeddd5 Mon Sep 17 00:00:00 2001 From: Remko Date: Tue, 31 Oct 2023 11:59:59 +0100 Subject: [PATCH 3/8] added pagination limit to applications --- pwa/src/apiService/resources/applications.ts | 10 +++- pwa/src/hooks/applications.ts | 17 ++++-- .../ApplicationsTemplate.module.css | 7 +++ .../ApplicationsTemplate.tsx | 52 ++++++++++++------- pwa/src/translations/nl.ts | 5 +- 5 files changed, 66 insertions(+), 25 deletions(-) diff --git a/pwa/src/apiService/resources/applications.ts b/pwa/src/apiService/resources/applications.ts index 93c2d6851..47220289b 100644 --- a/pwa/src/apiService/resources/applications.ts +++ b/pwa/src/apiService/resources/applications.ts @@ -15,13 +15,19 @@ export default class Applications { return data; }; - public getAll = async (filters: IFiltersContext): Promise => { + public getAll = async (filters: IFiltersContext, limit: number): Promise => { const { data } = await Send( this._instance, "GET", - `/applications?page=${filters.applicationsCurrentPage}&limit=10&extend[]=all`, + `/applications?page=${filters.applicationsCurrentPage}&limit=${limit}&extend[]=all`, ); return data; }; + + public getCount = async (filters: IFiltersContext): Promise => { + const { data } = await Send(this._instance, "GET", `/applications?limit=1`); + + return data.total; + }; } diff --git a/pwa/src/hooks/applications.ts b/pwa/src/hooks/applications.ts index 4e66025e6..185117dcc 100644 --- a/pwa/src/hooks/applications.ts +++ b/pwa/src/hooks/applications.ts @@ -7,8 +7,8 @@ import { IFiltersContext } from "../context/filters"; export const useApplications = (queryClient: QueryClient) => { const API: APIService | null = React.useContext(APIContext); - const getAll = (filters: IFiltersContext) => - useQuery(["applications", filters], () => API?.Applications.getAll(filters), { + const getAll = (filters: IFiltersContext, limit: number) => + useQuery(["applications", filters, limit], () => API?.Applications.getAll(filters, limit), { onError: (error) => { throw new Error(error.message); }, @@ -24,5 +24,16 @@ export const useApplications = (queryClient: QueryClient) => { enabled: !!applicationId, }); - return { getOne, getAll }; + const getCount = (filters: IFiltersContext) => + useQuery(["applications_count", filters], () => API?.Applications.getCount(filters), { + onError: (error) => { + throw new Error(error.message); + }, + refetchOnWindowFocus: false, + refetchOnReconnect: false, + retry: false, + staleTime: 60 * 10 * 1000, // 10 minutes + }); + + return { getOne, getAll, getCount }; }; diff --git a/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.module.css b/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.module.css index 0862eb481..003006990 100644 --- a/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.module.css +++ b/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.module.css @@ -59,6 +59,13 @@ flex: 1; } +.pagination { + display: grid; + justify-content: unset; + justify-items: center; + margin-block-start: var(--web-app-size-lg); +} + @media only screen and (min-width: 992px) { .paginationContainer > *:not(:first-child) { margin-inline-start: var(--web-app-size-xl); diff --git a/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx b/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx index ccabf9c25..613034b7f 100644 --- a/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx +++ b/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx @@ -2,30 +2,42 @@ import * as React from "react"; import * as styles from "./ApplicationsTemplate.module.css"; import { Heading, Paragraph, Icon, Link } from "@utrecht/component-library-react/dist/css-module"; import { Container, Pagination } from "@conduction/components"; -import { useFiltersContext } from "../../context/filters"; +import { defaultFiltersContext, useFiltersContext } from "../../context/filters"; import { useTranslation } from "react-i18next"; import { ApplicationCard } from "../../components/applicationCard/ApplicationCard"; import { QueryClient } from "react-query"; import { useApplications } from "../../hooks/applications"; import Skeleton from "react-loading-skeleton"; -import { IconExternalLink } from "@tabler/icons-react"; +import { PaginationLimitSelectComponent } from "../../components/paginationLimitSelect/PaginationLimitSelect"; +import { useQueryLimitContext } from "../../context/queryLimit"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faExternalLink } from "@fortawesome/free-solid-svg-icons"; export const ApplicationsTemplate: React.FC = () => { const { filters, setFilters } = useFiltersContext(); const { t } = useTranslation(); + const { queryLimit } = useQueryLimitContext(); const queryClient = new QueryClient(); const _useApplications = useApplications(queryClient); - const getApplications = _useApplications.getAll({ - ...filters, - }); + const getApplications = _useApplications.getAll( + { + ...filters, + }, + queryLimit.applicationsQueryLimit, + ); + const applicationsCount = _useApplications.getCount(defaultFiltersContext); + + React.useEffect(() => { + setFilters({ ...filters, applicationsCurrentPage: 1 }); + }, [queryLimit.applicationsQueryLimit]); return (
- {t("Applications")} + {t("Applications")} {applicationsCount.data >= 0 && `(${applicationsCount.data})`} Totaal oplossing op basis van een set componenten. Het gaat om werkende software die een oplossing biedt @@ -33,9 +45,9 @@ export const ApplicationsTemplate: React.FC = () => { - - {" "} - bedrijfsfunctie + + + {t("Business function")} . @@ -43,7 +55,7 @@ export const ApplicationsTemplate: React.FC = () => {
- {getApplications.isSuccess && ( + {getApplications.isSuccess && getApplications.data.total !== 0 && ( <>
{getApplications.data?.results?.map((application: any) => ( @@ -58,17 +70,21 @@ export const ApplicationsTemplate: React.FC = () => { /> ))}
- setFilters({ ...filters, applicationsCurrentPage: page })} - ariaLabels={{ nextPage: t("Next page"), previousPage: t("Previous page"), page: t("Page") }} - /> +
+ setFilters({ ...filters, applicationsCurrentPage: page })} + ariaLabels={{ nextPage: t("Next page"), previousPage: t("Previous page"), page: t("Page") }} + /> + +
)} - {!getApplications.data?.results && !getApplications.isLoading && "Geen resultaten gevonden"} + {!getApplications.data?.results && !getApplications.isLoading && t("No results found")} + {getApplications.isSuccess && getApplications.data.total === 0 && t("No results available")} {getApplications.isLoading && } diff --git a/pwa/src/translations/nl.ts b/pwa/src/translations/nl.ts index 46b37ba89..559d44580 100644 --- a/pwa/src/translations/nl.ts +++ b/pwa/src/translations/nl.ts @@ -136,8 +136,8 @@ export const nl = { "Select organization": "Selecteer ogranisatie", "Select category": "Selecteer categorie", "Select license": "Selecteer licentie", - "Select company function": "Selecteer bedrijfsfunctie", - "Select company services": "Selecteer bedrijfsservices", + "Select business function": "Selecteer bedrijfsfunctie", + "Select business services": "Selecteer bedrijfsservices", "Select reference components": "Selecter referentiecomponenten", "Hide forks": "Forks verbergen", "Hide obsolete": "Uitgefaseerd verbergen", @@ -146,4 +146,5 @@ export const nl = { "No results available": "Geen resultaten beschikbaar", "Results per page": "Resultaten per pagina", "Select result limit": "Selecteer resultaten limiet", + "Business function": "Bedrijfsfunctie" }; From d9d9113d547b4a41bb3f707ef8bcf17ec025469b Mon Sep 17 00:00:00 2001 From: Remko Date: Tue, 31 Oct 2023 12:11:42 +0100 Subject: [PATCH 4/8] added pagination limit to organizations --- pwa/src/apiService/resources/organization.ts | 4 +-- pwa/src/hooks/organization.ts | 4 +-- .../OrganizationDetailTemplate.tsx | 5 ++-- .../OrganizationsTemplate.module.css | 7 +++++ .../OrganizationsTemplate.tsx | 29 ++++++++++++++----- 5 files changed, 34 insertions(+), 15 deletions(-) diff --git a/pwa/src/apiService/resources/organization.ts b/pwa/src/apiService/resources/organization.ts index 63348f5a6..2041610e2 100644 --- a/pwa/src/apiService/resources/organization.ts +++ b/pwa/src/apiService/resources/organization.ts @@ -16,8 +16,8 @@ export default class Organization { return data; }; - public getAll = async (filters: IFiltersContext): Promise => { - let url = `/organizations?page=${filters.organizationCurrentPage}&order[owns]=desc&limit=10&extend[]=all`; + public getAll = async (filters: IFiltersContext, limit: number): Promise => { + let url = `/organizations?page=${filters.organizationCurrentPage}&order[owns]=desc&limit=${limit}&extend[]=all`; if (filters.organizationSearch) { url += `&_search=${filters.organizationSearch}`; diff --git a/pwa/src/hooks/organization.ts b/pwa/src/hooks/organization.ts index 635e39a66..4fcb8ecc2 100644 --- a/pwa/src/hooks/organization.ts +++ b/pwa/src/hooks/organization.ts @@ -17,8 +17,8 @@ export const useOrganization = (queryClient: QueryClient) => { enabled: !!organizationId, }); - const getAll = (filters: IFiltersContext) => - useQuery(["organizations", filters], () => API?.Organization.getAll(filters), { + const getAll = (filters: IFiltersContext, limit: number) => + useQuery(["organizations", filters, limit], () => API?.Organization.getAll(filters, limit), { onError: (error) => { throw new Error(error.message); }, diff --git a/pwa/src/templates/organizationDetail/OrganizationDetailTemplate.tsx b/pwa/src/templates/organizationDetail/OrganizationDetailTemplate.tsx index 2492ebfd3..4bcf50181 100644 --- a/pwa/src/templates/organizationDetail/OrganizationDetailTemplate.tsx +++ b/pwa/src/templates/organizationDetail/OrganizationDetailTemplate.tsx @@ -20,9 +20,8 @@ import organizationPlaceholderImage from "../../assets/images/grey.png"; import { GitHubLogo } from "../../assets/svgs/GitHub"; import { GitLabLogo } from "../../assets/svgs/GitLab"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faCertificate, faEnvelope, faGlobe, faPhone } from "@fortawesome/free-solid-svg-icons"; +import { faArrowLeft, faCertificate, faEnvelope, faGlobe, faPhone } from "@fortawesome/free-solid-svg-icons"; import { ExpandableLeadParagraph } from "../../components/expandableLeadParagraph/ExpandableLeadParagraph"; -import { IconArrowLeft } from "@tabler/icons-react"; import { TOOLTIP_ID } from "../../layout/Layout"; interface OrganizationDetailTemplateProps { @@ -39,7 +38,7 @@ export const OrganizationDetailTemplate: React.FC navigate("/organizations")}> - + {t("Back to organizations")} diff --git a/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.module.css b/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.module.css index 67b4a626f..51bfe4be4 100644 --- a/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.module.css +++ b/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.module.css @@ -25,6 +25,13 @@ flex: 1; } +.pagination { + display: grid; + justify-content: unset; + justify-items: center; + margin-block-start: var(--web-app-size-lg); +} + @media only screen and (min-width: 992px) { .header { display: flex; diff --git a/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx b/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx index 2ed888473..4b34961b1 100644 --- a/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx +++ b/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx @@ -10,14 +10,24 @@ import { Heading } from "@utrecht/component-library-react/dist/css-module"; import { useOrganization } from "../../hooks/organization"; import { OrganizationSearchFiltersTemplate } from "../templateParts/filters/organizationSearchFilterTemplate/OrganizationSearchFilterTemplate"; import { OrganizationDisplayTemplate } from "../templateParts/OrganizationDisplayTemplates/OrganizationDisplayTemplate"; +import { PaginationLimitSelectComponent } from "../../components/paginationLimitSelect/PaginationLimitSelect"; +import { useQueryLimitContext } from "../../context/queryLimit"; export const OrganizationsTemplate: React.FC = () => { const { filters, setFilters } = useFiltersContext(); const { t } = useTranslation(); + const { queryLimit } = useQueryLimitContext(); const queryClient = new QueryClient(); const _useOrganisation = useOrganization(queryClient); - const getOrganisations = _useOrganisation.getAll({ ...filters, organizationsResultDisplayLayout: "cards" }); + const getOrganisations = _useOrganisation.getAll( + { ...filters, organizationsResultDisplayLayout: "cards" }, + queryLimit.organizationsQueryLimit, + ); + + React.useEffect(() => { + setFilters({ ...filters, organizationCurrentPage: 1 }); + }, [queryLimit.organizationsQueryLimit]); return ( @@ -47,13 +57,16 @@ export const OrganizationsTemplate: React.FC = () => { /> {getOrganisations.data.results.length && ( - setFilters({ ...filters, organizationCurrentPage: page })} - ariaLabels={{ nextPage: t("Next page"), previousPage: t("Previous page"), page: t("Page") }} - /> +
+ setFilters({ ...filters, organizationCurrentPage: page })} + ariaLabels={{ nextPage: t("Next page"), previousPage: t("Previous page"), page: t("Page") }} + /> + +
)} )} From b54b85a7e218a52d00de68746b5428f54666a100 Mon Sep 17 00:00:00 2001 From: Remko Date: Tue, 31 Oct 2023 12:36:48 +0100 Subject: [PATCH 5/8] fixed links --- pwa/src/context/filters.ts | 2 +- .../ApplicationsTemplate.module.css | 5 ++ .../ApplicationsTemplate.tsx | 6 ++- .../OrganizationsTemplate.tsx | 5 +- .../templateParts/footer/FooterTemplate.tsx | 54 +++++++++++++------ 5 files changed, 50 insertions(+), 22 deletions(-) diff --git a/pwa/src/context/filters.ts b/pwa/src/context/filters.ts index a8cbb1cfa..c65802aff 100644 --- a/pwa/src/context/filters.ts +++ b/pwa/src/context/filters.ts @@ -48,7 +48,7 @@ export const defaultFiltersContext: IFiltersContext = { dependenciesDisplayLayout: "layer", landingDisplayLayout: "cards", catagoryDisplayLayout: "table", - organizationsResultDisplayLayout: "table", + organizationsResultDisplayLayout: "cards", currentPage: 1, applicationsCurrentPage: 1, organizationCurrentPage: 1, diff --git a/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.module.css b/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.module.css index 003006990..358867b0e 100644 --- a/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.module.css +++ b/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.module.css @@ -46,6 +46,11 @@ } } +.inlineTextLink { + display: inline-flex; + align-items: baseline !important; +} + /* pagination */ .paginationContainer { diff --git a/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx b/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx index 613034b7f..460bf80e1 100644 --- a/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx +++ b/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx @@ -43,7 +43,11 @@ export const ApplicationsTemplate: React.FC = () => { Totaal oplossing op basis van een set componenten. Het gaat om werkende software die een oplossing biedt voor een bepaalde{" "} - + diff --git a/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx b/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx index 4b34961b1..8a58af237 100644 --- a/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx +++ b/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx @@ -20,10 +20,7 @@ export const OrganizationsTemplate: React.FC = () => { const queryClient = new QueryClient(); const _useOrganisation = useOrganization(queryClient); - const getOrganisations = _useOrganisation.getAll( - { ...filters, organizationsResultDisplayLayout: "cards" }, - queryLimit.organizationsQueryLimit, - ); + const getOrganisations = _useOrganisation.getAll({ ...filters }, queryLimit.organizationsQueryLimit); React.useEffect(() => { setFilters({ ...filters, organizationCurrentPage: 1 }); diff --git a/pwa/src/templates/templateParts/footer/FooterTemplate.tsx b/pwa/src/templates/templateParts/footer/FooterTemplate.tsx index 9107a21ac..062d88101 100644 --- a/pwa/src/templates/templateParts/footer/FooterTemplate.tsx +++ b/pwa/src/templates/templateParts/footer/FooterTemplate.tsx @@ -116,9 +116,7 @@ const Logo: React.FC = () => {
- process.env.GATSBY_FOOTER_LOGO_URL ? open(process.env.GATSBY_FOOTER_LOGO_URL) : navigate("/") - } + onClick={() => (process.env.GATSBY_FOOTER_LOGO_URL ? open(process.env.GATSBY_FOOTER_LOGO_URL) : navigate("/"))} src={process.env.GATSBY_FOOTER_LOGO_URL} alt={t("Footer-logo")} aria-label={`${t("Footer-logo")}, ${t("Can open a new window")}`} @@ -129,7 +127,7 @@ const Logo: React.FC = () => { }; const WithLoveByConduction: React.FC = () => { - if (process.env.GATSBY_FOOTER_SHOW_CREATOR === "false") return <>; + // if (process.env.GATSBY_FOOTER_SHOW_CREATOR === "false") return <>; const { t } = useTranslation(); @@ -141,7 +139,9 @@ const WithLoveByConduction: React.FC = () => { target="_blank" aria-label={`${t("Link to github repository")}, ${t("Opens a new window")}`} > - + + + {" "} with{" "} { target="_blank" aria-label={`${t("Link to github contributors page")}, ${t("Opens a new window")}`} > - + + + {" "} by{" "} = ({ item }) => { )} {item.icon && item.icon.placement === "left" && ( - + + + )} {t(item.value)} {item.icon && item.icon.placement === "right" && ( - + + + )} {item.customIcon && item.customIcon.placement === "right" && ( @@ -213,7 +219,9 @@ const InternalLink: React.FC = ({ item }) => { role="button" > {item.icon && item.icon.placement === "left" && ( - + + + )} {item.customIcon && item.customIcon.placement === "left" && ( @@ -223,7 +231,9 @@ const InternalLink: React.FC = ({ item }) => { {t(item.value)} {item.icon && item.icon.placement === "right" && ( - + + + )} {item.customIcon && item.customIcon.placement === "right" && ( @@ -245,7 +255,9 @@ const MarkdownLink: React.FC = ({ item }) => { role="button" > {item.icon && item.icon.placement === "left" && ( - + + + )} {item.customIcon && item.customIcon.placement === "left" && ( @@ -255,7 +267,9 @@ const MarkdownLink: React.FC = ({ item }) => { {t(item.value)} {item.icon && item.icon.placement === "right" && ( - + + + )} {item.customIcon && item.customIcon.placement === "right" && ( @@ -281,7 +295,9 @@ const FilterLink: React.FC = ({ item }) => { role="button" > {item.icon && item.icon.placement === "left" && ( - + + + )} {item.customIcon && item.customIcon.placement === "left" && ( @@ -291,7 +307,9 @@ const FilterLink: React.FC = ({ item }) => { {t(item.value)} {item.icon && item.icon.placement === "right" && ( - + + + )} {item.customIcon && item.customIcon.placement === "right" && ( @@ -311,13 +329,17 @@ const NoLink: React.FC = ({ item }) => { )} {item.icon && item.icon.placement === "left" && ( - + + + )} {t(item.value)} {item.icon && item.icon.placement === "right" && ( - + + + )} {item.customIcon && item.customIcon.placement === "right" && ( From 35b65f30b328b49637001eba3426a4a30088c725 Mon Sep 17 00:00:00 2001 From: Remko Date: Tue, 31 Oct 2023 12:43:26 +0100 Subject: [PATCH 6/8] cleanup --- .../filters/verticalFilters/VerticalFiltersTemplate.tsx | 4 ++-- pwa/src/translations/en.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/pwa/src/templates/templateParts/filters/verticalFilters/VerticalFiltersTemplate.tsx b/pwa/src/templates/templateParts/filters/verticalFilters/VerticalFiltersTemplate.tsx index 8d1f47246..400c15cbc 100644 --- a/pwa/src/templates/templateParts/filters/verticalFilters/VerticalFiltersTemplate.tsx +++ b/pwa/src/templates/templateParts/filters/verticalFilters/VerticalFiltersTemplate.tsx @@ -616,7 +616,7 @@ export const VerticalFiltersTemplate: React.FC = ( id="sortFormLicense" name="bedrijfsfuncties" options={bedrijfsfuncties} - ariaLabel={t("Select company function")} + ariaLabel={t("Select business function")} {...{ errors, control, register }} />
@@ -670,7 +670,7 @@ export const VerticalFiltersTemplate: React.FC = ( id="sortFormServices" name="bedrijfsservices" options={bedrijfsservices} - ariaLabel={t("Select company services")} + ariaLabel={t("Select business services")} {...{ errors, control, register }} />
diff --git a/pwa/src/translations/en.ts b/pwa/src/translations/en.ts index 29006969a..94ab921f4 100644 --- a/pwa/src/translations/en.ts +++ b/pwa/src/translations/en.ts @@ -134,8 +134,8 @@ export const en = { "Select organization": "Select organization", "Select category": "Select category", "Select license": "Select license", - "Select company function": "Select company function", - "Select company services": "Select company services", + "Select business function": "Select business function", + "Select business services": "Select business services", "Select reference components": "Select reference components", "Hide forks": "Hide forks", "Hide obsolete": "Hide obsolete", From 89b8738e90c5a066eda882bdac0f892a24a88cf9 Mon Sep 17 00:00:00 2001 From: Remko Date: Tue, 31 Oct 2023 16:18:07 +0100 Subject: [PATCH 7/8] fixed organisation bug and params bug --- pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx | 2 +- pwa/src/templates/components/ComponentsTemplate.tsx | 2 +- .../templates/organizationsTemplate/OrganizationsTemplate.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx b/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx index 2c5db512d..3898f564b 100644 --- a/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx +++ b/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx @@ -33,7 +33,7 @@ export const ApplicationsTemplate: React.FC = () => { const applicationsCount = _useApplications.getCount(); React.useEffect(() => { - setFilters({ ...filters, applicationsCurrentPage: 1 }); + setPagination({ ...pagination, applicationCurrentPage: 1 }); }, [queryLimit.applicationsQueryLimit]); return ( diff --git a/pwa/src/templates/components/ComponentsTemplate.tsx b/pwa/src/templates/components/ComponentsTemplate.tsx index e73e88a7c..f1f5aa145 100644 --- a/pwa/src/templates/components/ComponentsTemplate.tsx +++ b/pwa/src/templates/components/ComponentsTemplate.tsx @@ -37,7 +37,7 @@ export const ComponentsTemplate: React.FC = () => { const componentsCount = _useComponents.getCount(defaultFiltersContext); React.useEffect(() => { - setFilters({ ...filters, currentPage: 1 }); + setPagination({ ...pagination, componentsCurrentPage: 1 }); }, [queryLimit.componentsSearchQueryLimit]); return ( diff --git a/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx b/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx index 3859bf7a9..057d6a164 100644 --- a/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx +++ b/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx @@ -29,7 +29,7 @@ export const OrganizationsTemplate: React.FC = () => { ); React.useEffect(() => { - setFilters({ ...filters, organizationCurrentPage: 1 }); + setPagination({ ...pagination, organizationCurrentPage: 1 }); }, [queryLimit.organizationsQueryLimit]); return ( From c1d988dc3e81448263fb9f8596841171e1cf6c49 Mon Sep 17 00:00:00 2001 From: Remko Date: Tue, 31 Oct 2023 16:19:59 +0100 Subject: [PATCH 8/8] cleanup --- .../paginationLimitSelect/PaginationLimitSelect.module.css | 2 +- pwa/src/templates/templateParts/footer/FooterTemplate.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/pwa/src/components/paginationLimitSelect/PaginationLimitSelect.module.css b/pwa/src/components/paginationLimitSelect/PaginationLimitSelect.module.css index 4357e4cd3..192005289 100644 --- a/pwa/src/components/paginationLimitSelect/PaginationLimitSelect.module.css +++ b/pwa/src/components/paginationLimitSelect/PaginationLimitSelect.module.css @@ -1,7 +1,7 @@ .container { display: flex; flex-wrap: wrap; - gap: 8px; + gap: var(--web-app-size-xs); align-items: center; list-style-type: none; diff --git a/pwa/src/templates/templateParts/footer/FooterTemplate.tsx b/pwa/src/templates/templateParts/footer/FooterTemplate.tsx index 062d88101..d6b30ced1 100644 --- a/pwa/src/templates/templateParts/footer/FooterTemplate.tsx +++ b/pwa/src/templates/templateParts/footer/FooterTemplate.tsx @@ -127,7 +127,7 @@ const Logo: React.FC = () => { }; const WithLoveByConduction: React.FC = () => { - // if (process.env.GATSBY_FOOTER_SHOW_CREATOR === "false") return <>; + if (process.env.GATSBY_FOOTER_SHOW_CREATOR === "false") return <>; const { t } = useTranslation();