19 changed files with 1063 additions and 710 deletions
@ -1,304 +1,305 @@ |
|||||||
import React, { useEffect, useState, useMemo } from 'react' |
import React, { useEffect, useState, useMemo } from 'react' |
||||||
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
||||||
import { Button, Form } from 'reactstrap'; |
import { Button, Form } from 'reactstrap'; |
||||||
import { Table, Tooltip } from 'antd'; |
import { Table, Tooltip } from 'antd'; |
||||||
import 'antd/dist/antd.css'; |
import 'antd/dist/antd.css'; |
||||||
import moment from 'moment'; |
import moment from 'moment'; |
||||||
import { API_ADW, TOKEN_ADW, ASSIGN_HR_PROJECT_SEARCH, ASSIGN_HR_PROJECT_DELETE, USER_LIST, PROJECT_ROLE_SEARCH, ASSIGN_HR_PROJECT_ADD, ASSIGN_HR_PROJECT_EDIT } from '../../../const/ApiConst'; |
import { API_ADW, TOKEN_ADW, ASSIGN_HR_PROJECT_SEARCH, ASSIGN_HR_PROJECT_DELETE, USER_LIST, PROJECT_ROLE_SEARCH, ASSIGN_HR_PROJECT_ADD, ASSIGN_HR_PROJECT_EDIT } 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 SweetAlert from 'react-bootstrap-sweetalert'; |
import SweetAlert from 'react-bootstrap-sweetalert'; |
||||||
import FormAsignHr from './FormAsignHr'; |
import FormAsignHr from './FormAsignHr'; |
||||||
import { formatThousand } from '../../../const/CustomFunc'; |
import { formatThousand } from '../../../const/CustomFunc'; |
||||||
|
|
||||||
const AssignHrProject = ({ openDialog, closeDialog, toggleDialog, idTask, toolsResource, proyekName }) => { |
const AssignHrProject = ({ openDialog, closeDialog, toggleDialog, idTask, toolsResource, proyekName }) => { |
||||||
const token = localStorage.getItem("token") |
const token = localStorage.getItem("token") |
||||||
const HEADER = { |
const HEADER = { |
||||||
headers: { |
headers: { |
||||||
"Content-Type": "application/json", |
"Content-Type": "application/json", |
||||||
"Authorization": `Bearer ${token}` |
"Authorization": `Bearer ${token}` |
||||||
} |
} |
||||||
} |
} |
||||||
const [dataUserToProject, setdataUserToProject] = useState([]) |
const [dataUserToProject, setdataUserToProject] = useState([]) |
||||||
const [alertDelete, setAlertDelete] = useState(false) |
const [alertDelete, setAlertDelete] = useState(false) |
||||||
const [idDelete, setIdDelete] = useState(0) |
const [idDelete, setIdDelete] = useState(0) |
||||||
const [openDialogFormTools, setOpenDialogFormTools] = useState(false) |
const [openDialogFormTools, setOpenDialogFormTools] = useState(false) |
||||||
const [dataEdit, setDataEdit] = useState(null) |
const [dataEdit, setDataEdit] = useState(null) |
||||||
const [listUser, setListUser] = useState([]) |
const [listUser, setListUser] = useState([]) |
||||||
const [listRole, setListRole] = useState([]) |
const [listRole, setListRole] = useState([]) |
||||||
|
|
||||||
useEffect(() => { |
useEffect(() => { |
||||||
if (idTask > 0) { |
if (idTask > 0) { |
||||||
getDataAssignHr(); |
getDataAssignHr(); |
||||||
} |
} |
||||||
}, [openDialog]); |
}, [openDialog]); |
||||||
|
|
||||||
useEffect(() => { |
useEffect(() => { |
||||||
if (openDialog) { |
if (openDialog) { |
||||||
getDataProjectRole(); |
getDataProjectRole(); |
||||||
getDataUser(); |
getDataUser(); |
||||||
} |
} |
||||||
}, [dataUserToProject]) |
}, [dataUserToProject]) |
||||||
|
|
||||||
const getDataAssignHr = async () => { |
const getDataAssignHr = async () => { |
||||||
const payload = { |
const payload = { |
||||||
"paging": { |
"paging": { |
||||||
"start": 0, |
"start": 0, |
||||||
"length": -1 |
"length": -1 |
||||||
}, |
}, |
||||||
"columns": [ |
"columns": [ |
||||||
{ "name": "name", "logic_operator": "ilike", "value": "", "table_name": "m_users" }, |
{ "name": "name", "logic_operator": "ilike", "value": "", "table_name": "m_users" }, |
||||||
{ "name": "proyek_id", "logic_operator": "=", "value": idTask } |
{ "name": "proyek_id", "logic_operator": "=", "value": idTask }, |
||||||
], |
{ "name": "is_customer", "logic_operator": "=", "value": "false" } |
||||||
"joins": [ |
], |
||||||
{ "name": "m_users", "column_join": "user_id", "column_results": ["name"] }, |
"joins": [ |
||||||
{ "name": "m_role_proyek", "column_join": "project_role", "column_results": ["name"] }, |
{ "name": "m_users", "column_join": "user_id", "column_results": ["name"] }, |
||||||
], |
{ "name": "m_role_proyek", "column_join": "project_role", "column_results": ["name"] }, |
||||||
"orders": { |
], |
||||||
"columns": [ |
"orders": { |
||||||
"id" |
"columns": [ |
||||||
], |
"id" |
||||||
"ascending": false |
], |
||||||
} |
"ascending": false |
||||||
} |
} |
||||||
const URL = ASSIGN_HR_PROJECT_SEARCH |
} |
||||||
const result = await axios |
const URL = ASSIGN_HR_PROJECT_SEARCH |
||||||
.post(URL, payload, HEADER) |
const result = await axios |
||||||
.then(res => res) |
.post(URL, payload, HEADER) |
||||||
.catch((error) => error.response); |
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
if (result && result.data && result.data.code == 200) { |
|
||||||
let dataRes = result.data.data || [] |
if (result && result.data && result.data.code == 200) { |
||||||
|
let dataRes = result.data.data || [] |
||||||
setdataUserToProject(dataRes); |
|
||||||
} else { |
setdataUserToProject(dataRes); |
||||||
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
} else { |
||||||
} |
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
||||||
} |
} |
||||||
|
} |
||||||
const getDataUser = async () => { |
|
||||||
const HEADER_ADW = { |
const getDataUser = async () => { |
||||||
headers: { |
const HEADER_ADW = { |
||||||
"Authorization": `${TOKEN_ADW}` |
headers: { |
||||||
} |
"Authorization": `${TOKEN_ADW}` |
||||||
} |
} |
||||||
const result = await axios |
} |
||||||
// .get(`${API_ADW}employees`, HEADER_ADW)
|
const result = await axios |
||||||
.get(USER_LIST, HEADER) |
// .get(`${API_ADW}employees`, HEADER_ADW)
|
||||||
.then(res => res) |
.get(USER_LIST, HEADER) |
||||||
.catch((error) => error.response); |
.then(res => res) |
||||||
if (result && result.data && result.data.data.length != 0) { |
.catch((error) => error.response); |
||||||
let dataRes = result.data.data |
if (result && result.data && result.data.data.length != 0) { |
||||||
setListUser(dataRes) |
let dataRes = result.data.data |
||||||
} |
setListUser(dataRes) |
||||||
} |
} |
||||||
|
} |
||||||
const getDataProjectRole = async () => { |
|
||||||
const payload = { |
const getDataProjectRole = async () => { |
||||||
"paging": { |
const payload = { |
||||||
"start": 0, |
"paging": { |
||||||
"length": -1 |
"start": 0, |
||||||
}, |
"length": -1 |
||||||
"columns": [ |
}, |
||||||
{ "name": "created_by", "logic_operator": "ilike", "value": "" }, |
"columns": [ |
||||||
], |
{ "name": "created_by", "logic_operator": "ilike", "value": "" }, |
||||||
"joins": [], |
], |
||||||
"orders": { |
"joins": [], |
||||||
"columns": [ |
"orders": { |
||||||
"id" |
"columns": [ |
||||||
], |
"id" |
||||||
"ascending": false |
], |
||||||
} |
"ascending": false |
||||||
} |
} |
||||||
|
} |
||||||
const result = await axios |
|
||||||
.post(PROJECT_ROLE_SEARCH, payload, HEADER) |
const result = await axios |
||||||
.then(res => res) |
.post(PROJECT_ROLE_SEARCH, payload, HEADER) |
||||||
.catch((error) => error.response); |
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
if (result && result.data && result.data.code == 200) { |
|
||||||
let dataRes = result.data.data || [] |
if (result && result.data && result.data.code == 200) { |
||||||
setListRole(dataRes); |
let dataRes = result.data.data || [] |
||||||
} else { |
setListRole(dataRes); |
||||||
} |
} else { |
||||||
} |
} |
||||||
|
} |
||||||
const handleDelete = (id) => { |
|
||||||
setIdDelete(id) |
const handleDelete = (id) => { |
||||||
setAlertDelete(true) |
setIdDelete(id) |
||||||
} |
setAlertDelete(true) |
||||||
|
} |
||||||
const cancelDelete = () => { |
|
||||||
setAlertDelete(false) |
const cancelDelete = () => { |
||||||
setIdDelete(0) |
setAlertDelete(false) |
||||||
} |
setIdDelete(0) |
||||||
|
} |
||||||
const onConfirmDelete = async () => { |
|
||||||
let urlDel = ASSIGN_HR_PROJECT_DELETE(idDelete) |
const onConfirmDelete = async () => { |
||||||
const result = await axios.delete(urlDel, HEADER) |
let urlDel = ASSIGN_HR_PROJECT_DELETE(idDelete) |
||||||
.then(res => res) |
const result = await axios.delete(urlDel, HEADER) |
||||||
.catch((error) => error.response); |
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
if (result && result.data && result.data.code === 200) { |
|
||||||
getDataAssignHr() |
if (result && result.data && result.data.code === 200) { |
||||||
setIdDelete(0) |
getDataAssignHr() |
||||||
setAlertDelete(false) |
setIdDelete(0) |
||||||
NotificationManager.success(`Data assign human resource berhasil dihapus`, 'Success!!'); |
setAlertDelete(false) |
||||||
} else { |
NotificationManager.success(`Data assign human resource berhasil dihapus`, 'Success!!'); |
||||||
setIdDelete(0) |
} else { |
||||||
setAlertDelete(false) |
setIdDelete(0) |
||||||
NotificationManager.error(`Data assign human resource gagal dihapus`, 'Failed!!'); |
setAlertDelete(false) |
||||||
} |
NotificationManager.error(`Data assign human resource gagal dihapus`, 'Failed!!'); |
||||||
} |
} |
||||||
|
} |
||||||
const handleEdit = async (data) => { |
|
||||||
await setDataEdit(data) |
const handleEdit = async (data) => { |
||||||
setOpenDialogFormTools(true) |
await setDataEdit(data) |
||||||
} |
setOpenDialogFormTools(true) |
||||||
|
} |
||||||
const handleOpenDialogFormTools = () => { |
|
||||||
setOpenDialogFormTools(true) |
const handleOpenDialogFormTools = () => { |
||||||
} |
setOpenDialogFormTools(true) |
||||||
|
} |
||||||
const handleCancel = () => { |
|
||||||
closeDialog('cancel', 'none') |
const handleCancel = () => { |
||||||
} |
closeDialog('cancel', 'none') |
||||||
|
} |
||||||
|
|
||||||
const RenderTable = useMemo(() => { |
|
||||||
const columns = [ |
const RenderTable = useMemo(() => { |
||||||
{ |
const columns = [ |
||||||
title: 'Action', |
{ |
||||||
dataIndex: '', |
title: 'Action', |
||||||
key: 'x', |
dataIndex: '', |
||||||
className: "nowrap", |
key: 'x', |
||||||
render: (text, record) => <><Tooltip title="Delete Request Resource"> |
className: "nowrap", |
||||||
<Button size={"sm"} color='danger' onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button> |
render: (text, record) => <><Tooltip title="Delete Request Resource"> |
||||||
</Tooltip>{" "}<Tooltip title="Edit Request Resource"> |
<Button size={"sm"} color='danger' onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button> |
||||||
<Button size={"sm"} color='primary' onClick={() => handleEdit(text)}><i className="fa fa-edit"></i></Button> |
</Tooltip>{" "}<Tooltip title="Edit Request Resource"> |
||||||
</Tooltip></>, |
<Button size={"sm"} color='primary' onClick={() => handleEdit(text)}><i className="fa fa-edit"></i></Button> |
||||||
}, |
</Tooltip></>, |
||||||
{ title: 'Name Human Resource', dataIndex: 'join_first_name', key: 'join_first_name', className: "nowrap" }, |
}, |
||||||
{ title: 'Role Human Resource', dataIndex: 'join_second_name', key: 'join_second_name', className: "nowrap" }, |
{ title: 'Name Human Resource', dataIndex: 'join_first_name', key: 'join_first_name', className: "nowrap" }, |
||||||
{ title: 'Percentage Available User', dataIndex: 'max_used', key: 'max_used', className: "nowrap", render: (text, record) => record.max_used ? formatThousand(record.max_used) : '-' }, |
{ title: 'Role Human Resource', dataIndex: 'join_second_name', key: 'join_second_name', className: "nowrap" }, |
||||||
{ title: 'Standard Rate', dataIndex: 'standart_rate', key: 'standart_rate', className: "nowrap", render: (text, record) => record.standart_rate ? formatThousand(record.standart_rate) : '-' }, |
{ title: 'Percentage Available User', dataIndex: 'max_used', key: 'max_used', className: "nowrap", render: (text, record) => record.max_used ? formatThousand(record.max_used) : '-' }, |
||||||
{ title: 'UOM Standard Rate', dataIndex: 'uom_standart_rate', key: 'uom_standart_rate', className: "nowrap" }, |
{ title: 'Standard Rate', dataIndex: 'standart_rate', key: 'standart_rate', className: "nowrap", render: (text, record) => record.standart_rate ? formatThousand(record.standart_rate) : '-' }, |
||||||
{ title: 'Overtime Rate', dataIndex: 'overtime_rate', key: 'overtime_rate', className: "nowrap", render: (text, record) => record.overtime_rate ? formatThousand(record.overtime_rate) : '-' }, |
{ title: 'UOM Standard Rate', dataIndex: 'uom_standart_rate', key: 'uom_standart_rate', className: "nowrap" }, |
||||||
{ title: 'UOM Overtime Rate', dataIndex: 'uom_overtime_rate', key: 'uom_overtime_rate', className: "nowrap" }, |
{ title: 'Overtime Rate', dataIndex: 'overtime_rate', key: 'overtime_rate', className: "nowrap", render: (text, record) => record.overtime_rate ? formatThousand(record.overtime_rate) : '-' }, |
||||||
|
{ title: 'UOM Overtime Rate', dataIndex: 'uom_overtime_rate', key: 'uom_overtime_rate', className: "nowrap" }, |
||||||
]; |
|
||||||
|
]; |
||||||
return ( |
|
||||||
<Table |
return ( |
||||||
size="small" |
<Table |
||||||
columns={columns} |
size="small" |
||||||
dataSource={dataUserToProject} |
columns={columns} |
||||||
pagination={{ position: ["bottomLeft"] }} |
dataSource={dataUserToProject} |
||||||
/> |
pagination={{ position: ["bottomLeft"] }} |
||||||
) |
/> |
||||||
}, [dataUserToProject]) |
) |
||||||
|
}, [dataUserToProject]) |
||||||
const renderForm = () => { |
|
||||||
return ( |
const renderForm = () => { |
||||||
<div style={{"overflowX":"scroll"}}> |
return ( |
||||||
{RenderTable} |
<div style={{"overflowX":"scroll"}}> |
||||||
</div> |
{RenderTable} |
||||||
) |
</div> |
||||||
} |
) |
||||||
|
} |
||||||
const handleCloseDialogFormTools = (type, data) => { |
|
||||||
if(type=="add"){ |
const handleCloseDialogFormTools = (type, data) => { |
||||||
addDataAssignHr(data); |
if(type=="add"){ |
||||||
}else if(type=="edit"){ |
addDataAssignHr(data); |
||||||
editDataAssignHr(data); |
}else if(type=="edit"){ |
||||||
}else{ |
editDataAssignHr(data); |
||||||
setDataEdit(null) |
}else{ |
||||||
setOpenDialogFormTools(false) |
setDataEdit(null) |
||||||
} |
setOpenDialogFormTools(false) |
||||||
} |
} |
||||||
|
} |
||||||
const addDataAssignHr = async (payload) => { |
|
||||||
const result = await axios |
const addDataAssignHr = async (payload) => { |
||||||
.post(ASSIGN_HR_PROJECT_ADD, payload, HEADER) |
const result = await axios |
||||||
.then(res => res) |
.post(ASSIGN_HR_PROJECT_ADD, payload, HEADER) |
||||||
.catch((error) => error.response); |
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
if (result && result.data && result.data.code == 200) { |
|
||||||
getDataAssignHr(); |
if (result && result.data && result.data.code == 200) { |
||||||
NotificationManager.success('assign human resource berhasil!!', 'Success'); |
getDataAssignHr(); |
||||||
setDataEdit(null) |
NotificationManager.success('assign human resource berhasil!!', 'Success'); |
||||||
setOpenDialogFormTools(false) |
setDataEdit(null) |
||||||
} else { |
setOpenDialogFormTools(false) |
||||||
NotificationManager.error('assign human resource gagal!!', 'Failed'); |
} else { |
||||||
} |
NotificationManager.error('assign human resource gagal!!', 'Failed'); |
||||||
} |
} |
||||||
|
} |
||||||
const editDataAssignHr = async (payload) => { |
|
||||||
let url = ASSIGN_HR_PROJECT_EDIT(payload.id) |
const editDataAssignHr = async (payload) => { |
||||||
const result = await axios |
let url = ASSIGN_HR_PROJECT_EDIT(payload.id) |
||||||
.put(url, payload, HEADER) |
const result = await axios |
||||||
.then(res => res) |
.put(url, payload, HEADER) |
||||||
.catch((error) => error.response); |
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
if (result && result.data && result.data.code == 200) { |
|
||||||
getDataAssignHr(); |
if (result && result.data && result.data.code == 200) { |
||||||
NotificationManager.success('assign human resource berhasil diedit!!', 'Success'); |
getDataAssignHr(); |
||||||
setDataEdit(null) |
NotificationManager.success('assign human resource berhasil diedit!!', 'Success'); |
||||||
setOpenDialogFormTools(false) |
setDataEdit(null) |
||||||
} else { |
setOpenDialogFormTools(false) |
||||||
NotificationManager.error('assign human resource gagal diedit!!', 'Failed'); |
} else { |
||||||
} |
NotificationManager.error('assign human resource gagal diedit!!', 'Failed'); |
||||||
} |
} |
||||||
|
} |
||||||
const toogleDialogFormTools = () => { |
|
||||||
if (openDialogFormTools) { |
const toogleDialogFormTools = () => { |
||||||
setDataEdit(null) |
if (openDialogFormTools) { |
||||||
} |
setDataEdit(null) |
||||||
setOpenDialogFormTools(!openDialogFormTools) |
} |
||||||
} |
setOpenDialogFormTools(!openDialogFormTools) |
||||||
|
} |
||||||
|
|
||||||
return ( |
|
||||||
<> |
return ( |
||||||
<NotificationContainer /> |
<> |
||||||
<SweetAlert |
<NotificationContainer /> |
||||||
show={alertDelete} |
<SweetAlert |
||||||
warning |
show={alertDelete} |
||||||
showCancel |
warning |
||||||
confirmBtnText="Delete" |
showCancel |
||||||
confirmBtnBsStyle="danger" |
confirmBtnText="Delete" |
||||||
title={`Are you sure?`} |
confirmBtnBsStyle="danger" |
||||||
onConfirm={onConfirmDelete} |
title={`Are you sure?`} |
||||||
onCancel={() => cancelDelete()} |
onConfirm={onConfirmDelete} |
||||||
focusCancelBtn |
onCancel={() => cancelDelete()} |
||||||
> |
focusCancelBtn |
||||||
Delete this data |
> |
||||||
</SweetAlert> |
Delete this data |
||||||
<Modal size="xl" isOpen={openDialog} toggle={toggleDialog}> |
</SweetAlert> |
||||||
<ModalHeader className="capitalize withBtn" toggle={closeDialog}> |
<Modal size="xl" isOpen={openDialog} toggle={toggleDialog}> |
||||||
|
<ModalHeader className="capitalize withBtn" toggle={closeDialog}> |
||||||
<div>Assign Human Resource - {proyekName}</div> <Button onClick={handleOpenDialogFormTools} size='sm' color="primary"><i className='fa fa-plus'></i></Button> |
|
||||||
</ModalHeader> |
<div>Assign Human Resource - {proyekName}</div> <Button onClick={handleOpenDialogFormTools} size='sm' color="primary"><i className='fa fa-plus'></i></Button> |
||||||
<ModalBody> |
</ModalHeader> |
||||||
{renderForm()} |
<ModalBody> |
||||||
</ModalBody> |
{renderForm()} |
||||||
{/* <ModalFooter> |
</ModalBody> |
||||||
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Close</Button> |
{/* <ModalFooter> |
||||||
</ModalFooter> */} |
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Close</Button> |
||||||
</Modal> |
</ModalFooter> */} |
||||||
<FormAsignHr |
</Modal> |
||||||
openDialog={openDialogFormTools} |
<FormAsignHr |
||||||
closeDialog={handleCloseDialogFormTools} |
openDialog={openDialogFormTools} |
||||||
toggleDialog={toogleDialogFormTools} |
closeDialog={handleCloseDialogFormTools} |
||||||
idTask={idTask} |
toggleDialog={toogleDialogFormTools} |
||||||
dataEdit={dataEdit} |
idTask={idTask} |
||||||
dataHr={listUser} |
dataEdit={dataEdit} |
||||||
dataRole={listRole} |
dataHr={listUser} |
||||||
dataCurrentHr={dataUserToProject} |
dataRole={listRole} |
||||||
/> |
dataCurrentHr={dataUserToProject} |
||||||
</> |
/> |
||||||
) |
</> |
||||||
|
) |
||||||
} |
|
||||||
|
} |
||||||
export default AssignHrProject; |
|
||||||
|
export default AssignHrProject; |
||||||
|
|||||||
@ -1,246 +1,216 @@ |
|||||||
import React, { useEffect, useState } from 'react' |
import React, { useEffect, useState } from 'react' |
||||||
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
||||||
import { Button, Form, FormGroup, Label, Input, Col, Row } from 'reactstrap'; |
import { Button, Form, FormGroup, Label, Input, Col, Row } from 'reactstrap'; |
||||||
import { DatePicker, Select } from 'antd'; |
import { DatePicker, Select } from 'antd'; |
||||||
import 'antd/dist/antd.css'; |
import 'antd/dist/antd.css'; |
||||||
import { formatNumber } from '../../../const/CustomFunc'; |
import { formatNumber } from '../../../const/CustomFunc'; |
||||||
const { Option } = Select |
const { Option } = Select |
||||||
|
|
||||||
const FormAsignHr = ({ openDialog, closeDialog, toggleDialog, idTask, dataEdit, dataHr, dataCurrentHr, dataRole }) => { |
const FormAsignHr = ({ openDialog, closeDialog, toggleDialog, idTask, dataEdit, dataHr, dataCurrentHr, dataRole }) => { |
||||||
const [id, setId] = useState(null) |
const [id, setId] = useState(null) |
||||||
const [typeForm, setTypeForm] = useState('add') |
const [typeForm, setTypeForm] = useState('add') |
||||||
const [user, setUser] = useState(null) |
const [user, setUser] = useState(null) |
||||||
const [rbs, setRbs] = useState("") |
const [rbs, setRbs] = useState("") |
||||||
const [projectRole, setProjectRole] = useState(null) |
const [projectRole, setProjectRole] = useState(null) |
||||||
const [groupR, setGroupR] = useState("") |
const [groupR, setGroupR] = useState("") |
||||||
const [maxUsed, setMaxUsed] = useState("") |
const [maxUsed, setMaxUsed] = useState("") |
||||||
const [standartRate, setStandartRate] = useState("") |
const [standartRate, setStandartRate] = useState("") |
||||||
const [uomStandartRate, setUomStandartRate] = useState(null) |
const [uomStandartRate, setUomStandartRate] = useState(null) |
||||||
const [overTimeRate, setOverTimeRate] = useState("") |
const [overTimeRate, setOverTimeRate] = useState("") |
||||||
const [overTimeRateUom, setOverTimeRateUom] = useState(null) |
const [overTimeRateUom, setOverTimeRateUom] = useState(null) |
||||||
const [costPerUsed, setCostPerUsed] = useState("") |
const [costPerUsed, setCostPerUsed] = useState("") |
||||||
const [accrue, setAccrue] = useState("") |
const [accrue, setAccrue] = useState("") |
||||||
const [baseCalender, setBaseCalender] = useState("") |
const [baseCalender, setBaseCalender] = useState("") |
||||||
const [listHr, setListHr] = useState([]) |
const [listHr, setListHr] = useState([]) |
||||||
const [isCustomer, setIsCustomer] = useState(false) |
|
||||||
|
const handleClearData = () => { |
||||||
const handleClearData = () => { |
setUser(null) |
||||||
setUser(null) |
setRbs("") |
||||||
setRbs("") |
setProjectRole(null) |
||||||
setProjectRole(null) |
setGroupR("") |
||||||
setGroupR("") |
setMaxUsed("") |
||||||
setMaxUsed("") |
setStandartRate("") |
||||||
setIsCustomer(false) |
setUomStandartRate(null) |
||||||
setStandartRate("") |
setOverTimeRate("") |
||||||
setUomStandartRate(null) |
setOverTimeRateUom(null) |
||||||
setOverTimeRate("") |
setCostPerUsed("") |
||||||
setOverTimeRateUom(null) |
setAccrue("") |
||||||
setCostPerUsed("") |
setBaseCalender("") |
||||||
setAccrue("") |
} |
||||||
setBaseCalender("") |
|
||||||
} |
useEffect(() => { |
||||||
|
let data = dataHr || [] |
||||||
useEffect(() => { |
let availableHr = [] |
||||||
let data = dataHr || [] |
data.map((val, index) => { |
||||||
let availableHr = [] |
if(dataEdit && dataEdit.user_id){ |
||||||
data.map((val, index) => { |
if(parseInt(val.id)===parseInt(dataEdit.user_id)){ |
||||||
if(dataEdit && dataEdit.user_id){ |
availableHr.push(val); |
||||||
if(parseInt(val.id)===parseInt(dataEdit.user_id)){ |
} |
||||||
availableHr.push(val); |
} |
||||||
} |
let check = dataCurrentHr.some(function (x) { |
||||||
} |
return parseInt(val.id)==parseInt(x.user_id) |
||||||
let check = dataCurrentHr.some(function (x) { |
}); |
||||||
return parseInt(val.id)==parseInt(x.user_id) |
if(!check){ |
||||||
}); |
availableHr.push(val); |
||||||
if(!check){ |
} |
||||||
availableHr.push(val); |
}); |
||||||
} |
setListHr(availableHr) |
||||||
}); |
}, [dataHr, dataCurrentHr, dataEdit]) |
||||||
setListHr(availableHr) |
|
||||||
}, [dataHr, dataCurrentHr, dataEdit]) |
useEffect(() => { |
||||||
|
if (idTask && idTask > 0) { |
||||||
useEffect(() => { |
if(dataEdit && dataEdit!=""){ |
||||||
if (idTask && idTask > 0) { |
setTypeForm('edit') |
||||||
if(dataEdit && dataEdit!=""){ |
setId(dataEdit.id) |
||||||
setTypeForm('edit') |
setUser(dataEdit.user_id) |
||||||
setId(dataEdit.id) |
setRbs(dataEdit.rbs) |
||||||
setUser(dataEdit.user_id) |
setProjectRole(dataEdit.project_role) |
||||||
setRbs(dataEdit.rbs) |
setGroupR(dataEdit.group_r) |
||||||
setProjectRole(dataEdit.project_role) |
setMaxUsed(dataEdit.max_used ? formatNumber(dataEdit.max_used.toString()) : '') |
||||||
setGroupR(dataEdit.group_r) |
setStandartRate(dataEdit.standart_rate ? formatNumber(dataEdit.standart_rate.toString()) : '') |
||||||
setMaxUsed(dataEdit.max_used ? formatNumber(dataEdit.max_used.toString()) : '') |
setUomStandartRate(dataEdit.uom_standart_rate) |
||||||
setIsCustomer(dataEdit.is_customer) |
setOverTimeRate(dataEdit.overtime_rate ? formatNumber(dataEdit.overtime_rate.toString()) : '') |
||||||
setStandartRate(dataEdit.standart_rate ? formatNumber(dataEdit.standart_rate.toString()) : '') |
setOverTimeRateUom(dataEdit.uom_overtime_rate) |
||||||
setUomStandartRate(dataEdit.uom_standart_rate) |
setCostPerUsed(dataEdit.cost_per_used) |
||||||
setOverTimeRate(dataEdit.overtime_rate ? formatNumber(dataEdit.overtime_rate.toString()) : '') |
setAccrue(dataEdit.accrue_at) |
||||||
setOverTimeRateUom(dataEdit.uom_overtime_rate) |
setBaseCalender(dataEdit.base_calender) |
||||||
setCostPerUsed(dataEdit.cost_per_used) |
}else{ |
||||||
setAccrue(dataEdit.accrue_at) |
handleClearData() |
||||||
setBaseCalender(dataEdit.base_calender) |
setTypeForm('add') |
||||||
}else{ |
} |
||||||
handleClearData() |
} else { |
||||||
setTypeForm('add') |
handleClearData() |
||||||
} |
} |
||||||
} else { |
}, [openDialog]) |
||||||
handleClearData() |
|
||||||
} |
const handleSave = () => { |
||||||
}, [openDialog]) |
let data = ''; |
||||||
|
if (typeForm=="edit") { |
||||||
const handleSave = () => { |
data = { |
||||||
let data = ''; |
id, |
||||||
if (typeForm=="edit") { |
proyek_id: idTask, |
||||||
data = { |
user_id:user, |
||||||
id, |
project_role:projectRole, |
||||||
proyek_id: idTask, |
is_customer: false, |
||||||
user_id:user, |
max_used:maxUsed.replaceAll(".", ""), |
||||||
project_role:projectRole, |
standart_rate:standartRate.replaceAll(".", ""), |
||||||
is_customer: isCustomer, |
uom_standart_rate:uomStandartRate, |
||||||
max_used:maxUsed.replaceAll(".", ""), |
overtime_rate:overTimeRate.replaceAll(".", ""), |
||||||
standart_rate:standartRate.replaceAll(".", ""), |
uom_overtime_rate:overTimeRateUom, |
||||||
uom_standart_rate:uomStandartRate, |
} |
||||||
overtime_rate:overTimeRate.replaceAll(".", ""), |
|
||||||
uom_overtime_rate:overTimeRateUom, |
closeDialog('edit', data); |
||||||
} |
} else { |
||||||
|
data = { |
||||||
closeDialog('edit', data); |
proyek_id: idTask, |
||||||
} else { |
user_id:user, |
||||||
data = { |
project_role:projectRole, |
||||||
proyek_id: idTask, |
is_customer: false, |
||||||
user_id:user, |
max_used:maxUsed.replaceAll(".", ""), |
||||||
project_role:projectRole, |
standart_rate:standartRate.replaceAll(".", ""), |
||||||
is_customer: isCustomer, |
uom_standart_rate:uomStandartRate, |
||||||
max_used:maxUsed.replaceAll(".", ""), |
overtime_rate:overTimeRate.replaceAll(".", ""), |
||||||
standart_rate:standartRate.replaceAll(".", ""), |
uom_overtime_rate:overTimeRateUom, |
||||||
uom_standart_rate:uomStandartRate, |
} |
||||||
overtime_rate:overTimeRate.replaceAll(".", ""), |
closeDialog('add', data); |
||||||
uom_overtime_rate:overTimeRateUom, |
} |
||||||
} |
handleClearData() |
||||||
closeDialog('add', data); |
} |
||||||
} |
|
||||||
handleClearData() |
const handleCancel = () => { |
||||||
} |
closeDialog('cancel', 'none') |
||||||
|
handleClearData() |
||||||
const handleCancel = () => { |
} |
||||||
closeDialog('cancel', 'none') |
|
||||||
handleClearData() |
|
||||||
} |
const renderForm = () => { |
||||||
|
return ( |
||||||
|
<Form> |
||||||
const renderForm = () => { |
<Row> |
||||||
return ( |
<Col> |
||||||
<Form> |
<FormGroup> |
||||||
<Row> |
<Label>Human Resource</Label> |
||||||
<Col> |
<Select showSearch value={user} onChange={(val) => setUser(val)} placeholder="Select Human Resource" filterOption={(input, option) => |
||||||
<FormGroup> |
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 |
||||||
<Label>Human Resource</Label> |
} style={{ width: '100%' }}> |
||||||
<Select showSearch value={user} onChange={(val) => setUser(val)} placeholder="Select Human Resource" filterOption={(input, option) => |
{listHr && listHr.map(res => ( |
||||||
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 |
<Option key={res.id} value={res.id}>{`${res.name}`}</Option> |
||||||
} style={{ width: '100%' }}> |
))} |
||||||
{listHr && listHr.map(res => ( |
</Select> |
||||||
<Option key={res.id} value={res.id}>{`${res.name}`}</Option> |
</FormGroup> |
||||||
))} |
</Col> |
||||||
</Select> |
<Col> |
||||||
</FormGroup> |
<FormGroup> |
||||||
</Col> |
<Label>Role Human Resource</Label> |
||||||
<Col> |
<Select showSearch value={projectRole} onChange={(val) => setProjectRole(val)} |
||||||
<FormGroup> |
placeholder="Select Role Human Resource" |
||||||
<Label>Role Human Resource</Label> |
filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} |
||||||
<Select showSearch value={projectRole} onChange={(val) => setProjectRole(val)} |
tyle={{ width: '100%' }}> |
||||||
placeholder="Select Role Human Resource" |
{dataRole && dataRole.map(res => ( |
||||||
filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} |
<Option key={res.id} value={res.id}>{`${res.name}`}</Option> |
||||||
tyle={{ width: '100%' }}> |
))} |
||||||
{dataRole && dataRole.map(res => ( |
</Select> |
||||||
<Option key={res.id} value={res.id}>{`${res.name}`}</Option> |
</FormGroup> |
||||||
))} |
</Col> |
||||||
</Select> |
<Col> |
||||||
</FormGroup> |
<FormGroup> |
||||||
</Col> |
<Label>Percentage Available User</Label> |
||||||
<Col> |
<Input type="text" onChange={(e) => setMaxUsed(formatNumber(e.target.value))} value={maxUsed} placeholder='' required/> |
||||||
<FormGroup> |
</FormGroup> |
||||||
<Label>Percentage Available User</Label> |
</Col> |
||||||
<Input type="text" onChange={(e) => setMaxUsed(formatNumber(e.target.value))} value={maxUsed} placeholder='' required/> |
</Row> |
||||||
</FormGroup> |
<div style={{widht:"100%",display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"}}> |
||||||
</Col> |
<FormGroup style={{flexBasis:"49%"}}> |
||||||
</Row> |
<Label>Standart Rate</Label> |
||||||
<Row> |
<Input type="text" onChange={(e) => setStandartRate(formatNumber(e.target.value))} value={standartRate} placeholder='1.000...' /> |
||||||
<Col> |
</FormGroup> |
||||||
<FormGroup> |
<div style={{flexBasis:"2%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"}}> |
||||||
<Label>Customer</Label> |
/ |
||||||
<div> |
</div> |
||||||
<Select |
<FormGroup style={{flexBasis:"49%"}}> |
||||||
value={isCustomer} |
<Label>UOM Standart Rate</Label> |
||||||
defaultValue={false} |
<Select value={uomStandartRate} onChange={(val) => setUomStandartRate(val)} style={{ width: '100%' }} placeholder="Select UOM"> |
||||||
style={{ |
<Option value={"Day"}>Day</Option> |
||||||
width: 235, |
<Option value={"Hour"}>Hour</Option> |
||||||
}} |
</Select> |
||||||
onChange={(val) => setIsCustomer(val)} |
</FormGroup> |
||||||
options={[ |
</div> |
||||||
{ |
|
||||||
value: true, |
<div style={{widht:"100%",display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"}}> |
||||||
label: 'Yes', |
<FormGroup style={{flexBasis:"49%"}}> |
||||||
}, |
<Label>Overtime Rate</Label> |
||||||
{ |
<Input type="text" onChange={(e) => setOverTimeRate(formatNumber(e.target.value))} value={overTimeRate} placeholder='1.000...' /> |
||||||
value: false, |
</FormGroup> |
||||||
label: 'No', |
<div style={{flexBasis:"2%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"}}> |
||||||
} |
/ |
||||||
]} |
</div> |
||||||
/> |
<FormGroup style={{flexBasis:"49%"}}> |
||||||
</div> |
<Label>UOM Overtime Rate</Label> |
||||||
</FormGroup> |
<Select value={overTimeRateUom} onChange={(val) => setOverTimeRateUom(val)} style={{ width: '100%' }} placeholder="Select UOM"> |
||||||
</Col> |
<Option value={"Day"}>Day</Option> |
||||||
</Row> |
<Option value={"Hour"}>Hour</Option> |
||||||
<div style={{widht:"100%",display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"}}> |
</Select> |
||||||
<FormGroup style={{flexBasis:"49%"}}> |
</FormGroup> |
||||||
<Label>Standart Rate</Label> |
</div> |
||||||
<Input type="text" onChange={(e) => setStandartRate(formatNumber(e.target.value))} value={standartRate} placeholder='1.000...' /> |
</Form> |
||||||
</FormGroup> |
) |
||||||
<div style={{flexBasis:"2%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"}}> |
} |
||||||
/ |
|
||||||
</div> |
return ( |
||||||
<FormGroup style={{flexBasis:"49%"}}> |
<> |
||||||
<Label>UOM Standart Rate</Label> |
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> |
||||||
<Select value={uomStandartRate} onChange={(val) => setUomStandartRate(val)} style={{ width: '100%' }} placeholder="Select UOM"> |
<ModalHeader className="capitalize" toggle={closeDialog}>{typeForm=="add" ? "Add" : "Edit" } Assign Human Resource</ModalHeader> |
||||||
<Option value={"Day"}>Day</Option> |
<ModalBody> |
||||||
<Option value={"Hour"}>Hour</Option> |
{renderForm()} |
||||||
</Select> |
</ModalBody> |
||||||
</FormGroup> |
<ModalFooter> |
||||||
</div> |
<Button color="primary" onClick={() => handleSave()}>{typeForm=="add" ? "Add" : "Edit" }</Button>{' '} |
||||||
|
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Cancel</Button> |
||||||
<div style={{widht:"100%",display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"}}> |
</ModalFooter> |
||||||
<FormGroup style={{flexBasis:"49%"}}> |
</Modal> |
||||||
<Label>Overtime Rate</Label> |
</> |
||||||
<Input type="text" onChange={(e) => setOverTimeRate(formatNumber(e.target.value))} value={overTimeRate} placeholder='1.000...' /> |
) |
||||||
</FormGroup> |
|
||||||
<div style={{flexBasis:"2%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"}}> |
} |
||||||
/ |
|
||||||
</div> |
export default FormAsignHr; |
||||||
<FormGroup style={{flexBasis:"49%"}}> |
|
||||||
<Label>UOM Overtime Rate</Label> |
|
||||||
<Select value={overTimeRateUom} onChange={(val) => setOverTimeRateUom(val)} style={{ width: '100%' }} placeholder="Select UOM"> |
|
||||||
<Option value={"Day"}>Day</Option> |
|
||||||
<Option value={"Hour"}>Hour</Option> |
|
||||||
</Select> |
|
||||||
</FormGroup> |
|
||||||
</div> |
|
||||||
</Form> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<> |
|
||||||
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> |
|
||||||
<ModalHeader className="capitalize" toggle={closeDialog}>{typeForm=="add" ? "Add" : "Edit" } Assign Human Resource</ModalHeader> |
|
||||||
<ModalBody> |
|
||||||
{renderForm()} |
|
||||||
</ModalBody> |
|
||||||
<ModalFooter> |
|
||||||
<Button color="primary" onClick={() => handleSave()}>{typeForm=="add" ? "Add" : "Edit" }</Button>{' '} |
|
||||||
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Cancel</Button> |
|
||||||
</ModalFooter> |
|
||||||
</Modal> |
|
||||||
</> |
|
||||||
) |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
export default FormAsignHr; |
|
||||||
|
|||||||
@ -0,0 +1,46 @@ |
|||||||
|
import React from "react"; |
||||||
|
import Input from "antd/lib/input"; |
||||||
|
import Button from "antd/lib/button"; |
||||||
|
import Dropdown from "antd/lib/dropdown"; |
||||||
|
import { Panel } from 'rc-color-picker' |
||||||
|
import "antd/dist/antd.css"; |
||||||
|
import "./styles.css"; |
||||||
|
|
||||||
|
export default function InputColor(props) { |
||||||
|
const { color, onChange } = props; |
||||||
|
|
||||||
|
const [internalColor, setInternalColor] = React.useState(color); |
||||||
|
|
||||||
|
const handleChange = (color) => { |
||||||
|
setInternalColor(color.color); |
||||||
|
|
||||||
|
if (onChange) { |
||||||
|
onChange(color); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const overlay = ( |
||||||
|
<div> |
||||||
|
<Panel |
||||||
|
color={internalColor} |
||||||
|
enableAlpha={false} |
||||||
|
onChange={handleChange} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
); |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Input |
||||||
|
value={internalColor || ""} |
||||||
|
onChange={(e) => setInternalColor(e.target.value)} |
||||||
|
suffix={ |
||||||
|
<Dropdown trigger={["click"]} overlay={overlay}> |
||||||
|
<Button style={{ background: internalColor }}> </Button> |
||||||
|
</Dropdown> |
||||||
|
} |
||||||
|
/> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,41 @@ |
|||||||
|
.App { |
||||||
|
font-family: sans-serif; |
||||||
|
padding: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
h2 { |
||||||
|
margin-top: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
.rc-color-picker-panel { |
||||||
|
border: 1px solid #ccc; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-inner { |
||||||
|
border: none; |
||||||
|
box-shadow: none; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-board-hsv { |
||||||
|
border-radius: 12px; |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-board-value { |
||||||
|
border: none; |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-board-saturation { |
||||||
|
border: none; |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-ribbon { |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-wrap-preview { |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-preview span { |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
.rc-color-picker-panel-preview input { |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
|
||||||
Loading…
Reference in new issue