@premieroctet/next-admin
Version:
Next-Admin provides a customizable and turnkey admin dashboard for applications built with Next.js and powered by the Prisma ORM. It aims to simplify the development process by providing a turnkey admin system that can be easily integrated into your proje
59 lines (58 loc) • 2.17 kB
JavaScript
"use client";
import { jsx } from "react/jsx-runtime";
import external_clsx_default from "clsx";
import { useEffect, useState } from "react";
import { useRouterInternal } from "../hooks/useRouterInternal.mjs";
import external_Badge_mjs_default from "./Badge.mjs";
const Filters_Filters = ({ filters, ...props })=>{
const { router, query } = useRouterInternal();
const fetchUrlFilter = ()=>{
try {
if (!query?.filters) return filters;
{
const urlFilter = JSON.parse(query.filters);
return filters?.map((filter)=>({
...filter,
active: urlFilter.includes(filter.name)
}));
}
} catch {
return filters;
}
};
const [currentFilters, setCurrentFilters] = useState(fetchUrlFilter);
useEffect(()=>{
setCurrentFilters(fetchUrlFilter());
}, [
query?.filters
]);
const toggleFilter = (name)=>{
const toggledFilter = filters?.find((filter)=>filter.name === name);
if (!toggledFilter) return;
const newFiltersNames = currentFilters?.map((filter)=>{
let isActive = filter.active;
if (filter.name === name) isActive = !filter.active;
if (filter.name !== toggledFilter.name && filter.group === toggledFilter.group) isActive = false;
return {
...filter,
active: isActive
};
}).filter((filter)=>filter.active).map((filter)=>filter.name);
router?.setQuery({
...query,
page: 1,
filters: JSON.stringify(newFiltersNames)
});
};
return currentFilters && /*#__PURE__*/ jsx("div", {
...props,
className: external_clsx_default("flex flex-wrap gap-2", props.className),
children: currentFilters.map(({ name, active })=>/*#__PURE__*/ jsx(external_Badge_mjs_default, {
onClick: ()=>toggleFilter(name),
name: name,
isActive: active
}, name))
});
};
const Filters = Filters_Filters;
export { Filters as default };