food admin

src/components/Filters.tsx

@@ -0,0 +1,224 @@
+import { type FC, useEffect, useState, type ChangeEvent, useRef } from 'react';
+import { Filter } from 'iconsax-react';
+import DatePicker from './DatePicker';
+import Input from './Input';
+import Select, { type ItemsSelectType } from './Select';
+import DefaulModal from './DefaulModal';
+import moment from 'moment-jalaali'
+import Button from './Button';
+
+export type DateFieldType = {
+    type: 'date';
+    name: string;
+    placeholder: string;
+    defaultValue?: string;
+};
+
+export type SelectFieldType = {
+    type: 'select';
+    name: string;
+    placeholder: string;
+    options: ItemsSelectType[];
+    defaultValue?: string;
+};
+
+export type InputFieldType = {
+    type: 'input';
+    name: string;
+    placeholder: string;
+    defaultValue?: string;
+};
+
+export type FieldType = DateFieldType | SelectFieldType | InputFieldType;
+
+export type FilterValues = Record<string, string | null>;
+
+interface FiltersProps {
+    fields: FieldType[];
+    onChange: (filters: FilterValues) => void;
+    initialValues?: FilterValues;
+    className?: string;
+    fieldClassName?: string;
+    searchField?: string;
+}
+
+const Filters: FC<FiltersProps> = ({
+    fields,
+    onChange,
+    initialValues = {},
+    className = "flex flex-col md:flex-row justify-between items-start md:items-center gap-4",
+    fieldClassName = "flex flex-col sm:flex-row gap-3 md:gap-4 w-full md:w-auto",
+    searchField = "search"
+}) => {
+    const [filters, setFilters] = useState<FilterValues>({});
+    const [isFiltersOpen, setIsFiltersOpen] = useState(false);
+    const [inputValues, setInputValues] = useState<Record<string, string>>({});
+    const onChangeRef = useRef(onChange);
+
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+
+    useEffect(() => {
+        if (Object.keys(initialValues).length > 0) {
+            setFilters(initialValues);
+            const inputFields: Record<string, string> = {};
+            fields.forEach(field => {
+                if (field.type === 'input' && initialValues[field.name]) {
+                    inputFields[field.name] = initialValues[field.name] as string;
+                }
+            });
+            setInputValues(inputFields);
+        } else {
+            const defaultValues: FilterValues = {};
+            const defaultInputs: Record<string, string> = {};
+            fields.forEach(field => {
+                if ('defaultValue' in field && field.defaultValue !== undefined) {
+                    defaultValues[field.name] = field.defaultValue;
+                    if (field.type === 'input') {
+                        defaultInputs[field.name] = field.defaultValue;
+                    }
+                }
+            });
+
+            if (Object.keys(defaultValues).length > 0) {
+                setFilters(defaultValues);
+                setInputValues(defaultInputs);
+                onChange(defaultValues);
+            }
+        }
+    }, [fields, initialValues, onChange]);
+
+    useEffect(() => {
+        const timeouts: Record<string, number> = {};
+
+        Object.keys(inputValues).forEach(fieldName => {
+            timeouts[fieldName] = setTimeout(() => {
+                setFilters(currentFilters => {
+                    const currentFilter = currentFilters[fieldName];
+                    const newValue = inputValues[fieldName];
+
+                    if (currentFilter !== newValue) {
+                        const newFilters = { ...currentFilters, [fieldName]: newValue || null };
+                        onChangeRef.current(newFilters);
+                        return newFilters;
+                    }
+                    return currentFilters;
+                });
+            }, 1000);
+        });
+
+        return () => {
+            Object.values(timeouts).forEach(timeout => clearTimeout(timeout));
+        };
+    }, [inputValues]);
+
+    const handleChange = (name: string, value: string | null) => {
+        const newFilters = { ...filters, [name]: value };
+        setFilters(newFilters);
+        onChange(newFilters);
+    };
+
+    const handleInputChange = (name: string, event: ChangeEvent<HTMLInputElement>) => {
+        const value = event.target.value;
+        setInputValues(prev => ({ ...prev, [name]: value }));
+    };
+
+    const renderField = (field: FieldType) => {
+        const currentValue = field.type === 'input' ? inputValues[field.name] : filters[field.name];
+
+        switch (field.type) {
+            case 'date':
+                return (
+                    <DatePicker
+                        key={field.name}
+                        placeholder={field.placeholder}
+                        onChange={(value) => handleChange(field.name, moment(value, 'jYYYY/jMM/jDD').format('YYYY-MM-DD'))}
+                        defaulValue={currentValue || field.defaultValue || ''}
+                    />
+                );
+
+            case 'select':
+                return (
+                    <Select
+                        key={field.name}
+                        placeholder={field.placeholder}
+                        onChange={(e) => handleChange(field.name, e.target.value)}
+                        defaultValue={currentValue || field.defaultValue || ''}
+                        items={field.options}
+                    />
+                );
+
+            case 'input':
+                return (
+                    <Input
+                        key={field.name}
+                        placeholder={field.placeholder}
+                        variant="search"
+                        className="w-full md:min-w-[230px] md:max-w-[230px]"
+                        value={currentValue || field.defaultValue || ''}
+                        onChange={(e) => handleInputChange(field.name, e)}
+                    />
+                );
+        }
+    };
+
+    const searchFieldObj = fields.find(field => field.name === searchField);
+    const otherFields = fields.filter(field => field.name !== searchField);
+
+    return (
+        <div className={className}>
+            <div className="flex md:hidden items-center justify-between w-full mb-2">
+                <button
+                    onClick={() => setIsFiltersOpen(!isFiltersOpen)}
+                    className='flex items-center gap-2 px-3 py-2 rounded-lg transition-colors bg-card text-card-foreground border border-border hover:bg-secondary hover:bg-opacity-80'
+                >
+                    <Filter
+                        size={18}
+                        color='#000000'
+                    />
+                    <span className="text-sm">فیلترها</span>
+                </button>
+                {searchFieldObj && (
+                    <div className="flex-1 mr-4">
+                        {renderField(searchFieldObj)}
+                    </div>
+                )}
+            </div>
+
+            <div className="hidden md:flex md:flex-row justify-between items-center gap-4 w-full">
+                <div className={fieldClassName}>
+                    {fields.map(renderField)}
+                </div>
+            </div>
+
+            <DefaulModal
+                open={isFiltersOpen}
+                close={() => setIsFiltersOpen(false)}
+                isHeader={true}
+                title_header="فیلتر کردن نتایج"
+            >
+                <div className="pb-5 gap-4 flex flex-col-reverse mt-3">
+                    {otherFields.map(field => (
+                        <div key={field.name} className="w-full">
+                            <label className="block text-sm font-medium text-foreground mb-2">
+                                {field.placeholder}
+                            </label>
+                            <div className="w-full">
+                                {renderField(field)}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+                <div className='mt-6'>
+                    <Button
+                        label='بستن'
+                        onClick={() => setIsFiltersOpen(false)}
+                    />
+                </div>
+            </DefaulModal>
+        </div>
+    );
+};
+
+export default Filters;