wahyuun
1 year ago
1 changed files with 216 additions and 246 deletions
@ -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; |
|
||||||
|
|||||||
Loading…
Reference in new issue