1#@!#!123s

ALWAYS HENGHENG888 1#@!#!123s
: / var / www / chinawholesale-frontend-next / src / components / admin / table /
Filename : TableOperation.tsx
back
import {ReactNode, useCallback, useEffect, useState} from 'react';
import {Button, Form, Input} from "antd";
import {useSearchParams} from "next/navigation";
import {KeyValuePairs} from "@/types/global";
import ExpressButton from "@/components/buttons/ExpressButton";
import {DeleteIcon} from "@/components/icons";
import useAlert from "@/components/alert/alertInfo";

type Props = {
    setResetQuery: () => void,
    handleSearch: (value: any) => void,
    handleDelete: (value: any) => void,
    selectedRowKeys: KeyValuePairs[]
    permission: KeyValuePairs
    deleteIsLoading?: boolean,
    children?: ReactNode | string,
}

export default function TableOperation(props: Props) {

    const {
        selectedRowKeys,
        permission,
        setResetQuery,
        handleSearch,
        deleteIsLoading,
        handleDelete,
        children
    } = props

    const [selected, setSelected] = useState<string[]>([]);
    const [form] = Form.useForm();
    const query = useSearchParams();
    const search = query.get('search');

    const info = useAlert();

    useEffect(() => {
        const selectedIds: string[] = [];
        selectedRowKeys.forEach((item) => {
            selectedIds.push(item.id);
        })
        setSelected(selectedIds)
    }, [selectedRowKeys])

    const debounce = (func: any) => {
        let timer: any = null;
        return (...args: any) => {
            // @ts-ignore
            const context = this;
            if (timer) clearTimeout(timer)
            timer = setTimeout(() => {
                timer = null;
                func.apply(context, args)
            }, 500)
        }
    }

    const optimizedSearch = useCallback(debounce(handleSearch), []) // eslint-disable-line react-hooks/exhaustive-deps


    const processDelete = () => {
        info.notify({
            icon: "error",
            html: "Are you sure to delete ?",
            confirmButtonText: "Yes",
            cancelButtonText: "No",
            showCancelButton: true,
        })
            .then((result) => {
                if (result.isConfirmed) {
                    handleDelete(selected);
                    setSelected([]);
                }
            })
    };

    const can_delete = permission?.can_delete;
    const can_search = permission?.can_search !== 'undefined' ? permission.can_search : true;
    const hasSelected = selected.length > 0;

    // console.log(can_search, can_delete, permission)


    return (
        <div className={'min-h-[54px]'}>
            <div className={'flex items-center gap-1.5'}>
                {
                    !!can_delete &&
                    <ExpressButton
                        type="red"
                        icon={<DeleteIcon size={18}/>}
                        onClick={processDelete}
                        disabled={!hasSelected}
                        loading={deleteIsLoading}
                        hidden={!can_delete}
                    />
                }
                {
                    !!children &&
                    <div className="">
                        {children}
                    </div>
                }
                {
                    can_search &&
                    <>
                        <Form
                            form={form}
                            layout="vertical"
                            name="search_form"
                            onFinish={handleSearch}
                            initialValues={{
                                search: search,
                            }}
                        >
                            <Form.Item name="search" style={{margin: 0}}>
                                <div
                                    className={'bg-[#1677ff] hover:bg-[#1677ff]/90 text-white font-medium rounded-[6px]'}>
                                    <Input.Search
                                        placeholder="Search"
                                        enterButton
                                        onChange={e => optimizedSearch(e.target.value)}
                                        onSearch={handleSearch}
                                        style={{width: 300}}
                                    />
                                </div>
                            </Form.Item>
                        </Form>
                        {
                            query.size >= 2 &&
                            <>
                                <Button
                                    type="primary"
                                    danger={true}
                                    onClick={() => {
                                        form.setFieldsValue({
                                            search: '',
                                        });
                                        setResetQuery()
                                    }}
                                >
                                    Clear
                                </Button>
                            </>
                        }
                    </>
                }
            </div>
            {
                (hasSelected && can_delete) &&
                <p className={'text-sm font-medium mt-0.5 mb-0'}>
                    <b>{selectedRowKeys.length}</b> {selectedRowKeys.length === 1 ? `item` : 'items'} selected
                </p>
            }
        </div>
    )
}