Skip to content

Commit

Permalink
Merge pull request #478 from OpenCatalogi/publications
Browse files Browse the repository at this point in the history
Added filters to publications
  • Loading branch information
remko48 authored Jul 10, 2024
2 parents 9cc707a + ff605c4 commit 9a0dba8
Show file tree
Hide file tree
Showing 13 changed files with 670 additions and 57 deletions.
16 changes: 12 additions & 4 deletions pwa/src/apiService/resources/publication.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Send } from "../apiService";
import { AxiosInstance } from "axios";
import { IFiltersContext } from "../../context/filters";
import { filtersToQueryParams } from "../../services/filtersToQueryParams";
import { IPublicationFiltersContext } from "../../context/publicationFilters";
import { filtersToPublicationsQueryParams } from "../../services/filtersToPublicationsQueryParams";

export default class Publication {
private _instance: AxiosInstance;
Expand All @@ -16,8 +16,8 @@ export default class Publication {
return data;
};

public getSearch = async (filters: IFiltersContext, currentPage: number, limit: number): Promise<any> => {
let endpoint = `/search`;
public getSearch = async (filters: IPublicationFiltersContext, currentPage: number, limit: number): Promise<any> => {
let endpoint = `/search${filtersToPublicationsQueryParams(filters)}`;

if (
window.sessionStorage.getItem("GITHUB_ORGANIZATION_URL") !== "" &&
Expand All @@ -32,4 +32,12 @@ export default class Publication {

return data;
};

public getFilterOptions = async (): Promise<any> => {
let endpoint = "/search?_queries[]=data.status";

const { data } = await Send(this._instance, "GET", endpoint);

return data;
};
}
3 changes: 3 additions & 0 deletions pwa/src/context/global.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,13 @@ import { defaultFiltersContext, IFiltersContext } from "./filters";
import { defaultPaginationContext, IPaginationContext } from "./pagination";
import { defaultQueryLimitContext, IQueryLimitContext } from "./queryLimit";
import { defaultResultDisplayLayoutContext, IResultDisplayLayoutContext } from "./resultDisplayLayout";
import { defaultPublicationFiltersContext, IPublicationFiltersContext } from "./publicationFilters";

export interface IGlobalContext {
initiated: boolean;
gatsby: IGatsbyContext;
filters: IFiltersContext;
publicationFilters: IPublicationFiltersContext;
pagination: IPaginationContext;
queryLimit: IQueryLimitContext;
resultDisplayLayout: IResultDisplayLayoutContext;
Expand All @@ -18,6 +20,7 @@ export const defaultGlobalContext: IGlobalContext = {
initiated: false,
gatsby: defaultGatsbyContext,
filters: defaultFiltersContext,
publicationFilters: defaultPublicationFiltersContext,
pagination: defaultPaginationContext,
queryLimit: defaultQueryLimitContext,
resultDisplayLayout: defaultResultDisplayLayoutContext,
Expand Down
27 changes: 27 additions & 0 deletions pwa/src/context/publicationFilters.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import * as React from "react";
import { GlobalContext } from "./global";

export interface IPublicationFiltersContext {
_search?: string;
status?: string;
}

export const defaultPublicationFiltersContext: IPublicationFiltersContext = {
_search: "",
status: "",
};

export const usePublicationFiltersContext = () => {
const [globalContext, setGlobalContext] = React.useContext(GlobalContext);

const publicationFilters: IPublicationFiltersContext = globalContext.publicationFilters;

const setPublicationFilters = (newPublicationFilters: IPublicationFiltersContext) => {
setGlobalContext((oldGlobalContext) => ({
...oldGlobalContext,
publicationFilters: newPublicationFilters,
}));
};

return { setPublicationFilters, publicationFilters };
};
13 changes: 10 additions & 3 deletions pwa/src/hooks/publication.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as React from "react";
import { QueryClient, useQuery } from "react-query";
import APIService from "../apiService/apiService";
import APIContext from "../apiService/apiContext";
import { IFiltersContext } from "../context/filters";
import { IPublicationFiltersContext } from "../context/publicationFilters";

export const usePublication = (queryClient: QueryClient) => {
const API: APIService | null = React.useContext(APIContext);
Expand All @@ -17,7 +17,7 @@ export const usePublication = (queryClient: QueryClient) => {
enabled: !!publicationId,
});

const getSearch = (filters: IFiltersContext, currentPage: number, limit: number) =>
const getSearch = (filters: IPublicationFiltersContext, currentPage: number, limit: number) =>
useQuery<any, Error>(
["publications", filters, currentPage, limit],
() => API?.Publication.getSearch(filters, currentPage, limit),
Expand All @@ -28,5 +28,12 @@ export const usePublication = (queryClient: QueryClient) => {
},
);

return { getOne, getSearch };
const getFilterOptions = () =>
useQuery<any, Error>(["available_publication_catagories"], () => API?.Publication.getFilterOptions(), {
onError: (error) => {
console.warn(error.message);
},
});

return { getOne, getSearch, getFilterOptions };
};
88 changes: 88 additions & 0 deletions pwa/src/services/filtersToPublicationsQueryParams.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import _ from "lodash";

export const filtersToPublicationsQueryParams = (filters: any): string => {
Object.keys(filters)
.filter((key) => filterKeysToRemove.includes(key))
.forEach((key) => {
delete filters[key];
});

let params = "";
let index = 0;

for (const [key, value] of Object.entries(filters)) {
if (!value) continue;
index + 1;

if (typeof value === "string") {
switch (key) {
// case "softwareType":
// value === "standalone" ? (params += `&softwareType[regex]=${value}`) : (params += `&${key}=${value}`);
// break;
default:
params += index === 0 ? `?${key}=${value}` : `&${key}=${value}`;
break;
}
}

if (typeof value === "boolean") {
switch (key) {
default:
params += index === 0 ? `?${key}=${value}` : `&${key}=${value}`;
break;
}
}
if (Array.isArray(value)) {
let arrayParams = "";

value.forEach((value) => {
arrayParams += index === 0 ? `?${key}[]=${value}` : `&${key}[]=${value}`;
});

params += arrayParams;
}
}

console.log(params);

return params;
};

const filterKeysToRemove: string[] = [
"resultDisplayLayout",
"dependenciesDisplayLayout",
"landingDisplayLayout",
"catagoryDisplayLayout",
"organizationsResultDisplayLayout",
];

export const filtersToPublicationsUrlQueryParams = (filters: Record<string, any>, pathname: string): string => {
const params = Object.entries(filters)
.map(([key, value]) => {
if (value === null || value === undefined || value === "" || (Array.isArray(value) && _.isEmpty(value)))
return null;
if (key === "embedded.rating.rating[>%3D]") return `rating=${value}`;

if (pathname.includes("/publications")) {
if (key === "applicationCurrentPage") return null;
if (key === "organizationCurrentPage") return null;
if (key === "componentsCurrentPage") return null;

if (key === "isForked" && window.sessionStorage.getItem("FILTER_FORKS") === "false") return null;
if (key === "orderRating" && window.sessionStorage.getItem("FILTER_RATING") === "false") return null;
if (key === "rating" && window.sessionStorage.getItem("FILTER_RATING") !== "OpenCatalogi") return null;
if (key === "ratingCommonground" && window.sessionStorage.getItem("FILTER_RATING") !== "Commonground")
return null;
}

const formattedValue = Array.isArray(value)
? value.map((v) => encodeURIComponent(v)).join(`&${key}[]=`)
: encodeURIComponent(value.toString());

return `${Array.isArray(value) ? `${key}[]` : key}=${formattedValue}`;
})
.filter(Boolean)
.join("&");

return params ? `?${params}` : "";
};
10 changes: 3 additions & 7 deletions pwa/src/services/filtersToQueryParams.ts
Original file line number Diff line number Diff line change
Expand Up @@ -101,21 +101,17 @@ export const filtersToUrlQueryParams = (filters: Record<string, any>, pathname:
.map(([key, value]) => {
if (value === null || value === undefined || value === "" || (Array.isArray(value) && _.isEmpty(value)))
return null;
if (key === "embedded.rating.rating[>%3D]") return `rating=${value}`;

if (pathname.includes("/components") || pathname === "/") {
if (pathname.includes("/publications") || pathname === "/") {
if (key === "landingDisplayLayout") return null;
if (key === "dependenciesDisplayLayout") return null;
if (key === "catagoryDisplayLayout") return null;
if (key === "organizationsResultDisplayLayout") return null;
if (key === "applicationCurrentPage") return null;
if (key === "organizationCurrentPage") return null;
if (key === "organizationCurrentPage") return null;

if (key === "isForked" && window.sessionStorage.getItem("FILTER_FORKS") === "false") return null;
if (key === "orderRating" && window.sessionStorage.getItem("FILTER_RATING") === "false") return null;
if (key === "rating" && window.sessionStorage.getItem("FILTER_RATING") !== "OpenCatalogi") return null;
if (key === "ratingCommonground" && window.sessionStorage.getItem("FILTER_RATING") !== "Commonground")
return null;
return null;
}

const formattedValue = Array.isArray(value)
Expand Down
66 changes: 39 additions & 27 deletions pwa/src/templates/publicationDetail/PublicationsDetailTemplate.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,9 @@ export const PublicationsDetailTemplate: React.FC<PublicationsDetailTemplateProp

<ExpandableLeadParagraph
description={
_getPublication.data?.data?.description ?? _getPublication.data?.data?.summary ?? t("No description available")
_getPublication.data?.data?.description ??
_getPublication.data?.data?.summary ??
t("No description available")
}
/>

Expand All @@ -259,14 +261,20 @@ export const PublicationsDetailTemplate: React.FC<PublicationsDetailTemplateProp
styles[
_.camelCase(
t(
`${_getPublication.data?.data?.embedded?.nl?.embedded?.commonground?.layerType ?? "Unknown"} layer`,
`${
_getPublication.data?.data?.embedded?.nl?.embedded?.commonground?.layerType ?? "Unknown"
} layer`,
),
)
]
}
>
<FontAwesomeIcon icon={faLayerGroup} />
{t(_.upperFirst(_getPublication.data?.data?.embedded?.nl?.embedded?.commonground?.layerType ?? "Unknown"))}
{t(
_.upperFirst(
_getPublication.data?.data?.embedded?.nl?.embedded?.commonground?.layerType ?? "Unknown",
),
)}
</DataBadge>

{_getPublication.data?.data?.category && (
Expand Down Expand Up @@ -545,19 +553,21 @@ export const PublicationsDetailTemplate: React.FC<PublicationsDetailTemplateProp
<TableRow className={styles.tableRow}>
<TableCell className={styles.title}>{t("Products")}</TableCell>
<TableCell>
{_getPublication.data?.data?.embedded?.nl?.upl.map((product: string, idx: number) => (
<span key={idx}>
<Link
target="_new"
href="http://standaarden.overheid.nl/owms/terms/AangifteVertrekBuitenland"
>
<Icon>
<IconExternalLink />
</Icon>
{product},{" "}
</Link>
</span>
))}
{_getPublication.data?.data?.embedded?.nl?.upl.map(
(product: string, idx: number) => (
<span key={idx}>
<Link
target="_new"
href="http://standaarden.overheid.nl/owms/terms/AangifteVertrekBuitenland"
>
<Icon>
<IconExternalLink />
</Icon>
{product},{" "}
</Link>
</span>
),
)}
</TableCell>
</TableRow>
)}
Expand Down Expand Up @@ -597,11 +607,15 @@ export const PublicationsDetailTemplate: React.FC<PublicationsDetailTemplateProp
}}
data-tooltip-id={TOOLTIP_ID}
data-tooltip-content={`${t("This component has a rating of")} ${t(
getCommongroundRating(_getPublication.data?.data?.embedded?.nl?.embedded?.commonground?.rating ?? 0),
getCommongroundRating(
_getPublication.data?.data?.embedded?.nl?.embedded?.commonground?.rating ?? 0,
),
)}`}
>
<Icon>
{getCommongroundImage(_getPublication.data?.data?.embedded?.nl?.embedded?.commonground?.rating ?? 0)}
{getCommongroundImage(
_getPublication.data?.data?.embedded?.nl?.embedded?.commonground?.rating ?? 0,
)}
</Icon>
{t("Common Ground rating")}
</Button>
Expand Down Expand Up @@ -1062,7 +1076,7 @@ export const PublicationsDetailTemplate: React.FC<PublicationsDetailTemplateProp
: attachement.description}
</div>
</TableCell>
<TableCell className={styles.license}>
<TableCell>
<DataBadge
className={styles.tagWidth}
data-tooltip-id={TOOLTIP_ID}
Expand All @@ -1072,24 +1086,22 @@ export const PublicationsDetailTemplate: React.FC<PublicationsDetailTemplateProp
{attachement.license}
</DataBadge>
</TableCell>
<TableCell className={styles.type}>{attachement.type}</TableCell>
<TableCell className={styles.published}>
<TableCell>{attachement.type}</TableCell>
<TableCell>
<span className={styles.date}>{attachement.published}</span>
</TableCell>
<TableCell className={styles.modified}>
<TableCell>
<span className={styles.date}>{attachement.modified}</span>
</TableCell>
<TableCell className={styles.downloadUrl}>
<TableCell>
<Link
onClick={(e) => {
e.preventDefault(), open(attachement.downloadURL);
}}
href={`/publications/${_getPublication.data?.data?.id}`}
className={styles.tagWidth}
>
<Icon>
<FontAwesomeIcon icon={faDownload} />
</Icon>
{t("Download")}
{t("Toegangs url")}
</Link>
</TableCell>
</TableRow>
Expand Down
Loading

0 comments on commit 9a0dba8

Please sign in to comment.