61 lines
2.3 KiB
JavaScript
61 lines
2.3 KiB
JavaScript
import React, { useState } from 'react'
|
|
import { Head } from '@inertiajs/react'
|
|
import ModalInput from '@/Components/ModalInput'
|
|
import DeleteButton from '@/Components/deleteButton'
|
|
|
|
export default function IndexSantri({ santri, fields, options }) {
|
|
const [selectedSantri, setSelectedSantri] = useState(null)
|
|
const [isDeleteOpen, setDeleteOpen] = useState(false)
|
|
|
|
const openDeleteModal = (item) => {
|
|
setSelectedSantri(item)
|
|
setDeleteOpen(true)
|
|
}
|
|
|
|
|
|
return (
|
|
<div className="text-red-900">
|
|
<Head title="Daftar Santri" />
|
|
<h1>Daftar Santri</h1>
|
|
|
|
<ModalInput
|
|
fields={fields}
|
|
options={options}
|
|
tableName="santris"
|
|
initialData={selectedSantri}
|
|
onClose={() => setSelectedSantri(null)}
|
|
/>
|
|
|
|
<label htmlFor="modal_input" className="btn btn-primary" onClick={() => setSelectedSantri(null)}>Tambah Santri</label>
|
|
|
|
{santri ? santri.map((item, i) => {
|
|
return (
|
|
<div key={i} className="border p-4 mb-2">
|
|
<p>Nama: {item.nama}</p>
|
|
<p>Alamat: {item.alamat}</p>
|
|
<p>Status: {item.status_santri}</p>
|
|
<p>Role: {item.role_santri}</p>
|
|
<p>Jenis Kelamin: {item.jk}</p>
|
|
<p>Tanggal Lahir: {item.tanggal_lahir}</p>
|
|
<p>Foto: {item.foto}</p>
|
|
<div className="mt-2">
|
|
<button className="btn btn-warning btn-sm" onClick={() => {
|
|
setSelectedSantri(item);
|
|
document.getElementById('modal_input').checked = true;
|
|
}}>
|
|
Edit
|
|
</button>
|
|
<button className='btn btn-error btn-sm ml-4 text-white' onClick={() => openDeleteModal(item)}>Hapus</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}) : ""}
|
|
<DeleteButton
|
|
isOpen={isDeleteOpen}
|
|
onClose={() => setDeleteOpen(false)}
|
|
item={selectedSantri}
|
|
tableName="santris"
|
|
/>
|
|
</div>
|
|
);
|
|
} |