325 lines
13 KiB
JavaScript
325 lines
13 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { useDispatch } from 'react-redux';
|
|
import { Space, Tooltip } from 'antd';
|
|
import { DeleteFilled, PlusCircleOutlined } from '@ant-design/icons';
|
|
import { Tables } from "../../Components/Tables/Table";
|
|
import { DropDowns } from "../../Components/Forms/DropDown.jsx";
|
|
import { DefaultModal } from "../../Components/Modal/DefaultModal.jsx";
|
|
import AddSupplierModal from '../SupplierMaster/QuickAddSupplier.jsx';
|
|
import FeaturesFunctionalities from '../BookingScreen/Components/BookingFunctionality/FeaturesFunctionalities.jsx';
|
|
import {
|
|
getSupplaierProducts,
|
|
postSupplaierProducts,
|
|
getSupplaierIdBasedProducts
|
|
} from '../../Features/SupplierProductMapping/SupplierProductMapping.js';
|
|
import { getsupplierBasedOnCmpId, getsupplierBasedOnCmpIdBrId } from '../../Features/SupplierMaster/SupplierMaster.js';
|
|
import "../../Pages/SupplierProductMapping/SupplierProductMapping.scss"
|
|
|
|
const SupplierProductMappingForm = ({
|
|
isModalOpen = false,
|
|
setIsModalOpen,
|
|
CompId,
|
|
BranchId,
|
|
AppId,
|
|
setMessage,
|
|
onMappingAdded
|
|
}) => {
|
|
const dispatch = useDispatch();
|
|
|
|
// State variables
|
|
const [supplierOptions, setSupplierOptions] = useState([]);
|
|
const [productOptions, setProductOptions] = useState([]);
|
|
const [tempProductOptions, setTempProductOptions] = useState([]);
|
|
const [modelTableData, setModelTableData] = useState([]);
|
|
const [addProduct, setAddProduct] = useState(false);
|
|
const [dropdownKey, setDropdownKey] = useState(0);
|
|
const [modalSelectedSupplier, setModalSelectedSupplier] = useState(null);
|
|
const [modalSelectedProduct, setModalSelectedProduct] = useState(null);
|
|
const [tabledata, setTabledata] = useState([]);
|
|
const [filteredTableData, setFilteredTableData] = useState([]);
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [pageSize, setPageSize] = useState(8);
|
|
const details = {
|
|
name: "tamil",
|
|
address: {
|
|
city: "hosur"
|
|
}
|
|
}
|
|
const { address: { city } } = details
|
|
|
|
// Fetch suppliers function
|
|
const fetchSypplaiers = async () => {
|
|
try {
|
|
const response = await dispatch(getsupplierBasedOnCmpIdBrId({ cmpId: CompId, BranchId, AppId }))?.unwrap();
|
|
if (response?.data?.statusCode === 1) {
|
|
const filteredData = response?.data?.data?.filter(filter => filter.ActiveStatus === 'A');
|
|
setSupplierOptions(filteredData);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching suppliers:', error);
|
|
}
|
|
};
|
|
|
|
// Fetch table data function
|
|
const TableData = async () => {
|
|
try {
|
|
const response = await dispatch(getSupplaierProducts({ CompId, BranchId, AppId }))?.unwrap();
|
|
if (response?.data?.statusCode === 1) {
|
|
setTabledata(response?.data?.data);
|
|
setFilteredTableData(response?.data?.data);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching table data:', error);
|
|
}
|
|
};
|
|
|
|
// Handle supplier selection change
|
|
const handleModelSuplaierOnChange = async (event) => {
|
|
setModalSelectedSupplier(event);
|
|
try {
|
|
const response = await dispatch(getSupplaierIdBasedProducts({ CompId, BranchId, AppId, SuppId: event }))?.unwrap();
|
|
if (response?.data?.statusCode === 1) {
|
|
setTempProductOptions(response?.data?.data?.[0]?.ProductDetails);
|
|
setProductOptions(response?.data?.data?.[0]?.ProductDetails);
|
|
setModelTableData([]);
|
|
setModalSelectedProduct(null);
|
|
setDropdownKey(prev => prev + 1);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching supplier products:', error);
|
|
}
|
|
};
|
|
|
|
// Handle product selection change
|
|
const handleModelProductOnChange = (prodId) => {
|
|
setModalSelectedProduct(null);
|
|
setDropdownKey(prev => prev + 1);
|
|
const isAlreadyAdded = modelTableData?.find(find => find.ProdId === prodId);
|
|
if (isAlreadyAdded) {
|
|
setMessage({ type: "error", data: "Product Already Added" });
|
|
} else {
|
|
setModelTableData(prev => [...prev, productOptions?.find(find => find.ProdId === prodId)]);
|
|
setProductOptions(prev => [...prev.filter(item => item.ProdId !== prodId)]);
|
|
setMessage({ type: "success", data: "Product Added Successfully" });
|
|
}
|
|
};
|
|
|
|
// Handle product removal from table
|
|
const handleSelectedProductCancel = (prodId) => {
|
|
setModelTableData(prev => [...prev.filter(filter => filter.ProdId !== prodId)]);
|
|
setProductOptions(prev => [...prev, tempProductOptions?.find(find => find.ProdId === prodId)]);
|
|
setModalSelectedProduct(null);
|
|
setDropdownKey(prev => prev + 1);
|
|
setMessage({ type: "success", data: "Product Deleted Successfully" });
|
|
};
|
|
|
|
// Toggle add product modal
|
|
const addProductOnClick = () => {
|
|
setAddProduct(prev => !prev);
|
|
};
|
|
|
|
// Handle product addition callback
|
|
const onProductAdded = async () => {
|
|
// addProductOnClick();
|
|
if (modalSelectedSupplier) {
|
|
try {
|
|
const response = await dispatch(getSupplaierIdBasedProducts({ CompId, BranchId, AppId, SuppId: modalSelectedSupplier }))?.unwrap();
|
|
if (response?.data?.statusCode === 1) {
|
|
if (modelTableData?.length > 0) {
|
|
setProductOptions(response?.data?.data?.[0]?.ProductDetails?.filter(item => !modelTableData?.some(some => some.ProdId === item.ProdId)));
|
|
} else {
|
|
setProductOptions(response?.data?.data?.[0]?.ProductDetails);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Error refreshing products:', error);
|
|
}
|
|
} else {
|
|
setProductOptions([]);
|
|
setModelTableData([]);
|
|
}
|
|
setAddProduct(false)
|
|
};
|
|
|
|
// Handle modal cancel
|
|
const handleModalCancel = () => {
|
|
setIsModalOpen(false);
|
|
setModalSelectedSupplier(null);
|
|
setModalSelectedProduct(null);
|
|
setModelTableData([]);
|
|
setProductOptions([]);
|
|
setTempProductOptions([]);
|
|
setDropdownKey(0);
|
|
};
|
|
|
|
// Handle modal submit
|
|
const handleModalSubmit = async () => {
|
|
if (!modalSelectedSupplier) {
|
|
setMessage({ type: "error", data: "Please select a supplier" });
|
|
return;
|
|
}
|
|
|
|
if (modelTableData.length === 0) {
|
|
setMessage({ type: "error", data: "Please add at least one product" });
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const payload = {
|
|
CompId,
|
|
BranchId,
|
|
AppId,
|
|
SuppId: modalSelectedSupplier,
|
|
ProductDetails: modelTableData.map(item => ({ ProdId: item.ProdId }))
|
|
};
|
|
|
|
const response = await dispatch(postSupplaierProducts(payload))?.unwrap();
|
|
if (response?.data?.statusCode === 1) {
|
|
setMessage({ type: "success", data: "Supplier product mapping saved successfully" });
|
|
handleModalCancel();
|
|
if (onMappingAdded) {
|
|
onMappingAdded();
|
|
}
|
|
} else {
|
|
setMessage({ type: "error", data: response?.data?.message || "Failed to save mapping" });
|
|
}
|
|
} catch (error) {
|
|
console.error('Error saving mapping:', error);
|
|
setMessage({ type: "error", data: "Failed to save supplier product mapping" });
|
|
}
|
|
};
|
|
|
|
// Initialize data on component mount
|
|
useEffect(() => {
|
|
if (isModalOpen) {
|
|
fetchSypplaiers();
|
|
}
|
|
}, [isModalOpen, CompId]);
|
|
|
|
const tableColumns = [
|
|
{
|
|
title: "SL.No",
|
|
key: "ProdId",
|
|
align: "center",
|
|
width: "80px",
|
|
render: (text, object, index) => (
|
|
<span>{(currentPage - 1) * pageSize + index + 1}</span>
|
|
),
|
|
},
|
|
{
|
|
title: "Product Name",
|
|
dataIndex: "ProdName",
|
|
key: "ProdName",
|
|
},
|
|
{
|
|
title: "Action",
|
|
key: "Action",
|
|
dataIndex: "Action",
|
|
render: (_, record, index) =>
|
|
<Space size="middle">
|
|
<DeleteFilled
|
|
style={{ color: "#FF4D4F", cursor: "pointer" }}
|
|
onClick={() => handleSelectedProductCancel(record.ProdId)}
|
|
/>
|
|
</Space>
|
|
}
|
|
];
|
|
|
|
const allProductMap = () => {
|
|
const allProducts = productOptions;
|
|
const newTableData = [...modelTableData, ...allProducts];
|
|
setModelTableData(newTableData);
|
|
setProductOptions([]);
|
|
setMessage({ type: "success", data: "All Products Added Successfully" });
|
|
}
|
|
|
|
return (
|
|
<DefaultModal
|
|
open={isModalOpen}
|
|
title="Add Supplier Product Mapping"
|
|
handleCancel={handleModalCancel}
|
|
handleSubmit={handleModalSubmit}
|
|
buttonText="SAVE"
|
|
width={800}
|
|
destroyOnClose={true}
|
|
footer={true}
|
|
>
|
|
<div className="modal-content">
|
|
<div className="modal-dropdowns">
|
|
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem", position: "relative" }}>
|
|
<DropDowns
|
|
label={<label className='required'>Supplier Name</label>}
|
|
options={supplierOptions?.map(item => ({
|
|
value: item.SuppId,
|
|
label: item.SuppName ?? item.SuppMobile ?? "No Name"
|
|
}))}
|
|
valueData={modalSelectedSupplier}
|
|
onChangeFunction={handleModelSuplaierOnChange}
|
|
isOnchanges={false}
|
|
alphabetfilter="Yes"
|
|
/>
|
|
<AddSupplierModal onSupplierAdded={fetchSypplaiers} message={setMessage} />
|
|
</div>
|
|
|
|
{modalSelectedSupplier && (
|
|
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem", position: "relative" }}>
|
|
<DropDowns
|
|
key={`product-dropdown-${dropdownKey}`}
|
|
label={<label className='required'>Product Name</label>}
|
|
options={productOptions.map(item => {
|
|
const size = (item.Size === null ? "" : " (" + item.Size + " " + (item.UomName === null ? "" : item.UomName) + ") ")
|
|
const brand = item.BrandName === null ? "" : item.BrandName
|
|
return {
|
|
value: item.ProdId,
|
|
label: item.ProdName + size + brand
|
|
}
|
|
})}
|
|
valueData={modalSelectedProduct}
|
|
onChangeFunction={handleModelProductOnChange}
|
|
isOnchanges={false}
|
|
alphabetfilter="Yes"
|
|
/>
|
|
<button style={{ padding: '10px 10px', margin: '0px 15px', borderRadius: '6px', fontFamily: 'poppins', background: '#901D77', color: 'white', border: 'none', cursor: 'pointer' }}
|
|
onClick={allProductMap}>Add All</button>
|
|
|
|
<div style={{ position: "absolute", left: "16rem", top: "1px" }}>
|
|
<Tooltip title={"Add Product"} placement={"top"}>
|
|
<PlusCircleOutlined
|
|
onClick={addProductOnClick}
|
|
style={{ cursor: "pointer", fontSize: "16px" }}
|
|
/>
|
|
</Tooltip>
|
|
<FeaturesFunctionalities
|
|
handleQuickAddCancel={onProductAdded}
|
|
QuickAdd={addProduct}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="ProductMappingTable" style={{ marginTop: "1rem" }}>
|
|
<Tables
|
|
columns={tableColumns}
|
|
data={modelTableData}
|
|
dataSource={modelTableData}
|
|
pagination={{
|
|
current: currentPage,
|
|
pageSize: pageSize,
|
|
total: modelTableData.length,
|
|
showSizeChanger: false,
|
|
onChange: (page, size) => {
|
|
setCurrentPage(page);
|
|
setPageSize(size);
|
|
},
|
|
}}
|
|
ownPagination={true}
|
|
rowKey="ProdId"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</DefaultModal>
|
|
);
|
|
};
|
|
|
|
export default SupplierProductMappingForm; |