Commit 29906780 authored by Deni Rinaldi's avatar Deni Rinaldi

Merge branch 'master' of http://103.44.149.204/d.arizona/tia-dev into deni-dev(pc)

parents 952dcca9 b0c28986
{ {
"name": "my-app", "name": "my-app",
"version": "0.1.0", "version": "0.1.0",
"homepage": "http://localhost:8080/tia-web/", "homepage": "http://localhost:8080/tia-web-dev/",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@date-io/date-fns": "^1.3.13", "@date-io/date-fns": "^1.3.13",
......
...@@ -72,7 +72,7 @@ export default class ApprovalMatrix extends Component { ...@@ -72,7 +72,7 @@ export default class ApprovalMatrix extends Component {
} }
else if (response.data.status == 'success') { else if (response.data.status == 'success') {
let data = response.data.data let data = response.data.data
let listData = data.map((item, index) => { let listData = data.sort((a,b) => a.approval_matrix_id - b.approval_matrix_id).map((item, index) => {
return [index, item.approval_matrix_id, item.approval_type_name, item.orders, item.fullname, item.operator_type_name, item.status ] return [index, item.approval_matrix_id, item.approval_type_name, item.orders, item.fullname, item.operator_type_name, item.status ]
}) })
this.setState({ dataTable: listData, listData: response.data.data }) this.setState({ dataTable: listData, listData: response.data.data })
...@@ -275,7 +275,7 @@ export default class ApprovalMatrix extends Component { ...@@ -275,7 +275,7 @@ export default class ApprovalMatrix extends Component {
<div> <div>
{this.state.visibleAM === true ? {this.state.visibleAM === true ?
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
<div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} /> <div class="main-color" style={{ height: 199, width: '100%'}} />
<div> <div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}> <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ width: '20%', color: 'white', fontSize: 16, alignSelf: 'center', paddingTop: 8 }}>Master Data - Approval Matrix</label> <label style={{ width: '20%', color: 'white', fontSize: 16, alignSelf: 'center', paddingTop: 8 }}>Master Data - Approval Matrix</label>
...@@ -376,7 +376,7 @@ export default class ApprovalMatrix extends Component { ...@@ -376,7 +376,7 @@ export default class ApprovalMatrix extends Component {
/> />
: :
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
<div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} /> <div class="main-color" style={{ height: 199, width: '100%' }} />
<div> <div>
<div> <div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}> <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
......
...@@ -6,6 +6,7 @@ import MenuItem from '@material-ui/core/MenuItem'; ...@@ -6,6 +6,7 @@ import MenuItem from '@material-ui/core/MenuItem';
import ReactDragListView from 'react-drag-listview'; import ReactDragListView from 'react-drag-listview';
import Autocomplete from '@material-ui/lab/Autocomplete'; import Autocomplete from '@material-ui/lab/Autocomplete';
import api from "../../api"; import api from "../../api";
import { none } from 'ramda';
const type = [ const type = [
...@@ -135,9 +136,11 @@ export default class VisualisasiAM extends Component { ...@@ -135,9 +136,11 @@ export default class VisualisasiAM extends Component {
onDragEnd(fromIndex, toIndex) { onDragEnd(fromIndex, toIndex) {
const data = [...that.state.listApproval]; const data = [...that.state.listApproval];
const item = data.splice(fromIndex, 1)[0]; const item = data.splice(fromIndex, 1)[0];
that.handleChangeOrder(fromIndex, toIndex, that) if (fromIndex !== -1 && toIndex !== -1) {
data.splice(toIndex, 0, item); that.handleChangeOrder(fromIndex, toIndex, that)
that.setState({ listApproval: data }); data.splice(toIndex, 0, item);
that.setState({ listApproval: data });
}
}, },
nodeSelector: 'li', nodeSelector: 'li',
handleSelector: 'a' handleSelector: 'a'
...@@ -145,10 +148,15 @@ export default class VisualisasiAM extends Component { ...@@ -145,10 +148,15 @@ export default class VisualisasiAM extends Component {
return ( return (
<div> <div>
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
<div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} /> <div class="main-color" style={{ height: 199, width: '100%' }} />
<div> <div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}> <div style={{ display: 'flex', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', width: '20%', fontSize: 16, paddingTop: 8 }}>Visualisasi Data</label> <label style={{ color: 'white', width: '20%', fontSize: 16, paddingTop: 8 }}>Visualisasi</label>
</div>
<div style={{ display: 'flex', paddingRight: 25, paddingLeft: 25 }}>
<label style={{ color: '#51c6ea', width: '20%', fontSize: 11 }}>Master Data / Approval Matrix /
<span style={{ color: 'white', width: '20%', fontSize: 11 }}> Visualisasi</span>
</label>
</div> </div>
<div style={{ padding: 25, width: '100%' }}> <div style={{ padding: 25, width: '100%' }}>
<div style={{ width: '100%', padding: 25, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4'}}> <div style={{ width: '100%', padding: 25, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4'}}>
...@@ -160,16 +168,16 @@ export default class VisualisasiAM extends Component { ...@@ -160,16 +168,16 @@ export default class VisualisasiAM extends Component {
onChange={(event, newInputValue) => this.setState({typeName:newInputValue.approval_type_name}, () => { onChange={(event, newInputValue) => this.setState({typeName:newInputValue.approval_type_name}, () => {
this.handleInputChange() this.handleInputChange()
})} })}
debug disableClearable
renderInput={(params) => <TextField {...params} label="Tipe" margin="normal" />} renderInput={(params) => <TextField {...params} label="Tipe Persetujuan" margin="normal" />}
/> />
</div> </div>
<ReactDragListView {...dragProps}> <ReactDragListView {...dragProps}>
<ol style={{paddingLeft: 15}}> <ol style={{paddingLeft: 15}}>
{this.state.listApproval.map((item, index) => ( {this.state.listApproval.map((item, index) => (
<li key={index} style={{color: '#525252', fontSize: 14}}> <li key={index} style={{color: '#4b4b4b', fontSize: 14}}>
<a href="#" style={{color: '#525252'}}> <a href='#' style={{ color: '#4b4b4b', fontSize: '14px', cursor: 'auto', outline: 'none' }}>
<div className="grid grid-3x grid-mobile-none gap-20px" style={{width: '75%'}}> <div className="grid grid-3x grid-mobile-none gap-20px margin-bottom-20px" style={{width: '75%'}}>
{item.data.map((items, indexs) => {return(<label>{items.fullname}</label>)})} {item.data.map((items, indexs) => {return(<label>{items.fullname}</label>)})}
<label>{item.data.length == 1? '' : item.data[0].operator_type_name}</label> <label>{item.data.length == 1? '' : item.data[0].operator_type_name}</label>
</div> </div>
...@@ -178,64 +186,6 @@ export default class VisualisasiAM extends Component { ...@@ -178,64 +186,6 @@ export default class VisualisasiAM extends Component {
))} ))}
</ol> </ol>
</ReactDragListView> </ReactDragListView>
{/* <div className="grid grid-4x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>1. John Doe</label>
</div>
</div>
<div className="column-2">
</div>
<div className="column-3">
</div>
<div className="column-4">
</div>
</div> */}
<div className="grid grid-4x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>2. Barbara Rosa</label>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>Aneesa Hassan</label>
</div>
</div>
<div className="column-3">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>AND</label>
</div>
</div>
</div>
<div className="grid grid-4x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>3. Cole Park</label>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>Levison Robin</label>
</div>
</div>
<div className="column-3">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>OR</label>
</div>
</div>
</div>
<div className="grid grid-4x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>4. Madison Price</label>
</div>
</div>
<div className="column-2">
</div>
<div className="column-3">
</div>
</div>
</div> </div>
</div> </div>
<div className="row" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 15, paddingLeft: 15, paddingBottom: 25 }}> <div className="row" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 15, paddingLeft: 15, paddingBottom: 25 }}>
......
import React, { Component } from 'react';
import { Typography, Paper, createMuiTheme, MuiThemeProvider, TableCell, FormControlLabel, TextField, Input } from '@material-ui/core';
import MUIDataTable from 'mui-datatables';
import NumberFormat from 'react-number-format';
var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptionsFixedColumn();
const style = {
position: "sticky",
left: 0,
background: "white",
zIndex: 101,
};
const style2 = {
position: "sticky",
left: 420,
background: "white",
zIndex: 101
};
export default class BalanceSheet extends Component {
render() {
const columns = [{
name: "Account",
options: {
customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 102, backgroundColor: '#354960', width: 388 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ width: 388 }}>
{tableMeta.rowIndex == 0 || tableMeta.rowIndex == 1 ?
<span style={{ fontSize: 12, fontWeight: 'bold' }}>{val}</span>
:
tableMeta.rowIndex == 2 || tableMeta.rowIndex == 6 || tableMeta.rowIndex == 7 || tableMeta.rowIndex == 8 ?
<span style={{ fontSize: 12, marginLeft: 10 }}>{val}</span> :
<span style={{ fontSize: 12, marginLeft: 20}}>{val}</span>
}
</div>
)
}
}
}, {
name: "31 Dec 2020 Actual",
options: {
customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style2, top: 0, zIndex: 102, backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({
style: {
position: "sticky",
left: 420,
background: "white",
zIndex: 101
}
})
}
}, {
name: "January 2021",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (value, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'right' }}>
{tableMeta.rowIndex === 3 || tableMeta.rowIndex === 4 || tableMeta.rowIndex === 9 ?
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
// <Input
// value={this.formatValue(value)}
// style={{}}
// inputProps={{
// style: {
// color: "#5198ea",
// fontSize: 12,
// textAlign: 'right'
// }
// }}
// disableUnderline={true}
// inputStyle={{ color: 'red' }}
// />
<NumberFormat
thousandSeparator={true}
style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
value={value}
/>
}
onChange={event => updateValue(event.target.value)}
/>
</div> :
<span style={{ fontSize: 12, textAlign: 'right' }}>{value === "" ? "-" : value}</span>
}
</div>
)
}
}
}, {
name: "February 2021",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "March 2021",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "April 2021",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "May 2021",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "June 2021",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "31 Dec 2021 Total",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "31 Dec 2022 Total",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "31 Dec 2023 Total",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}
]
const dataTable = [
["TOTAL ASSETS", "11,247,249", "10,702,196"],
["TOTAL CURRENT ASSETS", "2,647,647", "2,058,898"],
["Cash & Cash Equivalent", "1,464,571", "729,743"],
["Cash & Bank Balance", "938,707", "265584"],
["Time & Call Deposit", "525,864", "464,159"],
["BI Deposit", "", ""],
["Marketable Securities", "150,250", "154,500"],
["Notes Receivable", "", ""],
["Accounts Receivable", "172,031", "97,112"],
["Trade Receivables - Third Party", "142,668", "77,480"],
]
return (
<div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}>
<div style={{ height: 78, backgroundColor: '#354960', flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Budget Tahunan - Tax Planning</Typography>
</div>
<div style={{ flex: 1, padding: 20, width: '100%' }}>
<Paper style={{ paddingTop: 10 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', fontWeight: 'bold', color: '#4b4b4b', margin: 10 }}>Budget Tahunan</Typography>
</div>
<div style={{ padding: 20 }}>
<div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>PT. XYZ</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Periode : 2021</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
</div>
<div style={{ marginTop: 20, width: '100%' }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={dataTable}
columns={columns}
options={options}
/>
</MuiThemeProvider>
</div>
</div>
</Paper>
</div>
</div>
);
}
}
...@@ -3,7 +3,6 @@ import clsx from 'clsx'; ...@@ -3,7 +3,6 @@ import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles'; import { makeStyles, useTheme } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer'; import Drawer from '@material-ui/core/Drawer';
import AppBar from '@material-ui/core/AppBar'; import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import List from '@material-ui/core/List'; import List from '@material-ui/core/List';
import CssBaseline from '@material-ui/core/CssBaseline'; import CssBaseline from '@material-ui/core/CssBaseline';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
...@@ -13,15 +12,11 @@ import MenuIcon from '@material-ui/icons/Menu'; ...@@ -13,15 +12,11 @@ import MenuIcon from '@material-ui/icons/Menu';
import ExpandMore from '@material-ui/icons/ExpandMore' import ExpandMore from '@material-ui/icons/ExpandMore'
import ExpandLess from '@material-ui/icons/ExpandLess' import ExpandLess from '@material-ui/icons/ExpandLess'
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import ListItem from '@material-ui/core/ListItem'; import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import MailIcon from '@material-ui/icons/Mail';
import Collapse from '@material-ui/core/Collapse'; import Collapse from '@material-ui/core/Collapse';
import DateFnsUtils from '@date-io/date-fns'; import DateFnsUtils from '@date-io/date-fns';
import { DateTimePicker, MuiPickersUtilsProvider } from "@material-ui/pickers"; import { MuiPickersUtilsProvider } from "@material-ui/pickers";
import localeID from 'date-fns/locale/id'; import localeID from 'date-fns/locale/id';
import { import {
...@@ -131,24 +126,29 @@ export default function MiniDrawer() { ...@@ -131,24 +126,29 @@ export default function MiniDrawer() {
const [selectedSubIndex, setSelectSub] = React.useState([]); const [selectedSubIndex, setSelectSub] = React.useState([]);
const [userFullname, setUserFullname] = React.useState("") const [userFullname, setUserFullname] = React.useState("")
const [userEmail, setUserEmail] = React.useState("") const [userEmail, setUserEmail] = React.useState("")
React.useEffect(() => { React.useEffect(() => {
if (userFullname == "" && userEmail == "") { if(userFullname == "" && userEmail == "") {
getUserData() getUserData()
} }
}) })
const getUserData = () => { const getUserData = () => {
let userId = localStorage.getItem(Constant.USER) let userId = localStorage.getItem(Constant.USER)
api.create().getDetailUser(userId).then((response) => { api.create().getDetailUser(userId).then((response) => {
if (response.data.status == 'success') { if (response.data.status == 'success') {
setUserFullname(response.data.data.fullname == null ? 'Anonym' : response.data.data.fullname) setUserFullname(response.data.data.fullname == null? 'Anonym' : response.data.data.fullname)
setUserEmail(response.data.data.email == null ? 'Anonym@123.xyz' : response.data.data.email) setUserEmail(response.data.data.email == null? 'Anonym@123.xyz' : response.data.data.email)
console.log(userEmail) console.log(userEmail)
} }
}) })
} }
const logout = () => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}
const handleDrawerOpen = () => { const handleDrawerOpen = () => {
setOpen(true); setOpen(true);
}; };
...@@ -172,11 +172,6 @@ export default function MiniDrawer() { ...@@ -172,11 +172,6 @@ export default function MiniDrawer() {
setSelectedIndex(e) setSelectedIndex(e)
} }
const logout = () => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
}
let { path, url } = useRouteMatch(); let { path, url } = useRouteMatch();
const { height, width } = UseWindowDimensions(); const { height, width } = UseWindowDimensions();
...@@ -209,20 +204,21 @@ export default function MiniDrawer() { ...@@ -209,20 +204,21 @@ export default function MiniDrawer() {
height: open ? 203 : 78, height: open ? 203 : 78,
paddingLeft: open ? null : 55, paddingLeft: open ? null : 55,
display: open ? null : 'grid', display: open ? null : 'grid',
alignSelf: open ? null : 'center' // paddingBottom: open ? 55 : null,
alignSelf: open? null : 'center'
}}> }}>
{open === true ? {open === true ?
<div style={{ display: 'flex', justifyContent: 'space-between', flex: 1, padding: 10 }}> <div style={{ display: 'flex', justifyContent: 'space-between', flex: 1, padding: 10 }}>
<img src={Images.triputra} alt="React Logo" style={{ height: 31, width: 151, alignSelf: 'center' }} /> <img src={Images.triputra} alt="React Logo" style={{ height: 31, width: 151, alignSelf: 'center' }} />
<IconButton onClick={handleDrawerClose} style={{ outline: 'none' }}> <IconButton onClick={handleDrawerClose} style={{outline: 'none'}}>
<ChevronLeftIcon style={{ fill: 'white' }} /> <ChevronLeftIcon style={{ fill: 'white' }} />
</IconButton> </IconButton>
</div> : </div> :
<IconButton <IconButton
color="inherit" color="inherit"
aria-label="open drawer" aria-label="open drawer"
style={{ outline: 'none' }} style={{outline: 'none'}}
onClick={handleDrawerOpen} onClick={handleDrawerOpen}
edge="start" edge="start"
className={clsx(classes.menuButton, { className={clsx(classes.menuButton, {
...@@ -288,7 +284,7 @@ export default function MiniDrawer() { ...@@ -288,7 +284,7 @@ export default function MiniDrawer() {
<List component="div" disablePadding> <List component="div" disablePadding>
{item.subItem.map((sub, indexs) => { {item.subItem.map((sub, indexs) => {
return ( return (
<Link to={`${url}/${sub.path}`}> <Link to={sub.label === "Logout" ? `/` : `${url}/${sub.path}`}>
<div style={{ paddingLeft: 5, }} className={selectedSubIndex === sub.label ? "active" : ""} onClick={() => sub.label === "Logout" ? logout() : selectSub(sub.label)}> <div style={{ paddingLeft: 5, }} className={selectedSubIndex === sub.label ? "active" : ""} onClick={() => sub.label === "Logout" ? logout() : selectSub(sub.label)}>
<ListItem button style={{ paddingLeft: 61 }}> <ListItem button style={{ paddingLeft: 61 }}>
<Typography style={{ fontFamily: 'nunito', color: '#525355', fontSize: 14 }}>{sub.label}</Typography> <Typography style={{ fontFamily: 'nunito', color: '#525355', fontSize: 14 }}>{sub.label}</Typography>
......
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Typography, CircularProgress, MuiThemeProvider, createMuiTheme } from '@material-ui/core'; import { Typography, MuiThemeProvider, createMuiTheme } from '@material-ui/core';
import MUIDataTable from "mui-datatables"; import MUIDataTable from "mui-datatables";
import Images from '../assets/Images'; import Images from '../assets/Images';
import DonutChart from 'react-d3-donut'; import DonutChart from 'react-d3-donut';
......
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Container, Row, Col } from "react-bootstrap"; import { makeStyles } from '@material-ui/core/styles';
import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles'; import { TextField, List, ListSubheader, Typography } from '@material-ui/core';
import { TextField } from '@material-ui/core'; import MinimizeIcon from '@material-ui/icons/Minimize';
import MenuItem from '@material-ui/core/MenuItem'; import AddIcon from '@material-ui/icons/Add';
import RemoveIcon from '@material-ui/icons/Remove';
import TreeView from '@material-ui/lab/TreeView';
import TreeItem from '@material-ui/lab/TreeItem';
const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
maxWidth: 500,
backgroundColor: theme.palette.background.paper,
},
nested: {
paddingLeft: theme.spacing(4),
},
}));
const type = [ const type = [
{ {
value: 'KPI', value: '1',
label: 'KPI', label: 'KPI',
}, },
{ {
value: 'Gatau', value: '2',
label: 'Gatau', label: 'KPI',
}, },
]; ];
const companies = [
{
value: '',
label: '',
},
{
value: '1',
label: 'TIA',
},
{
value: '2',
label: 'TIA',
},
];
export default class VisualReportItems extends Component { export default class VisualReportItems extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
visibleAM: false, open: false
visibleVisual: true
} }
} }
state = {
tasks: [
{name:"Angular",type:"lvl1"},
{name:"Typescript",type:"lvl1"},
{name:"React", type:"lvl2"},
{name:"Vue", type:"lvl3"}
]
}
componentDidMount() { componentDidMount() {
console.log(this.props.height) console.log(this.props.height)
} }
render() { render() {
// var tasks = {
// lvl1: [],
// lvl2: [],
// lvl3: []
// }
// this.state.tasks.forEach ((task) => {
// tasks[task.type].push(
// <div key={task.taskName}
// className="draggable"
// style = {{backgroundColor: task.bgcolor}}>
// {task.taskName}
// </div>
// );
// });
return ( return (
<div> <div>
...@@ -65,81 +69,101 @@ export default class VisualReportItems extends Component { ...@@ -65,81 +69,101 @@ export default class VisualReportItems extends Component {
</div> </div>
<div style={{ padding: 25, width: '100%' }}> <div style={{ padding: 25, width: '100%' }}>
<div style={{ width: '100%', padding: 25, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4'}}> <div style={{ width: '100%', padding: 25, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4'}}>
<label style={{ color: '#4b4b4b', fontSize: '16px', fontWeight: 'bold' }}>Hirarki Persetujuan</label> <label style={{ color: '#4b4b4b', fontSize: '16px', fontWeight: 'bold' }}>Hirarki Item Laporan</label>
<div className="" style={{ width: 250, marginTop: 8, marginBottom: 28 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} id="reportItems"
id="type" style={{ width: 250 }}
select select
label="Tipe Persetujuan" label="Item Laporan"
// value={this.state.periode} // onChange={handleChange}
onChange={(e) => null} helperText=""
> SelectProps={{
native: true,
}}
InputLabelProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
color: '#7e8085',
paddingLeft: 10
}
}}
inputProps={{
style: {
fontSize: 11,
fontWeight: 600,
fontFamily: 'Nunito Sans, sans-serif',
paddingLeft: 10
}
}}
>
{type.map((option) => ( {type.map((option) => (
<MenuItem key={option.value} value={option.value}> <option key={option.value} value={option.value}>
{option.label} {option.label}
</MenuItem> </option>
))} ))}
</TextField> </TextField>
</div> </div>
<div className="grid grid-4x grid-mobile-none gap-15px"> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<div className="column-1"> <TextField
<div className="margin-bottom-20px"> id="company"
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>1. John Doe</label> style={{ width: 250 }}
</div> select
</div> label="Perusahaan"
<div className="column-2"> // onChange={handleChange}
</div> helperText=""
<div className="column-3"> SelectProps={{
</div> native: true,
<div className="column-4"> }}
</div> InputLabelProps={{
</div> style: {
<div className="grid grid-4x grid-mobile-none gap-15px"> fontSize: 11,
<div className="column-1"> fontWeight: 600,
<div className="margin-bottom-20px"> fontFamily: 'Nunito Sans, sans-serif',
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>2. Barbara Rosa</label> color: '#7e8085',
</div> paddingLeft: 10
</div> }
<div className="column-2"> }}
<div className="margin-bottom-20px"> inputProps={{
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>Aneesa Hassan</label> style: {
</div> fontSize: 11,
</div> fontWeight: 600,
<div className="column-3"> fontFamily: 'Nunito Sans, sans-serif',
<div className="margin-bottom-20px"> paddingLeft: 10
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>AND</label> }
</div> }}
</div> >
</div> {companies.map((option) => (
<div className="grid grid-4x grid-mobile-none gap-15px"> <option key={option.value} value={option.value}>
<div className="column-1"> {option.label}
<div className="margin-bottom-20px"> </option>
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>3. Cole Park</label> ))}
</div> </TextField>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>Levison Robin</label>
</div>
</div>
<div className="column-3">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>OR</label>
</div>
</div>
</div>
<div className="grid grid-4x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>4. Madison Price</label>
</div>
</div>
<div className="column-2">
</div>
<div className="column-3">
</div>
</div> </div>
<div className="margin-top-30px">
<TreeView
defaultCollapseIcon={<RemoveIcon />}
defaultExpandIcon={< AddIcon/>}
>
<TreeItem nodeId="1" style={{margin: 10}} label="Accumulated Depreciation (negative value)">
<TreeItem nodeId="2" style={{margin: 20}} label="Beginning Balance" />
<TreeItem nodeId="3" style={{margin: 20}} label="Depreciation expense MTD (please fill in, if any)" />
<TreeItem nodeId="4" style={{margin: 20}} label="Disposal (positive value) (please fill in, if any)" />
</TreeItem>
<TreeItem nodeId="10" style={{margin: 20}} label="Control Gain/(Loss) on Fixed Assets" />
<TreeItem nodeId="5" style={{margin: 10}} label="Gain/(Loss) on Fixed Assets">
<TreeItem nodeId="6" style={{margin: 20}} label="NBV">
<TreeItem nodeId="7" style={{margin: 20}} label="Cost"/>
<TreeItem nodeId="9" style={{margin: 20}} label="Accm. Depreciation" />
</TreeItem>
<TreeItem nodeId="10" style={{margin: 20}} label="Proceed from sale or disposal of Fixed Assets (please fill in, if any)" />
</TreeItem>
</TreeView>
</div>
</div> </div>
</div> </div>
<div className="row" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 15, paddingLeft: 15, paddingBottom: 25 }}> <div className="row" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 15, paddingLeft: 15, paddingBottom: 25 }}>
......
import React, { Component } from "react"; import React, { Component } from "react";
import { Container, Row, Col } from "react-bootstrap"; import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import SearchIcon from '@material-ui/icons/Search'; import SearchIcon from '@material-ui/icons/Search';
import Images from "../../assets/Images"; import Images from "../../assets/Images";
import MUIDataTable from "mui-datatables"; import MUIDataTable from "mui-datatables";
...@@ -18,74 +17,6 @@ var ct = require("../../library/CustomTable"); ...@@ -18,74 +17,6 @@ var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable()); const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions(); 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 { export default class UserRole extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
...@@ -94,7 +25,8 @@ export default class UserRole extends Component { ...@@ -94,7 +25,8 @@ export default class UserRole extends Component {
indexData: {}, indexData: {},
add: false, add: false,
edit: false, edit: false,
visibleUser: true visibleUser: true,
buttonError: false,
} }
} }
...@@ -112,22 +44,15 @@ export default class UserRole extends Component { ...@@ -112,22 +44,15 @@ export default class UserRole extends Component {
getUser() { getUser() {
api.create().getUser().then((response) => { api.create().getUser().then((response) => {
// console.log(response) if (response.data.status === 'success') {
if (response.data.status == 'success') {
// console.log(response.data.data)
let data = response.data.data let data = response.data.data
let listData = data.map((item, index) => { let listData = data.sort((a,b) => a.user_id - b.user_id).map((item, index) => {
return [index, item.user_id, item.fullname, item.email, item.role_name, item.company, item.status] return [index, item.user_id, item.fullname === null? '-' : item.fullname, item.email, item.role_name, '-', item.status]
}) })
// console.log(listData)
this.setState({ listUser: listData }) this.setState({ listUser: listData })
// this.setState({listUser: response.data.data}, () => {
// console.log(this.state.listUser)
// })
} else { } else {
alert(response.data.message) alert(response.data.message)
} }
// console.log(response.data.data)
}) })
} }
...@@ -136,10 +61,10 @@ export default class UserRole extends Component { ...@@ -136,10 +61,10 @@ export default class UserRole extends Component {
"keyword": this.state.search "keyword": this.state.search
} }
api.create().searchUser(payload).then((response) => { api.create().searchUser(payload).then((response) => {
if (response.data.status == 'success') { if (response.data.status === 'success') {
let data = response.data.data let data = response.data.data
let listData = data.map((item, index) => { let listData = data.sort((a,b) => a.user_id - b.user_id).map((item, index) => {
return [index, item.user_id, item.fullname, item.email, item.role_name, item.company, item.status] return [index, item.user_id, item.fullname == null? '-' : item.fullname, item.email, item.role_name, '-', item.status]
}) })
this.setState({ listUser: listData }) this.setState({ listUser: listData })
} else { } else {
...@@ -155,18 +80,21 @@ export default class UserRole extends Component { ...@@ -155,18 +80,21 @@ export default class UserRole extends Component {
console.log(err); console.log(err);
} }
else { else {
let judul = resp.rows[0] // let judul = resp.rows[0]
let isi = resp.rows.slice(3) let isi = resp.rows.slice(3)
let payload = [] let payload = []
console.log(isi)
isi.map((item, index) => { isi.map((item, index) => {
payload.push({ if (item.length > 0) {
id: item.id, payload.push({
fullname: item[0], id: index + 1,
email: item[1], fullname: item[0],
role: item[2], email: item[1],
start_date: item[3], role: item[2],
end_date: item[4], start_date: item[3],
}) end_date: item[4],
})
}
}) })
let body = { let body = {
user: payload user: payload
...@@ -383,7 +311,7 @@ export default class UserRole extends Component { ...@@ -383,7 +311,7 @@ export default class UserRole extends Component {
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex', width: 50 }}> <div style={{ display: 'flex'}}>
{val} {val}
</div > </div >
); );
...@@ -394,7 +322,7 @@ export default class UserRole extends Component { ...@@ -394,7 +322,7 @@ export default class UserRole extends Component {
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex', width: 200 }}> <div style={{ display: 'flex'}}>
{titleCase(val)} {titleCase(val)}
</div > </div >
); );
...@@ -405,7 +333,7 @@ export default class UserRole extends Component { ...@@ -405,7 +333,7 @@ export default class UserRole extends Component {
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex', width: 150 }}> <div style={{ display: 'flex'}}>
{titleCase(val)} {titleCase(val)}
</div > </div >
); );
...@@ -416,7 +344,7 @@ export default class UserRole extends Component { ...@@ -416,7 +344,7 @@ export default class UserRole extends Component {
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex', width: 100 }}> <div style={{ display: 'flex'}}>
{titleCase(val)} {titleCase(val)}
</div > </div >
); );
...@@ -437,7 +365,7 @@ export default class UserRole extends Component { ...@@ -437,7 +365,7 @@ export default class UserRole extends Component {
return ( return (
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
{/* <Row> */} {/* <Row> */}
<div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} /> <div className={"main-color"} style={{ height: 199, width: '100%' }} />
{this.state.visibleUser ? <div> {this.state.visibleUser ? <div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}> <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> <label style={{ fontFamily: 'nunito', color: 'white', width: '20%', alignSelf: 'center', fontSize: 18 }}>Master Data - User</label>
...@@ -565,7 +493,7 @@ export default class UserRole extends Component { ...@@ -565,7 +493,7 @@ export default class UserRole extends Component {
</button> </button>
<button <button
type="button" type="button"
onClick={() => this.state.buttonError ? this.setState({ popupError: true }) : null} onClick={() => this.state.buttonError ? this.setState({ popupError: true }) : this.uploadUser()}
style={{}} style={{}}
> >
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
......
...@@ -5,7 +5,6 @@ import Autocomplete from '@material-ui/lab/Autocomplete'; ...@@ -5,7 +5,6 @@ import Autocomplete from '@material-ui/lab/Autocomplete';
import { titleCase } from '../../../library/Utils'; import { titleCase } from '../../../library/Utils';
import localeID from "date-fns/locale/id" import localeID from "date-fns/locale/id"
import format from "date-fns/format"; import format from "date-fns/format";
import * as R from 'ramda'
import RemoveIcon from '@material-ui/icons/Remove'; import RemoveIcon from '@material-ui/icons/Remove';
import AddIcon from '@material-ui/icons/Add'; import AddIcon from '@material-ui/icons/Add';
import { DatePicker } from '@material-ui/pickers'; import { DatePicker } from '@material-ui/pickers';
...@@ -64,7 +63,7 @@ export default class AddUser extends Component { ...@@ -64,7 +63,7 @@ export default class AddUser extends Component {
handleChange(e, type) { handleChange(e, type) {
let data = this.state let data = this.state
let isDate = type !== '' ? true : false let isDate = type !== '' ? true : false
if (isDate && type == 'start_date') { if (isDate && type === 'start_date') {
this.setState({ ...data, startDate: format(e, 'yyyy-MM-dd'), endDate: null, this.setState({ ...data, startDate: format(e, 'yyyy-MM-dd'), endDate: null,
errorRoleName: false, errorRoleName: false,
errorStartDate: false, errorStartDate: false,
...@@ -73,7 +72,7 @@ export default class AddUser extends Component { ...@@ -73,7 +72,7 @@ export default class AddUser extends Component {
msgErrorSD: '', msgErrorSD: '',
msgErrorED: '', msgErrorED: '',
}) })
} else if (isDate && type == 'end_date') { } else if (isDate && type === 'end_date') {
this.setState({ ...data, endDate: format(e, 'yyyy-MM-dd') , this.setState({ ...data, endDate: format(e, 'yyyy-MM-dd') ,
errorRoleName: false, errorRoleName: false,
errorStartDate: false, errorStartDate: false,
...@@ -110,7 +109,7 @@ export default class AddUser extends Component { ...@@ -110,7 +109,7 @@ export default class AddUser extends Component {
} }
api.create().createUser(payload).then((response) => { api.create().createUser(payload).then((response) => {
console.log(response) console.log(response)
if (String(response.data.status).toLocaleUpperCase == 'success') { if (String(response.data.status).toLocaleUpperCase === 'success') {
this.props.onClickClose() this.props.onClickClose()
this.props.refresh() this.props.refresh()
} else { } else {
...@@ -121,7 +120,7 @@ export default class AddUser extends Component { ...@@ -121,7 +120,7 @@ export default class AddUser extends Component {
getRole() { getRole() {
api.create().getRole().then((response) => { api.create().getRole().then((response) => {
if(response.data.status == 'success') { if(response.data.status === 'success') {
let data = response.data.data let data = response.data.data
let roleData = data.map((item) => { let roleData = data.map((item) => {
return { return {
...@@ -142,7 +141,7 @@ export default class AddUser extends Component { ...@@ -142,7 +141,7 @@ export default class AddUser extends Component {
getPerusahaan() { getPerusahaan() {
api.create().getPerusahaanHierarki().then((response) => { api.create().getPerusahaanHierarki().then((response) => {
if(response.data.status == 'success') { if(response.data.status === 'success') {
this.setState({listCompany: response.data.data}) this.setState({listCompany: response.data.data})
console.log(response.data.data) console.log(response.data.data)
} }
...@@ -150,14 +149,14 @@ export default class AddUser extends Component { ...@@ -150,14 +149,14 @@ export default class AddUser extends Component {
} }
handleItemChecked(item) { handleItemChecked(item) {
let indexID = this.state.company.findIndex((val) => val == item.company_id) let indexID = this.state.company.findIndex((val) => val === item.company_id)
return indexID == -1 ? false : true return indexID === -1 ? false : true
} }
handleItemClick(item) { handleItemClick(item) {
let indexID = this.state.company.findIndex((val) => val == item.company_id) let indexID = this.state.company.findIndex((val) => val === item.company_id)
let company = this.state.company let company = this.state.company
if (indexID == -1) { if (indexID === -1) {
company.push(item.company_id) company.push(item.company_id)
} else { } else {
company.splice(indexID, 1) company.splice(indexID, 1)
...@@ -341,7 +340,7 @@ export default class AddUser extends Component { ...@@ -341,7 +340,7 @@ export default class AddUser extends Component {
</div> </div>
<div style={{flexDirection:'column', display: 'flex', paddingLeft: 20, paddingRight: 20 }}> <div style={{flexDirection:'column', display: 'flex', paddingLeft: 20, paddingRight: 20 }}>
<Typography style={{fontSize: 12}}>{`Dibuat : ${format(this.state.date, 'dd MMMM yyyy', {locale: localeID})}`}</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> */} {/* <Typography style={{fontSize: 12}}>{`Diubah: ${this.state.tempData === null? '' : this.state.tempData.updated}`}</Typography> */}
</div> </div>
<Divider style={{margin: 20}}/> <Divider style={{margin: 20}}/>
<div style={{paddingLeft: 20, paddingRight: 20}}> <div style={{paddingLeft: 20, paddingRight: 20}}>
...@@ -351,8 +350,8 @@ export default class AddUser extends Component { ...@@ -351,8 +350,8 @@ export default class AddUser extends Component {
return( return(
<div> <div>
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}> <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
{item.childCompany.length > 0 && <span onClick={() => this.setState({ selectedIndex: index == this.state.selectedIndex ? 0 : index })} style={{ marginLeft: 7, marginRight: 2 }}> {item.childCompany.length > 0 && <span onClick={() => this.setState({ selectedIndex: index === this.state.selectedIndex ? 0 : index })} style={{ marginLeft: 7, marginRight: 2 }}>
{index == this.state.selectedIndex ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />} {index === this.state.selectedIndex ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
</span>} </span>}
<span> <span>
<CustomCheckbox <CustomCheckbox
...@@ -364,10 +363,10 @@ export default class AddUser extends Component { ...@@ -364,10 +363,10 @@ export default class AddUser extends Component {
</div> </div>
{item.childCompany.length > 0 && item.childCompany.map((items,indexs) => { {item.childCompany.length > 0 && item.childCompany.map((items,indexs) => {
return ( return (
<Collapse in={index == this.state.selectedIndex} timeout="auto" unmountOnExit> <Collapse in={index === this.state.selectedIndex} timeout="auto" unmountOnExit>
<div style={{ paddingLeft: 60, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}> <div style={{ paddingLeft: 60, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
{/* {item.sub_menu.length > 0 && <span onClick={() => this.setState({ selectedIndex: index == this.state.selectedIndex ? 0 : index })} style={{ marginLeft: 7, marginRight: 2 }}> {/* {item.sub_menu.length > 0 && <span onClick={() => this.setState({ selectedIndex: index === this.state.selectedIndex ? 0 : index })} style={{ marginLeft: 7, marginRight: 2 }}>
{index == this.state.selectedIndex ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />} {index === this.state.selectedIndex ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
</span>} */} </span>} */}
{/* <RemoveIcon color={'action'} fontSize={'small'} /> */} {/* <RemoveIcon color={'action'} fontSize={'small'} /> */}
<span> <span>
......
...@@ -5,9 +5,9 @@ import { titleCase } from '../../../library/Utils'; ...@@ -5,9 +5,9 @@ import { titleCase } from '../../../library/Utils';
import Autocomplete from '@material-ui/lab/Autocomplete'; import Autocomplete from '@material-ui/lab/Autocomplete';
import { DatePicker } from '@material-ui/pickers'; import { DatePicker } from '@material-ui/pickers';
import format from "date-fns/format"; import format from "date-fns/format";
import * as R from 'ramda'
import RemoveIcon from '@material-ui/icons/Remove'; import RemoveIcon from '@material-ui/icons/Remove';
import AddIcon from '@material-ui/icons/Add'; import AddIcon from '@material-ui/icons/Add';
import * as R from 'ramda'
const CustomCheckbox = withStyles({ const CustomCheckbox = withStyles({
root: { root: {
...@@ -52,46 +52,58 @@ export default class EditUser extends Component { ...@@ -52,46 +52,58 @@ export default class EditUser extends Component {
componentDidMount() { componentDidMount() {
this.getDetailUser() this.getDetailUser()
this.getRole()
this.getPerusahaan() this.getPerusahaan()
} }
handleChange(e, type) { handleChange(e, type) {
let data = this.state let data = this.state
let isDate = type !== '' ? true : false let isDate = type !== '' ? true : false
if (isDate && type == 'start_date') { if (isDate && type === 'start_date') {
this.setState({ ...data, tempData: { ...this.state.tempData, start_date: format(e, 'yyyy-MM-dd'), end_date: null }, this.setState({ ...data, tempData: { ...this.state.tempData, start_date: format(e, 'yyyy-MM-dd'), end_date: null },
errorFullname: false,
errorEmail: false,
errorRoleName: false, errorRoleName: false,
errorStartDate: false, errorStartDate: false,
errorEndDate: false, errorEndDate: false,
msgErrorFN: '',
msgErrorEM: '',
msgErrorRN: '', msgErrorRN: '',
msgErrorSD: '', msgErrorSD: '',
msgErrorED: '', msgErrorED: '',
}) })
} else if (isDate && type == 'end_date') { } else if (isDate && type === 'end_date') {
this.setState({ ...data, tempData: { ...this.state.tempData, end_date: format(e, 'yyyy-MM-dd') }, this.setState({ ...data, tempData: { ...this.state.tempData, end_date: format(e, 'yyyy-MM-dd') },
errorFullname: false,
errorEmail: false,
errorRoleName: false, errorRoleName: false,
errorStartDate: false, errorStartDate: false,
errorEndDate: false, errorEndDate: false,
msgErrorFN: '',
msgErrorEM: '',
msgErrorRN: '', msgErrorRN: '',
msgErrorSD: '', msgErrorSD: '',
msgErrorED: '', msgErrorED: '',
}) })
} else { } else {
this.setState({ ...data, tempData: { ...this.state.tempData, [e.target.name]: e.target.value }, this.setState({ ...data, tempData: { ...this.state.tempData, [e.target.name]: e.target.value },
errorFullname: false,
errorEmail: false,
errorRoleName: false, errorRoleName: false,
errorStartDate: false, errorStartDate: false,
errorEndDate: false, errorEndDate: false,
msgErrorFN: '',
msgErrorEM: '',
msgErrorRN: '', msgErrorRN: '',
msgErrorSD: '', msgErrorSD: '',
msgErrorED: '', msgErrorED: '',
}) })
} }
} }
getDetailUser() { getDetailUser() {
api.create().getDetailUser(this.state.paramsId).then((response) => { api.create().getDetailUser(this.state.paramsId).then((response) => {
if (response.data.status == 'success') { this.getRole()
if (response.data.status === 'success') {
this.setState({tempData: response.data.data, company: response.data.data.company}) this.setState({tempData: response.data.data, company: response.data.data.company})
console.log(response.data.data) console.log(response.data.data)
} else { } else {
...@@ -101,7 +113,23 @@ export default class EditUser extends Component { ...@@ -101,7 +113,23 @@ export default class EditUser extends Component {
} }
validasi() { validasi() {
this.updateUser() if (R.isEmpty(this.state.tempData.fullname)) {
this.setState({errorFullname: true, msgErrorFN: 'Nama Lengkap tidak boleh kosong'})
} else if (R.isEmpty(this.state.tempData.email)) {
this.setState({errorEmail: true, msgErrorEM: 'Email tidak boleh kosong'})
} else if (R.isEmpty(this.state.tempData.role_name)) {
this.setState({errorRoleName: true, msgErrorRN: 'Role Name tidak boleh kosong'})
} else if (R.isNil(this.state.tempData.start_date)) {
this.setState({errorStartDate: true, msgErrorSD: 'Start Date tidak boleh kosong'})
} else if (R.isNil(this.state.tempData.end_date)) {
this.setState({errorEndDate: true, msgErrorED: 'End Date tidak boleh kosong'})
}
// else if (this.state.privileges.length < 1) {
// alert('Hak Akses belum di pilih !!')
// }
else {
this.updateUser()
}
} }
updateUser() { updateUser() {
...@@ -116,7 +144,7 @@ export default class EditUser extends Component { ...@@ -116,7 +144,7 @@ export default class EditUser extends Component {
} }
api.create().updateUser(payload).then((response) => { api.create().updateUser(payload).then((response) => {
if (response.data.status == 'success') { if (response.data.status === 'success') {
this.props.onClickClose() this.props.onClickClose()
this.props.refresh() this.props.refresh()
} else { } else {
...@@ -127,7 +155,7 @@ export default class EditUser extends Component { ...@@ -127,7 +155,7 @@ export default class EditUser extends Component {
getRole() { getRole() {
api.create().getRole().then((response) => { api.create().getRole().then((response) => {
if(response.data.status == 'success') { if(response.data.status === 'success') {
let data = response.data.data let data = response.data.data
let roleData = data.map((item) => { let roleData = data.map((item) => {
return { return {
...@@ -140,8 +168,8 @@ export default class EditUser extends Component { ...@@ -140,8 +168,8 @@ export default class EditUser extends Component {
getOptionLabel: (option) => titleCase(option.role_name), getOptionLabel: (option) => titleCase(option.role_name),
}; };
let index = roleData.findIndex((val) => val.role_id == this.state.tempData.role_id) let index = roleData.findIndex((val) => val.role_id === this.state.tempData.role_id)
this.setState({listRole: defaultProps, role: index == -1? roleData[0] : roleData[index]}) this.setState({listRole: defaultProps, role: index === -1? roleData[0] : roleData[index]})
} else { } else {
alert(response.data.message) alert(response.data.message)
} }
...@@ -150,7 +178,7 @@ export default class EditUser extends Component { ...@@ -150,7 +178,7 @@ export default class EditUser extends Component {
getPerusahaan() { getPerusahaan() {
api.create().getPerusahaanHierarki().then((response) => { api.create().getPerusahaanHierarki().then((response) => {
if(response.data.status == 'success') { if(response.data.status === 'success') {
this.setState({listCompany: response.data.data}) this.setState({listCompany: response.data.data})
console.log(response.data.data) console.log(response.data.data)
} }
...@@ -158,14 +186,14 @@ export default class EditUser extends Component { ...@@ -158,14 +186,14 @@ export default class EditUser extends Component {
} }
handleItemChecked(item) { handleItemChecked(item) {
let indexID = this.state.company.findIndex((val) => val == item.company_id) let indexID = this.state.company.findIndex((val) => val === item.company_id)
return indexID == -1 ? false : true return indexID === -1 ? false : true
} }
handleItemClick(item) { handleItemClick(item) {
let indexID = this.state.company.findIndex((val) => val == item.company_id) let indexID = this.state.company.findIndex((val) => val === item.company_id)
let company = this.state.company let company = this.state.company
if (indexID == -1) { if (indexID === -1) {
company.push(item.company_id) company.push(item.company_id)
} else { } else {
company.splice(indexID, 1) company.splice(indexID, 1)
...@@ -204,7 +232,7 @@ export default class EditUser extends Component { ...@@ -204,7 +232,7 @@ export default class EditUser extends Component {
disabled disabled
// id="outlined-read-only-input" // id="outlined-read-only-input"
variant="filled" variant="filled"
value={this.state.tempData == null? '' : this.state.tempData.user_id} value={this.state.tempData === null? '' : this.state.tempData.user_id}
onChange={(e) => null} onChange={(e) => null}
> >
{/* {periode.map((option) => ( {/* {periode.map((option) => (
...@@ -223,10 +251,11 @@ export default class EditUser extends Component { ...@@ -223,10 +251,11 @@ export default class EditUser extends Component {
id="fullname" id="fullname"
name="fullname" name="fullname"
label="Nama Lengkap" label="Nama Lengkap"
value={this.state.tempData == null? '' : this.state.tempData.fullname} value={this.state.tempData === null? '' : this.state.tempData.fullname}
onChange={(e) => this.handleChange(e, '')} onChange={(e) => this.handleChange(e, '')}
// defaultValue="Default Value" // defaultValue="Default Value"
// helperText="Some important text" error={this.state.errorFullname}
helperText={this.state.msgErrorFN}
/> />
</div> </div>
</div> </div>
...@@ -240,10 +269,10 @@ export default class EditUser extends Component { ...@@ -240,10 +269,10 @@ export default class EditUser extends Component {
id="email" id="email"
name="email" name="email"
label="Email" label="Email"
value={this.state.tempData == null? '' : this.state.tempData.email} value={this.state.tempData === null? '' : this.state.tempData.email}
onChange={(e) => this.handleChange(e, '')} onChange={(e) => this.handleChange(e, '')}
// defaultValue="Default Value" error={this.state.errorEmail}
// helperText="Some important text" helperText={this.state.msgErrorEM}
/> />
</div> </div>
</div> </div>
...@@ -255,6 +284,7 @@ export default class EditUser extends Component { ...@@ -255,6 +284,7 @@ export default class EditUser extends Component {
id="role" id="role"
onChange={(event, newInputValue) => this.setState({role: newInputValue})} onChange={(event, newInputValue) => this.setState({role: newInputValue})}
debug debug
renderInput={(params) => <TextField {...params} label="Role" margin="normal" style={{marginTop: 7}}/>} renderInput={(params) => <TextField {...params} label="Role" margin="normal" style={{marginTop: 7}}/>}
value={this.state.role} value={this.state.role}
/> />
...@@ -270,14 +300,13 @@ export default class EditUser extends Component { ...@@ -270,14 +300,13 @@ export default class EditUser extends Component {
id="startDate" id="startDate"
label="Berlaku Mulai" label="Berlaku Mulai"
format="dd MMMM yyyy" format="dd MMMM yyyy"
value={this.state.tempData == null ? null : this.state.tempData.start_date} value={this.state.tempData === null ? null : this.state.tempData.start_date}
error={this.state.errorStartDate} error={this.state.errorStartDate}
helperText={this.state.msgErrorSD} helperText={this.state.msgErrorSD}
onChange={(e) => this.handleChange(e, 'start_date')} onChange={(e) => this.handleChange(e, 'start_date')}
KeyboardButtonProps={{ KeyboardButtonProps={{
'aria-label': 'change date', 'aria-label': 'change date',
}} }}
style={{ padding: 0, margin: 0, width: '100%' }} style={{ padding: 0, margin: 0, width: '100%' }}
/> />
</div> </div>
...@@ -290,10 +319,10 @@ export default class EditUser extends Component { ...@@ -290,10 +319,10 @@ export default class EditUser extends Component {
id="endDate" id="endDate"
label="Berlaku Hingga" label="Berlaku Hingga"
format="dd MMMM yyyy" format="dd MMMM yyyy"
value={this.state.tempData == null ? null : this.state.tempData.end_date} value={this.state.tempData === null ? null : this.state.tempData.end_date}
error={this.state.errorEndDate} error={this.state.errorEndDate}
helperText={this.state.msgErrorED} helperText={this.state.msgErrorED}
minDate={this.state.tempData == null ? null : this.state.tempData.start_date} minDate={this.state.tempData === null ? null : this.state.tempData.start_date}
onChange={(e) => this.handleChange(e, 'end_date')} onChange={(e) => this.handleChange(e, 'end_date')}
KeyboardButtonProps={{ KeyboardButtonProps={{
'aria-label': 'change date', 'aria-label': 'change date',
...@@ -315,7 +344,7 @@ export default class EditUser extends Component { ...@@ -315,7 +344,7 @@ export default class EditUser extends Component {
disabled disabled
// id="outlined-read-only-input" // id="outlined-read-only-input"
variant="filled" variant="filled"
value={this.state.tempData == null? '' : this.state.tempData.status} value={this.state.tempData === null? '' : this.state.tempData.status}
> >
{/* {periode.map((option) => ( {/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}> <MenuItem key={option.value} value={option.value}>
...@@ -336,7 +365,7 @@ export default class EditUser extends Component { ...@@ -336,7 +365,7 @@ export default class EditUser extends Component {
disabled disabled
// id="outlined-read-only-input" // id="outlined-read-only-input"
variant="filled" variant="filled"
value={this.state.tempData == null? '' : this.state.tempData.is_expired} value={this.state.tempData === null? '' : this.state.tempData.is_expired}
> >
{/* {periode.map((option) => ( {/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}> <MenuItem key={option.value} value={option.value}>
...@@ -348,8 +377,8 @@ export default class EditUser extends Component { ...@@ -348,8 +377,8 @@ export default class EditUser extends Component {
</div> </div>
</div> </div>
<div style={{flexDirection:'column', display: 'flex', paddingLeft: 20, paddingRight: 20 }}> <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}}>{`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}}>{`Diubah: ${this.state.tempData === null? '' : this.state.tempData.updated}`}</Typography>
</div> </div>
<Divider style={{margin: 20}}/> <Divider style={{margin: 20}}/>
<div style={{paddingLeft: 20, paddingRight: 20}}> <div style={{paddingLeft: 20, paddingRight: 20}}>
...@@ -359,8 +388,8 @@ export default class EditUser extends Component { ...@@ -359,8 +388,8 @@ export default class EditUser extends Component {
return( return(
<div> <div>
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}> <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
{item.childCompany.length > 0 && <span onClick={() => this.setState({ selectedIndex: index == this.state.selectedIndex ? 0 : index })} style={{ marginLeft: 7, marginRight: 2 }}> {item.childCompany.length > 0 && <span onClick={() => this.setState({ selectedIndex: index === this.state.selectedIndex ? 0 : index })} style={{ marginLeft: 7, marginRight: 2 }}>
{index == this.state.selectedIndex ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />} {index === this.state.selectedIndex ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
</span>} </span>}
<span> <span>
<CustomCheckbox <CustomCheckbox
...@@ -372,10 +401,10 @@ export default class EditUser extends Component { ...@@ -372,10 +401,10 @@ export default class EditUser extends Component {
</div> </div>
{item.childCompany.length > 0 && item.childCompany.map((items,indexs) => { {item.childCompany.length > 0 && item.childCompany.map((items,indexs) => {
return ( return (
<Collapse in={index == this.state.selectedIndex} timeout="auto" unmountOnExit> <Collapse in={index === this.state.selectedIndex} timeout="auto" unmountOnExit>
<div style={{ paddingLeft: 60, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}> <div style={{ paddingLeft: 60, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
{/* {item.sub_menu.length > 0 && <span onClick={() => this.setState({ selectedIndex: index == this.state.selectedIndex ? 0 : index })} style={{ marginLeft: 7, marginRight: 2 }}> {/* {item.sub_menu.length > 0 && <span onClick={() => this.setState({ selectedIndex: index === this.state.selectedIndex ? 0 : index })} style={{ marginLeft: 7, marginRight: 2 }}>
{index == this.state.selectedIndex ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />} {index === this.state.selectedIndex ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
</span>} */} </span>} */}
{/* <RemoveIcon color={'action'} fontSize={'small'} /> */} {/* <RemoveIcon color={'action'} fontSize={'small'} /> */}
<span> <span>
......
import React, { Component, memo } from "react"; import React, { Component, memo } from "react";
import { Container, Row, Col } from "react-bootstrap"; import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import SearchIcon from '@material-ui/icons/Search'; import SearchIcon from '@material-ui/icons/Search';
import Images from "../../assets/Images"; import Images from "../../assets/Images";
import MUIDataTable from "mui-datatables"; import MUIDataTable from "mui-datatables";
...@@ -10,7 +9,6 @@ import api from "../../api"; ...@@ -10,7 +9,6 @@ import api from "../../api";
import { titleCase } from "../../library/Utils"; import { titleCase } from "../../library/Utils";
import InputAdornment from '@material-ui/core/InputAdornment'; import InputAdornment from '@material-ui/core/InputAdornment';
import TextField from '@material-ui/core/TextField'; import TextField from '@material-ui/core/TextField';
import AccountCircle from '@material-ui/icons/AccountCircle';
var ct = require("../../library/CustomTable"); var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable()); const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions(); const options = ct.customOptions();
...@@ -42,9 +40,9 @@ class UserRole extends Component { ...@@ -42,9 +40,9 @@ class UserRole extends Component {
getRole() { getRole() {
api.create().getRole().then((response) => { api.create().getRole().then((response) => {
// console.log(response) // console.log(response)
if (response.data.status == 'success') { if (response.data.status === 'success') {
let data = response.data.data let data = response.data.data
let listData = data.map((item,index) => { let listData = data.sort((a,b) => a.role_id - b.role_id).map((item,index) => {
return [index, item.role_id, item.role_name, item.access, item.status] return [index, item.role_id, item.role_name, item.access, item.status]
}) })
// console.log(listData) // console.log(listData)
...@@ -65,9 +63,9 @@ class UserRole extends Component { ...@@ -65,9 +63,9 @@ class UserRole extends Component {
"keyword": this.state.search "keyword": this.state.search
} }
api.create().searchRole(payload).then((response) => { api.create().searchRole(payload).then((response) => {
if (response.data.status == 'success') { if (response.data.status === 'success') {
let data = response.data.data let data = response.data.data
let listData = data.map((item,index) => { let listData = data.sort((a,b) => a.role_id - b.role_id).map((item,index) => {
return [index, item.role_id, item.role_name, item.access, item.status] return [index, item.role_id, item.role_name, item.access, item.status]
}) })
this.setState({listRole: listData}) this.setState({listRole: listData})
...@@ -168,13 +166,6 @@ class UserRole extends Component { ...@@ -168,13 +166,6 @@ class UserRole extends Component {
} }
} }
}] }]
const data = [
["1", "1", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
["2", "2", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
["3", "3", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
["4", "4", "Laporan Bulanan - September 2020", "0 (20 Oktober 2020)", "Belum Disetujui"],
["5", "5", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
]
return ( return (
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
{/* <Row> */} {/* <Row> */}
......
import React, { Component } from 'react'; import React, { Component } from 'react';
import { TextField, Divider, Typography, Checkbox, withStyles, Collapse, MuiThemeProvider } from '@material-ui/core'; import { TextField, Divider, Typography, Checkbox, withStyles, Collapse } from '@material-ui/core';
import api from '../../../api'; import api from '../../../api';
import AddIcon from '@material-ui/icons/Add'; import AddIcon from '@material-ui/icons/Add';
import RemoveIcon from '@material-ui/icons/Remove'; import RemoveIcon from '@material-ui/icons/Remove';
import { DateTimePicker, KeyboardDatePicker, DatePicker} from "@material-ui/pickers"; import {DatePicker} from "@material-ui/pickers";
import format from "date-fns/format"; import format from "date-fns/format";
import localeID from "date-fns/locale/id" import localeID from "date-fns/locale/id"
import * as R from 'ramda' import * as R from 'ramda'
...@@ -54,7 +54,7 @@ export default class AddRole extends Component { ...@@ -54,7 +54,7 @@ export default class AddRole extends Component {
handleChange(e, type) { handleChange(e, type) {
let data = this.state let data = this.state
let isDate = type !== ''? true : false let isDate = type !== ''? true : false
if (isDate && type == 'start_date') { if (isDate && type === 'start_date') {
this.setState({...data, startDate: format(e, 'yyyy-MM-dd'), endDate: null, this.setState({...data, startDate: format(e, 'yyyy-MM-dd'), endDate: null,
errorRoleName: false, errorRoleName: false,
errorStartDate: false, errorStartDate: false,
...@@ -63,7 +63,7 @@ export default class AddRole extends Component { ...@@ -63,7 +63,7 @@ export default class AddRole extends Component {
msgErrorSD: '', msgErrorSD: '',
msgErrorED: '', msgErrorED: '',
}) })
} else if (isDate && type == 'end_date') { } else if (isDate && type === 'end_date') {
this.setState({...data, endDate : format(e, 'yyyy-MM-dd'), this.setState({...data, endDate : format(e, 'yyyy-MM-dd'),
errorRoleName: false, errorRoleName: false,
errorStartDate: false, errorStartDate: false,
...@@ -111,7 +111,7 @@ export default class AddRole extends Component { ...@@ -111,7 +111,7 @@ export default class AddRole extends Component {
// console.log(payload) // console.log(payload)
api.create().addRole(payload).then((response) => { api.create().addRole(payload).then((response) => {
console.log(response) console.log(response)
if (response.data.status == 'success') { if (response.data.status === 'success') {
this.props.refresh() this.props.refresh()
this.props.onClickClose() this.props.onClickClose()
} else { } else {
...@@ -122,7 +122,7 @@ export default class AddRole extends Component { ...@@ -122,7 +122,7 @@ export default class AddRole extends Component {
getMenu() { getMenu() {
api.create().getMenu().then((response) => { api.create().getMenu().then((response) => {
if (response.data.status == 'success') { if (response.data.status === 'success') {
this.setState({menuData: response.data.data}) this.setState({menuData: response.data.data})
} else { } else {
alert(response.data.message) alert(response.data.message)
...@@ -131,14 +131,14 @@ export default class AddRole extends Component { ...@@ -131,14 +131,14 @@ export default class AddRole extends Component {
} }
handleItemChecked(item) { handleItemChecked(item) {
let indexID = this.state.privileges.findIndex((val) => val.menu_id == item.menu_id) let indexID = this.state.privileges.findIndex((val) => val.menu_id === item.menu_id)
return indexID == -1? false : true return indexID === -1? false : true
} }
handleItemClick(item) { handleItemClick(item) {
let indexID = this.state.privileges.findIndex((val) => val.menu_id == item.menu_id) let indexID = this.state.privileges.findIndex((val) => val.menu_id === item.menu_id)
let privileges = this.state.privileges let privileges = this.state.privileges
if (indexID == -1) { if (indexID === -1) {
privileges.push({ privileges.push({
menu_id: item.menu_id, menu_id: item.menu_id,
button_id: [1,2,3] button_id: [1,2,3]
...@@ -150,36 +150,33 @@ export default class AddRole extends Component { ...@@ -150,36 +150,33 @@ export default class AddRole extends Component {
} }
handleSubItemChecked(item, index) { handleSubItemChecked(item, index) {
let indexID = this.state.privileges.findIndex((val) => val.menu_id == item.menu_id) let indexID = this.state.privileges.findIndex((val) => val.menu_id === item.menu_id)
let value = false let value = false
if (indexID == -1) { if (indexID === -1) {
value = false value = false
} else { } else {
let arrayButton = this.state.privileges[indexID].button_id let indexButtonID = this.state.privileges[indexID].button_id.findIndex((val) => val === index)
// console.log(arrayButton) if (indexButtonID === -1) {
let indexButtonID = this.state.privileges[indexID].button_id.findIndex((val) => val == index)
// console.log(indexButtonID)
if (indexButtonID == -1) {
value = false value = false
} else { } else {
value = true value = true
} }
} }
return indexID == -1? value : value return indexID === -1? value : value
} }
handleSubItemClick(item, index) { handleSubItemClick(item, index) {
let indexID = this.state.privileges.findIndex((val) => val.menu_id == item.menu_id) 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 indexButtonID = this.state.privileges[indexID].button_id.findIndex((val) => val === index)
let privileges = this.state.privileges let privileges = this.state.privileges
let button_id = privileges[indexID].button_id let button_id = privileges[indexID].button_id
if (indexButtonID == -1) { if (indexButtonID === -1) {
button_id.push(index) button_id.push(index)
} else { } else {
button_id.splice(indexButtonID,1) button_id.splice(indexButtonID,1)
} }
privileges[indexID].button_id = button_id privileges[indexID].button_id = button_id
if (button_id.length == 0) { if (button_id.length === 0) {
privileges.splice(indexID,1) privileges.splice(indexID,1)
} }
this.setState({privileges}) this.setState({privileges})
...@@ -317,7 +314,7 @@ export default class AddRole extends Component { ...@@ -317,7 +314,7 @@ export default class AddRole extends Component {
</div> </div>
<div style={{flexDirection:'column', display: 'flex', paddingLeft: 20, paddingRight: 20 }}> <div style={{flexDirection:'column', display: 'flex', paddingLeft: 20, paddingRight: 20 }}>
<Typography style={{fontSize: 12}}>{`Dibuat : ${format(this.state.date, 'dd MMMM yyyy', {locale: localeID})}`}</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> */} {/* <Typography style={{fontSize: 12}}>{`Diubah: ${this.state.tempData === null? '' : this.state.tempData.updated}`}</Typography> */}
</div> </div>
<Divider style={{margin: 20}}/> <Divider style={{margin: 20}}/>
<div style={{paddingLeft: 20, paddingRight: 20}}> <div style={{paddingLeft: 20, paddingRight: 20}}>
...@@ -345,8 +342,8 @@ export default class AddRole extends Component { ...@@ -345,8 +342,8 @@ export default class AddRole extends Component {
<div> <div>
<div className="grid grid-2x grid-mobile-none gap-15px padding-left-10px padding-right-10px"> <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', justifyContent: 'flex-start'}}> <div className="column-1" style={{display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start'}}>
{item.sub_menu.length > 0 && <span onClick={() => this.setState({selectedIndex: index == this.state.selectedIndex? 0 : index})} style={{marginLeft: 7, marginRight: 2}}> {item.sub_menu.length > 0 && <span onClick={() => this.setState({selectedIndex: index === this.state.selectedIndex? 0 : index})} style={{marginLeft: 7, marginRight: 2}}>
{index == this.state.selectedIndex? <RemoveIcon color={'action'} fontSize={'small'}/> : <AddIcon color={'action'} fontSize={'small'}/>} {index === this.state.selectedIndex? <RemoveIcon color={'action'} fontSize={'small'}/> : <AddIcon color={'action'} fontSize={'small'}/>}
</span>} </span>}
<span> <span>
<CustomCheckbox <CustomCheckbox
...@@ -384,7 +381,7 @@ export default class AddRole extends Component { ...@@ -384,7 +381,7 @@ export default class AddRole extends Component {
</div> </div>
{item.sub_menu.length > 0 && item.sub_menu.map((items,indexs) => { {item.sub_menu.length > 0 && item.sub_menu.map((items,indexs) => {
return( return(
<Collapse in={index == this.state.selectedIndex} timeout="auto" unmountOnExit> <Collapse in={index === this.state.selectedIndex} timeout="auto" unmountOnExit>
<div className="grid grid-2x grid-mobile-none gap-15px padding-left-10px padding-right-10px"> <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', paddingLeft: 50}}> <div className="column-1" style={{display: 'flex', flexDirection: 'row', alignItems: 'center', paddingLeft: 50}}>
<CustomCheckbox <CustomCheckbox
......
import React, { Component } from 'react'; import React, { Component } from 'react';
import { TextField, Divider, Typography, Checkbox, withStyles, Collapse, MuiThemeProvider } from '@material-ui/core'; import { TextField, Divider, Typography, Checkbox, withStyles, Collapse } from '@material-ui/core';
import api from '../../../api'; import api from '../../../api';
import AddIcon from '@material-ui/icons/Add'; import AddIcon from '@material-ui/icons/Add';
import RemoveIcon from '@material-ui/icons/Remove'; import RemoveIcon from '@material-ui/icons/Remove';
import { DateTimePicker, KeyboardDatePicker, DatePicker } from "@material-ui/pickers"; import { DatePicker } from "@material-ui/pickers";
import format from "date-fns/format"; import format from "date-fns/format";
import * as R from 'ramda' import * as R from 'ramda'
const CustomCheckbox = withStyles({ const CustomCheckbox = withStyles({
...@@ -50,7 +50,7 @@ export default class EditRole extends Component { ...@@ -50,7 +50,7 @@ export default class EditRole extends Component {
handleChange(e, type) { handleChange(e, type) {
let data = this.state let data = this.state
let isDate = type !== '' ? true : false let isDate = type !== '' ? true : false
if (isDate && type == 'start_date') { if (isDate && type === 'start_date') {
this.setState({ ...data, tempData: { ...this.state.tempData, start_date: format(e, 'yyyy-MM-dd'), end_date: null }, this.setState({ ...data, tempData: { ...this.state.tempData, start_date: format(e, 'yyyy-MM-dd'), end_date: null },
errorRoleName: false, errorRoleName: false,
errorStartDate: false, errorStartDate: false,
...@@ -59,7 +59,7 @@ export default class EditRole extends Component { ...@@ -59,7 +59,7 @@ export default class EditRole extends Component {
msgErrorSD: '', msgErrorSD: '',
msgErrorED: '', msgErrorED: '',
}) })
} else if (isDate && type == 'end_date') { } else if (isDate && type === 'end_date') {
this.setState({ ...data, tempData: { ...this.state.tempData, end_date: format(e, 'yyyy-MM-dd') }, this.setState({ ...data, tempData: { ...this.state.tempData, end_date: format(e, 'yyyy-MM-dd') },
errorRoleName: false, errorRoleName: false,
errorStartDate: false, errorStartDate: false,
...@@ -83,7 +83,7 @@ export default class EditRole extends Component { ...@@ -83,7 +83,7 @@ export default class EditRole extends Component {
getDetailRole() { getDetailRole() {
api.create().getDetailRole(this.state.paramsId).then((response) => { api.create().getDetailRole(this.state.paramsId).then((response) => {
if (response.data.status == 'success') { if (response.data.status === 'success') {
this.setState({ tempData: response.data.data, privileges: response.data.data.privileges }) this.setState({ tempData: response.data.data, privileges: response.data.data.privileges })
console.log(response.data.data.start_date) console.log(response.data.data.start_date)
} else { } else {
...@@ -119,7 +119,7 @@ export default class EditRole extends Component { ...@@ -119,7 +119,7 @@ export default class EditRole extends Component {
// console.log(payload) // console.log(payload)
api.create().editRole(payload).then((response) => { api.create().editRole(payload).then((response) => {
console.log(response) console.log(response)
if (response.data.status == 'success') { if (response.data.status === 'success') {
this.props.refresh() this.props.refresh()
this.props.onClickClose() this.props.onClickClose()
} else { } else {
...@@ -130,7 +130,7 @@ export default class EditRole extends Component { ...@@ -130,7 +130,7 @@ export default class EditRole extends Component {
getMenu() { getMenu() {
api.create().getMenu().then((response) => { api.create().getMenu().then((response) => {
if (response.data.status == 'success') { if (response.data.status === 'success') {
this.setState({ menuData: response.data.data }) this.setState({ menuData: response.data.data })
} else { } else {
alert(response.data.message) alert(response.data.message)
...@@ -139,14 +139,14 @@ export default class EditRole extends Component { ...@@ -139,14 +139,14 @@ export default class EditRole extends Component {
} }
handleItemChecked(item) { handleItemChecked(item) {
let indexID = this.state.privileges.findIndex((val) => val.menu_id == item.menu_id) let indexID = this.state.privileges.findIndex((val) => val.menu_id === item.menu_id)
return indexID == -1 ? false : true return indexID === -1 ? false : true
} }
handleItemClick(item) { handleItemClick(item) {
let indexID = this.state.privileges.findIndex((val) => val.menu_id == item.menu_id) let indexID = this.state.privileges.findIndex((val) => val.menu_id === item.menu_id)
let privileges = this.state.privileges let privileges = this.state.privileges
if (indexID == -1) { if (indexID === -1) {
privileges.push({ privileges.push({
menu_id: item.menu_id, menu_id: item.menu_id,
button_id: [1, 2, 3] button_id: [1, 2, 3]
...@@ -158,36 +158,33 @@ export default class EditRole extends Component { ...@@ -158,36 +158,33 @@ export default class EditRole extends Component {
} }
handleSubItemChecked(item, index) { handleSubItemChecked(item, index) {
let indexID = this.state.privileges.findIndex((val) => val.menu_id == item.menu_id) let indexID = this.state.privileges.findIndex((val) => val.menu_id === item.menu_id)
let value = false let value = false
if (indexID == -1) { if (indexID === -1) {
value = false value = false
} else { } else {
let arrayButton = this.state.privileges[indexID].button_id let indexButtonID = this.state.privileges[indexID].button_id.findIndex((val) => val === index)
// console.log(arrayButton) if (indexButtonID === -1) {
let indexButtonID = this.state.privileges[indexID].button_id.findIndex((val) => val == index)
// console.log(indexButtonID)
if (indexButtonID == -1) {
value = false value = false
} else { } else {
value = true value = true
} }
} }
return indexID == -1 ? value : value return indexID === -1 ? value : value
} }
handleSubItemClick(item, index) { handleSubItemClick(item, index) {
let indexID = this.state.privileges.findIndex((val) => val.menu_id == item.menu_id) 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 indexButtonID = this.state.privileges[indexID].button_id.findIndex((val) => val === index)
let privileges = this.state.privileges let privileges = this.state.privileges
let button_id = privileges[indexID].button_id let button_id = privileges[indexID].button_id
if (indexButtonID == -1) { if (indexButtonID === -1) {
button_id.push(index) button_id.push(index)
} else { } else {
button_id.splice(indexButtonID, 1) button_id.splice(indexButtonID, 1)
} }
privileges[indexID].button_id = button_id privileges[indexID].button_id = button_id
if (button_id.length == 0) { if (button_id.length === 0) {
privileges.splice(indexID, 1) privileges.splice(indexID, 1)
} }
this.setState({ privileges }) this.setState({ privileges })
...@@ -229,7 +226,7 @@ export default class EditRole extends Component { ...@@ -229,7 +226,7 @@ export default class EditRole extends Component {
disabled disabled
// id="outlined-read-only-input" // id="outlined-read-only-input"
variant="filled" variant="filled"
value={this.state.tempData == null ? '' : this.state.tempData.role_id} value={this.state.tempData === null ? '' : this.state.tempData.role_id}
onChange={(e) => null} onChange={(e) => null}
> >
{/* {periode.map((option) => ( {/* {periode.map((option) => (
...@@ -248,7 +245,7 @@ export default class EditRole extends Component { ...@@ -248,7 +245,7 @@ export default class EditRole extends Component {
id="userRole" id="userRole"
name="role_name" name="role_name"
label="User Role" label="User Role"
value={this.state.tempData == null ? '' : this.state.tempData.role_name} value={this.state.tempData === null ? '' : this.state.tempData.role_name}
error={this.state.errorRoleName} error={this.state.errorRoleName}
helperText={this.state.msgErrorRN} helperText={this.state.msgErrorRN}
onChange={(e) => this.handleChange(e, '')} onChange={(e) => this.handleChange(e, '')}
...@@ -267,7 +264,7 @@ export default class EditRole extends Component { ...@@ -267,7 +264,7 @@ export default class EditRole extends Component {
id="startDate" id="startDate"
label="Berlaku Mulai" label="Berlaku Mulai"
format="dd MMMM yyyy" format="dd MMMM yyyy"
value={this.state.tempData == null ? null : this.state.tempData.start_date} value={this.state.tempData === null ? null : this.state.tempData.start_date}
error={this.state.errorStartDate} error={this.state.errorStartDate}
helperText={this.state.msgErrorSD} helperText={this.state.msgErrorSD}
onChange={(e) => this.handleChange(e, 'start_date')} onChange={(e) => this.handleChange(e, 'start_date')}
...@@ -287,10 +284,10 @@ export default class EditRole extends Component { ...@@ -287,10 +284,10 @@ export default class EditRole extends Component {
id="endDate" id="endDate"
label="Berlaku Hingga" label="Berlaku Hingga"
format="dd MMMM yyyy" format="dd MMMM yyyy"
value={this.state.tempData == null ? null : this.state.tempData.end_date} value={this.state.tempData === null ? null : this.state.tempData.end_date}
error={this.state.errorEndDate} error={this.state.errorEndDate}
helperText={this.state.msgErrorED} helperText={this.state.msgErrorED}
minDate={this.state.tempData == null ? null : this.state.tempData.start_date} minDate={this.state.tempData === null ? null : this.state.tempData.start_date}
onChange={(e) => this.handleChange(e, 'end_date')} onChange={(e) => this.handleChange(e, 'end_date')}
KeyboardButtonProps={{ KeyboardButtonProps={{
'aria-label': 'change date', 'aria-label': 'change date',
...@@ -312,7 +309,7 @@ export default class EditRole extends Component { ...@@ -312,7 +309,7 @@ export default class EditRole extends Component {
disabled disabled
// id="outlined-read-only-input" // id="outlined-read-only-input"
variant="filled" variant="filled"
value={this.state.tempData == null ? '' : this.state.tempData.status} value={this.state.tempData === null ? '' : this.state.tempData.status}
> >
{/* {periode.map((option) => ( {/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}> <MenuItem key={option.value} value={option.value}>
...@@ -324,8 +321,8 @@ export default class EditRole extends Component { ...@@ -324,8 +321,8 @@ export default class EditRole extends Component {
</div> </div>
</div> </div>
<div style={{ flexDirection: 'column', display: 'flex', paddingLeft: 20, paddingRight: 20 }}> <div style={{ flexDirection: 'column', display: 'flex', paddingLeft: 20, paddingRight: 20 }}>
<Typography style={{ fontSize: 12 }}>{`Dibuat : ${this.state.tempData == null ? '' : (this.state.tempData.created == null ? '-' : this.state.tempData.created)}`}</Typography> <Typography style={{ fontSize: 12 }}>{`Dibuat : ${this.state.tempData === null ? '' : (this.state.tempData.created === null ? '-' : this.state.tempData.created)}`}</Typography>
<Typography style={{ fontSize: 12 }}>{`Diubah: ${this.state.tempData == null ? '' : (this.state.tempData.updated == null ? '-' : this.state.tempData.updated)}`}</Typography> <Typography style={{ fontSize: 12 }}>{`Diubah: ${this.state.tempData === null ? '' : (this.state.tempData.updated === null ? '-' : this.state.tempData.updated)}`}</Typography>
</div> </div>
<Divider style={{ margin: 20 }} /> <Divider style={{ margin: 20 }} />
<div style={{ paddingLeft: 20, paddingRight: 20 }}> <div style={{ paddingLeft: 20, paddingRight: 20 }}>
...@@ -353,8 +350,8 @@ export default class EditRole extends Component { ...@@ -353,8 +350,8 @@ export default class EditRole extends Component {
<div> <div>
<div className="grid grid-2x grid-mobile-none gap-15px padding-left-10px padding-right-10px"> <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', justifyContent: 'flex-start' }}> <div className="column-1" style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
{item.sub_menu.length > 0 && <span onClick={() => this.setState({ selectedIndex: index == this.state.selectedIndex ? 0 : index })} style={{ marginLeft: 7, marginRight: 2 }}> {item.sub_menu.length > 0 && <span onClick={() => this.setState({ selectedIndex: index === this.state.selectedIndex ? 0 : index })} style={{ marginLeft: 7, marginRight: 2 }}>
{index == this.state.selectedIndex ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />} {index === this.state.selectedIndex ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
</span>} </span>}
<span> <span>
<CustomCheckbox <CustomCheckbox
...@@ -392,7 +389,7 @@ export default class EditRole extends Component { ...@@ -392,7 +389,7 @@ export default class EditRole extends Component {
</div> </div>
{item.sub_menu.length > 0 && item.sub_menu.map((items, indexs) => { {item.sub_menu.length > 0 && item.sub_menu.map((items, indexs) => {
return ( return (
<Collapse in={index == this.state.selectedIndex} timeout="auto" unmountOnExit> <Collapse in={index === this.state.selectedIndex} timeout="auto" unmountOnExit>
<div className="grid grid-2x grid-mobile-none gap-15px padding-left-10px padding-right-10px"> <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', paddingLeft: 50 }}> <div className="column-1" style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', paddingLeft: 50 }}>
<CustomCheckbox <CustomCheckbox
......
import screen404 from '../container/Screen404' import screen404 from '../container/Screen404'
import Beranda from '../container/Beranda'
import UserRole from '../container/Otorisasi/UserRole' import UserRole from '../container/Otorisasi/UserRole'
import User from '../container/Otorisasi/User' import User from '../container/Otorisasi/User'
import ApprovalMatrix from '../container/ApprovalMatrix/ApprovalMatrix' import ApprovalMatrix from '../container/ApprovalMatrix/ApprovalMatrix'
import BudgetTahunan from '../container/BudgetTahunan';
import HomePage from '../container/HomePage'; import HomePage from '../container/HomePage';
import BalanceSheet from '../container/BudgetTahunan/BalanceSheet'; import BalanceSheet from '../container/BudgetTahunan/BalanceSheet';
import Profile from '../container/Profile'; import Profile from '../container/Profile';
......
...@@ -26,7 +26,7 @@ import Constant from "../library/Constant"; ...@@ -26,7 +26,7 @@ import Constant from "../library/Constant";
export default function BasicExample() { export default function BasicExample() {
return ( return (
<Router basename={"/tia-web"}> <Router basename={"/tia-web-dev"}>
<Switch> <Switch>
<Route exact path="/"> <Route exact path="/">
<Redirect <Redirect
......
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