107 lines
3.4 KiB
TypeScript
107 lines
3.4 KiB
TypeScript
import React, { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Form } from "@/components/ui/form";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogFooter,
|
|
} from "@/components/ui/dialog";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
interface AddIpalModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
idPelaporan: string;
|
|
}
|
|
|
|
const AddIpalModal: React.FC<AddIpalModalProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
idPelaporan,
|
|
}) => {
|
|
const [nomor, setNomor] = useState<string>("");
|
|
const [nama, setNama] = useState<string>("");
|
|
|
|
const navigate = useNavigate(); // Untuk navigasi setelah form disubmit
|
|
|
|
// Fungsi untuk handle form submission
|
|
const handleSubmit = async (event: React.FormEvent) => {
|
|
event.preventDefault();
|
|
|
|
const response = await fetch(
|
|
`/pelaporan/al/ipal/add_ipal/${idPelaporan}`,
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
nomor,
|
|
nama,
|
|
}),
|
|
}
|
|
);
|
|
|
|
if (response.ok) {
|
|
// Redirect atau close modal setelah berhasil simpan
|
|
onClose();
|
|
navigate(`/admin/pelaporan/al/ipal`); // Sesuaikan dengan halaman yang diinginkan
|
|
} else {
|
|
// Menangani error atau validasi
|
|
alert("Gagal menyimpan data.");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
Pengelolaan Air Limbah - Instalasi Pengolah Air Limbah
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="nomor">Nomor IPAL:</Label>
|
|
<Input
|
|
id="nomor"
|
|
name="nomor"
|
|
type="text"
|
|
value={nomor}
|
|
onChange={(e) => setNomor(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="nama">Nama IPAL:</Label>
|
|
<Input
|
|
id="nama"
|
|
name="nama"
|
|
type="text"
|
|
value={nama}
|
|
onChange={(e) => setNama(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter className="mt-4">
|
|
<Button type="submit">
|
|
<i className="fa fa-save"></i> Simpan
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default AddIpalModal;
|