diff --git a/src/views/Master/MasterRoles/DialogMenuRoles.js b/src/views/Master/MasterRoles/DialogMenuRoles.js index fa0eda6..b066bc4 100644 --- a/src/views/Master/MasterRoles/DialogMenuRoles.js +++ b/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.getAllMenu() 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 }); + } + } + + + 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 ( + //