Browse Source

bug fixing (project charter)

pull/2/head
Anggara MAG 2 years ago
parent
commit
1bb3a0530d
  1. 298
      src/views/SimproV2/CreatedProyek/DialogForm.js
  2. 761
      src/views/SimproV2/CreatedProyek/DialogFormProyek.js

298
src/views/SimproV2/CreatedProyek/DialogForm.js

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

761
src/views/SimproV2/CreatedProyek/DialogFormProyek.js

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save