128 lines
4.6 KiB
JavaScript
128 lines
4.6 KiB
JavaScript
import { memo, useState, useEffect } from "react";
|
|
import { DropDowns } from "../../../Components/Forms/DropDown";
|
|
import { Checkbox, Popover } from "antd";
|
|
import { Settings, X } from "lucide-react";
|
|
import { PlusCircleOutlined } from '@ant-design/icons';
|
|
import { Tooltip } from 'antd';
|
|
import { getActiveProdSubCatData } from "../../../Features/ProductPage/ProductPage";
|
|
import { useDispatch } from "react-redux";
|
|
import { getSession } from "../../../Services/Others";
|
|
|
|
const DefaultSettingPopover = memo(({ field, options, onSubmit, currentDefault, popOverHeading, checkBoxHeading = 'Apply to all existing rows', showField, Component = null, triggerModal = () => { }, needAllSubCategories = false }) => {
|
|
const dispatch = useDispatch();
|
|
const [selectedValue, setSelectedValue] = useState(currentDefault);
|
|
const [applyToAll, setApplyToAll] = useState(false);
|
|
const [open, setOpen] = useState(false);
|
|
const [fetchSubCategoriesData, setFetchSubCategoriesData] = useState(false);
|
|
console.log(fetchSubCategoriesData, "fetchSubCategoriesData")
|
|
useEffect(() => {
|
|
if (open) {
|
|
setSelectedValue(currentDefault);
|
|
setApplyToAll(false);
|
|
}
|
|
}, [open, currentDefault]);
|
|
|
|
useEffect(() => {
|
|
|
|
const fetchAllSubCategories = async () => {
|
|
|
|
await (dispatch(getActiveProdSubCatData({ AppId: getSession('AppId') })))?.unwrap();
|
|
setFetchSubCategoriesData(false);
|
|
}
|
|
|
|
if (fetchSubCategoriesData) {
|
|
fetchAllSubCategories();
|
|
}
|
|
}, [fetchSubCategoriesData]);
|
|
|
|
const handleSubmit = () => {
|
|
onSubmit(field, selectedValue, applyToAll);
|
|
setOpen(false);
|
|
setApplyToAll(false);
|
|
setSelectedValue("");
|
|
};
|
|
|
|
const getFieldTitle = (field) => {
|
|
switch (field) {
|
|
case "uom": return "UOM";
|
|
case "category": return "Category";
|
|
case "subCategory": return "Sub-Category";
|
|
case "tax": return "Tax";
|
|
default: return field;
|
|
}
|
|
};
|
|
|
|
const content = (
|
|
<div className="popover-container">
|
|
<div className="popover-header">
|
|
<span className="popover-title">{popOverHeading}</span>
|
|
<X size={14} className="close-icon" onClick={() => setOpen(false)} />
|
|
</div>
|
|
|
|
{showField && <div
|
|
style={{
|
|
fontSize: '14px', fontWeight: '500', color: '#333', marginBottom: '10px', padding: '5px 10px', backgroundColor: '#f0f0f0', borderRadius: '4px', textAlign: 'center'
|
|
}}
|
|
>{showField}</div>}
|
|
|
|
<div className="popover-section" style={{ display: 'flex', alignItems: 'flex-start', gap: '5px' }}>
|
|
<DropDowns
|
|
label={`Select default ${getFieldTitle(field).toLowerCase()}`}
|
|
valueData={selectedValue}
|
|
onChangeFunction={setSelectedValue}
|
|
options={options}
|
|
/>
|
|
{Component && (
|
|
<Tooltip title={`Add ${getFieldTitle(field)}`} placement="top">
|
|
<PlusCircleOutlined
|
|
className="product-add-iconMargin"
|
|
onClick={() => {
|
|
triggerModal(true);
|
|
if (needAllSubCategories) {
|
|
setFetchSubCategoriesData(true);
|
|
}
|
|
}}
|
|
/>
|
|
</Tooltip>
|
|
)}
|
|
</div>
|
|
{Component}
|
|
<div className="popover-checkbox">
|
|
<Checkbox
|
|
checked={applyToAll}
|
|
onChange={(e) => setApplyToAll(e.target.checked)}
|
|
>
|
|
{checkBoxHeading}
|
|
</Checkbox>
|
|
</div>
|
|
|
|
<div className="popover-actions">
|
|
<button
|
|
className="btn btn--primary"
|
|
onClick={handleSubmit}
|
|
disabled={!selectedValue}
|
|
>
|
|
Submit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<Popover
|
|
content={content}
|
|
trigger="click"
|
|
placement="bottomLeft"
|
|
open={open}
|
|
onOpenChange={setOpen}
|
|
overlayClassName="default-setting-popover"
|
|
>
|
|
<Settings size={14} className="setting-icon" />
|
|
</Popover>
|
|
</>
|
|
);
|
|
});
|
|
|
|
export default DefaultSettingPopover;
|