72 lines
2.4 KiB
TypeScript
72 lines
2.4 KiB
TypeScript
// * Packages
|
|
import { DeleteIcon } from "lucide-react";
|
|
import { router, useForm } from "@inertiajs/react";
|
|
import { FormEvent, ReactNode, useState } 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";
|
|
import { addFilterToUrl } from "@/lib/filters";
|
|
|
|
type DataTableSearchProps = {
|
|
modelRoute: string;
|
|
searchFields: string;
|
|
children?: ReactNode;
|
|
};
|
|
|
|
export default function DataTableSearch({
|
|
modelRoute,
|
|
searchFields,
|
|
children,
|
|
}: DataTableSearchProps) {
|
|
|
|
const [search, setSearch] = useState<string|null>(route().params.search ?? null);
|
|
|
|
const submit = (e: FormEvent<HTMLFormElement>) => {
|
|
if(!search) return;
|
|
e.preventDefault();
|
|
const params = {
|
|
...route().params,
|
|
search,
|
|
};
|
|
addFilterToUrl({ modelName: modelRoute, params });
|
|
};
|
|
const onDeleteSearch = () => {
|
|
setSearch(null)
|
|
const params = {
|
|
...route().params,
|
|
search: undefined,
|
|
};
|
|
addFilterToUrl({ modelName: modelRoute, params });
|
|
}
|
|
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={search ?? undefined}
|
|
wordCounter={false}
|
|
setData={(name, value) => {
|
|
setSearch(value);
|
|
}}
|
|
className="w-[calc(100%-40px-0.5rem)]"
|
|
/>
|
|
{children}
|
|
<BtnOptionnalLinkWithTooltip
|
|
content={<DeleteIcon />}
|
|
tooltipContent={<p>{useTrans("back.table_search_reset")}</p>}
|
|
type="button"
|
|
variant="destructive"
|
|
onClick={onDeleteSearch}
|
|
/>
|
|
</form>
|
|
<InputError all />
|
|
</>
|
|
);
|
|
}
|