172 lines
4.9 KiB
JavaScript
172 lines
4.9 KiB
JavaScript
import { DatatablePrimeV2 } from '@/components/Datatables-v2'
|
|
import { Belakang } from '@/components/Layouts'
|
|
import { Judul } from '@/components/TextCustom'
|
|
import { VerifikasiList } from '@/services/otorisasi/verifikasi-service'
|
|
import { Formik } from 'formik'
|
|
import moment from 'moment'
|
|
import Head from 'next/head'
|
|
import Link from 'next/link'
|
|
import { Button } from 'primereact/button'
|
|
import { Calendar } from 'primereact/calendar'
|
|
import { Card } from 'primereact/card'
|
|
import { Column } from 'primereact/column'
|
|
import { InputText } from 'primereact/inputtext'
|
|
import { Toast } from 'primereact/toast'
|
|
import React, { useEffect, useRef, useState } from 'react'
|
|
|
|
export default function Pengesahan() {
|
|
const toast = useRef(null)
|
|
const [data, setData] = useState([])
|
|
const [loading, setLoading] = useState(false)
|
|
const [search, setSearch] = useState({})
|
|
|
|
// DATATABLE
|
|
const [first, setFirst] = useState(0)
|
|
const [page, setPage] = useState(1)
|
|
const [length, setLength] = useState(10)
|
|
const [totalRecords, setTotalRecords] = useState(0)
|
|
const [orderDir, setOrderDir] = useState('desc')
|
|
const [orderCol, setOrderCol] = useState(2)
|
|
const [sort, setSort] = useState([])
|
|
|
|
useEffect(() => {
|
|
setLoading(true)
|
|
let params = {
|
|
draw: page,
|
|
start: first,
|
|
length: length,
|
|
order_col: orderCol,
|
|
order_dir: orderDir,
|
|
}
|
|
|
|
const { no_spp, tanggal_input } = search
|
|
params.no_spp = no_spp ? no_spp : ''
|
|
params.tanggal_input = tanggal_input ? moment(tanggal_input).format('YYYY-MM-DD') : ''
|
|
|
|
VerifikasiList(params).then((res) => {
|
|
setData(res.data)
|
|
setLoading(false)
|
|
setTotalRecords(
|
|
res.recordsFiltered === 1 ? 1 : res.recordsFiltered < 1 ? res.recordsFiltered : res.recordsFiltered
|
|
)
|
|
})
|
|
}, [page, first, length, search, orderCol, orderDir])
|
|
|
|
const actionBodyTemplate = (rowData) => {
|
|
return (
|
|
<div className='flex gap-x-2'>
|
|
<Link href={`/otorisasi/pengesahan/form?tagihan_id=${rowData.tagihan_id}`}>
|
|
<Button icon='pi pi-play' label='Proses' className='p-button-sm p-button-rounded' />
|
|
</Link>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const Pencarian = (
|
|
<React.Fragment>
|
|
<Formik
|
|
initialValues={{ no_spp: '', tanggal_input: '' }}
|
|
onSubmit={(values) => {
|
|
const tempTanggalInput = values.tanggal_input
|
|
values.tanggal_input &&
|
|
Object.assign(values, { tanggal_input: moment(values.tanggal_input).format('YYYY-MM-D') })
|
|
setSearch(values)
|
|
values.tanggal_input = tempTanggalInput
|
|
}}
|
|
>
|
|
{({ values, handleChange, handleSubmit }) => {
|
|
return (
|
|
<form onSubmit={handleSubmit}>
|
|
<div className='flex gap-x-5 items-center justify-center'>
|
|
<div className='flex flex-col'>
|
|
<label htmlFor='no_spp'>No SPP</label>
|
|
<InputText
|
|
id='no_spp'
|
|
name='no_spp'
|
|
value={values.no_spp}
|
|
onChange={handleChange}
|
|
placeholder='Masukkan Nomor SPP'
|
|
/>
|
|
</div>
|
|
<div className='flex flex-col'>
|
|
<label htmlFor='no_spp'>Tanggal Kirim</label>
|
|
<Calendar
|
|
name='tanggal_input'
|
|
value={values.tanggal_input}
|
|
onChange={handleChange}
|
|
placeholder='e.g. 17 Agustus 1945'
|
|
dateFormat='dd MM yy'
|
|
showButtonBar
|
|
></Calendar>
|
|
</div>
|
|
<div className='flex flex-col'>
|
|
<label htmlFor=''> </label>
|
|
<Button type='submit' label='Cari' className='p-button-sm p-button-success' icon='pi pi-search' />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
)
|
|
}}
|
|
</Formik>
|
|
</React.Fragment>
|
|
)
|
|
|
|
const bodyTanggal = (rowData) => {
|
|
return rowData.tanggal_kirim === '-' ? rowData.tanggal_kirim : moment(rowData.tanggal_kirim).format('DD MMMM YYYY')
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Toast ref={toast} />
|
|
<Head>
|
|
<title>Pengesahan</title>
|
|
</Head>
|
|
<Belakang>
|
|
<Judul>Pengesahan</Judul>
|
|
<Card className='card-search my-3'>{Pencarian}</Card>
|
|
<DatatablePrimeV2
|
|
data={data}
|
|
first={first}
|
|
length={length}
|
|
loading={loading}
|
|
page={page}
|
|
setFirst={setFirst}
|
|
setLength={setLength}
|
|
setPage={setPage}
|
|
totalRecords={totalRecords}
|
|
sort={sort}
|
|
onSort={(e) => {
|
|
setSort(e.multiSortMeta)
|
|
if (e.multiSortMeta.length > 0) {
|
|
switch (e.multiSortMeta[0].field) {
|
|
case 'no_spp':
|
|
setOrderCol(0)
|
|
break
|
|
|
|
case 'tanggal':
|
|
setOrderCol(2)
|
|
break
|
|
}
|
|
|
|
switch (e.multiSortMeta[0].order) {
|
|
case -1:
|
|
setOrderDir('desc')
|
|
break
|
|
|
|
case 1:
|
|
setOrderDir('asc')
|
|
break
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
<Column field='no_spp' header='Nomor SPP' sortable></Column>
|
|
<Column field='unit' header='Unit' sortable></Column>
|
|
<Column field='tanggal' header='Tanggal Kirim' body={bodyTanggal} sortable></Column>
|
|
<Column header='Action' body={actionBodyTemplate} exportable={false}></Column>
|
|
</DatatablePrimeV2>
|
|
</Belakang>
|
|
</>
|
|
)
|
|
}
|