ordo
/
surveyor_indonesia_frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'staging' of https://git.oslog.id/ordo/adw-frontend into Dev-Farhan

pull/2/head
farhan048 1 year ago
parent
2915274cf0 a25b03dbc4
commit
03331880f1
4 changed files with 866 additions and 677 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 654
      src/containers/DefaultLayout/DefaultLayout.js
  2. 650
      src/views/SimproV2/CreatedProyek/DialogForm.js
  3. 123
      src/views/SimproV2/CreatedProyek/DialogFormAnalysis.js
  4. 116
      src/views/SimproV2/CreatedProyek/ReportAnalysis.js

654
src/containers/DefaultLayout/DefaultLayout.js
Unescape View File

@ -1,327 +1,327 @@
import React, { Component, Suspense, Divider } from 'react'; import React, { Component, Suspense, Divider } from 'react';
import { Redirect, Route, Switch, withRouter } from 'react-router-dom'; import { Redirect, Route, Switch, withRouter } from 'react-router-dom';
import * as router from 'react-router-dom'; import * as router from 'react-router-dom';
import { Button, Container, UncontrolledDropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem } from 'reactstrap'; import { Button, Container, UncontrolledDropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem } from 'reactstrap';
import axios from 'axios'; import axios from 'axios';
import { ALERTUSER_SEARCH, ALERT_SEARCH, MENU_SEARCH, ROLEMENU_SEARCH, ALERTUSER_STATUSVIEW, ALERT_STATUSVIEW, MENU_MANAGEMENT, CONTROL_MONITORING_SEARCH } from '../../const/ApiConst'; import { ALERTUSER_SEARCH, ALERT_SEARCH, MENU_SEARCH, ROLEMENU_SEARCH, ALERTUSER_STATUSVIEW, ALERT_STATUSVIEW, MENU_MANAGEMENT, CONTROL_MONITORING_SEARCH } from '../../const/ApiConst';
import { handleChangeLng } from "../../utils/LangUtils"; import { handleChangeLng } from "../../utils/LangUtils";
import { import {
AppAside, AppAside,
AppFooter, AppFooter,
AppHeader, AppHeader,
AppSidebar, AppSidebar,
AppSidebarFooter, AppSidebarFooter,
AppSidebarForm, AppSidebarForm,
AppSidebarHeader, AppSidebarHeader,
AppSidebarMinimizer, AppSidebarMinimizer,
AppBreadcrumb2 as AppBreadcrumb, AppBreadcrumb2 as AppBreadcrumb,
AppSidebarNav2 as AppSidebarNav, AppSidebarNav2 as AppSidebarNav,
} from '@coreui/react'; } from '@coreui/react';
import LayoutHelper from '../../../node_modules/@coreui/react/lib/Shared/layout/layout'; import LayoutHelper from '../../../node_modules/@coreui/react/lib/Shared/layout/layout';
import navigation from '../../_nav'; import navigation from '../../_nav';
import routes from '../../routes'; import routes from '../../routes';
import { emptyConstants } from '../../const/MapConst.js'; import { emptyConstants } from '../../const/MapConst.js';
const countErr = localStorage.getItem('countErr'); const countErr = localStorage.getItem('countErr');
const token = window.localStorage.getItem('token'); const token = window.localStorage.getItem('token');
const DefaultAside = React.lazy(() => import('./DefaultAside')); const DefaultAside = React.lazy(() => import('./DefaultAside'));
const DefaultFooter = React.lazy(() => import('./DefaultFooter')); const DefaultFooter = React.lazy(() => import('./DefaultFooter'));
const DefaultHeader = React.lazy(() => import('./DefaultHeader')); const DefaultHeader = React.lazy(() => import('./DefaultHeader'));
let errorCount = 0; let errorCount = 0;
const config = { const config = {
headers: headers:
{ {
Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,
"Content-type": `application/json` "Content-type": `application/json`
} }
}; };
class DefaultLayout extends Component { class DefaultLayout extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
role_id: localStorage.getItem('role_id'), role_id: localStorage.getItem('role_id'),
token: localStorage.getItem('token'), token: localStorage.getItem('token'),
menu: { items: [] }, menu: { items: [] },
routes2: routes, routes2: routes,
finalRoutes: [], finalRoutes: [],
breadrCrumbReady: false, breadrCrumbReady: false,
minimized: true minimized: true
} }
} }
async componentDidMount() { async componentDidMount() {
const menu = localStorage.getItem("menu_login") const menu = localStorage.getItem("menu_login")
if (menu) this.setMenu(JSON.parse(menu)) if (menu) this.setMenu(JSON.parse(menu))
this.getAppBreadcrumb(); this.getAppBreadcrumb();
if (!localStorage.getItem("token")) { if (!localStorage.getItem("token")) {
this.signOut(); this.signOut();
} }
} }
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
const menu = localStorage.getItem("menu_login") const menu = localStorage.getItem("menu_login")
const { pathname } = this.props.location; const { pathname } = this.props.location;
if (this.state.token !== prevState.token) { if (this.state.token !== prevState.token) {
this.setMenu(JSON.parse(menu)) this.setMenu(JSON.parse(menu))
} }
if (this.state.role_id !== prevState.role_id) { if (this.state.role_id !== prevState.role_id) {
this.setMenu(JSON.parse(menu)) this.setMenu(JSON.parse(menu))
} }
if (this.state.menu !== prevState.menu) { if (this.state.menu !== prevState.menu) {
this.setFinalRoutes() this.setFinalRoutes()
} }
} }
toggleMinimized = () => { toggleMinimized = () => {
this.setState((prevState) => ({ minimized: !prevState.minimized })); this.setState((prevState) => ({ minimized: !prevState.minimized }));
LayoutHelper.sidebarToggle(!this.state.minimized); LayoutHelper.sidebarToggle(!this.state.minimized);
}; };
setFinalRoutes = () => { setFinalRoutes = () => {
const { routes2 } = this.state; const { routes2 } = this.state;
if (routes2) { if (routes2) {
const newRouter2 = routes2; const newRouter2 = routes2;
this.state.routes2.map((val, index) => { this.state.routes2.map((val, index) => {
let indexRes = this.state.menu.items.findIndex(x => x.url === val.path); let indexRes = this.state.menu.items.findIndex(x => x.url === val.path);
if (indexRes >= 0) { if (indexRes >= 0) {
let obj = newRouter2[index] let obj = newRouter2[index]
obj['name'] = this.state.menu.items[indexRes].name obj['name'] = this.state.menu.items[indexRes].name
newRouter2[index] = obj newRouter2[index] = obj
} }
}) })
this.setState({ finalRoutes: newRouter2 }, () => { this.setState({ finalRoutes: newRouter2 }, () => {
this.setState({ breadrCrumbReady: true }) this.setState({ breadrCrumbReady: true })
}); });
} }
} }
loading = () => <div className="animated fadeIn pt-1 text-center">Loading...</div> loading = () => <div className="animated fadeIn pt-1 text-center">Loading...</div>
async signOut(e) { async signOut(e) {
if (e) { if (e) {
e.preventDefault() e.preventDefault()
} }
await localStorage.removeItem("role_id"); await localStorage.removeItem("role_id");
await window.localStorage.clear(); await window.localStorage.clear();
this.props.history.replace('/login') this.props.history.replace('/login')
} }
getDataMenu = async () => { getDataMenu = async () => {
errorCount++; errorCount++;
let url = MENU_MANAGEMENT(this.state.role_id) let url = MENU_MANAGEMENT(this.state.role_id)
const result = await axios const result = await axios
.get(url, config) .get(url, config)
.then(res => res) .then(res => res)
.catch((error) => error.response); .catch((error) => error.response);
if (result && result.data && result.data.code == 200) { if (result && result.data && result.data.code == 200) {
window.localStorage.setItem('countErr', 0); window.localStorage.setItem('countErr', 0);
let resData = result.data.data let resData = result.data.data
this.setMenu(resData) this.setMenu(resData)
} else { } else {
if (errorCount < 4) { if (errorCount < 4) {
this.getDataMenu(); this.getDataMenu();
} else { } else {
if (countErr) { if (countErr) {
await window.localStorage.setItem('countErr', countErr + 1); await window.localStorage.setItem('countErr', countErr + 1);
} else { } else {
await window.localStorage.setItem('countErr', 1); await window.localStorage.setItem('countErr', 1);
} }
if (countErr) { if (countErr) {
if (parseInt(countErr) > 2) { if (parseInt(countErr) > 2) {
// this.signOut(); // this.signOut();
} else { } else {
window.location.reload(); window.location.reload();
} }
} else { } else {
window.location.reload(); window.location.reload();
} }
} }
} }
} }
parseMenuChild = (data) => { parseMenuChild = (data) => {
const menu = data.map(res => { const menu = data.map(res => {
const obj = { const obj = {
name: res.name, name: res.name,
url: res.url, url: res.url,
icon: res.icon icon: res.icon
} }
if (res.children.length > 0) { if (res.children.length > 0) {
obj.children = this.parseMenuChild(res.children) obj.children = this.parseMenuChild(res.children)
} else { } else {
delete obj.children delete obj.children
} }
return obj return obj
}) })
return menu return menu
} }
setMenu = data => { setMenu = data => {
const menu = data.map(res => { const menu = data.map(res => {
const obj = { const obj = {
name: res.name, name: res.name,
url: res.url, url: res.url,
icon: res.icon icon: res.icon
} }
if (res.children.length > 0) { if (res.children.length > 0) {
obj.children = this.parseMenuChild(res.children) obj.children = this.parseMenuChild(res.children)
} else { } else {
delete obj.children delete obj.children
} }
return obj return obj
}) })
this.setState({ menu: { items: menu } }, () => { this.setState({ menu: { items: menu } }, () => {
}) })
} }
checkLocation = () => { checkLocation = () => {
const { pathname } = this.props.location; const { pathname } = this.props.location;
let getIndex = this.getIndexMenu(pathname); let getIndex = this.getIndexMenu(pathname);
if (getIndex < 0) { if (getIndex < 0) {
this.props.history.push("/403"); this.props.history.push("/403");
} }
} }
getIndexMenu = (url) => { getIndexMenu = (url) => {
let index = this.state.menu.items.findIndex(obj => obj.url === url); let index = this.state.menu.items.findIndex(obj => obj.url === url);
return index return index
} }
getMenu = () => { getMenu = () => {
const { u_group } = this.state; const { u_group } = this.state;
if (u_group == 'kominfo') { if (u_group == 'kominfo') {
} }
else { else {
return <AppSidebarNav navConfig={this.state.menu} {...this.props} router={router} /> return <AppSidebarNav navConfig={this.state.menu} {...this.props} router={router} />
} }
} }
getAppBreadcrumb = () => { getAppBreadcrumb = () => {
const { u_group } = this.state; const { u_group } = this.state;
if (u_group == 'kominfo') { if (u_group == 'kominfo') {
routes.map((route, idx) => { routes.map((route, idx) => {
if (route.path == '/dashboard-kominfo') { if (route.path == '/dashboard-kominfo') {
return <AppBreadcrumb appRoutes={routes} router={router} className="remove-gap-bs-breadcrumb" /> return <AppBreadcrumb appRoutes={routes} router={router} className="remove-gap-bs-breadcrumb" />
} }
else { else {
return <AppBreadcrumb appRoutes={routes} router={router} /> return <AppBreadcrumb appRoutes={routes} router={router} />
} }
}); });
} }
else { else {
if (!window.location.href.includes("dashboard")) { if (!window.location.href.includes("dashboard")) {
return <AppBreadcrumb appRoutes={this.state.finalRoutes} router={router} /> return <AppBreadcrumb appRoutes={this.state.finalRoutes} router={router} />
} }
} }
} }
isKominfo = () => { isKominfo = () => {
let u_group = localStorage.getItem('u_group'); let u_group = localStorage.getItem('u_group');
if (u_group == 'kominfo') { if (u_group == 'kominfo') {
return true; return true;
} }
else { else {
return false; return false;
} }
} }
render() { render() {
const { location } = this.props; const { location } = this.props;
const { pathname } = location; const { pathname } = location;
let renderSidebar = false let renderSidebar = false
if (pathname.includes("/dashboard-project")) { if (pathname.includes("/dashboard-project")) {
// Remove the base URL and hash // Remove the base URL and hash
const path = pathname.replace("/dashboard-project/", ""); const path = pathname.replace("/dashboard-project/", "");
// Split the remaining path by "/" // Split the remaining path by "/"
const parts = path.split("/"); const parts = path.split("/");
if (parts[2] == "1") { if (parts[2] == "1") {
renderSidebar = true renderSidebar = true
} }
} }
return ( return (
<div className="app"> <div className="app">
<div className="app-body"> <div className="app-body">
{!window.location.href.includes("dashboard-project") || renderSidebar ? ( {!window.location.href.includes("dashboard-project") || renderSidebar ? (
<AppSidebar minimized={this.state.minimized} fixed display="lg"> <AppSidebar minimized={this.state.minimized} fixed display="lg">
{/* <div class="sidebar-header"> {/* <div class="sidebar-header">
<Suspense fallback={this.loading()}> <Suspense fallback={this.loading()}>
<DefaultHeader history={this.props.history} onLogout={e => this.signOut(e)} /> <DefaultHeader history={this.props.history} onLogout={e => this.signOut(e)} />
</Suspense> </Suspense>
</div> */} </div> */}
<hr /> <hr />
<AppSidebarHeader /> <AppSidebarHeader />
<AppSidebarForm /> <AppSidebarForm />
<Suspense> <Suspense>
{this.getMenu()} {this.getMenu()}
</Suspense> </Suspense>
<AppSidebarFooter /> <AppSidebarFooter />
{this.state.minimized ? null : {this.state.minimized ? null :
<UncontrolledDropdown direction="down"> <UncontrolledDropdown direction="down">
<DropdownToggle nav> <DropdownToggle nav>
<i className="nav-icon fa fa-user-circle"></i> {localStorage.getItem('user_name')} <i className="nav-icon fa fa-user-circle"></i> {localStorage.getItem('user_name')}
</DropdownToggle> </DropdownToggle>
<DropdownMenu right> <DropdownMenu right>
<DropdownItem color="primary" size="sm" onClick={() => handleChangeLng("id")}>ID</DropdownItem> <DropdownItem color="primary" size="sm" onClick={() => handleChangeLng("id")}>ID</DropdownItem>
<DropdownItem color="success" size="sm" onClick={() => handleChangeLng("en")}>EN</DropdownItem> <DropdownItem color="success" size="sm" onClick={() => handleChangeLng("en")}>EN</DropdownItem>
<DropdownItem href="#/settings"><i className="fa fa-user"></i>Profile</DropdownItem> <DropdownItem href="#/settings"><i className="fa fa-user"></i>Profile</DropdownItem>
<DropdownItem onClick={e => this.signOut(e)}><i className="fa fa-sign-out"></i> Logout</DropdownItem> <DropdownItem onClick={e => this.signOut(e)}><i className="fa fa-sign-out"></i> Logout</DropdownItem>
</DropdownMenu> </DropdownMenu>
</UncontrolledDropdown>} </UncontrolledDropdown>}
<button className='sidebar-minimizer mt-auto' type='button' onClick={this.toggleMinimized}> <button className='sidebar-minimizer mt-auto' type='button' onClick={this.toggleMinimized}>
</button> </button>
</AppSidebar> </AppSidebar>
) : null} ) : null}
<main className="main"> <main className="main">
{this.state.breadrCrumbReady ? this.getAppBreadcrumb() : null} {this.state.breadrCrumbReady ? this.getAppBreadcrumb() : null}
<Container fluid> <Container fluid>
<Suspense fallback={this.loading()}> <Suspense fallback={this.loading()}>
<Switch> <Switch>
{routes.map((route, idx) => { {routes.map((route, idx) => {
return route.component ? ( return route.component ? (
<Route <Route
key={idx} key={idx}
path={route.path} path={route.path}
exact={route.exact} exact={route.exact}
name={route.name} name={route.name}
render={props => ( render={props => (
<route.component params={{ name: route.name }} {...props} /> <route.component params={{ name: route.name }} {...props} />
)} /> )} />
) : (null); ) : (null);
})} })}
<Redirect from="/" to="/dashboard" /> <Redirect from="/" to="/dashboard" />
</Switch> </Switch>
</Suspense> </Suspense>
</Container> </Container>
</main> </main>
<AppAside fixed> <AppAside fixed>
<Suspense fallback={this.loading()}> <Suspense fallback={this.loading()}>
<DefaultAside /> <DefaultAside />
</Suspense> </Suspense>
</AppAside> </AppAside>
</div> </div>
{!this.isKominfo ? {!this.isKominfo ?
( (
<AppFooter> <AppFooter>
<Suspense fallback={this.loading()}> <Suspense fallback={this.loading()}>
<DefaultFooter /> <DefaultFooter />
</Suspense> </Suspense>
</AppFooter> </AppFooter>
) : null ) : null
} }
</div> </div>
); );
} }
} }
export default withRouter(DefaultLayout); export default withRouter(DefaultLayout);

650
src/views/SimproV2/CreatedProyek/DialogForm.js
Unescape View File

@ -1,325 +1,325 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap"; import { Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
import { Button, Form, FormGroup, Label, Input, Col, Row } from "reactstrap"; import { Button, Form, FormGroup, Label, Input, Col, Row } from "reactstrap";
import { DatePicker, Tooltip, Select } from "antd"; import { DatePicker, Tooltip, Select } from "antd";
import axios from "../../../const/interceptorApi"; import axios from "../../../const/interceptorApi";
import moment from "moment"; import moment from "moment";
import { import {
NotificationContainer, NotificationContainer,
NotificationManager, NotificationManager,
} from "react-notifications"; } from "react-notifications";
import "antd/dist/antd.css"; import "antd/dist/antd.css";
import { formatNumber } from "../../../const/CustomFunc"; import { formatNumber } from "../../../const/CustomFunc";
import { import {
TYPE_PROYEK, TYPE_PROYEK,
USER_LIST, USER_LIST,
BASE_SIMPRO_LUMEN, BASE_SIMPRO_LUMEN,
} from "../../../const/ApiConst"; } from "../../../const/ApiConst";
const { Option } = Select; const { Option } = Select;
const DialogForm = ({ const DialogForm = ({
openDialog, openDialog,
closeDialog, closeDialog,
toggleDialog, toggleDialog,
idTask, idTask,
dataTypeProyek, dataTypeProyek,
dataPM, dataPM,
}) => { }) => {
const token = localStorage.getItem("token"); const token = localStorage.getItem("token");
const HEADER = { const HEADER = {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,
}, },
}; };
const [id, setId] = useState(0); const [id, setId] = useState(0);
const [name, setName] = useState(""); const [name, setName] = useState("");
const [shortName, setShortName] = useState(""); const [shortName, setShortName] = useState("");
const [description, setDescription] = useState(""); const [description, setDescription] = useState("");
const [biaya, setBiaya] = useState(""); const [biaya, setBiaya] = useState("");
const [typeProject, setTypeproject] = useState(null); const [typeProject, setTypeproject] = useState(null);
const [sdm, setSdm] = useState(0); const [sdm, setSdm] = useState(0);
const [pic, setPic] = useState(null); const [pic, setPic] = useState(null);
const [startDate, setStartDate] = useState(moment()); const [startDate, setStartDate] = useState(moment());
const [endDate, setEndDate] = useState(moment()); const [endDate, setEndDate] = useState(moment());
const [workArea, setWorkArea] = useState(""); const [workArea, setWorkArea] = useState("");
const [finance, setFinance] = useState(""); const [finance, setFinance] = useState("");
const [investor, setInvestor] = useState(""); const [investor, setInvestor] = useState("");
const [company, setCompany] = useState(""); const [company, setCompany] = useState("");
const handleGetdataIdproyek = async (id) => { const handleGetdataIdproyek = async (id) => {
const URL = `${BASE_SIMPRO_LUMEN}/project/edit/${id}`; const URL = `${BASE_SIMPRO_LUMEN}/project/edit/${id}`;
const result = await axios const result = await axios
.get(URL, HEADER) .get(URL, HEADER)
.then((res) => res) .then((res) => res)
.catch((err) => err.response); .catch((err) => err.response);
if (result && result.data && result.data.code === 200) { if (result && result.data && result.data.code === 200) {
const val = result.data.data; const val = result.data.data;
setName(val.nama); setName(val.nama);
setShortName(val.kode_sortname); setShortName(val.kode_sortname);
setDescription(val.keterangan); setDescription(val.keterangan);
setBiaya(val.rencana_biaya ? formatNumber(val.rencana_biaya) : ""); setBiaya(val.rencana_biaya ? formatNumber(val.rencana_biaya) : "");
setTypeproject(val.type_proyek_id); setTypeproject(val.type_proyek_id);
setPic(val.pm_id); setPic(val.pm_id);
setStartDate(moment(val.mulai_proyek)); setStartDate(moment(val.mulai_proyek));
setEndDate(moment(val.akhir_proyek)); setEndDate(moment(val.akhir_proyek));
setWorkArea(val.area_kerja); setWorkArea(val.area_kerja);
setInvestor(val.investor); setInvestor(val.investor);
setCompany(val.company); setCompany(val.company);
setFinance(val.finance); setFinance(val.finance);
} else { } else {
NotificationManager.error(`Data proyek gagal di edit`, `Failed!!`); NotificationManager.error(`Data proyek gagal di edit`, `Failed!!`);
} }
}; };
const handleCLearData = () => { const handleCLearData = () => {
setName(""); setName("");
setShortName(""); setShortName("");
setBiaya(""); setBiaya("");
setTypeproject(null); setTypeproject(null);
setPic(null); setPic(null);
setStartDate(moment()); setStartDate(moment());
setEndDate(moment()); setEndDate(moment());
setDescription(""); setDescription("");
setInvestor(""); setInvestor("");
setFinance(""); setFinance("");
setWorkArea(""); setWorkArea("");
setCompany(""); setCompany("");
}; };
useEffect(() => { useEffect(() => {
if (idTask && idTask > 0) { if (idTask && idTask > 0) {
handleGetdataIdproyek(idTask); handleGetdataIdproyek(idTask);
} else { } else {
handleCLearData(); handleCLearData();
} }
}, [openDialog]); }, [openDialog]);
const handleSave = () => { const handleSave = () => {
let data = ""; let data = "";
if (idTask) { if (idTask) {
data = { data = {
id: idTask, id: idTask,
nama: name, nama: name,
kode_sortname: shortName, kode_sortname: shortName,
rencana_biaya: biaya.replace(".", ""), rencana_biaya: biaya.replace(".", ""),
mulai_proyek: startDate, mulai_proyek: startDate,
akhir_proyek: endDate, akhir_proyek: endDate,
type_proyek_id: parseInt(typeProject), type_proyek_id: parseInt(typeProject),
pm_id: pic, pm_id: pic,
investor, investor,
finance, finance,
company, company,
area_kerja: workArea, area_kerja: workArea,
keterangan: description, keterangan: description,
}; };
closeDialog("edit", data); closeDialog("edit", data);
} else { } else {
data = { data = {
nama: name, nama: name,
kode_sortname: shortName, kode_sortname: shortName,
rencana_biaya: biaya.replace(".", ""), rencana_biaya: biaya.replace(".", ""),
mulai_proyek: startDate, mulai_proyek: startDate,
akhir_proyek: endDate, akhir_proyek: endDate,
type_proyek_id: parseInt(typeProject), type_proyek_id: parseInt(typeProject),
pm_id: pic, pm_id: pic,
investor, investor,
finance, finance,
company, company,
area_kerja: workArea, area_kerja: workArea,
keterangan: description, keterangan: description,
}; };
closeDialog("add", data); closeDialog("add", data);
} }
handleCLearData(); handleCLearData();
}; };
const handleCancel = () => { const handleCancel = () => {
closeDialog("cancel", "none"); closeDialog("cancel", "none");
handleCLearData(); handleCLearData();
}; };
const onChangeTypeProject = (val) => { const onChangeTypeProject = (val) => {
setTypeproject(val); setTypeproject(val);
}; };
const onChangePm = (val) => { const onChangePm = (val) => {
setPic(val); setPic(val);
}; };
const handleDatePickerStart = (date, dateString) => { const handleDatePickerStart = (date, dateString) => {
setStartDate(date); setStartDate(date);
}; };
const handleDatePickerEnd = (date, dateString) => { const handleDatePickerEnd = (date, dateString) => {
setEndDate(date); setEndDate(date);
}; };
const renderForm = () => { const renderForm = () => {
return ( return (
<Form> <Form>
<Row> <Row>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Project Name</Label> <Label className="capitalize">Project Name</Label>
<Input <Input
type="text" type="text"
value={name} value={name}
onChange={(e) => setName(e.target.value)} onChange={(e) => setName(e.target.value)}
placeholder={`Input project name...`} placeholder={`Input project name...`}
/> />
</FormGroup> </FormGroup>
</Col> </Col>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Code / Short Name</Label> <Label className="capitalize">Code / Short Name</Label>
<Input <Input
type="text" type="text"
value={shortName} value={shortName}
onChange={(e) => setShortName(e.target.value)} onChange={(e) => setShortName(e.target.value)}
placeholder={`Input code / short name...`} placeholder={`Input code / short name...`}
/> />
</FormGroup> </FormGroup>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Project Type</Label> <Label className="capitalize">Project Type</Label>
<Select <Select
showSearch showSearch
value={typeProject} value={typeProject}
defaultValue={typeProject} defaultValue={typeProject}
onChange={onChangeTypeProject} onChange={onChangeTypeProject}
placeholder="Select project type" placeholder="Select project type"
style={{ width: "100%" }} style={{ width: "100%" }}
> >
{dataTypeProyek.map((res) => ( {dataTypeProyek.map((res) => (
<Option key={res.id} value={res.id}> <Option key={res.id} value={res.id}>
{res.name} {res.name}
</Option> </Option>
))} ))}
</Select> </Select>
</FormGroup> </FormGroup>
</Col> </Col>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">PM</Label> <Label className="capitalize">PM</Label>
<Select <Select
showSearch showSearch
value={pic} value={pic}
defaultValue={pic} defaultValue={pic}
onChange={onChangePm} onChange={onChangePm}
placeholder="Select PM" placeholder="Select PM"
style={{ width: "100%" }} style={{ width: "100%" }}
> >
{dataPM.map((res) => ( {dataPM.map((res) => (
<Option key={res.id} value={res.id}> <Option key={res.id} value={res.id}>
{res.name} {res.name}
</Option> </Option>
))} ))}
</Select> </Select>
</FormGroup> </FormGroup>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Start Date</Label> <Label className="capitalize">Start Date</Label>
<DatePicker <DatePicker
style={{ width: "100%" }} style={{ width: "100%" }}
value={startDate} value={startDate}
onChange={handleDatePickerStart} onChange={handleDatePickerStart}
/> />
</FormGroup> </FormGroup>
</Col> </Col>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">End Date</Label> <Label className="capitalize">End Date</Label>
<DatePicker <DatePicker
style={{ width: "100%" }} style={{ width: "100%" }}
value={endDate} value={endDate}
onChange={handleDatePickerEnd} onChange={handleDatePickerEnd}
/> />
</FormGroup> </FormGroup>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Work Area</Label> <Label className="capitalize">Work Area</Label>
<Input <Input
type="text" type="text"
value={workArea} value={workArea}
onChange={(e) => setWorkArea(e.target.value)} onChange={(e) => setWorkArea(e.target.value)}
placeholder={`Input work area...`} placeholder={`Input work area...`}
/> />
</FormGroup> </FormGroup>
</Col> </Col>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Company</Label> <Label className="capitalize">Company</Label>
<Input <Input
type="text" type="text"
value={company} value={company}
onChange={(e) => setCompany(e.target.value)} onChange={(e) => setCompany(e.target.value)}
placeholder={`Input company...`} placeholder={`Input company...`}
/> />
</FormGroup> </FormGroup>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Budget</Label> <Label className="capitalize">Budget</Label>
<Input <Input
type="text" type="text"
value={biaya} value={biaya}
onChange={(e) => setBiaya(formatNumber(e.target.value))} onChange={(e) => setBiaya(formatNumber(e.target.value))}
placeholder={`Input planning cost...`} placeholder={`Input planning cost...`}
/> />
</FormGroup> </FormGroup>
</Col> </Col>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Description</Label> <Label className="capitalize">Description</Label>
<Input <Input
type="textarea" type="textarea"
value={description} value={description}
onChange={(e) => setDescription(e.target.value)} onChange={(e) => setDescription(e.target.value)}
placeholder={`Input description...`} placeholder={`Input description...`}
/> />
</FormGroup> </FormGroup>
</Col> </Col>
</Row> </Row>
</Form> </Form>
); );
}; };
return ( return (
<> <>
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> <Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
<ModalHeader className="capitalize" toggle={closeDialog}> <ModalHeader className="capitalize" toggle={closeDialog}>
{idTask ? `Update` : "Add"} Project {idTask ? `Update` : "Add"} Project
</ModalHeader> </ModalHeader>
<ModalBody>{renderForm()}</ModalBody> <ModalBody>{renderForm()}</ModalBody>
<ModalFooter> <ModalFooter>
<Button color="primary" onClick={() => handleSave()}> <Button color="primary" onClick={() => handleSave()}>
{idTask ? `Save` : "Add"} {idTask ? `Save` : "Add"}
</Button>{" "} </Button>{" "}
<Button <Button
className="capitalize" className="capitalize"
color="secondary" color="secondary"
onClick={() => handleCancel()} onClick={() => handleCancel()}
> >
Cancel Cancel
</Button> </Button>
</ModalFooter> </ModalFooter>
</Modal> </Modal>
</> </>
); );
}; };
export default DialogForm; export default DialogForm;

123
src/views/SimproV2/CreatedProyek/DialogFormAnalysis.js
Unescape View File

@ -0,0 +1,123 @@
import React, { useEffect, useState } from "react";
import { Modal, ModalHeader, ModalBody, ModalFooter, Card, CardBody } from "reactstrap";
import { Button } from "reactstrap";
import axios from "../../../const/interceptorApi";
import {
NotificationManager,
} from "react-notifications";
import { BASE_SIMPRO_LUMEN } from "../../../const/ApiConst";
import { Table } from 'antd';
import "antd/dist/antd.css";
const DialogFormAnalysis = ({
openDialog,
closeDialog,
toggleDialog,
dataDetail
}) => {
const token = localStorage.getItem("token");
const [dataTable, setDatatable] = useState([]);
const HEADER = {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
};
useEffect(() => {
if (dataDetail) {
getReportActivityMaterial();
}
}, [openDialog]);
const columns = [
{title: "Human Resource", dataIndex: "join_first_name", key: "join_first_name"},
{title: "Report Date", dataIndex: "report_date", key: "report_date"},
{title: "Volume Plan", dataIndex: "join_second_qty_planning", key: "join_second_qty_planning"},
{title: "Volume Actual", dataIndex: "qty", key: "qty"},
{title: "Keterangan", dataIndex: "description", key: "description"},
]
const getReportActivityMaterial = async () => {
const payload = {
columns: [
{
name: "assign_material_id",
logic_operator: "=",
value: dataDetail.join_third_id,
operator: "AND",
}
],
joins: [
{
name: "m_users",
column_join: "user_id",
column_results: ["name"]
},
{
name: "assign_material_to_activity",
column_join: "assign_material_id",
column_results: ["qty_planning"]
},
],
orders: { columns: ["id"], ascending: false },
paging: { start: 0, length: -1 },
};
const result = await axios
.post(`${BASE_SIMPRO_LUMEN}/report-activity-material/search`, payload, HEADER)
.then((res) => res)
.catch((error) => error.response);
if (result && result.data && result.data.code == 200) {
let dataRes = result.data.data || [];
setDatatable(dataRes);
} else {
NotificationManager.error("Gagal Mengambil Data!!", "Failed");
}
};
const handleCLearData = () => {
};
const handleCancel = () => {
closeDialog("cancel", "none");
console.log(dataDetail)
handleCLearData();
};
return (
<>
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
<ModalHeader className="capitalize" toggle={closeDialog}>
Detail Report Analysis
</ModalHeader>
<ModalBody>
<Card>
<CardBody>
<Table
size="small"
columns={columns}
dataSource={dataTable}
pagination={false}
rowKey={"id"}
/>
</CardBody>
</Card>
</ModalBody>
<ModalFooter>
<Button
className="capitalize"
color="secondary"
onClick={() => handleCancel()}
>
Cancel
</Button>
</ModalFooter>
</Modal>
</>
);
};
export default DialogFormAnalysis;

116
src/views/SimproV2/CreatedProyek/ReportAnalysis.js
Unescape View File

@ -9,13 +9,17 @@ import {
import { BASE_SIMPRO_LUMEN } from "../../../const/ApiConst"; import { BASE_SIMPRO_LUMEN } from "../../../const/ApiConst";
import 'antd/dist/antd.css'; import 'antd/dist/antd.css';
import './style.css' import './style.css'
import { Select, Table } from 'antd'; import { Select, Table, Tooltip } from 'antd';
import DialogFormAnalysis from './DialogFormAnalysis';
const { Option } = Select const { Option } = Select
const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) => { const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) => {
const token = localStorage.getItem("token"); const token = localStorage.getItem("token");
const [activeTab, setActiveTab] = useState('1'); const [activeTab, setActiveTab] = useState('1');
const [search, setSearch] = useState(''); const [search, setSearch] = useState('');
const [openDialogFormAnalysis, setOpenDialogFormAnalysis] = useState(false);
const [dataDetail, setDataDetail] = useState(null);
const [avgActivityHr, setAvgActivityHr] = useState(0);
const [avgActivity, setAvgActivity] = useState(0); const [avgActivity, setAvgActivity] = useState(0);
const [dataTable, setDatatable] = useState([]); const [dataTable, setDatatable] = useState([]);
const [dataTableActivityToHr, setDataTableActivityToHr] = useState([]); const [dataTableActivityToHr, setDataTableActivityToHr] = useState([]);
@ -26,6 +30,20 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
if (activeTab !== tab) { if (activeTab !== tab) {
setActiveTab(tab); setActiveTab(tab);
} }
switch (tab) {
case '1':
setAvgActivityHr(0);
setSelectedHr(null);
setDataTableActivityToHr([]);
break;
case '2':
setAvgActivity(0);
setSearch('');
setDatatable([])
break;
default:
break;
}
}; };
const HEADER = { const HEADER = {
@ -43,12 +61,29 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
] ]
const columnActivityToHr = [ const columnActivityToHr = [
{title: "Activity", dataIndex: "join_third_name", key: "join_third_name"}, {title: "Activity", dataIndex: "join_second_name", key: "join_second_name"},
{title: "Human Resource", dataIndex: "join_second_name", key: "join_second_name"}, {title: "Gantt", dataIndex: "join_fourth_name_version", key: "join_fourth_name_version"},
{title: "Report Date", dataIndex: "report_date", key: "report_date"}, {title: "Assign HR", dataIndex: "join_first_name", key: "join_first_name"},
{title: "Volume Actual", dataIndex: "qty", key: "qty"}, {title: "Material Plan", dataIndex: "join_third_qty_planning", key: "join_third_qty_planning",
{title: "Volume Planned", dataIndex: "join_first_qty_planning", key: "join_first_qty_planning"}, render: (text, record) =>
{title: "Description", dataIndex: "description", key: "description"} <>
{text ? text : 0}
</>
},
{title: "Progress (%)", dataIndex: "join_second_persentase_progress", key: "persentase_progress"},
{
title: 'Action',
dataIndex: '',
key: 'id',
className: "nowrap",
render: (text, record) =>
<>
<Tooltip title="Detail Activity">
<Button size={"sm"} color='primary' onClick={() => handleDetail(text)}><i className="fa fa-eye"></i></Button>
</Tooltip>{" "}
</>
,
},
] ]
useEffect(() => { useEffect(() => {
@ -72,6 +107,29 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
setSearch(value); setSearch(value);
}; };
const handleDetail = (data) => {
setOpenDialogFormAnalysis(true);
setDataDetail(data);
}
const closeDialogForm = (status) => {
if (status == "Save") {
// getdataGantt()
NotificationManager.success(`Gantt berhasil dibuat!`, 'Success!!');
}else if (status == "Edit") {
// getdataGantt()
NotificationManager.success(`Gantt berhasil dibubah!`, 'Failed!!');
}else if (status == "failed") {
NotificationManager.error(`Gantt gagal dibuat!`, 'Failed!!');
}
setDataDetail(null)
setOpenDialogFormAnalysis(false)
}
const toggleDialogForm = () => {
setOpenDialogFormAnalysis(!openDialogFormAnalysis)
}
const getDataHr = async () => { const getDataHr = async () => {
const result = await axios const result = await axios
.get(`${BASE_SIMPRO_LUMEN}/human-resource/list`, HEADER) .get(`${BASE_SIMPRO_LUMEN}/human-resource/list`, HEADER)
@ -86,7 +144,7 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
} }
} }
const getDataActivityToHr = async () => { const getDataActivityToHr = async () => {
setAvgActivity(0); setAvgActivityHr(0);
let sum = 0; let sum = 0;
const payload = { const payload = {
columns: [ columns: [
@ -105,11 +163,6 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
} }
], ],
joins: [ joins: [
{
name: "assign_material_to_activity",
column_join: "assign_material_id",
column_results: ["qty_planning"]
},
{ {
name: "m_users", name: "m_users",
column_join: "user_id", column_join: "user_id",
@ -119,14 +172,28 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
name: "m_activity", name: "m_activity",
column_join: "activity_id", column_join: "activity_id",
column_results: ["name", "persentase_progress"] column_results: ["name", "persentase_progress"]
} },
{
name1: "m_activity",
name: "assign_material_to_activity",
column_join: "id",
column_self:"activity_id",
column_results: ["id", "qty_planning"]
},
{
name1: "m_activity",
name: "m_version_gantt",
column_join: "version_gantt_id",
column_self:"id",
column_results: ["name_version"]
},
], ],
orders: { columns: ["id"], ascending: false }, orders: { columns: ["id"], ascending: false },
paging: { start: 0, length: -1 }, paging: { start: 0, length: -1 },
}; };
const result = await axios const result = await axios
.post(`${BASE_SIMPRO_LUMEN}/report-activity-material/search`, payload, HEADER) .post(`${BASE_SIMPRO_LUMEN}/user-to-activity/search-analysis`, payload, HEADER)
.then((res) => res) .then((res) => res)
.catch((error) => error.response); .catch((error) => error.response);
@ -135,7 +202,7 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
dataRes.forEach(element => { dataRes.forEach(element => {
element.join_third_persentase_progress ? sum += parseInt(element.join_third_persentase_progress) : sum += 0; element.join_third_persentase_progress ? sum += parseInt(element.join_third_persentase_progress) : sum += 0;
}); });
setAvgActivity(sum / dataRes.length); setAvgActivityHr(sum / dataRes.length);
setDataTableActivityToHr(dataRes); setDataTableActivityToHr(dataRes);
} else { } else {
NotificationManager.error("Gagal Mengambil Data!!", "Failed"); NotificationManager.error("Gagal Mengambil Data!!", "Failed");
@ -184,7 +251,7 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
return ( return (
<> <>
<Modal size="xl" isOpen={openDialog} toggle={toggleDialog}> <Modal size="xl" isOpen={openDialog} toggle={toggleDialog}>
<ModalHeader className="capitalize" toggle={closeDialog}>Project</ModalHeader> <ModalHeader className="capitalize" toggle={closeDialog}>Report Analysis</ModalHeader>
<ModalBody> <ModalBody>
<div> <div>
<Nav tabs> <Nav tabs>
@ -252,7 +319,7 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
<Col> <Col>
<Select showSearch value={selectedHr} onChange={(val) => setSelectedHr(val)} placeholder="Select Human Resource" filterOption={(input, option) => <Select showSearch value={selectedHr} onChange={(val) => setSelectedHr(val)} placeholder="Select Human Resource" filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
} style={{ width: '100%' }}> } style={{ width: 200 }}>
{hrList && hrList.map(res => ( {hrList && hrList.map(res => (
<Option key={res.id} value={res.id}>{`${res.name}`}</Option> <Option key={res.id} value={res.id}>{`${res.name}`}</Option>
))} ))}
@ -261,13 +328,6 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
</Row> </Row>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<div style={{ textAlign: 'center' }}>
<h1>
{
selectedHr && avgActivity ? `Activity user ini adalah ${avgActivity.toFixed(2)} %` : null
}
</h1>
</div>
<Table <Table
size="small" size="small"
columns={columnActivityToHr} columns={columnActivityToHr}
@ -285,6 +345,12 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
<Button color="primary" onClick={closeDialog}>Close</Button> <Button color="primary" onClick={closeDialog}>Close</Button>
</ModalFooter> </ModalFooter>
</Modal> </Modal>
<DialogFormAnalysis
openDialog={openDialogFormAnalysis}
toggleDialog={toggleDialogForm}
closeDialog={closeDialogForm}
dataDetail={dataDetail}
/>
</> </>
) )

Write Preview
Loading…
Cancel
Save