87 lines
2.2 KiB
TypeScript
87 lines
2.2 KiB
TypeScript
// * Packages
|
|
import { DeleteIcon } from "lucide-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 "@/back/lib/filters";
|
|
|
|
type DataTableSearchProps = {
|
|
modelRoute: string;
|
|
searchFields: string;
|
|
isArchiveRoute?: boolean;
|
|
children?: ReactNode;
|
|
};
|
|
|
|
export default function DataTableSearch({
|
|
modelRoute,
|
|
searchFields,
|
|
isArchiveRoute = false,
|
|
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,
|
|
isArchiveRoute,
|
|
});
|
|
};
|
|
const onDeleteSearch = () => {
|
|
setSearch(null);
|
|
const params = {
|
|
...route().params,
|
|
search: undefined,
|
|
};
|
|
addFilterToUrl({
|
|
modelName: modelRoute,
|
|
params,
|
|
isArchiveRoute,
|
|
});
|
|
};
|
|
return (
|
|
<>
|
|
<form
|
|
onSubmit={submit}
|
|
className="flex justify-between items-end gap-2 mb-4"
|
|
>
|
|
<SimpleString
|
|
name="search"
|
|
label={useTrans("uwil-backend::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("uwil-backend::back.table_search_reset")}</p>
|
|
}
|
|
type="button"
|
|
variant="destructive"
|
|
onClick={onDeleteSearch}
|
|
/>
|
|
</form>
|
|
<InputError all />
|
|
</>
|
|
);
|
|
}
|