Skip to content

T
Tia-dev
Commit 51655850 authored by EKSAD's avatar EKSAD
Browse files
Options

Merge branch 'master' of http://103.44.149.204/d.arizona/tia-dev into riri

parents c0fec4a5 ae8ec620
Hide whitespace changes
Inline Side-by-side
Showing with 756 additions and 339 deletions
package-lock.json
View file @ 51655850
......@@ -12135,6 +12135,22 @@
"prop-types": "^15.7.2"
}
},
"react-tooltip": {
"version": "4.2.8",
"resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.8.tgz",
"integrity": "sha512-pDWa0/khTAgIfldp95tHgyuYyBhWNlfaU2LF9ubAKxpoqNe15uyf+uLlnhK/Lstb6FU8E8/SL28Wp6oEO9xw3g==",
"requires": {
"prop-types": "^15.7.2",
"uuid": "^7.0.3"
},
"dependencies": {
"uuid": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
"integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg=="
}
}
},
"react-transition-group": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
......
package.json
View file @ 51655850
......@@ -29,7 +29,8 @@
"react-excel-renderer": "^1.1.0",
"react-number-format": "^4.4.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1"
"react-scripts": "3.4.1",
"react-tooltip": "^4.2.8"
},
"scripts": {
"start": "react-scripts start",
......
src/api/index.js
View file @ 51655850
......@@ -83,6 +83,7 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/')
const createUnitBisnis = (body) => api.post('/business_unit/create_business_unit', body)
const updateUnitBisnis = (body) => api.post('/business_unit/update_business_unit', body)
const searchUnitBisnis = (body) => api.post('/business_unit/search_business_unit', body)
const checkUploadUnitBisnis = (body) => api.post('/business_unit/check_import', body)
// Perusahaan
const getPerusahaan = () => api.get('company/get_all_company')
......@@ -95,7 +96,16 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/')
const createAM = (body) => api.post('/approval_matrix/create_approval_matrix', body)
const updateAM = (body) => api.post('/approval_matrix/update_approval_matrix', body)
//User
const getUser = () => api.get('user/get_all_user')
const getDetailUser = (userId) => api.get(`user/get_user_by_id/${userId}`)
const searchUser = (body) => api.post('user/search_user', body)
const createUser = (body) => api.get('user/create_user', body)
const updateUser = (body) => api.get('user/update_user', body)
const deleteUser = (userId) => api.get(`user/delete_user/${userId}`)
//Template
const downloadTemplate = (fileName,fileType) => api.get(`attachment/download_file?fileName=${fileName}&&fileType=${fileType}`)
// ------
// STEP 3
// ------
......@@ -132,7 +142,15 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/')
updatePerusahaan,
getApprovedByAM,
createAM,
updateAM
updateAM,
getUser,
getDetailUser,
searchUser,
createUser,
updateUser,
deleteUser,
downloadTemplate,
checkUploadUnitBisnis
}
}
......
src/container/ApprovalMatrix/CreateApprovalMatrix.js
View file @ 51655850
......@@ -57,6 +57,8 @@ export default class CreateApprovalMatrix extends Component {
// operator: '',
startDate: '',
endDate: '',
userData: [],
value: null
}
}
......@@ -80,7 +82,7 @@ export default class CreateApprovalMatrix extends Component {
options: userData,
getOptionLabel: (option) => option.fullname,
};
this.setState({ approvedBy: defaultProps, userData: response.data.data })
this.setState({ approvedBy: defaultProps, userData: response.data.data, value: userData[0] })
} else {
alert(response.data.message)
}
......@@ -205,6 +207,7 @@ export default class CreateApprovalMatrix extends Component {
onChange={(event, newInputValue) => this.setState({userId:newInputValue.user_id}, () => console.log(this.state.userId))}
debug
renderInput={(params) => <TextField {...params} label="debug" margin="normal" />}
value={this.state.value}
/>
</div>
</div>
......
src/container/Login.js
View file @ 51655850
......@@ -75,7 +75,9 @@ class Login extends Component {
}
api.create().login(payload).then((response) => {
if (response.data.status === 'success') {
console.log(response.data.data)
localStorage.setItem(Constant.TOKEN, response.data.data.token)
localStorage.setItem(Constant.USER, response.data.data.user_id)
if (this.state.rememberMe) {
localStorage.setItem(Constant.EMAIL, this.state.email)
localStorage.setItem(Constant.PASSWORD, this.state.password)
......
src/container/MasterData/Perusahaan/CreatePerusahaan.js
View file @ 51655850
......@@ -12,6 +12,7 @@ export default class CreatePerusahaan extends Component {
company: '',
parentCompany: '',
unitBisnis: '',
totalReport: '',
startDate: '',
endDate: ''
......@@ -30,6 +31,7 @@ export default class CreatePerusahaan extends Component {
company: data.company_name,
parentCompany: data.parent,
unitBisnis: data.businessUnitId,
totalReport: data.total_report,
startDate: data.start_date,
endDate: data.end_date
})
......@@ -66,8 +68,9 @@ export default class CreatePerusahaan extends Component {
let payload = {
"company_id": this.state.id,
"company_name": this.state.company,
"parent": this.state.parentCompany,
"business_unit_id": this.state.unitBisnis,
"parent": this.state.parentCompany,
"total_report": this.state.totalReport,
"start_date": this.state.startDate,
"end_date": this.state.endDate
}
......@@ -277,6 +280,27 @@ export default class CreatePerusahaan extends Component {
style={{ padding: 0, margin: 0, width: '100%' }}
/>
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField
style={{ width: '100%' }}
id="report"
label="Jumlah Laporan"
value={this.state.totalReport}
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
onChange={(e) => this.setState({ totalReport: e.target.value })}
>
</TextField>
</div>
</div>
</div>
......@@ -469,7 +493,7 @@ export default class CreatePerusahaan extends Component {
>
</TextField>
</div>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<div style={{ padding: 10, borderRadius: 5 }}>
<DatePicker
margin="normal"
id="endDate"
......
src/container/MasterData/UnitBisnis.js
View file @ 51655850
......@@ -6,6 +6,7 @@ import Images from "../../assets/Images";
import UploadFile from "../../library/Upload";
import MUIDataTable from "mui-datatables";
import CreateUnitBisnis from "./formUnitBisnis/CreateUnitBisnis";
import ReactTooltip from 'react-tooltip';
import { TextField, InputBase } from "@material-ui/core";
import { ExcelRenderer } from 'react-excel-renderer';
import api from "../../api";
......@@ -37,23 +38,124 @@ export default class UnitBisnis extends Component {
fileHandler = (event) => {
let fileObj = event
ExcelRenderer(fileObj, (err, resp) => {
// console.log(resp)
if (err) {
console.log(err);
}
else {
let judul = resp.rows[0]
let isi = resp.rows.slice(1)
// let body = isi.map((item) => {
// return {
// item
// ]
// })
console.log(JSON.stringify(isi));
this.setState({
dataLoaded: true,
cols: judul,
rows: isi
});
let judul = resp.rows[2]
let isi = resp.rows.slice(3)
let payload = []
isi.map((item, index) => {
payload.push({
id: index + 1,
business_unit_name: item[0],
start_date: item[1],
end_date: item[2],
})
})
let body = {
business_unit: payload
}
api.create().checkUploadUnitBisnis(body).then(response => {
// console.log(response);
let dataRow = response.data.data.map((item, index) => {
return [
index + 1,
item.business_unit_name,
item.start_date,
item.end_date,
item.error
]
})
let columns = [
"Data Ke-",
{
name: "Unit Bisnis",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[4] != null) {
check = tableMeta.rowData[4].findIndex((val) => val.field.includes('business_unit_name'))
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[4] != null && check > -1 ?
<a data-tip={tableMeta.rowData[4][check].message} data-for="unitbisnis">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="unitbisnis" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "Berlaku Mulai",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[4] != null) {
check = tableMeta.rowData[4].findIndex((val) => val.field.includes('start_date'))
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[4] != null && check > -1 ?
<a data-tip={tableMeta.rowData[4][check].message} data-for="startdate">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="startdate" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "Berakhir Hingga",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[4] != null) {
check = tableMeta.rowData[4].findIndex((val) => val.field.includes('end_date'))
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[4] != null && check > -1 ?
<a data-tip={tableMeta.rowData[4][check].message} data-for="enddate">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="enddate" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "",
options: {
display: false
}
}
]
console.log(dataRow);
this.setState({
dataLoaded: true,
cols: columns,
rows: dataRow
});
})
// console.log(JSON.stringify(payload));
}
});
}
......@@ -132,6 +234,36 @@ export default class UnitBisnis extends Component {
})
}
downloadFile = async () => {
let res = await fetch(
"https://trftia.eksad.com/tia-reporting-dev/public/attachment/download_file?fileName=BusinessUnitTemplate&&fileType=xlsx"
)
res = await res.blob()
console.log(res)
if (res.size > 0) {
let url = window.URL.createObjectURL(res);
let a = document.createElement('a');
a.href = url;
a.download = 'Template Business Unit.xlsx';
a.click();
}
}
downloadDataTable = async () => {
let res = await fetch(
"https://trftia.eksad.com/tia-reporting-dev/public/business_unit/export_business_unit"
)
res = await res.blob()
console.log(res)
if (res.size > 0) {
let url = window.URL.createObjectURL(res);
let a = document.createElement('a');
a.href = url;
a.download = 'Business Unit.xlsx';
a.click();
}
}
render() {
const columns = [{
name: "Action",
......@@ -198,7 +330,6 @@ export default class UnitBisnis extends Component {
return (
<div style={{ height: this.props.height }}>
{/* <Row> */}
<div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
{this.state.visibleUnitBisnis === true ?
<div>
......@@ -215,24 +346,46 @@ export default class UnitBisnis extends Component {
/>
{/* <input type="text" value={this.state.search} onChange={(e)=> this.setState({ search: e.target.value})} style={{ width: '100%'}} /> */}
</div>
<div style={{ width: '30%', justifyContent: 'space-around', display: 'flex', flexFlow: 'wrap' }}>
<img src={Images.template} />
<div style={{ width: '30%', justifyContent: 'flex-end', display: 'flex', flexFlow: 'wrap' }}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent'
borderColor: 'transparent',
margin: 5
}}
onClick={() => this.downloadFile()}
>
<img src={Images.template} />
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => this.setState({ visibleUpload: true })}
>
<img src={Images.upload} />
</button>
<img src={Images.download} />
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent'
borderColor: 'transparent',
margin: 5
}}
onClick={() => this.downloadDataTable()}
>
<img src={Images.download} />
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => this.setState({ visibleCreate: true })}
>
......
src/container/MasterData/formUnitBisnis/CreateUnitBisnis.js
View file @ 51655850
......@@ -204,7 +204,7 @@ export default class CreateUnitBisnis extends Component {
<DatePicker
margin="normal"
id="startDate"
label="Berlaku Hingga"
label="Berakhir Hingga"
format="dd MMMM yyyy"
value={this.state.endDate}
onChange={(e) => this.handleChange(e, 'end_date')}
......@@ -381,7 +381,7 @@ export default class CreateUnitBisnis extends Component {
<DatePicker
margin="normal"
id="endDate"
label="Berlaku Hingga"
label="Berakhir Hingga"
format="dd MMMM yyyy"
value={this.state.endDate == "" ? null : this.state.endDate}
onChange={(e) => this.handleChange(e, 'end_date')}
......
src/container/Otorisasi/User.js
View file @ 51655850
......@@ -4,29 +4,100 @@ import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/
import SearchIcon from '@material-ui/icons/Search';
import Images from "../../assets/Images";
import MUIDataTable from "mui-datatables";
import AddRole from './UserRole/AddRole';
import EditRole from './UserRole/EditRole'
import AddUser from './User/AddUser';
import EditUser from './User/EditUser'
import api from "../../api";
import { titleCase } from "../../library/Utils";
import { InputAdornment, TextField } from "@material-ui/core";
import UploadFile from "../../library/Upload";
import { ExcelRenderer } from 'react-excel-renderer';
var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions();
const tesss = [{
name: "Data Ke-",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowIndex + 1}
</div >
);
}
}
}, {
name: "Nama Lengkap",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex', width: 50 }}>
{titleCase(val)}
</div >
);
}
}
}, {
name: "Email",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex', width: 200 }}>
{val}
</div >
);
}
}
}, {
name: "Role",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex', width: 150 }}>
{titleCase(val)}
</div >
);
}
}
}, {
name: "Berlaku Mulai",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex', width: 100 }}>
{titleCase(val)}
</div >
);
}
}
}, {
name: "Berakhir Hingga",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex'}}>
{val}
</div >
);
}
}
}]
export default class UserRole extends Component {
constructor(props) {
super(props)
this.state = {
listRole: [],
listUser: [],
indexData: {},
add: false,
edit: false
edit: false,
visibleUser: true
}
}
componentDidMount() {
this.getRole()
this.getUser()
}
closeEdit() {
......@@ -37,27 +108,106 @@ export default class UserRole extends Component {
this.setState({add: false})
}
getRole() {
api.create().getRole().then((response) => {
getUser() {
api.create().getUser().then((response) => {
// console.log(response)
if (response.data.status == 'success') {
// console.log(response.data.data)
let data = response.data.data
let listData = data.map((item,index) => {
return [index, item.role_id, item.role_name, item.access, item.status]
return [index, item.user_id, item.fullname, item.email, item.role_name, item.company, item.status]
})
console.log(listData)
this.setState({listRole: listData})
// this.setState({listRole: response.data.data}, () => {
// console.log(this.state.listRole)
// console.log(listData)
this.setState({listUser: listData})
// this.setState({listUser: response.data.data}, () => {
// console.log(this.state.listUser)
// })
} else {
alert(response.data.message)
}
console.log(response.data.data)
// console.log(response.data.data)
})
}
searchUser() {
let payload = {
"keyword": this.state.search
}
api.create().searchUser(payload).then((response) => {
if (response.data.status == 'success') {
let data = response.data.data
let listData = data.map((item,index) => {
return [index, item.user_id, item.fullname, item.email, item.role_name, item.company, item.status]
})
this.setState({listUser: listData})
} else {
alert(response.data.message)
}
})
}
fileHandler = (event) => {
let fileObj = event
ExcelRenderer(fileObj, (err, resp) => {
if (err) {
console.log(err);
}
else {
let judul = resp.rows[0]
let isi = resp.rows.slice(1)
// let body = isi.map((item) => {
// return {
// item
// ]
// })
console.log(JSON.stringify(isi));
this.setState({
dataLoaded: true,
cols: tesss,
rows: isi
});
}
});
}
downloadFile = async () => {
let res = await fetch(
"https://trftia.eksad.com/tia-reporting-dev/public/attachment/download_file?fileName=UserTemplate&&fileType=xlsx"
)
res = await res.blob()
console.log(res)
if (res.size > 0) {
let url = window.URL.createObjectURL(res);
let a = document.createElement('a');
a.href = url;
a.download = 'User Template.xlsx';
a.click();
}
}
downloadDataTables = async () => {
let res = await fetch ("https://trftia.eksad.com/tia-reporting-dev/public/user/export_user")
res = await res.blob()
console.log(res)
if (res.size > 0) {
let url = window.URL.createObjectURL(res);
let a = document.createElement('a');
a.href = url;
a.download = 'Data User.xlsx';
a.click();
}
}
_handleKeyDown(e) {
if (e.key === 'Enter') {
if (this.state.search.length > 0) {
this.searchUser()
} else {
this.getRole()
}
}
}
render() {
const columns = [{
name: "Action",
......@@ -136,18 +286,11 @@ export default class UserRole extends Component {
}
}
}, "Status"]
const data = [
["1", "1", "Juki Kudet", "Juki@gmail.com)", "Admin", "Kepo", "Aktif"],
["1", "2", "Kuji Mama", "Loro@gmail.com)", "Admin", "Kepo", "Aktif"],
["1", "3", "Sutaru", "Jaka@gmail.com)", "Admin", "Kepo", "Aktif"],
["1", "4", "Tatang Katro", "ikup@gmail.com)", "Admin", "Kepo", "Aktif"],
["1", "5", "Firman", "Sudir@gmail.com)", "Admin", "Kepo", "Aktif"],
]
return (
<div style={{ height: this.props.height }}>
{/* <Row> */}
<div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
<div>
{this.state.visibleUser ? <div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ fontFamily: 'nunito', color: 'white', width: '20%', alignSelf: 'center', fontSize: 18}}>Master Data - User</label>
<div style={{width: '60%', justifyContent: 'center', display: 'flex', borderWidth: 2, alignItems: 'center' }}>
......@@ -160,9 +303,9 @@ export default class UserRole extends Component {
onChange={(e) => {
this.setState({ search: e.target.value }, () => {
if (this.state.search.length > 0) {
this.searchRole()
this.searchUser()
} else {
this.getRole()
this.getUser()
}
});
}}
......@@ -181,34 +324,148 @@ export default class UserRole extends Component {
</div>
{/* <label style={{ color: 'white', width: '60%', justifyContent: 'center', display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center' }}>Search</label> */}
<div style={{ width: '20%', justifyContent: 'flex-end', display: 'flex' }}>
<img src={Images.template}/>
<img src={Images.upload} style={{marginLeft: 20}}/>
<img src={Images.download} style={{marginLeft: 20}}/>
<img src={Images.add} onClick={() => this.setState({add: true})} style={{marginLeft: 20}}/>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => this.downloadFile()}
>
<img src={Images.template}/>
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginTop: 5,
marginBottom: 5,
marginRight: 5,
marginLeft: 20
}}
onClick={() => this.setState({ visibleUpload: true })}
>
<img src={Images.upload}/>
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginTop: 5,
marginBottom: 5,
marginRight: 5,
marginLeft: 20
}}
onClick={() => this.downloadDataTables()}
>
<img src={Images.download}/>
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginTop: 5,
marginBottom: 5,
marginRight: 5,
marginLeft: 20
}}
onClick={() => this.setState({add: true})}
>
<img src={Images.add}/>
</button>
</div>
</div>
<div style={{ padding: 25 }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={data}
data={this.state.listUser}
columns={columns}
options={options}
/>
</MuiThemeProvider>
</div>
</div> :
<div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', fontSize: 16, alignSelf: 'center' }}>Preview Data</label>
</div>
<div style={{ padding: 25 }}>
{this.state.dataLoaded && (
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
theme={getMuiTheme()}
data={this.state.rows}
columns={this.state.cols}
options={options}
/>
</MuiThemeProvider>
)}
</div>
<div style={{ display: 'flex', width: '100%', placeContent: 'flex-end', padding: 20 }}>
<button
type="button"
onClick={() => this.setState({ visibleUser: true })}
style={{ marginRight: 20 }}
>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div>
</button>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</div>
</div>
}
{this.state.add && (
<AddRole
<AddUser
onClickClose={this.closeAdd.bind(this)}
data={this.state.indexData}
/>
)}
{this.state.edit && (
<EditRole
<EditUser
onClickClose={this.closeEdit.bind(this)}
data={this.state.indexData}
/>
)}
{this.state.visibleUpload && (
<div className="test app-popup-show">
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
<div className="popup-panel grid grid-2x" style={{ backgroundColor: '#51c6ea', height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Upload File</span>
</div>
</div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
<button
type="button"
className="btn btn-circle btn-white"
onClick={() => this.setState({ visibleUpload: false })}
>
<i className="fa fa-lg fa-times" style={{ color: 'white' }} />
</button>
</div>
</div>
<UploadFile
type={this.state.uploadStatus}
percentage={this.state.percentage}
result={this.state.result}
acceptedFiles={["pdf"]}
onHandle={(dt) => {
this.fileHandler(dt)
this.setState({ uploadStatus: 'idle', percentage: '0' })
}}
onUpload={() => this.setState({ visibleUpload: false, visibleUser: false })}
/>
</div>
</div>
)}
</div>
);
}
......
src/container/Otorisasi/User/AddUser.js
View file @ 51655850
import React, { Component } from 'react';
import { TextField, Divider, Typography, Checkbox, withStyles } from '@material-ui/core';
import api from '../../../api';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { titleCase } from '../../../library/Utils';
import localeID from "date-fns/locale/id"
import format from "date-fns/format";
const CustomCheckbox = withStyles({
root: {
......@@ -20,8 +24,15 @@ export default class AddUser extends Component {
paramsId: this.props.data,
tempData: null,
menuData: null,
privileges: [],
checked: false
checked: false,
fullname: '',
email: '',
role: null,
startDate: null,
endDate: null,
company: [],
listRole: null,
date: new Date(),
}
}
......@@ -30,7 +41,7 @@ export default class AddUser extends Component {
}
componentDidMount() {
this.getMenu()
this.getRole()
}
handleChange(e) {
......@@ -38,83 +49,42 @@ export default class AddUser extends Component {
this.setState({...data, tempData: {...this.state.tempData, [e.target.name] : e.target.value}})
}
updateRole() {
crateUser() {
let payload = {
"role_id": 40,
"role_name": "admin-tia",
"start_date": "2020-01-01",
"end_date": "2020-12-31",
"privileges": [
{
"menu_id": 17,
"button_id": [1, 2, 3]
}
]
"role_id": this.state.role.role_id,
"email": this.state.email,
"fullname": this.state.fullname,
"password": this.state.fullname,
"company": this.state.company,
"start_date": this.state.startDate,
"end_date": this.state.endDate
}
api.create().createUser(payload).then((response) => {
console.log(response)
})
}
getMenu() {
api.create().getMenu().then((response) => {
if (response.data.status == 'success') {
this.setState({menuData: response.data.data})
getRole() {
api.create().getRole().then((response) => {
if(response.data.status == 'success') {
let data = response.data.data
let roleData = data.map((item) => {
return {
role_id: item.role_id,
role_name: item.role_name
}
})
let defaultProps = {
options: roleData,
getOptionLabel: (option) => titleCase(option.role_name),
};
this.setState({listRole: defaultProps})
} else {
alert(response.data.message)
}
})
}
handleItemChecked(item) {
let indexID = this.state.privileges.findIndex((val) => val.menu_id == item.menu_id)
return indexID == -1? false : true
}
handleItemClick(item) {
let indexID = this.state.privileges.findIndex((val) => val.menu_id == item.menu_id)
let privileges = this.state.privileges
if (indexID == -1) {
privileges.push({
menu_id: item.menu_id,
button_id: [1,2,3]
})
} else {
privileges.splice(indexID,1)
}
this.setState({privileges})
}
handleSubItemChecked(item, index) {
let indexID = this.state.privileges.findIndex((val) => val.menu_id == item.menu_id)
let value = false
if (indexID == -1) {
value = false
} else {
let arrayButton = this.state.privileges[indexID].button_id
console.log(arrayButton)
let indexButtonID = this.state.privileges[indexID].button_id.findIndex((val) => val == index)
// console.log(indexButtonID)
if (indexButtonID == -1) {
value = false
} else {
value = true
}
}
return indexID == -1? value : value
}
handleSubItemClick(item, index) {
let indexID = this.state.privileges.findIndex((val) => val.menu_id == item.menu_id)
let indexButtonID = this.state.privileges[indexID].button_id.findIndex((val) => val == index)
let privileges = this.state.privileges
let button_id = privileges[indexID].button_id
if (indexButtonID == -1) {
button_id.push(index)
} else {
button_id.splice(indexButtonID,1)
}
privileges[indexID].button_id = button_id
this.setState({privileges})
}
render() {
return (
......@@ -139,7 +109,7 @@ export default class AddUser extends Component {
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20 }}>
<div className="column-1">
<div className="margin-bottom-20px">
<div className="">
<TextField
style={{ width: '100%' }}
id="id"
......@@ -147,7 +117,7 @@ export default class AddUser extends Component {
disabled
// id="outlined-read-only-input"
variant="filled"
value={this.state.tempData == null? '' : this.state.tempData.role_id}
value={'-'}
onChange={(e) => null}
>
{/* {periode.map((option) => (
......@@ -160,19 +130,49 @@ export default class AddUser extends Component {
</div>
<div className="column-2">
<div className="">
<TextField
style={{ width: '100%' , marginTop: 7}}
id="fullname"
name="fullname"
label="Nama Lengkap"
value={this.state.tempData == null? '' : this.state.tempData.fullname}
onChange={(e) => this.handleChange(e)}
// defaultValue="Default Value"
// helperText="Some important text"
/>
</div>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' , marginTop: 7}}
id="userRole"
name="role_name"
label="User Role"
value={this.state.tempData == null? '' : this.state.tempData.role_name}
id="email"
name="email"
label="Email"
value={this.state.tempData == null? '' : this.state.tempData.email}
onChange={(e) => this.handleChange(e)}
// defaultValue="Default Value"
// helperText="Some important text"
/>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<Autocomplete
{...this.state.listRole}
id="role"
onChange={(event, newInputValue) => this.setState({role: newInputValue})}
debug
renderInput={(params) => <TextField {...params} label="Role" margin="normal" style={{marginTop: 7}}/>}
value={this.state.role}
/>
</div>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
......@@ -217,7 +217,28 @@ export default class AddUser extends Component {
disabled
// id="outlined-read-only-input"
variant="filled"
value={this.state.tempData == null? '' : this.state.tempData.status}
value={'Aktif'}
>
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</TextField>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="is_expired"
name="is_expired"
label="Expired"
disabled
// id="outlined-read-only-input"
variant="filled"
value={'T'}
>
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
......@@ -229,79 +250,29 @@ export default class AddUser extends Component {
</div>
</div>
<div style={{flexDirection:'column', display: 'flex', paddingLeft: 20, paddingRight: 20 }}>
<Typography style={{fontSize: 12}}>{`Dibuat : ${this.state.tempData == null? '' : this.state.tempData.created}`}</Typography>
<Typography style={{fontSize: 12}}>{`Diubah: ${this.state.tempData == null? '' : this.state.tempData.updated}`}</Typography>
<Typography style={{fontSize: 12}}>{`Dibuat : ${format(this.state.date, 'dd MMMM yyyy', {locale: localeID})}`}</Typography>
{/* <Typography style={{fontSize: 12}}>{`Diubah: ${this.state.tempData == null? '' : this.state.tempData.updated}`}</Typography> */}
</div>
<Divider style={{margin: 20}}/>
<div style={{paddingLeft: 20, paddingRight: 20}}>
<h5>Hak Akses</h5>
<div className="grid grid-2x grid-mobile-none gap-15px padding-top-5px padding-bottom-5px padding-left-10px padding-right-10px " style={{backgroundColor: '#4b4b4b'}}>
<div className="column-1">
<Typography style={{fontSize: 12, color: 'white'}}>Otorisasi Modul</Typography>
</div>
<div className="column-2 grid grid-3x content-center grid-mobile-none gap-15px">
<div className="column-1">
<Typography style={{fontSize: 12, color: 'white'}}>Lihat</Typography>
</div>
<div className="column-2">
<Typography style={{fontSize: 12, color: 'white'}}>Tambah</Typography>
</div>
<div className="column 3">
<Typography style={{fontSize: 12, color: 'white'}}>Ubah</Typography>
</div>
</div>
</div>
<h5>Otorisasi Perusahaan</h5>
<div style={{height: '25vh', overflow: 'scroll'}}>
{this.state.menuData !== null && this.state.menuData.map((item,index) => {
return (
<div className="grid grid-2x grid-mobile-none gap-15px padding-left-10px padding-right-10px">
<div className="column-1" style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
<CustomCheckbox
checked={this.handleItemChecked(item)}
onChange={() => this.handleItemClick(item)}
/>
<Typography style={{fontSize: 12}}>{item.menu_name}</Typography>
</div>
<div className="column-2 grid grid-3x content-center grid-mobile-none gap-15px">
<div className="column-1">
<CustomCheckbox
// disabled={}
checked={this.handleSubItemChecked(item, 1)}
onChange={() => this.handleSubItemClick(item,1)}
/>
</div>
<div className="column-2">
<CustomCheckbox
// disabled
checked={this.handleSubItemChecked(item, 2)}
onChange={() => this.handleSubItemClick(item,2)}
/>
</div>
<div className="column 3">
<CustomCheckbox
// disabled
checked={this.handleSubItemChecked(item, 3)}
onChange={() => this.handleSubItemClick(item,3)}
/>
</div>
</div>
</div>
)
})}
</div>
</div>
<div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1" style={{ alignSelf: 'center' }}>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div>
<button onClick={() => this.props.onClickClose()}>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div>
</button>
</div>
<div className="column-2" style={{display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
<button onClick={() => this.validasi()}>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</button>
</div>
</div>
</div>
......
src/container/Otorisasi/User/EditUser.js
View file @ 51655850
import React, { Component } from 'react';
import { TextField, Divider, Typography, Checkbox, withStyles } from '@material-ui/core';
import api from '../../../api';
import { titleCase } from '../../../library/Utils';
import Autocomplete from '@material-ui/lab/Autocomplete';
const CustomCheckbox = withStyles({
root: {
......@@ -20,8 +22,10 @@ export default class EditUser extends Component {
paramsId: this.props.data,
tempData: null,
menuData: null,
privileges: [],
checked: false
checked: false,
listRole: null,
role: null,
company: [],
}
}
......@@ -30,8 +34,8 @@ export default class EditUser extends Component {
}
componentDidMount() {
this.getDetailRole()
this.getMenu()
this.getDetailUser()
this.getRole()
}
handleChange(e) {
......@@ -39,93 +43,60 @@ export default class EditUser extends Component {
this.setState({...data, tempData: {...this.state.tempData, [e.target.name] : e.target.value}})
}
getDetailRole() {
api.create().getDetailRole(this.state.paramsId).then((response) => {
getDetailUser() {
api.create().getDetailUser(this.state.paramsId).then((response) => {
if (response.data.status == 'success') {
this.setState({tempData: response.data.data, privileges: response.data.data.privileges})
this.setState({tempData: response.data.data})
console.log(response.data.data)
} else {
alert(response.data.message)
}
})
}
validasi() {
this.props.onClickClose()
}
updateRole() {
updateUser() {
let payload = {
"role_id": 40,
"role_name": "admin-tia",
"start_date": "2020-01-01",
"end_date": "2020-12-31",
"privileges": [
{
"menu_id": 17,
"button_id": [1, 2, 3]
}
]
"user_id": this.state.tempData.user_id,
"role_id": this.state.role.role_id,
"email": this.state.tempData.email,
"fullname": this.state.tempData.fullname,
"company": this.state.company,
"start_date": this.state.tempData.start_date,
"end_date": this.state.tempData.end_date
}
}
getMenu() {
api.create().getMenu().then((response) => {
if (response.data.status == 'success') {
this.setState({menuData: response.data.data})
} else {
alert(response.data.message)
}
api.create().updateUser(payload).then((response) => {
console.log(response)
})
}
handleItemChecked(item) {
let indexID = this.state.privileges.findIndex((val) => val.menu_id == item.menu_id)
return indexID == -1? false : true
}
getRole() {
api.create().getRole().then((response) => {
if(response.data.status == 'success') {
let data = response.data.data
let roleData = data.map((item) => {
return {
role_id: item.role_id,
role_name: item.role_name
}
})
let defaultProps = {
options: roleData,
getOptionLabel: (option) => titleCase(option.role_name),
};
handleItemClick(item) {
let indexID = this.state.privileges.findIndex((val) => val.menu_id == item.menu_id)
let privileges = this.state.privileges
if (indexID == -1) {
privileges.push({
menu_id: item.menu_id,
button_id: [1,2,3]
})
} else {
privileges.splice(indexID,1)
}
this.setState({privileges})
}
handleSubItemChecked(item, index) {
let indexID = this.state.privileges.findIndex((val) => val.menu_id == item.menu_id)
let value = false
if (indexID == -1) {
value = false
} else {
let arrayButton = this.state.privileges[indexID].button_id
console.log(arrayButton)
let indexButtonID = this.state.privileges[indexID].button_id.findIndex((val) => val == index)
// console.log(indexButtonID)
if (indexButtonID == -1) {
value = false
let index = roleData.findIndex((val) => val.role_id == this.state.tempData.role_id)
console.log(index)
this.setState({listRole: defaultProps, role: index == -1? roleData[0] : roleData[index]})
} else {
value = true
alert(response.data.message)
}
}
return indexID == -1? value : value
})
}
handleSubItemClick(item, index) {
let indexID = this.state.privileges.findIndex((val) => val.menu_id == item.menu_id)
let indexButtonID = this.state.privileges[indexID].button_id.findIndex((val) => val == index)
let privileges = this.state.privileges
let button_id = privileges[indexID].button_id
if (indexButtonID == -1) {
button_id.push(index)
} else {
button_id.splice(indexButtonID,1)
}
privileges[indexID].button_id = button_id
this.setState({privileges})
}
render() {
return (
......@@ -150,7 +121,7 @@ export default class EditUser extends Component {
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20 }}>
<div className="column-1">
<div className="margin-bottom-20px">
<div className="">
<TextField
style={{ width: '100%' }}
id="id"
......@@ -158,7 +129,7 @@ export default class EditUser extends Component {
disabled
// id="outlined-read-only-input"
variant="filled"
value={this.state.tempData == null? '' : this.state.tempData.role_id}
value={this.state.tempData == null? '' : this.state.tempData.user_id}
onChange={(e) => null}
>
{/* {periode.map((option) => (
......@@ -171,19 +142,49 @@ export default class EditUser extends Component {
</div>
<div className="column-2">
<div className="">
<TextField
style={{ width: '100%' , marginTop: 7}}
id="fullname"
name="fullname"
label="Nama Lengkap"
value={this.state.tempData == null? '' : this.state.tempData.fullname}
onChange={(e) => this.handleChange(e)}
// defaultValue="Default Value"
// helperText="Some important text"
/>
</div>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' , marginTop: 7}}
id="userRole"
name="role_name"
label="User Role"
value={this.state.tempData == null? '' : this.state.tempData.role_name}
id="email"
name="email"
label="Email"
value={this.state.tempData == null? '' : this.state.tempData.email}
onChange={(e) => this.handleChange(e)}
// defaultValue="Default Value"
// helperText="Some important text"
/>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<Autocomplete
{...this.state.listRole}
id="role"
onChange={(event, newInputValue) => this.setState({role: newInputValue})}
debug
renderInput={(params) => <TextField {...params} label="Role" margin="normal" style={{marginTop: 7}}/>}
value={this.state.role}
/>
</div>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
......@@ -238,6 +239,27 @@ export default class EditUser extends Component {
</TextField>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="is_expired"
name="is_expired"
label="Expired"
disabled
// id="outlined-read-only-input"
variant="filled"
value={this.state.tempData == null? '' : this.state.tempData.is_expired}
>
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</TextField>
</div>
</div>
</div>
<div style={{flexDirection:'column', display: 'flex', paddingLeft: 20, paddingRight: 20 }}>
<Typography style={{fontSize: 12}}>{`Dibuat : ${this.state.tempData == null? '' : this.state.tempData.created}`}</Typography>
......@@ -245,74 +267,24 @@ export default class EditUser extends Component {
</div>
<Divider style={{margin: 20}}/>
<div style={{paddingLeft: 20, paddingRight: 20}}>
<h5>Hak Akses</h5>
<div className="grid grid-2x grid-mobile-none gap-15px padding-top-5px padding-bottom-5px padding-left-10px padding-right-10px " style={{backgroundColor: '#4b4b4b'}}>
<div className="column-1">
<Typography style={{fontSize: 12, color: 'white'}}>Otorisasi Modul</Typography>
</div>
<div className="column-2 grid grid-3x content-center grid-mobile-none gap-15px">
<div className="column-1">
<Typography style={{fontSize: 12, color: 'white'}}>Lihat</Typography>
</div>
<div className="column-2">
<Typography style={{fontSize: 12, color: 'white'}}>Tambah</Typography>
</div>
<div className="column 3">
<Typography style={{fontSize: 12, color: 'white'}}>Ubah</Typography>
</div>
</div>
</div>
<h5>Otorisasi Perusahaan</h5>
<div style={{height: '25vh', overflow: 'scroll'}}>
{this.state.menuData !== null && this.state.menuData.map((item,index) => {
return (
<div className="grid grid-2x grid-mobile-none gap-15px padding-left-10px padding-right-10px">
<div className="column-1" style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
<CustomCheckbox
checked={this.handleItemChecked(item)}
onChange={() => this.handleItemClick(item)}
/>
<Typography style={{fontSize: 12}}>{item.menu_name}</Typography>
</div>
<div className="column-2 grid grid-3x content-center grid-mobile-none gap-15px">
<div className="column-1">
<CustomCheckbox
// disabled={}
checked={this.handleSubItemChecked(item, 1)}
onChange={() => this.handleSubItemClick(item,1)}
/>
</div>
<div className="column-2">
<CustomCheckbox
// disabled
checked={this.handleSubItemChecked(item, 2)}
onChange={() => this.handleSubItemClick(item,2)}
/>
</div>
<div className="column 3">
<CustomCheckbox
// disabled
checked={this.handleSubItemChecked(item, 3)}
onChange={() => this.handleSubItemClick(item,3)}
/>
</div>
</div>
</div>
)
})}
</div>
</div>
<div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1" style={{ alignSelf: 'center' }}>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div>
<button onClick={() => this.props.onClickClose()}>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div>
</button>
</div>
<div className="column-2" style={{display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
<button onClick={() => this.validasi()}>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</button>
</div>
</div>
</div>
......
src/library/Constant.js
View file @ 51655850
const Constant = {
TOKEN: null,
USER: null,
USER: 0,
EMAIL: 'TOKEN',
PASSWORD: 'PASSWORD'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment