Skip to content

T
Tia-dev
Commit dfcf1458 authored by Rifka Kurnia Irfiana's avatar Rifka Kurnia Irfiana
Browse files
Options

update layout appmatrix dan visualnya

parent 847c6434
Hide whitespace changes
Inline Side-by-side
Showing with 16 additions and 68 deletions
src/container/ApprovalMatrix/ApprovalMatrix.js
View file @ dfcf1458
...@@ -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 }}>
......
src/container/ApprovalMatrix/VisualisasiAM.js
View file @ dfcf1458
...@@ -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 = [
...@@ -145,10 +146,15 @@ export default class VisualisasiAM extends Component { ...@@ -145,10 +146,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 +166,16 @@ export default class VisualisasiAM extends Component { ...@@ -160,16 +166,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 +184,6 @@ export default class VisualisasiAM extends Component { ...@@ -178,64 +184,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 }}>
......
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