Skip to content

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

update didam

parent c0a03722
Hide whitespace changes
Inline Side-by-side
Showing with 284 additions and 9 deletions
src/container/Otorisasi/User.js
View file @ 3826b1c7
...@@ -9,7 +9,7 @@ var ct = require("../../library/CustomTable"); ...@@ -9,7 +9,7 @@ var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable()); const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions(); const options = ct.customOptions();
export default class componentName extends Component { export default class User extends Component {
render() { render() {
const columns = ["#", "Nama Perusahaan", "Revisi", "Status", { const columns = ["#", "Nama Perusahaan", "Revisi", "Status", {
name: "Action", name: "Action",
......
src/container/Otorisasi/UserRole.js
View file @ 3826b1c7
import React, { Component } from 'react'; import React, { Component } from "react";
import { Container, Row, Col } from "react-bootstrap";
import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import SearchIcon from '@material-ui/icons/Search';
import Images from "../../assets/Images";
import MUIDataTable from "mui-datatables";
import AddRole from './UserRole/AddRole';
import EditRole from './UserRole/EditRole'
export default class componentName extends Component { var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions();
export default class UserRole extends Component {
constructor(props) {
super(props)
this.state = {
add: false,
edit: false
}
}
render() { render() {
const columns = [{
name: "Action",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
}}
onClick={() => this.setState({edit: true})}
>
<img src={Images.editCopy} />
</button>
</div >
);
}
}
}, {
name: "ID",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex', width: 50 }}>
{val}
</div >
);
}
}
}, {
name: "User Role",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex', width: 250 }}>
{val}
</div >
);
}
}
}, "Hak Akses", "Status"]
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: '100vh', width: '100%', flex: 1}}> textInComponent </div> <div style={{ height: this.props.height }}>
{/* <Row> */}
<div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
<div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', width: '20%', alignSelf: 'center'}}>Master Data - Role & Otorisasi</label>
<div style={{width: '60%', justifyContent: 'center', display: 'flex', borderWidth: 2, alignItems: 'center' }}>
<div style={{width: '50%', backgroundColor:'white', padding: 10, borderRadius: 7.5, flexDirection: 'row', display: 'flex'}}>
<SearchIcon/>
<input type="text" style={{flexGrow: 1, marginLeft: 10}}/>
</div>
</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.add} onClick={() => this.setState({add: true})}/>
</div>
</div>
<div style={{ padding: 25 }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={data}
columns={columns}
options={options}
/>
</MuiThemeProvider>
</div>
</div>
{this.state.add && <AddRole/>}
{this.state.edit && <EditRole/>}
</div>
); );
} }
} }
src/container/Otorisasi/UserRole/AddRole.js 0 → 100644
View file @ 3826b1c7
import React, { Component } from 'react';
import { TextField } from '@material-ui/core';
export default class CreateUnitBisnis extends Component {
render() {
return (
<div className="test app-popup-show" style={{ paddingTop: 100 }}>
<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' }}>Create Data</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.props.onClickClose()}
>
<i className="fa fa-lg fa-times" style={{ color: 'white' }} />
</button>
</div>
</div>
<div className="border-bottom grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20 }}>
<div className="column-1">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="periode"
select
label="Berlaku Mulai"
// value={this.state.periode}
onChange={(e) => null}
>
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</TextField>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="unit"
select
label="Unit Bisnis"
// value={this.state.periode}
onChange={(e) => null}
>
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</TextField>
</div>
</div>
</div>
<div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1" style={{ alignSelf: 'center' }}>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div>
</div>
<div className="column-2" style={{display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</div>
</div>
</div>
</div>
);
}
}
src/container/Otorisasi/UserRole/EditRole.js 0 → 100644
View file @ 3826b1c7
import React, { Component } from 'react';
import { TextField } from '@material-ui/core';
export default class CreateUnitBisnis extends Component {
render() {
return (
<div className="test app-popup-show" style={{ paddingTop: 100 }}>
<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' }}>Create Data</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.props.onClickClose()}
>
<i className="fa fa-lg fa-times" style={{ color: 'white' }} />
</button>
</div>
</div>
<div className="border-bottom grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20 }}>
<div className="column-1">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="periode"
select
label="Berlaku Mulai"
// value={this.state.periode}
onChange={(e) => null}
>
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</TextField>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="unit"
select
label="Unit Bisnis"
// value={this.state.periode}
onChange={(e) => null}
>
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</TextField>
</div>
</div>
</div>
<div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1" style={{ alignSelf: 'center' }}>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div>
</div>
<div className="column-2" style={{display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</div>
</div>
</div>
</div>
);
}
}
src/container/Screen404.js
View file @ 3826b1c7
...@@ -2,15 +2,21 @@ import React from 'react' ...@@ -2,15 +2,21 @@ import React from 'react'
import { import {
useLocation useLocation
} from "react-router-dom"; } from "react-router-dom";
import Images from '../assets/Images';
export default function NoMatch() { export default function NoMatch() {
let location = useLocation(); let location = useLocation();
return ( return (
<div> <div style={{flex: 1, height: '100vh', alignItems:'center', justifyContent: 'center', display: 'flex'}}>
<h3> <div style={{flexDirection:'column'}}>
Link '<code>{location.pathname}</code>' engga ada euy <div style={{alignItems:'center', justifyContent: 'center', display: 'flex'}}>
</h3> <img src={Images.tia}/>
</div>
<h3 style={{marginTop: 20}}>
'<code>{location.pathname}</code>' Not Found
</h3>
</div>
</div> </div>
); );
} }
\ No newline at end of file
src/router/homeRoutes.js
View file @ 3826b1c7
...@@ -48,6 +48,10 @@ const routes = [ ...@@ -48,6 +48,10 @@ const routes = [
path: "/home/unit-bisnis", path: "/home/unit-bisnis",
main: UnitBisnis main: UnitBisnis
}, },
{
path: "*",
main: screen404
}
]; ];
export default routes; export default routes;
\ No newline at end of file
src/router/index.js
View file @ 3826b1c7
...@@ -28,7 +28,7 @@ export default function BasicExample() { ...@@ -28,7 +28,7 @@ export default function BasicExample() {
<Route exact path="/"> <Route exact path="/">
<Redirect <Redirect
to={{ to={{
pathname: "/home", pathname: "/home/beranda",
// state: { from: location } // state: { from: location }
}} }}
/> />
......
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