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. 771
      src/views/SimproV2/CreatedProyek/DialogFormProyek.js

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

@ -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;

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

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