|
|
@@ -1,5 +1,7 @@
|
|
|
import React, { Component } from "react";
|
|
|
+import Router from "next/router";
|
|
|
import ContentWrapper from "@/components/Layout/ContentWrapper";
|
|
|
+import Select from "react-select";
|
|
|
import {
|
|
|
Row,
|
|
|
Col,
|
|
|
@@ -21,7 +23,6 @@ import {
|
|
|
CustomInput,
|
|
|
DropdownItem,
|
|
|
} from "reactstrap";
|
|
|
-import Select from "react-select";
|
|
|
|
|
|
const styleHeaderText = {
|
|
|
color: "brown",
|
|
|
@@ -444,22 +445,29 @@ const tbljenisPelanggaran = [
|
|
|
TMTBulan: 6,
|
|
|
},
|
|
|
];
|
|
|
-const selectJenisPelangaran = [];
|
|
|
-tbljenisPelanggaran.forEach((e) => {
|
|
|
- selectJenisPelangaran.push({
|
|
|
- value: e.idPelanggaran,
|
|
|
- label: e.Pelanggaran,
|
|
|
- className: "State-ACT",
|
|
|
- });
|
|
|
+const selectJenisPelangaran = tbljenisPelanggaran.map((e) => {
|
|
|
+ return { value: e.idPelanggaran, label: e.Pelanggaran, className: "State-ACT" };
|
|
|
});
|
|
|
class FormStandard extends Component {
|
|
|
- state = {
|
|
|
- dropdownOpen: false,
|
|
|
- splitButtonOpen: false,
|
|
|
- pelaporanNumber: Math.floor(Date.now() * Math.random()),
|
|
|
- selectedOptionMulti: [],
|
|
|
- files: [],
|
|
|
- stat: "Waiting to add files..",
|
|
|
+ constructor() {
|
|
|
+ super();
|
|
|
+ this.state = {
|
|
|
+ dropdownOpen: false,
|
|
|
+ splitButtonOpen: false,
|
|
|
+ selectedOptionMulti: [],
|
|
|
+ stat: "Waiting to add files..",
|
|
|
+ pelaporanNumber: Math.floor(Date.now() * Math.random()),
|
|
|
+ keteranganLaporan: "",
|
|
|
+ files: [],
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ static getInitialProps({ query }) {
|
|
|
+ return { query };
|
|
|
+ }
|
|
|
+
|
|
|
+ setKeteranganPelaporan = (e) => {
|
|
|
+ this.setState({ keteranganLaporan: e.target.value });
|
|
|
};
|
|
|
|
|
|
toggleDropDown = () => {
|
|
|
@@ -476,7 +484,6 @@ class FormStandard extends Component {
|
|
|
|
|
|
handleChangeSelectMulti = (selectedOptionMulti) => {
|
|
|
this.setState({ selectedOptionMulti });
|
|
|
- console.log(`Selected Multi: ${selectedOptionMulti.label}`);
|
|
|
};
|
|
|
|
|
|
onDrop = (files) => {
|
|
|
@@ -510,14 +517,44 @@ class FormStandard extends Component {
|
|
|
};
|
|
|
|
|
|
onSubmit = (e) => {
|
|
|
- const formData = new FormData();
|
|
|
- const data = {};
|
|
|
+ const formdata = new FormData();
|
|
|
+ formdata.append("number", this.state.pelaporanNumber);
|
|
|
+ formdata.append("pt_id", this.props.query.ptId);
|
|
|
+ formdata.append("description", this.state.keteranganLaporan);
|
|
|
+ formdata.append("pelanggaran_id", this.state.selectedOptionMulti.map((e) => e.value).join());
|
|
|
+ if (this.state.files.length > 0) {
|
|
|
+ this.state.files.forEach((e) => {
|
|
|
+ formdata.append("files", e);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ const inserted = this.insertData(formdata);
|
|
|
e.preventDefault();
|
|
|
+ if (inserted) {
|
|
|
+ Router.push({
|
|
|
+ pathname: "/app/pelaporan",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ insertData = async (data) => {
|
|
|
+ try {
|
|
|
+ const requestOptions = {
|
|
|
+ method: "POST",
|
|
|
+ body: data,
|
|
|
+ };
|
|
|
+
|
|
|
+ const inserted = await fetch("http://localhost:1880/pelaporan.create", requestOptions);
|
|
|
+ // .catch((error) => console.log("error", error));
|
|
|
+ return inserted;
|
|
|
+ } catch (e) {
|
|
|
+ console.log("error", error);
|
|
|
+ return false;
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
render() {
|
|
|
- const { selectedOptionMulti } = this.state;
|
|
|
- const { files } = this.state;
|
|
|
+ const { selectedOptionMulti, files } = this.state;
|
|
|
|
|
|
const thumbs = files.map((file, index) => (
|
|
|
<Col md={3} key={index}>
|
|
|
@@ -562,14 +599,14 @@ class FormStandard extends Component {
|
|
|
<FormGroup row>
|
|
|
<label className="col-md-2 col-form-label">Jenis Pelanggaran</label>
|
|
|
<div className="col-md-10">
|
|
|
- <Select name="multi-select-name" instanceId={selectInstanceId + 1} multi simpleValue value={selectedOptionMulti} onChange={this.handleChangeSelectMulti} options={selectJenisPelangaran} />
|
|
|
+ <Select instanceId={selectInstanceId + 1} isMulti value={selectedOptionMulti} onChange={this.handleChangeSelectMulti} options={selectJenisPelangaran} required />
|
|
|
<span className="form-text">Pilih Jenis Pelanggaran</span>
|
|
|
</div>
|
|
|
</FormGroup>
|
|
|
<FormGroup row>
|
|
|
<label className="col-md-2 col-form-label">Keterangan Laporan</label>
|
|
|
<div className="col-md-10">
|
|
|
- <Input type="textarea" />
|
|
|
+ <Input type="textarea" value={this.state.keteranganLaporan} onChange={this.setKeteranganPelaporan} required />
|
|
|
{/* <textarea class="form-control" id="inputContact6" row="3">Some nice Street, 1234</textarea> */}
|
|
|
<span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span>
|
|
|
</div>
|
