2024-05-14 22:19:14 +07:00

123 lines
3.4 KiB
JavaScript

import { DatatablePrime } from '@/components/Datatables'
import { DialogDelete } from '@/components/Dialog'
import FormAkun from '@/components/Form/Akun'
import { Belakang } from '@/components/Layouts'
import { Judul } from '@/components/TextCustom'
import { AkunDelete, AkunGetOne, AkunList } from '@/services/referensi/akun-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 Akun() {
const toast = useRef(null)
const [data, setData] = useState([])
const [dataDrawPrev, setDataDrawPrev] = useState([])
const [dataDrawNext, setDataDrawNext] = useState([])
const [dialogForm, setDialogForm] = useState(false)
const [dataEdit, setDataEdit] = useState([])
const [refresh, setRefresh] = useState(0)
const [search, setSearch] = useState('')
const [dialogDelete, setDialogDelete] = useState({})
const [draw, setDraw] = useState(1)
useEffect(() => {
let params = {}
params.draw = draw
search !== null && search !== '' ? (params.search = search) : ''
AkunList(params).then((res) => setData(res.data))
if (draw > 1) {
params.draw = draw > 1 ? draw - 1 : draw
AkunList(params).then((res) => setDataDrawPrev(res.data))
}
params.draw = draw + 1
AkunList(params).then((res) => setDataDrawNext(res.data))
}, [refresh, search, draw])
const editAkun = (data) => {
AkunGetOne({ akun_id: data.akun_id }).then((res) => {
if (res.status === 'ok') {
setDataEdit(res.data)
setDialogForm(true)
} else {
console.log(res.message)
}
})
}
const actionBodyTemplate = (rowData) => {
return (
<div className='flex gap-x-2'>
<Button icon='pi pi-pencil' className='p-button-sm p-button-rounded' onClick={() => editAkun(rowData)} />
<Button
icon='pi pi-trash'
className='p-button-sm p-button-rounded p-button-danger'
onClick={() => setDialogDelete({ akun_id: rowData.akun_id, visible: true })}
/>
</div>
)
}
const deleteAkun = () => {
AkunDelete({ 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,
})
}
})
}
return (
<>
<Toast ref={toast} />
<Head>
<title>Akun</title>
</Head>
<Belakang>
<Judul>Akun</Judul>
<DatatablePrime
data={data}
dataDrawPrev={dataDrawPrev}
dataDrawNext={dataDrawNext}
draw={draw}
setDraw={setDraw}
setSearch={setSearch}
dialogForm={dialogForm}
setDialogForm={setDialogForm}
Form={FormAkun}
buttonAdd={true}
buttonAddLabel='Tambah data'
dataEdit={dataEdit}
setDataEdit={setDataEdit}
toast={toast}
refresh={setRefresh}
>
<Column field='akun_id' header='Nomor Akun' sortable></Column>
<Column field='nama' header='Nama Akun' sortable></Column>
<Column header='Action' body={actionBodyTemplate} exportable={false}></Column>
</DatatablePrime>
</Belakang>
{dialogDelete.visible === true && (
<DialogDelete data={dialogDelete} setDelete={setDialogDelete} onCallback={deleteAkun} />
)}
</>
)
}