Browse Source

Merge pull request 'update menu roles' (#75) from dev-wahyu into staging

Reviewed-on: ibnu/generic-ospro-frontend#75
pull/1/head
farhantock 9 months ago
parent
commit
5759fd19f0
  1. 83
      src/views/Master/MasterRoles/DialogMenuRoles.js

83
src/views/Master/MasterRoles/DialogMenuRoles.js

@ -22,6 +22,7 @@ export default class DialogMenuRoles extends Component {
openDialog: false, openDialog: false,
isParentClick: false, isParentClick: false,
menu: [], menu: [],
menuIds: [],
stateMenu: [], stateMenu: [],
stateRead: [], stateRead: [],
stateCreate: [], stateCreate: [],
@ -42,7 +43,7 @@ export default class DialogMenuRoles extends Component {
this.getAllMenu(); this.getAllMenu();
} }
async componentDidUpdate() { async componentDidUpdate(prevProps, prevState) {
if (this.state.isParentClick === true) { if (this.state.isParentClick === true) {
const { idRoles } = this.props const { idRoles } = this.props
this.setStateMenu(true); this.setStateMenu(true);
@ -51,6 +52,9 @@ export default class DialogMenuRoles extends Component {
this.setStateCreate(true); this.setStateCreate(true);
this.setStateDelete(true); this.setStateDelete(true);
this.setState({ isParentClick: false, id: idRoles }); 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 => { setStateCreate = edit => {
const stateCreate = []; const stateCreate = [];
this.state.menu.map((val) => { this.state.menu.map((val) => {
@ -177,9 +189,9 @@ export default class DialogMenuRoles extends Component {
this.props.menuRoles.map((val) => { this.props.menuRoles.map((val) => {
let index = this.getIndexDataMenu(val.menu_id); let index = this.getIndexDataMenu(val.menu_id);
if (val.read === true) { if (val.read === true) {
copyStateRead[index] = true; copyStateRead[val.menu_id] = true;
} else { } else {
copyStateRead[index] = false; copyStateRead[val.menu_id] = false;
} }
}) })
this.setState({ stateRead: [] }, () => { this.setState({ stateRead: [] }, () => {
@ -197,9 +209,9 @@ export default class DialogMenuRoles extends Component {
this.props.menuRoles.map((val) => { this.props.menuRoles.map((val) => {
let index = this.getIndexDataMenu(val.menu_id); let index = this.getIndexDataMenu(val.menu_id);
if (val.create === true) { if (val.create === true) {
copyStateCreate[index] = true; copyStateCreate[val.menu_id] = true;
} else { } else {
copyStateCreate[index] = false; copyStateCreate[val.menu_id] = false;
} }
}) })
this.setState({ stateCreate: [] }, () => { this.setState({ stateCreate: [] }, () => {
@ -217,9 +229,9 @@ export default class DialogMenuRoles extends Component {
this.props.menuRoles.map((val) => { this.props.menuRoles.map((val) => {
let index = this.getIndexDataMenu(val.menu_id); let index = this.getIndexDataMenu(val.menu_id);
if (val.update === true) { if (val.update === true) {
copyStateUpdate[index] = true; copyStateUpdate[val.menu_id] = true;
} else { } else {
copyStateUpdate[index] = false; copyStateUpdate[val.menu_id] = false;
} }
}) })
this.setState({ stateUpdate: [] }, () => { this.setState({ stateUpdate: [] }, () => {
@ -237,9 +249,9 @@ export default class DialogMenuRoles extends Component {
this.props.menuRoles.map((val) => { this.props.menuRoles.map((val) => {
let index = this.getIndexDataMenu(val.menu_id); let index = this.getIndexDataMenu(val.menu_id);
if (val.delete === true) { if (val.delete === true) {
copyStateDelete[index] = true; copyStateDelete[val.menu_id] = true;
} else { } else {
copyStateDelete[index] = false; copyStateDelete[val.menu_id] = false;
} }
}) })
this.setState({ stateDelete: [] }, () => { this.setState({ stateDelete: [] }, () => {
@ -285,17 +297,18 @@ export default class DialogMenuRoles extends Component {
stateRead, stateRead,
stateUpdate, stateUpdate,
menu, menu,
menuIds,
id id
} = this.state } = this.state
const arrayData = []; const arrayData = [];
menu.map((val, index) => { menu.map((val, index) => {
let data = { let data = {
roles_id: id, roles_id: id,
menu_id: val.menu_id, menu_id: menuIds[val.menu_id],
read: stateRead[index], read: stateRead[val.menu_id],
create: stateCreate[index], create: stateCreate[val.menu_id],
update: stateUpdate[index], update: stateUpdate[val.menu_id],
delete: stateDelete[index], delete: stateDelete[val.menu_id],
checked: stateMenu[index], checked: stateMenu[index],
} }
arrayData.push(data); arrayData.push(data);
@ -316,7 +329,7 @@ export default class DialogMenuRoles extends Component {
handleChangeCheckboxRead = (checked, index, menuItem = null, menuIdxList = []) => { handleChangeCheckboxRead = (checked, index, menuItem = null, menuIdxList = []) => {
let copyStateRead = [...this.state.stateRead]; let copyStateRead = [...this.state.stateRead];
copyStateRead[index] = checked; let copyMenuIds = [...this.state.menuIds];
let menu = this.state.menu; let menu = this.state.menu;
let checkMenuParent = menu.map((state, index) => { let checkMenuParent = menu.map((state, index) => {
if (state.parent_menu_id === menuItem.menu_id) { if (state.parent_menu_id === menuItem.menu_id) {
@ -329,19 +342,23 @@ export default class DialogMenuRoles extends Component {
menuIdxList.forEach((menu, index) => { menuIdxList.forEach((menu, index) => {
checkMenuParent.forEach((check, idx) => { checkMenuParent.forEach((check, idx) => {
if (check === menu) { if (check === menu) {
stateReadIdx.push(index); copyMenuIds[menu] = menu
stateReadIdx.push(menu);
} }
}); });
}); });
stateReadIdx.map((stateRead) => { stateReadIdx.map((stateRead) => {
copyStateRead[stateRead] = checked copyStateRead[stateRead] = checked
}) })
copyStateRead[menuItem.menu_id] = checked
copyMenuIds[menuItem.menu_id] = menuItem.menu_id
this.setState({ stateRead: copyStateRead }) this.setState({ stateRead: copyStateRead })
this.setState({ menuIds: copyMenuIds })
} }
handleChangeCheckboxCreate = (checked, index, menuItem = null, menuIdxList = []) => { handleChangeCheckboxCreate = (checked, index, menuItem = null, menuIdxList = []) => {
let copyStateCreate = [...this.state.stateCreate]; let copyStateCreate = [...this.state.stateCreate];
copyStateCreate[index] = checked; let copyMenuIds = [...this.state.menuIds];
let menu = this.state.menu; let menu = this.state.menu;
let checkMenuParent = menu.map((state, index) => { let checkMenuParent = menu.map((state, index) => {
if (state.parent_menu_id === menuItem.menu_id) { if (state.parent_menu_id === menuItem.menu_id) {
@ -354,19 +371,23 @@ export default class DialogMenuRoles extends Component {
menuIdxList.forEach((menu, index) => { menuIdxList.forEach((menu, index) => {
checkMenuParent.forEach((check, idx) => { checkMenuParent.forEach((check, idx) => {
if (check === menu) { if (check === menu) {
stateCreateIdx.push(index); copyMenuIds[menu] = menu
stateCreateIdx.push(menu);
} }
}); });
}); });
stateCreateIdx.map((stateCreate) => { stateCreateIdx.map((stateCreate) => {
copyStateCreate[stateCreate] = checked copyStateCreate[stateCreate] = checked
}) })
copyStateCreate[menuItem.menu_id] = checked
copyMenuIds[menuItem.menu_id] = menuItem.menu_id
this.setState({ stateCreate: copyStateCreate }) this.setState({ stateCreate: copyStateCreate })
this.setState({ menuIds: copyMenuIds })
} }
handleChangeCheckboxEdit = (checked, index, menuItem = null, menuIdxList = []) => { handleChangeCheckboxEdit = (checked, index, menuItem = null, menuIdxList = []) => {
let copyStateEdit = [...this.state.stateUpdate]; let copyStateEdit = [...this.state.stateUpdate];
copyStateEdit[index] = checked; let copyMenuIds = [...this.state.menuIds];
let menu = this.state.menu; let menu = this.state.menu;
let checkMenuParent = menu.map((state, index) => { let checkMenuParent = menu.map((state, index) => {
if (state.parent_menu_id === menuItem.menu_id) { if (state.parent_menu_id === menuItem.menu_id) {
@ -379,19 +400,23 @@ export default class DialogMenuRoles extends Component {
menuIdxList.forEach((menu, index) => { menuIdxList.forEach((menu, index) => {
checkMenuParent.forEach((check, idx) => { checkMenuParent.forEach((check, idx) => {
if (check === menu) { if (check === menu) {
stateEditIdx.push(index); copyMenuIds[menu] = menu
stateEditIdx.push(menu);
} }
}); });
}); });
stateEditIdx.map((stateEdit) => { stateEditIdx.map((stateEdit) => {
copyStateEdit[stateEdit] = checked copyStateEdit[stateEdit] = checked
}) })
copyStateEdit[menuItem.menu_id] = checked
copyMenuIds[menuItem.menu_id] = menuItem.menu_id
this.setState({ stateUpdate: copyStateEdit }) this.setState({ stateUpdate: copyStateEdit })
this.setState({ menuIds: copyMenuIds })
} }
handleChangeCheckboxDelete = (checked, index, menuItem = null, menuIdxList = []) => { handleChangeCheckboxDelete = (checked, index, menuItem = null, menuIdxList = []) => {
let copyStateDelete = [...this.state.stateDelete]; let copyStateDelete = [...this.state.stateDelete];
copyStateDelete[index] = checked; let copyMenuIds = [...this.state.menuIds];
let menu = this.state.menu; let menu = this.state.menu;
let checkMenuParent = menu.map((state, index) => { let checkMenuParent = menu.map((state, index) => {
if (state.parent_menu_id === menuItem.menu_id) { if (state.parent_menu_id === menuItem.menu_id) {
@ -404,14 +429,18 @@ export default class DialogMenuRoles extends Component {
menuIdxList.forEach((menu, index) => { menuIdxList.forEach((menu, index) => {
checkMenuParent.forEach((check, idx) => { checkMenuParent.forEach((check, idx) => {
if (check === menu) { if (check === menu) {
stateDeleteIdx.push(index); copyMenuIds[menu] = menu
stateDeleteIdx.push(menu);
} }
}); });
}); });
stateDeleteIdx.map((stateDelete) => { stateDeleteIdx.map((stateDelete) => {
copyStateDelete[stateDelete] = checked copyStateDelete[stateDelete] = checked
}) })
copyStateDelete[menuItem.menu_id] = checked
copyMenuIds[menuItem.menu_id] = menuItem.menu_id
this.setState({ stateDelete: copyStateDelete }) this.setState({ stateDelete: copyStateDelete })
this.setState({ menuIds: copyMenuIds })
} }
handleChangeCheckboxReadAll = (checked) => { handleChangeCheckboxReadAll = (checked) => {
@ -461,13 +490,13 @@ export default class DialogMenuRoles extends Component {
menuIdx++ menuIdx++
const paddingLeft = depth * 30; const paddingLeft = depth * 30;
return ( return (
<React.Fragment key={menuIdx - 1}> <React.Fragment key={menuItem.menu_id}>
<tr > <tr >
<td style={{ paddingLeft: paddingLeft }}>{menuItem.join_second_name}</td> <td style={{ paddingLeft: paddingLeft }}>{menuItem.join_second_name}</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.handleChangeCheckboxRead(e.target.checked, currentIndex, menuItem, menuIdxList)} defaultChecked={stateRead[menuItem.menu_id]} /></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.handleChangeCheckboxCreate(e.target.checked, currentIndex, menuItem, menuIdxList)} defaultChecked={stateCreate[menuItem.menu_id]} /></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.handleChangeCheckboxEdit(e.target.checked, currentIndex, menuItem, menuIdxList)} defaultChecked={stateUpdate[menuItem.menu_id]} /></td>
<td><input type="checkbox" onClick={(e) => this.handleChangeCheckboxDelete(e.target.checked, currentIndex, menuItem, menuIdxList)} defaultChecked={stateDelete[currentIndex]} /></td> <td><input type="checkbox" onClick={(e) => this.handleChangeCheckboxDelete(e.target.checked, currentIndex, menuItem, menuIdxList)} defaultChecked={stateDelete[menuItem.menu_id]} /></td>
</tr> </tr>
{renderMenu(menuItem.menu_id, depth + 1)} {renderMenu(menuItem.menu_id, depth + 1)}
</React.Fragment> </React.Fragment>

Loading…
Cancel
Save