Skip to content

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

push visualisasi

parent d9de9576
Hide whitespace changes
Inline Side-by-side
Showing with 118 additions and 105 deletions
package-lock.json
View file @ 1e6738cf
...@@ -11911,6 +11911,14 @@ ...@@ -11911,6 +11911,14 @@
"scheduler": "^0.19.1" "scheduler": "^0.19.1"
} }
}, },
"react-drag-listview": {
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/react-drag-listview/-/react-drag-listview-0.1.7.tgz",
"integrity": "sha512-mnnAj0liaHcONEi7CtiGnLJl6EHy5huHiAfZmhjl3Z0cg9XrQnF5eFK0WqHkX1G80ys9D6rtxr4M75lrnbQs1A==",
"requires": {
"prop-types": "^15.5.8"
}
},
"react-draggable-list": { "react-draggable-list": {
"version": "4.0.3", "version": "4.0.3",
"resolved": "https://registry.npmjs.org/react-draggable-list/-/react-draggable-list-4.0.3.tgz", "resolved": "https://registry.npmjs.org/react-draggable-list/-/react-draggable-list-4.0.3.tgz",
......
package.json
View file @ 1e6738cf
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
"react-bootstrap": "^1.3.0", "react-bootstrap": "^1.3.0",
"react-d3-donut": "^1.1.2", "react-d3-donut": "^1.1.2",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"react-drag-listview": "^0.1.7",
"react-draggable-list": "^4.0.3", "react-draggable-list": "^4.0.3",
"react-dropzone": "^11.0.2", "react-dropzone": "^11.0.2",
"react-excel-renderer": "^1.1.0", "react-excel-renderer": "^1.1.0",
......
src/api/index.js
View file @ 1e6738cf
...@@ -93,6 +93,9 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') => ...@@ -93,6 +93,9 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
// APPROVAL MATRIX // APPROVAL MATRIX
const getAM = () => api.get('approval_matrix/get_all_approval_matrix') const getAM = () => api.get('approval_matrix/get_all_approval_matrix')
const getApprovedByAM = () => api.get('approval_matrix/get_all_approver') const getApprovedByAM = () => api.get('approval_matrix/get_all_approver')
const getTypeAM = () => api.get('approval_type/get_all_approval_type')
const getOperatorAM = () => api.get('operator_type/get_all_operator_type')
const searchAM = (body) => api.post('/approval_matrix/search_approval_matrix', body)
const createAM = (body) => api.post('/approval_matrix/create_approval_matrix', body) const createAM = (body) => api.post('/approval_matrix/create_approval_matrix', body)
const updateAM = (body) => api.post('/approval_matrix/update_approval_matrix', body) const updateAM = (body) => api.post('/approval_matrix/update_approval_matrix', body)
...@@ -136,11 +139,14 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') => ...@@ -136,11 +139,14 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
createUnitBisnis, createUnitBisnis,
updateUnitBisnis, updateUnitBisnis,
searchUnitBisnis, searchUnitBisnis,
getAM,
getPerusahaan, getPerusahaan,
createPerusahaan, createPerusahaan,
updatePerusahaan, updatePerusahaan,
getAM,
getApprovedByAM, getApprovedByAM,
getTypeAM,
getOperatorAM,
searchAM,
createAM, createAM,
updateAM, updateAM,
getUser, getUser,
......
src/container/ApprovalMatrix/ApprovalMatrix.js
View file @ 1e6738cf
...@@ -8,7 +8,6 @@ import MUIDataTable from "mui-datatables"; ...@@ -8,7 +8,6 @@ import MUIDataTable from "mui-datatables";
import UploadFile from "../../library/Upload"; import UploadFile from "../../library/Upload";
import CreateApprovalMatrix from "./CreateApprovalMatrix"; import CreateApprovalMatrix from "./CreateApprovalMatrix";
import EditApprovalMatrix from "./EditApprovalMatrix"; import EditApprovalMatrix from "./EditApprovalMatrix";
import PreviewAM from "./PreviewAM";
import VisualisasiAM from "./VisualisasiAM"; import VisualisasiAM from "./VisualisasiAM";
import api from "../../api"; import api from "../../api";
......
src/container/ApprovalMatrix/PreviewAM.js deleted 100644 → 0
View file @ d9de9576
import React, { Component } from 'react';
import { Container, Row, Col } from "react-bootstrap";
import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import MUIDataTable from "mui-datatables";
var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions();
export default class PreviewAM extends Component {
render() {
const columns = ["ID", "Tipe Persetujuan", "Order", "Nama Pemberi Persetujuan", "Operator", "Berlaku Mulai", "Berlaku Hingga"]
const data = [
["1", "Yearly", "1", "John Doe", "-", "2020-01-01", "2020-12-31"],
["2", "Yearly", "2", "John Doe", "-", "2020-01-01", "2020-12-31"],
["3", "Yearly", "2", "John Doe", "AND", "2020-01-01", "2020-12-31"],
["4", "Yearly", "2", "John Doe", "AND", "2020-01-01", "2020-12-31"],
["5", "Yearly", "3", "John Doe", "-", "2020-01-01", "2020-12-31"],
]
return (
<div style={{ height: this.props.height }}>
<div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} />
<div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', width: '20%', fontSize: 16, paddingTop: 8 }}>Preview Data</label>
</div>
<div style={{ padding: 25, width: '100%' }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={data}
columns={columns}
options={options}
/>
</MuiThemeProvider>
</div>
<div className="row" style={{ alignSelf: 'center', float: 'right', marginRight: 25 }}>
<div onClick={() => this.props.onClickClose()} style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
<span style={{ color: '#354960', fontSize: 11 }} >Batal</span>
</div>
<div style={{ width: 102, height: 30, marginLeft: 25, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</div>
</div>
</div>
);
}
}
src/container/ApprovalMatrix/VisualisasiAM.js
View file @ 1e6738cf
...@@ -3,7 +3,9 @@ import { Container, Row, Col } from "react-bootstrap"; ...@@ -3,7 +3,9 @@ import { Container, Row, Col } from "react-bootstrap";
import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles'; import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import { TextField } from '@material-ui/core'; import { TextField } from '@material-ui/core';
import MenuItem from '@material-ui/core/MenuItem'; import MenuItem from '@material-ui/core/MenuItem';
import ApprovalMatrix from "./ApprovalMatrix"; import ReactDragListView from 'react-drag-listview';
import Autocomplete from '@material-ui/lab/Autocomplete';
import api from "../../api";
const type = [ const type = [
...@@ -17,45 +19,86 @@ const type = [ ...@@ -17,45 +19,86 @@ const type = [
}, },
]; ];
export default class PreviewAM extends Component { export default class VisualisasiAM extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
const data = [];
for (let i = 1, len = 7; i < len; i++) {
data.push({
title: `rows${i}`
});
}
this.state = { this.state = {
visibleAM: false, visibleAM: false,
visibleVisual: true visibleVisual: true,
data,
listApproval: []
} }
} }
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) this.getTypeData()
} }
render() { getTypeData() {
// var tasks = { api.create().getTypeAM().then((response) => {
// lvl1: [], if (response.data.status == 'success') {
// lvl2: [], let data = response.data.data
// lvl3: [] let typeData = data.map((item) => {
// } return {
approval_type_id: item.approval_type_id,
approval_type_name: item.approval_type_name
}
})
// console.log(userData)
let typeProps = {
options: typeData,
getOptionLabel: (option) => option.approval_type_name,
};
this.setState({ types: typeProps, typeData: response.data.data })
} else {
alert(response.data.message)
}
})
}
// this.state.tasks.forEach ((task) => { handleInputChange(e) {
// tasks[task.type].push( this.setState({ search: e })
// <div key={task.taskName} let body = {
// className="draggable" "keyword": this.state.typeName
// style = {{backgroundColor: task.bgcolor}}> }
// {task.taskName} api.create().searchAM(body).then(response => {
// </div> if (response.data.status == 'success') {
// ); let data = response.data.data
// }); let listVisual = []
data.map((item, index) => {
let indexId = listVisual.findIndex((val) => val.orders == item.orders)
if(indexId == -1){
listVisual.push(item)
} else {
return
}
})
this.setState({ listApproval: listVisual, typeData: response.data.data })
console.log(data);
} else {
alert(response.data.message)
}
})
}
render() {
const that = this;
const dragProps = {
onDragEnd(fromIndex, toIndex) {
const data = [...that.state.data];
const item = data.splice(fromIndex, 1)[0];
data.splice(toIndex, 0, item);
that.setState({ data });
},
nodeSelector: 'li',
handleSelector: 'a'
};
return ( return (
<div> <div>
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
...@@ -68,34 +111,39 @@ export default class PreviewAM extends Component { ...@@ -68,34 +111,39 @@ export default class PreviewAM extends Component {
<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 Persetujuan</label>
<div className="" style={{ width: 250, marginTop: 8, marginBottom: 28 }}> <div className="" style={{ width: 250, marginTop: 8, marginBottom: 28 }}>
<TextField <Autocomplete
style={{ width: '100%' }} {...this.state.types}
id="type" id="tipe"
select onChange={(event, newInputValue) => this.setState({typeName:newInputValue.approval_type_name}, () => {
label="Tipe Persetujuan" this.handleInputChange()
// value={this.state.periode} })}
onChange={(e) => null} debug
> renderInput={(params) => <TextField {...params} label="Tipe" margin="normal" />}
{type.map((option) => ( />
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</div> </div>
<div className="grid grid-4x grid-mobile-none gap-15px"> <ReactDragListView {...dragProps}>
<div className="column-1"> <ol>
<div className="margin-bottom-20px"> {this.state.listApproval.map((item, index) => (
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>1. John Doe</label> <li key={index}>
{'urutan: ' + item.orders}
<a href="#">Drag</a>
</li>
))}
</ol>
</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> </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="grid grid-4x grid-mobile-none gap-15px">
<div className="column-1"> <div className="column-1">
<div className="margin-bottom-20px"> <div className="margin-bottom-20px">
...@@ -157,7 +205,7 @@ export default class PreviewAM extends Component { ...@@ -157,7 +205,7 @@ export default class PreviewAM extends Component {
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
); );
......
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