|
|
@ -1,19 +1,19 @@ |
|
|
|
import React, { useEffect, useState, useMemo } from 'react' |
|
|
|
import React, { useEffect, useState, useMemo } from 'react' |
|
|
|
import { Modal, ModalHeader, ModalBody, ModalFooter, Breadcrumb, BreadcrumbItem } from 'reactstrap'; |
|
|
|
import { Modal, ModalHeader, ModalBody, Col, Row, Breadcrumb, BreadcrumbItem } from 'reactstrap'; |
|
|
|
import { Button } from 'reactstrap'; |
|
|
|
import { Button } from 'reactstrap'; |
|
|
|
import { Table, Tooltip, Spin } from 'antd'; |
|
|
|
import { Select, Table, Tooltip, Spin } from 'antd'; |
|
|
|
import 'antd/dist/antd.css'; |
|
|
|
import 'antd/dist/antd.css'; |
|
|
|
import moment from 'moment'; |
|
|
|
import moment from 'moment'; |
|
|
|
import SweetAlert from 'react-bootstrap-sweetalert'; |
|
|
|
import SweetAlert from 'react-bootstrap-sweetalert'; |
|
|
|
import { VERSION_GANTT_DELETE, VERSION_GANTT_SEARCH, USER_LIST } from '../../../const/ApiConst'; |
|
|
|
import { VERSION_GANTT_DELETE, VERSION_GANTT_SEARCH } from '../../../const/ApiConst'; |
|
|
|
import axios from "../../../const/interceptorApi" |
|
|
|
import axios from "../../../const/interceptorApi" |
|
|
|
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
|
|
|
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
|
|
|
import DialogForm from './DialogFormGantt'; |
|
|
|
import DialogForm from './DialogFormGantt'; |
|
|
|
import DialogUserGantt from './DialogUserGantt'; |
|
|
|
import DialogUserGantt from './DialogUserGantt'; |
|
|
|
|
|
|
|
|
|
|
|
import { Link } from 'react-router-dom'; |
|
|
|
import { Link } from 'react-router-dom'; |
|
|
|
|
|
|
|
|
|
|
|
const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName, hierarchyId, hierarchyName, openDialogHierarchy, isLogin, token, role_id, user_id }) => { |
|
|
|
const { Option } = Select |
|
|
|
|
|
|
|
const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName, hierarchyId, hierarchyName, openDialogHierarchy, isLogin, token, role_id, user_id, dataViewStartDate }) => { |
|
|
|
if (role_id && user_id && token && isLogin) { |
|
|
|
if (role_id && user_id && token && isLogin) { |
|
|
|
role_id = role_id; |
|
|
|
role_id = role_id; |
|
|
|
user_id = user_id; |
|
|
|
user_id = user_id; |
|
|
@ -38,10 +38,10 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName |
|
|
|
const [alertDelete, setAlertDelete] = useState(false) |
|
|
|
const [alertDelete, setAlertDelete] = useState(false) |
|
|
|
const [idDelete, setIdDelete] = useState(0) |
|
|
|
const [idDelete, setIdDelete] = useState(0) |
|
|
|
const [idGantt, setIdGantt] = useState(0) |
|
|
|
const [idGantt, setIdGantt] = useState(0) |
|
|
|
const [humanResource, setHumanResource] = useState([]) |
|
|
|
|
|
|
|
const [dataEdit, setDataEdit] = useState([]) |
|
|
|
const [dataEdit, setDataEdit] = useState([]) |
|
|
|
const [typeDialog, setTypeDialog] = useState('') |
|
|
|
const [typeDialog, setTypeDialog] = useState('') |
|
|
|
const [loading, setLoading] = useState(true); |
|
|
|
const [loading, setLoading] = useState(true); |
|
|
|
|
|
|
|
const [searchGantt, setSearchGantt] = useState(null); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
if (openDialog && hierarchyId > 0 || idTask > 0 && !openDialogHierarchy) { |
|
|
|
if (openDialog && hierarchyId > 0 || idTask > 0 && !openDialogHierarchy) { |
|
|
@ -51,33 +51,7 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName |
|
|
|
if (!openDialog) { |
|
|
|
if (!openDialog) { |
|
|
|
setDataGantt([]); |
|
|
|
setDataGantt([]); |
|
|
|
} |
|
|
|
} |
|
|
|
}, [hierarchyId, idTask, openDialog]) |
|
|
|
}, [hierarchyId, idTask, openDialog, searchGantt]) |
|
|
|
|
|
|
|
|
|
|
|
const getDataHumanResource = async () => { |
|
|
|
|
|
|
|
const result = await axios |
|
|
|
|
|
|
|
.get(USER_LIST, HEADER) |
|
|
|
|
|
|
|
.then(res => res) |
|
|
|
|
|
|
|
.catch((error) => error.response); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (result && result.status == 200) { |
|
|
|
|
|
|
|
setTransferUser(result.data.data); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const setTransferUser = (data) => { |
|
|
|
|
|
|
|
const finalData = [] |
|
|
|
|
|
|
|
data.map((val, index) => { |
|
|
|
|
|
|
|
let data = { |
|
|
|
|
|
|
|
key: val.id, |
|
|
|
|
|
|
|
title: val.name |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
finalData.push(data) |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
setHumanResource(finalData) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const getdataGantt = async () => { |
|
|
|
const getdataGantt = async () => { |
|
|
|
let payload; |
|
|
|
let payload; |
|
|
@ -85,7 +59,8 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName |
|
|
|
payload = { |
|
|
|
payload = { |
|
|
|
"select": ["id", "name_version", "calculation_type", "description", "created_at", "progress"], |
|
|
|
"select": ["id", "name_version", "calculation_type", "description", "created_at", "progress"], |
|
|
|
"columns": [ |
|
|
|
"columns": [ |
|
|
|
{ "name": "hierarchy_ftth_id", "logic_operator": "=", "value": hierarchyId, "operator": "AND" } |
|
|
|
{ "name": "hierarchy_ftth_id", "logic_operator": "=", "value": hierarchyId, "operator": "AND" }, |
|
|
|
|
|
|
|
{ "name": "id", "logic_operator": "=", "value": searchGantt, "operator": "AND" } |
|
|
|
], |
|
|
|
], |
|
|
|
"orders": { "columns": ["name_version"], "ascending": true } |
|
|
|
"orders": { "columns": ["name_version"], "ascending": true } |
|
|
|
} |
|
|
|
} |
|
|
@ -93,7 +68,8 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName |
|
|
|
payload = { |
|
|
|
payload = { |
|
|
|
"select": ["id", "name_version", "calculation_type", "description", "created_at", "progress"], |
|
|
|
"select": ["id", "name_version", "calculation_type", "description", "created_at", "progress"], |
|
|
|
"columns": [ |
|
|
|
"columns": [ |
|
|
|
{ "name": "proyek_id", "logic_operator": "=", "value": idTask, "operator": "AND" } |
|
|
|
{ "name": "proyek_id", "logic_operator": "=", "value": idTask, "operator": "AND" }, |
|
|
|
|
|
|
|
{ "name": "id", "logic_operator": "=", "value": searchGantt, "operator": "AND" } |
|
|
|
], |
|
|
|
], |
|
|
|
"orders": { "columns": ["name_version"], "ascending": true }, |
|
|
|
"orders": { "columns": ["name_version"], "ascending": true }, |
|
|
|
} |
|
|
|
} |
|
|
@ -168,6 +144,7 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName |
|
|
|
token: token, |
|
|
|
token: token, |
|
|
|
role_id: role_id, |
|
|
|
role_id: role_id, |
|
|
|
user_id: user_id, |
|
|
|
user_id: user_id, |
|
|
|
|
|
|
|
dataViewStartDate: dataViewStartDate |
|
|
|
} |
|
|
|
} |
|
|
|
}}> |
|
|
|
}}> |
|
|
|
<Tooltip title="Gantt"> |
|
|
|
<Tooltip title="Gantt"> |
|
|
@ -262,17 +239,36 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName |
|
|
|
<> |
|
|
|
<> |
|
|
|
<Modal size="xl" isOpen={openDialog} toggle={toggleDialog}> |
|
|
|
<Modal size="xl" isOpen={openDialog} toggle={toggleDialog}> |
|
|
|
<ModalHeader className="capitalize withBtn" toggle={closeDialog} style={{ width: "100%" }}> |
|
|
|
<ModalHeader className="capitalize withBtn" toggle={closeDialog} style={{ width: "100%" }}> |
|
|
|
{hierarchyName ? |
|
|
|
{hierarchyName ? ( |
|
|
|
<Breadcrumb> |
|
|
|
<Breadcrumb> |
|
|
|
<BreadcrumbItem><a href="/projects">Project</a></BreadcrumbItem> |
|
|
|
<BreadcrumbItem><a href="/projects">Project</a></BreadcrumbItem> |
|
|
|
<BreadcrumbItem active>{hierarchyName}</BreadcrumbItem> |
|
|
|
<BreadcrumbItem active>{hierarchyName}</BreadcrumbItem> |
|
|
|
</Breadcrumb> |
|
|
|
</Breadcrumb> |
|
|
|
: |
|
|
|
) : ( |
|
|
|
<div>Gantt Project {proyekName}</div> |
|
|
|
<div>Gantt Project {proyekName}</div> |
|
|
|
} |
|
|
|
|
|
|
|
{!hierarchyId && (<> <Button onClick={handleOpenDialogForm} size='sm' color="primary"><i className='fa fa-plus'></i></Button> |
|
|
|
|
|
|
|
</> |
|
|
|
|
|
|
|
)} |
|
|
|
)} |
|
|
|
|
|
|
|
<Select |
|
|
|
|
|
|
|
placeholder='Search Gantt Name' |
|
|
|
|
|
|
|
showSearch |
|
|
|
|
|
|
|
filterOption={(inputValue, option) => |
|
|
|
|
|
|
|
option.children.toLowerCase().includes(inputValue.toLowerCase()) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
onChange={(val) => setSearchGantt(val)} |
|
|
|
|
|
|
|
style={{ width: 200 }} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{dataGantt.map((res) => ( |
|
|
|
|
|
|
|
<Option key={res.id} value={res.id}> |
|
|
|
|
|
|
|
{res.name_version} |
|
|
|
|
|
|
|
</Option> |
|
|
|
|
|
|
|
))} |
|
|
|
|
|
|
|
</Select> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{!hierarchyId && ( |
|
|
|
|
|
|
|
<Button onClick={handleOpenDialogForm} size='sm' color="primary"> |
|
|
|
|
|
|
|
<i className='fa fa-plus'></i> |
|
|
|
|
|
|
|
</Button> |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
|
|
|
|
</ModalHeader> |
|
|
|
</ModalHeader> |
|
|
|
<ModalBody> |
|
|
|
<ModalBody> |
|
|
|
<div style={{ width: '100%', overflow: "auto" }}> |
|
|
|
<div style={{ width: '100%', overflow: "auto" }}> |
|
|
@ -281,10 +277,8 @@ const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName |
|
|
|
</Spin> |
|
|
|
</Spin> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</ModalBody> |
|
|
|
</ModalBody> |
|
|
|
{/* <ModalFooter> |
|
|
|
|
|
|
|
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button> |
|
|
|
|
|
|
|
</ModalFooter> */} |
|
|
|
|
|
|
|
</Modal > |
|
|
|
</Modal > |
|
|
|
|
|
|
|
|
|
|
|
<NotificationContainer /> |
|
|
|
<NotificationContainer /> |
|
|
|
<SweetAlert |
|
|
|
<SweetAlert |
|
|
|
show={alertDelete} |
|
|
|
show={alertDelete} |
|
|
|