130 lines
3.6 KiB
JavaScript
130 lines
3.6 KiB
JavaScript
|
import { DatatablePrime } from '@/components/Datatables'
|
||
|
|
import { DialogDelete } from '@/components/Dialog'
|
||
|
|
import FormJenisKegiatan from '@/components/Form/JenisKegiatan'
|
||
|
|
import { Belakang } from '@/components/Layouts'
|
||
|
|
import { Judul } from '@/components/TextCustom'
|
||
|
|
import { JenisKegiatanDelete, JenisKegiatanGetOne, JenisKegiatanList } from '@/services/referensi/jenisKegiatan-service'
|
||
|
|
import Head from 'next/head'
|
||
|
|
import { Button } from 'primereact/button'
|
||
|
|
import { Column } from 'primereact/column'
|
||
|
|
import { Toast } from 'primereact/toast'
|
||
|
|
import { useEffect, useRef, useState } from 'react'
|
||
|
|
|
||
|
|
export default function JenisKegiatan() {
|
||
|
|
const toast = useRef(null)
|
||
|
|
const [data, setData] = useState([])
|
||
|
|
const [dialogForm, setDialogForm] = useState(false)
|
||
|
|
const [dataEdit, setDataEdit] = useState([])
|
||
|
|
const [refresh, setRefresh] = useState(0)
|
||
|
|
const [search, setSearch] = useState('')
|
||
|
|
const [dialogDelete, setDialogDelete] = useState({})
|
||
|
|
const [dataDrawPrev, setDataDrawPrev] = useState([])
|
||
|
|
const [dataDrawNext, setDataDrawNext] = useState([])
|
||
|
|
const [draw, setDraw] = useState(1)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
let params = {}
|
||
|
|
|
||
|
|
if (search !== null && search !== '') {
|
||
|
|
params.search = search
|
||
|
|
} else {
|
||
|
|
params.search = ''
|
||
|
|
}
|
||
|
|
|
||
|
|
params.draw = draw
|
||
|
|
JenisKegiatanList(params).then((res) => setData(res.data))
|
||
|
|
|
||
|
|
if (draw > 1) {
|
||
|
|
params.draw = draw > 1 ? draw - 1 : draw
|
||
|
|
JenisKegiatanList(params).then((res) => setDataDrawPrev(res.data))
|
||
|
|
}
|
||
|
|
params.draw = draw + 1
|
||
|
|
JenisKegiatanList(params).then((res) => setDataDrawNext(res.data))
|
||
|
|
}, [search, refresh, draw])
|
||
|
|
|
||
|
|
const editJenisKegiatan = (data) => {
|
||
|
|
JenisKegiatanGetOne({ ref_id: data.jenis_id }).then((res) => {
|
||
|
|
if (res.status === 'ok') {
|
||
|
|
setDataEdit(res.data)
|
||
|
|
setDialogForm(true)
|
||
|
|
} else {
|
||
|
|
console.log(res.message)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const deleteJenisKegiatan = () => {
|
||
|
|
JenisKegiatanDelete({ ref_id: dialogDelete.ref_id }).then((res) => {
|
||
|
|
if (res.status === 'success') {
|
||
|
|
setRefresh(Math.random)
|
||
|
|
setDialogDelete({ visible: false })
|
||
|
|
toast.current.show({
|
||
|
|
severity: 'success',
|
||
|
|
detail: res.message,
|
||
|
|
closable: false,
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
setDialogDelete({ visible: false })
|
||
|
|
toast.current.show({
|
||
|
|
severity: 'error',
|
||
|
|
detail: res.message,
|
||
|
|
closable: false,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const actionBodyTemplate = (rowData) => {
|
||
|
|
return (
|
||
|
|
<div className='flex gap-x-2'>
|
||
|
|
<Button
|
||
|
|
icon='pi pi-pencil'
|
||
|
|
className='p-button-sm p-button-rounded'
|
||
|
|
onClick={() => editJenisKegiatan(rowData)}
|
||
|
|
/>
|
||
|
|
<Button
|
||
|
|
icon='pi pi-trash'
|
||
|
|
className='p-button-sm p-button-rounded p-button-danger'
|
||
|
|
onClick={() => setDialogDelete({ ref_id: rowData.jenis_id, visible: true })}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Toast ref={toast} />
|
||
|
|
<Head>
|
||
|
|
<title>Jenis Kegiatan</title>
|
||
|
|
</Head>
|
||
|
|
<Belakang>
|
||
|
|
<Judul>Jenis Kegiatan</Judul>
|
||
|
|
<DatatablePrime
|
||
|
|
data={data}
|
||
|
|
dataDrawPrev={dataDrawPrev}
|
||
|
|
dataDrawNext={dataDrawNext}
|
||
|
|
draw={draw}
|
||
|
|
setDraw={setDraw}
|
||
|
|
setSearch={setSearch}
|
||
|
|
dialogForm={dialogForm}
|
||
|
|
setDialogForm={setDialogForm}
|
||
|
|
Form={FormJenisKegiatan}
|
||
|
|
buttonAdd={true}
|
||
|
|
buttonAddLabel='Tambah data'
|
||
|
|
dataEdit={dataEdit}
|
||
|
|
setDataEdit={setDataEdit}
|
||
|
|
toast={toast}
|
||
|
|
refresh={setRefresh}
|
||
|
|
>
|
||
|
|
<Column field='nama' header='Jenis Kegiatan' sortable></Column>
|
||
|
|
<Column header='Action' body={actionBodyTemplate} exportable={false}></Column>
|
||
|
|
</DatatablePrime>
|
||
|
|
</Belakang>
|
||
|
|
|
||
|
|
{dialogDelete.visible === true && (
|
||
|
|
<DialogDelete data={dialogDelete} setDelete={setDialogDelete} onCallback={deleteJenisKegiatan} />
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|