Skip to content

Commit 5437675

Browse files
sayalijoshi27sayalijoshi27
authored
Merge pull request #380 from contentstack/bugFix/cmg-298
fixed selection deselection issue
2 parents 1bb92ea + 78e9eea commit 5437675

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',
@@ -744,129 +746,297 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R
744746
);
745747
};
746748

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

751804
singleSelectedRowIds.forEach((uid: string) => {
752805
const isId = selectedData?.some((item) => item?.id === uid);
753806
if (isId) {
754807
selectedObj[uid] = true;
755808
}
756809
});
757-
758-
// Iterate over each item in selectedData to handle group and child selection logic
759-
selectedData?.forEach((item) => {
760810

761-
// Extract the group UID if item is child of any group
762-
const uidBeforeDot = item?.uid?.split('.')[0];
763-
const groupItem = tableData?.find((entry) => entry?.uid === uidBeforeDot);
764-
765-
if (groupItem) {
766-
// Mark the group item as selected if any child of group is selected
767-
selectedObj[groupItem?.id] = true;
811+
const updateRowHistoryObj = (key: string, checked: boolean) => {
812+
const obj = tableData.find(i => i.id === key);
813+
if (obj) {
814+
rowHistoryObj[key].push({
815+
checked,
816+
at: Date.now(),
817+
...modifiedObj(obj),
818+
});
768819
}
769-
770-
// If the item is a group, handle its child items
771-
if (item?.otherCmsType === 'Group') {
820+
};
772821

773-
// Get all child items of the group
774-
const newEle = tableData?.filter((entry) => entry?.uid?.startsWith(item?.uid + '.'));
775-
776-
if (newEle && validateArray(newEle)) {
777-
778-
const allChildrenNotSelected = newEle.every(child => !selectedObj[child?.id || '']);
779-
if (allChildrenNotSelected) {
780-
781-
//if none of the child of group is selected then mark the child items as selected
782-
newEle.forEach((child) => {
783-
Ischild = true;
784-
selectedObj[child?.id || ''] = true;
785-
});
786-
}
822+
// updates rowHistoryObj based on selectedObj
823+
for (const key in rowHistoryObj) {
824+
if (Object.prototype.hasOwnProperty.call(selectedObj, key)) {
825+
if(!rowHistoryObj[key][rowHistoryObj[key].length - 1].checked){
826+
updateRowHistoryObj(key, true);
827+
}
828+
}else{
829+
if(rowHistoryObj[key][rowHistoryObj[key].length - 1].checked){
830+
updateRowHistoryObj(key, false);
787831
}
788-
}
789-
else {
790-
// If the item is not a group, mark it as selected in selectedObj
791-
selectedObj[item?.id] = true;
792832
}
793-
});
794-
795-
const uncheckedElements = findUncheckedElement(selectedData, tableData);
796-
797-
uncheckedElements && validateArray(uncheckedElements) && uncheckedElements?.forEach((field) => {
798-
if (field?.otherCmsType === "Group") {
833+
}
799834

800-
// Get all child items of the unchecked group
801-
const childItems = tableData?.filter((entry) => entry?.uid?.startsWith(field?.uid + '.'));
802-
803-
if (childItems && validateArray(childItems)) {
835+
// Get the latest action performed row
836+
const latestRow = findLatest(rowHistoryObj)
837+
838+
if(latestRow.otherCmsType.toLowerCase() === "group" && latestRow.parentId === null){
839+
// get all child rows of group
840+
const childItems = tableData?.filter((entry) => entry?.uid?.startsWith(latestRow?.uid + '.'));
841+
if (childItems && validateArray(childItems)) {
842+
if(latestRow.checked){
843+
const lastEle = getLastElements(rowHistoryObj)
844+
let isChildChecked = false
845+
childItems.forEach((child) => {
846+
if(lastEle[child.id].checked){
847+
isChildChecked = true
848+
}
849+
})
804850

805-
// Check if all children are selected
806-
const allChildrenSelected = childItems.every(child => selectedObj[child?.id || '']);
807-
808-
if (allChildrenSelected) {
851+
if(isChildChecked) {
852+
if(!selectedObj[latestRow?.id]){
853+
selectedObj[latestRow?.id] = true
854+
}
855+
} else{
809856
childItems.forEach((child) => {
810-
811-
// Remove each child item from selected
812-
delete selectedObj[child?.id || ''];
813-
814-
});
815-
delete selectedObj[field?.id || ''];
857+
if(!selectedObj[child?.id]){
858+
selectedObj[child?.id] = true
859+
}
860+
})
816861
}
817-
}
818-
}
819-
else {
820-
821-
// Extract the group UID if item is child of any group
822-
const uidBeforeDot = field?.uid?.split('.')[0];
823-
const groupItem = selectedData?.find((entry) => entry?.uid === uidBeforeDot);
824-
const childItems = tableData?.filter((entry) => entry?.uid?.startsWith(groupItem?.uid + '.'));
825862

826-
if (childItems && validateArray(childItems)) {
863+
}else{
864+
childItems.forEach((child) => {
865+
delete selectedObj[child?.id || ''];
866+
})
867+
}
868+
}
869+
} else if(latestRow.parentId && !["title", "url"].includes(latestRow.uid.toLowerCase())){
870+
// Extract the group UID if item is child of any group
871+
const uidBeforeDot = latestRow?.uid?.split('.')[0];
872+
const groupItem = tableData?.find((entry) => entry?.uid === uidBeforeDot);
873+
const childItems = tableData?.filter((entry) => entry?.uid?.startsWith(groupItem?.uid + '.'));
827874

828-
// Check if all children are not selected of group
829-
const allChildrenSelected = childItems.every(child => !selectedObj[child?.id || '']);
830-
831-
if (allChildrenSelected) {
832-
833-
childItems.forEach((child) => {
834-
delete selectedObj[child?.id || ''];
835-
836-
});
837-
delete selectedObj[groupItem?.id || ''];
838-
}
875+
if(latestRow.checked){
876+
if(!selectedObj[latestRow.parentId]){
877+
selectedObj[latestRow.parentId] = true
839878
}
840-
841-
if (!Ischild) {
879+
if(!selectedObj[latestRow.id]){
880+
selectedObj[latestRow.id] = true
881+
}
882+
}else{
883+
const lastEle = getLastElements(rowHistoryObj)
842884

843-
delete selectedObj[field?.id || ''];
885+
let allChildFalse = 0
886+
childItems.forEach((child) => {
887+
if(!lastEle[child.id].checked){
888+
allChildFalse ++
889+
}
890+
})
891+
if(childItems.length === allChildFalse){
892+
if(selectedObj[latestRow.parentId]){
893+
delete selectedObj[latestRow.parentId]
894+
}
895+
}else{
896+
if(selectedObj[latestRow.id]){
897+
delete selectedObj[latestRow.id]
898+
}
844899
}
845900
}
846-
});
901+
}
902+
847903
const updatedTableData = tableData.map((tableItem) => {
848-
const found = selectedData.some((selectedItem) => selectedItem.uid === tableItem.uid);
904+
// const found = selectedData.some((selectedItem) => selectedItem.uid === tableItem.uid);
849905

850906
// Mark the item as deleted if not found in selectedData
851907
return {
852908
...tableItem,
853-
isDeleted: !found ? true : false,
909+
isDeleted: selectedObj[tableItem.id] ?? false//!found ? true : false,
854910
};
855-
});
856-
911+
});
857912

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

8621032

8631033

8641034
// Function to find unchecked field
865-
const findUncheckedElement = (selectedData: FieldMapType[], tableData: FieldMapType[]) => {
866-
return tableData.filter((mainField: FieldMapType) =>
867-
!selectedData.some((selectedField:FieldMapType) => selectedField?.otherCmsField === mainField?.otherCmsField)
868-
);
869-
}
1035+
// const findUncheckedElement = (selectedData: FieldMapType[], tableData: FieldMapType[]) => {
1036+
// return tableData.filter((mainField: FieldMapType) =>
1037+
// !selectedData.some((selectedField:FieldMapType) => selectedField?.otherCmsField === mainField?.otherCmsField)
1038+
// );
1039+
// }
8701040

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

0 commit comments

Comments
 (0)