pelaporan tinggal notifikasi

package-lock.json

@@ -1483,9 +1483,9 @@
       }
     },
     "@emotion/core": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.1.1.tgz",
-      "integrity": "sha512-ZMLG6qpXR8x031NXD8HJqugy/AZSkAuMxxqB46pmAR7ze47MhNJ56cdoX243QPZdGctrdfo+s08yZTiwaUcRKA==",
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.3.1.tgz",
+      "integrity": "sha512-447aUEjPIm0MnE6QYIaFz9VQOHSXf4Iu6EWOIqq11EAPqinkSZmfymPTmlOE3QjLv846lH4JVZBUOtwGbuQoww==",
       "requires": {
         "@babel/runtime": "^7.5.5",
         "@emotion/cache": "^10.0.27",
@@ -3930,9 +3930,9 @@
       }
     },
     "csstype": {
-      "version": "2.6.16",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.16.tgz",
-      "integrity": "sha512-61FBWoDHp/gRtsoDkq/B1nWrCUG/ok1E3tUrcNbZjsE9Cxd9yzUirjS3+nAATB8U4cTtaQmAHbNndoFz5L6C9Q=="
+      "version": "2.6.19",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.19.tgz",
+      "integrity": "sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ=="
     },
     "currently-unhandled": {
       "version": "0.4.1",
@@ -6369,9 +6369,9 @@
       }
     },
     "lines-and-columns": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
-      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA="
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "linkify-it": {
       "version": "2.2.0",
@@ -6578,9 +6578,9 @@
       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
     },
     "memoize-one": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
-      "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
     },
     "memory-fs": {
       "version": "0.4.1",

package.json

@@ -84,7 +84,7 @@
         "react-maskedinput": "4.0.1",
         "react-perfect-scrollbar": "1.5.8",
         "react-redux": "6.0.1",
-        "react-select": "3.0.4",
+        "react-select": "^3.0.4",
         "react-toastify": "4.5.2",
         "react-transition-group": "4.2.2",
         "reactstrap": "^8.0.1",

pages/app/pelaporan.new.js

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