Skip to content

Commit 78e9eea

Browse files
author
GaurishN
committed
fixed selection deselection issue
1 parent 349fc64 commit 78e9eea

File tree

1 file changed

+255
-85
lines changed

1 file changed

+255
-85
lines changed

‎ui/src/components/ContentMapper/index.tsx‎

Lines changed: 255 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,8 @@ import SaveChangesModal from '../Common/SaveChangesModal';
6969
import './index.scss';
7070
import { NoDataFound, SCHEMA_PREVIEW } from '../../common/assets';
7171

72+
const rowHistoryObj: any = {}
73+
7274
const Fields: MappingFields = {
7375
'single_line_text':{
7476
label : 'Single Line Textbox',
@@ -733,129 +735,297 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R
733735
);
734736
};
735737

738+
// add row ids with their data to rowHistoryObj
739+
useEffect(() => {
740+
Object.keys(rowHistoryObj).forEach(key => delete rowHistoryObj[key]);
741+
tableData.forEach(i => rowHistoryObj[i.id] = [{checked: true, at: Date.now(), ...modifiedObj(i)}])
742+
}, [tableData]);
743+
744+
function getParentId(uid: string){
745+
return tableData.find(i => i.uid === uid)?.id ?? null
746+
}
747+
748+
function modifiedObj (obj: FieldMapType) {
749+
const {otherCmsType, uid, id} = obj
750+
const excludeArr = ["group"]
751+
return {
752+
id,
753+
otherCmsType,
754+
uid,
755+
parentId : excludeArr.includes(otherCmsType.toLowerCase()) ? null : getParentId(uid?.split('.')[0])
756+
}
757+
}
758+
759+
// Get the last action of each row
760+
function getLastElements(obj: any) {
761+
const result: any = {};
762+
for (const key in obj) {
763+
if (Array.isArray(obj[key]) && obj[key].length > 0) {
764+
// Get the last element of the array
765+
result[key] = obj[key][obj[key].length - 1];
766+
}
767+
}
768+
return result;
769+
}
770+
771+
// Get the latest action performed on table
772+
function findLatest(obj: any) {
773+
let latestItem = null;
774+
775+
for (const key in obj) {
776+
if (Array.isArray(obj[key]) && obj[key].length > 0) {
777+
// Get the last element of the array
778+
const lastElement = obj[key][obj[key].length - 1];
779+
780+
// Compare the 'at' property
781+
if (!latestItem || lastElement.at > latestItem.at) {
782+
latestItem = lastElement;
783+
}
784+
}
785+
}
786+
787+
return latestItem;
788+
}
789+
736790
const handleSelectedEntries = (singleSelectedRowIds: string[], selectedData: FieldMapType[]) => {
737791
const selectedObj: UidMap = {};
738-
let Ischild = false;
739792

740793
singleSelectedRowIds.forEach((uid: string) => {
741794
const isId = selectedData?.some((item) => item?.id === uid);
742795
if (isId) {
743796
selectedObj[uid] = true;
744797
}
745798
});
746-
747-
// Iterate over each item in selectedData to handle group and child selection logic
748-
selectedData?.forEach((item) => {
749799

750-
// Extract the group UID if item is child of any group
751-
const uidBeforeDot = item?.uid?.split('.')[0];
752-
const groupItem = tableData?.find((entry) => entry?.uid === uidBeforeDot);
753-
754-
if (groupItem) {
755-
// Mark the group item as selected if any child of group is selected
756-
selectedObj[groupItem?.id] = true;
800+
const updateRowHistoryObj = (key: string, checked: boolean) => {
801+
const obj = tableData.find(i => i.id === key);
802+
if (obj) {
803+
rowHistoryObj[key].push({
804+
checked,
805+
at: Date.now(),
806+
...modifiedObj(obj),
807+
});
757808
}
758-
759-
// If the item is a group, handle its child items
760-
if (item?.otherCmsType === 'Group') {
809+
};
761810

762-
// Get all child items of the group
763-
const newEle = tableData?.filter((entry) => entry?.uid?.startsWith(item?.uid + '.'));
764-
765-
if (newEle && validateArray(newEle)) {
766-
767-
const allChildrenNotSelected = newEle.every(child => !selectedObj[child?.id || '']);
768-
if (allChildrenNotSelected) {
769-
770-
//if none of the child of group is selected then mark the child items as selected
771-
newEle.forEach((child) => {
772-
Ischild = true;
773-
selectedObj[child?.id || ''] = true;
774-
});
775-
}
811+
// updates rowHistoryObj based on selectedObj
812+
for (const key in rowHistoryObj) {
813+
if (Object.prototype.hasOwnProperty.call(selectedObj, key)) {
814+
if(!rowHistoryObj[key][rowHistoryObj[key].length - 1].checked){
815+
updateRowHistoryObj(key, true);
816+
}
817+
}else{
818+
if(rowHistoryObj[key][rowHistoryObj[key].length - 1].checked){
819+
updateRowHistoryObj(key, false);
776820
}
777-
}
778-
else {
779-
// If the item is not a group, mark it as selected in selectedObj
780-
selectedObj[item?.id] = true;
781821
}
782-
});
783-
784-
const uncheckedElements = findUncheckedElement(selectedData, tableData);
785-
786-
uncheckedElements && validateArray(uncheckedElements) && uncheckedElements?.forEach((field) => {
787-
if (field?.otherCmsType === "Group") {
822+
}
788823

789-
// Get all child items of the unchecked group
790-
const childItems = tableData?.filter((entry) => entry?.uid?.startsWith(field?.uid + '.'));
791-
792-
if (childItems && validateArray(childItems)) {
824+
// Get the latest action performed row
825+
const latestRow = findLatest(rowHistoryObj)
826+
827+
if(latestRow.otherCmsType.toLowerCase() === "group" && latestRow.parentId === null){
828+
// get all child rows of group
829+
const childItems = tableData?.filter((entry) => entry?.uid?.startsWith(latestRow?.uid + '.'));
830+
if (childItems && validateArray(childItems)) {
831+
if(latestRow.checked){
832+
const lastEle = getLastElements(rowHistoryObj)
833+
let isChildChecked = false
834+
childItems.forEach((child) => {
835+
if(lastEle[child.id].checked){
836+
isChildChecked = true
837+
}
838+
})
793839

794-
// Check if all children are selected
795-
const allChildrenSelected = childItems.every(child => selectedObj[child?.id || '']);
796-
797-
if (allChildrenSelected) {
840+
if(isChildChecked) {
841+
if(!selectedObj[latestRow?.id]){
842+
selectedObj[latestRow?.id] = true
843+
}
844+
} else{
798845
childItems.forEach((child) => {
799-
800-
// Remove each child item from selected
801-
delete selectedObj[child?.id || ''];
802-
803-
});
804-
delete selectedObj[field?.id || ''];
846+
if(!selectedObj[child?.id]){
847+
selectedObj[child?.id] = true
848+
}
849+
})
805850
}
806-
}
807-
}
808-
else {
809-
810-
// Extract the group UID if item is child of any group
811-
const uidBeforeDot = field?.uid?.split('.')[0];
812-
const groupItem = selectedData?.find((entry) => entry?.uid === uidBeforeDot);
813-
const childItems = tableData?.filter((entry) => entry?.uid?.startsWith(groupItem?.uid + '.'));
814851

815-
if (childItems && validateArray(childItems)) {
852+
}else{
853+
childItems.forEach((child) => {
854+
delete selectedObj[child?.id || ''];
855+
})
856+
}
857+
}
858+
} else if(latestRow.parentId && !["title", "url"].includes(latestRow.uid.toLowerCase())){
859+
// Extract the group UID if item is child of any group
860+
const uidBeforeDot = latestRow?.uid?.split('.')[0];
861+
const groupItem = tableData?.find((entry) => entry?.uid === uidBeforeDot);
862+
const childItems = tableData?.filter((entry) => entry?.uid?.startsWith(groupItem?.uid + '.'));
816863

817-
// Check if all children are not selected of group
818-
const allChildrenSelected = childItems.every(child => !selectedObj[child?.id || '']);
819-
820-
if (allChildrenSelected) {
821-
822-
childItems.forEach((child) => {
823-
delete selectedObj[child?.id || ''];
824-
825-
});
826-
delete selectedObj[groupItem?.id || ''];
827-
}
864+
if(latestRow.checked){
865+
if(!selectedObj[latestRow.parentId]){
866+
selectedObj[latestRow.parentId] = true
828867
}
829-
830-
if (!Ischild) {
868+
if(!selectedObj[latestRow.id]){
869+
selectedObj[latestRow.id] = true
870+
}
871+
}else{
872+
const lastEle = getLastElements(rowHistoryObj)
831873

832-
delete selectedObj[field?.id || ''];
874+
let allChildFalse = 0
875+
childItems.forEach((child) => {
876+
if(!lastEle[child.id].checked){
877+
allChildFalse ++
878+
}
879+
})
880+
if(childItems.length === allChildFalse){
881+
if(selectedObj[latestRow.parentId]){
882+
delete selectedObj[latestRow.parentId]
883+
}
884+
}else{
885+
if(selectedObj[latestRow.id]){
886+
delete selectedObj[latestRow.id]
887+
}
833888
}
834889
}
835-
});
890+
}
891+
836892
const updatedTableData = tableData.map((tableItem) => {
837-
const found = selectedData.some((selectedItem) => selectedItem.uid === tableItem.uid);
893+
// const found = selectedData.some((selectedItem) => selectedItem.uid === tableItem.uid);
838894

839895
// Mark the item as deleted if not found in selectedData
840896
return {
841897
...tableItem,
842-
isDeleted: !found ? true : false,
898+
isDeleted: selectedObj[tableItem.id] ?? false//!found ? true : false,
843899
};
844-
});
845-
900+
});
846901

847902
setRowIds(selectedObj);
848903
setSelectedEntries(updatedTableData);
849904
};
905+
906+
// const handleSelectedEntries2 = (singleSelectedRowIds: string[], selectedData: FieldMapType[]) => {
907+
// const selectedObj: UidMap = {};
908+
// let Ischild = false;
909+
910+
// singleSelectedRowIds.forEach((uid: string) => {
911+
// const isId = selectedData?.some((item) => item?.id === uid);
912+
// if (isId) {
913+
// selectedObj[uid] = true;
914+
// }
915+
// });
916+
917+
// // Iterate over each item in selectedData to handle group and child selection logic
918+
// selectedData?.forEach((item) => {
919+
920+
// // Extract the group UID if item is child of any group
921+
// const uidBeforeDot = item?.uid?.split('.')[0];
922+
// const groupItem = tableData?.find((entry) => entry?.uid === uidBeforeDot);
923+
924+
// if (groupItem) {
925+
// // Mark the group item as selected if any child of group is selected
926+
// selectedObj[groupItem?.id] = true;
927+
// }
928+
929+
// // If the item is a group, handle its child items
930+
// if (item?.otherCmsType === 'Group') {
931+
932+
// // Get all child items of the group
933+
// const newEle = tableData?.filter((entry) => entry?.uid?.startsWith(item?.uid + '.'));
934+
935+
// if (newEle && validateArray(newEle)) {
936+
937+
// const allChildrenNotSelected = newEle.every(child => !selectedObj[child?.id || '']);
938+
// if (allChildrenNotSelected) {
939+
940+
// //if none of the child of group is selected then mark the child items as selected
941+
// newEle.forEach((child) => {
942+
// Ischild = true;
943+
// selectedObj[child?.id || ''] = true;
944+
// });
945+
// }
946+
// }
947+
// }
948+
// else {
949+
// // If the item is not a group, mark it as selected in selectedObj
950+
// selectedObj[item?.id] = true;
951+
// }
952+
// });
953+
954+
// const uncheckedElements = findUncheckedElement(selectedData, tableData);
955+
956+
// uncheckedElements && validateArray(uncheckedElements) && uncheckedElements?.forEach((field) => {
957+
// if (field?.otherCmsType === "Group") {
958+
959+
// // Get all child items of the unchecked group
960+
// const childItems = tableData?.filter((entry) => entry?.uid?.startsWith(field?.uid + '.'));
961+
962+
// if (childItems && validateArray(childItems)) {
963+
964+
// // Check if all children are selected
965+
// const allChildrenSelected = childItems.every(child => selectedObj[child?.id || '']);
966+
967+
// if (allChildrenSelected) {
968+
// childItems.forEach((child) => {
969+
970+
// // Remove each child item from selected
971+
// delete selectedObj[child?.id || ''];
972+
973+
// });
974+
// delete selectedObj[field?.id || ''];
975+
// }
976+
// }
977+
// }
978+
// else {
979+
980+
// // Extract the group UID if item is child of any group
981+
// const uidBeforeDot = field?.uid?.split('.')[0];
982+
// const groupItem = selectedData?.find((entry) => entry?.uid === uidBeforeDot);
983+
// const childItems = tableData?.filter((entry) => entry?.uid?.startsWith(groupItem?.uid + '.'));
984+
985+
// if (childItems && validateArray(childItems)) {
986+
987+
// // Check if all children are not selected of group
988+
// const allChildrenSelected = childItems.every(child => !selectedObj[child?.id || '']);
989+
990+
// if (allChildrenSelected) {
991+
992+
// childItems.forEach((child) => {
993+
// delete selectedObj[child?.id || ''];
994+
995+
// });
996+
// delete selectedObj[groupItem?.id || ''];
997+
// }
998+
// }
999+
1000+
// if (!Ischild) {
1001+
1002+
// delete selectedObj[field?.id || ''];
1003+
// }
1004+
// }
1005+
// });
1006+
// const updatedTableData = tableData.map((tableItem) => {
1007+
// const found = selectedData.some((selectedItem) => selectedItem.uid === tableItem.uid);
1008+
1009+
// // Mark the item as deleted if not found in selectedData
1010+
// return {
1011+
// ...tableItem,
1012+
// isDeleted: !found ? true : false,
1013+
// };
1014+
// });
1015+
1016+
1017+
// setRowIds(selectedObj);
1018+
// setSelectedEntries(updatedTableData);
1019+
// };
8501020

8511021

8521022

8531023
// Function to find unchecked field
854-
const findUncheckedElement = (selectedData: FieldMapType[], tableData: FieldMapType[]) => {
855-
return tableData.filter((mainField: FieldMapType) =>
856-
!selectedData.some((selectedField:FieldMapType) => selectedField?.otherCmsField === mainField?.otherCmsField)
857-
);
858-
}
1024+
// const findUncheckedElement = (selectedData: FieldMapType[], tableData: FieldMapType[]) => {
1025+
// return tableData.filter((mainField: FieldMapType) =>
1026+
// !selectedData.some((selectedField:FieldMapType) => selectedField?.otherCmsField === mainField?.otherCmsField)
1027+
// );
1028+
// }
8591029

8601030
// Method for change select value
8611031
const handleValueChange = (value: FieldTypes, rowIndex: string) => {

0 commit comments

Comments
 (0)