59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
// * Packages
|
|
import { DeleteIcon } from "lucide-react";
|
|
import { router, useForm } from "@inertiajs/react";
|
|
import { FormEvent, ReactNode } from "react";
|
|
import { route } from "ziggy-js";
|
|
// * Other
|
|
import SimpleString from "@/back/Components/Inputs/SimpleString";
|
|
import BtnOptionnalLinkWithTooltip from "@/back/Components/BtnOptionnalLinkWithTooltip";
|
|
import InputError from "@/back/Components/InputError";
|
|
import useTrans from "@/hooks/use-translations";
|
|
|
|
type DataTableSearchProps = {
|
|
modelRoute: string;
|
|
searchText: string;
|
|
searchFields: string;
|
|
children?: ReactNode;
|
|
};
|
|
|
|
export default function DataTableSearch({
|
|
modelRoute,
|
|
searchText,
|
|
searchFields,
|
|
children,
|
|
}: DataTableSearchProps) {
|
|
const url = new URL(window.location.href);
|
|
const { get, setData, data } = useForm({
|
|
search: searchText,
|
|
});
|
|
const submit = (e: FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
get(route(`back.${modelRoute}.index`));
|
|
};
|
|
return (
|
|
<>
|
|
<form onSubmit={submit} className="flex justify-between items-end gap-2 mb-4">
|
|
<SimpleString
|
|
name="search"
|
|
label={useTrans("back.table_search", {
|
|
params: { searchFields },
|
|
})}
|
|
placeholder="ex: John Doe"
|
|
value={data.search}
|
|
wordCounter={false}
|
|
setData={setData}
|
|
className="w-[calc(100%-40px-0.5rem)]"
|
|
/>
|
|
{children}
|
|
<BtnOptionnalLinkWithTooltip
|
|
content={<DeleteIcon />}
|
|
tooltipContent={<p>{useTrans("back.table_search_reset")}</p>}
|
|
type="button"
|
|
variant="destructive"
|
|
onClick={() => router.visit(url.origin + url.pathname)}
|
|
/>
|
|
</form>
|
|
<InputError all />
|
|
</>
|
|
);
|
|
}
|