added categories filter

OpenCatalogi · Apr 24, 2024 · 88a23e8 · 88a23e8
1 parent 668b02e
commit 88a23e8
Show file tree

Hide file tree

Showing 6 changed files with 504 additions and 464 deletions.
diff --git a/pwa/src/apiService/resources/availableFilters.ts b/pwa/src/apiService/resources/availableFilters.ts
@@ -9,11 +9,19 @@ export default class AvailableFilters {
   }
 
   public getStatistics = async (): Promise<any> => {
-    let endpoint =
+    const endpoint =
       "/search?embedded.nl.embedded.commonground.rating[%3E%3D]=1&_queries[]=developmentStatus&_queries[]=softwareType&_queries[]=categories&_queries[]=embedded.nl.embedded.commonground.rating";
 
     const { data } = await Send(this._instance, "GET", endpoint);
 
     return data;
   };
+
+  public getFilterOptions = async (): Promise<any> => {
+    const endpoint = "/search?_queries[]=categories";
+
+    const { data } = await Send(this._instance, "GET", endpoint);
+
+    return data;
+  };
 }
diff --git a/pwa/src/hooks/availableFilters.ts b/pwa/src/hooks/availableFilters.ts
@@ -7,11 +7,18 @@ export const useAvailableFilters = () => {
   const API: APIService | null = React.useContext(APIContext);
 
   const getStatistics = () =>
-    useQuery<any, Error>(["available_catagories"], () => API?.AvailableFilters.getStatistics(), {
+    useQuery<any, Error>(["get_statistics"], () => API?.AvailableFilters.getStatistics(), {
       onError: (error) => {
         console.warn(error.message);
       },
     });
 
-  return { getStatistics };
+    const getFilterOptions = () => 
+    useQuery<any, Error>(["available_catagories"], () => API?.AvailableFilters.getFilterOptions(), { 
+      onError: (error) => { 
+        console.warn(error.message); 
+      }, 
+    }); 
+
+  return { getStatistics, getFilterOptions };
 };
diff --git a/pwa/src/services/filtersToQueryParams.ts b/pwa/src/services/filtersToQueryParams.ts
@@ -48,6 +48,9 @@ export const filtersToQueryParams = (filters: any): string => {
               : (params += "&order[embedded.rating.rating]=desc")
             : (params += "");
           break;
+        case "category":
+          params += `&categories=${value}`;
+          break;
         default:
           params += `&${key}=${value}`;
           break;

diff --git a/pwa/src/templates/charts/CommongroundChartsTemplate.tsx b/pwa/src/templates/charts/CommongroundChartsTemplate.tsx
@@ -5,7 +5,7 @@ import Skeleton from "react-loading-skeleton";
 import { useAvailableFilters } from "../../hooks/availableFilters";
 import { useTranslation } from "react-i18next";
 import { statisticsColors } from "../../data/statisticsColors";
-import { Button, Heading3, Icon } from "@utrecht/component-library-react";
+import { Button, Heading3 } from "@utrecht/component-library-react";
 import { PieChart } from "react-minimal-pie-chart";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSquare } from "@fortawesome/free-solid-svg-icons";
@@ -501,7 +501,7 @@ export const CommongroundCartsTemplate: React.FC = () => {
                 onClick={(_, index) => {
                   setFilters({
                     ...defaultFiltersContext,
-                    category: dataRating[index].id,
+                    category: dataDomein[index].title,
                   });
                   setPagination({
                     ...pagination,

diff --git a/pwa/src/templates/templateParts/filters/activeFilters/ActiveFiltersTemplate.tsx b/pwa/src/templates/templateParts/filters/activeFilters/ActiveFiltersTemplate.tsx
@@ -9,7 +9,6 @@ import {
   statuses,
   applicatiefuncties,
   referentieComponenten,
-  categories,
 } from "../../../../data/filters";
 import { useTranslation } from "react-i18next";
 import { DataBadge, Heading } from "@utrecht/component-library-react/dist/css-module";
@@ -18,10 +17,6 @@ export const ActiveFiltersTemplate: React.FC = () => {
   const { filters, setFilters } = useFiltersContext();
   const { t } = useTranslation();
 
-  const category = categories.find((category) => {
-    return category.value === filters?.category;
-  });
-
   const status = statuses.find((status) => {
     return status.value === filters?.developmentStatus;
   });
@@ -123,7 +118,7 @@ export const ActiveFiltersTemplate: React.FC = () => {
 
         {filters.category && (
           <DataBadge onClick={() => setFilters({ ...filters, category: undefined })}>
-            {category?.label ?? ""}{" "}
+            {filters.category ?? ""}
           </DataBadge>
         )}