fix endline

src/views/SimproV2/CreatedProyek/DialogForm.js

@@ -1,325 +1,325 @@
-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 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 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());
-	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);
-		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);
-		} 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("");
-	};
-
-	useEffect(() => {
-		if (idTask && idTask > 0) {
-			handleGetdataIdproyek(idTask);
-		} else {
-			handleCLearData();
-		}
-	}, [openDialog]);
-
-	const handleSave = () => {
-		let data = "";
-		if (idTask) {
-			data = {
-				id: idTask,
-				nama: name,
-				kode_sortname: shortName,
-				rencana_biaya: biaya.replace(".", ""),
-				mulai_proyek: startDate,
-				akhir_proyek: endDate,
-				type_proyek_id: parseInt(typeProject),
-				pm_id: pic,
-				investor,
-				finance,
-				company,
-				area_kerja: workArea,
-				keterangan: description,
-			};
-
-			closeDialog("edit", data);
-		} else {
-			data = {
-				nama: name,
-				kode_sortname: shortName,
-				rencana_biaya: biaya.replace(".", ""),
-				mulai_proyek: startDate,
-				akhir_proyek: endDate,
-				type_proyek_id: parseInt(typeProject),
-				pm_id: pic,
-				investor,
-				finance,
-				company,
-				area_kerja: workArea,
-				keterangan: description,
-			};
-			closeDialog("add", data);
-		}
-		handleCLearData();
-	};
-
-	const handleCancel = () => {
-		closeDialog("cancel", "none");
-		handleCLearData();
-	};
-
-	const onChangeTypeProject = (val) => {
-		setTypeproject(val);
-	};
-
-	const onChangePm = (val) => {
-		setPic(val);
-	};
-
-	const handleDatePickerStart = (date, dateString) => {
-		setStartDate(date);
-	};
-
-	const handleDatePickerEnd = (date, dateString) => {
-		setEndDate(date);
-	};
-
-	const renderForm = () => {
-		return (
-			<Form>
-				<Row>
-					<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...`}
-							/>
-						</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...`}
-							/>
-						</FormGroup>
-					</Col>
-				</Row>
-				<Row>
-					<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>
-						</FormGroup>
-					</Col>
-					<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>
-						</FormGroup>
-					</Col>
-				</Row>
-				<Row>
-					<Col md={6}>
-						<FormGroup>
-							<Label className="capitalize">Start Date</Label>
-							<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}
-							/>
-						</FormGroup>
-					</Col>
-				</Row>
-				<Row>
-					<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...`}
-							/>
-						</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...`}
-							/>
-						</FormGroup>
-					</Col>
-				</Row>
-				<Row>
-					<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...`}
-							/>
-						</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...`}
-							/>
-						</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>
-				<ModalFooter>
-					<Button color="primary" onClick={() => handleSave()}>
-						{idTask ? `Save` : "Add"}
-					</Button>{" "}
-					<Button
-						className="capitalize"
-						color="secondary"
-						onClick={() => handleCancel()}
-					>
-						Cancel
-					</Button>
-				</ModalFooter>
-			</Modal>
-		</>
-	);
-};
-
-export default DialogForm;
+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 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 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());
+	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);
+		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);
+		} 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("");
+	};
+
+	useEffect(() => {
+		if (idTask && idTask > 0) {
+			handleGetdataIdproyek(idTask);
+		} else {
+			handleCLearData();
+		}
+	}, [openDialog]);
+
+	const handleSave = () => {
+		let data = "";
+		if (idTask) {
+			data = {
+				id: idTask,
+				nama: name,
+				kode_sortname: shortName,
+				rencana_biaya: biaya.replace(".", ""),
+				mulai_proyek: startDate,
+				akhir_proyek: endDate,
+				type_proyek_id: parseInt(typeProject),
+				pm_id: pic,
+				investor,
+				finance,
+				company,
+				area_kerja: workArea,
+				keterangan: description,
+			};
+
+			closeDialog("edit", data);
+		} else {
+			data = {
+				nama: name,
+				kode_sortname: shortName,
+				rencana_biaya: biaya.replace(".", ""),
+				mulai_proyek: startDate,
+				akhir_proyek: endDate,
+				type_proyek_id: parseInt(typeProject),
+				pm_id: pic,
+				investor,
+				finance,
+				company,
+				area_kerja: workArea,
+				keterangan: description,
+			};
+			closeDialog("add", data);
+		}
+		handleCLearData();
+	};
+
+	const handleCancel = () => {
+		closeDialog("cancel", "none");
+		handleCLearData();
+	};
+
+	const onChangeTypeProject = (val) => {
+		setTypeproject(val);
+	};
+
+	const onChangePm = (val) => {
+		setPic(val);
+	};
+
+	const handleDatePickerStart = (date, dateString) => {
+		setStartDate(date);
+	};
+
+	const handleDatePickerEnd = (date, dateString) => {
+		setEndDate(date);
+	};
+
+	const renderForm = () => {
+		return (
+			<Form>
+				<Row>
+					<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...`}
+							/>
+						</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...`}
+							/>
+						</FormGroup>
+					</Col>
+				</Row>
+				<Row>
+					<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>
+						</FormGroup>
+					</Col>
+					<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>
+						</FormGroup>
+					</Col>
+				</Row>
+				<Row>
+					<Col md={6}>
+						<FormGroup>
+							<Label className="capitalize">Start Date</Label>
+							<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}
+							/>
+						</FormGroup>
+					</Col>
+				</Row>
+				<Row>
+					<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...`}
+							/>
+						</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...`}
+							/>
+						</FormGroup>
+					</Col>
+				</Row>
+				<Row>
+					<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...`}
+							/>
+						</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...`}
+							/>
+						</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>
+				<ModalFooter>
+					<Button color="primary" onClick={() => handleSave()}>
+						{idTask ? `Save` : "Add"}
+					</Button>{" "}
+					<Button
+						className="capitalize"
+						color="secondary"
+						onClick={() => handleCancel()}
+					>
+						Cancel
+					</Button>
+				</ModalFooter>
+			</Modal>
+		</>
+	);
+};
+
+export default DialogForm;