|
|
@ -3,11 +3,8 @@ import { Modal, ModalHeader, ModalBody, ModalFooter, Row, Col, Table } from 'rea |
|
|
|
import { Button, Form, FormGroup, Label, Input } from 'reactstrap'; |
|
|
|
import { Button, Form, FormGroup, Label, Input } from 'reactstrap'; |
|
|
|
import 'antd/dist/antd.css'; |
|
|
|
import 'antd/dist/antd.css'; |
|
|
|
import axios from 'axios'; |
|
|
|
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'); |
|
|
|
const token = window.localStorage.getItem('token'); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const config = { |
|
|
|
const config = { |
|
|
|
headers: |
|
|
|
headers: |
|
|
|
{ |
|
|
|
{ |
|
|
@ -15,7 +12,6 @@ const config = { |
|
|
|
"Content-type": `application/json` |
|
|
|
"Content-type": `application/json` |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
export default class DialogMenuRoles extends Component { |
|
|
|
export default class DialogMenuRoles extends Component { |
|
|
|
constructor(props) { |
|
|
|
constructor(props) { |
|
|
|
super(props) |
|
|
|
super(props) |
|
|
@ -36,13 +32,13 @@ export default class DialogMenuRoles extends Component { |
|
|
|
stateUpdateAll: false, |
|
|
|
stateUpdateAll: false, |
|
|
|
stateDeleteAll: false, |
|
|
|
stateDeleteAll: false, |
|
|
|
allChecked: true, |
|
|
|
allChecked: true, |
|
|
|
|
|
|
|
company_id: props.company_id || null, |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
async componentDidMount() { |
|
|
|
async componentDidMount() { |
|
|
|
this.props.showDialog(this.showDialog); |
|
|
|
this.props.showDialog(this.showDialog); |
|
|
|
this.getAllMenu(); |
|
|
|
this.getAllMenu(); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
async componentDidUpdate() { |
|
|
|
async componentDidUpdate() { |
|
|
|
if (this.state.isParentClick === true) { |
|
|
|
if (this.state.isParentClick === true) { |
|
|
|
const { idRoles } = this.props |
|
|
|
const { idRoles } = this.props |
|
|
@ -54,43 +50,32 @@ export default class DialogMenuRoles extends Component { |
|
|
|
this.setState({ isParentClick: false, id: idRoles }); |
|
|
|
this.setState({ isParentClick: false, id: idRoles }); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
showDialog = () => { |
|
|
|
showDialog = () => { |
|
|
|
this.setState({ isParentClick: true }); |
|
|
|
this.setState({ isParentClick: true }); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
getAllMenu = async () => { |
|
|
|
getAllMenu = async () => { |
|
|
|
const payload = { |
|
|
|
const payload = { |
|
|
|
"paging": { "start": 0, "length": -1 }, |
|
|
|
"paging": { "start": 0, "length": -1 }, |
|
|
|
"columns": [ |
|
|
|
"columns": [ |
|
|
|
{ "name": "name", "logic_operator": "ilike", "value": "", "operator": "AND" } |
|
|
|
{ "name": "company_id", "logic_operator": "=", "value": this.state.company_id, "operator": "AND" } |
|
|
|
], |
|
|
|
], |
|
|
|
"joins": [ |
|
|
|
"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 } |
|
|
|
"orders": { "columns": ["id"], "ascending": false } |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const result = await axios |
|
|
|
const result = await axios |
|
|
|
.post(MENU_SEARCH, payload, config) |
|
|
|
.post(MENU_COMPANY_SEARCH, payload, config) |
|
|
|
.then(res => res) |
|
|
|
.then(res => res) |
|
|
|
.catch((error) => error.response); |
|
|
|
.catch((error) => error.response); |
|
|
|
|
|
|
|
|
|
|
|
// console.log('78', result);
|
|
|
|
|
|
|
|
if (result && result.data && result.data.code == 200) { |
|
|
|
if (result && result.data && result.data.code == 200) { |
|
|
|
this.setState({ menu: result.data.data }, () => { |
|
|
|
this.setState({ menu: result.data.data }, () => { |
|
|
|
this.setStateMenu(false); |
|
|
|
this.setStateMenu(false); |
|
|
|
}); |
|
|
|
}); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setStateMenu = edit => { |
|
|
|
setStateMenu = edit => { |
|
|
|
const stateMenu = []; |
|
|
|
const stateMenu = []; |
|
|
|
this.state.menu.map((val) => { |
|
|
|
this.state.menu.map((val) => { |
|
|
@ -104,7 +89,6 @@ export default class DialogMenuRoles extends Component { |
|
|
|
}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
setStateRead = edit => { |
|
|
|
setStateRead = edit => { |
|
|
|
const stateRead = []; |
|
|
|
const stateRead = []; |
|
|
|
this.state.menu.map((val) => { |
|
|
|
this.state.menu.map((val) => { |
|
|
@ -118,7 +102,6 @@ export default class DialogMenuRoles extends Component { |
|
|
|
}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
setStateCreate = edit => { |
|
|
|
setStateCreate = edit => { |
|
|
|
const stateCreate = []; |
|
|
|
const stateCreate = []; |
|
|
|
this.state.menu.map((val) => { |
|
|
|
this.state.menu.map((val) => { |
|
|
@ -132,7 +115,6 @@ export default class DialogMenuRoles extends Component { |
|
|
|
}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
setStateUpdate = edit => { |
|
|
|
setStateUpdate = edit => { |
|
|
|
const stateUpdate = []; |
|
|
|
const stateUpdate = []; |
|
|
|
this.state.menu.map((val) => { |
|
|
|
this.state.menu.map((val) => { |
|
|
@ -146,7 +128,6 @@ export default class DialogMenuRoles extends Component { |
|
|
|
}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
setStateDelete = edit => { |
|
|
|
setStateDelete = edit => { |
|
|
|
const stateDelete = []; |
|
|
|
const stateDelete = []; |
|
|
|
this.state.menu.map((val) => { |
|
|
|
this.state.menu.map((val) => { |
|
|
@ -160,13 +141,10 @@ export default class DialogMenuRoles extends Component { |
|
|
|
}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
checkMenuRoles = () => { |
|
|
|
checkMenuRoles = () => { |
|
|
|
let copyStateMenu = [...this.state.stateMenu]; |
|
|
|
let copyStateMenu = [...this.state.stateMenu]; |
|
|
|
|
|
|
|
|
|
|
|
this.props.menuRoles.map((val, indexMenu) => { |
|
|
|
this.props.menuRoles.map((val, indexMenu) => { |
|
|
|
let index = this.getIndexDataMenu(val.menu_id); |
|
|
|
let index = this.getIndexDataMenu(val.menu_id); |
|
|
|
|
|
|
|
|
|
|
|
if (index >= 0 || val.read === true || val.create === true || val.update === true || val.delete === true) { |
|
|
|
if (index >= 0 || val.read === true || val.create === true || val.update === true || val.delete === true) { |
|
|
|
copyStateMenu[index] = true; |
|
|
|
copyStateMenu[index] = true; |
|
|
|
} |
|
|
|
} |
|
|
@ -180,7 +158,6 @@ export default class DialogMenuRoles extends Component { |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
checkReadRoles = () => { |
|
|
|
checkReadRoles = () => { |
|
|
|
let copyStateRead = [...this.state.stateRead]; |
|
|
|
let copyStateRead = [...this.state.stateRead]; |
|
|
|
this.props.menuRoles.map((val) => { |
|
|
|
this.props.menuRoles.map((val) => { |
|
|
@ -191,7 +168,6 @@ export default class DialogMenuRoles extends Component { |
|
|
|
copyStateRead[index] = false; |
|
|
|
copyStateRead[index] = false; |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
this.setState({ stateRead: [] }, () => { |
|
|
|
this.setState({ stateRead: [] }, () => { |
|
|
|
let check = copyStateRead.some(this.checkArray); |
|
|
|
let check = copyStateRead.some(this.checkArray); |
|
|
|
if (check === false) { |
|
|
|
if (check === false) { |
|
|
@ -201,10 +177,8 @@ export default class DialogMenuRoles extends Component { |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
checkCreateRoles = () => { |
|
|
|
checkCreateRoles = () => { |
|
|
|
let copyStateCreate = [...this.state.stateCreate]; |
|
|
|
let copyStateCreate = [...this.state.stateCreate]; |
|
|
|
|
|
|
|
|
|
|
|
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) { |
|
|
@ -213,7 +187,6 @@ export default class DialogMenuRoles extends Component { |
|
|
|
copyStateCreate[index] = false; |
|
|
|
copyStateCreate[index] = false; |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
this.setState({ stateCreate: [] }, () => { |
|
|
|
this.setState({ stateCreate: [] }, () => { |
|
|
|
let check = copyStateCreate.some(this.checkArray); |
|
|
|
let check = copyStateCreate.some(this.checkArray); |
|
|
|
if (check === false) { |
|
|
|
if (check === false) { |
|
|
@ -223,10 +196,8 @@ export default class DialogMenuRoles extends Component { |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
checkUpdateRoles = () => { |
|
|
|
checkUpdateRoles = () => { |
|
|
|
let copyStateUpdate = [...this.state.stateUpdate]; |
|
|
|
let copyStateUpdate = [...this.state.stateUpdate]; |
|
|
|
|
|
|
|
|
|
|
|
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) { |
|
|
@ -235,7 +206,6 @@ export default class DialogMenuRoles extends Component { |
|
|
|
copyStateUpdate[index] = false; |
|
|
|
copyStateUpdate[index] = false; |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
this.setState({ stateUpdate: [] }, () => { |
|
|
|
this.setState({ stateUpdate: [] }, () => { |
|
|
|
let check = copyStateUpdate.some(this.checkArray); |
|
|
|
let check = copyStateUpdate.some(this.checkArray); |
|
|
|
if (check === false) { |
|
|
|
if (check === false) { |
|
|
@ -245,10 +215,8 @@ export default class DialogMenuRoles extends Component { |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
checkDeleteRoles = () => { |
|
|
|
checkDeleteRoles = () => { |
|
|
|
let copyStateDelete = [...this.state.stateDelete]; |
|
|
|
let copyStateDelete = [...this.state.stateDelete]; |
|
|
|
|
|
|
|
|
|
|
|
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) { |
|
|
@ -257,7 +225,6 @@ export default class DialogMenuRoles extends Component { |
|
|
|
copyStateDelete[index] = false; |
|
|
|
copyStateDelete[index] = false; |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
this.setState({ stateDelete: [] }, () => { |
|
|
|
this.setState({ stateDelete: [] }, () => { |
|
|
|
let check = copyStateDelete.some(this.checkArray); |
|
|
|
let check = copyStateDelete.some(this.checkArray); |
|
|
|
if (check === false) { |
|
|
|
if (check === false) { |
|
|
@ -267,32 +234,26 @@ export default class DialogMenuRoles extends Component { |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
getIndexDataMenu = (id) => { |
|
|
|
getIndexDataMenu = (id) => { |
|
|
|
let index = this.state.menu.findIndex(obj => obj.id === id); |
|
|
|
let index = this.state.menu.findIndex(obj => obj.id === id); |
|
|
|
return index |
|
|
|
return index |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
getIndexDataCreate = (id) => { |
|
|
|
getIndexDataCreate = (id) => { |
|
|
|
let index = this.state.stateCreate.findIndex(obj => obj.id === id); |
|
|
|
let index = this.state.stateCreate.findIndex(obj => obj.id === id); |
|
|
|
return index |
|
|
|
return index |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
getIndexDataDelete = (id) => { |
|
|
|
getIndexDataDelete = (id) => { |
|
|
|
let index = this.state.stateDelete.findIndex(obj => obj.id === id); |
|
|
|
let index = this.state.stateDelete.findIndex(obj => obj.id === id); |
|
|
|
return index |
|
|
|
return index |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
getIndexDataRead = (id) => { |
|
|
|
getIndexDataRead = (id) => { |
|
|
|
let index = this.state.stateRead.findIndex(obj => obj.id === id); |
|
|
|
let index = this.state.stateRead.findIndex(obj => obj.id === id); |
|
|
|
return index |
|
|
|
return index |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
getIndexDataUpdate = (id) => { |
|
|
|
getIndexDataUpdate = (id) => { |
|
|
|
let index = this.state.stateUpdate.findIndex(obj => obj.id === id); |
|
|
|
let index = this.state.stateUpdate.findIndex(obj => obj.id === id); |
|
|
|
return index |
|
|
|
return index |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
handleSave = () => { |
|
|
|
handleSave = () => { |
|
|
|
const { |
|
|
|
const { |
|
|
|
stateMenu, |
|
|
|
stateMenu, |
|
|
@ -303,9 +264,7 @@ export default class DialogMenuRoles extends Component { |
|
|
|
menu, |
|
|
|
menu, |
|
|
|
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, |
|
|
@ -315,35 +274,27 @@ export default class DialogMenuRoles extends Component { |
|
|
|
update: stateUpdate[index], |
|
|
|
update: stateUpdate[index], |
|
|
|
delete: stateDelete[index], |
|
|
|
delete: stateDelete[index], |
|
|
|
checked: stateMenu[index], |
|
|
|
checked: stateMenu[index], |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
arrayData.push(data); |
|
|
|
arrayData.push(data); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}) |
|
|
|
}) |
|
|
|
console.log('arrayData', arrayData); |
|
|
|
this.props.closeDialog('save', arrayData); |
|
|
|
// this.props.closeDialog('save', arrayData);
|
|
|
|
|
|
|
|
this.setState({ id: 0 }); |
|
|
|
this.setState({ id: 0 }); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
handleCancel = () => { |
|
|
|
handleCancel = () => { |
|
|
|
this.props.closeDialog('cancel', 'none') |
|
|
|
this.props.closeDialog('cancel', 'none') |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
handleChangeCheckbox = (checked, index) => { |
|
|
|
handleChangeCheckbox = (checked, index) => { |
|
|
|
let copyStateMenu = [...this.state.stateMenu]; |
|
|
|
let copyStateMenu = [...this.state.stateMenu]; |
|
|
|
copyStateMenu[index] = checked; |
|
|
|
copyStateMenu[index] = checked; |
|
|
|
|
|
|
|
|
|
|
|
this.setState({ stateMenu: copyStateMenu }) |
|
|
|
this.setState({ stateMenu: copyStateMenu }) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
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; |
|
|
|
copyStateRead[index] = checked; |
|
|
|
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_id === menuItem.id) { |
|
|
|
if (state.parent_menu_id === menuItem.menu_id) { |
|
|
|
return state.id |
|
|
|
return state.menu_id |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
return null |
|
|
|
return null |
|
|
|
} |
|
|
|
} |
|
|
@ -359,17 +310,15 @@ export default class DialogMenuRoles extends Component { |
|
|
|
stateReadIdx.map((stateRead) => { |
|
|
|
stateReadIdx.map((stateRead) => { |
|
|
|
copyStateRead[stateRead] = checked |
|
|
|
copyStateRead[stateRead] = checked |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
this.setState({ stateRead: copyStateRead }) |
|
|
|
this.setState({ stateRead: copyStateRead }) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
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; |
|
|
|
copyStateCreate[index] = checked; |
|
|
|
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_id === menuItem.id) { |
|
|
|
if (state.parent_menu_id === menuItem.menu_id) { |
|
|
|
return state.id |
|
|
|
return state.menu_id |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
return null |
|
|
|
return null |
|
|
|
} |
|
|
|
} |
|
|
@ -387,14 +336,13 @@ export default class DialogMenuRoles extends Component { |
|
|
|
}) |
|
|
|
}) |
|
|
|
this.setState({ stateCreate: copyStateCreate }) |
|
|
|
this.setState({ stateCreate: copyStateCreate }) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
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; |
|
|
|
copyStateEdit[index] = checked; |
|
|
|
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_id === menuItem.id) { |
|
|
|
if (state.parent_menu_id === menuItem.menu_id) { |
|
|
|
return state.id |
|
|
|
return state.menu_id |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
return null |
|
|
|
return null |
|
|
|
} |
|
|
|
} |
|
|
@ -412,14 +360,13 @@ export default class DialogMenuRoles extends Component { |
|
|
|
}) |
|
|
|
}) |
|
|
|
this.setState({ stateUpdate: copyStateEdit }) |
|
|
|
this.setState({ stateUpdate: copyStateEdit }) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
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; |
|
|
|
copyStateDelete[index] = checked; |
|
|
|
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_id === menuItem.id) { |
|
|
|
if (state.parent_menu_id === menuItem.menu_id) { |
|
|
|
return state.id |
|
|
|
return state.menu_id |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
return null |
|
|
|
return null |
|
|
|
} |
|
|
|
} |
|
|
@ -437,7 +384,6 @@ export default class DialogMenuRoles extends Component { |
|
|
|
}) |
|
|
|
}) |
|
|
|
this.setState({ stateDelete: copyStateDelete }) |
|
|
|
this.setState({ stateDelete: copyStateDelete }) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
handleChangeCheckboxReadAll = (checked) => { |
|
|
|
handleChangeCheckboxReadAll = (checked) => { |
|
|
|
let copyStateRead = [...this.state.stateRead]; |
|
|
|
let copyStateRead = [...this.state.stateRead]; |
|
|
|
copyStateRead.map((val, index) => { |
|
|
|
copyStateRead.map((val, index) => { |
|
|
@ -445,7 +391,6 @@ export default class DialogMenuRoles extends Component { |
|
|
|
}) |
|
|
|
}) |
|
|
|
this.setState({ stateRead: copyStateRead }) |
|
|
|
this.setState({ stateRead: copyStateRead }) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
handleChangeCheckboxCreateAll = (checked, index) => { |
|
|
|
handleChangeCheckboxCreateAll = (checked, index) => { |
|
|
|
let copyStateCreate = [...this.state.stateCreate]; |
|
|
|
let copyStateCreate = [...this.state.stateCreate]; |
|
|
|
copyStateCreate.map((val, index) => { |
|
|
|
copyStateCreate.map((val, index) => { |
|
|
@ -453,7 +398,6 @@ export default class DialogMenuRoles extends Component { |
|
|
|
}) |
|
|
|
}) |
|
|
|
this.setState({ stateCreate: copyStateCreate }) |
|
|
|
this.setState({ stateCreate: copyStateCreate }) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
handleChangeCheckboxEditAll = (checked, index) => { |
|
|
|
handleChangeCheckboxEditAll = (checked, index) => { |
|
|
|
let copyStateEdit = [...this.state.stateUpdate]; |
|
|
|
let copyStateEdit = [...this.state.stateUpdate]; |
|
|
|
copyStateEdit.map((val, index) => { |
|
|
|
copyStateEdit.map((val, index) => { |
|
|
@ -461,7 +405,6 @@ export default class DialogMenuRoles extends Component { |
|
|
|
}) |
|
|
|
}) |
|
|
|
this.setState({ stateUpdate: copyStateEdit }) |
|
|
|
this.setState({ stateUpdate: copyStateEdit }) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
handleChangeCheckboxDeleteAll = (checked, index) => { |
|
|
|
handleChangeCheckboxDeleteAll = (checked, index) => { |
|
|
|
let copyStateDelete = [...this.state.stateDelete]; |
|
|
|
let copyStateDelete = [...this.state.stateDelete]; |
|
|
|
copyStateDelete.map((val, index) => { |
|
|
|
copyStateDelete.map((val, index) => { |
|
|
@ -469,74 +412,44 @@ export default class DialogMenuRoles extends Component { |
|
|
|
}) |
|
|
|
}) |
|
|
|
this.setState({ stateDelete: copyStateDelete }) |
|
|
|
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 = () => { |
|
|
|
renderForm = () => { |
|
|
|
const { menu, stateRead, stateCreate, stateUpdate, stateDelete } = this.state; |
|
|
|
const { menu, stateRead, stateCreate, stateUpdate, stateDelete } = this.state; |
|
|
|
let menuIdxList = [] |
|
|
|
let menuIdxList = [] |
|
|
|
let menuIdx = 0 |
|
|
|
let menuIdx = 0 |
|
|
|
const getChildren = (parentId) => { |
|
|
|
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 renderMenu = (parentId, depth = 0) => { |
|
|
|
const children = getChildren(parentId); |
|
|
|
const children = getChildren(parentId); |
|
|
|
|
|
|
|
|
|
|
|
return children.map((menuItem, index) => { |
|
|
|
return children.map((menuItem, index) => { |
|
|
|
const currentIndex = menuIdx; // Capture current index
|
|
|
|
const currentIndex = menuIdx; |
|
|
|
menuIdxList[currentIndex] = menuItem.id; |
|
|
|
menuIdxList[currentIndex] = menuItem.menu_id; |
|
|
|
menuIdx++ |
|
|
|
menuIdx++ |
|
|
|
const paddingLeft = depth * 20; |
|
|
|
const paddingLeft = depth * 30; |
|
|
|
const fontWeight = menuItem.parent_id === null ? 'bold' : 'normal'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<React.Fragment key={menuIdx-1}> |
|
|
|
<React.Fragment key={menuIdx - 1}> |
|
|
|
<tr > |
|
|
|
<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, currentIndex, menuItem, menuIdxList)} defaultChecked={stateRead[currentIndex]} /></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.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.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> |
|
|
|
<td><input type="checkbox" onClick={(e) => this.handleChangeCheckboxDelete(e.target.checked, currentIndex, menuItem, menuIdxList)} defaultChecked={stateDelete[currentIndex]} /></td> |
|
|
|
</tr> |
|
|
|
</tr> |
|
|
|
{renderMenu(menuItem.id, depth + 1)} {/* Recursively render children */} |
|
|
|
{renderMenu(menuItem.menu_id, depth + 1)} |
|
|
|
</React.Fragment> |
|
|
|
</React.Fragment> |
|
|
|
); |
|
|
|
); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}; |
|
|
|
}; |
|
|
|
menuIdxList = [] |
|
|
|
menuIdxList = [] |
|
|
|
menuIdx = 0 |
|
|
|
menuIdx = 0 |
|
|
|
// Render top-level menu items (parents)
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<React.Fragment> |
|
|
|
<React.Fragment> |
|
|
|
{this.renderAll()} {/* Render the "All" row */} |
|
|
|
{this.renderAll()} |
|
|
|
{renderMenu(null)} {/* Render the menu items */} |
|
|
|
{renderMenu(null)} |
|
|
|
</React.Fragment> |
|
|
|
</React.Fragment> |
|
|
|
); |
|
|
|
); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
renderAll = () => { |
|
|
|
renderAll = () => { |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<tr> |
|
|
|
<tr> |
|
|
|
<td>All</td> |
|
|
|
<td>All</td> |
|
|
@ -547,45 +460,32 @@ export default class DialogMenuRoles extends Component { |
|
|
|
</tr> |
|
|
|
</tr> |
|
|
|
) |
|
|
|
) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
checkArray = (val) => { |
|
|
|
checkArray = (val) => { |
|
|
|
return val === false; |
|
|
|
return val === false; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
handleAllChecked = (checked) => { |
|
|
|
handleAllChecked = (checked) => { |
|
|
|
this.setState({ allChecked: !this.state.allChecked }); |
|
|
|
this.setState({ allChecked: !this.state.allChecked }); |
|
|
|
if (checked === true) { |
|
|
|
if (checked === true) { |
|
|
|
|
|
|
|
|
|
|
|
let check = this.state.stateMenu.some(this.checkArray); |
|
|
|
let check = this.state.stateMenu.some(this.checkArray); |
|
|
|
|
|
|
|
|
|
|
|
if (check) { |
|
|
|
if (check) { |
|
|
|
const stateMenu = []; |
|
|
|
const stateMenu = []; |
|
|
|
this.state.menu.map((val) => { |
|
|
|
this.state.menu.map((val) => { |
|
|
|
stateMenu.push(true); |
|
|
|
stateMenu.push(true); |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
this.setState({ stateMenu: [] }, () => { |
|
|
|
this.setState({ stateMenu: [] }, () => { |
|
|
|
this.setState({ stateMenu: stateMenu }); |
|
|
|
this.setState({ stateMenu: stateMenu }); |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} else { |
|
|
|
} else { |
|
|
|
|
|
|
|
|
|
|
|
const stateMenu = []; |
|
|
|
const stateMenu = []; |
|
|
|
this.state.menu.map((val) => { |
|
|
|
this.state.menu.map((val) => { |
|
|
|
stateMenu.push(false); |
|
|
|
stateMenu.push(false); |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
this.setState({ stateMenu: [] }, () => { |
|
|
|
this.setState({ stateMenu: [] }, () => { |
|
|
|
this.setState({ stateMenu: stateMenu }); |
|
|
|
this.setState({ stateMenu: stateMenu }); |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
render() { |
|
|
|
render() { |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<Modal size="xl" scrollable={true} isOpen={this.props.openDialog} toggle={this.props.toggleDialog}> |
|
|
|
<Modal size="xl" scrollable={true} isOpen={this.props.openDialog} toggle={this.props.toggleDialog}> |
|
|
@ -603,12 +503,11 @@ export default class DialogMenuRoles extends Component { |
|
|
|
Create |
|
|
|
Create |
|
|
|
</th> |
|
|
|
</th> |
|
|
|
<th> |
|
|
|
<th> |
|
|
|
Edite |
|
|
|
Edit |
|
|
|
</th> |
|
|
|
</th> |
|
|
|
<th> |
|
|
|
<th> |
|
|
|
Delete |
|
|
|
Delete |
|
|
|
</th> |
|
|
|
</th> |
|
|
|
|
|
|
|
|
|
|
|
</tr> |
|
|
|
</tr> |
|
|
|
</thead> |
|
|
|
</thead> |
|
|
|
<tbody> |
|
|
|
<tbody> |
|
|
@ -624,4 +523,4 @@ export default class DialogMenuRoles extends Component { |
|
|
|
</Modal> |
|
|
|
</Modal> |
|
|
|
) |
|
|
|
) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |