|
|
@@ -7,7 +7,7 @@ import { createLaporanPublic } from "@/actions/pelaporan";
|
|
|
import { notifLaporanBaru } from "@/actions/notifikasi";
|
|
|
import Select from "react-select";
|
|
|
import AsyncSelect from "react-select/async";
|
|
|
-import { Row, Col, FormGroup, Input, Card, CardBody, Button, CustomInput, Navbar, NavItem, NavLink, NavbarBrand, NavbarToggler, Nav, Collapse } from "reactstrap";
|
|
|
+import { Row, Col, FormGroup, Input, Card, CardBody, Button, CustomInput, Navbar, NavItem, NavLink, NavbarBrand, NavbarToggler, Nav, Collapse, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
|
|
|
import Link from "next/link";
|
|
|
import ContentWrapper from "@/components/Layout/ContentWrapper";
|
|
|
import { createPublicUser } from "@/actions/user";
|
|
|
@@ -45,14 +45,14 @@ const checkIfFilesAreCorrectType = (files) => {
|
|
|
const laporanSchema = Yup.object().shape({
|
|
|
no_laporan: Yup.string().required("Harap Diisi"),
|
|
|
no_hp: Yup.number().required("Harap Diisi"),
|
|
|
- nama: Yup.string().required("Harap Diisi"),
|
|
|
+ nama: Yup.string().notRequired(),
|
|
|
setuju: Yup.boolean().isTrue(),
|
|
|
- alamat: Yup.string().min(3).max(200).required("Harap Diisi"),
|
|
|
+ alamat: Yup.string().min(3).max(200).notRequired(),
|
|
|
keterangan: Yup.string().min(3).max(200).required("Harap Diisi"),
|
|
|
- email: Yup.string().email().required("Harap Diisi"),
|
|
|
+ email: Yup.string().email().notRequired(),
|
|
|
pelanggaran_id: Yup.array().min(1).required("Harap Diisi"),
|
|
|
pt_id: Yup.string().required("Harap Diisi"),
|
|
|
- foto: Yup.array().min(1, "Harus ada").required("Harus ada").test("filesize", "Maksimal ukuran foto 15mb", checkIfFilesAreTooBig).test("type", "harus jpeg/png", checkIfFilesAreCorrectType),
|
|
|
+ foto: Yup.array().notRequired().test("filesize", "Maksimal ukuran foto 15mb", checkIfFilesAreTooBig).test("type", "harus jpeg/png", checkIfFilesAreCorrectType),
|
|
|
dokumen: Yup.array().nullable().notRequired().test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
|
|
|
is_private: Yup.boolean().notRequired(),
|
|
|
});
|
|
|
@@ -100,6 +100,12 @@ class App extends Component {
|
|
|
isPrivate: false,
|
|
|
confirm: false,
|
|
|
msgError: [],
|
|
|
+ modal: false,
|
|
|
+ user: {},
|
|
|
+ kode: "",
|
|
|
+ error: null,
|
|
|
+ data: {},
|
|
|
+ token: "",
|
|
|
};
|
|
|
}
|
|
|
|
|
|
@@ -110,10 +116,8 @@ class App extends Component {
|
|
|
this.setState({ pelanggaran });
|
|
|
};
|
|
|
|
|
|
- toggleCollapse = () => {
|
|
|
- this.setState({
|
|
|
- isOpen: !this.state.isOpen,
|
|
|
- });
|
|
|
+ toggleModal = () => {
|
|
|
+ this.setState({ modal: !this.state.modal });
|
|
|
};
|
|
|
|
|
|
optionsJenisPelanggaran = (pelanggaran) => {
|
|
|
@@ -166,31 +170,29 @@ class App extends Component {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
- createLaporan = async (data, token) => {
|
|
|
+ createLaporan = async (token, kode = "") => {
|
|
|
+ const data = this.state.data;
|
|
|
const formdata = new FormData();
|
|
|
formdata.append("pt_id", data.pt_id);
|
|
|
formdata.append("keterangan", data.keterangan);
|
|
|
- formdata.append("no_verifikasi", data.noVerifikasi);
|
|
|
formdata.append("pelanggaran_id", data.pelanggaran_id.join(","));
|
|
|
+ if (kode) {
|
|
|
+ formdata.append("no_verifikasi", kode);
|
|
|
+ }
|
|
|
if (data.dokumen.length > 0) {
|
|
|
Array.from(data.dokumen).forEach((e) => {
|
|
|
formdata.append("dokumen", e);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
+ const toastid = toast.loading("Please wait...");
|
|
|
const success = await createLaporanPublic(token, formdata);
|
|
|
if (!success) {
|
|
|
- swal({
|
|
|
- text: "Kode Verifikasi tidak sesuai",
|
|
|
- icon: "error",
|
|
|
- });
|
|
|
+ toast.update(toastid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
|
|
|
+ this.setState({ error: "Kode verifikasi tidak valid" });
|
|
|
} else {
|
|
|
- swal({
|
|
|
- icon: "success",
|
|
|
- title: "Berhasil!",
|
|
|
- text: "Laporan berhasil terkirim",
|
|
|
- });
|
|
|
-
|
|
|
+ toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
|
|
|
+ this.toggleModal();
|
|
|
Router.push("/laporan/new");
|
|
|
}
|
|
|
};
|
|
|
@@ -199,12 +201,12 @@ class App extends Component {
|
|
|
const formdata = new FormData();
|
|
|
formdata.append("no_laporan", data.no_laporan);
|
|
|
formdata.append("pt_id", data.pt_id);
|
|
|
- formdata.append("nama", data.nama);
|
|
|
- formdata.append("email", data.email);
|
|
|
+ if (data.nama) formdata.append("nama", data.nama);
|
|
|
+ if (data.email) formdata.append("email", data.email);
|
|
|
formdata.append("no_hp", data.no_hp);
|
|
|
- formdata.append("alamat", data.alamat);
|
|
|
+ if (data.alamat) formdata.append("alamat", data.alamat);
|
|
|
formdata.append("is_private", data.is_private);
|
|
|
- formdata.append("foto", data.foto[0]);
|
|
|
+ if (data.foto.length > 0) formdata.append("foto", data.foto[0]);
|
|
|
return await createPublicUser(formdata);
|
|
|
};
|
|
|
|
|
|
@@ -253,23 +255,11 @@ class App extends Component {
|
|
|
}}
|
|
|
validationSchema={laporanSchema}
|
|
|
onSubmit={async (data) => {
|
|
|
- swal({
|
|
|
- title: "",
|
|
|
- text: "Loading...",
|
|
|
- icon: "https://www.boasnotas.com/img/loading2.gif",
|
|
|
- buttons: false,
|
|
|
- closeOnClickOutside: false,
|
|
|
- });
|
|
|
+ this.toggleModal();
|
|
|
+ this.setState({ data, no_hp: data.no_hp });
|
|
|
const user = await this.createUser(data);
|
|
|
- data.noVerifikasi = await swal({
|
|
|
- text: "Masukkan kode verifikasi",
|
|
|
- content: "input",
|
|
|
- button: {
|
|
|
- text: "Kirim",
|
|
|
- closeModal: false,
|
|
|
- },
|
|
|
- });
|
|
|
- await this.createLaporan(data, user.data.token);
|
|
|
+ const token = user.data.token;
|
|
|
+ this.setState({ user, token });
|
|
|
}}
|
|
|
>
|
|
|
<Form className="form-horizontal">
|
|
|
@@ -287,7 +277,7 @@ class App extends Component {
|
|
|
<FormGroup row>
|
|
|
<label className="col-md-2 col-form-label">Nomor Aktif</label>
|
|
|
<div className="col-md-10">
|
|
|
- <Field name="no_hp">{({ field }) => <Input type="tel" {...field} />}</Field>
|
|
|
+ <Field name="no_hp">{({ field, form }) => <Input type="tel" {...field} />}</Field>
|
|
|
<ErrorMessage name="no_hp" component="div" className="form-text text-danger" />
|
|
|
</div>
|
|
|
</FormGroup>
|
|
|
@@ -415,6 +405,42 @@ class App extends Component {
|
|
|
</Card>
|
|
|
</Col>
|
|
|
</Row>
|
|
|
+ <Modal isOpen={this.state.modal}>
|
|
|
+ <form className="form-horizontal">
|
|
|
+ <ModalBody>
|
|
|
+ <FormGroup>
|
|
|
+ <label>Masukkan Kode Verifikasi</label>
|
|
|
+ <div>
|
|
|
+ <Input onChange={(e) => this.setState({ kode: e.target.value })} type="text" />
|
|
|
+ </div>
|
|
|
+ <p>*Kode verifikasi terkirim ke nomor WA {this.state.no_hp}</p>
|
|
|
+ {this.state.error && <div className="form-text text-danger">{this.state.error}</div>}
|
|
|
+ </FormGroup>
|
|
|
+ </ModalBody>
|
|
|
+ <ModalFooter>
|
|
|
+ <Button
|
|
|
+ color="info"
|
|
|
+ onClick={async () => {
|
|
|
+ await this.createLaporan(this.state.token);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ Tidak memiliki Kode Verifikasi
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ color="primary"
|
|
|
+ onClick={async () => {
|
|
|
+ if (this.state.kode) {
|
|
|
+ await this.createLaporan(this.state.token, this.state.kode);
|
|
|
+ } else {
|
|
|
+ this.setState({ error: "Kode verifikasi harus diisi" });
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ Kirim
|
|
|
+ </Button>
|
|
|
+ </ModalFooter>
|
|
|
+ </form>
|
|
|
+ </Modal>
|
|
|
</ContentWrapper>
|
|
|
</div>
|
|
|
);
|
