wahyun
9 months ago
9 changed files with 2486 additions and 0 deletions
@ -0,0 +1,130 @@ |
|||||||
|
import React, { Fragment } from 'react' |
||||||
|
import './Kanban.css'; |
||||||
|
import { Card, Row, Col, Button, Avatar, Tooltip, Popover, Divider, Space, Menu, Dropdown } from 'antd'; |
||||||
|
import Task from './Task'; |
||||||
|
import { Droppable } from 'react-beautiful-dnd'; |
||||||
|
import styled from 'styled-components'
|
||||||
|
import {
|
||||||
|
AntDesignOutlined, |
||||||
|
UserOutlined, |
||||||
|
EditOutlined, |
||||||
|
DeleteOutlined, |
||||||
|
SettingOutlined, |
||||||
|
EllipsisOutlined, |
||||||
|
MoreOutlined |
||||||
|
} from '@ant-design/icons'; |
||||||
|
|
||||||
|
const Container = styled.div` |
||||||
|
margin: 8px; |
||||||
|
border: 1px solid lightgrey; |
||||||
|
border-radius: 2px; |
||||||
|
width: 220px; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
` |
||||||
|
|
||||||
|
const TaskList = styled.div` |
||||||
|
transition: background-color 0.2s ease; |
||||||
|
background-color: ${props => |
||||||
|
props.isDraggingOver ? 'skyblue' : 'white'} |
||||||
|
flex-grow: 1; |
||||||
|
min-height: 100px; |
||||||
|
` |
||||||
|
|
||||||
|
const Column = ({
|
||||||
|
column,
|
||||||
|
tasks,
|
||||||
|
index,
|
||||||
|
handleOpenDialogActivity,
|
||||||
|
handleOpenDialogChild,
|
||||||
|
handleDelete,
|
||||||
|
handleEditBoard,
|
||||||
|
loadingCard,
|
||||||
|
handleDeleteCard,
|
||||||
|
handleEditCard |
||||||
|
}) => { |
||||||
|
|
||||||
|
|
||||||
|
const menu = (column) => ( |
||||||
|
<Menu |
||||||
|
items={[ |
||||||
|
{ |
||||||
|
key: '3', |
||||||
|
label: ( |
||||||
|
<a rel="noopener noreferrer" > |
||||||
|
status is {column.status_progress} |
||||||
|
</a> |
||||||
|
), |
||||||
|
}, |
||||||
|
{ |
||||||
|
key: '1', |
||||||
|
label: ( |
||||||
|
<a rel="noopener noreferrer" onClick={() => handleEditBoard(column)} > |
||||||
|
<EditOutlined style={{marginRight: "5px"}} /> Edit |
||||||
|
</a> |
||||||
|
), |
||||||
|
}, |
||||||
|
{ |
||||||
|
key: '2', |
||||||
|
label: ( |
||||||
|
<a rel="noopener noreferrer" onClick={() => handleDelete(column.id)} > |
||||||
|
<DeleteOutlined style={{marginRight: "5px"}} /> Hapus |
||||||
|
</a> |
||||||
|
), |
||||||
|
}, |
||||||
|
]} |
||||||
|
/> |
||||||
|
); |
||||||
|
|
||||||
|
return ( |
||||||
|
<Col className="gutter-row" span={6}> |
||||||
|
<div className='board' style={{backgroundColor: column.header_color}}> |
||||||
|
<div className='title-board' style={{color: column.body_color}}> |
||||||
|
<b>{column.name_board}</b> |
||||||
|
{/* <a style={{color: column.body_color, marginRight: "7px", float: 'right'}} onClick={() => handleEditBoard(column)}><EditOutlined /></a> */} |
||||||
|
{/* <a style={{color: column.body_color, marginRight: "7px", float: 'right'}} onClick={() => handleDelete(column.id)}><DeleteOutlined /></a> */} |
||||||
|
<div style={{float: 'right', marginRight: "5px"}}> |
||||||
|
<Dropdown overlay={menu(column)}> |
||||||
|
<a onClick={(e) => e.preventDefault()}> |
||||||
|
<MoreOutlined style={{fontSize:"20px"}} /> |
||||||
|
</a> |
||||||
|
</Dropdown> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<Divider/> |
||||||
|
<div className='destination'> |
||||||
|
{ tasks.length === 0 &&
|
||||||
|
<p className='add-card' onClick={()=> handleOpenDialogActivity("Save", column.id)}>+ Add Activity</p> |
||||||
|
} |
||||||
|
<Droppable droppableId={column.key} type='TASK'> |
||||||
|
{(provided, snapshot) => ( |
||||||
|
<TaskList |
||||||
|
ref={provided.innerRef} |
||||||
|
{...provided.droppableProps} |
||||||
|
isDraggingOver={snapshot.isDraggingOver} |
||||||
|
> |
||||||
|
{tasks.map((task, index) => ( |
||||||
|
<Task
|
||||||
|
key={task.id}
|
||||||
|
task={task}
|
||||||
|
index={index}
|
||||||
|
bodyColor={column.body_color}
|
||||||
|
loadingCard={loadingCard}
|
||||||
|
handleDeleteCard={handleDeleteCard}
|
||||||
|
handleEditCard={handleEditCard} />
|
||||||
|
))} |
||||||
|
{provided.placeholder} |
||||||
|
</TaskList> |
||||||
|
)} |
||||||
|
</Droppable> |
||||||
|
{ tasks.length > 0 &&
|
||||||
|
<p className='add-card' onClick={()=> handleOpenDialogActivity("Save", column.id)}>+ Add Activity</p> |
||||||
|
} |
||||||
|
</div> |
||||||
|
</Col> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default Column; |
||||||
@ -0,0 +1,72 @@ |
|||||||
|
import React, { useEffect, useState } from 'react' |
||||||
|
import { |
||||||
|
ModalHeader, ModalBody, ModalFooter, |
||||||
|
Button, Form, FormGroup, Label, Input, Col, Row |
||||||
|
} from 'reactstrap'; |
||||||
|
import { DatePicker, Tooltip, Select, Modal } from 'antd'; |
||||||
|
import { formatRupiah, formatNumber } from '../../../const/CustomFunc' |
||||||
|
import moment from 'moment'; |
||||||
|
import 'antd/dist/antd.css'; |
||||||
|
const { Option } = Select |
||||||
|
|
||||||
|
const DialogCard = ({
|
||||||
|
openDialogChild, |
||||||
|
closeDialogChild, |
||||||
|
toggleDialogChild, |
||||||
|
typeDialogChild, |
||||||
|
task,
|
||||||
|
}) => { |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
|
||||||
|
}, [openDialogChild]) |
||||||
|
|
||||||
|
const handleCancel = () => { |
||||||
|
closeDialogChild('cancel', 'none') |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
{/* <Modal size="lg" isOpen={openDialogChild} toggle={toggleDialogChild} centered> |
||||||
|
<ModalHeader className="capitalize" toggle={closeDialogChild}></ModalHeader> |
||||||
|
<ModalBody> |
||||||
|
</ModalBody> |
||||||
|
<ModalFooter> |
||||||
|
<Button color="primary" onClick={() => handleSave()}>{typeDialogChild == "Edit" ? `Edit` : "Save"}</Button>{' '} |
||||||
|
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button> |
||||||
|
</ModalFooter> |
||||||
|
</Modal> */} |
||||||
|
<Modal title="Card" open={openDialogChild} onOk={handleCancel} onCancel={handleCancel}
|
||||||
|
footer={[ |
||||||
|
<Button key="back" onClick={handleCancel}> |
||||||
|
Close |
||||||
|
</Button> |
||||||
|
]} |
||||||
|
> |
||||||
|
<Row style={{padding: "20px"}}> |
||||||
|
<Col md={6} style={{fontWeight: "bold"}} >Activity</Col> |
||||||
|
<Col md={6}>{task.activity}</Col> |
||||||
|
</Row> |
||||||
|
<Row style={{padding: "20px"}}> |
||||||
|
<Col md={6} style={{fontWeight: "bold"}}>Start Date</Col> |
||||||
|
<Col md={6}>{moment(task.start_date).format('DD-MM-YYYY HH:mm')}</Col> |
||||||
|
</Row> |
||||||
|
<Row style={{padding: "20px"}}> |
||||||
|
<Col md={6} style={{fontWeight: "bold"}}>End Date</Col> |
||||||
|
<Col md={6}>{moment(task.end_date).format('DD-MM-YYYY HH:mm')}</Col> |
||||||
|
</Row> |
||||||
|
<Row style={{padding: "20px"}}> |
||||||
|
<Col md={6} style={{fontWeight: "bold"}}>Bobot Planning </Col> |
||||||
|
<Col md={6}>{task.bobot_planning}</Col> |
||||||
|
</Row> |
||||||
|
<Row style={{padding: "20px"}}> |
||||||
|
<Col md={6} style={{fontWeight: "bold"}}>Presentase Progress </Col> |
||||||
|
<Col md={6}>{task.persentase_progress}</Col> |
||||||
|
</Row> |
||||||
|
</Modal> |
||||||
|
</> |
||||||
|
) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
export default DialogCard; |
||||||
@ -0,0 +1,347 @@ |
|||||||
|
import React, { useEffect, useState } from 'react' |
||||||
|
import { |
||||||
|
Modal, ModalHeader, ModalBody, ModalFooter, |
||||||
|
Form, FormGroup, Label, Input, Col, Row |
||||||
|
} from 'reactstrap'; |
||||||
|
import { DatePicker, Tooltip, Drawer, Divider, Layout, Button, Space, Progress } from 'antd'; |
||||||
|
import { |
||||||
|
CloseOutlined, |
||||||
|
MinusOutlined,
|
||||||
|
PlusOutlined |
||||||
|
} from '@ant-design/icons'; |
||||||
|
import { formatRupiah, formatNumber } from '../../../const/CustomFunc' |
||||||
|
import moment from 'moment'; |
||||||
|
import Select from 'react-select'; |
||||||
|
import axios from "../../../const/interceptorApi"; |
||||||
|
import { BASE_SIMPRO_LUMEN } from '../../../const/ApiConst'; |
||||||
|
import { |
||||||
|
NotificationManager |
||||||
|
} from "react-notifications"; |
||||||
|
import 'antd/dist/antd.css'; |
||||||
|
// const { Option } = Select
|
||||||
|
|
||||||
|
const DialogFormActivity = ({
|
||||||
|
activityProject, |
||||||
|
openDialogActivity,
|
||||||
|
closeDialogActivity,
|
||||||
|
handleOpenDialogReport, |
||||||
|
toggleDialogActivity,
|
||||||
|
typeDialogActivity,
|
||||||
|
proyek_id,
|
||||||
|
version_gantt_id,
|
||||||
|
idBoard,
|
||||||
|
dataHr,
|
||||||
|
dataEditCard, |
||||||
|
userToActivityDelete, |
||||||
|
userToActivityAdd |
||||||
|
}) => { |
||||||
|
const [id, setId] = useState('') |
||||||
|
const [text, setText] = useState('') |
||||||
|
const [startDate, setStartDate] = useState('') |
||||||
|
const [progress, setProgress] = useState(0) |
||||||
|
const [volumePlan, setVolumePlan] = useState(0) |
||||||
|
const [endDate, setEndDate] = useState('') |
||||||
|
const [nativeeditorStatus, setNativeeditorStatus] = useState('') |
||||||
|
const [hr, setHr] = useState(null); |
||||||
|
const [hrTemporary, setHrTemporary] = useState(); |
||||||
|
const [hrTemporaryAdd, setHrTemporaryAdd] = useState([]); |
||||||
|
const [IdDeleteHrTemporary, setIdDeleteHrTemporary] = useState([]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
|
||||||
|
setText('') |
||||||
|
setStartDate('') |
||||||
|
setProgress(0) |
||||||
|
setEndDate('') |
||||||
|
setVolumePlan(0) |
||||||
|
setHr('') |
||||||
|
setHrTemporaryAdd([]) |
||||||
|
setHrTemporary([]) |
||||||
|
setIdDeleteHrTemporary([]) |
||||||
|
|
||||||
|
if (typeDialogActivity === "Edit") { |
||||||
|
|
||||||
|
setId(dataEditCard.id) |
||||||
|
setText(dataEditCard.activity) |
||||||
|
setProgress(dataEditCard.persentase_progress)
|
||||||
|
setStartDate(moment(dataEditCard.start_date)) |
||||||
|
setEndDate(moment(dataEditCard.end_date))
|
||||||
|
dataEditCard.assign_hr.map((item) => { |
||||||
|
item.value = item.id_hr |
||||||
|
item.label = item.name |
||||||
|
}) |
||||||
|
setVolumePlan(dataEditCard.jumlah_pekerjaan) |
||||||
|
setHr(dataEditCard.assign_hr) |
||||||
|
setHrTemporary(dataEditCard.assign_hr) |
||||||
|
|
||||||
|
} else { |
||||||
|
|
||||||
|
setId(0) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
dataHr.map((item) => { |
||||||
|
item.value = item.id |
||||||
|
item.label = item.name |
||||||
|
}) |
||||||
|
|
||||||
|
}, [openDialogActivity]) |
||||||
|
|
||||||
|
const handleCancel = () => { |
||||||
|
closeDialogActivity('cancel', 'none') |
||||||
|
setVolumePlan(0) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
const handleSave = () => { |
||||||
|
let data = ''; |
||||||
|
|
||||||
|
if (!text || text === "") { |
||||||
|
alert("text cannot be empty!"); |
||||||
|
return false; |
||||||
|
} |
||||||
|
if (!startDate || startDate === "") { |
||||||
|
alert("startDate cannot be empty!"); |
||||||
|
return false; |
||||||
|
} |
||||||
|
if (!endDate || endDate === "") { |
||||||
|
alert("endDate cannot be empty!"); |
||||||
|
return false; |
||||||
|
} |
||||||
|
if (!hr || hr === "") { |
||||||
|
alert("hr cannot be empty!"); |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
if (typeDialogActivity === "Save") { |
||||||
|
|
||||||
|
data = { |
||||||
|
"text" : text, |
||||||
|
"start_date": startDate, |
||||||
|
"jumlah_pekerjaan" : volumePlan, |
||||||
|
"end_date" : endDate, |
||||||
|
"proyek_id" : proyek_id, |
||||||
|
"version_gantt_id": version_gantt_id, |
||||||
|
"board_id" : idBoard, |
||||||
|
"parent_id" : activityProject |
||||||
|
} |
||||||
|
closeDialogActivity('save', data, hr, id); |
||||||
|
} else if (typeDialogActivity === "Edit") { |
||||||
|
|
||||||
|
hrTemporaryAdd.map((item)=> { |
||||||
|
let dataSaveHr = { |
||||||
|
"user_id": item.id, |
||||||
|
"role_proyek_id": item.proyek_role, |
||||||
|
"version_gantt_id": version_gantt_id, |
||||||
|
"proyek_id": proyek_id, |
||||||
|
"activity_id": id |
||||||
|
} |
||||||
|
userToActivityAdd(dataSaveHr) |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
IdDeleteHrTemporary.map((item)=>{ |
||||||
|
|
||||||
|
userToActivityDelete(item) |
||||||
|
|
||||||
|
}) |
||||||
|
|
||||||
|
setHrTemporaryAdd([]) |
||||||
|
setIdDeleteHrTemporary([]) |
||||||
|
setHrTemporary([]) |
||||||
|
|
||||||
|
progress == 100 ? |
||||||
|
data = { |
||||||
|
"text": text, |
||||||
|
"start_date": startDate, |
||||||
|
"jumlah_pekerjaan": volumePlan, |
||||||
|
"end_date": endDate, |
||||||
|
"proyek_id": proyek_id, |
||||||
|
"version_gantt_id": version_gantt_id, |
||||||
|
"board_id": idBoard, |
||||||
|
"progress": parseFloat(progress / 100).toFixed(2) |
||||||
|
} |
||||||
|
: |
||||||
|
data = { |
||||||
|
"text": text, |
||||||
|
"start_date": startDate, |
||||||
|
"jumlah_pekerjaan": volumePlan, |
||||||
|
"end_date": endDate, |
||||||
|
"proyek_id": proyek_id, |
||||||
|
"version_gantt_id": version_gantt_id, |
||||||
|
"board_id": idBoard, |
||||||
|
"progress": parseFloat(progress / 100).toFixed(2) |
||||||
|
} |
||||||
|
|
||||||
|
closeDialogActivity('edit', data, hr, id); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
const onChangeHr = (newValue, actionMeta) => {
|
||||||
|
if (typeDialogActivity === "Edit") {
|
||||||
|
if (actionMeta.action === 'select-option') { |
||||||
|
const item = actionMeta.option |
||||||
|
// console.log("actionMeta", item);
|
||||||
|
// let dataSaveHr = {
|
||||||
|
// "user_id": item.id,
|
||||||
|
// "role_proyek_id": item.proyek_role,
|
||||||
|
// "version_gantt_id": version_gantt_id,
|
||||||
|
// "proyek_id": proyek_id,
|
||||||
|
// "activity_id": id
|
||||||
|
// }
|
||||||
|
// userToActivityAdd(dataSaveHr)
|
||||||
|
setHrTemporaryAdd([...hrTemporaryAdd, item]) |
||||||
|
} else if (actionMeta.action === 'remove-value') { |
||||||
|
const id = actionMeta.removedValue.id |
||||||
|
// userToActivityDelete(id)
|
||||||
|
for (let k in hrTemporary) {
|
||||||
|
if (hrTemporary[k].id == id) { |
||||||
|
setIdDeleteHrTemporary([...IdDeleteHrTemporary, id]) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
}
|
||||||
|
} |
||||||
|
|
||||||
|
setHr(newValue) |
||||||
|
}; |
||||||
|
|
||||||
|
const increase = () => { |
||||||
|
let newPercent = progress + 10; |
||||||
|
if (newPercent > 100) { |
||||||
|
newPercent = 100; |
||||||
|
} |
||||||
|
setProgress(newPercent); |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
const decline = () => { |
||||||
|
let newPercent = progress - 10; |
||||||
|
if (newPercent < 0) { |
||||||
|
newPercent = 0; |
||||||
|
} |
||||||
|
setProgress(newPercent); |
||||||
|
}; |
||||||
|
|
||||||
|
const renderForm = () => { |
||||||
|
return ( |
||||||
|
<Form> |
||||||
|
<Row> |
||||||
|
<Col md={12}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">Text</Label> |
||||||
|
<Input type="text" value={text} onChange={(e) => setText(e.target.value)} /> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<Col md={12}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">Start Date</Label> |
||||||
|
<DatePicker style={{ width: "100%" }} value={startDate} onChange={(dateItem, dateString) => { |
||||||
|
dateItem.set({hour:0,minute:0,second:0}) |
||||||
|
setStartDate(dateItem)}}
|
||||||
|
/> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<Col md={12}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">End date</Label> |
||||||
|
<DatePicker style={{ width: "100%" }} value={endDate} onChange={(dateItem, dateString) => { |
||||||
|
dateItem.set({hour:23,minute:59,second:59}) |
||||||
|
setEndDate(dateItem)}} |
||||||
|
/> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
{/* <Col md={12}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">Duration</Label> |
||||||
|
<Input type="number" value={duration} onChange={(e) => setDuration(e.target.value)}/> |
||||||
|
</FormGroup> |
||||||
|
</Col> */} |
||||||
|
<Col md={12}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">Presentase Progress</Label> |
||||||
|
{/* <Input type="number" value={progress} onChange={(e) => setProgress(e.target.value)}/> */} |
||||||
|
<Progress percent={Math.round(progress)} /> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<Col md={12}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">Volume Plan</Label> |
||||||
|
<Input type="number" value={volumePlan} onChange={(e) => setVolumePlan(e.target.value)} /> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<Col md={12}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">Human Resource</Label> |
||||||
|
{/* <Select |
||||||
|
showSearch |
||||||
|
filterOption={(inputValue, option) => |
||||||
|
option.children.toLowerCase().includes(inputValue.toLowerCase()) |
||||||
|
} |
||||||
|
value={hr} |
||||||
|
defaultValue={hr} |
||||||
|
onChange={onChangeHr} |
||||||
|
style={{ width: "100%" }} |
||||||
|
> |
||||||
|
{dataHr.map((res) => ( |
||||||
|
<Option key={res.id} value={res.id}> |
||||||
|
{res.name} |
||||||
|
</Option> |
||||||
|
))} |
||||||
|
</Select> */} |
||||||
|
<Select |
||||||
|
value={hr} |
||||||
|
defaultValue={hr} |
||||||
|
isClearable={false} |
||||||
|
isMulti |
||||||
|
name="colors" |
||||||
|
options={dataHr} |
||||||
|
className="basic-multi-select" |
||||||
|
classNamePrefix="select" |
||||||
|
onChange={onChangeHr} |
||||||
|
/> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<Col md={12}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">Volume Actual : {Math.round(parseInt(progress) / 100 * volumePlan)}</Label> |
||||||
|
<div> |
||||||
|
<Button onClick={() => handleOpenDialogReport("Save")} type="primary">Detail Report</Button> |
||||||
|
</div> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Form> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Drawer title="Basic Drawer" placement="right" onClose={() => handleCancel()} open={openDialogActivity}> |
||||||
|
<div className='top'> |
||||||
|
<Space> |
||||||
|
<Button type='text' onClick={() => handleCancel()}><CloseOutlined /></Button> |
||||||
|
</Space> |
||||||
|
<Space style={{float:"right"}}> |
||||||
|
<Button onClick={() => handleCancel()}>Cancel</Button> |
||||||
|
<Button onClick={() => handleSave()} type="primary"> |
||||||
|
{typeDialogActivity == "Edit" ? `Edit` : "Add"} Activity |
||||||
|
</Button> |
||||||
|
</Space> |
||||||
|
<Divider /> |
||||||
|
</div> |
||||||
|
<div className='content' style={{alignContent:'center'}}> |
||||||
|
{renderForm()} |
||||||
|
</div> |
||||||
|
<div className='bottom' style={{float:'bottom'}}> |
||||||
|
</div> |
||||||
|
</Drawer> |
||||||
|
</> |
||||||
|
) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
export default DialogFormActivity; |
||||||
@ -0,0 +1,176 @@ |
|||||||
|
import React, { useEffect, useState } from 'react' |
||||||
|
import { |
||||||
|
Modal, ModalHeader, ModalBody, ModalFooter, |
||||||
|
Form, FormGroup, Label, Input, Col, Row, FormFeedback |
||||||
|
} from 'reactstrap'; |
||||||
|
import { DatePicker, Tooltip, Select, Drawer, Divider, Layout, Button, Space } from 'antd'; |
||||||
|
import 'antd/dist/antd.css'; |
||||||
|
import { |
||||||
|
CloseOutlined |
||||||
|
} from '@ant-design/icons'; |
||||||
|
const { Option } = Select |
||||||
|
const { Header, Footer, Sider, Content } = Layout; |
||||||
|
|
||||||
|
|
||||||
|
const DialogFormBoard = ({ openDialogBoard, closeDialogBoard, toggleDialogBoard, typeDialogBoard, dataEditBoard, proyek_id, version_gantt_id }) => { |
||||||
|
const [id, setId] = useState(0) |
||||||
|
const [nameBoard, setNameBoard] = useState('') |
||||||
|
const [statusProgress, setStatusProgress] = useState('none') |
||||||
|
const [headerColor, setHeaderColor] = useState('#000000') |
||||||
|
const [bodyColor, setBodyColor] = useState('#ffffff') |
||||||
|
|
||||||
|
// validation
|
||||||
|
const [nameBoardVal, setNameBoardVal] = useState(false) |
||||||
|
|
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
|
||||||
|
setNameBoard('') |
||||||
|
setStatusProgress('') |
||||||
|
setHeaderColor('#000000') |
||||||
|
setBodyColor('#ffffff') |
||||||
|
|
||||||
|
if (typeDialogBoard === "Edit") { |
||||||
|
setId(dataEditBoard.id) |
||||||
|
setNameBoard(dataEditBoard.name_board) |
||||||
|
setHeaderColor(dataEditBoard.header_color) |
||||||
|
setBodyColor(dataEditBoard.body_color) |
||||||
|
setStatusProgress(dataEditBoard.status_progress) |
||||||
|
} else { |
||||||
|
setId(0) |
||||||
|
} |
||||||
|
}, [dataEditBoard, openDialogBoard]) |
||||||
|
|
||||||
|
const handleCancel = () => { |
||||||
|
closeDialogBoard('cancel', 'none') |
||||||
|
} |
||||||
|
|
||||||
|
const handleSave = () => { |
||||||
|
let data = ''; |
||||||
|
|
||||||
|
if (!nameBoard || nameBoard === "") { |
||||||
|
alert("nameBoard cannot be empty!"); |
||||||
|
return false; |
||||||
|
} |
||||||
|
if (!statusProgress || statusProgress === "") { |
||||||
|
alert("statusProgress cannot be empty!"); |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
if (typeDialogBoard === "Save") { |
||||||
|
data = { |
||||||
|
name_board: nameBoard, |
||||||
|
status_progress: statusProgress, |
||||||
|
header_color: headerColor, |
||||||
|
body_color: bodyColor, |
||||||
|
proyek_id: proyek_id, |
||||||
|
version_gantt_id: version_gantt_id |
||||||
|
} |
||||||
|
closeDialogBoard('save', data); |
||||||
|
} else if (typeDialogBoard === "Edit") { |
||||||
|
data = { |
||||||
|
id: id, |
||||||
|
name_board: nameBoard, |
||||||
|
status_progress: statusProgress, |
||||||
|
header_color: headerColor, |
||||||
|
body_color: bodyColor, |
||||||
|
proyek_id: proyek_id, |
||||||
|
version_gantt_id: version_gantt_id |
||||||
|
} |
||||||
|
closeDialogBoard('edit', data); |
||||||
|
} |
||||||
|
|
||||||
|
setNameBoard('') |
||||||
|
setStatusProgress('') |
||||||
|
setHeaderColor('#000000') |
||||||
|
setBodyColor('#ffffff') |
||||||
|
} |
||||||
|
|
||||||
|
const onChangeStatusProgress = (val) => { |
||||||
|
setStatusProgress(val) |
||||||
|
}; |
||||||
|
|
||||||
|
const renderForm = () => { |
||||||
|
return ( |
||||||
|
<Form> |
||||||
|
<Row> |
||||||
|
<Col md={12}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">Name Board</Label> |
||||||
|
<Input type="text" value={nameBoard} onChange={(e) => setNameBoard(e.target.value)} /> |
||||||
|
{/* <Input type="text" value={nameBoard} onChange={(e) => setNameBoard(e.target.value)} invalid={nameBoardVal} /> |
||||||
|
<FormFeedback> |
||||||
|
Required!
|
||||||
|
</FormFeedback> */} |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<Col md={12}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">Status Progress</Label> |
||||||
|
{/* <Input type="text" value={statusProgress} onChange={(e) => setStatusProgress(e.target.value)}/> */} |
||||||
|
<Select |
||||||
|
showSearch |
||||||
|
filterOption={(inputValue, option) => |
||||||
|
option.children.toLowerCase().includes(inputValue.toLowerCase()) |
||||||
|
} |
||||||
|
value={statusProgress} |
||||||
|
defaultValue={statusProgress} |
||||||
|
onChange={onChangeStatusProgress} |
||||||
|
style={{ width: "100%" }} |
||||||
|
> |
||||||
|
<Option value="none">none</Option> |
||||||
|
<Option value="open">open</Option> |
||||||
|
<Option value="on-progress">on-progress</Option> |
||||||
|
<Option value="done">done</Option> |
||||||
|
</Select> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<Col md={6}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">Header Color</Label> |
||||||
|
<Input type="color" value={headerColor} onChange={(e) => setHeaderColor(e.target.value)} /> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<Col md={6}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">Text Header Color</Label> |
||||||
|
<Input type="color" value={bodyColor} onChange={(e) => setBodyColor(e.target.value)} /> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Form> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Drawer title="Basic Drawer" placement="right" onClose={() => handleCancel()} open={openDialogBoard}> |
||||||
|
<div className='top'> |
||||||
|
<Space> |
||||||
|
<Button type='text' onClick={() => handleCancel()}><CloseOutlined /></Button> |
||||||
|
</Space> |
||||||
|
<Space style={{ float: "right" }}> |
||||||
|
<Button onClick={() => handleCancel()}>Cancel</Button> |
||||||
|
<Button onClick={() => handleSave()} type="primary"> |
||||||
|
{typeDialogBoard == "Edit" ? `Edit` : "Add"} Board |
||||||
|
</Button> |
||||||
|
</Space> |
||||||
|
<Divider /> |
||||||
|
</div> |
||||||
|
<div className='content' style={{ alignContent: 'center' }}> |
||||||
|
{renderForm()} |
||||||
|
</div> |
||||||
|
<div className='bottom' style={{ float: 'bottom' }}> |
||||||
|
</div> |
||||||
|
</Drawer> |
||||||
|
</> |
||||||
|
) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
export default DialogFormBoard; |
||||||
@ -0,0 +1,69 @@ |
|||||||
|
import React, { useEffect, useState } from 'react' |
||||||
|
import { |
||||||
|
Modal, ModalHeader, ModalBody, ModalFooter, |
||||||
|
Button, Form, FormGroup, Label, Input, Col, Row |
||||||
|
} from 'reactstrap'; |
||||||
|
import { DatePicker, Tooltip, Select } from 'antd'; |
||||||
|
import { formatRupiah, formatNumber } from '../../../const/CustomFunc' |
||||||
|
import moment from 'moment'; |
||||||
|
import 'antd/dist/antd.css'; |
||||||
|
const { Option } = Select |
||||||
|
|
||||||
|
const DialogFormChild = ({ openDialogChild, closeDialogChild, toggleDialogChild, typeDialogChild }) => { |
||||||
|
const [activity, setActivity] = useState('') |
||||||
|
const [name, setName] = useState('') |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
|
||||||
|
}, [openDialogChild]) |
||||||
|
|
||||||
|
const handleCancel = () => { |
||||||
|
closeDialogChild('cancel', 'none') |
||||||
|
} |
||||||
|
|
||||||
|
const handleSave = () => { |
||||||
|
let data = ''; |
||||||
|
if (typeDialogChild === "Save") { |
||||||
|
data = { |
||||||
|
name,
|
||||||
|
} |
||||||
|
closeDialogChild('save', data); |
||||||
|
}
|
||||||
|
|
||||||
|
setActivity('') |
||||||
|
} |
||||||
|
|
||||||
|
const renderForm = () => { |
||||||
|
return ( |
||||||
|
<Form> |
||||||
|
<Row> |
||||||
|
<Col md={6}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">Name</Label> |
||||||
|
<Input type="text" value={name} onChange={(e) => setName(e.target.value)}/> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Form> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Modal size="lg" isOpen={openDialogChild} toggle={toggleDialogChild}> |
||||||
|
<ModalHeader className="capitalize" toggle={closeDialogChild}>{typeDialogChild == "Edit" ? `Edit` : "Add"} Child</ModalHeader> |
||||||
|
<ModalBody> |
||||||
|
{renderForm()} |
||||||
|
</ModalBody> |
||||||
|
<ModalFooter> |
||||||
|
<Button color="primary" onClick={() => handleSave()}>{typeDialogChild == "Edit" ? `Edit` : "Save"}</Button>{' '} |
||||||
|
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button> |
||||||
|
</ModalFooter> |
||||||
|
</Modal> |
||||||
|
</> |
||||||
|
) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
export default DialogFormChild; |
||||||
@ -0,0 +1,438 @@ |
|||||||
|
import React, { useEffect, useState } from 'react' |
||||||
|
import { |
||||||
|
Modal, ModalHeader, ModalBody, ModalFooter, |
||||||
|
Form, FormGroup, Label, Input, Col, Row |
||||||
|
} from 'reactstrap'; |
||||||
|
import { DatePicker, Table, Drawer, Divider, Tooltip, Button, Space, Progress } from 'antd'; |
||||||
|
import { |
||||||
|
CloseOutlined, |
||||||
|
MinusOutlined, |
||||||
|
PlusOutlined |
||||||
|
} from '@ant-design/icons'; |
||||||
|
import { |
||||||
|
NotificationManager |
||||||
|
} from "react-notifications"; |
||||||
|
import SweetAlert from 'react-bootstrap-sweetalert'; |
||||||
|
import { formatRupiah, formatNumber } from '../../../const/CustomFunc' |
||||||
|
import moment from 'moment'; |
||||||
|
import Select from 'react-select'; |
||||||
|
import 'antd/dist/antd.css'; |
||||||
|
import axios from "../../../const/interceptorApi"; |
||||||
|
import { BASE_SIMPRO_LUMEN } from '../../../const/ApiConst'; |
||||||
|
// const { Option } = Select
|
||||||
|
|
||||||
|
const DialogFormReport = ({ |
||||||
|
activityProject, |
||||||
|
openDialogReport, |
||||||
|
closeDialogReport, |
||||||
|
toggleDialogActivity, |
||||||
|
typeDialogReport, |
||||||
|
proyek_id, |
||||||
|
version_gantt_id, |
||||||
|
idBoard, |
||||||
|
dataHr, |
||||||
|
dataEditCard, |
||||||
|
userToActivityDelete, |
||||||
|
userToActivityAdd |
||||||
|
}) => { |
||||||
|
const [id, setId] = useState('') |
||||||
|
const [idDelete, setIdDelete] = useState('') |
||||||
|
const [alertDelete, setAlertDelete] = useState(false) |
||||||
|
const [text, setText] = useState('') |
||||||
|
const [description, setDescription] = useState('') |
||||||
|
const [startDate, setStartDate] = useState('') |
||||||
|
const [reportDate, setReportDate] = useState('') |
||||||
|
const [progress, setProgress] = useState(0) |
||||||
|
const [volumePlan, setVolumePlan] = useState(0) |
||||||
|
const [volumeActual, setVolumeActual] = useState(0) |
||||||
|
const [nativeeditorStatus, setNativeeditorStatus] = useState('') |
||||||
|
const [hr, setHr] = useState(null); |
||||||
|
const [hrTemporary, setHrTemporary] = useState(); |
||||||
|
const [hrTemporaryAdd, setHrTemporaryAdd] = useState([]); |
||||||
|
const [IdDeleteHrTemporary, setIdDeleteHrTemporary] = useState([]); |
||||||
|
const [reportActivity, setReportActivity] = useState([]) |
||||||
|
const token = localStorage.getItem("token"); |
||||||
|
|
||||||
|
const HEADER = { |
||||||
|
headers: { |
||||||
|
"Content-Type": "application/json", |
||||||
|
Authorization: `Bearer ${token}`, |
||||||
|
}, |
||||||
|
}; |
||||||
|
useEffect(() => { |
||||||
|
|
||||||
|
setText('') |
||||||
|
setStartDate('') |
||||||
|
setProgress(0) |
||||||
|
setVolumePlan(0) |
||||||
|
setHr('') |
||||||
|
setHrTemporaryAdd([]) |
||||||
|
setHrTemporary([]) |
||||||
|
setIdDeleteHrTemporary([]) |
||||||
|
if (dataEditCard.id) { |
||||||
|
handleGetReportActivity(dataEditCard.id) |
||||||
|
} |
||||||
|
|
||||||
|
if (typeDialogReport === "Edit") { |
||||||
|
|
||||||
|
setId(dataEditCard.id) |
||||||
|
setText(dataEditCard.activity) |
||||||
|
setProgress(dataEditCard.persentase_progress) |
||||||
|
setStartDate(moment(dataEditCard.start_date)) |
||||||
|
dataEditCard.assign_hr.map((item) => { |
||||||
|
item.value = item.id_hr |
||||||
|
item.label = item.name |
||||||
|
}) |
||||||
|
setVolumePlan(dataEditCard.jumlah_pekerjaan) |
||||||
|
setHr(dataEditCard.assign_hr) |
||||||
|
setHrTemporary(dataEditCard.assign_hr) |
||||||
|
|
||||||
|
} else { |
||||||
|
|
||||||
|
setId(0) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
dataHr.map((item) => { |
||||||
|
item.value = item.id |
||||||
|
item.label = item.name |
||||||
|
}) |
||||||
|
|
||||||
|
}, [openDialogReport]) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (dataEditCard.id) { |
||||||
|
handleGetReportActivity(dataEditCard.id) |
||||||
|
} |
||||||
|
}, [idDelete]) |
||||||
|
|
||||||
|
const handleCancel = () => { |
||||||
|
closeDialogReport('cancel', 'none') |
||||||
|
} |
||||||
|
|
||||||
|
const handleReport = () => { |
||||||
|
console.log('Button Triggered') |
||||||
|
} |
||||||
|
|
||||||
|
const handleGetReportActivity = async (id) => { |
||||||
|
const payload = { |
||||||
|
columns: [ |
||||||
|
{ |
||||||
|
name: "activity_id", |
||||||
|
logic_operator: "=", |
||||||
|
value: id, |
||||||
|
operator: "AND", |
||||||
|
} |
||||||
|
], |
||||||
|
}; |
||||||
|
|
||||||
|
const result = await axios |
||||||
|
.post(`${BASE_SIMPRO_LUMEN}/report-activity/search`, payload, HEADER) |
||||||
|
.then((res) => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
if (result && result.data && result.data.code == 200) { |
||||||
|
let dataRes = result.data.data || []; |
||||||
|
dataRes.map((item) => { |
||||||
|
let formattedDate = moment(item.report_date, "YYYY-MM-DD HH:mm:ssZ").format('YYYY-MM-DD'); |
||||||
|
item.report_date = formattedDate; |
||||||
|
|
||||||
|
}) |
||||||
|
setReportActivity(dataRes) |
||||||
|
} else { |
||||||
|
NotificationManager.error("Gagal Mengambil Data!!", "Failed"); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const handleDeleteReport = (id) => { |
||||||
|
setIdDelete(id) |
||||||
|
setAlertDelete(true) |
||||||
|
} |
||||||
|
|
||||||
|
const cancelDelete = () => { |
||||||
|
setAlertDelete(false) |
||||||
|
} |
||||||
|
|
||||||
|
const onConfirmDelete = async () => { |
||||||
|
let url = `${BASE_SIMPRO_LUMEN}/report-activity/delete/${idDelete}`; |
||||||
|
setAlertDelete(false) |
||||||
|
const result = await axios.delete(url, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
if (result && result.data && result.data.code === 200) { |
||||||
|
setIdDelete('') |
||||||
|
closeDialogReport("Delete") |
||||||
|
NotificationManager.success(`Data berhasil dihapus!`, 'Success!!'); |
||||||
|
} else { |
||||||
|
setIdDelete('') |
||||||
|
NotificationManager.error(`Data gagal dihapus!}`, 'Failed!!'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const handleSave = () => { |
||||||
|
let data = ''; |
||||||
|
|
||||||
|
if (!reportDate || reportDate === "") { |
||||||
|
alert("reportDate cannot be empty!"); |
||||||
|
return false; |
||||||
|
} |
||||||
|
if (!hr || hr === "") { |
||||||
|
alert("hr cannot be empty!"); |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
if (typeDialogReport === "Save") { |
||||||
|
|
||||||
|
data = { |
||||||
|
"activity_id": dataEditCard.id, |
||||||
|
"report_date": reportDate, |
||||||
|
"jumlah_pekerjaan": volumeActual, |
||||||
|
"description": description |
||||||
|
} |
||||||
|
setReportDate(''); |
||||||
|
setVolumeActual(0); |
||||||
|
setHr(null); |
||||||
|
setDescription(''); |
||||||
|
closeDialogReport('Save', data, hr); |
||||||
|
handleCancel() |
||||||
|
} else if (typeDialogReport === "Edit") { |
||||||
|
|
||||||
|
hrTemporaryAdd.map((item) => { |
||||||
|
let dataSaveHr = { |
||||||
|
"user_id": item.id, |
||||||
|
"role_proyek_id": item.proyek_role, |
||||||
|
"version_gantt_id": version_gantt_id, |
||||||
|
"proyek_id": proyek_id, |
||||||
|
"activity_id": id |
||||||
|
} |
||||||
|
userToActivityAdd(dataSaveHr) |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
IdDeleteHrTemporary.map((item) => { |
||||||
|
|
||||||
|
userToActivityDelete(item) |
||||||
|
|
||||||
|
}) |
||||||
|
|
||||||
|
setHrTemporaryAdd([]) |
||||||
|
setIdDeleteHrTemporary([]) |
||||||
|
setHrTemporary([]) |
||||||
|
|
||||||
|
progress == 100 ? |
||||||
|
data = { |
||||||
|
"text": text, |
||||||
|
"start_date": startDate, |
||||||
|
"jumlah_pekerjaan": volumePlan, |
||||||
|
"proyek_id": proyek_id, |
||||||
|
"version_gantt_id": version_gantt_id, |
||||||
|
"board_id": idBoard |
||||||
|
} |
||||||
|
: |
||||||
|
data = { |
||||||
|
"text": text, |
||||||
|
"start_date": startDate, |
||||||
|
"jumlah_pekerjaan": volumePlan, |
||||||
|
"proyek_id": proyek_id, |
||||||
|
"version_gantt_id": version_gantt_id, |
||||||
|
"board_id": idBoard |
||||||
|
} |
||||||
|
|
||||||
|
closeDialogReport('edit', data, hr, id); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
const onChangeHr = (newValue, actionMeta) => { |
||||||
|
if (typeDialogReport === "Edit") { |
||||||
|
if (actionMeta.action === 'select-option') { |
||||||
|
const item = actionMeta.option |
||||||
|
// console.log("actionMeta", item);
|
||||||
|
// let dataSaveHr = {
|
||||||
|
// "user_id": item.id,
|
||||||
|
// "role_proyek_id": item.proyek_role,
|
||||||
|
// "version_gantt_id": version_gantt_id,
|
||||||
|
// "proyek_id": proyek_id,
|
||||||
|
// "activity_id": id
|
||||||
|
// }
|
||||||
|
// userToActivityAdd(dataSaveHr)
|
||||||
|
setHrTemporaryAdd([...hrTemporaryAdd, item]) |
||||||
|
} else if (actionMeta.action === 'remove-value') { |
||||||
|
const id = actionMeta.removedValue.id |
||||||
|
// userToActivityDelete(id)
|
||||||
|
for (let k in hrTemporary) { |
||||||
|
if (hrTemporary[k].id == id) { |
||||||
|
setIdDeleteHrTemporary([...IdDeleteHrTemporary, id]) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
setHr(newValue) |
||||||
|
}; |
||||||
|
|
||||||
|
const increase = () => { |
||||||
|
let newPercent = progress + 10; |
||||||
|
if (newPercent > 100) { |
||||||
|
newPercent = 100; |
||||||
|
} |
||||||
|
setProgress(newPercent); |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
const decline = () => { |
||||||
|
let newPercent = progress - 10; |
||||||
|
if (newPercent < 0) { |
||||||
|
newPercent = 0; |
||||||
|
} |
||||||
|
setProgress(newPercent); |
||||||
|
}; |
||||||
|
|
||||||
|
const columns = [ |
||||||
|
{ |
||||||
|
title: 'Created By', |
||||||
|
dataIndex: 'created_by', |
||||||
|
key: 'created_by', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'Report Date', |
||||||
|
dataIndex: 'report_date', |
||||||
|
key: 'report_date', |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'Actual', |
||||||
|
dataIndex: 'job_count_report', |
||||||
|
key: 'job_count_report', |
||||||
|
render: (text) => Math.round(text), |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'Action', |
||||||
|
dataIndex: 'id', |
||||||
|
key: 'actions', |
||||||
|
render: (id) => ( |
||||||
|
<Tooltip title="Delete Report" placement="top"> |
||||||
|
<Button onClick={() => handleDeleteReport(id)} type="danger" style={{ backgroundColor:'transparent', color:'red', border:'none' }}> |
||||||
|
<i class="nav-icon icon-trash"></i> |
||||||
|
</Button> |
||||||
|
</Tooltip> |
||||||
|
), |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
const renderForm = () => { |
||||||
|
return ( |
||||||
|
<Form> |
||||||
|
<Row> |
||||||
|
<Col md={12}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">Report Date</Label> |
||||||
|
<DatePicker style={{ width: "100%" }} value={reportDate} onChange={(dateItem, dateString) => { |
||||||
|
dateItem.set({ hour: 0, minute: 0, second: 0 }) |
||||||
|
setReportDate(dateItem) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
{/* <Col md={12}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">Duration</Label> |
||||||
|
<Input type="number" value={duration} onChange={(e) => setDuration(e.target.value)}/> |
||||||
|
</FormGroup> |
||||||
|
</Col> */} |
||||||
|
<Col md={12}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">Volume Actual</Label> |
||||||
|
<Input type="number" value={volumeActual} onChange={(e) => setVolumeActual(e.target.value)} /> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<Col md={12}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">Human Resource</Label> |
||||||
|
{/* <Select |
||||||
|
showSearch |
||||||
|
filterOption={(inputValue, option) => |
||||||
|
option.children.toLowerCase().includes(inputValue.toLowerCase()) |
||||||
|
} |
||||||
|
value={hr} |
||||||
|
defaultValue={hr} |
||||||
|
onChange={onChangeHr} |
||||||
|
style={{ width: "100%" }} |
||||||
|
> |
||||||
|
{dataHr.map((res) => ( |
||||||
|
<Option key={res.id} value={res.id}> |
||||||
|
{res.name} |
||||||
|
</Option> |
||||||
|
))} |
||||||
|
</Select> */} |
||||||
|
<Select |
||||||
|
value={hr} |
||||||
|
defaultValue={hr} |
||||||
|
isClearable={false} |
||||||
|
name="colors" |
||||||
|
options={dataHr} |
||||||
|
className="basic-multi-select" |
||||||
|
classNamePrefix="select" |
||||||
|
onChange={onChangeHr} |
||||||
|
/> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<Col md={12}> |
||||||
|
<FormGroup> |
||||||
|
<Label className="capitalize">Description</Label> |
||||||
|
<Input type="textarea" value={description} onChange={(e) => setDescription(e.target.value)} /> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<div> |
||||||
|
{reportActivity.length > 0 ? ( |
||||||
|
<Table dataSource={reportActivity} columns={columns} /> |
||||||
|
) : null} |
||||||
|
</div> |
||||||
|
</Row> |
||||||
|
</Form> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Drawer title="Basic Drawer" placement="right" onClose={() => handleCancel()} open={openDialogReport}> |
||||||
|
<SweetAlert |
||||||
|
show={alertDelete} |
||||||
|
warning |
||||||
|
showCancel |
||||||
|
confirmBtnText="Delete" |
||||||
|
confirmBtnBsStyle="danger" |
||||||
|
title={`Are you sure?`} |
||||||
|
onConfirm={onConfirmDelete} |
||||||
|
onCancel={() => cancelDelete()} |
||||||
|
focusCancelBtn |
||||||
|
> |
||||||
|
Delete this data |
||||||
|
</SweetAlert> |
||||||
|
<div className='top'> |
||||||
|
<Space> |
||||||
|
<Button type='text' onClick={() => handleCancel()}><CloseOutlined /></Button> |
||||||
|
</Space> |
||||||
|
<Space style={{ float: "right" }}> |
||||||
|
<Button onClick={() => handleCancel()}>Cancel</Button> |
||||||
|
<Button onClick={() => handleSave()} type="primary"> |
||||||
|
{typeDialogReport == "Edit" ? `Edit` : "Add"} Report |
||||||
|
</Button> |
||||||
|
</Space> |
||||||
|
<Divider /> |
||||||
|
</div> |
||||||
|
<div className='content' style={{ alignContent: 'center' }}> |
||||||
|
{renderForm()} |
||||||
|
</div> |
||||||
|
<div className='bottom' style={{ float: 'bottom' }}> |
||||||
|
</div> |
||||||
|
</Drawer> |
||||||
|
</> |
||||||
|
) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
export default DialogFormReport; |
||||||
@ -0,0 +1,136 @@ |
|||||||
|
.App { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.App-header { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
font-size: calc(10px + 1.5vmin); |
||||||
|
} |
||||||
|
|
||||||
|
.App-link { |
||||||
|
color: #61dafb; |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes App-logo-spin { |
||||||
|
from { |
||||||
|
transform: rotate(0deg); |
||||||
|
} |
||||||
|
to { |
||||||
|
transform: rotate(360deg); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.characters { |
||||||
|
list-style: none; |
||||||
|
padding-left: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.characters li { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
border: solid 2px #d0d0d0; |
||||||
|
border-radius: .2em; |
||||||
|
padding: .5em .8em .5em .5em; |
||||||
|
margin-bottom: 1em; |
||||||
|
} |
||||||
|
|
||||||
|
/* .characters p { |
||||||
|
max-width: none; |
||||||
|
font-weight: bold; |
||||||
|
margin: 0; |
||||||
|
} */ |
||||||
|
|
||||||
|
.characters-thumb { |
||||||
|
overflow: hidden; |
||||||
|
flex-shrink: 0; |
||||||
|
width: 2em; |
||||||
|
height: 2em; |
||||||
|
background-color: #e8e8e8; |
||||||
|
padding: .5em; |
||||||
|
margin-right: .5em; |
||||||
|
} |
||||||
|
|
||||||
|
.characters-thumb img { |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/* body */ |
||||||
|
.body { |
||||||
|
background-color: #f4f4f4; |
||||||
|
border-radius: 10px; |
||||||
|
padding: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.board { |
||||||
|
width: 19rem; |
||||||
|
height: 3rem; |
||||||
|
padding: 5px; |
||||||
|
background-color: #fff; |
||||||
|
border-radius: 8px; |
||||||
|
/* border: 0.5px solid silver; */ |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
|
||||||
|
.board-add{ |
||||||
|
width: 15rem; |
||||||
|
height: 3rem; |
||||||
|
padding: 5px; |
||||||
|
background-color: #fff; |
||||||
|
border-radius: 8px; |
||||||
|
/* border: 0.5px solid silver; */ |
||||||
|
text-align: left; |
||||||
|
cursor: pointer; |
||||||
|
background-color: #f4f4f4; |
||||||
|
} |
||||||
|
|
||||||
|
.board-add:hover { |
||||||
|
background-color: rgb(255, 255, 255); |
||||||
|
} |
||||||
|
|
||||||
|
.title-board-add { |
||||||
|
font-weight: normal; |
||||||
|
margin-top: 5px; |
||||||
|
margin-left: 10px; |
||||||
|
/* font-size: 20px; */ |
||||||
|
color: silver; |
||||||
|
} |
||||||
|
|
||||||
|
.title-board { |
||||||
|
font-weight: normal; |
||||||
|
margin-top: 5px; |
||||||
|
margin-left: 10px; |
||||||
|
/* font-size: 20px; */ |
||||||
|
/* color: rgb(81, 80, 80); */ |
||||||
|
} |
||||||
|
|
||||||
|
.board .title-option { |
||||||
|
float: right; |
||||||
|
} |
||||||
|
|
||||||
|
.board { |
||||||
|
border-radius: 8px; |
||||||
|
height: 3rem; |
||||||
|
width: 270px; |
||||||
|
} |
||||||
|
|
||||||
|
.cards { |
||||||
|
margin-bottom: 10px; |
||||||
|
border-radius: 8px; |
||||||
|
} |
||||||
|
/* border-top: 5px solid #65D3B3; */ |
||||||
|
|
||||||
|
.add-card { |
||||||
|
color: #f4f4f4; |
||||||
|
cursor: pointer; |
||||||
|
/* visibility: hidden; */ |
||||||
|
} |
||||||
|
|
||||||
|
.destination:hover .add-card{ |
||||||
|
color: silver; |
||||||
|
} |
||||||
@ -0,0 +1,206 @@ |
|||||||
|
import React, {Fragment, useState} from 'react' |
||||||
|
import './Kanban.css'; |
||||||
|
import { Draggable, DragDropContext, Droppable } from 'react-beautiful-dnd'; |
||||||
|
import styled from 'styled-components' |
||||||
|
import moment from 'moment'; |
||||||
|
import DialogCard from './DialogCard'; |
||||||
|
import { Card, Row, Col, Button, Avatar, Tooltip, Popover, Progress, Dropdown, Menu, Space } from 'antd'; |
||||||
|
import {
|
||||||
|
AntDesignOutlined, |
||||||
|
UserOutlined, |
||||||
|
EditOutlined, |
||||||
|
DeleteOutlined, |
||||||
|
EllipsisOutlined, |
||||||
|
DownOutlined, |
||||||
|
MoreOutlined, |
||||||
|
SmileOutlined |
||||||
|
} from '@ant-design/icons'; |
||||||
|
|
||||||
|
const Container = styled.div` |
||||||
|
border: 1px solid lightgrey; |
||||||
|
border-radius: 2px; |
||||||
|
padding: 8px; |
||||||
|
margin-bottom: 8px; |
||||||
|
transition: background-color 0.2s ease; |
||||||
|
background-color: ${props => |
||||||
|
props.isDragDisabled |
||||||
|
? 'lightgrey' |
||||||
|
: props.isDragging |
||||||
|
? 'lightgreen' |
||||||
|
: 'white'}; |
||||||
|
` |
||||||
|
|
||||||
|
const gridStyle = { |
||||||
|
// width: '25%',
|
||||||
|
// textAlign: 'center',
|
||||||
|
}; |
||||||
|
|
||||||
|
|
||||||
|
const Task = ({
|
||||||
|
task,
|
||||||
|
index,
|
||||||
|
stateKanban,
|
||||||
|
bodyColor,
|
||||||
|
loadingCard,
|
||||||
|
handleDeleteCard,
|
||||||
|
handleEditCard |
||||||
|
}) => { |
||||||
|
// const Task = ({ task, index, children, stateKanban , handleOpenDialogChild , handleDelete}) => {
|
||||||
|
const isDragDisabled = false |
||||||
|
|
||||||
|
const [openDialogChild, setOpenDialogChild] = useState(false) |
||||||
|
const [typeDialogChild, setTypeDialogChild] = useState('Save') |
||||||
|
const [clickOpenModalChild, setClickOpenModalChild] = useState(false) |
||||||
|
|
||||||
|
|
||||||
|
function onDragEnd(result) { |
||||||
|
const { destination, source, draggableId } = result |
||||||
|
|
||||||
|
|
||||||
|
if (!destination) { |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
if ( |
||||||
|
destination.droppableId === source.droppableId && |
||||||
|
destination.index === source.index |
||||||
|
) { |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
const start = source.droppableId; |
||||||
|
const finish = destination.droppableId; |
||||||
|
|
||||||
|
if (start === finish) { |
||||||
|
const newTaskIds = stateKanban.columns[0].tasks[0].children; |
||||||
|
let newObj = stateKanban.columns[0].tasks[0].children.find(x => x.id === draggableId); |
||||||
|
newTaskIds.splice(source.index, 1) |
||||||
|
newTaskIds.splice(destination.index, 0, newObj) |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
const handleCloseDialogChild = (type, data) => { |
||||||
|
if (type === "save") { |
||||||
|
// saveItem(data);
|
||||||
|
}
|
||||||
|
setOpenDialogChild(false) |
||||||
|
} |
||||||
|
|
||||||
|
const toggleAddDialogChild = () => { |
||||||
|
setOpenDialogChild(!openDialogChild) |
||||||
|
} |
||||||
|
|
||||||
|
const handleOpenDialogChild = (type) => { |
||||||
|
setOpenDialogChild(true) |
||||||
|
setTypeDialogChild(type) |
||||||
|
} |
||||||
|
|
||||||
|
const menu = (task) => ( |
||||||
|
<Menu |
||||||
|
items={[ |
||||||
|
{ |
||||||
|
key: '1', |
||||||
|
label: ( |
||||||
|
<a rel="noopener noreferrer" onClick={()=>handleEditCard(task)}> |
||||||
|
<EditOutlined style={{marginRight: "5px"}} /> Edit |
||||||
|
</a> |
||||||
|
), |
||||||
|
}, |
||||||
|
{ |
||||||
|
key: '2', |
||||||
|
label: ( |
||||||
|
<a rel="noopener noreferrer" onClick={()=> handleDeleteCard(task.id)}> |
||||||
|
<DeleteOutlined style={{marginRight: "5px"}} /> Hapus |
||||||
|
</a> |
||||||
|
), |
||||||
|
}, |
||||||
|
]} |
||||||
|
/> |
||||||
|
); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return ( |
||||||
|
<Fragment> |
||||||
|
<DialogCard |
||||||
|
openDialogChild={openDialogChild} |
||||||
|
closeDialogChild={handleCloseDialogChild} |
||||||
|
toggleDialogChild={() => toggleAddDialogChild} |
||||||
|
typeDialogChild={typeDialogChild} |
||||||
|
clickOpenModalChild={clickOpenModalChild} |
||||||
|
task={task}
|
||||||
|
/> |
||||||
|
<Draggable |
||||||
|
draggableId={task.id} |
||||||
|
index={index} |
||||||
|
isDragDisabled={isDragDisabled} |
||||||
|
> |
||||||
|
{(provided, snapshot) => ( |
||||||
|
<Card
|
||||||
|
className='cards' |
||||||
|
{...provided.draggableProps} |
||||||
|
{...provided.dragHandleProps} |
||||||
|
ref={provided.innerRef} |
||||||
|
isDragging={snapshot.isDragging} |
||||||
|
isDragDisabled={isDragDisabled} |
||||||
|
loading={loadingCard} |
||||||
|
onDoubleClick={()=> handleEditCard(task)} |
||||||
|
> |
||||||
|
<div className='contents' > |
||||||
|
<div style={{float: 'right'}}> |
||||||
|
<Dropdown overlay={menu(task)}> |
||||||
|
<a onClick={(e) => e.preventDefault()}> |
||||||
|
<MoreOutlined style={{fontSize:"20px"}} /> |
||||||
|
</a> |
||||||
|
</Dropdown> |
||||||
|
</div> |
||||||
|
<div><b>{task.activity}</b></div> |
||||||
|
</div> |
||||||
|
<div className='status' style={{marginTop: "15px"}}> |
||||||
|
<Progress percent={Math.round(task.persentase_progress)} /> |
||||||
|
</div> |
||||||
|
<div style={{marginTop: "20px"}}> |
||||||
|
<div style={{float: 'left'}}> |
||||||
|
<Avatar.Group> |
||||||
|
{ |
||||||
|
task.assign_hr.map( (item, index) => { |
||||||
|
if (index < 8) { |
||||||
|
return <Tooltip title={item.name} placement="top"> |
||||||
|
<Avatar |
||||||
|
style={{ |
||||||
|
backgroundColor: '#87d', |
||||||
|
}} |
||||||
|
icon={<UserOutlined />} size="small" |
||||||
|
/> |
||||||
|
</Tooltip> |
||||||
|
} else if(index == 8) { |
||||||
|
return <Avatar |
||||||
|
style={{ |
||||||
|
backgroundColor: '#f56a00', |
||||||
|
}} |
||||||
|
size="small"> |
||||||
|
{/* + {["1","1","1","1","1","1","1","1"].length - 3} */} |
||||||
|
+ {task.assign_hr.length - 8} |
||||||
|
</Avatar> |
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
|
}
|
||||||
|
</Avatar.Group> |
||||||
|
</div> |
||||||
|
<div style={{float: 'right'}}> |
||||||
|
<p style={{color: "grey", fontSize: "12px", marginTop: "3px"}}>{moment(task.start_date).format('DD-MM-YYYY HH:mm')}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Card> |
||||||
|
)} |
||||||
|
</Draggable> |
||||||
|
</Fragment> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default Task; |
||||||
@ -0,0 +1,912 @@ |
|||||||
|
import React, { Fragment, useEffect, useMemo, useState } from 'react'; |
||||||
|
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'; |
||||||
|
import { |
||||||
|
Row, |
||||||
|
Col, |
||||||
|
Button, |
||||||
|
Tooltip, |
||||||
|
Popover, |
||||||
|
Select |
||||||
|
} from 'antd'; |
||||||
|
import { Card, CardBody, CardHeader, Input } from "reactstrap"; |
||||||
|
|
||||||
|
import './Kanban.css'; |
||||||
|
import Column from './Column'; |
||||||
|
import styled from 'styled-components' |
||||||
|
import { |
||||||
|
PlusOutlined |
||||||
|
} from '@ant-design/icons'; |
||||||
|
import { BASE_SIMPRO_LUMEN, VERSION_GANTT_SEARCH, KANBAN_BOARD_LIST, KANBAN_BOARD_ADD, KANBAN_BOARD_DELETE, KANBAN_BOARD_EDIT, KANBAN_CARD_LIST, KANBAN_CARD_ADD, KANBAN_CARD_EDIT, USER_TO_ACTIVITY_ADD, HUMAN_RESOURCE_LIST, USER_TO_ACTIVITY_DELETE, PROYEK_SEARCH } from '../../../const/ApiConst'; |
||||||
|
import axios from "../../../const/interceptorApi"; |
||||||
|
import { |
||||||
|
NotificationContainer, |
||||||
|
NotificationManager |
||||||
|
} from "react-notifications"; |
||||||
|
import { array } from 'prop-types'; |
||||||
|
import DialogFormBoard from './DialogFormBoard'; |
||||||
|
import DialogFormActivity from './DialogFormActivity'; |
||||||
|
import DialogFormChild from './DialogFormChild'; |
||||||
|
import DialogFormReport from './DialogFormReport'; |
||||||
|
import SweetAlert from 'react-bootstrap-sweetalert'; |
||||||
|
import { useParams, useHistory } from "react-router-dom"; |
||||||
|
import moment from 'moment'; |
||||||
|
const Container = styled.div` |
||||||
|
display: flex; |
||||||
|
` |
||||||
|
|
||||||
|
const { Option } = Select; |
||||||
|
|
||||||
|
const finalSpaceCharacters = [ |
||||||
|
{ |
||||||
|
id: 'gary', |
||||||
|
name: 'Gary Goodspeed', |
||||||
|
thumb: '/images/gary.png' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 'garyd', |
||||||
|
name: 'Gary Goodspeedg', |
||||||
|
thumb: '/images/gary.png' |
||||||
|
}, |
||||||
|
] |
||||||
|
|
||||||
|
const initialData = { |
||||||
|
columns: [ |
||||||
|
|
||||||
|
], |
||||||
|
} |
||||||
|
|
||||||
|
let hierarchy = []; |
||||||
|
hierarchy.push(JSON.parse(localStorage.getItem("hierarchy"))); |
||||||
|
const role_id = localStorage.getItem("role_id"); |
||||||
|
|
||||||
|
const Kanban = ({ params, ...props }) => { |
||||||
|
let history = useHistory(); |
||||||
|
const token = localStorage.getItem("token"); |
||||||
|
const sessionLogin = localStorage.getItem("user_id"); |
||||||
|
|
||||||
|
const HEADER = { |
||||||
|
headers: { |
||||||
|
"Content-Type": "application/json", |
||||||
|
Authorization: `Bearer ${token}`, |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
const { proyek_id, version_gantt_id } = useParams(); |
||||||
|
const [characters, updateCharacters] = useState(finalSpaceCharacters); |
||||||
|
const [stateKanban, setStateKanban] = useState(initialData); |
||||||
|
const [kanbanBoard, setKanbanBoard] = useState([]); |
||||||
|
const [kanbanCard, setKanbanCard] = useState([]); |
||||||
|
const [alertDelete, setAlertDelete] = useState(false) |
||||||
|
const [alertDeleteCard, setAlertDeleteCard] = useState(false) |
||||||
|
const [idDelete, setIdDelete] = useState(0) |
||||||
|
const [idDeleteCard, setIdDeleteCard] = useState(0) |
||||||
|
const [project, setProject] = useState(!proyek_id ? '' : proyek_id) |
||||||
|
const [versionGantt, setVersionGantt] = useState(!version_gantt_id ? 0 : version_gantt_id) |
||||||
|
//
|
||||||
|
const [openDialogBoard, setOpenDialogBoard] = useState(false) |
||||||
|
const [typeDialogBoard, setTypeDialogBoard] = useState('') |
||||||
|
const [clickOpenModalBoard, setClickOpenModalBoard] = useState(false) |
||||||
|
const [openDialogActivity, setOpenDialogActivity] = useState(false) |
||||||
|
const [openDialogReport, setOpenDialogReport] = useState(false) |
||||||
|
const [typeDialogActivity, setTypeDialogActivity] = useState('Save') |
||||||
|
// report
|
||||||
|
|
||||||
|
const [typeDialogReport, setTypeDialogReport] = useState('Save') |
||||||
|
const [clickOpenModalActivity, setClickOpenModalActivity] = useState(false) |
||||||
|
const [openDialogChild, setOpenDialogChild] = useState(false) |
||||||
|
const [typeDialogChild, setTypeDialogChild] = useState('Save') |
||||||
|
const [clickOpenModalChild, setClickOpenModalChild] = useState(false) |
||||||
|
const [open, setOpen] = useState(false); |
||||||
|
const [dataEditBoard, setDataEditBoard] = useState([]) |
||||||
|
const [dataEditCard, setDataEditCard] = useState([]) |
||||||
|
const [idBoard, setIdBoard] = useState(0) |
||||||
|
const [loadingCard, setLoadingCard] = useState(false) |
||||||
|
const [dataHr, setDataHr] = useState([]); |
||||||
|
const [dataProyek, setDataProyek] = useState([]) |
||||||
|
const [dataVersionGantt, setDataVersionGantt] = useState([]) |
||||||
|
const [optionProyek, setOptionProyek] = useState([]) |
||||||
|
const [optionGantt, setOptionGantt] = useState([]) |
||||||
|
const [activityProject, setActivityProject] = useState(null) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
handleGetDataHr() |
||||||
|
}, [project]) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
getDataProyek() |
||||||
|
if (project && versionGantt) { |
||||||
|
getDataGantt(parseInt(project)) |
||||||
|
getActivityProject() |
||||||
|
getDataKanbanBoard() |
||||||
|
} |
||||||
|
}, [project, versionGantt]) |
||||||
|
|
||||||
|
const getActivityProject = async () => { |
||||||
|
const url = `${BASE_SIMPRO_LUMEN}/activity/${versionGantt}/${project}/get` |
||||||
|
const result = await axios |
||||||
|
.get(url, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response) |
||||||
|
|
||||||
|
if (result && result.data.data.length > 0) { |
||||||
|
result.data.data.map((item) => { |
||||||
|
if (item.type_activity == "project") { |
||||||
|
setActivityProject(item.id) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const getDataKanbanBoard = async () => { |
||||||
|
const url = `${KANBAN_BOARD_LIST}?start=0&length=-1&orderby=id&asc=true&column=version_gantt_id&value=${versionGantt}&logic==`; |
||||||
|
const result = await axios |
||||||
|
.get(url, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
if (!result || result.data.data.length == 0) { |
||||||
|
|
||||||
|
const data = [ |
||||||
|
{ |
||||||
|
name_board: 'TODO LIST', |
||||||
|
status_progress: 'open', |
||||||
|
header_color: "#9EE5FF", |
||||||
|
body_color: "#112A46", |
||||||
|
proyek_id: project, |
||||||
|
version_gantt_id: versionGantt |
||||||
|
}, |
||||||
|
{ |
||||||
|
name_board: 'DOING', |
||||||
|
status_progress: 'on-progress', |
||||||
|
header_color: "#D9D4FD", |
||||||
|
body_color: "#112A46", |
||||||
|
proyek_id: project, |
||||||
|
version_gantt_id: versionGantt |
||||||
|
}, |
||||||
|
{ |
||||||
|
name_board: 'TESTING', |
||||||
|
status_progress: 'none', |
||||||
|
header_color: "#FAD4FC", |
||||||
|
body_color: "#112A46", |
||||||
|
proyek_id: project, |
||||||
|
version_gantt_id: versionGantt |
||||||
|
}, |
||||||
|
{ |
||||||
|
name_board: 'DONE', |
||||||
|
status_progress: 'done', |
||||||
|
header_color: "#ADE7BF", |
||||||
|
body_color: "#112A46", |
||||||
|
proyek_id: project, |
||||||
|
version_gantt_id: versionGantt |
||||||
|
} |
||||||
|
]; |
||||||
|
for (let i = 0; i < data.length; i++) { |
||||||
|
const formData = data[i]; |
||||||
|
const result = await axios.post(KANBAN_BOARD_ADD, formData, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
if (result && result.data && result.data.code === 200) { |
||||||
|
getDataKanbanBoard() |
||||||
|
NotificationManager.success(`Data berhasil ditambah`, 'Success!!'); |
||||||
|
} else { |
||||||
|
NotificationManager.error(`${result.data.message}`, 'Failed!!'); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
if (result && result.data && result.data.code == 200) { |
||||||
|
let countColumns = 0; |
||||||
|
const results = result.data.data; |
||||||
|
for (let i = results.length - 1; i >= 0; i--) { |
||||||
|
const res = results[i]; |
||||||
|
res.key = res.id.toString() |
||||||
|
res.tasks = [] |
||||||
|
await getDataKanbanCard(res.id).then(function (task) { |
||||||
|
if (task !== false) { |
||||||
|
task.map((e) => { |
||||||
|
e.id = e.id.toString() |
||||||
|
e.persentase_progress = e.persentase_progress ? e.persentase_progress : 0; |
||||||
|
res.tasks.push(e); |
||||||
|
}); |
||||||
|
} |
||||||
|
}) |
||||||
|
countColumns += 1; |
||||||
|
|
||||||
|
if (result.data.data.length === countColumns) { |
||||||
|
let newState = { |
||||||
|
...stateKanban, |
||||||
|
columns: [ |
||||||
|
...result.data.data, |
||||||
|
] |
||||||
|
} |
||||||
|
|
||||||
|
setStateKanban(newState) |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
setLoadingCard(false) |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
} else { |
||||||
|
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
const getDataProyek = async () => { |
||||||
|
let start = 0; |
||||||
|
|
||||||
|
const payload = { |
||||||
|
columns: [ |
||||||
|
{ |
||||||
|
name: "created_by", |
||||||
|
logic_operator: "IN", |
||||||
|
value: hierarchy, |
||||||
|
operator: "AND" |
||||||
|
} |
||||||
|
], |
||||||
|
joins: [ |
||||||
|
{ |
||||||
|
name: "m_users", |
||||||
|
column_join: "pm_id", |
||||||
|
column_results: ["name", "username"], |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "m_type_proyek", |
||||||
|
column_join: "type_proyek_id", |
||||||
|
column_results: ["name", "description"], |
||||||
|
}, |
||||||
|
], |
||||||
|
orders: { columns: ["id"], ascending: false }, |
||||||
|
}; |
||||||
|
|
||||||
|
if (parseInt(role_id) !== 1) { |
||||||
|
payload["columns"] = [ |
||||||
|
{ name: "id", logic_operator: "=", value: project, operator: "AND" }, |
||||||
|
]; |
||||||
|
} |
||||||
|
|
||||||
|
const result = await axios |
||||||
|
.post(PROYEK_SEARCH, payload, HEADER) |
||||||
|
.then((res) => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
if (result && result.data && result.data.code == 200) { |
||||||
|
let dataRes = result.data.data || []; |
||||||
|
let dataTemp = [] |
||||||
|
dataRes.map(n => { |
||||||
|
if (n.id > 0 && n.nama.trim() !== "") { |
||||||
|
let obj = { |
||||||
|
key: n.id, |
||||||
|
value: n.id, |
||||||
|
label: n.nama.trim() |
||||||
|
} |
||||||
|
dataTemp.push(obj) |
||||||
|
} |
||||||
|
}) |
||||||
|
setOptionProyek(dataTemp); |
||||||
|
setDataProyek(dataRes); |
||||||
|
} else { |
||||||
|
NotificationManager.error("Gagal Mengambil Data!!", "Failed"); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const getDataGantt = async (id) => { |
||||||
|
const payload = { |
||||||
|
columns: [ |
||||||
|
{ |
||||||
|
name: "proyek_id", |
||||||
|
logic_operator: "=", |
||||||
|
value: id, |
||||||
|
operator: "AND", |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
const result = await axios |
||||||
|
.post(VERSION_GANTT_SEARCH, payload, HEADER) |
||||||
|
.then((res) => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
if (result && result.status == 200) { |
||||||
|
let dataRes = result.data.data || []; |
||||||
|
let dataTemp = [] |
||||||
|
dataRes.map(n => { |
||||||
|
if (n.id > 0 && n.name_version.trim() !== "") { |
||||||
|
let obj = { |
||||||
|
key: n.id, |
||||||
|
value: n.id, |
||||||
|
label: n.name_version |
||||||
|
} |
||||||
|
dataTemp.push(obj) |
||||||
|
} |
||||||
|
}) |
||||||
|
setOptionGantt(dataTemp); |
||||||
|
setDataVersionGantt(dataRes); |
||||||
|
|
||||||
|
} else { |
||||||
|
NotificationManager.error( |
||||||
|
`Data gantt project gagal terload silahkan coba lagi!`, |
||||||
|
"Failed!!" |
||||||
|
); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const getDataKanbanCard = async (id) => { |
||||||
|
const url = `${KANBAN_CARD_LIST}/${project}/${versionGantt}/${id}?session=${sessionLogin}`; |
||||||
|
const result = await axios |
||||||
|
.get(url, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
|
||||||
|
if (result.data.status === "empty") { |
||||||
|
return false |
||||||
|
} else { |
||||||
|
return result.data.data |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
function handleOnDragEnd(result) { |
||||||
|
if (!result.destination) return; |
||||||
|
|
||||||
|
const items = Array.from(characters); |
||||||
|
const [reorderedItem] = items.splice(result.source.index, 1); |
||||||
|
items.splice(result.destination.index, 0, reorderedItem); |
||||||
|
|
||||||
|
updateCharacters(items); |
||||||
|
} |
||||||
|
|
||||||
|
const onChangeProject = (val) => { |
||||||
|
setProject(val); |
||||||
|
getDataGantt(val); |
||||||
|
setVersionGantt(''); |
||||||
|
}; |
||||||
|
|
||||||
|
const onChangeGantt = async (val) => { |
||||||
|
setVersionGantt(val); |
||||||
|
if (project) { |
||||||
|
history.push(`/kanban/${project}/${val}`); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
function onDragEnd(result) { |
||||||
|
const { destination, source, draggableId } = result |
||||||
|
|
||||||
|
|
||||||
|
if (!destination) { |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
if ( |
||||||
|
destination.droppableId === source.droppableId && |
||||||
|
destination.index === source.index |
||||||
|
) { |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const start = source.droppableId; |
||||||
|
const finish = destination.droppableId; |
||||||
|
|
||||||
|
if (start != finish) { |
||||||
|
|
||||||
|
const data = { |
||||||
|
"kanban_board_id": destination.droppableId, |
||||||
|
} |
||||||
|
|
||||||
|
setLoadingCard(true) |
||||||
|
|
||||||
|
editActivity(data, draggableId) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
const saveBoard = async (data) => { |
||||||
|
const formData = data |
||||||
|
|
||||||
|
const result = await axios.post(KANBAN_BOARD_ADD, formData, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
if (result && result.data && result.data.code === 200) { |
||||||
|
NotificationManager.success(`Data berhasil ditambah`, 'Success!!'); |
||||||
|
getDataKanbanBoard() |
||||||
|
} else { |
||||||
|
NotificationManager.error('Status Open Progress Done Hanya 1', 'Failed!!'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const editBoard = async (data) => { |
||||||
|
let urlEdit = KANBAN_BOARD_EDIT(data.id) |
||||||
|
|
||||||
|
const formData = data |
||||||
|
const result = await axios.put(urlEdit, formData, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
if (result && result.data && result.data.code === 200) { |
||||||
|
getDataKanbanBoard() |
||||||
|
NotificationManager.success(`Data berhasil diedit`, 'Success!!'); |
||||||
|
} else { |
||||||
|
NotificationManager.error(`Data gagal di edit`, `Failed!!`); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Board
|
||||||
|
|
||||||
|
const handleCloseDialogBoard = (type, data) => { |
||||||
|
if (type === "save") { |
||||||
|
saveBoard(data); |
||||||
|
} else if (type === "edit") { |
||||||
|
editBoard(data); |
||||||
|
} |
||||||
|
setOpenDialogBoard(false) |
||||||
|
} |
||||||
|
|
||||||
|
const toggleDialogBoard = () => { |
||||||
|
setOpenDialogBoard(!openDialogBoard) |
||||||
|
} |
||||||
|
|
||||||
|
const handleOpenDialogBoard = (type) => { |
||||||
|
setOpenDialogBoard(true) |
||||||
|
setTypeDialogBoard(type) |
||||||
|
} |
||||||
|
|
||||||
|
const saveReport = async (data, dataHrSelect) => { |
||||||
|
setLoadingCard(true) |
||||||
|
var formData = new FormData(); |
||||||
|
formData.set('report_date', moment(data.report_date).format("YYYY-MM-DD")); |
||||||
|
formData.set('job_count_report', data.jumlah_pekerjaan); |
||||||
|
formData.set('user_id', dataHrSelect.id); |
||||||
|
formData.set('gantt', true); |
||||||
|
formData.set('activity_id', data.activity_id); |
||||||
|
formData.set('description', data.description); |
||||||
|
const result = await axios |
||||||
|
.post(`${BASE_SIMPRO_LUMEN}/report-activity/add`, formData, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
if (result && result.data && result.data.code === 200) { |
||||||
|
getDataKanbanBoard() |
||||||
|
NotificationManager.success(`Data berhasil ditambah`, 'Success!!'); |
||||||
|
} else { |
||||||
|
setLoadingCard(false) |
||||||
|
NotificationManager.error(`${result.data.message}`, 'Failed!!'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const saveCard = async (data, dataHrSelect) => { |
||||||
|
setLoadingCard(true) |
||||||
|
|
||||||
|
const formData = data |
||||||
|
const result = await axios.post(KANBAN_CARD_ADD, formData, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
if (result && result.data && result.data.code === 200) { |
||||||
|
dataHrSelect.map((item) => { |
||||||
|
let dataSaveHr = { |
||||||
|
"user_id": item.id, |
||||||
|
"role_proyek_id": item.proyek_role, |
||||||
|
"version_gantt_id": version_gantt_id, |
||||||
|
"proyek_id": proyek_id, |
||||||
|
"activity_id": result.data.tid |
||||||
|
} |
||||||
|
userToActivityAdd(dataSaveHr) |
||||||
|
}) |
||||||
|
NotificationManager.success(`Data berhasil ditambah`, 'Success!!'); |
||||||
|
} else { |
||||||
|
setLoadingCard(false) |
||||||
|
NotificationManager.error(`${result.data.message}`, 'Failed!!'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const editCard = async (data, id) => { |
||||||
|
setLoadingCard(true) |
||||||
|
const url = `${KANBAN_CARD_ADD}/${id}` |
||||||
|
const formData = data |
||||||
|
const result = await axios.put(url, formData, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
if (result && result.data && result.data.code === 200) { |
||||||
|
getDataKanbanBoard() |
||||||
|
NotificationManager.success(`Data berhasil diubah`, 'Success!!'); |
||||||
|
} else { |
||||||
|
NotificationManager.error(`${result.data.message}`, 'Failed!!'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const userToActivityAdd = async (data) => { |
||||||
|
setLoadingCard(true) |
||||||
|
|
||||||
|
const formData = data |
||||||
|
const result = await axios.post(USER_TO_ACTIVITY_ADD, formData, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
if (result && result.data && result.data.code === 200) { |
||||||
|
getDataKanbanBoard() |
||||||
|
NotificationManager.success(`Data berhasil ditambah`, 'Success!!'); |
||||||
|
} else { |
||||||
|
setLoadingCard(false) |
||||||
|
NotificationManager.error(`${result.data.message}`, 'Failed!!'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const userToActivityDelete = async (id) => { |
||||||
|
setLoadingCard(true) |
||||||
|
|
||||||
|
const url = USER_TO_ACTIVITY_DELETE(id) |
||||||
|
const result = await axios.delete(url, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
if (result && result.data && result.data.code === 200) { |
||||||
|
getDataKanbanBoard() |
||||||
|
NotificationManager.success(`Data berhasil dihapus`, 'Success!!'); |
||||||
|
} else { |
||||||
|
setLoadingCard(false) |
||||||
|
NotificationManager.error(`${result.data.message}`, 'Failed!!'); |
||||||
|
} |
||||||
|
} |
||||||
|
// Activity
|
||||||
|
|
||||||
|
const handleCloseDialogActivity = (type, data, dataHrSelect, id) => { |
||||||
|
if (type === "save") { |
||||||
|
saveCard(data, dataHrSelect) |
||||||
|
} else if (type == "edit") { |
||||||
|
editCard(data, id) |
||||||
|
} |
||||||
|
setOpenDialogActivity(false) |
||||||
|
} |
||||||
|
|
||||||
|
const toggleAddDialogActivity = () => { |
||||||
|
setOpenDialogActivity(!openDialogActivity) |
||||||
|
} |
||||||
|
|
||||||
|
const handleOpenDialogActivity = (type, idBoard) => { |
||||||
|
setOpenDialogActivity(true) |
||||||
|
setTypeDialogActivity(type) |
||||||
|
setIdBoard(idBoard) |
||||||
|
} |
||||||
|
|
||||||
|
// Report
|
||||||
|
|
||||||
|
const handleCloseDialogReport = (type, data, dataHrSelect) => { |
||||||
|
if (type === "Save") { |
||||||
|
saveReport(data, dataHrSelect) |
||||||
|
} else if(type === "Delete") { |
||||||
|
setLoadingCard(true); |
||||||
|
getDataKanbanBoard(); |
||||||
|
} else { |
||||||
|
setOpenDialogReport(false) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const handleOpenDialogReport = (type) => { |
||||||
|
setOpenDialogReport(true) |
||||||
|
setTypeDialogReport(type) |
||||||
|
} |
||||||
|
|
||||||
|
const editActivity = async (data, id) => { |
||||||
|
let urlEdit = KANBAN_CARD_EDIT(id) |
||||||
|
|
||||||
|
const formData = data |
||||||
|
const result = await axios.put(urlEdit, formData, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
if (result && result.data && result.data.code === 200) { |
||||||
|
getDataKanbanBoard() |
||||||
|
NotificationManager.success(`Data berhasil diedit`, 'Success!!'); |
||||||
|
} else { |
||||||
|
NotificationManager.error(`Data gagal di edit`, `Failed!!`); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Child
|
||||||
|
|
||||||
|
const handleCloseDialogChild = (type, data) => { |
||||||
|
if (type === "save") { |
||||||
|
// saveItem(data);
|
||||||
|
} |
||||||
|
setOpenDialogChild(false) |
||||||
|
} |
||||||
|
|
||||||
|
const toggleAddDialogChild = () => { |
||||||
|
setOpenDialogChild(!openDialogChild) |
||||||
|
} |
||||||
|
|
||||||
|
const handleOpenDialogChild = (type) => { |
||||||
|
setOpenDialogChild(true) |
||||||
|
setTypeDialogChild(type) |
||||||
|
} |
||||||
|
|
||||||
|
const onConfirmDelete = async () => { |
||||||
|
let url = KANBAN_BOARD_DELETE(idDelete); |
||||||
|
|
||||||
|
const result = await axios.delete(url, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
if (result && result.data && result.data.code === 200) { |
||||||
|
getDataKanbanBoard() |
||||||
|
setIdDelete(0) |
||||||
|
setAlertDelete(false) |
||||||
|
NotificationManager.success(`Data berhasil dihapus!`, 'Success!!'); |
||||||
|
} else { |
||||||
|
setIdDelete(0) |
||||||
|
setAlertDelete(false) |
||||||
|
NotificationManager.error(`Data gagal dihapus!}`, 'Failed!!'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const cancelDelete = () => { |
||||||
|
setAlertDelete(false) |
||||||
|
} |
||||||
|
|
||||||
|
const handleDelete = async (id) => { |
||||||
|
await setAlertDelete(true) |
||||||
|
setIdDelete(id) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
const handleEditBoard = (data) => { |
||||||
|
setDataEditBoard(data) |
||||||
|
handleOpenDialogBoard('Edit'); |
||||||
|
} |
||||||
|
|
||||||
|
const handleGetDataHr = async () => { |
||||||
|
let urlList = `${HUMAN_RESOURCE_LIST}/select?idProyek=${project}&sessionLogin=${sessionLogin}` |
||||||
|
const result = await axios |
||||||
|
.get(urlList, HEADER) |
||||||
|
.then((res) => res) |
||||||
|
.catch((err) => err.response); |
||||||
|
|
||||||
|
|
||||||
|
if (result.status === 200) { |
||||||
|
setDataHr(result.data) |
||||||
|
} |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
const handleDeleteCard = async (id) => { |
||||||
|
await setAlertDeleteCard(true) |
||||||
|
setIdDeleteCard(id) |
||||||
|
} |
||||||
|
|
||||||
|
const onConfirmDeleteCard = async () => { |
||||||
|
setAlertDeleteCard(false) |
||||||
|
setLoadingCard(true) |
||||||
|
|
||||||
|
const url = `${KANBAN_CARD_ADD}/${idDeleteCard}` |
||||||
|
|
||||||
|
const result = await axios.delete(url, HEADER) |
||||||
|
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
if (result && result.data && result.data.code === 200) { |
||||||
|
setIdDeleteCard(0) |
||||||
|
getDataKanbanBoard() |
||||||
|
NotificationManager.success(`Data berhasil dihapus!`, 'Success!!'); |
||||||
|
} else { |
||||||
|
setIdDeleteCard(0) |
||||||
|
NotificationManager.error(`Data gagal dihapus!}`, 'Failed!!'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const cancelDeleteCard = () => { |
||||||
|
setAlertDeleteCard(false) |
||||||
|
} |
||||||
|
|
||||||
|
const handleEditCard = (data) => { |
||||||
|
setDataEditCard(data) |
||||||
|
handleOpenDialogActivity('Edit'); |
||||||
|
} |
||||||
|
const setupSelectVersionGantt = () => { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
{dataVersionGantt.map((val, index) => { |
||||||
|
return ( |
||||||
|
<Option key={index} value={val.id}>{val.name_version}</Option> |
||||||
|
) |
||||||
|
})} |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
const setupSelectDataProyek = () => { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
{dataProyek.map((val, index) => { |
||||||
|
return ( |
||||||
|
<Option key={index} value={val.id}>{val.nama}</Option> |
||||||
|
) |
||||||
|
})} |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
const RenderStateKanban = useMemo(() => { |
||||||
|
return (<> |
||||||
|
{ |
||||||
|
stateKanban.columns.map((column) => { |
||||||
|
|
||||||
|
return <Column |
||||||
|
key={column.id} |
||||||
|
column={column} |
||||||
|
tasks={column.tasks} |
||||||
|
handleOpenDialogBoard={handleOpenDialogBoard} |
||||||
|
handleOpenDialogActivity={handleOpenDialogActivity} |
||||||
|
handleOpenDialogChild={handleOpenDialogChild} |
||||||
|
handleDelete={handleDelete} |
||||||
|
handleDeleteCard={handleDeleteCard} |
||||||
|
handleEditBoard={handleEditBoard} |
||||||
|
loadingCard={loadingCard} |
||||||
|
handleEditCard={handleEditCard} |
||||||
|
/> |
||||||
|
}) |
||||||
|
} |
||||||
|
</>) |
||||||
|
}, [stateKanban, loadingCard]) |
||||||
|
|
||||||
|
const RenderDialogFormActivity = useMemo( |
||||||
|
() => ( |
||||||
|
<DialogFormActivity |
||||||
|
activityProject={activityProject} |
||||||
|
openDialogActivity={openDialogActivity} |
||||||
|
closeDialogActivity={handleCloseDialogActivity} |
||||||
|
handleOpenDialogReport={handleOpenDialogReport} |
||||||
|
toggleDialogActivity={() => toggleAddDialogActivity} |
||||||
|
typeDialogActivity={typeDialogActivity} |
||||||
|
clickOpenModalActivity={clickOpenModalActivity} |
||||||
|
proyek_id={project} |
||||||
|
version_gantt_id={versionGantt} |
||||||
|
idBoard={idBoard} |
||||||
|
dataHr={dataHr} |
||||||
|
dataEditCard={dataEditCard} |
||||||
|
userToActivityAdd={userToActivityAdd} |
||||||
|
userToActivityDelete={userToActivityDelete} |
||||||
|
/> |
||||||
|
), |
||||||
|
[openDialogActivity] |
||||||
|
); |
||||||
|
const RenderDialogFormReport = useMemo( |
||||||
|
() => ( |
||||||
|
<DialogFormReport |
||||||
|
activityProject={activityProject} |
||||||
|
openDialogReport={openDialogReport} |
||||||
|
closeDialogReport={handleCloseDialogReport} |
||||||
|
typeDialogReport={typeDialogReport} |
||||||
|
clickOpenModalReport={clickOpenModalActivity} |
||||||
|
proyek_id={proyek_id} |
||||||
|
version_gantt_id={version_gantt_id} |
||||||
|
idBoard={idBoard} |
||||||
|
dataHr={dataHr} |
||||||
|
dataEditCard={dataEditCard} |
||||||
|
userToActivityAdd={userToActivityAdd} |
||||||
|
userToActivityDelete={userToActivityDelete} |
||||||
|
/> |
||||||
|
), |
||||||
|
[openDialogReport] |
||||||
|
); |
||||||
|
return ( |
||||||
|
<Fragment> |
||||||
|
<NotificationContainer /> |
||||||
|
<SweetAlert |
||||||
|
show={alertDelete} |
||||||
|
warning |
||||||
|
showCancel |
||||||
|
confirmBtnText="Delete" |
||||||
|
confirmBtnBsStyle="danger" |
||||||
|
title={`Are you sure?`} |
||||||
|
onConfirm={onConfirmDelete} |
||||||
|
onCancel={() => cancelDelete()} |
||||||
|
focusCancelBtn |
||||||
|
> |
||||||
|
Delete this data |
||||||
|
</SweetAlert> |
||||||
|
<SweetAlert |
||||||
|
show={alertDeleteCard} |
||||||
|
warning |
||||||
|
showCancel |
||||||
|
confirmBtnText="Delete" |
||||||
|
confirmBtnBsStyle="danger" |
||||||
|
title={`Are you sure?`} |
||||||
|
onConfirm={onConfirmDeleteCard} |
||||||
|
onCancel={() => cancelDeleteCard()} |
||||||
|
focusCancelBtn |
||||||
|
> |
||||||
|
Delete this data |
||||||
|
</SweetAlert> |
||||||
|
<DialogFormBoard |
||||||
|
openDialogBoard={openDialogBoard} |
||||||
|
closeDialogBoard={handleCloseDialogBoard} |
||||||
|
toggleDialogBoard={() => toggleDialogBoard} |
||||||
|
typeDialogBoard={typeDialogBoard} |
||||||
|
clickOpenModalBoard={clickOpenModalBoard} |
||||||
|
dataEditBoard={dataEditBoard} |
||||||
|
proyek_id={project} |
||||||
|
version_gantt_id={versionGantt} |
||||||
|
/> |
||||||
|
{RenderDialogFormActivity} |
||||||
|
{RenderDialogFormReport} |
||||||
|
<DialogFormChild |
||||||
|
openDialogChild={openDialogChild} |
||||||
|
closeDialogChild={handleCloseDialogChild} |
||||||
|
toggleDialogChild={() => toggleAddDialogChild} |
||||||
|
typeDialogChild={typeDialogChild} |
||||||
|
clickOpenModalChild={clickOpenModalChild} |
||||||
|
/> |
||||||
|
<div> |
||||||
|
<Card> |
||||||
|
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> |
||||||
|
<h4 className="capitalize">Kanban</h4> |
||||||
|
<Row> |
||||||
|
<Col> |
||||||
|
<Select |
||||||
|
showSearch |
||||||
|
filterOption={(input, option) => ( |
||||||
|
option?.children ?? '').toLowerCase().includes(input.toLowerCase() |
||||||
|
)} |
||||||
|
defaultValue={proyek_id ? parseInt(proyek_id) : 'Pilih Project'} |
||||||
|
onChange={onChangeProject} |
||||||
|
style={{ |
||||||
|
width: 200, |
||||||
|
marginRight: 10 |
||||||
|
}} |
||||||
|
// options={optionProyek}
|
||||||
|
> |
||||||
|
{setupSelectDataProyek()} |
||||||
|
</Select> |
||||||
|
<Select |
||||||
|
showSearch |
||||||
|
filterOption={(input, option) => ( |
||||||
|
option?.children ?? '').toLowerCase().includes(input.toLowerCase() |
||||||
|
)} |
||||||
|
defaultValue={version_gantt_id ? parseInt(version_gantt_id) : 'Pilih Gantt'} |
||||||
|
onChange={onChangeGantt} |
||||||
|
style={{ |
||||||
|
width: 200, |
||||||
|
marginRight: 10 |
||||||
|
}} |
||||||
|
// option={optionGantt}
|
||||||
|
> |
||||||
|
{setupSelectVersionGantt()} |
||||||
|
</Select> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</CardHeader> |
||||||
|
</Card> |
||||||
|
{project != "" && versionGantt != 0 ? ( |
||||||
|
<> |
||||||
|
<Row gutter={16}> |
||||||
|
<Col className="gutter-row" span={6}> |
||||||
|
<div className='board-add' onClick={() => handleOpenDialogBoard("Save")} > |
||||||
|
<div className='title-board-add'> |
||||||
|
<div> |
||||||
|
+ Add Board |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row gutter={16} className='body'> |
||||||
|
<DragDropContext onDragEnd={onDragEnd}> |
||||||
|
{RenderStateKanban} |
||||||
|
</DragDropContext> |
||||||
|
</Row> |
||||||
|
</> |
||||||
|
) : ( |
||||||
|
<p style={{ textAlign: 'center' }}>Please select Project and Gantt Option</p> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</Fragment> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default Kanban; |
||||||
Loading…
Reference in new issue