update menu from company menu

src/views/Master/MasterRoles/DialogMenuRoles.js

@@ -3,7 +3,7 @@ import { Modal, ModalHeader, ModalBody, ModalFooter, Row, Col, Table } from 'rea
 import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
 import 'antd/dist/antd.css';
 import axios from 'axios';
-import { MENU_SEARCH } from '../../../const/ApiConst.js';
+import { MENU_COMPANY_SEARCH } from '../../../const/ApiConst.js';
 
 const token = window.localStorage.getItem('token');
 
@@ -36,6 +36,7 @@ export default class DialogMenuRoles extends Component {
       stateUpdateAll: false,
       stateDeleteAll: false,
       allChecked: true,
+      company_id: props.company_id || null,
     }
   }
   async componentDidMount() {
@@ -64,10 +65,11 @@ export default class DialogMenuRoles extends Component {
     const payload = {
       "paging": { "start": 0, "length": -1 },
       "columns": [
-        { "name": "name", "logic_operator": "ilike", "value": "", "operator": "AND" }
+        { "name": "company_id", "logic_operator": "=", "value": this.state.company_id, "operator": "AND" }
       ],
       "joins": [
-        { "name": "t_roles_menu", "column_join": "id", "column_results": ["create", "update", "delete", "read"] }
+        { "name": "t_roles_menu", "column_join": "menu_id", "column_results": ["create", "update", "delete", "read"] },
+        { "name": "m_menu", "column_join": "menu_id", "column_results": ["name"] }
       ],
       "orders": { "columns": ["id"], "ascending": false }
     }
@@ -75,11 +77,9 @@ export default class DialogMenuRoles extends Component {
 
 
     const result = await axios
-      .post(MENU_SEARCH, payload, config)
+      .post(MENU_COMPANY_SEARCH, payload, config)
       .then(res => res)
       .catch((error) => error.response);
-
-    // console.log('78', result);
     if (result && result.data && result.data.code == 200) {
       this.setState({ menu: result.data.data }, () => {
         this.setStateMenu(false);
@@ -321,8 +321,7 @@ export default class DialogMenuRoles extends Component {
 
 
     })
-    console.log('arrayData', arrayData);
+    this.props.closeDialog('save', arrayData);
-    // this.props.closeDialog('save', arrayData);
     this.setState({ id: 0 });
   }
 
@@ -337,31 +336,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_menu_id === menuItem.menu_id) {
+        return state.menu_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_menu_id === menuItem.menu_id) {
+        return state.menu_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_menu_id === menuItem.menu_id) {
+        return state.menu_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_menu_id === menuItem.menu_id) {
+        return state.menu_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 })
   }
 
@@ -397,61 +469,43 @@ export default class DialogMenuRoles extends Component {
     this.setState({ stateDelete: copyStateDelete })
   }
 
-  // renderForm = () => {
-  //   const { menu, stateRead, stateCreate, stateUpdate, stateDelete } = this.state
-  //   console.log('menu', menu);
-  //   return (
-  //     menu.map((val, index) => {
-
-  //       return (
-  //         <tr key={index}>
-  //           <td>{val.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>
-  //         </tr>
-  //       )
-  //     })
-  //   )
-
-  // }
-
   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);
+      return menu.filter(item => item.parent_menu_id === parentId);
     };
 
-    // Function to render menu items
     const renderMenu = (parentId, depth = 0) => {
       const children = getChildren(parentId);
 
       return children.map((menuItem, index) => {
-        const paddingLeft = depth * 20;
+        const currentIndex = menuIdx;
-        const fontWeight = menuItem.parent_id === null ? 'bold' : 'normal';
+        menuIdxList[currentIndex] = menuItem.menu_id;
+        menuIdx++
+        const paddingLeft = depth * 30;
 
         return (
-          <React.Fragment key={index}>
+          <React.Fragment key={menuIdx - 1}>
             <tr >
-              <td style={{ paddingLeft: paddingLeft }}>{menuItem.name}</td>
+              <td style={{ paddingLeft: paddingLeft }}>{menuItem.join_second_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.handleChangeCheckboxRead(e.target.checked, currentIndex, menuItem, menuIdxList)} defaultChecked={stateRead[currentIndex]} /></td>
-              <td><input type="checkbox" onClick={(e) => this.handleChangeCheckboxCreate(e.target.checked, index)} defaultChecked={stateCreate[index]} /></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, index)} defaultChecked={stateUpdate[index]} /></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, index)} defaultChecked={stateDelete[index]} /></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 */}
+            {renderMenu(menuItem.menu_id, depth + 1)}
           </React.Fragment>
         );
       });
     };
-
+    menuIdxList = []
-    // Render top-level menu items (parents)
+    menuIdx = 0
     return (
       <React.Fragment>
-        {this.renderAll()} {/* Render the "All" row */}
+        {this.renderAll()}
-        {renderMenu(null)} {/* Render the menu items */}
+        {renderMenu(null)}
       </React.Fragment>
     );
   };
@@ -525,7 +579,7 @@ export default class DialogMenuRoles extends Component {
                     Create
                   </th>
                   <th>
-                    Edite
+                    Edit
                   </th>
                   <th>
                     Delete

src/views/Master/MasterRoles/index.js

@@ -331,10 +331,15 @@ class index extends Component {
 		let promises = []
 		let result = []
 		dataArray.map((val, index) => {
-			if (val.checked === true) {
+			if (val.read === true) {
 				const formData = {
 					menu_id: val.menu_id,
-					role_id: val.roles_id
+					role_id: val.roles_id,
+					create: val.create,
+					read: val.read,
+					update: val.update,
+					delete: val.delete
+
 				}
 				promises.push(axios.post(ROLEMENU_ADD, formData, this.state.config)
 					.then(res => result.push(res)))