menu state update

src/views/Master/MasterRoles/DialogMenuRoles.js

@@ -337,31 +337,104 @@ export default class DialogMenuRoles extends Component {
     this.setState({ stateMenu: copyStateMenu })
   }
 
-  handleChangeCheckboxRead = (checked, index) => {
+  handleChangeCheckboxRead = (checked, index, menuItem = null, menuIdxList = []) => {
     let copyStateRead = [...this.state.stateRead];
     copyStateRead[index] = checked;
+    let menu = this.state.menu;
+    let checkMenuParent = menu.map((state, index) => {
+      if (state.parent_id === menuItem.id) {
+        return state.id
+      } else {
+        return null
+      }
+    }).filter(index => index !== null);
+    let stateReadIdx = [];
+    menuIdxList.forEach((menu, index) => {
+      checkMenuParent.forEach((check, idx) => {
+        if (check === menu) {
+          stateReadIdx.push(index);
+        }
+      });
+    });
+    stateReadIdx.map((stateRead) => {
+      copyStateRead[stateRead] = checked
+    })
 
     this.setState({ stateRead: copyStateRead })
   }
 
-  handleChangeCheckboxCreate = (checked, index) => {
+  handleChangeCheckboxCreate = (checked, index, menuItem = null, menuIdxList = []) => {
     let copyStateCreate = [...this.state.stateCreate];
     copyStateCreate[index] = checked;
-
+    let menu = this.state.menu;
+    let checkMenuParent = menu.map((state, index) => {
+      if (state.parent_id === menuItem.id) {
+        return state.id
+      } else {
+        return null
+      }
+    }).filter(index => index !== null);
+    let stateCreateIdx = [];
+    menuIdxList.forEach((menu, index) => {
+      checkMenuParent.forEach((check, idx) => {
+        if (check === menu) {
+          stateCreateIdx.push(index);
+        }
+      });
+    });
+    stateCreateIdx.map((stateCreate) => {
+      copyStateCreate[stateCreate] = checked
+    })
     this.setState({ stateCreate: copyStateCreate })
   }
 
-  handleChangeCheckboxEdit = (checked, index) => {
+  handleChangeCheckboxEdit = (checked, index, menuItem = null, menuIdxList = []) => {
     let copyStateEdit = [...this.state.stateUpdate];
     copyStateEdit[index] = checked;
-
+    let menu = this.state.menu;
+    let checkMenuParent = menu.map((state, index) => {
+      if (state.parent_id === menuItem.id) {
+        return state.id
+      } else {
+        return null
+      }
+    }).filter(index => index !== null);
+    let stateEditIdx = [];
+    menuIdxList.forEach((menu, index) => {
+      checkMenuParent.forEach((check, idx) => {
+        if (check === menu) {
+          stateEditIdx.push(index);
+        }
+      });
+    });
+    stateEditIdx.map((stateEdit) => {
+      copyStateEdit[stateEdit] = checked
+    })
     this.setState({ stateUpdate: copyStateEdit })
   }
 
-  handleChangeCheckboxDelete = (checked, index) => {
+  handleChangeCheckboxDelete = (checked, index, menuItem = null, menuIdxList = []) => {
     let copyStateDelete = [...this.state.stateDelete];
     copyStateDelete[index] = checked;
-
+    let menu = this.state.menu;
+    let checkMenuParent = menu.map((state, index) => {
+      if (state.parent_id === menuItem.id) {
+        return state.id
+      } else {
+        return null
+      }
+    }).filter(index => index !== null);
+    let stateDeleteIdx = [];
+    menuIdxList.forEach((menu, index) => {
+      checkMenuParent.forEach((check, idx) => {
+        if (check === menu) {
+          stateDeleteIdx.push(index);
+        }
+      });
+    });
+    stateDeleteIdx.map((stateDelete) => {
+      copyStateDelete[stateDelete] = checked
+    })
     this.setState({ stateDelete: copyStateDelete })
   }
 
@@ -419,7 +492,8 @@ export default class DialogMenuRoles extends Component {
 
   renderForm = () => {
     const { menu, stateRead, stateCreate, stateUpdate, stateDelete } = this.state;
-
+    let menuIdxList = []
+    let menuIdx = 0
     const getChildren = (parentId) => {
       return menu.filter(item => item.parent_id === parentId);
     };
@@ -429,24 +503,28 @@ export default class DialogMenuRoles extends Component {
       const children = getChildren(parentId);
 
       return children.map((menuItem, index) => {
+        const currentIndex = menuIdx; // Capture current index
+        menuIdxList[currentIndex] = menuItem.id;
+        menuIdx++
         const paddingLeft = depth * 20;
         const fontWeight = menuItem.parent_id === null ? 'bold' : 'normal';
 
         return (
-          <React.Fragment key={index}>
+          <React.Fragment key={menuIdx-1}>
             <tr >
               <td style={{ paddingLeft: paddingLeft }}>{menuItem.name}</td>
-              <td><input type="checkbox" onClick={(e) => this.handleChangeCheckboxRead(e.target.checked, index)} defaultChecked={stateRead[index]} /></td>
-              <td><input type="checkbox" onClick={(e) => this.handleChangeCheckboxCreate(e.target.checked, index)} defaultChecked={stateCreate[index]} /></td>
-              <td><input type="checkbox" onClick={(e) => this.handleChangeCheckboxEdit(e.target.checked, index)} defaultChecked={stateUpdate[index]} /></td>
-              <td><input type="checkbox" onClick={(e) => this.handleChangeCheckboxDelete(e.target.checked, index)} defaultChecked={stateDelete[index]} /></td>
+              <td><input type="checkbox" onClick={(e) => this.handleChangeCheckboxRead(e.target.checked, currentIndex, menuItem, menuIdxList)} defaultChecked={stateRead[currentIndex]} /></td>
+              <td><input type="checkbox" onClick={(e) => this.handleChangeCheckboxCreate(e.target.checked, currentIndex, menuItem, menuIdxList)} defaultChecked={stateCreate[currentIndex]} /></td>
+              <td><input type="checkbox" onClick={(e) => this.handleChangeCheckboxEdit(e.target.checked, currentIndex, menuItem, menuIdxList)} defaultChecked={stateUpdate[currentIndex]} /></td>
+              <td><input type="checkbox" onClick={(e) => this.handleChangeCheckboxDelete(e.target.checked, currentIndex, menuItem, menuIdxList)} defaultChecked={stateDelete[currentIndex]} /></td>
             </tr>
             {renderMenu(menuItem.id, depth + 1)} {/* Recursively render children */}
           </React.Fragment>
         );
       });
     };
-
+    menuIdxList = []
+    menuIdx = 0
     // Render top-level menu items (parents)
     return (
       <React.Fragment>