From 036fb02ed156d4cbcbb55803caa7c4b593de26a6 Mon Sep 17 00:00:00 2001 From: wahyu Date: Mon, 25 Mar 2024 14:43:23 +0700 Subject: [PATCH] update menu roles --- .../Master/MasterRoles/DialogMenuRoles.js | 83 +++++++++++++------ 1 file changed, 56 insertions(+), 27 deletions(-) diff --git a/src/views/Master/MasterRoles/DialogMenuRoles.js b/src/views/Master/MasterRoles/DialogMenuRoles.js index 84598da..2ed266b 100644 --- a/src/views/Master/MasterRoles/DialogMenuRoles.js +++ b/src/views/Master/MasterRoles/DialogMenuRoles.js @@ -22,6 +22,7 @@ export default class DialogMenuRoles extends Component { openDialog: false, isParentClick: false, menu: [], + menuIds: [], stateMenu: [], stateRead: [], stateCreate: [], @@ -42,7 +43,7 @@ export default class DialogMenuRoles extends Component { this.getAllMenu(); } - async componentDidUpdate() { + async componentDidUpdate(prevProps, prevState) { if (this.state.isParentClick === true) { const { idRoles } = this.props this.setStateMenu(true); @@ -51,6 +52,9 @@ export default class DialogMenuRoles extends Component { this.setStateCreate(true); this.setStateDelete(true); this.setState({ isParentClick: false, id: idRoles }); + // if (prevState.menu == this.state.menu) { + // await this.setStateReadAfterRender(); + // } } } @@ -112,6 +116,14 @@ export default class DialogMenuRoles extends Component { }) } + // setStateReadAfterRender = async () => { + // await new Promise((resolve) => { + // this.setState({}, resolve); + // }); + // // Now you have access to the rendered elements and can update state based on it + // this.setStateRead(true); + // } + setStateCreate = edit => { const stateCreate = []; this.state.menu.map((val) => { @@ -177,9 +189,9 @@ export default class DialogMenuRoles extends Component { this.props.menuRoles.map((val) => { let index = this.getIndexDataMenu(val.menu_id); if (val.read === true) { - copyStateRead[index] = true; + copyStateRead[val.menu_id] = true; } else { - copyStateRead[index] = false; + copyStateRead[val.menu_id] = false; } }) this.setState({ stateRead: [] }, () => { @@ -197,9 +209,9 @@ export default class DialogMenuRoles extends Component { this.props.menuRoles.map((val) => { let index = this.getIndexDataMenu(val.menu_id); if (val.create === true) { - copyStateCreate[index] = true; + copyStateCreate[val.menu_id] = true; } else { - copyStateCreate[index] = false; + copyStateCreate[val.menu_id] = false; } }) this.setState({ stateCreate: [] }, () => { @@ -217,9 +229,9 @@ export default class DialogMenuRoles extends Component { this.props.menuRoles.map((val) => { let index = this.getIndexDataMenu(val.menu_id); if (val.update === true) { - copyStateUpdate[index] = true; + copyStateUpdate[val.menu_id] = true; } else { - copyStateUpdate[index] = false; + copyStateUpdate[val.menu_id] = false; } }) this.setState({ stateUpdate: [] }, () => { @@ -237,9 +249,9 @@ export default class DialogMenuRoles extends Component { this.props.menuRoles.map((val) => { let index = this.getIndexDataMenu(val.menu_id); if (val.delete === true) { - copyStateDelete[index] = true; + copyStateDelete[val.menu_id] = true; } else { - copyStateDelete[index] = false; + copyStateDelete[val.menu_id] = false; } }) this.setState({ stateDelete: [] }, () => { @@ -285,17 +297,18 @@ export default class DialogMenuRoles extends Component { stateRead, stateUpdate, menu, + menuIds, id } = this.state const arrayData = []; menu.map((val, index) => { let data = { roles_id: id, - menu_id: val.menu_id, - read: stateRead[index], - create: stateCreate[index], - update: stateUpdate[index], - delete: stateDelete[index], + menu_id: menuIds[val.menu_id], + read: stateRead[val.menu_id], + create: stateCreate[val.menu_id], + update: stateUpdate[val.menu_id], + delete: stateDelete[val.menu_id], checked: stateMenu[index], } arrayData.push(data); @@ -316,7 +329,7 @@ export default class DialogMenuRoles extends Component { handleChangeCheckboxRead = (checked, index, menuItem = null, menuIdxList = []) => { let copyStateRead = [...this.state.stateRead]; - copyStateRead[index] = checked; + let copyMenuIds = [...this.state.menuIds]; let menu = this.state.menu; let checkMenuParent = menu.map((state, index) => { if (state.parent_menu_id === menuItem.menu_id) { @@ -329,19 +342,23 @@ export default class DialogMenuRoles extends Component { menuIdxList.forEach((menu, index) => { checkMenuParent.forEach((check, idx) => { if (check === menu) { - stateReadIdx.push(index); + copyMenuIds[menu] = menu + stateReadIdx.push(menu); } }); }); stateReadIdx.map((stateRead) => { copyStateRead[stateRead] = checked }) + copyStateRead[menuItem.menu_id] = checked + copyMenuIds[menuItem.menu_id] = menuItem.menu_id this.setState({ stateRead: copyStateRead }) + this.setState({ menuIds: copyMenuIds }) } handleChangeCheckboxCreate = (checked, index, menuItem = null, menuIdxList = []) => { let copyStateCreate = [...this.state.stateCreate]; - copyStateCreate[index] = checked; + let copyMenuIds = [...this.state.menuIds]; let menu = this.state.menu; let checkMenuParent = menu.map((state, index) => { if (state.parent_menu_id === menuItem.menu_id) { @@ -354,19 +371,23 @@ export default class DialogMenuRoles extends Component { menuIdxList.forEach((menu, index) => { checkMenuParent.forEach((check, idx) => { if (check === menu) { - stateCreateIdx.push(index); + copyMenuIds[menu] = menu + stateCreateIdx.push(menu); } }); }); stateCreateIdx.map((stateCreate) => { copyStateCreate[stateCreate] = checked }) + copyStateCreate[menuItem.menu_id] = checked + copyMenuIds[menuItem.menu_id] = menuItem.menu_id this.setState({ stateCreate: copyStateCreate }) + this.setState({ menuIds: copyMenuIds }) } handleChangeCheckboxEdit = (checked, index, menuItem = null, menuIdxList = []) => { let copyStateEdit = [...this.state.stateUpdate]; - copyStateEdit[index] = checked; + let copyMenuIds = [...this.state.menuIds]; let menu = this.state.menu; let checkMenuParent = menu.map((state, index) => { if (state.parent_menu_id === menuItem.menu_id) { @@ -379,19 +400,23 @@ export default class DialogMenuRoles extends Component { menuIdxList.forEach((menu, index) => { checkMenuParent.forEach((check, idx) => { if (check === menu) { - stateEditIdx.push(index); + copyMenuIds[menu] = menu + stateEditIdx.push(menu); } }); }); stateEditIdx.map((stateEdit) => { copyStateEdit[stateEdit] = checked }) + copyStateEdit[menuItem.menu_id] = checked + copyMenuIds[menuItem.menu_id] = menuItem.menu_id this.setState({ stateUpdate: copyStateEdit }) + this.setState({ menuIds: copyMenuIds }) } handleChangeCheckboxDelete = (checked, index, menuItem = null, menuIdxList = []) => { let copyStateDelete = [...this.state.stateDelete]; - copyStateDelete[index] = checked; + let copyMenuIds = [...this.state.menuIds]; let menu = this.state.menu; let checkMenuParent = menu.map((state, index) => { if (state.parent_menu_id === menuItem.menu_id) { @@ -404,14 +429,18 @@ export default class DialogMenuRoles extends Component { menuIdxList.forEach((menu, index) => { checkMenuParent.forEach((check, idx) => { if (check === menu) { - stateDeleteIdx.push(index); + copyMenuIds[menu] = menu + stateDeleteIdx.push(menu); } }); }); stateDeleteIdx.map((stateDelete) => { copyStateDelete[stateDelete] = checked }) + copyStateDelete[menuItem.menu_id] = checked + copyMenuIds[menuItem.menu_id] = menuItem.menu_id this.setState({ stateDelete: copyStateDelete }) + this.setState({ menuIds: copyMenuIds }) } handleChangeCheckboxReadAll = (checked) => { @@ -461,13 +490,13 @@ export default class DialogMenuRoles extends Component { menuIdx++ const paddingLeft = depth * 30; return ( - + {menuItem.join_second_name} - this.handleChangeCheckboxRead(e.target.checked, currentIndex, menuItem, menuIdxList)} defaultChecked={stateRead[currentIndex]} /> - this.handleChangeCheckboxCreate(e.target.checked, currentIndex, menuItem, menuIdxList)} defaultChecked={stateCreate[currentIndex]} /> - this.handleChangeCheckboxEdit(e.target.checked, currentIndex, menuItem, menuIdxList)} defaultChecked={stateUpdate[currentIndex]} /> - this.handleChangeCheckboxDelete(e.target.checked, currentIndex, menuItem, menuIdxList)} defaultChecked={stateDelete[currentIndex]} /> + this.handleChangeCheckboxRead(e.target.checked, currentIndex, menuItem, menuIdxList)} defaultChecked={stateRead[menuItem.menu_id]} /> + this.handleChangeCheckboxCreate(e.target.checked, currentIndex, menuItem, menuIdxList)} defaultChecked={stateCreate[menuItem.menu_id]} /> + this.handleChangeCheckboxEdit(e.target.checked, currentIndex, menuItem, menuIdxList)} defaultChecked={stateUpdate[menuItem.menu_id]} /> + this.handleChangeCheckboxDelete(e.target.checked, currentIndex, menuItem, menuIdxList)} defaultChecked={stateDelete[menuItem.menu_id]} /> {renderMenu(menuItem.menu_id, depth + 1)}