ldc-groupe/resources/ts/back/Components/Table/DataTableSearch.tsx

// * 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 "@/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 />
        </>
    );
}