99 lines
2.8 KiB
JavaScript
99 lines
2.8 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Tooltip } from 'antd';
|
|
import { IoSettingsOutline } from 'react-icons/io5';
|
|
import { DefaultModal } from '../../Components/Modal/DefaultModal.jsx';
|
|
import '../../Styles/OverAllStyle/OverAllStyle.scss';
|
|
|
|
const SettingsIconWithModal = ({
|
|
tooltipTitle = 'Add Fields',
|
|
tableFieldPreferences = [],
|
|
selectedAdditionalColumn = [],
|
|
onSubmit,
|
|
}) => {
|
|
const [open, setOpen] = useState(false);
|
|
const [selectedFields, setSelectedFields] = useState([]);
|
|
const [tempSelectedColumns, setTempSelectedColumns] = useState([]);
|
|
|
|
const handleIconClick = () => {
|
|
// map labels → values
|
|
const mappedFields = selectedAdditionalColumn
|
|
.map(
|
|
(col) => tableFieldPreferences.find((pref) => pref.label === col)?.value
|
|
)
|
|
.filter(Boolean);
|
|
|
|
setSelectedFields(mappedFields);
|
|
setTempSelectedColumns([...selectedAdditionalColumn]);
|
|
setOpen(true);
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
setOpen(false);
|
|
setTempSelectedColumns([]);
|
|
};
|
|
|
|
const handleApply = () => {
|
|
onSubmit({
|
|
selectedFields,
|
|
tempSelectedColumns,
|
|
closeModal: () => setOpen(false),
|
|
resetTemp: () => setTempSelectedColumns([]),
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/* ⚙️ ICON ONLY */}
|
|
<Tooltip title={tooltipTitle} placement="top">
|
|
<IoSettingsOutline
|
|
style={{ cursor: 'pointer', fontSize: '20px' }}
|
|
onClick={handleIconClick}
|
|
/>
|
|
</Tooltip>
|
|
|
|
{/* MODAL */}
|
|
<DefaultModal
|
|
title="Select Additional Fields"
|
|
open={open}
|
|
footer
|
|
buttonText="Apply"
|
|
destroyOnClose
|
|
handleSubmit={handleApply}
|
|
handleCancel={handleCancel}
|
|
>
|
|
<div className="addFiledInProRec">
|
|
{tableFieldPreferences.map((option) => (
|
|
<div key={option.value} className="Customized_QuickAdd">
|
|
<label>
|
|
<input
|
|
type="checkbox"
|
|
checked={selectedFields.includes(option.value)}
|
|
onChange={(e) => {
|
|
const checked = e.target.checked;
|
|
|
|
setSelectedFields((prev) =>
|
|
checked
|
|
? [...prev, option.value]
|
|
: prev.filter((v) => v !== option.value)
|
|
);
|
|
|
|
setTempSelectedColumns((prev) =>
|
|
checked
|
|
? [...prev, option.label]
|
|
: prev.filter((v) => v !== option.label)
|
|
);
|
|
}}
|
|
style={{ marginRight: '8px' }}
|
|
/>
|
|
{option.label}
|
|
</label>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</DefaultModal>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SettingsIconWithModal;
|