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 @@ ...@@ -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 @ da413824
...@@ -26,6 +26,7 @@ ...@@ -26,6 +26,7 @@
"react-d3-donut": "^1.1.2", "react-d3-donut": "^1.1.2",
"react-d3-speedometer": "^0.12.0", "react-d3-speedometer": "^0.12.0",
"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 @ da413824
...@@ -94,6 +94,9 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') => ...@@ -94,6 +94,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)
...@@ -139,11 +142,14 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') => ...@@ -139,11 +142,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 @ da413824
...@@ -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 @ 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"; ...@@ -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