Skip to content

T
Tia-dev
Commit da413824 authored by Dida Adams Arizona's avatar Dida Adams Arizona
Browse files
Options

Merge branch 'rifka' into 'master' 

push visualisasi

See merge request !79
parents 863bcd0c 367ad99c
Hide whitespace changes
Inline Side-by-side
Showing with 118 additions and 105 deletions
package-lock.json
View file @ da413824
......@@ -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 @ da413824
......@@ -26,6 +26,7 @@
"react-d3-donut": "^1.1.2",
"react-d3-speedometer": "^0.12.0",
"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 @ da413824
......@@ -94,6 +94,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)
......@@ -139,11 +142,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 @ da413824
......@@ -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 @ 863bcd0c
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 @ da413824
......@@ -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