Filters enhancement

Vizzuality · Dec 2, 2024 · 43edcd2 · 43edcd2
1 parent f14e105
commit 43edcd2
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 10 deletions.
diff --git a/client/src/containers/sidebar/explore-sidebar/index.tsx b/client/src/containers/sidebar/explore-sidebar/index.tsx
@@ -3,6 +3,7 @@ import { FC } from "react";
 import useFilters from "@/hooks/use-filters";
 
 import FilterSettings from "@/containers/sidebar/filter-settings";
+import ClearFiltersButton from "@/containers/sidebar/filter-settings/clear-filters-button";
 import SectionsNav from "@/containers/sidebar/sections-nav";
 
 import {
@@ -23,7 +24,10 @@ const ExploreSidebar: FC = () => {
       defaultValue={["explore-sections"]}
     >
       <AccordionItem value="explore-filters">
-        <AccordionTrigger>Filters</AccordionTrigger>
+        <div className="relative">
+          <AccordionTrigger>Filters</AccordionTrigger>
+          <ClearFiltersButton />
+        </div>
         <AccordionContent className="py-3.5">
           <FilterSettings
             filterQueryParams={filters}

diff --git a/client/src/containers/sidebar/filter-settings/clear-filters-button/index.tsx b/client/src/containers/sidebar/filter-settings/clear-filters-button/index.tsx
@@ -0,0 +1,27 @@
+import { FC } from "react";
+
+import { Trash2Icon } from "lucide-react";
+
+import useFilters from "@/hooks/use-filters";
+
+import { Button } from "@/components/ui/button";
+
+const ClearFiltersButton: FC = () => {
+  const { filters, setFilters } = useFilters();
+
+  if (filters.length === 0) return null;
+
+  return (
+    <Button
+      type="button"
+      variant="clean"
+      className="absolute right-14 top-0 h-auto translate-y-1/2 gap-1 p-0 text-xs font-normal transition-colors hover:text-white/80"
+      onClick={() => setFilters([])}
+    >
+      <span>Clear all</span>
+      <Trash2Icon className="h-4 w-4" />
+    </Button>
+  );
+};
+
+export default ClearFiltersButton;
diff --git a/client/src/containers/sidebar/filter-settings/filter-popup/index.tsx b/client/src/containers/sidebar/filter-settings/filter-popup/index.tsx
@@ -2,6 +2,7 @@ import { FC, useState } from "react";
 
 import { PageFilter } from "@shared/dto/widgets/page-filter.entity";
 import { useSetAtom } from "jotai";
+import { CircleXIcon } from "lucide-react";
 
 import { FilterQueryParam } from "@/hooks/use-filters";
 
@@ -35,18 +36,16 @@ const FilterItemButton: FC<{
   onClick: (value: string) => void;
 }> = ({ value, onClick }) => {
   return (
-    <>
+    <span className="inline-flex items-end gap-2">
       <span className="font-bold">{value}&nbsp;</span>
-      <span
-        className="h-full p-0 align-text-bottom text-xs transition-all hover:font-extrabold"
+      <CircleXIcon
+        className="h-4 w-4 transition-colors hover:text-white/80"
         onClick={(e) => {
           e.stopPropagation();
           onClick(value);
         }}
-      >
-        <span>x</span>
-      </span>
-    </>
+      />
+    </span>
   );
 };
 

diff --git a/client/src/containers/sidebar/sandbox-sidebar/index.tsx b/client/src/containers/sidebar/sandbox-sidebar/index.tsx
@@ -4,6 +4,7 @@ import useFilters from "@/hooks/use-filters";
 import useSandboxWidget from "@/hooks/use-sandbox-widget";
 
 import FilterSettings from "@/containers/sidebar/filter-settings";
+import ClearFiltersButton from "@/containers/sidebar/filter-settings/clear-filters-button";
 import IndicatorSelector from "@/containers/sidebar/indicator-seletor";
 import VisualizationSelector from "@/containers/sidebar/visualization-selector";
 
@@ -47,7 +48,10 @@ const SandboxSidebar: FC = () => {
         </AccordionContent>
       </AccordionItem>
       <AccordionItem value="sandbox-filters">
-        <AccordionTrigger>Filters</AccordionTrigger>
+        <div className="relative">
+          <AccordionTrigger>Filters</AccordionTrigger>
+          <ClearFiltersButton />
+        </div>
         <AccordionContent className="py-3.5">
           <FilterSettings
             filterQueryParams={filters}

diff --git a/client/src/containers/sidebar/user-sandbox-sidebar/index.tsx b/client/src/containers/sidebar/user-sandbox-sidebar/index.tsx
@@ -9,6 +9,7 @@ import { addFilterQueryParam, removeFilterQueryParamValue } from "@/lib/utils";
 import { FilterQueryParam } from "@/hooks/use-filters";
 
 import FilterSettings from "@/containers/sidebar/filter-settings";
+import ClearFiltersButton from "@/containers/sidebar/filter-settings/clear-filters-button";
 import IndicatorSelector from "@/containers/sidebar/indicator-seletor";
 import {
   sandboxFiltersAtom,
@@ -79,7 +80,10 @@ const UserSandboxSidebar: FC = () => {
         </AccordionContent>
       </AccordionItem>
       <AccordionItem value="sandbox-filters">
-        <AccordionTrigger>Filters</AccordionTrigger>
+        <div className="relative">
+          <AccordionTrigger>Filters</AccordionTrigger>
+          <ClearFiltersButton />
+        </div>
         <AccordionContent className="py-3.5">
           <FilterSettings
             filterQueryParams={filters}