karthikalakshmi
/
Android_Retail
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'enhancecoutermapping' (#156) from enhancement/entryandquickadd into main 

Reviewed-on: Pozomind/pozo-retail-app#156
This commit is contained in:
karthikalakshmi 2026-02-20 10:02:53 +05:30
parent 6e22db34c8 7e856f2db2
commit 52e48c8715
5 changed files with 483 additions and 449 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

831
src/Pages/CounterCategoryMapping/CounterCategoryMappingForm.jsx
View File

@ -1,13 +1,10 @@
import { useRef, useState, useCallback, useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { Messages } from '../../Components/Notifications/Messages';
import { Form, Table, Space } from 'antd';
import { Form, Table, Space, Input } from 'antd';
import FormHeader from '../PageComponents/FormHeader.jsx';
import { InputField } from '../../Components/Forms/InputField.jsx';
import { DropDowns } from '../../Components/Forms/DropDown.jsx';
import Buttons from '../../Components/Forms/Buttons.jsx';
import {
CloseCircleOutlined,
ArrowRightOutlined,
DeleteFilled,
EditFilled,
@ -31,14 +28,15 @@ import {
import { useAuth } from '../../AuthContext.jsx';
import '../../Styles/CounterCategoryMappingForm/CounterCategoryMapping.scss';
const subDirectory = import.meta.env.BASE_URL;
import FolderExploreCompoent from "./FolderExploreCompoent.jsx"
const CounterCategoryMappingForm = () => {
const { SadminuserAccess } = useAuth();
let SAAccessCommonMaster = SadminuserAccess?.find(
(e) => e?.MenuName === 'Counter Category Mapping'
);
const formRef = useRef(null);
const memoizedData = useRef({});
const dispatch = useDispatch();
const CompId = getSession('CompId');
const BranchId = getSession('BranchId');
@ -48,12 +46,6 @@ const CounterCategoryMappingForm = () => {
const [messageType, setMessageType] = useState(null);
const [messageData, setMessageData] = useState(null);
const [CounterName, setCounterName] = useState(null);
const [Categorydata, setCategorydata] = useState([]);
const [SubCategorydata, setSubCategorydata] = useState([]);
const [SelectedCategory, setSelectedCategory] = useState(null);
const [SelectedSubCategory, setSelectedSubCategory] = useState(null);
const [CounterSelCategory, setCounterSelCategory] = useState([]);
const [CounterSelSubCategory, setCounterSelSubCategory] = useState([]);
const [SelectedCatList, setSelectedCatList] = useState([]);
const [CategoryDataModal, setCategoryDataModal] = useState(false);
const [Editstate, setEditState] = useState(false);
@ -61,7 +53,10 @@ const CounterCategoryMappingForm = () => {
const [CounterDetail, setCounterDetail] = useState([]);
const [empData, setEmpData] = useState({});
const [addnewAccess, setaddnewAccess] = useState(true);
const [openModel, setOpenModel] = useState(false);
const [expandedRows, setExpandedRows] = useState([]);
console.log(CounterName, 'CounterName')
const items = [
{
name: 'Home',
@ -74,16 +69,21 @@ const CounterCategoryMappingForm = () => {
},
];
useEffect(() => {
dispatch(changeBreadCrumb({ items: items }));
}, []);
useEffect(() => {
getCategorydetails();
getCounterTokenDatas();
// if (UserType === "Employee") {
// fetchApi()
// }
}, []);
useEffect(() => {
if (EditData) {
formRef?.current?.setFieldsValue({
CounterName: EditData?.CounterName,
});
}
}, [Editstate]);
useEffect(() => {
if (UserType === 'Employee') {
fetchApi();
@ -111,19 +111,121 @@ const CounterCategoryMappingForm = () => {
let Category = await dispatch(getCategoryData(data)).unwrap();
if (Category?.data?.statusCode === 1) {
if (Category?.data?.data?.length > 0) {
setCategorydata(Category?.data?.data);
} else {
setCategorydata([]);
const categoryList = Category.data.data;
const filteredCategories = categoryList?.map(e => ({
ProdCat: e.ProdCat,
ProdCatName: e?.ProdCatName,
isCatExpend: false,
ProdSubCat: []
}));
setExpandedRows(filteredCategories);
}
else {
setExpandedRows([])
}
} else {
setCategorydata([]);
setExpandedRows([])
}
};
const handleFinish = async () => {
if (Editstate) {
let putData = {
AppId: AppId,
BranchId: BranchId,
CompId: CompId,
"CounterId": EditData?.CounterId,
"CounterName": CounterName,
"ActiveStatus": "A",
CategoryDetails: (expandedRows || [])
.filter(cat => cat?.isCatExpend || cat?.CounterCatId)
.map(cat => {
const selectedSubs = (cat?.ProdSubCat || [])
.filter(sub => sub?.isSubcatexpend || sub?.CounterSubCatId)
.map(sub => ({
ProdSubCat: sub?.ProdSubCat,
CounterCatId: sub?.CounterCatId || null,
CounterSubCatId: sub?.CounterSubCatId || null,
ActiveStatus: sub?.isSubcatexpend ? "A" : "D"
}));
return {
CounterId: EditData?.CounterId || null,
CounterCatId: cat?.CounterCatId,
ProdCat: cat?.ProdCat,
ActiveStatus: cat?.isCatExpend ? "A" : "D",
SubCategoryDetails: selectedSubs
};
}),
"UpdatedBy": UserId
}
let PostCounterToken = await dispatch(
putCounterCategoryMap(putData)
).unwrap();
if (PostCounterToken?.data?.statusCode === 1) {
setEditData([])
setEditState(false)
setMessageType('success');
setMessageData(PostCounterToken?.data?.response);
setOpenModel(false)
ClearDatas()
formRef?.current?.resetFields();
} else {
setMessageType('error');
setMessageData(PostCounterToken?.data?.response);
}
}
else {
let postdata = {
AppId: AppId,
BranchId: BranchId,
CompId: CompId,
CounterName: "values?.CounterName",
ActiveStatus: 'A',
CategoryDetails: (expandedRows || [])
.filter(cat => cat?.isCatExpend)
.map(cat => {
const selectedSubs = (cat?.ProdSubCat || [])
.filter(sub => sub?.isSubcatexpend)
.map(sub => ({
ProdSubCat: sub?.ProdSubCat,
}));
return {
ProdCat: cat?.ProdCat,
SubCategoryDetails: selectedSubs
};
})
,
CreatedBy: UserId,
};
let PostCounterToken = await dispatch(
postCounterCategoryMap(postdata)
).unwrap();
if (PostCounterToken?.data?.statusCode === 1) {
setMessageType('success');
setMessageData(PostCounterToken?.data?.response);
setOpenModel(false)
formRef?.current?.resetFields();
} else {
setMessageType('error');
setMessageData(PostCounterToken?.data?.response);
}
}
}
const getCounterTokenDatas = async () => {
let data = {
AppId: AppId,
CompId: CompId,
BranchId: BranchId,
UserId: UserId
};
let Counterdatas = await dispatch(getCounterTokenData(data)).unwrap();
if (Counterdatas?.data?.statusCode === 1) {
@ -149,8 +251,7 @@ const CounterCategoryMappingForm = () => {
);
setEmpData(datas?.[0]);
};
const getSubCategorydetails = async (ProdCat) => {
const getSubCategorydetailsFromChild = async (ProdCat) => {
let data = {
AppId: AppId,
CompId: CompId,
@ -163,283 +264,20 @@ const CounterCategoryMappingForm = () => {
(item) => item.ProdSubCat !== null
);
if (filterSubcategory?.length > 0) {
setSubCategorydata(filterSubcategory);
return filterSubcategory
} else {
setSubCategorydata([]);
return []
}
return filterSubcategory;
} else {
setSubCategorydata([]);
return []
}
};
const onComplete = useCallback(() => {
setMessageData(null);
setMessageType(null);
}, []);
const handleCategorydataChange = async (selectedcat) => {
setSubCategorydata([]); // Clear existing subcategories
setSelectedSubCategory(null);
let subcatdata = await getSubCategorydetails(selectedcat); // Fetch subcategories for the selected category
setSelectedCategory(selectedcat);
let allSubcategoriesSelected =
subcatdata?.length > 0
? subcatdata.every((subcategory) => {
// Check in CounterSelCategory if subcategory is mapped
let foundInCounterSelCategory = CounterSelCategory?.some(
(item) =>
item.ProdCat === selectedcat &&
item.SubCategoryDetails?.some(
(sub) =>
sub.ProdSubCat === subcategory.ProdSubCat &&
sub.ActiveStatus === 'A' // Check if ProdSubCat matches without ActiveStatus
)
);
// Check in CounterDetail if subcategory is mapped
let foundInCounterDetail =
CounterDetail.length > 0 &&
CounterDetail?.some((counter) =>
counter.CategoryDetails?.some(
(category) =>
category.ProdCat === selectedcat &&
category.SubCategoryDetails?.some(
(sub) =>
sub.ProdSubCat === subcategory.ProdSubCat &&
sub.ActiveStatus === 'A' // Check if ProdSubCat matches without ActiveStatus
)
)
);
return foundInCounterSelCategory || foundInCounterDetail;
})
: false;
let alreadyExists =
CounterSelCategory?.some(
(item) =>
item.ProdCat === selectedcat &&
item.ActiveStatus === 'A' &&
item.SubCategoryDetails?.length === 0
) ||
CounterDetail?.some((counter) =>
counter.CategoryDetails?.some(
(category) =>
category.ProdCat === selectedcat &&
// && category.ActiveStatus === 'A'
category.SubCategoryDetails?.length === 0
)
);
// Check if the category is marked as 'D' (removed)
let isRemoved = CounterSelCategory?.some(
(item) => item.ProdCat === selectedcat && item.ActiveStatus === 'D'
);
// Proceed with logic based on checks
if (!allSubcategoriesSelected) {
if (!alreadyExists) {
let isAlreadySelected = CounterSelCategory?.some(
(item) => item.ProdCat === selectedcat
);
if (!isAlreadySelected) {
let selected = Categorydata?.find(
(item) => item.ProdCat === selectedcat
);
setCounterSelCategory((prev) => [
...prev,
{
ProdCat: selected?.ProdCat,
ProdCatName: selected?.ProdCatName,
ActiveStatus: 'A',
SubCategoryDetails: [],
},
]);
} else {
setCounterSelCategory((prevCategories) =>
prevCategories.map(
(item) =>
item.ProdCat === selectedcat
? { ...item, ActiveStatus: 'A' } // Update ActiveStatus to 'A'
: item // Keep the item unchanged
)
);
}
} else {
setMessageType('error');
setMessageData('This category is already mapped');
formRef.current.resetFields(['Category']);
setSelectedCategory(null);
setSubCategorydata([]);
setSelectedSubCategory(null);
}
} else {
setMessageType('error');
setMessageData('This category is already mapped');
formRef.current.resetFields(['Category']);
setSelectedCategory(null);
setSubCategorydata([]);
setSelectedSubCategory(null);
}
formRef.current.resetFields(['Category']);
if (subcatdata?.length === 0) {
setSelectedCategory(null);
}
};
const handleSubCategorydataChange = async (selectedSubcat) => {
setSelectedSubCategory(selectedSubcat);
const isInCounterSelCategory = CounterSelCategory.some((category) =>
category.SubCategoryDetails.some(
(sub) => sub.ProdSubCat === selectedSubcat && sub.ActiveStatus === 'A'
)
);
// Check if subcategory exists in CounterDetail
const isInCounterDetail = CounterDetail.some((counter) =>
counter.CategoryDetails.some((category) =>
category.SubCategoryDetails.some(
(sub) => sub.ProdSubCat === selectedSubcat
)
)
);
if (isInCounterSelCategory || isInCounterDetail) {
setMessageType('error');
setMessageData('This Subcategory is already mapped');
formRef.current.resetFields(['SubCategory']);
} else {
setCounterSelCategory((prev) => {
let selected = SubCategorydata?.find(
(item) => item.ProdSubCat === selectedSubcat
);
const existingCategoryIndex = prev.findIndex(
(cat) => cat.ProdCat === selected?.ProdCat
);
if (existingCategoryIndex !== -1) {
// If category exists, check for existing subcategory
const existingSubCategoryIndex = prev[
existingCategoryIndex
].SubCategoryDetails.findIndex(
(sub) => sub.ProdSubCat === selected?.ProdSubCat
);
if (existingSubCategoryIndex !== -1) {
// Subcategory exists, check its ActiveStatus
const existingSubCategory =
prev[existingCategoryIndex].SubCategoryDetails[
existingSubCategoryIndex
];
if (existingSubCategory.ActiveStatus === 'D') {
// If ActiveStatus is "D", update it to "A"
const updatedCategory = {
...prev[existingCategoryIndex],
SubCategoryDetails: prev[
existingCategoryIndex
].SubCategoryDetails.map((sub, index) =>
index === existingSubCategoryIndex
? { ...sub, ActiveStatus: 'A' }
: sub
),
};
return [
...prev.slice(0, existingCategoryIndex),
updatedCategory,
...prev.slice(existingCategoryIndex + 1),
];
} else {
return prev;
}
} else {
// Subcategory does not exist, add it
const updatedCategory = {
...prev[existingCategoryIndex],
SubCategoryDetails: [
...prev[existingCategoryIndex].SubCategoryDetails,
{
ProdSubCat: selected?.ProdSubCat,
ProdSubCatName: selected?.ProdSubCatName,
ProdCat: selected?.ProdCat,
ActiveStatus: 'A',
},
],
};
return [
...prev.slice(0, existingCategoryIndex),
updatedCategory,
...prev.slice(existingCategoryIndex + 1),
];
}
} else {
// If category doesn't exist, add a new category with subcategory
return [
...prev,
{
ProdCat: selected?.ProdCat,
ProdCatName: selected?.ProdCatName,
ActiveStatus: 'A',
SubCategoryDetails: [
{
ProdSubCat: selected?.ProdSubCat,
ProdSubCatName: selected?.ProdSubCatName,
ProdCat: selected?.ProdCat,
ActiveStatus: 'A',
},
],
},
];
}
});
}
setSelectedSubCategory(null);
setSelectedCategory(null);
setSubCategorydata([]);
formRef.current.resetFields(['SubCategory', 'Category']);
};
const handleRemoveCategory = async (cat) => {
// let remove = CounterSelCategory?.filter(item =>item.ProdCat !== cat.ProdCat)
// setCounterSelCategory(remove)
setCounterSelCategory((prevCategories) =>
prevCategories.map(
(item) =>
item.ProdCat === cat.ProdCat
? { ...item, ActiveStatus: 'D', SubCategoryDetails: [] } // Update ActiveStatus to 'D'
: item // Keep the item unchanged
)
);
setSelectedSubCategory(null);
setSelectedCategory(null);
setSubCategorydata([]);
formRef.current.resetFields(['SubCategory', 'Category']);
};
const handleRemoveSubCategory = async (subcat) => {
setCounterSelCategory((prevCategories) =>
prevCategories.map(
(category) =>
category.ProdCat === subcat.ProdCat
? {
...category,
SubCategoryDetails: category.SubCategoryDetails.map(
(sub) =>
sub.ProdSubCat === subcat.ProdSubCat
? { ...sub, ActiveStatus: 'D' } // Update ActiveStatus to 'D'
: sub // Keep the subcategory unchanged
),
}
: category // Keep the category unchanged
)
);
setSelectedSubCategory(null);
setSelectedCategory(null);
setSubCategorydata([]);
formRef.current.resetFields(['SubCategory', 'Category']);
};
const ViewCategorydetails = async (CategoryList) => {
setSelectedCatList(CategoryList);
setCategoryDataModal(true);
@ -449,20 +287,61 @@ const CounterCategoryMappingForm = () => {
setCategoryDataModal(false);
};
const editData = async (record, index) => {
setCounterName(record?.CounterName)
setEditState(true);
setOpenModel(true)
setEditData(record);
let subcatdetail = record?.CategoryDetails?.flatMap(
(item) => item?.SubCategoryDetails
formRef?.current?.setFieldsValue({
CounterName: record?.CounterName,
});
const results = await Promise.all(
record?.CategoryDetails.map(cat =>
getSubCategorydetailsFromChild(cat?.ProdCat)
)
);
formRef.current?.setFieldsValue({ CounterName: record?.CounterName });
formRef.current.resetFields(['Category']);
formRef.current.resetFields(['SubCategory']);
setCounterName(record?.CounterName);
setCounterSelCategory(record?.CategoryDetails);
// setCounterSelSubCategory(subcatdetail)
setSelectedCategory(null);
setSelectedSubCategory(null);
setSubCategorydata([]);
const subCategoryMap = {};
record?.CategoryDetails.forEach((cat, i) => {
subCategoryMap[cat?.ProdCat] = results[i] || [];
});
console.log(subCategoryMap, "subCategoryMap");
setExpandedRows(prev =>
prev.map(e => {
const catDetail = record?.CategoryDetails?.find(
x => x?.ProdCat === e.ProdCat
);
if (!catDetail) return e;
const subDetailMap = {};
catDetail?.SubCategoryDetails?.forEach(s => {
subDetailMap[s?.ProdSubCat] = s;
});
return {
...e,
isCatExpend: true,
CounterCatId: catDetail?.CounterCatId,
ActiveStatus: "A",
// ✅ Attach subcategories
ProdSubCat: (subCategoryMap[e?.ProdCat] || []).map(sub => {
const subDetail = subDetailMap[sub?.ProdSubCat];
return {
...sub,
CounterCatId: subDetail?.CounterCatId,
CounterSubCatId: subDetail?.CounterSubCatId,
isSubcatexpend: !!subDetail // true if exists
};
})
};
})
);
};
const statusFormatter = async (record, index) => {
let deletedata = {
@ -486,101 +365,12 @@ const CounterCategoryMappingForm = () => {
}
ClearDatas();
};
const onFinish = async (values) => {
const subcatalreadyselected =
CounterDetail?.flatMap(
(counter) =>
counter.CategoryDetails?.filter(
(category) =>
category.ActiveStatus === 'A' &&
category.SubCategoryDetails?.length > 0
).map((category) => category.ProdCat) // Extract ProdCat IDs
) || [];
let removewithoutsubcat = CounterSelCategory.filter(
(category) =>
!(
subcatalreadyselected.includes(category.ProdCat) &&
category.SubCategoryDetails?.length === 0 &&
category.ActiveStatus === 'A'
)
);
const filtereddeactivecat = removewithoutsubcat.filter(
(item) => !(!item.CounterId && item.ActiveStatus === 'D')
);
const filtereddeactivesub = filtereddeactivecat
.map((item) => {
return {
...item,
SubCategoryDetails: item.SubCategoryDetails.filter(
(sub) => sub.ActiveStatus !== 'D'
),
};
})
.filter((item) => item !== null);
// if(CounterSelCategory.some(category =>
// ( subcatalreadyselected.includes(category.ProdCat) && category.SubCategoryDetails?.length === 0 && category.ActiveStatus ==="A")
// )){
// alert("Some Category is already mapped with subcategory so remove that category for mapping")
// }
if (Editstate) {
let putdata = {
AppId: AppId,
BranchId: BranchId,
CompId: CompId,
CounterName: values?.CounterName,
CounterId: EditData?.CounterId,
ActiveStatus: 'A',
CategoryDetails: filtereddeactivesub,
UpdatedBy: UserId,
};
let PutCounterToken = await dispatch(
putCounterCategoryMap(putdata)
).unwrap();
if (PutCounterToken?.data?.statusCode === 1) {
setMessageType('success');
setMessageData(PutCounterToken?.data?.response);
formRef?.current?.resetFields();
} else {
setMessageType('error');
setMessageData(PutCounterToken?.data?.response);
}
} else {
let postdata = {
AppId: AppId,
BranchId: BranchId,
CompId: CompId,
CounterName: values?.CounterName,
ActiveStatus: 'A',
CategoryDetails: filtereddeactivesub,
CreatedBy: UserId,
};
let PostCounterToken = await dispatch(
postCounterCategoryMap(postdata)
).unwrap();
if (PostCounterToken?.data?.statusCode === 1) {
setMessageType('success');
setMessageData(PostCounterToken?.data?.response);
formRef?.current?.resetFields();
} else {
setMessageType('error');
setMessageData(PostCounterToken?.data?.response);
}
}
ClearDatas();
};
const ClearDatas = async () => {
getCategorydetails();
getCounterTokenDatas();
formRef?.current?.resetFields();
setSelectedCategory(null);
setSelectedSubCategory(null);
setSubCategorydata([]);
setCounterName(null);
setCounterSelCategory([]);
setCounterSelSubCategory([]);
setEditData([]);
setEditState(false);
};
@ -629,9 +419,9 @@ const CounterCategoryMappingForm = () => {
style={{ color: '#1292EE' }}
onClick={() =>
empData?.UpdateAccess === 'Y' ||
SAAccessCommonMaster?.UpdateAccess === 'Y' ||
UserType == 'Admin' ||
UserType == 'Super Admin'
SAAccessCommonMaster?.UpdateAccess === 'Y' ||
UserType == 'Admin' ||
UserType == 'Super Admin'
? editData(record, index)
: ''
}
@ -646,9 +436,9 @@ const CounterCategoryMappingForm = () => {
}}
onClick={() =>
empData?.DeleteAccess === 'Y' ||
SAAccessCommonMaster?.DeleteAccess === 'Y' ||
UserType == 'Admin' ||
UserType == 'Super Admin'
SAAccessCommonMaster?.DeleteAccess === 'Y' ||
UserType == 'Admin' ||
UserType == 'Super Admin'
? statusFormatter(record, index)
: ''
}
@ -663,10 +453,10 @@ const CounterCategoryMappingForm = () => {
}}
onClick={() =>
empData?.DeleteAccess === 'Y' ||
empData?.DeleteAccess === undefined ||
SAAccessCommonMaster?.DeleteAccess === 'Y' ||
UserType == 'Admin' ||
UserType == 'Super Admin'
empData?.DeleteAccess === undefined ||
SAAccessCommonMaster?.DeleteAccess === 'Y' ||
UserType == 'Admin' ||
UserType == 'Super Admin'
? statusFormatter(record, index)
: ''
}
@ -674,10 +464,112 @@ const CounterCategoryMappingForm = () => {
),
},
];
const handleNewMapping = () => {
setOpenModel(true)
setEditState(false)
}
const handleChangeinput = async ({ type, value, Cat, subcat }) => {
if (type === "cat") {
if (value) {
try {
let data;
if (memoizedData.current[Cat]) {
data = memoizedData.current[Cat];
} else {
data = await getSubCategorydetailsFromChild(Cat);
memoizedData.current[Cat] = data;
}
setExpandedRows(prev => {
const alreadyExists = prev.find(e => e.ProdCat === Cat);
if (alreadyExists) {
return prev.map(e =>
e.ProdCat === Cat
? {
...e,
isCatExpend: true,
ProdSubCat: data.map(sub => ({
...sub,
isSubcatexpend: true,
})),
}
: e
);
}
return [
...prev,
{
ProdCat: Cat,
isCatExpend: true,
ProdSubCat: data.map(sub => ({
...sub,
isSubcatexpend: false,
})),
},
];
});
} catch (error) {
console.error("Subcategory fetch failed", error);
}
} else {
setExpandedRows(prev =>
prev.map(e =>
e.ProdCat === Cat
? { ...e, isCatExpend: false }
: e
)
);
}
}
else if (type === "subcat") {
setExpandedRows(prev =>
prev.map(e => {
if (e.ProdCat !== Cat) return e;
const updatedSubs = e.ProdSubCat.map(sub =>
sub.ProdSubCat === subcat
? { ...sub, isSubcatexpend: value }
: sub
);
// 🔥 Check if ANY subcategory is still true
const isAnySubSelected = updatedSubs.some(
sub => sub.isSubcatexpend
);
return {
...e,
isCatExpend: isAnySubSelected, // auto update category
ProdSubCat: updatedSubs
};
})
);
}
};
return (
<div className="pageOverAll">
<div className="userPage">
<div className='countermapBTN'>
<FormHeader title={'Counter Category Mapping'} />
<Buttons
buttonText="Add New"
color="901D77"
icon={<ArrowRightOutlined />}
handleSubmit={handleNewMapping}
disabled={addnewAccess}
/>
</div>
<div className="userPageContent">
<Messages
messageType={messageType}
@ -685,7 +577,7 @@ const CounterCategoryMappingForm = () => {
onComplete={onComplete}
/>
<Form ref={formRef} className="formDivAnt" onFinish={onFinish}>
{/* <Form ref={formRef} className="formDivAnt" onFinish={onFinish}>
<div className="CounterForm">
<div className="Counterformdata">
<FormHeader title={'Counter Category Mapping'} />
@ -770,35 +662,7 @@ const CounterCategoryMappingForm = () => {
CounterSelSubCategory?.some(
(subcat) => subcat.ActiveStatus === 'A'
)) && (
// <div style={{width:"500px",height:"200px", border:"1px solid black"}}>
// {CounterSelCategory?.length >0 &&
// <>
// <div>Selected Category:</div>
// <div>{
// CounterSelCategory?.map((item, index) => (
// <div key={index} className="selected-day">
// {item?.ProdCatName}
// <CloseCircleOutlined className="close-icon" onClick={() => handleRemoveCategory(item)} />
// </div>
// ))}
// </div>
// </>
// }
// {CounterSelSubCategory?.length >0 &&
// <>
// <div>Selected Sub Category:</div>
// <div>{
// CounterSelSubCategory?.map((item, index) => (
// <div key={index} className="selected-day">
// {item?.ProdSubCatName}
// <CloseCircleOutlined className="close-icon" onClick={() => handleRemoveSubCategory(item)} />
// </div>
// ))}
// </div>
// </>
// }
// </div>
<table className="Counter-Category-mapping">
<thead>
<tr>
@ -900,13 +764,15 @@ const CounterCategoryMappingForm = () => {
/>
</div>
</div>
</Form>
</Form> */}
{CounterDetail?.length > 0 && (
<div style={{ height: '400px', overflowY: 'scroll' }}>
<Table
dataSource={CounterDetail}
columns={TableColumns}
// pagination={handlePageChange}
// pagination={handlePageChange}
/>
</div>
)}
@ -965,21 +831,21 @@ const CounterCategoryMappingForm = () => {
>
{item?.SubCategoryDetails?.length > 0
? item?.SubCategoryDetails?.map((subCategory) => (
<div
style={{
padding: '3px',
width: 'max-content',
backgroundColor: '#dbe6f5',
borderRadius: '5px',
display: 'flex',
flexDirection: 'row',
columnGap: '5px',
}}
>
{subCategory?.ProdSubCatName}
{/* <CloseCircleOutlined className="close-icon" onClick={() => handleRemoveSubCategory(subCategory)} /> */}
</div>
))
<div
style={{
padding: '3px',
width: 'max-content',
backgroundColor: '#dbe6f5',
borderRadius: '5px',
display: 'flex',
flexDirection: 'row',
columnGap: '5px',
}}
>
{subCategory?.ProdSubCatName}
{/* <CloseCircleOutlined className="close-icon" onClick={() => handleRemoveSubCategory(subCategory)} /> */}
</div>
))
: '-'}
</div>
</td>
@ -993,6 +859,75 @@ const CounterCategoryMappingForm = () => {
</div>
}
/>
<DefaultModal
open={openModel}
title="Category Mapping"
handleCancel={() => { setOpenModel(false); ClearDatas() }}
handleSubmit={() => handleFinish()}
width={600}
footer={false}
>
<Form ref={formRef} onFinish={handleFinish}>
<Form.Item
name="CounterName"
rules={[
{
required: true,
// pattern: /^[\w\s]+$/,
message: 'Please Enter Counter Name',
},
{
validator: async (_, value) => {
await validateSafeInput(value);
if (value && value.length > 30) {
return Promise.reject(
'Counter Name should not exceed 30 characters'
);
}
return Promise.resolve();
},
},
]}
>
<Input
placeholder="Enter counter name"
maxLength={50}
allowClear
value={CounterName}
onChange={(e) => setCounterName(e.target.value)}
style={{ marginBottom: "16px" }}
/>
</Form.Item>
<div className='addCatAmping'>
{expandedRows?.map((item) => (
<FolderExploreCompoent
key={item.ProdCat}
data={item}
handleChangeinput={handleChangeinput}
expandedRows={expandedRows}
/>
))}
</div>
<div style={{
display: "flex",
flexDirection: "row-reverse"
}}>
<Buttons
buttonText="SUBMIT"
color="901D77"
icon={<ArrowRightOutlined />}
/>
</div>
</Form>
</DefaultModal>
</div>
</div>
);

47
src/Pages/CounterCategoryMapping/FolderExploreCompoent.jsx Normal file
View File

@ -0,0 +1,47 @@
import React from "react";
import SubCategoryItem from "./SubCategoryItem";
import "./FolderExploreComponent.scss"
const FolderExploreComponent = ({
data,
handleChangeinput,
}) => {
const { ProdCat, ProdCatName, isCatExpend, ProdSubCat } = data;
const subCategory = ProdSubCat || [];
return (
<div className="FolderExploremaster">
{/* Parent Checkbox */}
<div style={{
backgroundColor: "#f1f1ff",
marginBottom: "6px",
padding: "10px",
borderRadius:"8px",
fontFamily:"Poppins"
}}>
<label>
<input
type="checkbox"
checked={isCatExpend}
onChange={(event) =>
handleChangeinput({ type: "cat", value: event.target.checked, Cat: ProdCat })
}
/>
{" "}{ProdCatName}
</label>
{/* Children */}
{isCatExpend &&
subCategory.map((sub) => (
<SubCategoryItem
key={sub.ProdSubCat}
sub={sub}
catId={ProdCat}
handleChangeinput={handleChangeinput}
/>
))}
</div>
</div>
);
};
export default FolderExploreComponent;

4
src/Pages/CounterCategoryMapping/FolderExploreComponent.scss Normal file
View File

@ -0,0 +1,4 @@
.FolderExploremaster{
display: flex;
flex-direction: column;
}

27
src/Pages/CounterCategoryMapping/SubCategoryItem.jsx Normal file
View File

@ -0,0 +1,27 @@
import React from "react";
const SubCategoryItem = ({ catId, sub, selected, handleChangeinput }) => {
return (
<div
style={{
marginLeft: "30px",
display: "flex",
alignItems: "center",
marginTop: "4px",
}}
>
<input
type="checkbox"
checked={sub?.isSubcatexpend}
onChange={(e) =>
handleChangeinput({ type: "subcat", value: e.target.checked, Cat: catId, subcat: sub.ProdSubCat })
}
/>
<span style={{ marginLeft: "6px" }}>
{sub.ProdSubCatName}
</span>
</div>
);
};
export default SubCategoryItem;

23
src/Styles/CounterCategoryMappingForm/CounterCategoryMapping.scss
View File

@ -5,13 +5,34 @@
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 12px;
.ant-form-item {
margin-bottom: 0px;
}
}
.Counterformdata {
display: flex;
flex-wrap: wrap;
gap: 1rem;
gap: 1rem;
}
.addCatAmping {
height: 65vh;
overflow: auto;
scrollbar-width: thin;
.ant-input {
padding: 3px 14px 6px 11px !important;
}
}
.countermapBTN {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
margin-bottom: 10px;
}