feat: Update project size filter to support multiple selections

Vizzuality · Dec 26, 2024 · 4b19f04 · 4b19f04
1 parent 2af4c19
commit 4b19f04
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 23 deletions.
diff --git a/client/src/app/(overview)/url-store.ts b/client/src/app/(overview)/url-store.ts
@@ -37,7 +37,7 @@ export interface Parameter<T = keyof z.infer<typeof filtersSchema>> {
 
 export const filtersSchema = z.object({
   [FILTER_KEYS[0]]: z.string().optional(),
-  [FILTER_KEYS[1]]: z.nativeEnum(PROJECT_SIZE_FILTER),
+  [FILTER_KEYS[1]]: z.array(z.nativeEnum(PROJECT_SIZE_FILTER)),
   [FILTER_KEYS[2]]: z.nativeEnum(PROJECT_PRICE_TYPE),
   [FILTER_KEYS[3]]: z.nativeEnum(COST_TYPE_SELECTOR),
   [FILTER_KEYS[4]]: z.string().optional(),
@@ -50,7 +50,7 @@ export const filtersSchema = z.object({
 
 export const INITIAL_FILTERS_STATE: z.infer<typeof filtersSchema> = {
   keyword: "",
-  projectSizeFilter: PROJECT_SIZE_FILTER.MEDIUM,
+  projectSizeFilter: [],
   priceType: PROJECT_PRICE_TYPE.MARKET_PRICE,
   costRangeSelector: COST_TYPE_SELECTOR.NPV,
   countryCode: "",

diff --git a/client/src/containers/overview/filters/index.tsx b/client/src/containers/overview/filters/index.tsx
@@ -3,6 +3,7 @@ import { useState, useEffect } from "react";
 import { CheckedState } from "@radix-ui/react-checkbox";
 import { ACTIVITY } from "@shared/entities/activity.enum";
 import { ECOSYSTEM } from "@shared/entities/ecosystem.enum";
+import { PROJECT_SIZE_FILTER } from "@shared/entities/projects.entity";
 import { useSetAtom } from "jotai/index";
 import { XIcon } from "lucide-react";
 import { useDebounce } from "rooks";
@@ -18,6 +19,8 @@ import {
   useProjectOverviewFilters,
 } from "@/app/(overview)/url-store";
 
+import { FILTERS } from "@/constants/tooltip";
+
 import { Button } from "@/components/ui/button";
 import { CheckboxWrapper } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
@@ -123,6 +126,18 @@ export default function ProjectsFilters() {
     }));
   };
 
+  const handleProjectSizeChange = async (
+    isChecked: CheckedState,
+    size: PROJECT_SIZE_FILTER,
+  ) => {
+    await setFilters((prev) => ({
+      ...prev,
+      projectSizeFilter: isChecked
+        ? [...prev.projectSizeFilter, size]
+        : prev.projectSizeFilter.filter((e) => e !== size),
+    }));
+  };
+
   const debouncedCostChange = useDebounce(async (cost: number[]) => {
     await setFilters((prev) => ({
       ...prev,
@@ -350,6 +365,31 @@ export default function ProjectsFilters() {
           max={formatNumber(INITIAL_ABATEMENT_POTENTIAL_RANGE[1])}
         />
       </div>
+
+      <div className="space-y-2">
+        <Label
+          tooltip={{
+            title: "Project size",
+            content: FILTERS.PROJECT_SIZE,
+          }}
+        >
+          Project size
+        </Label>
+        <ul className="flex gap-2">
+          {Object.values(PROJECT_SIZE_FILTER).map((size) => (
+            <li key={size}>
+              <CheckboxWrapper
+                label={size}
+                id={size}
+                checked={filters.projectSizeFilter.includes(size)}
+                onCheckedChange={async (isChecked) => {
+                  await handleProjectSizeChange(isChecked, size);
+                }}
+              />
+            </li>
+          ))}
+        </ul>
+      </div>
     </section>
   );
 }
diff --git a/client/src/containers/overview/header/parameters/index.tsx b/client/src/containers/overview/header/parameters/index.tsx
@@ -1,5 +1,4 @@
 import {
-  PROJECT_SIZE_FILTER,
   COST_TYPE_SELECTOR,
   PROJECT_PRICE_TYPE,
 } from "@shared/entities/projects.entity";
@@ -25,26 +24,6 @@ import {
 } from "@/components/ui/select";
 
 export const PROJECT_PARAMETERS: Parameter[] = [
-  {
-    key: FILTER_KEYS[1],
-    label: "Project size",
-    className: "w-[125px]",
-    tooltipContent: FILTERS.PROJECT_SIZE,
-    options: [
-      {
-        label: PROJECT_SIZE_FILTER.SMALL,
-        value: PROJECT_SIZE_FILTER.SMALL,
-      },
-      {
-        label: PROJECT_SIZE_FILTER.MEDIUM,
-        value: PROJECT_SIZE_FILTER.MEDIUM,
-      },
-      {
-        label: PROJECT_SIZE_FILTER.LARGE,
-        value: PROJECT_SIZE_FILTER.LARGE,
-      },
-    ],
-  },
   {
     key: FILTER_KEYS[2],
     label: "Carbon pricing type",