|
|
|
@ -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> |
|
|
|
|