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