@collabdt/core 0.0.40

package/dist/core/components/viewers/Data/FilterButtons.js

@@ -0,0 +1,780 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useTranslations } from "next-intl";
+import { usePermissions } from "../../../store";
+import { useBuildings } from "../../../hooks/buildings/buildings";
+import { useSites } from "../../../hooks/sites/sites";
+import { useInfrastructures } from "../../../hooks/infrastructures/infrastructures";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../../../components/ui/DropdownMenu";
+import { Button, Input, Checkbox, Badge } from "../../../components/ui/";
+import * as LR from "lucide-react";
+import FiltersDialog from "./advancedFilter/FiltersDialog";
+import FilterFiles from "./details/FilterFiles";
+import { getUniqueColumnValues } from "./utils/filterHelper";
+const FilterButtons = ({ currentViewer, filters, activeFilters, filterFields, data, setFilters, setActiveFilters }) => {
+  const t = useTranslations("FilterButtons");
+  const { ability } = usePermissions();
+  const { sites } = useSites();
+  const { buildings } = useBuildings();
+  const { infrastructures } = useInfrastructures();
+  const [municipalityOptions, setMunicipalityOptions] = React.useState([]);
+  const [countrySubdivisionOptions, setCountrySubdivisionOptions] = React.useState([]);
+  const [buildingOptions, setBuildingOptions] = React.useState([]);
+  const [siteOptions, setSiteOptions] = React.useState([]);
+  const [infrastructureOptions, setInfrastructureOptions] = React.useState([]);
+  const [municipalitySearch, setMunicipalitySearch] = React.useState("");
+  const [countrySubdivisionSearch, setCountrySubdivisionSearch] = React.useState("");
+  const [buildingSearch, setBuildingSearch] = React.useState("");
+  const [siteSearch, setSiteSearch] = React.useState("");
+  const [infrastructureSearch, setInfrastructureSearch] = React.useState("");
+  const [municipalitySort, setMunicipalitySort] = React.useState(false);
+  const [countrySubdivisionSort, setCountrySubdivisionSort] = React.useState(false);
+  const [buildingSort, setBuildingSort] = React.useState(false);
+  const [siteSort, setSiteSort] = React.useState(false);
+  const [infrastructureSort, setInfrastructureSort] = React.useState(false);
+  const [filterDialogOpen, setFilterDialogOpen] = React.useState(false);
+  const [municipalityDropdownOpen, setMunicipalityDropdownOpen] = React.useState(false);
+  const [countrySubdivisionDropdownOpen, setCountrySubdivisionDropdownOpen] = React.useState(false);
+  const [buildingDropdownOpen, setBuildingDropdownOpen] = React.useState(false);
+  const [siteDropdownOpen, setSiteDropdownOpen] = React.useState(false);
+  const [infrastructureDropdownOpen, setInfrastructureDropdownOpen] = React.useState(false);
+  const [selectedFileTypes, setSelectedFileTypes] = React.useState([]);
+  const getFieldNames = () => {
+    switch (currentViewer) {
+      case "buildings": {
+        return {
+          municipality: "buildingMunicipality",
+          countrySubdivision: "buildingCountrySubdivision",
+          site: "buildingParentSiteId"
+        };
+      }
+      case "sites": {
+        return {
+          municipality: "siteMunicipality",
+          countrySubdivision: "siteCountrySubdivision",
+          site: null
+          // Sites don't filter by site
+        };
+      }
+      case "infrastructure": {
+        return {
+          municipality: "infrastructureMunicipality",
+          countrySubdivision: "infrastructureCountrySubdivision",
+          site: "infrastructureParentSiteId"
+        };
+      }
+      case "files": {
+        return {
+          municipality: null,
+          countrySubdivision: null,
+          building: "building",
+          site: "site",
+          infrastructure: "infrastructure"
+        };
+      }
+    }
+    return {
+      municipality: null,
+      countrySubdivision: null,
+      building: null,
+      site: null,
+      infrastructure: null
+    };
+  };
+  const getBuildingName = (buildingId) => {
+    const building = buildings == null ? void 0 : buildings.find((b) => b.id === buildingId);
+    return (building == null ? void 0 : building.buildingName) || (building == null ? void 0 : building.buildingAddress) || String(buildingId);
+  };
+  const getSiteName = (siteId) => {
+    const site = sites == null ? void 0 : sites.find((s) => s.id === siteId);
+    return (site == null ? void 0 : site.siteName) || String(siteId);
+  };
+  const getInfrastructureName = (infrastructureId) => {
+    const infrastructure = infrastructures == null ? void 0 : infrastructures.find((i) => i.id === infrastructureId);
+    return (infrastructure == null ? void 0 : infrastructure.infrastructureName) || String(infrastructureId);
+  };
+  const generateFilterOptions = () => {
+    const fieldNames2 = getFieldNames();
+    if (!data || data.length === 0) {
+      return;
+    }
+    if (fieldNames2.municipality) {
+      const uniqueValues = getUniqueColumnValues(data, fieldNames2.municipality);
+      const validValues = uniqueValues.filter((value) => value !== null && value !== void 0 && value !== "");
+      const options = validValues.map((value) => ({
+        value: String(value),
+        label: String(value),
+        checked: false
+      }));
+      setMunicipalityOptions((prev) => {
+        const newOptions = options.map((option) => {
+          const existingOption = prev.find((p) => p.value === option.value);
+          return existingOption ? __spreadProps(__spreadValues({}, option), { checked: existingOption.checked }) : option;
+        });
+        return newOptions;
+      });
+    }
+    if (fieldNames2.countrySubdivision) {
+      const uniqueValues = getUniqueColumnValues(data, fieldNames2.countrySubdivision);
+      const validValues = uniqueValues.filter((value) => value !== null && value !== void 0 && value !== "");
+      const options = validValues.map((value) => ({
+        value: String(value),
+        label: String(value),
+        checked: false
+      }));
+      setCountrySubdivisionOptions((prev) => {
+        const newOptions = options.map((option) => {
+          const existingOption = prev.find((p) => p.value === option.value);
+          return existingOption ? __spreadProps(__spreadValues({}, option), { checked: existingOption.checked }) : option;
+        });
+        return newOptions;
+      });
+    }
+    if (fieldNames2.building) {
+      const uniqueValues = getUniqueColumnValues(data, fieldNames2.building);
+      const validValues = uniqueValues.filter((value) => value !== null && value !== void 0 && value !== "");
+      const options = validValues.map((value) => ({
+        value: String(value),
+        label: getBuildingName(Number(value)),
+        checked: false
+      }));
+      setBuildingOptions((prev) => {
+        const newOptions = options.map((option) => {
+          const existingOption = prev.find((p) => p.value === option.value);
+          return existingOption ? __spreadProps(__spreadValues({}, option), { checked: existingOption.checked }) : option;
+        });
+        return newOptions;
+      });
+    }
+    if (fieldNames2.site) {
+      const uniqueValues = getUniqueColumnValues(data, fieldNames2.site);
+      const validValues = uniqueValues.filter((value) => value !== null && value !== void 0 && value !== "");
+      const options = validValues.map((value) => ({
+        value: String(value),
+        label: getSiteName(Number(value)),
+        checked: false
+      }));
+      setSiteOptions((prev) => {
+        const newOptions = options.map((option) => {
+          const existingOption = prev.find((p) => p.value === option.value);
+          return existingOption ? __spreadProps(__spreadValues({}, option), { checked: existingOption.checked }) : option;
+        });
+        return newOptions;
+      });
+    }
+    if (fieldNames2.infrastructure) {
+      const uniqueValues = getUniqueColumnValues(data, fieldNames2.infrastructure);
+      const validValues = uniqueValues.filter((value) => value !== null && value !== void 0 && value !== "");
+      const options = validValues.map((value) => ({
+        value: String(value),
+        label: getInfrastructureName(Number(value)),
+        checked: false
+      }));
+      setInfrastructureOptions((prev) => {
+        const newOptions = options.map((option) => {
+          const existingOption = prev.find((p) => p.value === option.value);
+          return existingOption ? __spreadProps(__spreadValues({}, option), { checked: existingOption.checked }) : option;
+        });
+        return newOptions;
+      });
+    }
+  };
+  React.useEffect(() => {
+    setMunicipalityOptions([]);
+    setCountrySubdivisionOptions([]);
+    setBuildingOptions([]);
+    setSiteOptions([]);
+    setInfrastructureOptions([]);
+    setActiveFilters([]);
+    setMunicipalitySearch("");
+    setCountrySubdivisionSearch("");
+    setBuildingSearch("");
+    setSiteSearch("");
+    setInfrastructureSearch("");
+    setMunicipalityDropdownOpen(false);
+    setCountrySubdivisionDropdownOpen(false);
+    setBuildingDropdownOpen(false);
+    setSiteDropdownOpen(false);
+    setInfrastructureDropdownOpen(false);
+    setMunicipalitySort(false);
+    setCountrySubdivisionSort(false);
+    setBuildingSort(false);
+    setSiteSort(false);
+    setInfrastructureSort(false);
+    setSelectedFileTypes([]);
+  }, [currentViewer]);
+  React.useEffect(() => {
+    generateFilterOptions();
+  }, [data]);
+  React.useEffect(() => {
+    if (activeFilters && activeFilters.length > 0) {
+      const fieldNames2 = getFieldNames();
+      if (fieldNames2.municipality) {
+        const municipalityFilter = activeFilters.find((filter) => filter.field === fieldNames2.municipality);
+        if (municipalityFilter && municipalityFilter.value && Array.isArray(municipalityFilter.value)) {
+          setMunicipalityOptions(
+            (prev) => prev.map((opt) => __spreadProps(__spreadValues({}, opt), {
+              checked: municipalityFilter.value.includes(opt.value)
+            }))
+          );
+        }
+      }
+      if (fieldNames2.countrySubdivision) {
+        const provinceFilter = activeFilters.find((filter) => filter.field === fieldNames2.countrySubdivision);
+        if (provinceFilter && provinceFilter.value && Array.isArray(provinceFilter.value)) {
+          setCountrySubdivisionOptions(
+            (prev) => prev.map((opt) => __spreadProps(__spreadValues({}, opt), {
+              checked: provinceFilter.value.includes(opt.value)
+            }))
+          );
+        }
+      }
+      if (fieldNames2.building) {
+        const buildingFilter = activeFilters.find((filter) => filter.field === fieldNames2.building);
+        if (buildingFilter && buildingFilter.value && Array.isArray(buildingFilter.value)) {
+          setBuildingOptions(
+            (prev) => prev.map((opt) => __spreadProps(__spreadValues({}, opt), {
+              checked: buildingFilter.value.includes(opt.value)
+            }))
+          );
+        }
+      }
+      if (fieldNames2.site) {
+        const siteFilter = activeFilters.find((filter) => filter.field === fieldNames2.site);
+        if (siteFilter && siteFilter.value && Array.isArray(siteFilter.value)) {
+          setSiteOptions(
+            (prev) => prev.map((opt) => __spreadProps(__spreadValues({}, opt), {
+              checked: siteFilter.value.includes(opt.value)
+            }))
+          );
+        }
+      }
+      if (fieldNames2.infrastructure) {
+        const infrastructureFilter = activeFilters.find((filter) => filter.field === fieldNames2.infrastructure);
+        if (infrastructureFilter && infrastructureFilter.value && Array.isArray(infrastructureFilter.value)) {
+          setInfrastructureOptions(
+            (prev) => prev.map((opt) => __spreadProps(__spreadValues({}, opt), {
+              checked: infrastructureFilter.value.includes(opt.value)
+            }))
+          );
+        }
+      }
+    }
+  }, [activeFilters, currentViewer]);
+  React.useEffect(() => {
+    if (currentViewer !== "files") return;
+    if (selectedFileTypes.length === 0) {
+      setActiveFilters((prev) => prev.filter((filter) => filter.field !== "fileType"));
+    } else {
+      const existingFilterIndex = activeFilters.findIndex((filter) => filter.field === "fileType");
+      if (existingFilterIndex === -1) {
+        setActiveFilters((prev) => [
+          ...prev,
+          {
+            id: Date.now(),
+            field: "fileType",
+            fieldType: "string",
+            operator: "inList",
+            value: selectedFileTypes,
+            secondValue: null
+          }
+        ]);
+      } else {
+        setActiveFilters((prev) => {
+          const updatedFilters = [...prev];
+          updatedFilters[existingFilterIndex] = __spreadProps(__spreadValues({}, updatedFilters[existingFilterIndex]), {
+            value: selectedFileTypes,
+            operator: "inList"
+          });
+          return updatedFilters;
+        });
+      }
+    }
+  }, [selectedFileTypes, currentViewer]);
+  const updateFilters = (filterType, options) => {
+    const selectedValues = options.filter((opt) => opt.checked).map((opt) => opt.value);
+    if (selectedValues.length === 0) {
+      setActiveFilters(activeFilters.filter((filter) => filter.field !== filterType));
+      return;
+    }
+    const existingFilterIndex = activeFilters.findIndex((filter) => filter.field === filterType);
+    if (existingFilterIndex === -1) {
+      setActiveFilters([
+        ...activeFilters,
+        {
+          id: Date.now(),
+          field: filterType,
+          fieldType: "string",
+          operator: "inList",
+          value: selectedValues,
+          secondValue: null
+        }
+      ]);
+    } else {
+      const updatedFilters = [...activeFilters];
+      updatedFilters[existingFilterIndex] = __spreadProps(__spreadValues({}, updatedFilters[existingFilterIndex]), {
+        value: selectedValues,
+        operator: "inList"
+      });
+      setActiveFilters(updatedFilters);
+    }
+  };
+  const handleCheckboxChange = (option, options, setOptions, filterType) => {
+    const updatedOptions = options.map(
+      (opt) => opt.value === option.value ? __spreadProps(__spreadValues({}, opt), { checked: !opt.checked }) : opt
+    );
+    setOptions(updatedOptions);
+    updateFilters(filterType, updatedOptions);
+  };
+  const handleApplyFilters = () => {
+    setActiveFilters(filters);
+    setFilterDialogOpen(false);
+  };
+  const createFilterDropdown = (title, options, searchTerm, setSearchTerm, isOpen, setIsOpen, fieldId, sortState, setSortState) => {
+    let filteredOptions = options.filter(
+      (opt) => opt.label.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+    if (sortState === "asc") {
+      filteredOptions = [...filteredOptions].sort((a, b) => a.label.localeCompare(b.label));
+    } else if (sortState === "desc") {
+      filteredOptions = [...filteredOptions].sort((a, b) => b.label.localeCompare(a.label));
+    }
+    const selectedCount = options.filter((opt) => opt.checked).length;
+    const buttonText = title;
+    const hasOptions = options.length > 0;
+    const handleSortClick = (e) => {
+      e.stopPropagation();
+      setSortState(
+        (prev) => prev === false ? "asc" : prev === "asc" ? "desc" : false
+      );
+    };
+    return /* @__PURE__ */ jsxs(DropdownMenu, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ jsx(
+        DropdownMenuTrigger,
+        {
+          asChild: true,
+          onClick: (e) => {
+            e.stopPropagation();
+            setIsOpen(!isOpen);
+          },
+          children: /* @__PURE__ */ jsxs(Button, { variant: "outline", className: "border-dashed max-sm:hidden", children: [
+            selectedCount > 0 ? /* @__PURE__ */ jsx(Badge, { children: selectedCount }) : /* @__PURE__ */ jsx(LR.Filter, { className: "" }),
+            buttonText
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(DropdownMenuContent, { className: "w-[300px] p-0", align: "start", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-2 items-center", children: [
+          /* @__PURE__ */ jsx(LR.Search, { size: 16, className: " text-muted-foreground absolute left-3" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              placeholder: `${t("searchPlaceholder")} ${title}s`,
+              value: searchTerm,
+              onChange: (e) => setSearchTerm(e.target.value),
+              onClick: (e) => e.stopPropagation(),
+              className: "rounded-bl-none pl-9 focus-visible:ring-offset-0 focus-visible:ring-0"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              className: "hover:bg-transparent p-0 mr-2",
+              onClick: handleSortClick,
+              children: [
+                sortState === false && /* @__PURE__ */ jsx(LR.ArrowUpDown, {}),
+                sortState === "desc" && /* @__PURE__ */ jsx(LR.ArrowDown, { className: "text-black" }),
+                sortState === "asc" && /* @__PURE__ */ jsx(LR.ArrowUp, { className: "text-black" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "max-h-[200px] overflow-y-auto space-y-2 px-3 pb-2", children: hasOptions ? filteredOptions.length > 0 ? filteredOptions.map((option) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              id: `${fieldId}-${option.value}`,
+              checked: option.checked,
+              onCheckedChange: () => handleCheckboxChange(
+                option,
+                options,
+                fieldId.includes("Municipality") || fieldId === "siteMunicipality" || fieldId === "buildingMunicipality" ? setMunicipalityOptions : fieldId.includes("CountrySubdivision") || fieldId === "siteCountrySubdivision" || fieldId === "buildingCountrySubdivision" ? setCountrySubdivisionOptions : fieldId === "building" ? setBuildingOptions : setSiteOptions,
+                fieldId
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: `${fieldId}-${option.value}`,
+              className: "text-sm peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer",
+              children: option.label
+            }
+          )
+        ] }, option.value)) : /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+          t("no"),
+          title.toLowerCase(),
+          t("noMatch"),
+          "."
+        ] }) : /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+          t("no"),
+          " ",
+          title.toLowerCase(),
+          t("noAvail")
+        ] }) })
+      ] }) })
+    ] });
+  };
+  const fieldNames = getFieldNames();
+  const municipalityButton = fieldNames.municipality ? createFilterDropdown(
+    `${t("municipality")}`,
+    municipalityOptions,
+    municipalitySearch,
+    setMunicipalitySearch,
+    municipalityDropdownOpen,
+    setMunicipalityDropdownOpen,
+    fieldNames.municipality,
+    municipalitySort,
+    setMunicipalitySort
+  ) : null;
+  const countrySubdivisionButton = fieldNames.countrySubdivision ? createFilterDropdown(
+    "Subdivision",
+    countrySubdivisionOptions,
+    countrySubdivisionSearch,
+    setCountrySubdivisionSearch,
+    countrySubdivisionDropdownOpen,
+    setCountrySubdivisionDropdownOpen,
+    fieldNames.countrySubdivision,
+    countrySubdivisionSort,
+    setCountrySubdivisionSort
+  ) : null;
+  const buildingButton = fieldNames.building ? createFilterDropdown(
+    "Building",
+    buildingOptions,
+    buildingSearch,
+    setBuildingSearch,
+    buildingDropdownOpen,
+    setBuildingDropdownOpen,
+    fieldNames.building,
+    buildingSort,
+    setBuildingSort
+  ) : null;
+  const siteButton = fieldNames.site ? createFilterDropdown(
+    "Site",
+    siteOptions,
+    siteSearch,
+    setSiteSearch,
+    siteDropdownOpen,
+    setSiteDropdownOpen,
+    fieldNames.site,
+    siteSort,
+    setSiteSort
+  ) : null;
+  const infrastructureButton = fieldNames.infrastructure ? createFilterDropdown(
+    "Infrastructure",
+    infrastructureOptions,
+    infrastructureSearch,
+    setInfrastructureSearch,
+    infrastructureDropdownOpen,
+    setInfrastructureDropdownOpen,
+    fieldNames.infrastructure,
+    infrastructureSort,
+    setInfrastructureSort
+  ) : null;
+  const fileTypes = React.useMemo(() => {
+    if (!data || data.length === 0) return [];
+    const types = data.map((file) => file.fileType).filter(Boolean).filter((type) => type !== "Unknown" && type !== "");
+    return [...new Set(types)];
+  }, [data]);
+  if (currentViewer === "buildings") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            className: "border-dashed sm:hidden",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsx(LR.ListFilter, {}),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("srFilters") })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+          municipalityButton && /* @__PURE__ */ jsx(
+            DropdownMenuItem,
+            {
+              onSelect: (e) => e.preventDefault(),
+              children: municipalityButton
+            }
+          ),
+          countrySubdivisionButton && /* @__PURE__ */ jsx(
+            DropdownMenuItem,
+            {
+              onSelect: (e) => e.preventDefault(),
+              children: countrySubdivisionButton
+            }
+          ),
+          siteButton && /* @__PURE__ */ jsx(
+            DropdownMenuItem,
+            {
+              onSelect: (e) => e.preventDefault(),
+              children: siteButton
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DropdownMenuItem,
+            {
+              onSelect: (e) => e.preventDefault(),
+              children: /* @__PURE__ */ jsx(
+                FiltersDialog,
+                {
+                  filters,
+                  filterFields,
+                  activeFilters,
+                  setFilters,
+                  onApplyFilters: handleApplyFilters,
+                  setActiveFilters
+                }
+              )
+            }
+          )
+        ] })
+      ] }),
+      municipalityButton,
+      countrySubdivisionButton,
+      siteButton,
+      /* @__PURE__ */ jsx("div", { className: "max-sm:hidden", children: /* @__PURE__ */ jsx(
+        FiltersDialog,
+        {
+          filters,
+          filterFields,
+          activeFilters,
+          setFilters,
+          onApplyFilters: handleApplyFilters,
+          setActiveFilters
+        }
+      ) })
+    ] });
+  }
+  if (currentViewer === "sites") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            className: "border-dashed sm:hidden",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsx(LR.ListFilter, {}),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("srFilters") })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+          municipalityButton && /* @__PURE__ */ jsx(
+            DropdownMenuItem,
+            {
+              onSelect: (e) => e.preventDefault(),
+              children: municipalityButton
+            }
+          ),
+          countrySubdivisionButton && /* @__PURE__ */ jsx(
+            DropdownMenuItem,
+            {
+              onSelect: (e) => e.preventDefault(),
+              children: countrySubdivisionButton
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DropdownMenuItem,
+            {
+              onSelect: (e) => e.preventDefault(),
+              children: /* @__PURE__ */ jsx(
+                FiltersDialog,
+                {
+                  filters,
+                  filterFields,
+                  activeFilters,
+                  setFilters,
+                  onApplyFilters: handleApplyFilters,
+                  setActiveFilters
+                }
+              )
+            }
+          )
+        ] })
+      ] }),
+      municipalityButton,
+      countrySubdivisionButton,
+      /* @__PURE__ */ jsx("div", { className: "max-sm:hidden", children: /* @__PURE__ */ jsx(
+        FiltersDialog,
+        {
+          filters,
+          isBuilding: false,
+          filterFields,
+          activeFilters,
+          setFilters,
+          onApplyFilters: handleApplyFilters,
+          setActiveFilters
+        }
+      ) })
+    ] });
+  }
+  if (currentViewer === "infrastructure") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            className: "border-dashed sm:hidden",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsx(LR.ListFilter, {}),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("srFilters") })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+          infrastructureButton && /* @__PURE__ */ jsx(
+            DropdownMenuItem,
+            {
+              onSelect: (e) => e.preventDefault(),
+              children: infrastructureButton
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DropdownMenuItem,
+            {
+              onSelect: (e) => e.preventDefault(),
+              children: /* @__PURE__ */ jsx(
+                FiltersDialog,
+                {
+                  filters,
+                  filterFields,
+                  activeFilters,
+                  setFilters,
+                  onApplyFilters: handleApplyFilters,
+                  setActiveFilters
+                }
+              )
+            }
+          )
+        ] })
+      ] }),
+      infrastructureButton,
+      municipalityButton,
+      countrySubdivisionButton,
+      siteButton
+    ] });
+  }
+  if (currentViewer === "files") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            className: "border-dashed sm:hidden",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsx(LR.ListFilter, {}),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("srFilters") })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+          siteButton && /* @__PURE__ */ jsx(
+            DropdownMenuItem,
+            {
+              onSelect: (e) => e.preventDefault(),
+              children: siteButton
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DropdownMenuItem,
+            {
+              onSelect: (e) => e.preventDefault(),
+              children: buildingButton
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DropdownMenuItem,
+            {
+              onSelect: (e) => e.preventDefault(),
+              children: /* @__PURE__ */ jsx(
+                FilterFiles,
+                {
+                  availableTypes: fileTypes,
+                  selectedTypes: selectedFileTypes,
+                  onTypesChange: setSelectedFileTypes
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DropdownMenuItem,
+            {
+              onSelect: (e) => e.preventDefault(),
+              children: /* @__PURE__ */ jsx(
+                FiltersDialog,
+                {
+                  filters,
+                  filterFields,
+                  activeFilters,
+                  setFilters,
+                  onApplyFilters: handleApplyFilters,
+                  setActiveFilters
+                }
+              )
+            }
+          )
+        ] })
+      ] }),
+      siteButton,
+      buildingButton,
+      /* @__PURE__ */ jsx(
+        FilterFiles,
+        {
+          availableTypes: fileTypes,
+          selectedTypes: selectedFileTypes,
+          onTypesChange: setSelectedFileTypes
+        }
+      )
+    ] });
+  }
+};
+var FilterButtons_default = FilterButtons;
+export {
+  FilterButtons_default as default
+};
+//# sourceMappingURL=FilterButtons.js.map