diff --git a/pages/instruktur/create.jsx b/pages/instruktur/create.jsx new file mode 100644 index 0000000000000000000000000000000000000000..b56d9ff435106fb8cea0c54823116436db54eb2d --- /dev/null +++ b/pages/instruktur/create.jsx @@ -0,0 +1,100 @@ +import Template from "@/components/template" +import { useState } from "react" +import { toast } from "react-toastify" +import { useRouter } from "next/router" +const Create = () => { + const router = useRouter() + const [NIK, setNIK] = useState("") + const [namaLengkap, setNamaLengkap] = useState("") + const [alamat, setAlamat] = useState("") + const [noTelp, setTelp] = useState("") + const [noRekening, setRekening] = useState("") + + const handleUpdate = async () => { + const token = window.localStorage.getItem("token") + if (token === undefined || token === null) { + window.location.replace("/auth/login") + return + } + const body = JSON.stringify({ + nikInstruktur: NIK, + namaLengkap, + alamatInstruktur: alamat, + noTelp, + noRekening + }) + const updateQuery = await fetch("https://rpl-backend-production.up.railway.app/v1/instruktur/create", { + method: "POST", + headers: { + Authorization: token, + "Content-Type": "application/json" + }, + body + }).then(response => response).catch(() => null) + if (updateQuery === null) { + toast.error("Someting went wrong..") + return + } + if (updateQuery.status !== 200) { + toast.error("Failed to create...") + return + } + toast.success("Successfully created!") + router.push("/instruktur") + return; + } + return <> + <Template> + <main className="min-h-screen px-14 py-5 bg-[#FFF6F6]"> + <div className="w-full mb-2"> + <span className="text-[#F875AA] font-bold text-2xl hover:cursor-pointer" onClick={(e) => { + e.preventDefault() + router.push("/") + }}>Back</span> + </div> + <h1 className="text-[#F875AA] font-extrabold text-5xl mb-20 text-center">Update Instruktur</h1> + <form className="w-2/3 mx-auto space-y-10 flex flex-col align-middle justify-evenly" onSubmit={(e) => { + e.preventDefault() + handleUpdate() + return; + }}> + <div className="flex flex-row align-middle justify-between"> + <span className="h-min my-auto font-bold text-lg">NIK</span> + <input value={NIK} onChange={(e) => { + setNIK(e.target.value) + }} type="tel" required className="drop-shadow-xl w-2/3 p-2 rounded-xl" /> + </div> + <div className="flex flex-row align-middle justify-between"> + <span className="h-min my-auto font-bold text-lg">Nama Lengkap</span> + <input value={namaLengkap} onChange={(e) => { + setNamaLengkap(e.target.value) + }} type="text" required className="drop-shadow-xl w-2/3 p-2 rounded-xl" /> + </div> + <div className="flex flex-row align-middle justify-between"> + <span className="h-min my-auto font-bold text-lg">Alamat</span> + <input value={alamat} onChange={(e) => { + setAlamat(e.target.value) + }} type="text" required className="drop-shadow-xl w-2/3 p-2 rounded-xl" /> + </div> + <div className="flex flex-row align-middle justify-between"> + <span className="h-min my-auto font-bold text-lg">No Telp</span> + <input value={noTelp} onChange={(e) => { + setTelp(e.target.value) + }} type="tel" required className="drop-shadow-xl w-2/3 p-2 rounded-xl" /> + </div> + <div className="flex flex-row align-middle justify-between"> + <span className="h-min my-auto font-bold text-lg">No Rekening</span> + <input value={noRekening} onChange={(e) => { + setRekening(e.target.value) + }} type="tel" required className="drop-shadow-xl w-2/3 p-2 rounded-xl" /> + </div> + <input type="submit" className="bg-[#F875AA] px-8 py-3 text-xl font-bold text-white rounded-xl mx-auto" value={"Simpan"} /> + </form> + + </main> + </Template > + </> + +} + +export default Create \ No newline at end of file diff --git a/pages/instruktur/edit/[id].jsx b/pages/instruktur/edit/[id].jsx index b246b868200178f49478a270725a34d1b724ab80..9cd8bc65fe9cd1b80526e33e3db73b7893f0b80a 100644 --- a/pages/instruktur/edit/[id].jsx +++ b/pages/instruktur/edit/[id].jsx @@ -1,6 +1,123 @@ +import Template from "@/components/template" +import { useEffect, useState } from "react" +import { toast } from "react-toastify" +import { useRouter } from "next/router" const Edit = () => { - return <h1> - Jaran Goyang - </h1> + const router = useRouter() + const [NIK, setNIK] = useState("") + const [namaLengkap, setNamaLengkap] = useState("") + const [alamat, setAlamat] = useState("") + const [noTelp, setTelp] = useState("") + const [noRekening, setRekening] = useState("") + + const handleUpdate = async () => { + const token = window.localStorage.getItem("token") + if (token === undefined || token === null) { + window.location.replace("/auth/login") + return + } + const body = JSON.stringify({ + namaLengkap, + alamatInstruktur: alamat, + noTelp, + noRekening + }) + const updateQuery = await fetch("https://rpl-backend-production.up.railway.app/v1/instruktur/update/" + router.query.id, { + method: "PATCH", + headers: { + Authorization: token, + "Content-Type": "application/json" + }, + body + }).then(response => response).catch(() => null) + if (updateQuery === null) { + toast.error("Someting went wrong..") + return + } + if (updateQuery.status !== 200) { + toast.error("Failed to update...") + return + } + toast.success("Successfully updated!") + router.push("/instruktur") + return; + } + + useEffect(() => { + const token = window.localStorage.getItem("token") + if (token === undefined || token === null) { + window.location.replace("/auth/login") + return + } + fetch("https://rpl-backend-production.up.railway.app/v1/instruktur/list/" + router.query.id, { + method: "GET", + headers: { + "Authorization": token + } + }).then(async response => { + if (response.status !== 200) { + toast.error("Failed to retrieve items") + return + } + const responsejson = await response.json() + setNIK(responsejson.data.nikInstruktur) + setNamaLengkap(responsejson.data.namaLengkap) + setAlamat(responsejson.data.alamatInstruktur) + setTelp(responsejson.data.noTelp) + setRekening(responsejson.data.noRekening) + }) + //eslint-disable-next-line + }, []) + return <> + <Template> + <main className="min-h-screen px-14 py-5 bg-[#FFF6F6]"> + <div className="w-full mb-2"> + <span className="text-[#F875AA] font-bold text-2xl hover:cursor-pointer" onClick={(e) => { + e.preventDefault() + router.push("/") + }}>Back</span> + </div> + <h1 className="text-[#F875AA] font-extrabold text-5xl mb-20 text-center">Update Instruktur</h1> + <form className="w-2/3 mx-auto space-y-10 flex flex-col align-middle justify-evenly" onSubmit={(e) => { + e.preventDefault() + handleUpdate() + return; + }}> + <div className="flex flex-row align-middle justify-between"> + <span className="h-min my-auto font-bold text-lg">NIK</span> + <input disabled value={NIK} type="tel" required className="drop-shadow-xl w-2/3 p-2 rounded-xl" /> + </div> + <div className="flex flex-row align-middle justify-between"> + <span className="h-min my-auto font-bold text-lg">Nama Lengkap</span> + <input value={namaLengkap} onChange={(e) => { + setNamaLengkap(e.target.value) + }} type="text" required className="drop-shadow-xl w-2/3 p-2 rounded-xl" /> + </div> + <div className="flex flex-row align-middle justify-between"> + <span className="h-min my-auto font-bold text-lg">Alamat</span> + <input value={alamat} onChange={(e) => { + setAlamat(e.target.value) + }} type="text" required className="drop-shadow-xl w-2/3 p-2 rounded-xl" /> + </div> + <div className="flex flex-row align-middle justify-between"> + <span className="h-min my-auto font-bold text-lg">No Telp</span> + <input value={noTelp} onChange={(e) => { + setTelp(e.target.value) + }} type="tel" required className="drop-shadow-xl w-2/3 p-2 rounded-xl" /> + </div> + <div className="flex flex-row align-middle justify-between"> + <span className="h-min my-auto font-bold text-lg">No Rekening</span> + <input value={noRekening} onChange={(e) => { + setRekening(e.target.value) + }} type="tel" required className="drop-shadow-xl w-2/3 p-2 rounded-xl" /> + </div> + <input type="submit" className="bg-[#F875AA] px-8 py-3 text-xl font-bold text-white rounded-xl mx-auto" value={"Simpan"} /> + </form> + + </main> + </Template > + </> + } + export default Edit \ No newline at end of file diff --git a/pages/instruktur/index.jsx b/pages/instruktur/index.jsx index e7addad1d25dd930b781841333f29ac24748821b..018cb35c3043970d6f358ab733800e8951214df1 100644 --- a/pages/instruktur/index.jsx +++ b/pages/instruktur/index.jsx @@ -6,6 +6,34 @@ const Index = () => { const [rows, setRows] = useState([]) const router = useRouter() const [deleteToggle, setDeleteToggle] = useState(null) + const [currentPage, setCurrentPage] = useState(1); + const [isLastPage, setLastPage] = useState(false) + + const getNextPage = async (page) => { + const token = window.localStorage.getItem("token") + if (token === undefined || token === null) { + window.location.replace("/auth/login") + return; + } + const getItems = await fetch("https://rpl-backend-production.up.railway.app/v1/instruktur/list?page=" + (page), { + method: "GET", + headers: { + Authorization: token + } + }).then(response => response).catch(() => null) + if (getItems === null) { + toast.error("Something went wrong..") + return; + } + if (getItems.status !== 200) { + toast.error("Unable to get more items!") + return + } + const responsejson = await getItems.json(); + setLastPage(responsejson.data.length < 10) + setRows(responsejson.data); + return + } const handleDelete = async () => { const token = window.localStorage.getItem("token") if (token === undefined || token === null) { @@ -55,9 +83,18 @@ const Index = () => { <Template> <main className="min-h-screen px-14 py-5 bg-[#FFF6F6]"> <div className="w-full mb-2"> - <span className="text-[#F875AA] font-bold text-2xl">Back</span> + <span className="text-[#F875AA] font-bold text-2xl hover:cursor-pointer" onClick={(e) => { + e.preventDefault() + router.push("/") + }}>Back</span> + </div> + <div className="flex flex-row align-middle justify-between"> + <h1 className="text-[#F875AA] font-extrabold text-5xl mb-8">Data Instruktur</h1> + <button onClick={(e) => { + e.preventDefault(); + router.push("/instruktur/create") + }} className="bg-[#F875AA] p-4 text-lg font-bold text-white rounded-3xl">Create</button> </div> - <h1 className="text-[#F875AA] font-extrabold text-5xl mb-8">Data Instruktur</h1> <table className="w-full text-center border-spacing-3 border-separate"> <thead> <tr> @@ -92,6 +129,17 @@ const Index = () => { })} </tbody> </table> + <div className="flex flex-row align-middle justify-around"> + <button className="bg-red-400 p-5 rounded-2xl text-white font-bold" disabled={currentPage === 1} onClick={() => { + getNextPage(currentPage - 1) + setCurrentPage(page => page - 1) + }}>Prev</button> + <span className="h-min my-auto font-bold">Page {currentPage}</span> + <button className="bg-blue-400 p-5 rounded-2xl text-white font-bold" disabled={isLastPage} onClick={() => { + getNextPage(currentPage + 1) + setCurrentPage(page => page + 1) + }}>Next</button> + </div> </main> {deleteToggle !== null && <div className="left-0 top-0 fixed w-screen h-screen bg-white bg-opacity-80 p-20 flex flex-col align-middle justify-center"> <div className="w-1/2 mx-auto space-y-5">