Skip to content
Snippets Groups Projects
Commit 58435475 authored by Michelle Lim's avatar Michelle Lim
Browse files

Merge branch 'michelle' into 'main' 

feat: instruktur pages done

See merge request !2
parents ef0a349e 49d78cba
1 merge request!2feat: instruktur pages done
Hide whitespace changes
Inline Side-by-side
pages/instruktur/create.jsx 0 → 100644
+ 100
− 0
View file @ 58435475
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
pages/instruktur/edit/[id].jsx
+ 120
− 3
View file @ 58435475
import Template from "@/components/template"
import { useEffect, useState } from "react"
import { toast } from "react-toastify"
import { useRouter } from "next/router"
const Edit = () => { const Edit = () => {
return <h1> const router = useRouter()
Jaran Goyang const [NIK, setNIK] = useState("")
</h1> 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 export default Edit
\ No newline at end of file
pages/instruktur/index.jsx
+ 50
− 2
View file @ 58435475
...@@ -6,6 +6,34 @@ const Index = () => { ...@@ -6,6 +6,34 @@ const Index = () => {
const [rows, setRows] = useState([]) const [rows, setRows] = useState([])
const router = useRouter() const router = useRouter()
const [deleteToggle, setDeleteToggle] = useState(null) 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 handleDelete = async () => {
const token = window.localStorage.getItem("token") const token = window.localStorage.getItem("token")
if (token === undefined || token === null) { if (token === undefined || token === null) {
...@@ -55,9 +83,18 @@ const Index = () => { ...@@ -55,9 +83,18 @@ const Index = () => {
<Template> <Template>
<main className="min-h-screen px-14 py-5 bg-[#FFF6F6]"> <main className="min-h-screen px-14 py-5 bg-[#FFF6F6]">
<div className="w-full mb-2"> <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> </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"> <table className="w-full text-center border-spacing-3 border-separate">
<thead> <thead>
<tr> <tr>
...@@ -92,6 +129,17 @@ const Index = () => { ...@@ -92,6 +129,17 @@ const Index = () => {
})} })}
</tbody> </tbody>
</table> </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> </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"> {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"> <div className="w-1/2 mx-auto space-y-5">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment