update dialog form menu

src/views/Master/MasterRoles/DialogMenuRoles.js

@@ -4,10 +4,19 @@ 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 { withTranslation, WithTranslation } from 'react-i18next';
-const BASE_URL = "http://siopas.co.id/custom-php/api/geohr/";
 
-class DialogMenuRoles extends Component {
+const token = window.localStorage.getItem('token');
+
+
+const config = {
+  headers:
+  {
+    Authorization: `Bearer ${token}`,
+    "Content-type": `application/json`
+  }
+};
+
+export default class DialogMenuRoles extends Component {
   constructor(props) {
     super(props)
     this.state = {
@@ -16,24 +25,39 @@ class DialogMenuRoles extends Component {
       description: "",
       openDialog: false,
       isParentClick: false,
+      menu: [],
       stateMenu: [],
-      menu:[],
+      stateRead: [],
+      stateCreate: [],
+      stateUpdate: [],
+      stateDelete: [],
+      stateReadAll: false,
+      stateCreateAll: false,
+      stateUpdateAll: false,
+      stateDeleteAll: false,
       allChecked: true,
-      company_id: props.company_id || null,
-      role_name: props.role_name || '',
-      token: props.token || '',
-      config: {
-        headers: {
-          Authorization: `Bearer ${props.token || ''}`,
-          "Content-type": "application/json",
     }
   }
+  async componentDidMount() {
+    this.props.showDialog(this.showDialog);
+    this.getAllMenu();
+  }
+
+  async componentDidUpdate() {
+    if (this.state.isParentClick === true) {
+      const { idRoles } = this.props
+      this.setStateMenu(true);
+      this.setStateRead(true);
+      this.setStateUpdate(true);
+      this.setStateCreate(true);
+      this.setStateDelete(true);
+      this.setState({ isParentClick: false, id: idRoles });
     }
   }
 
-  async componentDidMount() {
+
-    this.getAllMenu()
+  showDialog = () => {
-    this.props.showDialog(this.showDialog);
+    this.setState({ isParentClick: true });
   }
 
   getAllMenu = async () => {
@@ -42,30 +66,30 @@ class DialogMenuRoles extends Component {
       "columns": [
         { "name": "name", "logic_operator": "ilike", "value": "", "operator": "AND" }
       ],
-      "joins": [],
+      "joins": [
+        { "name": "t_roles_menu", "column_join": "id", "column_results": ["create", "update", "delete", "read"] }
+      ],
       "orders": { "columns": ["id"], "ascending": false }
     }
+
+
+
     const result = await axios
-      .post(MENU_SEARCH, payload, this.state.config)
+      .post(MENU_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.setState({ menu: result.data.data }, () => {
-    }
+        this.setStateMenu(false);
+      });
+    } else {
     }
 
-  async componentDidUpdate() {
-    if (this.state.isParentClick === true) {
-      const { idRoles } = this.props
-      this.setStateMenu(true);
-      this.setState({ isParentClick: false, id: idRoles });
-    }
   }
 
 
-  showDialog = () => {
-    this.setState({ isParentClick: true });
-  }
 
   setStateMenu = edit => {
     const stateMenu = [];
@@ -81,11 +105,69 @@ class DialogMenuRoles extends Component {
     })
   }
 
+  setStateRead = edit => {
+    const stateRead = [];
+    this.state.menu.map((val) => {
+      stateRead.push(false);
+    })
+    this.setState({ stateRead: [] }, () => {
+      this.setState({ stateRead: stateRead }, () => {
+        if (edit) {
+          this.checkReadRoles();
+        }
+      })
+    })
+  }
+
+  setStateCreate = edit => {
+    const stateCreate = [];
+    this.state.menu.map((val) => {
+      stateCreate.push(false);
+    })
+    this.setState({ stateCreate: [] }, () => {
+      this.setState({ stateCreate: stateCreate }, () => {
+        if (edit) {
+          this.checkCreateRoles();
+        }
+      })
+    })
+  }
+
+  setStateUpdate = edit => {
+    const stateUpdate = [];
+    this.state.menu.map((val) => {
+      stateUpdate.push(false);
+    })
+    this.setState({ stateUpdate: [] }, () => {
+      this.setState({ stateUpdate: stateUpdate }, () => {
+        if (edit) {
+          this.checkUpdateRoles();
+        }
+      })
+    })
+  }
+
+  setStateDelete = edit => {
+    const stateDelete = [];
+    this.state.menu.map((val) => {
+      stateDelete.push(false);
+    })
+    this.setState({ stateDelete: [] }, () => {
+      this.setState({ stateDelete: stateDelete }, () => {
+        if (edit) {
+          this.checkDeleteRoles();
+        }
+      })
+    })
+  }
+
   checkMenuRoles = () => {
     let copyStateMenu = [...this.state.stateMenu];
+
     this.props.menuRoles.map((val, indexMenu) => {
       let index = this.getIndexDataMenu(val.menu_id);
-      if (index >= 0) {
+
+      if (index >= 0 || val.read === true || val.create === true || val.update === true || val.delete === true) {
         copyStateMenu[index] = true;
       }
     })
@@ -99,15 +181,125 @@ class DialogMenuRoles extends Component {
     })
   }
 
+  checkReadRoles = () => {
+    let copyStateRead = [...this.state.stateRead];
+    this.props.menuRoles.map((val) => {
+      let index = this.getIndexDataMenu(val.menu_id);
+      if (val.read === true) {
+        copyStateRead[index] = true;
+      } else {
+        copyStateRead[index] = false;
+      }
+    })
+
+    this.setState({ stateRead: [] }, () => {
+      let check = copyStateRead.some(this.checkArray);
+      if (check === false) {
+        this.setState({ allChecked: true, stateRead: copyStateRead, })
+      } else {
+        this.setState({ allChecked: false, stateRead: copyStateRead, })
+      }
+    })
+  }
+
+  checkCreateRoles = () => {
+    let copyStateCreate = [...this.state.stateCreate];
+
+    this.props.menuRoles.map((val) => {
+      let index = this.getIndexDataMenu(val.menu_id);
+      if (val.create === true) {
+        copyStateCreate[index] = true;
+      } else {
+        copyStateCreate[index] = false;
+      }
+    })
+
+    this.setState({ stateCreate: [] }, () => {
+      let check = copyStateCreate.some(this.checkArray);
+      if (check === false) {
+        this.setState({ allChecked: true, stateCreate: copyStateCreate, })
+      } else {
+        this.setState({ allChecked: false, stateCreate: copyStateCreate, })
+      }
+    })
+  }
+
+  checkUpdateRoles = () => {
+    let copyStateUpdate = [...this.state.stateUpdate];
+
+    this.props.menuRoles.map((val) => {
+      let index = this.getIndexDataMenu(val.menu_id);
+      if (val.update === true) {
+        copyStateUpdate[index] = true;
+      } else {
+        copyStateUpdate[index] = false;
+      }
+    })
+
+    this.setState({ stateUpdate: [] }, () => {
+      let check = copyStateUpdate.some(this.checkArray);
+      if (check === false) {
+        this.setState({ allChecked: true, stateUpdate: copyStateUpdate, })
+      } else {
+        this.setState({ allChecked: false, stateUpdate: copyStateUpdate, })
+      }
+    })
+  }
+
+  checkDeleteRoles = () => {
+    let copyStateDelete = [...this.state.stateDelete];
+
+    this.props.menuRoles.map((val) => {
+      let index = this.getIndexDataMenu(val.menu_id);
+      if (val.delete === true) {
+        copyStateDelete[index] = true;
+      } else {
+        copyStateDelete[index] = false;
+      }
+    })
+
+    this.setState({ stateDelete: [] }, () => {
+      let check = copyStateDelete.some(this.checkArray);
+      if (check === false) {
+        this.setState({ allChecked: true, stateDelete: copyStateDelete, })
+      } else {
+        this.setState({ allChecked: false, stateDelete: copyStateDelete, })
+      }
+    })
+  }
 
   getIndexDataMenu = (id) => {
     let index = this.state.menu.findIndex(obj => obj.id === id);
     return index
   }
 
+  getIndexDataCreate = (id) => {
+    let index = this.state.stateCreate.findIndex(obj => obj.id === id);
+    return index
+  }
+
+  getIndexDataDelete = (id) => {
+    let index = this.state.stateDelete.findIndex(obj => obj.id === id);
+    return index
+  }
+
+  getIndexDataRead = (id) => {
+    let index = this.state.stateRead.findIndex(obj => obj.id === id);
+    return index
+  }
+
+  getIndexDataUpdate = (id) => {
+    let index = this.state.stateUpdate.findIndex(obj => obj.id === id);
+    return index
+  }
+
   handleSave = () => {
     const {
       stateMenu,
+      stateCreate,
+      stateDelete,
+      stateRead,
+      stateUpdate,
       menu,
       id
     } = this.state
@@ -118,11 +310,19 @@ class DialogMenuRoles extends Component {
       let data = {
         roles_id: id,
         menu_id: val.id,
-        checked: stateMenu[index]
+        read: stateRead[index],
+        create: stateCreate[index],
+        update: stateUpdate[index],
+        delete: stateDelete[index],
+        checked: stateMenu[index],
+
       }
       arrayData.push(data);
+
+
     })
-    this.props.closeDialog('save', arrayData);
+    console.log('arrayData', arrayData);
+    // this.props.closeDialog('save', arrayData);
     this.setState({ id: 0 });
   }
 
@@ -133,23 +333,146 @@ class DialogMenuRoles extends Component {
   handleChangeCheckbox = (checked, index) => {
     let copyStateMenu = [...this.state.stateMenu];
     copyStateMenu[index] = checked;
+
     this.setState({ stateMenu: copyStateMenu })
   }
 
+  handleChangeCheckboxRead = (checked, index) => {
+    let copyStateRead = [...this.state.stateRead];
+    copyStateRead[index] = checked;
+
+    this.setState({ stateRead: copyStateRead })
+  }
+
+  handleChangeCheckboxCreate = (checked, index) => {
+    let copyStateCreate = [...this.state.stateCreate];
+    copyStateCreate[index] = checked;
+
+    this.setState({ stateCreate: copyStateCreate })
+  }
+
+  handleChangeCheckboxEdit = (checked, index) => {
+    let copyStateEdit = [...this.state.stateUpdate];
+    copyStateEdit[index] = checked;
+
+    this.setState({ stateUpdate: copyStateEdit })
+  }
+
+  handleChangeCheckboxDelete = (checked, index) => {
+    let copyStateDelete = [...this.state.stateDelete];
+    copyStateDelete[index] = checked;
+
+    this.setState({ stateDelete: copyStateDelete })
+  }
+
+  handleChangeCheckboxReadAll = (checked) => {
+    let copyStateRead = [...this.state.stateRead];
+    copyStateRead.map((val, index) => {
+      copyStateRead[index] = checked;
+    })
+    this.setState({ stateRead: copyStateRead })
+  }
+
+  handleChangeCheckboxCreateAll = (checked, index) => {
+    let copyStateCreate = [...this.state.stateCreate];
+    copyStateCreate.map((val, index) => {
+      copyStateCreate[index] = checked;
+    })
+    this.setState({ stateCreate: copyStateCreate })
+  }
+
+  handleChangeCheckboxEditAll = (checked, index) => {
+    let copyStateEdit = [...this.state.stateUpdate];
+    copyStateEdit.map((val, index) => {
+      copyStateEdit[index] = checked;
+    })
+    this.setState({ stateUpdate: copyStateEdit })
+  }
+
+  handleChangeCheckboxDeleteAll = (checked, index) => {
+    let copyStateDelete = [...this.state.stateDelete];
+    copyStateDelete.map((val, index) => {
+      copyStateDelete[index] = checked;
+    })
+    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, stateMenu } = this.state
+    const { menu, stateRead, stateCreate, stateUpdate, stateDelete } = this.state;
+
+    const getChildren = (parentId) => {
+      return menu.filter(item => item.parent_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 fontWeight = menuItem.parent_id === null ? 'bold' : 'normal';
+
         return (
-      menu.map((val, index) => {
+          <React.Fragment key={index}>
+            <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>
+            </tr>
+            {renderMenu(menuItem.id, depth + 1)} {/* Recursively render children */}
+          </React.Fragment>
+        );
+      });
+    };
+
+    // Render top-level menu items (parents)
     return (
-          <tr key={index}>
+      <React.Fragment>
-            <td>{val.name}</td>
+        {this.renderAll()} {/* Render the "All" row */}
-            <td><input type="checkbox" onClick={(e) => this.handleChangeCheckbox(e.target.checked, index)} defaultChecked={stateMenu[index]} /></td>
+        {renderMenu(null)} {/* Render the menu items */}
+      </React.Fragment>
+    );
+  };
+
+
+  renderAll = () => {
+
+    return (
+      <tr>
+        <td>All</td>
+        <td><input type="checkbox" onClick={(e) => this.handleChangeCheckboxReadAll(e.target.checked)} defaultChecked={this.state.stateReadAll} /></td>
+        <td><input type="checkbox" onClick={(e) => this.handleChangeCheckboxCreateAll(e.target.checked)} defaultChecked={this.state.stateCreateAll} /></td>
+        <td><input type="checkbox" onClick={(e) => this.handleChangeCheckboxEditAll(e.target.checked)} defaultChecked={this.state.stateUpdateAll} /></td>
+        <td><input type="checkbox" onClick={(e) => this.handleChangeCheckboxDeleteAll(e.target.checked)} defaultChecked={this.state.stateDeleteAll} /></td>
       </tr>
     )
-      })
-    )
   }
 
+
+
+
   checkArray = (val) => {
     return val === false;
   }
@@ -157,6 +480,7 @@ class DialogMenuRoles extends Component {
   handleAllChecked = (checked) => {
     this.setState({ allChecked: !this.state.allChecked });
     if (checked === true) {
+
       let check = this.state.stateMenu.some(this.checkArray);
 
       if (check) {
@@ -172,6 +496,7 @@ class DialogMenuRoles extends Component {
 
 
     } else {
+
       const stateMenu = [];
       this.state.menu.map((val) => {
         stateMenu.push(false);
@@ -185,8 +510,8 @@ class DialogMenuRoles extends Component {
 
   render() {
     return (
-      <Modal scrollable={true} isOpen={this.props.openDialog} toggle={this.props.toggleDialog}>
+      <Modal size="xl" scrollable={true} isOpen={this.props.openDialog} toggle={this.props.toggleDialog}>
-        <ModalHeader toggle={this.props.closeDialog}>{this.props.t('menuRoles')}</ModalHeader>
+        <ModalHeader toggle={this.props.closeDialog}>Roles Menu</ModalHeader>
         <ModalBody>
           <Form>
             <Table>
@@ -194,26 +519,31 @@ class DialogMenuRoles extends Component {
                 <tr>
                   <th>Menu</th>
                   <th>
-                    T/F
+                    View
+                  </th>
+                  <th>
+                    Create
                   </th>
+                  <th>
+                    Edite
+                  </th>
+                  <th>
+                    Delete
+                  </th>
+
                 </tr>
               </thead>
               <tbody>
-                <tr>
-                  <td>All</td>
-                  <td><input type="checkbox" onChange={(e) => this.handleAllChecked(e.target.checked)} checked={this.state.allChecked} /></td>
-                </tr>
                 {this.renderForm()}
               </tbody>
             </Table>
           </Form>
         </ModalBody>
         <ModalFooter>
-          <Button color="primary" onClick={() => this.handleSave()}>{this.props.t('save')}</Button>{' '}
+          <Button id="roleSaveButton" className="roleSaveButton" name="roleSaveButton" color="primary" onClick={() => this.handleSave()}>Save</Button>{' '}
-          <Button color="secondary" onClick={() => this.handleCancel()}>{this.props.t('cancel')}</Button>
+          <Button id="roleCancelButton" className="roleCancelButton" name="roleCancelButton" color="secondary" onClick={() => this.handleCancel()}>Cancel</Button>
         </ModalFooter>
       </Modal>
     )
   }
 }
-export default withTranslation()(DialogMenuRoles);

src/views/Master/MasterRoles/index.js

@@ -307,7 +307,7 @@ class index extends Component {
 			"columns": [
 				{ "name": "role_id", "logic_operator": "=", "value": `${id}`, "operator": "AND" }
 			],
-			"joins": [],
+			"joins": [{ "name": "m_menu", "column_join": "menu_id", "column_results": ["parent_id", "name"] }],
 			"orders": { "columns": ["id"], "ascending": false }
 		}
 
@@ -486,6 +486,7 @@ class index extends Component {
 					menuRoles={this.state.menuRoles}
 					company_id={this.state.company_id}
 					role_name={this.state.role_name}
+					role_id={this.state.role_id}
 					token={this.state.token}
 				/>
 				<Card>