Skip to content

T
Tia-dev
Commit 288b9ede authored by d.arizona's avatar d.arizona
Browse files
Options

update didim

parent 334761c6
Hide whitespace changes
Inline Side-by-side
Showing with 267 additions and 16 deletions
package-lock.json
View file @ 288b9ede
......@@ -12135,6 +12135,22 @@
"prop-types": "^15.7.2"
}
},
"react-tooltip": {
"version": "4.2.8",
"resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.8.tgz",
"integrity": "sha512-pDWa0/khTAgIfldp95tHgyuYyBhWNlfaU2LF9ubAKxpoqNe15uyf+uLlnhK/Lstb6FU8E8/SL28Wp6oEO9xw3g==",
"requires": {
"prop-types": "^15.7.2",
"uuid": "^7.0.3"
},
"dependencies": {
"uuid": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
"integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg=="
}
}
},
"react-transition-group": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
......
src/container/Login.js
View file @ 288b9ede
......@@ -75,7 +75,9 @@ class Login extends Component {
}
api.create().login(payload).then((response) => {
if (response.data.status === 'success') {
console.log(response.data.data)
localStorage.setItem(Constant.TOKEN, response.data.data.token)
localStorage.setItem(Constant.USER, response.data.data.user_id)
if (this.state.rememberMe) {
localStorage.setItem(Constant.EMAIL, this.state.email)
localStorage.setItem(Constant.PASSWORD, this.state.password)
......
src/container/Otorisasi/User.js
View file @ 288b9ede
......@@ -9,11 +9,81 @@ import EditUser from './User/EditUser'
import api from "../../api";
import { titleCase } from "../../library/Utils";
import { InputAdornment, TextField } from "@material-ui/core";
import UploadFile from "../../library/Upload";
import { ExcelRenderer } from 'react-excel-renderer';
var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions();
const tesss = [{
name: "Data Ke-",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowIndex + 1}
</div >
);
}
}
}, {
name: "Nama Lengkap",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex', width: 50 }}>
{titleCase(val)}
</div >
);
}
}
}, {
name: "Email",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex', width: 200 }}>
{val}
</div >
);
}
}
}, {
name: "Role",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex', width: 150 }}>
{titleCase(val)}
</div >
);
}
}
}, {
name: "Berlaku Mulai",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex', width: 100 }}>
{titleCase(val)}
</div >
);
}
}
}, {
name: "Berakhir Hingga",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex'}}>
{val}
</div >
);
}
}
}]
export default class UserRole extends Component {
constructor(props) {
super(props)
......@@ -21,7 +91,8 @@ export default class UserRole extends Component {
listUser: [],
indexData: {},
add: false,
edit: false
edit: false,
visibleUser: true
}
}
......@@ -75,6 +146,58 @@ export default class UserRole extends Component {
})
}
fileHandler = (event) => {
let fileObj = event
ExcelRenderer(fileObj, (err, resp) => {
if (err) {
console.log(err);
}
else {
let judul = resp.rows[0]
let isi = resp.rows.slice(1)
// let body = isi.map((item) => {
// return {
// item
// ]
// })
console.log(JSON.stringify(isi));
this.setState({
dataLoaded: true,
cols: tesss,
rows: isi
});
}
});
}
downloadFile = async () => {
let res = await fetch(
"https://trftia.eksad.com/tia-reporting-dev/public/attachment/download_file?fileName=UserTemplate&&fileType=xlsx"
)
res = await res.blob()
console.log(res)
if (res.size > 0) {
let url = window.URL.createObjectURL(res);
let a = document.createElement('a');
a.href = url;
a.download = 'User Template.xlsx';
a.click();
}
}
downloadDataTables = async () => {
let res = await fetch ("https://trftia.eksad.com/tia-reporting-dev/public/user/export_user")
res = await res.blob()
console.log(res)
if (res.size > 0) {
let url = window.URL.createObjectURL(res);
let a = document.createElement('a');
a.href = url;
a.download = 'Data User.xlsx';
a.click();
}
}
_handleKeyDown(e) {
if (e.key === 'Enter') {
if (this.state.search.length > 0) {
......@@ -163,18 +286,11 @@ export default class UserRole extends Component {
}
}
}, "Status"]
const data = [
["1", "1", "Juki Kudet", "Juki@gmail.com)", "Admin", "Kepo", "Aktif"],
["1", "2", "Kuji Mama", "Loro@gmail.com)", "Admin", "Kepo", "Aktif"],
["1", "3", "Sutaru", "Jaka@gmail.com)", "Admin", "Kepo", "Aktif"],
["1", "4", "Tatang Katro", "ikup@gmail.com)", "Admin", "Kepo", "Aktif"],
["1", "5", "Firman", "Sudir@gmail.com)", "Admin", "Kepo", "Aktif"],
]
return (
<div style={{ height: this.props.height }}>
{/* <Row> */}
<div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
<div>
{this.state.visibleUser ? <div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ fontFamily: 'nunito', color: 'white', width: '20%', alignSelf: 'center', fontSize: 18}}>Master Data - User</label>
<div style={{width: '60%', justifyContent: 'center', display: 'flex', borderWidth: 2, alignItems: 'center' }}>
......@@ -208,10 +324,59 @@ export default class UserRole extends Component {
</div>
{/* <label style={{ color: 'white', width: '60%', justifyContent: 'center', display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center' }}>Search</label> */}
<div style={{ width: '20%', justifyContent: 'flex-end', display: 'flex' }}>
<img src={Images.template}/>
<img src={Images.upload} style={{marginLeft: 20}}/>
<img src={Images.download} style={{marginLeft: 20}}/>
<img src={Images.add} onClick={() => this.setState({add: true})} style={{marginLeft: 20}}/>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5
}}
onClick={() => this.downloadFile()}
>
<img src={Images.template}/>
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginTop: 5,
marginBottom: 5,
marginRight: 5,
marginLeft: 20
}}
onClick={() => this.setState({ visibleUpload: true })}
>
<img src={Images.upload}/>
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginTop: 5,
marginBottom: 5,
marginRight: 5,
marginLeft: 20
}}
onClick={() => this.downloadDataTables()}
>
<img src={Images.download}/>
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginTop: 5,
marginBottom: 5,
marginRight: 5,
marginLeft: 20
}}
onClick={() => this.setState({add: true})}
>
<img src={Images.add}/>
</button>
</div>
</div>
<div style={{ padding: 25 }}>
......@@ -223,7 +388,39 @@ export default class UserRole extends Component {
/>
</MuiThemeProvider>
</div>
</div> :
<div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', fontSize: 16, alignSelf: 'center' }}>Preview Data</label>
</div>
<div style={{ padding: 25 }}>
{this.state.dataLoaded && (
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
theme={getMuiTheme()}
data={this.state.rows}
columns={this.state.cols}
options={options}
/>
</MuiThemeProvider>
)}
</div>
<div style={{ display: 'flex', width: '100%', placeContent: 'flex-end', padding: 20 }}>
<button
type="button"
onClick={() => this.setState({ visibleUser: true })}
style={{ marginRight: 20 }}
>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div>
</button>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</div>
</div>
}
{this.state.add && (
<AddUser
onClickClose={this.closeAdd.bind(this)}
......@@ -236,6 +433,39 @@ export default class UserRole extends Component {
data={this.state.indexData}
/>
)}
{this.state.visibleUpload && (
<div className="test app-popup-show">
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
<div className="popup-panel grid grid-2x" style={{ backgroundColor: '#51c6ea', height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Upload File</span>
</div>
</div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
<button
type="button"
className="btn btn-circle btn-white"
onClick={() => this.setState({ visibleUpload: false })}
>
<i className="fa fa-lg fa-times" style={{ color: 'white' }} />
</button>
</div>
</div>
<UploadFile
type={this.state.uploadStatus}
percentage={this.state.percentage}
result={this.state.result}
acceptedFiles={["pdf"]}
onHandle={(dt) => {
this.fileHandler(dt)
this.setState({ uploadStatus: 'idle', percentage: '0' })
}}
onUpload={() => this.setState({ visibleUpload: false, visibleUser: false })}
/>
</div>
</div>
)}
</div>
);
}
......
src/container/Otorisasi/User/AddUser.js
View file @ 288b9ede
......@@ -3,6 +3,8 @@ import { TextField, Divider, Typography, Checkbox, withStyles } from '@material-
import api from '../../../api';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { titleCase } from '../../../library/Utils';
import localeID from "date-fns/locale/id"
import format from "date-fns/format";
const CustomCheckbox = withStyles({
root: {
......@@ -29,7 +31,8 @@ export default class AddUser extends Component {
startDate: null,
endDate: null,
company: [],
listRole: null
listRole: null,
date: new Date(),
}
}
......@@ -247,7 +250,7 @@ export default class AddUser extends Component {
</div>
</div>
<div style={{flexDirection:'column', display: 'flex', paddingLeft: 20, paddingRight: 20 }}>
<Typography style={{fontSize: 12}}>{`Dibuat : ${this.state.tempData == null? '' : this.state.tempData.created}`}</Typography>
<Typography style={{fontSize: 12}}>{`Dibuat : ${format(this.state.date, 'dd MMMM yyyy', {locale: localeID})}`}</Typography>
{/* <Typography style={{fontSize: 12}}>{`Diubah: ${this.state.tempData == null? '' : this.state.tempData.updated}`}</Typography> */}
</div>
<Divider style={{margin: 20}}/>
......
src/library/Constant.js
View file @ 288b9ede
const Constant = {
TOKEN: null,
USER: null,
USER: 0,
EMAIL: 'TOKEN',
PASSWORD: 'PASSWORD'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment