enhancecoutermapping
This commit is contained in:
Tamilselvan
parent
6f7e2f6cdd
commit
7e856f2db2
|
|
@ -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);
|
||||
};
|
||||
|
|
@ -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,7 +764,9 @@ const CounterCategoryMappingForm = () => {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</Form> */}
|
||||
|
||||
|
||||
{CounterDetail?.length > 0 && (
|
||||
<div style={{ height: '400px', overflowY: 'scroll' }}>
|
||||
<Table
|
||||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
.FolderExploremaster{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
Loading…
Reference in New Issue