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 @@
"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": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/react-draggable-list/-/react-draggable-list-4.0.3.tgz",
......
package.json
View file @ 1e6738cf
......@@ -25,6 +25,7 @@
"react-bootstrap": "^1.3.0",
"react-d3-donut": "^1.1.2",
"react-dom": "^16.13.1",
"react-drag-listview": "^0.1.7",
"react-draggable-list": "^4.0.3",
"react-dropzone": "^11.0.2",
"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/') =>
// APPROVAL MATRIX
const getAM = () => api.get('approval_matrix/get_all_approval_matrix')
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 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/') =>
createUnitBisnis,
updateUnitBisnis,
searchUnitBisnis,
getAM,
getPerusahaan,
createPerusahaan,
updatePerusahaan,
getAM,
getApprovedByAM,
getTypeAM,
getOperatorAM,
searchAM,
createAM,
updateAM,
getUser,
......
src/container/ApprovalMatrix/ApprovalMatrix.js
View file @ 1e6738cf
......@@ -8,7 +8,6 @@ import MUIDataTable from "mui-datatables";
import UploadFile from "../../library/Upload";
import CreateApprovalMatrix from "./CreateApprovalMatrix";
import EditApprovalMatrix from "./EditApprovalMatrix";
import PreviewAM from "./PreviewAM";
import VisualisasiAM from "./VisualisasiAM";
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";
import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import { TextField } from '@material-ui/core';
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 = [
......@@ -17,45 +19,86 @@ const type = [
},
];
export default class PreviewAM extends Component {
export default class VisualisasiAM extends Component {
constructor(props) {
super(props)
const data = [];
for (let i = 1, len = 7; i < len; i++) {
data.push({
title: `rows${i}`
});
}
this.state = {
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() {
console.log(this.props.height)
this.getTypeData()
}
render() {
// var tasks = {
// lvl1: [],
// lvl2: [],
// lvl3: []
// }
getTypeData() {
api.create().getTypeAM().then((response) => {
if (response.data.status == 'success') {
let data = response.data.data
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) => {
// tasks[task.type].push(
// <div key={task.taskName}
// className="draggable"
// style = {{backgroundColor: task.bgcolor}}>
// {task.taskName}
// </div>
// );
// });
handleInputChange(e) {
this.setState({ search: e })
let body = {
"keyword": this.state.typeName
}
api.create().searchAM(body).then(response => {
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 (
<div>
<div style={{ height: this.props.height }}>
......@@ -68,34 +111,39 @@ export default class PreviewAM extends Component {
<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>
<div className="" style={{ width: 250, marginTop: 8, marginBottom: 28 }}>
<TextField
style={{ width: '100%' }}
id="type"
select
label="Tipe Persetujuan"
// value={this.state.periode}
onChange={(e) => null}
>
{type.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
<Autocomplete
{...this.state.types}
id="tipe"
onChange={(event, newInputValue) => this.setState({typeName:newInputValue.approval_type_name}, () => {
this.handleInputChange()
})}
debug
renderInput={(params) => <TextField {...params} label="Tipe" margin="normal" />}
/>
</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' }}>1. John Doe</label>
<ReactDragListView {...dragProps}>
<ol>
{this.state.listApproval.map((item, index) => (
<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 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">
......@@ -157,7 +205,7 @@ export default class PreviewAM extends Component {
</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